Want to Learn a New Language? Write a Blog Backend!

Most of the content on my blog requires a fair bit of technical context to understand. This post is aimed at beginners as well as people with a lot more experience in the industry. It also covers a question that I get asked a lot:

<Mara> What is a good project to use for learning a new programming language? It seems like a really open ended question and it can be hard to see where I would end up with such a thing.

Here is a project that you can use as an end goal for learning to program in a new language: I call it Within's Minimal Viable Blog. With this project you will build a blog engine that can also function as a portfolio site.

<Mara> A portfolio site is a personal website where you can show off what you've done and helps you stand out from the crowd. The blog you are reading right now is a perfect example of a portfolio site. These kinds of sites are also important in a "keeping the internet weird" sense. You can do a lot more flair and customization to a website you own than you can to a Twitter profile or similiar.

It's also designed to make you dip your toes into a lot of commonly used technologies and computer science fundamentals in the process. Namely it makes you deal with these buzzwords:

• State management (remembering/recalling things persistently)
• Basic web serving
• HTML templating
• Static file serving
• Input sanitization (making sure that invalid input can't cause JavaScript injections, etc)
• Sessions (remembering who a user is between visits to a page)

<Cadey> You can rip out a lot of this and still end up with a viable result, such as by making a static site generator. However if you have never done something like this before I'd be willing to argue that it's well worth your time to attempt to do something like this at least once.

At a high level, here's what you should end up with:

• An abstract "Post" datatype with a title, publication date, a "URL slug" and content in plain text
• A home page at / that describes yourself to the world
• A list of blog posts at /blog
• Individual blog posts at /blog/{date}/{slug}
• A /contact page explaining how to contact you
• An admin area at /admin/* that is protected by a username and password
• An admin form that lets you create new posts
• An admin form that lets you edit existing posts
• An admin form that lets you delete posts
• An admin view that lets you list all posts
• Use a CSS theme you like (worst case: pick one at random) to make it look nice
• HTML templates for the base layout and page details

<Mara> All these admin views and forms are needed because they are what allow you to modify content on the blog. When you upload code to GitHub or use the web editor, this is the kind of thing that GitHub has implemented on the backend. You can also likely reuse the "new post" form as the "edit post" form because they do very similar things.

For extra credit, you can do the following extra things:

• Add an "updated at" date that shows up if the post has been edited
• Add tags on posts that let users find posts by tag
• JSONFeed support
• "Draft" posts which aren't visible on the public blog index or feeds, but can be shared by URL
• Use CSRF protection on the admin panel
• Deploy it on a VPS and serve it to the internet (use Caddy to make this easier)
• Pagination of post lists

If you've never done a project like this, this may take you a bit longer. You will have to do some research on the best way to write things in your language of choice. A good starting language for this is something like Python with Flask or Go with the standard library, namely with net/http and html/template. This may take you a week or two. If you've done this kind of thing before, it may take a few days to a week depending on how much experimentation you are doing.

<Numa> What the heck is a "URL slug"?

<Mara> Most of the time a "URL slug" means some URL-safe set of characters that help humans identify what the content is about. If you look at the URL for this article, you can see that its slug is new-language-blog-backend, which is purely for humans to read. You can either take this as something you generate by hand on each post, or take the title, remove non-space and non-alphanumeric characters, lowercase it and then replace spaces with dashes. This would turn "Hello World!" into "hello-world" or similiar.

Here are a few steps that may help you get started doing this:

• Serve a static file at / that contains <h1>Hello, world!</h1>
• Create a SQLite connection and the posts table
• Insert a post into your database by hand with the sqlite3 console
• Wire up a /blog/{date}/{slug} route to show that post
• Wire up /blog to show all the posts in the database
• Make static pages for / and /contact
• Choose a templating language and create a base template
• Edit all your routes to use that base template
• Create the admin login page and a POST route to receive the HTML form and check the username/password against something in the SQLite database, creating a session for the admin panel
• Create an external tool that lets you manually set your username and password
• Create an admin view that shows all posts
• Create a form that lets you create a new post and its associated POST handler
• Create a form that lets you edit an existing post and its associated POST handler
• Use a CSS theme to make it all look nice

There are no wrong ways to do this. You can take shortcuts where you want. You can use Markdown for formatting posts. You can do anything you want based on this skeleton and it will be your creation. Nobody else will have something exactly like this. It will let you stand out as a professional and can help you create your own home on the internet.

<Numa> Something else to keep in mind here is that this first attempt will be ugly as sin. It will be hacky as all hell. However the important part here is that it works above all else. You can come back and make it better later. The first pass is always the most ugly, do not let this discourage you. This is a personal form of expression. Don't be afraid to let your personality show through your website. That's what helps to make you stand out in a sea of LinkedIn and Twitter profiles.

<Mara> Yeah, getting started in something you've never really done before can be hard because you won't really have a good idea of what's "correct". The only "correct" thing in this project is that you can connect with a browser and see the things you expect. Take chances, make mistakes, get messy!

If you do go through with this and want to show it off to people in a followup post, email your results to [email protected] with the following information:

• Your name/alias (you don't have to use your legal name)
• How much background you have in programming
• The language you are writing this in
• Screenshots you want to share
• Anything you learned along the way, where you got stuck, what got you unstuck and anything else you want to say
• If you uploaded it to GitHub, the repository URL would be nice but is not required
• If you deployed it to a server, the link to where it's running would also be nice but is definitely not required

The road to expertise is paved with the effort of experimentation. I hope that this open-ended project can help you learn things.

This article was posted on M03 02 2022. Facts and circumstances may have changed since publication. Please contact me before jumping to conclusions if something seems wrong or unclear.

Tags: beginner backend

This post was not WebMentioned yet. You could be the first!

The art for Mara was drawn by Selicre.

The art for Cadey was drawn by ArtZora Studios.