Developing a Flask Blog

December 07, 2020

I'm pretty proud to say that I designed this blog you're looking at from scratch. Okay, maybe I did copy and paste a bit of Javascript from Stack Overflow, but who doesn't? This was a fun and interesting project because I had originally started learning to code through Team Treehouse's front-end web development course - so CSS, HTML, and Javascript are a bit like old friends that I had long forgotten. The key is the forgotten part. It definitely took a bit of memory jogging and head banging to bring myself back up to speed, but I'd say it turned out well.

You can find the code for this website here.

The Why

  1. At Recurse, you are highly encouraged to document your projects and create a small portfolio of what you've done. I'd dare say my work isn't at 'portfolio' level yet, but hopefully one day it will be.
  2. I also wanted to try my hand at designing another flask web app. I'd messed around with some of it's capabilities in the past, but by implementing the 'Wordpress' and 'MailChimp' aspects of this blog I got to dive in a lot deeper.
  3. I found CSS tedious and annoying previously. I wanted to try my hand at it again now that I have more experience with other languages. I still find it rather confusing and annoying, but perhaps less so now that I have a greater understanding.

The What

The blog displays a list of my projects and adventures. You can click on posts to read them, watch videos and see images. You can subscribe and get an automatic welcome email that is sent by Flask-mail. Once you've logged in, you can create posts, upload images, send emails (including view previews and send test emails) and eventually edit/delete posts. These functions are reserved for my use only.

Image of the admin panel after you have just logged in

Image of the Create Post page

Image of the Send Email page.

The 'send test post' and 'preview' buttons for the send email page. The preview creates a small preview window by the button where you can preview the effect of different CSS styles on the email html.

The How

This explanation could get fairly involved, but I'll try to keep it simple in the following three paragraphs:

The first key is flask. Flask is a wonderful python framework that allows you to create dynamic websites. You define each of the website's routes (aka website paths such as /home or /create) to render an html page (using the GET method) and/or perform some sort of function such as add data to a database or send emails (using the POST method). You can also populate the html pages with information that is generated when you call the functions defined by these routes.

Image of two of this app's routes.

There are several packages you can install such as Flask-login, flask-mail and flask-SQLAlchemy that allow you to easily add additional functionalities beyond the basic framework.

Javascript helps with some of the on-page dynamic-ness. Such as how when the screen's width is less than 769 pixels (ie on mobile), the top menu turns into a dynamic dropdown menu. As well as the modal subscribe pop up window.

CSS makes everything pretty. I wanted a simple minimalistic design that was focused on clean lines and a black and white color palette. This way the focus would be on the text and images. I played around a lot with floats and flex box to display the banners and top menu the way I liked. My goal was to not use bootstrap and I'm proud to say I did not.

Potential Next Steps:

  1. Add a "Tags" database so that I could allow readers to find posts they're interested in using tags such as "Python" or "Flask."
  2. Read up on security and make sure that my databases and such are secure against insertions (please no one try anything).
  3. Refactor the CSS code and consolidate it. Get rid of similar styling on various element id's and create universal styles. Get rid of things that are unnecessary.

Conclusion

Fun project. It took me 6 days to get this MVP model up and running. This project could go on and on and on because there's so many little features I could add, but it's time to tie a pretty little bow on it for now. Hopefully, I actually post on it.