This blog was my first journey into web development. Fresh from the FreeCodeCamp tutorials, I spent weeks grappling with the official Hugo documentation and naming CSS classes. I eventually managed to craft a website based on Tufte CSS and the Academic theme.
Since then, I’ve dedicated a good amount of time to crafting cool shortcodes, updating CSS, and deciding which math-rendering libraries I should use. Every time I revamped its structure or worked on other web projects, frustration surged. I questioned my initial project structure and everything seemed like it needed a complete overhaul. It looked ugly and working with the spacing was painful.
Then, I found Butterick’s Practical Typography, and it was a game-changer. The read was delightful and my motivation was here. I had to act!
Roughly 20 hours later, I have a new blog theme in my hands, reminding about this quote from Flavio that I need more reflection on:
Don’t work on your blog infrastructure if you want to do any serious blogging. Otherwise you’ll spend most of your free time tweaking the blog platform (which - let’s be clear - no one except you cares about).
Perhaps I could have resumed my Japanese Maths series, or wrote some notes on science, statistics, or teaching. But here I am, with a sense of joy and accomplishment. With some motivation and time I have left with, here are some tips and codes for future myself. Feel free to have a look.
Perhaps I could have continued my Japanese Maths series, or jotted down some insights on science, statistics, or education. But here I am, full of joy and accomplishment. Unlike Fermat, I do have some time and motivation left, so I’ve compiled some tips for my future self. Feel free to have a look.
Small Tips and Resources
Hugo
- Hugo rendering order (Li-Wen Yip)
CSS
- My Custom CSS Reset (Josh Comeau)
- A Complete guide to flexbox (CSS-tricks)
- Fine-tuning font weight in dark mode (CSS-tricks)
- Sidenotes using only CSS (A Scripter’s Notes)
Fonts
- Source Serif font from Adobe (GitHub)
- Iosevka font (GitHub)
- Wakamai Fondue, the tool that answers the question “what can my font do?” (website)
- Variable fonts in real life: how to use and love them (Evil Martians)
- Unicode Range tool (zachleat)
Other
- Design inspiration: Spivak’s Calculus (Google Books)