Blog posts by Saneef

Geography is four-dimensional. You can’t know a place - only a place as it was at a time. Where is bound to when.

Horizontal scrolling works when the axis carries a meaning the user actively cares about.

Never break the contract between content, hardware and user expectation.

Pavel writes about how organisations learn through qualitative and quantitative methods differently.

I have mixed feelings (more like unhappiness and anger) about these times. Looks to me, Ky has put down things I see and I feel these days. I feel you, Ky.

In this video, Saleh explains why it is imperative to go beyond the ‘happy case’ and ‘edge case’ thinking. Some of the practising designers find it fundamental. That’s where generative tools are not going to be of much help.

…that state thinking precedes surface thinking that the question what can this system be comes before the question of what should this look like

Found out about this through Nim’s weekly update.

Ally shares 5 useful git commands. You won’t be needing them daily. But at times, they are going to be helpful.

Han Lee compares the current AI transformations to China’s The Great Leap Forward in 1958. The famine comes later. Worth a read.

Donnie D’Amato talks about the explosion of design tokens in design systems. He proposes an interesting approach to avoid such explosion with familiar a approach to the CSS developers.

A short note by Christopher Butler on the importance of structuring the text.

Yesenia writes about leveraging AI in creating design systems that are context-optimised (user expertise, user privilege, user goal at hand). Some of the approaches in the article seem fitting for the design of interfaces in general.

Oh! There is a name for the attitude of relying on easy-to-measure metrics and ignoring hard-to-measure qualitative factors.

Halley Adams lists what could go wrong when knowledge about software systems of lives in people. I absolutely agree with him, useful documentation is a must. In the past year, I started adding notes to personal projects. Otherwise, after a month or two, I tend to forget many details. I have had instances where I spend hours trying to understand why certain things are done in a certain way.

This week, I learned that Node.js comes with a test runner. It has been included since Node.js v20.0 (in 2023)!

Not that I write unit tests daily. Once in a while, I do write unit tests. At least in those cases, I don’t have to add another NPM dependency.

I religiously write alt-text for images. This old gem by Scott Vandehey points out a handful of mistakes I make.

…what is good taste? It’s commonly mistaken as personal preference, but it’s more than that — it’s a trained instinct. The ability to see beyond the obvious and recognize what elevates

In other words, how to make calm and transparent softwares for everyone.

Frank writes about when is beautiful design important and when it isn’t.

Stas Aki explains first principles of design using principles of writing.

When designers have nothing to say they wrap their designs into memes.

Warning: the essay uses scroll driven animations.

Imani Joy talks about her experience and challenges being a solo designer at Mastodon. I really like one of her idea from the talk, ‘decide who to disappoint.’

A note from 2018 by Robin Rendle, on need for…

tools that help us think and that remove distractions so that we can focus on the larger and more important architectural, organizational and content problems that we ought to deal with first.

About the checklist in Mario Guzman’s words:

The following is a collection of features and conventions available on macOS that can help bring that same level of polish to your own app. By embracing these long-standing Mac-isms, you can elevate the experience of your software and make it feel like a natural citizen of the Macintosh ecosystem.

Tyler shows how his company wields Builds Awesome (previously 11ty 😜) for rapid prototyping. I really like how they create placeholder contents that reads realistic using helper functions in Build Awesome.

This turn (of using Generative AI in design) says that we don’t need more people to make things. We need more people to be thoughtfully and meaningfully critical of the things that are made.

I learned a few techniques about OpenType features in CSS from the article. I’m stealing some and adding them to my starter stylesheets.

I was confused about optical sizes in typefaces. Are they changes in weights? How do I utilise them in different contexts? Eber Sorkin explains the optical sizes in this talk from ISType 2024.

The fundamental problem with design docs is the same one that killed waterfall: you have the least information at the beginning of a project, which is exactly when design docs ask you to make the most decisions.

A short and illustrated article on how to make the text on the web accessible.

A few days ago Katherine asked: in Eleventy, is there a way to generate pages from separate data (like person-a.json, person-b.json, …) instead of single data file with all the data. Right after seeing the question, I wrote up a JS script which reads all JSON files in a specified folder, combines them into an array and passes them as data to Eleventy. I had the feeling I was going against the Eleventy’s grain. Anyway, it worked.

Today, I stumbled upon the solution by Ashur. A solution that is going with the Eleventy’s grain! A reminder for me to RTFM.

I spent some time going through it to understand how it works, and here are my learning notes. You can find the working prototype in this repo.

Eleventy natively supports loading JSON files as data. The JSON (or JS files) kept within the _data folder (which can be changed through config) will be loaded as data.

Consider these files:

src
└── _data
    └── possums
        ├── possum-01.json
        └── possum-02.json

…with content

// src/_data/possums/possum-01.json
{
  "name": "First Possum",
  "age": 1
}

// src/_data/possums/possum-02.json
{
  "name": "Second Possum",
  "age": 2
}

In the template you can access possum as an object with base filenames keys and their content as values.

{
  "possum-01": {
    "name": "First Possum",
    "age": 1
  },
  "possum-02": {
    "name": "Second Possum",
    "age": 2
  }
}

I can generate a list of possums in Nunjucks with:

<ul>
{% for key, value in possums %}
  <li>{{ value.name }}</li>
{% endfor %}
</ul>

Eleventy can generate pages from data. Like you have seen earlier, the data from the JSON files are loaded as an object. Eleventy has some tricks under its sleeve for that too!

By default, when paging an object in Eleventy it provides each key as the value. Using pagination front matter resolve: values, Eleventy provides each value without having to use object[key] to get the value.

---
pagination:
  data: possums
  alias: possum
  resolve: values # 🪄 Iterates over values, instead of keys
  size: 1
permalink: "possums/{{ possum.name | slugify }}/"
---

{{ possum.name }} is {{ possum.age }} years old

If JSON is not your thing, you can use YAML, TOML or any other data format for maintaining data with Eleventy.

Listen to ideas, not their messenger. Focus on the contents, not the box. Avoid ideology.

I struggle with this bias a lot. I find it hard to separate the message from the messenger. Another to thing to work on.

It was a beautiful and predictable scheme. Once you knew how it worked, you could guess other URLs. If I were typing an email or authoring a blog post and I happened to have a link to your photo in Flickr, I could also easily include a link to your Flickr homepage just by editing the URL, without having to jump back to the browser to verify.

I’m a big fan of well designed URLs.

I virtually experienced Hanoi and nearby places through Florian’s beautiful pictures.

The interface is standardized. The specification is maintained by the W3C. The docs on MDN are excellent. But the actual implementation? That’s entirely up to the browser vendor.

I was wrong to believe that all Web APIs are private.

Software didn’t break all at once. It eroded slowly, one reasonable justification at a time.

Each step made sense in isolation, and each step could be defended. Together, they reshaped the priorities of an entire industry. Once software became measurable in this way, it became optimizable in this way. And optimization has a way of eating everything else.

Mike Swanson gives us a short history of enshittified software and guidances to makes them better.

Easy means you can do with little effort. Simple means you can understand what you do with little effort.

It looks like the SEO Specialists will be recasting themselves as the Generative Engine Optimisation (GEO) Specialists very soon. Like always, the article emphasizes the importance of getting the fundamentals right: good quality content, structured data and keeping the content up to date.

In a way, I like Donnie’s solution better than the browser implementation of contrast-color(). The browse implementation gives us either black or white. Donnie shares a method that can blend the generated contrast colour with the background to create more harmonious combinations. He does some CSS wizardry there.

A good technique to keep under your belt while writing for web. It is like BLUF, but for short text.

I didn’t put out any notes in 2026-W04, in case you were wondering.

Don’t break accessibility by adding accessibility features.

Fathom’s take on generative AI. It’s a relief to know that there are folks who still believe in real expertise and collaboration.

Hidde lists some high-impact accessibility checks that we can do to improve our design systems.

Don’t forget our future selves when designing products.

We feel stuck in many stages of our life. Adam classified those baffling states with funny names and shares some clues how to get out of them.

Contextual knowledge is more important in software projects than generic knowledge. Both influence differently in the successes and failures of projects.

Rereading Jakob Nielsen’s article from 1993. I find it a good refresher on practical time durations for user interface interactions and the feedback mechanisms. One of the time durations he mentions is 0.1 seconds. If an interaction can be completed within this timeframe, users feel a sense of control, as if they are actively manipulating the data. On the other hand, if the interaction exceeds 0.2 seconds, users may feel like they are instructing the computer to perform the manipulation. I like such notions.

Michelle shows how to optimise the accessibility testing strategy to have better coverage.

Jason Gorman takes us through various ‘___ is going to replace programmers’ cycles from the past. He writes why that is not going to happen in the near future.

The hard part of computer programming isn’t expressing what we want the machine to do in code. The hard part is turning human thinking – with all its wooliness and ambiguity and contradictions – into computational thinking that is logically precise and unambiguous, and that can then be expressed formally in the syntax of a programming language.

I came across this article through a post by Jim Nielsen.

Our industry is not very patient, and once you start building designs directly to production as the default, the culture and organizational reasons to consider problems, concepts, and intentions start evaporating. We start devaluing the why behind our designs in favor of output.

Karri presents the value of designing the problem and solutions in stages.

I agree to Amelia’s message. The human computer interfaces are devolving in modalities and converging on ‘touches on glass.’ We should explore more ways of interactions.

At the same time, I find the essay somewhat ironic. She talks about joy of doing by hand, the feel of pen on paper, the whole essay is filled with AI generated images.

It’s difficult to change other people’s opinions. You have a better chance by presenting your perspective without antagonizing them. This article shows how to write such propositions.

Lu uses her tennis experience to teach about elements that help you succeed.

UX needs to make clear distinctions between commercial design work and design as a social good so the aura of care is not just an aura. Until that happens we’ll continue to see the worst companies hire the best people to help them make the worst things.

A harsh reminder that most of the instances of care, delivered through design, are shallow. It pains me to realize that I’m also a part of that narrative.

On a similar note, though design thinking is so pervasive, why do we fail to create real care?

Design is fundamentally intention, so doing the wrong thing with greater intention only makes it more wrong.

There’s nothing particularly transformative or humane about reproducing and strengthening harmful systems, or getting into new lines of business that are doomed to fail because they exceed the capabilities, capacity, or true purview of an organization.

I learned how to give an exit hatch for JavaScript async functions from Lea.

If everything is highlighted, nothing is highlighted.

I started using a colour scheme with few highlights, and I’m liking it.

They did it for the right reasons. The toasts have a lot of accessibility problems. The guide provides alternatives for different contexts. In some simple cases, we don’t need to communicate success as they are self-evident.

One of the unintended consequences of AI adoption across the industry is that it’s getting harder for the next generation to get their first job. When a company shoves AI onto their workforce, the jobs meant for juniors are getting replaced. If this situation continues, it’s a grim career growth path for the next generation.

A short walkthrough of the design process behind their Chroma Scissors. There was a step where they excluded certain design directions to pursue; I’m reminding myself to explicitly note down those next time.

Jim’s post expands on Mandy Brown’s notion of growing down nicely. I’m a freelancer, and I’m selling my expertise to each client. I always worry about getting obsolete and push myself to keep learning. The idea of growing down hit me on those notes.

…humans are not factories. We are, as obvious as this may seem, organisms. And organisms live through cycles.

Embrace the unproductive and out-of-form days.

I’m sunsetting the eleventy-plugin-img2picture, an Eleventy plugin that replaces regular <img> tags with <picture> and generating responsive-optimized sizes of each image.

I had created the plugin at a time when I couldn’t find any plugins to do that job. Two years ago, the official Eleventy Image plugin released the feature to generate <picture> tags from <img>. The same plugin that I use internally in my plugin to generate different image sizes.

Following the spirit of Eleventy maintainers meticulously reducing third-party dependencies, I urge folks to use the official Image plugin.

Today, I’m marking my plugin on NPM repository as deprecated.

Remove eleventy-plugin-img2picture and install @11ty/eleventy-img package.

Update Eleventy config for Eleventy Image Transform plugin:

- import img2picture from "eleventy-plugin-img2picture";
+ import { eleventyImageTransformPlugin } from "@11ty/eleventy-img";

  export default function (eleventyConfig) {
-   eleventyConfig.addPlugin(img2picture, {
-     eleventyInputDir: ".",
-     imagesOutputDir: "_site",
-     urlPath: "/images/",
-   });

+   eleventyConfig.addPlugin(eleventyImageTransformPlugin, {
+     urlPath: "/images",
+   })
  };

You can find more Eleventy Image transform options in the docs.

Replace <img data-img2picture-ignore="true"> with <img eleventy:ignore>.

Replace <img data-img2picture-widths="200,400,600,800"> with <img eleventy:widths="200,400,600,800">.

Warning: If width attribute is provided (like <img width>), it will be used to generate the image (only one image with mentioned width) and values in eleventy:widths will be ignored. You should remove width if you plan to use eleventy:widths. In the final generated tag width and height attributes will be populated based on the generated image size.

Update (25 Apr 2026): Eleventy Image v7.0.0-alpha4 onwards, the eleventy:widths attribute takes precedence when width and eleventy:widths are present. The width and height attributes from smallest generated image will be populated in the generated tag.

Replace <img data-img2picture-picture-class="w-full" /> with <img eleventy:pictureattr:class="w-full">.

Eleventy Image Transform plugin provides more instance-specific overrides.