I love tinkering with my side projects. Like tree-rings, my different technological choices show what interested me at the time, what I thought would fit the projects needs best or what I felt comfortable working with.
A static journey#
Take Jourmany, for example: developed in 2015 and launched in May 2016, this project marked my first foray into static site generators (SSG). I absolutely loved the idea of SSGs! I could build a complete website and totally get away without knowing web servers, server-side languages or databases. This left me free to focus on what I love: details and performance. I tried to make Jourmany the fastest I could make it. Web fonts loading with FOUT and class. Responsive images, lazy-loaded. GZIP, http2, Resource Hints. I was slightly hampered by my hosting provider, but Lighthouse is still looking okay three years later. I was also able to look into details like adjusting the hero headline's size according to character count (shorter destinations are displayed in bigger type, compare Sylt and Elbe Sandstone Mountains), or loading Youtube scripts and videos on user interaction only (this not only helps with performance, it's also more privacy conscious).
I chose Grunt and Assemble as my "tech stack" at the time – both of which are not quite dead yet, but probably a lot more niche today. It all worked well; my only gripe was that creating new content (destinations) was a cumbersome process, because I had made quite a mess of the way my JSON data files and handlebars templates worked together. I began to wish for a bit more comfort.
A few months later, I came across Kirby, a PHP-based static file CMS. It seemed a great fit for my static needs: still no database overhead, but easier content creation via an admin panel. I chose this blog as my test case and built the site with the Kirby Starterkit. The "design", if you can call it that, was implemented with pre-fabricated patterns from http://tachyons.io/, one of many emergent functional CSS libraries. I really liked Kirby, and have used it since then to build a business website for a friend – and a complete (not yet launched) rewrite of Jourmany. I'm a lot less certain about doing everything with functional CSS, but it was a fun experiment.
The new shiny: Eleventy#
Come 2018, a new shiny thing started making the rounds on Twitter and the blogs I frequent: Eleventy, "a simpler static site generator". What can I say? I looked at the docs, I read blog posts about it. I got excited. It still took a good, long while (and a vacation), but I'm happy to inform you: annualbeta is now powered by Eleventy and (continuously) deployed on Netlify. 🎉
I had a lot of fun making this version of the website. Eleventy is almost two years old by now, and documentation, features and plugins are quite mature. I chose Nunjucks as my templating engine, because its syntax is very similar to Twig, which we use at webfactory for all our Symfony projects. The most tedious work was to convert all my content from markdown-ish
.txt files sprinkled with KirbyText, HTML and tachyons classes to pure markdown.
Joining the Indieweb#
The Indieweb movement has been gaining a lot of momentum this year (in my filter bubble). I guess I've always been part of it since I've "owned" my blog content since the beginning, but Tantek Çelik's talk at this year's beyond tellerand (Dusseldorf edition) inspired me to do more. I wanted to support what he called "interactions between websites", something the Indieweb made possible via the creation – and standardization! – of Webmention.
Your content is yours
When you post something on the web, it should belong to you, not a corporation. Too many companies have gone out of business and lost all of their users’ data. By joining the IndieWeb, your content stays yours and in your control.
write my own use and build upon other people's plugins and filters. One resource I kept going back to was Max Böck's Static Indieweb pt2: Using Webmentions. He has open-sourced his Eleventy implementation of Webmention and kindly documented how to use it. For now, my implementation of Webmentions is a basic syndication of Twitter likes, mentions and reposts, but I'll probably expand it soon.
While I was poking around open-source Eleventy projects, I also copied and modified the super practical parse transforms I found in Andy Bell's Hylia Starterkit. Thanks to him, my images are now wrapped in
<figure> tags with
<figcaption> for captions , and blog post subheadings have anchors so it's possible to link to specific sections. 👍
Tinkering is learning#
I love discovering new perspectives and learning new tricks from other people. Tinkering with my own little projects is how I can do that without pressure or fear of responsiblity. The only real constraint I set for myself is that any existing URLs don't change (I have actually broken my feed URL, but I know all of my 3 followers personally, so I'm okay).
Turning everything on its head has been great. I have already learned so much stuff! And there's still a ton of things on my wishlist:
- I want to implement responsive images with different sizes and webp support and lazy-load them, 2019-style. 📷
- I want to inline my static assets because they're so small (CSS: 4.6kb, JS: 3.3kb) that it'll probably make sense. ⚡️
- I want to try Remy Sharp's solution for sending Webmentions to other websites when I link to them (my current implementation is still only a one-way street). 🔄
- I want to experiment with Zach Leatherman's avatar local cache. Did I mention he's the guy behind Eleventy? Because he is. 🙏
- I want to find a nice web font and load it extremely efficiently, maybe fiddle around with subsetting (at the time of writing, I use system fonts). 🔤
- I want to fetch commits per page and display a changelog on my blog posts (in case I ever update them). 📋
- I want to return to Max Böck and
stealcopy his ingenious sharing technique. 😎
- I want to add a Serviceworker to this site, probably with Nanda Oktavera's eleventy-plugin-pwa because she has already done the hard work. 👏
Phew. I guess I'll never be done! But this is exactly what I love about working on the web: everything is constantly evolving and changing (hopefully for the better).