Want to Learn a New Language? Write a Blog Backend!
A 9 minute read.
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
"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: beginnerbackend
This post was not WebMentioned yet. You could be the first!