blog backend writing to learn a new language
Signed-off-by: Xe Iaso <me@christine.website>
This commit is contained in:
parent
1364b30305
commit
e4786467df
|
|
@ -0,0 +1,156 @@
|
||||||
|
---
|
||||||
|
title: "Want to Learn a New Language? Write a Blog Backend!"
|
||||||
|
date: 2022-03-02
|
||||||
|
tags:
|
||||||
|
- beginner
|
||||||
|
- backend
|
||||||
|
author: Twi
|
||||||
|
---
|
||||||
|
|
||||||
|
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:
|
||||||
|
|
||||||
|
[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.](conversation://Mara/hmm)
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
[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.](conversation://Mara/happy)
|
||||||
|
|
||||||
|
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)
|
||||||
|
|
||||||
|
[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.](conversation://Cadey/enby)
|
||||||
|
|
||||||
|
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
|
||||||
|
|
||||||
|
[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.](conversation://Mara/hacker)
|
||||||
|
|
||||||
|
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](https://www.jsonfeed.org/) 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](https://caddyserver.com/) 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](https://flask.palletsprojects.com/en/2.0.x/) or Go with the standard
|
||||||
|
library, namely with [net/http](https://pkg.go.dev/net/http) and
|
||||||
|
[html/template](https://pkg.go.dev/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.
|
||||||
|
|
||||||
|
[What the heck is a "URL slug"?](conversation://Numa/delet)
|
||||||
|
|
||||||
|
[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.](conversation://Mara/hacker)
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
[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.](conversation://Numa/happy)
|
||||||
|
|
||||||
|
[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!](conversation://Mara/happy)
|
||||||
|
|
||||||
|
If you do go through with this and want to show it off to people in a followup
|
||||||
|
post, email your results to
|
||||||
|
[blogchallenge2022@xeserv.us](mailto:blogchallenge2022@xeserv.us) 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.
|
||||||
Loading…
Reference in New Issue