On Tinkering

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.

Indieweb.org

Because Eleventy uses plain Javascript under the hood, I could 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 steal copy 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).

Changelog

  • Oct 20, 2019 Split blog articles and bookmarks
  • Sep 02, 2019 Update: Fix link to 11ty.io
Post a comment If you post a tweet with a link to this page, it will appear here as a webmention (updated daily).

Webmentions

  1. Reginald Hunt Reginald Hunt
    This is interesting. I just had to take down a PHP site, and need to rebuild it as static, possibly on @Netlify . Maybe @eleven_ty is worth a look.
  3. capjamesg capjamesg
    My site is a place for me to tinker. I like the word tinker. I usually say “play around” for lack of a better word. The projects I enjoy working on most are those where there is a clear purpose. I like to scratch my own itches, as the IndieWeb documentation says. Since joining the IndieWeb, I’ve found a new love for making websites. This is because I feel in control of what I build. I decide what goes on my site. When I hear other people talk about what they are building, I get excited. I sometimes like to see how I can improve upon what exists. That has been the motivation behind many of my projects. I love your blog. I read your post on building a changelog. Interestingly, I tried to do the same thing with some free time. I use Jekyll so my process was a bit different. Maybe I’ll blog about it some time.
21 likes
  1. liked by Calum Ryan
  2. liked by Adrián Bolonio
  3. liked by Eleventy
  4. liked by Reginald Hunt
  5. liked by Ben Felda
  6. liked by Matt Biilmann
  7. liked by Max Böck
  8. liked by Phil Hawksworth
  9. liked by Francis Ceril
  10. liked by ✨ Joël
  11. liked by Wim Symons
  12. liked by Juan Fernandes
  13. liked by Sue
  14. liked by Eckhardt 🇳🇦
  15. liked by Bryce Wray
  16. liked by Maëlig
  17. liked by Mittelgrau
  18. liked by Reg Tait
  19. liked by DerMeier
  20. liked by Jesse Sibley
  21. liked by ross
3 reposts
  1. reposted by Eleventy
  2. reposted by Matt Biilmann
  3. reposted by Sue