The one where I redid the theme

I mentioned that this could happen, so there should be no surprise that I abandoned the static generation system and replaced it with my own custom solution. While the desire to do so was since the beginning, what justified this rationally to me was that the overall look and feel was just… clunk? odd? You know, it felt almost complete, checked most requirements but still didn’t flow right. Behold the new Just a Devlog:

The design/theme/UX/I don’t care I’m a backend dev.

I knew that I could use some simple mixture of mustache templates and a bit of markdown to generate the site, so the first step was just to focus on a theme and design that felt right. I searched through several blogs and sites that where technology or programming related and tried to reason about what I liked on them. I selected a few for their minimalist approach:

• https://artemis.sh/
• https://unixism.net/
• https://danluu.com/
• https://vector-of-bool.github.io/
• http://www.grinninglizard.com/

While I went a bit do it yourself approach, I’m still trying to be as pragmatic as possible, so I started playing with Paletton to get a good color scheme. I played around until I settled into something I felt good about.

I played around a bit with side menu design, but in the end decided to go with the header with all links so I got more space for content. I also spent some time to get it working with small screens/mobile form factors, although not perfect yet. See bellow the difference over old and new theme.

Static generation toolchain

Now I have an experience I really liked, It was time to make it happen. The generator still used javascript, as it has the good libraries Mustache and MarkdownIt that are the basis of the generator. I was feeling brave, so I decide to glue everything together with a make script. It worked surprisingly well, although the one I wrote still can use some touch up. Besides some rules for copying some static content and such, the main logic is contained in 3 scripts: applyTemplate.js, applyMarkdown.js, createBlogIndex.js:

• createBlogIndex.js create a index of all blogs and generate a makefile to copy them to their right location;
• applyMarkdown.js transform the blog markdown into html;
• applyTemplate.js joins the templates and converted html into the actual htmls (and also takes care of our rss.xml)

And finally we use make to call them in right order and only when needed. I suffered a it to learn, but this site really helped me through the basics and got something that works alright now.

Finally, I have a basic script just to serve a basic express.js instance so I can have a test environment and we have a new website ready. The site itself doesn’t use any javascript as of this publication, so it can be used by no-script folks, but I do have some demo pages and some iframes to javascript rich pages. I’ll try to keep its basic structure and navigation without javascript, but probably will add some scripts to enhance experience in the future.

Conclusion

I still have improvements I want to do. A few warts on small screens need to be corrected, adding the first paragraph on blog content on the blog lists, maybe a sitemap, a search function, links to previous/next blogs, maybe a history api handler to load faster, etc. But for now this is good enough to go live, a MVP if I may call it, and I am actually happy with the result, so I won’t ruin it by trying to make it perfect.