Journal

I loved this insight into Adam Silver’s thought process. And it came at a timely moment since at work I’m currently trying to promote evidence-based, considered choices regarding user interface patterns.

My summary of Adam’s key points is:

• he found a UI pattern (let’s call it pattern x) in his project and flagged that while it’s not always bad it risks numerous usability problems. He lists these problems.
• he advises that pattern x is beneficial only in very specific situation y
• and that otherwise, pattern x is unnecessary and a more basic solution would not only require less work but provide a better user experience
• given this context, he asks others working on the project the following:
  • can they explain why pattern x was used?
  • did research (really) indicate a need? (this implicitly also asks if evidence or research was considered at all)
  • what else was tried beforehand? (this also subtly checks for awareness of the risks of pattern x and whether other options were even considered)
  • even if the use case was appropriate, given the downsides of pattern x were you comfortable the benefits outweigh those?

Adam also mentions how on this occasion, in the end, he had to grudgingly stick with pattern x because even though there were possible alternatives, his team didn’t have time to research or implement them. A familiar dose of real life, there. It’s worth being clear, though, that their implementation of pattern x (an accordion) is at least accessible, since as far as I can tell it uses their modern accordion design system component. If that were not the case, I imagine it’d be even less viable to leave it in place.

I was recently sorting through some old stuff when I found a tatty old poster I used to love and that brought back good memories. It shows the gated basement vault of the original Tresor nightclub at Potsdamer Platz, Berlin. Smoke is billowing out of the room dramatically and it includes the text The Extremist. I bought or otherwise acquired this poster on a night in 2005 when me and friends Davie and Tom visited the famous club during a trip to Berlin.

That was a great trip. While Davie wasn’t in the best of health at the time, we still got up to a variety of high jinks, including a memorable drinking session with techno legend Dan Curtin who was releasing music on Tom’s label at the time. (I think that was my introduction to strong Belgian beer, and I remember being mightily impressed when Dan cycled off at the end.) I also remember we stayed in Prenzlauer Berg, at Transit Loft if I recall rightly.

Anyway while reminiscing I embarked on a little bit of internet spelunking. It turns out that there is some interesting video and audio footage from the time we were at Tresor.

I remember that the DJs/acts playing in the Globus upstairs area of the club that night included Blake Baxter and Abe Duque. And guess what, here’s a cool video Abe Duque made that very night. It shows him walking through Berlin, arriving at the club (you see that striking Tresor logo projected on the building) then entering. There’s also some cool footage of the vibe in Globus.

One of my strongest memories of the night was hearing Vainqueur’s Lyot while we were downstairs in the basement. The track is a Basic Channel classic and, while on the harder end of their output, it feels to me like it was tailor-made for environs such as the one we were in. What a moment! So imagine my delight when I found a live recording of that set by DJs Julien & Gonzague with Lyot at 46 minutes. So good to be able to relive the moment!

Lastly, here are some excellent articles (with photos) I found on my internet travels which are worth a look.

• Tresor by BLDGBLOG
• Tresor: A History of Berlin’s Iconic Music Venues on the Love from Berlin blog

With Clair off having fun in Skye, the boys (me and Rudy) have been spending some quality time together. On Friday night we watched Dune 11. Rudy wasn’t too bothered but I really enjoyed it. It looks absolutely stunning, especially the all-white gladiator scene. And I thought the heavy, growling soundtrack marked a return to form for Hans Zimmer. While watching I munched on a paneer palak from local heroes Kebabish which, let’s be honest, is inifinitely better than popcorn.

On Saturday with the sun shining and some post-curry guilt, we set off early and walked up Drumgoyne Hill. It was steep but really good fun.

We even made it home just in time to watch Celtic beat Rangers to (just about) clinch the league title.

Recently my work colleague Francesco told me about a new Edinburgh branch of Homebrew Website Club. Exciting! I unfortunately couldn’t make their first event but just attended their second event. Here’s how it was billed:

Join us in Edinburgh for demos of personal sites, recent breakthroughs, discussions about the independent web, and to meet IndieWeb community members!

It was good fun! Great to chat about and personal websites and writing with fellow tinkerers. I’m sure I’ll be back.

I like the metaphor for personal websites of tending to a digital garden.

Like all gardens, they can become a bit unruly and need some weeding. Right now, as I consider updating some software and freshening things up, I realise that I’ve let it overgrow a tad.

So, here’s a post in which I’ll log my website’s current features. This should be useful in and of itself as a stepping stone to writing a proper readme. However it’ll also help me reflect on my website’s health and maintainability so I can decide which features to nourish and which to prune.

Note: this post will take a bit of time and a few sessions, so please regard it as a work in progress.

What I want

Before getting lost in stuff I have, I thought it’d be good to set out my higher-level goals and what I feel I have the time to sustain. I think I’d like:

• to retain URLs and SEO through updates
• excellent accessibility and performance (four hundos on lighthouse is a good start)
• it to use the best of modern web standards
• simplicity: minimal dependencies, easy to make technical updates
• to maintain some documentation to support ease of updating
• minimal noise: I don’t want a bunch of emails from third parties, nor ongoing dependency update alerts
• sensibly organised content
• a search function
• a way for folks to contact me
• some personality in the design and content
• be able to add and edit content easily (a mobile-friendly CMS rather than via code only)
• be able to insert photos into content easily

And here are a few secondary and lower-level wants:

• code snippets should look good
• images complexities handled behind the scenes
• some indieweb features supporting interactivity with other bloggers and friends

What I actually have

This is gonna be a much lower-level set of features than the above goals, but that’s OK. I can ask myself whether each supports my wider goals and are worth the effort.

Main tech stack

It’s a statically generated site powered by Eleventy.

The code is hosted on GitHub.

I use Netlify for production builds, deployments and hosting.

I’m happy with this stack. The parts play well together, it’s free, and it brings a lot of flexibility and performance benefits.

CMS

I use Decap CMS. It’s free and is working OK, however the UI is rubbish on a small screen.

I previously tried both Netlify CMS and Forestry for a while then gave up on them. I also sometimes use github.com as my CMS. That works but isn’t ideal.

SEO

I provide an XML sitemap which is intended for search engines and a human-readable sitemap.

Key pages

Home

An intro, and a list of latest posts.

About

Some information about me that’s currently split between my interests in the web and music.

Contact

It’s a form, and for its backend I use Netlify Forms. That gives me the server-side handling, database storage and admin management aspects of a form for my otherwise-static site.

Journal Archive

Access to all published posts.

Search

A JS-based form for searching all posts, with an autosuggest function. I use pagefind to power the search.

I don’t like how it’s JavaScript dependant and in future I should look at trying Zach Leatherman’s web component.

404 page

I have a 404.md file which sets a permalink of (i.e. is built as) 404.html. Having made that file available, Netlify does the rest… which is nice!

Detailed features

Avatar

I serve an avatar from a conventional location per Jim Neilsen’s idea – see my avatar.

Environment variables

I set NODE_ENV to production as an environment variable in my Netlify dashboard. This should mean that packages under devDependencies are not built in production which is good because that’d be a waste of time. With the dotenv module installed, if the NODE_ENV variable is present its value is loaded into Node.js’s process.env property. That allows me to check in JavaScript whether or not the current environment is production. With that, I might avoid outputting draft posts to physical files in production, or avoid hitting API resources in local development.

Only JS files can access process.env. So, in order to be able to check “is this production?” in other files such as Nunjucks templates I have an eleventy data file named app.js which makes the environment value available via `production.

Incidentally I used to set another custom environemt variable called ELEVENTY_ENV to production in the source-controlled package.json, within the build NPM script. I think this is now redundant given that I can use NODE_ENV for the same purpose. I previously used it within a Netlify lambda function that posted to the Github API to create new bookmark posts. I don’t do that any more so I can delete this environment variable.

Excerpts

I use gray-matter’s default approach for including, delimiting and parsing excerpts from posts. The excerpt is both part of the post content but also accessible separately, which is useful for showing only the excerpt in post lists.

It’s not perfect. It’d be useful to have a class on the excerpt. It’d be useful to be able to apply different styling to it on-demand and not on every post.

Favicons

To do: write a description.

Image plugin

I use Eleventy Image to perform build-time image transformations. It takes images I’ve added in posts and pages and converts and saves them into multiple formats and sizes, and swaps the original markup for modern, responsive, multi-format image markup using picture and source and pointing to the converted image files.

Linting and code formatting tools

I use a .editorconfig file to set how my editor should handle things like nested line indentation, inserting an end of file newline and so on. I just go pretty much with what the 11ty base blog repo uses, although I haven’t yet switched from spaces to tabs.

I have a .prettierrc config file which sets things like a preference for single rather than double quotes. The idea is that you also have a prettier editor extension enabled (I have one for VS Code enabled) and in your editor settings you set your editor’s default formatter to that prettier extension. It’ll then format files on save.

Netlify config

I have a .netlify.toml file in which I specify the build command (npm run build) and the directory to publish to. I also use it to set far-future expires on custom font .woff2 files. As far as I’m aware, this is still required. Lastly I have some redirects in there too.

Node.js

Eleventy is written in JavaScript and running it requires Node.js, both locally and in production. The minimum Node.js version is set in a .nvmrc configuration file. I do it this way because that’s how it’s done in the Eleventy Base Blog. I’m happy to follow that to avoid confusion when doing future 11ty upgrades, and it also seems sensible to set this value in the project code rather than only in Netlify as the latter could lock me into Netlify and cause confusion in future. Things to remember (from experience) are that this setting in .nvrmc overrides any node version set in Netlify’s Build and deploy settings and also that I should avoid setting a node version in netlify.toml too otherwise they fight with each other.

Readable time

I created this Eleventy filter to show “time of post” on posts of type note. That’s a situation where the readableDate filter included with the Eleventy starter blog wasn’t precise enough.

Tags

When I create a post I apply relevant tags to it. The tag post is applied automatically to all posts. And when I create a note using my custom Decap note template it also applies tag note. (I should do the same for entry and bookmark). But aside from those special tags, I apply tag names arbitrarily.

Each post page shows its associated tags (as links) at the bottom. Each post shows beside its title the “most notable” tag. (Currently it just grabs the third tag since the first tag should automatically be post and in second place should be note, entry or bookmark).

And I have the following tag-related pages and templates:

• an all tags page
• a template for each tag that generates a page listing all posts tagged with that tag

Actions I’ve realised I can take

• rename eleventy.js to eleventy.config.js like in the Eleventy base blog
• …

To be continued!

Update 15-08-24

I added Decap CMS.

Update 30-06-24

I’ve addressed the “a means of contacting me” item on my wants list by adding a contact form using Netlify forms.

Update 39-12-24

I recently removed a bunch of features and pages that had gone stale and only served to make my website harder to maintain.

• Photos section, including an 11ty JavaScript data file where I fetched photos from Cloudinary using an 11ty
• Bookshelf
• Inspiration page
• Records for sale page and data file
• Forestry CMS stuff
• Bookmarker script and lambda folder
• DIY search feature
• JavaScript patch for CSS’s min() for grids, since that now has wide browser support

Today I met Mick, Richy, Kris and Colin at Balmaha and we climbed Conic Hill. It was a decent day for it and we all enjoyed the chance to catch up while getting a good dose of fresh air. Mick and Richy were even brave enough to go for a dip in Loch Lomond afterwards.

Later, we drove to Colin’s place in Kilsyth to freshen up then went on to the Coach House Inn at Auchinstarry Marina. After a bite to eat I could see the conversation was headed toward those same old stories. And I had resolved in advance to have a quiet night unlike our last get-together. So I dropped them at the next pub then headed home, leaving it to the professionals.

This was a great watch. Big Zuu (Zubair Hassan) approached his pilgrimage with good humour, curiosity and genenrosity. And I learned lots from it about Islam in general and muslim men and their friendships in particular.

Chef and rapper Big Zuu makes a pilgrimage to Mecca on a personal spiritual journey to try and understand more about his faith and what it means to be 'a good Muslim'.

I really liked some of the contradictory things Big Zuu tried to reconcile. For example could he be a good mulsim but also enjoy some western ways such as alcohol? How would he feel being in Saudi Arabia (Jeddah and Mecca) in light of negative way the region is stereotyped? And is the fee of nearly £8000 paid to the Saudi government the best place to use his money?

In the end there’s a nice theme where Zuu say he’s not perfect nor will he become so… but that understanding his faith is part of striving to become the best version of himself.

David’s template provides not just the starter component code but also a nice readme, issue template, and publish-to-NPM flow.

It’s also always interesting to see how different developers structure their web component JavaScript. David’s code includes a neat and interesting approach to registering the comoponent, and favours setup being written in the connectedCallback().

Here are a couple of his real web components which started from the template:

• link-peek (really nice and here’s David’s corresponding explainer)
• mastodon-post (explainer)

Incidentally, I noticed the comment querying where event listeners should go and referencing Hawk Ticehurst’s article You're (probably) using connectedCallback wrong. While their seems to be a degree of validity there, I’m not going to sweat it. I’ve checked Keith Cirkel’s advice on this, which is:

If your component has additional set up logic, like adding event listeners, then the constructor() isn't the best place for that - as the Web Component isn't yet inserted into (or connected) to a DOM tree, and so it won't have a parent. For that, you'll need a lifecycle callback.

I note that even Hawk Ticehurst isn’t 100% sure about the constructor approach.

So I’m gonna go with putting event listeners in callbacks per Keith and David’s approach.

Martin introduces the “Now” page concept and how he adapted it for showing on his homepage.

I quite like the Now concept in general and have already starting tinkering with it. I also really like Martin’s neat, front matter-free solution in Eleventy (single config file plus date-oriented filenames) and could see that being more widely reusable for me for other “light-touch, non-page collections”.

Hard to argue with Brad’s logic.

Right now, vast numbers of human beings are devoting their time and energy to designing, building, documenting, and maintaining the exact same set of common components.

Our efforts to reduce duplicative work at the individual level are resulting in duplicative work at the inter-organization level.

A Global Design System would improve the quality and accessibility of the world’s web experiences, save the world’s web designers and developers millions of hours, and make better use of our collective human potential.

A Global Design System would exist as a standalone library of components that consumers would pull into their projects, style to match their brand/visual language, and integrate into their application’s business logic. Not only would this be far more efficient than having to design, build, test, deploy, and integrate bespoke components from scratch, a Global Design System would give teams added confidence that the components are sturdy and reliable.