Starting out during my Recurse Center retreat, I wanted to visualize and plan my 12 weeks of time. I’ve been working on “daily streaks” for habit building and wanted a visual tracker for my habits. Building a printable quarterly calendar seemed like a good initial project.
Several other printable calendars I’ve found recently, that were inspirational:
But I couldn’t find a “quarter” or 12 week view to cover my Recurse timeframe!
- Hugo (Go based tool) for the backend and asset compilation
- Tailwind as a CSS framework
Hugo was easy to learn and get started with. It has hot-reload support, which is important for HTML design work. I initially tried to use static
<script> tags for importing React and Tailwind, but moved to a fully imported and compiled pipeline all inside Hugo, to get importing and tree shaking working. Hugo uses esbuild, which seems like a really nice optimal asset compiler.
Two links that helped me understand the Hugo asset pipeline
I wanted to inline importing Tailwind CSS, so that I could use it inside my React code. Tailwind recommends their own separate watch and compile step, like so:
npx tailwindcss -i ./src/input.css -o ./src/output.css --watch
But I mostly ignored this. I ran into caching issues in dev and hot-reloading, where 50% of the time a Hugo rebuild would not pickup my Tailwind CSS changes in a JS file. I was mostly done with the project, so I didn’t investigate further, since a full hugo build always worked. I did find several tickets with suggested fixes.
The last visual debugging I did was around how the actual printed product looked! I printed several copies, as I was working, and tweaked some of the font sizing and colors for clarity. It leaves a nice paper trail of prototypes:
Here is the finished product: https://quarterly-cal.asktherelic.com
Overall, bootstrapping and developing the app were pretty straightforward; I’ve done enough HTML+CSS before. Tailwind is a good standard framework for CSS that makes sense for me.