The code and data behind xeiaso.net
blog backend writing to learn a new language
Signed-off-by: Xe Iaso <me@christine.website>
+156
+156
blog/new-language-blog-backend-2022-03-02.markdown
+156
blog/new-language-blog-backend-2022-03-02.markdown
···
1
+
---
2
+
title: "Want to Learn a New Language? Write a Blog Backend!"
3
+
date: 2022-03-02
4
+
tags:
5
+
- beginner
6
+
- backend
7
+
author: Twi
8
+
---
9
+
10
+
Most of the content on my blog requires a fair bit of technical context to
11
+
understand. This post is aimed at beginners as well as people with a lot more
12
+
experience in the industry. It also covers a question that I get asked a lot:
13
+
14
+
[What is a good project to use for learning a new programming language? It seems
15
+
like a really open ended question and it can be hard to see where I would end up
16
+
with such a thing.](conversation://Mara/hmm)
17
+
18
+
Here is a project that you can use as an end goal for learning to program in a
19
+
new language: I call it Within's Minimal Viable Blog. With this project you will
20
+
build a blog engine that can also function as a portfolio site.
21
+
22
+
[A portfolio site is a personal website where you can show off what you've done
23
+
and helps you stand out from the crowd. The blog you are reading right now is a
24
+
perfect example of a portfolio site. These kinds of sites are also important in
25
+
a "keeping the internet weird" sense. You can do a lot more flair and
26
+
customization to a website you own than you can to a Twitter profile or
27
+
similiar.](conversation://Mara/happy)
28
+
29
+
It's also designed to make you dip your toes into a lot of commonly used
30
+
technologies and computer science fundamentals in the process. Namely it makes
31
+
you deal with these buzzwords:
32
+
33
+
- State management (remembering/recalling things persistently)
34
+
- Basic web serving
35
+
- HTML templating
36
+
- Static file serving
37
+
- Input sanitization (making sure that invalid input can't cause JavaScript
38
+
injections, etc)
39
+
- Sessions (remembering who a user is between visits to a page)
40
+
41
+
[You can rip out a lot of this and still end up with a viable result, such as by
42
+
making a static site generator. However if you have never done something like
43
+
this before I'd be willing to argue that it's well worth your time to attempt to
44
+
do something like this at least once.](conversation://Cadey/enby)
45
+
46
+
At a high level, here's what you should end up with:
47
+
48
+
- An abstract "Post" datatype with a title, publication date, a "URL slug" and
49
+
content in plain text
50
+
- A home page at `/` that describes yourself to the world
51
+
- A list of blog posts at `/blog`
52
+
- Individual blog posts at `/blog/{date}/{slug}`
53
+
- A `/contact` page explaining how to contact you
54
+
- An admin area at `/admin/*` that is protected by a username and password
55
+
- An admin form that lets you create new posts
56
+
- An admin form that lets you edit existing posts
57
+
- An admin form that lets you delete posts
58
+
- An admin view that lets you list all posts
59
+
- Use a CSS theme you like (worst case: pick one at random) to make it look nice
60
+
- HTML templates for the base layout and page details
61
+
62
+
[All these admin views and forms are needed because they are what allow you to
63
+
modify content on the blog. When you upload code to GitHub or use the web
64
+
editor, this is the kind of thing that GitHub has implemented on the
65
+
backend. You can also likely reuse the "new post" form as the "edit post" form
66
+
because they do very similar things.](conversation://Mara/hacker)
67
+
68
+
For extra credit, you can do the following extra things:
69
+
70
+
- Add an "updated at" date that shows up if the post has been edited
71
+
- Add tags on posts that let users find posts by tag
72
+
- [JSONFeed](https://www.jsonfeed.org/) support
73
+
- "Draft" posts which aren't visible on the public blog index or feeds, but can
74
+
be shared by URL
75
+
- Use CSRF protection on the admin panel
76
+
- Deploy it on a VPS and serve it to the internet (use
77
+
[Caddy](https://caddyserver.com/) to make this easier)
78
+
- Pagination of post lists
79
+
80
+
If you've never done a project like this, this may take you a bit longer. You
81
+
will have to do some research on the best way to write things in your language
82
+
of choice. A good starting language for this is something like Python with
83
+
[Flask](https://flask.palletsprojects.com/en/2.0.x/) or Go with the standard
84
+
library, namely with [net/http](https://pkg.go.dev/net/http) and
85
+
[html/template](https://pkg.go.dev/html/template). This may take you a week or
86
+
two. If you've done this kind of thing before, it may take a few days to a week
87
+
depending on how much experimentation you are doing.
88
+
89
+
[What the heck is a "URL slug"?](conversation://Numa/delet)
90
+
91
+
[Most of the time a "URL slug" means some URL-safe set of characters that help
92
+
humans identify what the content is about. If you look at the URL for this
93
+
article, you can see that its slug is `new-language-blog-backend`, which is
94
+
purely for humans to read. You can either take this as something you generate by
95
+
hand on each post, or take the title, remove non-space and non-alphanumeric
96
+
characters, lowercase it and then replace spaces with dashes. This would turn
97
+
"Hello World!" into "hello-world" or similiar.](conversation://Mara/hacker)
98
+
99
+
Here are a few steps that may help you get started doing this:
100
+
101
+
- Serve a static file at `/` that contains `<h1>Hello, world!</h1>`
102
+
- Create a SQLite connection and the posts table
103
+
- Insert a post into your database by hand with the `sqlite3` console
104
+
- Wire up a `/blog/{date}/{slug}` route to show that post
105
+
- Wire up `/blog` to show all the posts in the database
106
+
- Make static pages for `/` and `/contact`
107
+
- Choose a templating language and create a base template
108
+
- Edit all your routes to use that base template
109
+
- Create the admin login page and a POST route to receive the HTML form and
110
+
check the username/password against something in the SQLite database, creating
111
+
a session for the admin panel
112
+
- Create an external tool that lets you manually set your username and password
113
+
- Create an admin view that shows all posts
114
+
- Create a form that lets you create a new post and its associated POST handler
115
+
- Create a form that lets you edit an existing post and its associated POST
116
+
handler
117
+
- Use a CSS theme to make it all look nice
118
+
119
+
There are no wrong ways to do this. You can take shortcuts where you want. You
120
+
can use Markdown for formatting posts. You can do anything you want based on
121
+
this skeleton and it will be _your_ creation. Nobody else will have something
122
+
exactly like this. It will let you stand out as a professional and can help you
123
+
create your own home on the internet.
124
+
125
+
[Something else to keep in mind here is that this first attempt will be ugly as
126
+
sin. It will be hacky as all hell. However the important part here is that it
127
+
works above all else. You can come back and make it better later. The first pass
128
+
is always the most ugly, do not let this discourage you. This is a personal form
129
+
of expression. Don't be afraid to let your personality show through your
130
+
website. That's what helps to make you stand out in a sea of LinkedIn and
131
+
Twitter profiles.](conversation://Numa/happy)
132
+
133
+
[Yeah, getting started in something you've never really done before can be hard
134
+
because you won't really have a good idea of what's "correct". The only
135
+
"correct" thing in this project is that you can connect with a browser and see
136
+
the things you expect. Take chances, make mistakes, get
137
+
messy!](conversation://Mara/happy)
138
+
139
+
If you do go through with this and want to show it off to people in a followup
140
+
post, email your results to
141
+
[blogchallenge2022@xeserv.us](mailto:blogchallenge2022@xeserv.us) with the
142
+
following information:
143
+
144
+
- Your name/alias (you don't have to use your legal name)
145
+
- How much background you have in programming
146
+
- The language you are writing this in
147
+
- Screenshots you want to share
148
+
- Anything you learned along the way, where you got stuck, what got you unstuck
149
+
and anything else you want to say
150
+
- If you uploaded it to GitHub, the repository URL would be nice but is not
151
+
required
152
+
- If you deployed it to a server, the link to where it's running would also be
153
+
nice but is definitely not required
154
+
155
+
The road to expertise is paved with the effort of experimentation. I hope that
156
+
this open-ended project can help you learn things.