Simplifying my site.

Be aware this is a draft post — please adjust your expectations accordingly. Get in touch if this post could use an improvement.

Contents

Been spending some time doing some New-Year-cleanup on my site. The end-goal is to keep the codebase lean and maintainable. Here’s the lowdown…

Removing Preact and live webmentions.

When I first set up webmentions on my site, I followed Max Bock’s tutorial. It seemed like a neat idea to have live webmentions take over the static portion and replace it.

It’s not. It’s not a neat idea. I have to maintain two files (one in Liquid, one in JavaScript) for the same functionality. Every time I make a small tweak in the liquid file — the one that really matters — I need to go in and make that same change in the Preact component.

I use webmention.io for fetching and displaying live webmentions. Unfortunately, it doesn’t quite work out of the box for all browsers. There are… workarounds but I’d rather not keep falling into workarounds.

This change removes preact, detect-browser, and my own component-specific code. Instead, I now build my site using a web-hook 2x a day, which I might reduce to 1x a day.

The bundle size goes from 43.9KB compressed to 5.2KB compressed. Sweet! This only saves me about 0.1 second in load time, so any performance increase is negligible. That was never my goal anyway with this change.

Collapsing webmentions and comments into a single area.

I also took inspiration from Paul Robert Lloyd and Jan-Lukas Else here who display their interactions in a collapsed details element — huzzah for HTML! 😊

Where my interactions used to look like this:

Two separate, visible-by-default sections for webmentions and guest comments, each with an introductory text. "Two separate, visible-by-default sections for webmentions and guest comments, each with an introductory text."

They now look like so:

Two collapsed-by-default toggles for webmentions and guest comments, with no introductory text. "Two collapsed-by-default toggles for webmentions and guest comments, with no introductory text."

Probably far more “boring” — but I quite like it for now.

Cleaner IndieWeb posts, less ‘link’ overhead.

I felt the main microblog page is quite… heavy on the eye. So I removed the links per post type, and slimmed down the micro post card. I doubt anyone cared for the categories on the index pages, or the fact that a certain post does or does not have webmentions.

Before:

A screenshot of my Microblog page showing links to index pages for different post types, and a detailed post menu card showing a permalink, publish date, categories, whether it is stale, and whether it has webmentions. "A screenshot of my Microblog page showing links to index pages for different post types, and a detailed post menu card showing a permalink, publish date, categories, whether it is stale, and whether it has webmentions."

After:

Less useful, but I like it. The permalink pages anyway carry the detailed info and metadata.

Still on the agenda…maybe.

I’d be very curious to hear your thoughts on these subjects.

Removing TailwindCSS.

Tailwind is great, and allows for easy design iteration. Now that process is largely done. I’m still working on this task, and it’ll probably take a while to go through with.

Why do it at all, though?

It slows down my browser to a crawl when I’m developing and want to tweak things within the browser.
I have to wait for the developers to add support for CSS features. For example, on the v1 releases, there was a time I kept using mr-3 (to add margin to the right) instead of just using gap in vanilla CSS, which Tailwind didn’t support at the time. Yikes!
- I hate keeping up. One less moving part would be nicer.
My markup has become gory and unreadable. I’d like to simplify it and make sense of it at first glance. This would also give me headspace to improve the overall semantics.

Ultimately, my CSS will be vanilla CSS with modern/upcoming CSS features using PostCSS. One fine day, I might drop PostCSS from the build process. This is of course when evergreen browsers ship very good support for the CSS features I use.

I think this is the right way to go.

Removing guest comments.

This is tricky and I’m still unsure if I want to do it.

What motivated me to write guest-comments-api and include it on my site was this comment left by Ankit on DEV.to back in June 2020.

That, and a desire to learn serverless. Which I promptly ditched anyway because of vendor-lock-in.

I think I have received maybe 3 non-spam comments all this time. Do you think it’s worth it? If it is, I might consider adding comments to my IndieWeb notes as well.

Moving off Vercel.

I want to, but once again, I’m not placing any deadline on this. The idea would be to self-host a Drone CI server that builds the site upon git pushes and via webhooks, which is then handed over to Caddy for a quick file-server.

Well, that’s most of it. Oh, and the home page is also a bit leaner now!