Work

My home on the web

Note

This page is a work-in-progress along the lines of a liv­ing doc­u­ment.

Role

Author

Duration

Never end­ing 😉

Website

Here

Tools Used/Explored

  • Eleventy with LiquidJS
  • Preact
  • Node.js (Filesystem API for caching)
  • Automated Blogroll
  • Search Engine Optimization (SEO)
  • IndieWeb Webmentions
  • IndieWeb IndieAuth
  • IndieWeb Micropub
  • mi­cro­for­mats2
  • TailwindCSS (due re­moval)

Showstopper: Eleventy.

I had been a Jekyll fan for the longest time. However, read­ing & writ­ing good Ruby was not pos­si­ble on ac­count of it not be­ing my first lan­guage. I felt lim­ited. Before Jekyll, I had been on Middleman, an­other Ruby-based sta­tic site gen­er­a­tor.

When I came across Eleventy, I liked what I saw: as long as I am opt­ing for a sta­tic site, I would no longer have to move for fea­tures and I could do what­ever I wanted — it's JavaScript! Use any tem­plate en­gine you like! Use what­ever di­rec­tory names you want to. It's just so flex­i­ble I made a final” tran­si­tion of sorts into Eleventy and haven't looked back.

Resources that helped me make this move:

While there are ex­ist­ing so­lu­tions for get­ting a Table of Contents in Eleventy, I'm not con­vinced by them. See Eleventy's plu­g­ins page - every so­lu­tion re­quires mod­i­fy­ing the mark­down con­tent it­self.

Along with Eleventy, I use a cus­tom as­set pipeline based on gulp for:

  • tran­spiling and bundling JavaScript,
  • mini­fy­ing and mak­ing my im­ages re­spon­sive, and,
  • for a few smaller tasks such as man­ag­ing fonts.

Performance and SEO with an aes­thetic de­sign.

I score about a ~99 on PageSpeed in­sights for Mobile and a ~99 for Desktop. You may also see my Lighthouse scores for a more com­pre­hen­sive as­sess­ment. While these num­bers do change, they stay within the 95-100 bracket — and that's good enough for me. 😉

My move to Eleventy was grad­ual and it­er­a­tive, as was the de­sign process through­out this time, and be­yond.

Some re­sources that have helped me:

Work on per­for­mance and en­sur­ing longevity con­tin­ues — I'm in the process of re­mov­ing TailwindCSS en­tirely and re­ly­ing on vanilla CSS with up­com­ing stan­dards, in­lin­ing crit­i­cal CSS, and switch­ing to a lighter font.

For nicer-look­ing emo­jis, I use Twitter's open-source Twemoji li­brary.

Peace of mind with US$0/month bills.

What had been ab­solutely es­sen­tial to me was not to opt for a server-based CMS such as WordPress — while US$5/month sounds very ap­peal­ing, this adds up across ser­vices and over time.

I will ad­mit I've re­cently been con­sid­er­ing opt­ing for a flex­i­ble and light­weight CMS such as Grav — though doc­u­ment­ing what such a mov­ing process en­tails has far from be­gun, so I may as well be here for a sig­nif­i­cant time to come. Time is bet­ter spent on other side pro­jects.

I use Vercel and love it. It has bet­ter lim­its than Netlify on its free tier with much the same work­flow. Branch de­ploys in gen­eral are a won­der­ful way of work­ing with sites as a pre­view is quickly up with­out any changes on the pro­duc­tion site. 10/10, will use it again. 😅

Automated blogroll from Miniflux, my fa­vorite RSS reader.

I had writ­ten about what mo­ti­vated me to au­to­mate my blogroll.

For sev­eral months now, I have de­layed mak­ing my blogroll au­to­matic. One of the ar­gu­ment lev­elled at blogrolls is that they are te­dious to main­tain. I agree, and wanted to take some ef­fort out of this process.

In July 2020, Jan au­to­mated his blogroll — and this val­i­dated the idea in my head. Now, my own blogroll is au­to­mated as well!

This is a rel­a­tively straight­for­ward Node.js script that makes use of:

  • node-fetch with to­ken-based au­then­ti­ca­tion to Miniflux' API, and,
  • the core fs mod­ule to cache data.

I sprin­kle in some ad­di­tional herbs:

A key dif­fer­ence is that I have my script mark some feeds as recommended based on their feed IDs from my Miniflux reader. Then, these feeds are shown first as Recommended Feeds,” fol­lowed by all the other feeds in a sep­a­rate list.

I took this ap­proach be­cause list­ing 70 feeds does not help a vis­i­tor make a judg­ment on which feeds I re­ally en­joy and which ones I read when I can. Over time, some feeds can lan­guish in my blogroll even though I have stopped read­ing them; rec­om­mend­ing a se­lect few pro­tects me from this kind of rust set­ting in too quickly.