DEV Community

Emilie Ma
Emilie Ma

Posted on • Originally published at kewbish.github.io

CS50 Track - Web

This post is edited from my original blog post. Find it, and other posts by me on kewbish.github.io/blog.

Introduction

This post is going to be shorter than normal. I may or may not have forgotten to take proper notes for most of this track except Flask.

Web track, check. Homepage and Finance were pretty fun, and now, we have the final project ahead. This week (or track, I suppose) went through web technologies, going through HTML / CSS / JS and Flask. I've been planning on learning Flask for a while, and this was a great opportunity to try to use it! I know I said that Week 5 was the week I'd been looking forward to the most, but it was genuinely really nice this week to finally work on something I have experience with.

Notes

  • Each machine has an IP
    • used to use IPv4 -> 32 bit addresses
    • now IPv6 -> 128 bit addresses
    • IPv4 overflowed (too many devices)
  • HTTP -> protocol to transfer information
    • HyperText Transfer Protocol
  • DNS -> maps domain numbers to servers that can resolve that domain
  • Response codes -> return of request
  • Flask -> microframework to make web apps w/ Python
  • Flask templates -> render_template()
    • allows us to interpolate variables, extend layouts
  • Flask templating uses Jinja syntax
    • Like Vue mustache syntax, but with % signs
    • specific end blocks for for and if
  • request.args.get() is useful for getting form inputs
    • remember to sanitize input and make sure that inputs exist
      • otherwise, return error
  • In Finance, we make separate conditions to return different templates if post/get
  • use Flask sessions to maintain data like user cookies, etc.
    • otherwise, use the sqlite database
      • run queries with db.execute

Problems

I did Finance first, because I thought that I wanted to redesign my own site for Homepage (spoiler alert: didn't end up doing that). I found their todo-list structure of teaching / explaining what to do quite interesting, and avoided the tedium of creating boilerplate.

Giving freedom to implement however we liked was a good idea in terms of implementation and research, but this comes at the cost of testing. (Or maybe this just wasn't in the CS50 check50 library and they didn't want to add a bunch of overhead for one problem set check) This might have been an interesting opportunity to explain TDD (hmm, another thing that I should learn) or even just explaining what automated testing was.

When I decided it was finally time to try to attempt redesigning my website, I quickly realized that it'd take ages, especially since I don't have any ideas right now. The requirements were a 4-page website, so I just slapped an extra page (that looks nothing like the rest of my site because it's entirely built with Bootstrap) onto my current site. For the JS requirement, I worked in one of those console header things; y'know, console.log()s in most big sites that remind you to apply for their jobs.

It's pretty simple, but I was feeling tired. Which is another discussion point - I think Homepage was probably the only big problem in CS50 where I didn't really feel challenged, besides the Python ones. Even with the Python ones I was trying to time myself in a self-run programming contest, whereas here I was just trying to speedrun. Despite this week's relative slow pace, I have a scheme for the final project.

Conclusion

I can't believe I'm already almost through with CS50 - as of writing this, I think it's only been a month and a couple days. I'm surprised how much I managed to speedrun, and how much I managed to learn in the meantime. It's been an great time, and I might consider doing the Web Programming course as well. (Or maybe not. We'll see.) Time to start brainstorming for a final project (I have too many ideas and I have a feeling I'm going to go with none of the above) - hopefully it'll turn out interesting.

What are your experiences with Flask? What Flask features should I check out?

Discussion (0)