From e4786467dfc7ec770d4b18e46ee52d2d71f11ba9 Mon Sep 17 00:00:00 2001 From: Xe Iaso Date: Wed, 2 Mar 2022 21:41:02 -0500 Subject: [PATCH] blog backend writing to learn a new language Signed-off-by: Xe Iaso --- ...-language-blog-backend-2022-03-02.markdown | 156 ++++++++++++++++++ 1 file changed, 156 insertions(+) create mode 100644 blog/new-language-blog-backend-2022-03-02.markdown diff --git a/blog/new-language-blog-backend-2022-03-02.markdown b/blog/new-language-blog-backend-2022-03-02.markdown new file mode 100644 index 0000000..2a9ceae --- /dev/null +++ b/blog/new-language-blog-backend-2022-03-02.markdown @@ -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 `

Hello, world!

` +- 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.