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.
]]>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.
]]>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.
]]>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.
<img> instance overridesReplace <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.
<picture> classnameReplace <img data-img2picture-picture-class="w-full" /> with <img eleventy:pictureattr:class="w-full">.
Eleventy Image Transform plugin provides more instance-specific overrides.
]]>I have used many good parts from the Shape Up in my work. In this video, the Ryan demonstrates how he uses the process in a conventionally large company. Disclaimer: I don’t endorse any bad people at or previously at 37 Signals. However, for what it is worth, I encourage you to use their good ideas.
Came across this unpopular short book (about 22 pages) from 2013 containing an interview of Ryan Singer. It was a refresher on how important it is now to not to forget about the fundamentals like mental model of the customers, aspects (functional, emotional, social or something else) that matter for the project in hand.
Once in a while we face a crisis, at home or at work. Almost always they affect human relationships. Lu Wilson shares wisdom on how to gain from a crisis.
It was a question asked to me recently. I didn’t know the answer at that time. I read some articles and found out that there is no strict template for such a role. Here is my answer:
A Principal Designer is an expert in their craft. They will be working in an Individual Contributor capacity either in a single team or multiple teams. They can be influential in long-term outcomes of the organisation. They don’t have any managerial duties, but will be mentoring other designers.
]]>DSU George Stark: [opening a book in a suspect’s flat] He underlines.
DCI Erin Gray: So?
DSU George Stark: We tend to underline observations that confirm our view of the world. Give me a day with those books, and I’ll serve him to you on a plate.
Those are lines by two police personnel in an episode from the series, Luther.
We do cherish lines, ideas, concepts, and stories that agree with us. Should we neglect all the ones that don’t agree with us?
When you only read authors and books you agree with, you aren’t going to be challenged. Defending an elegantly crafted argument from the opposing side will teach you far more about an issue than simply nodding your head along to your favorite writer.
—Scott H. Young, How to Read Books You Disagree With
Seek out ideas that challenge our world view. The understanding and humility from such adventures are going to keep us sane in these insane times.
]]>On top of built-in DNS is switched on by default, there is no way to switch it off using the UI. In macOS, I found a way to switch it off using the command line[1].
First, you need the bundle identifier of the Chromium-based app. I have listed bundle identifiers of popular apps towards the end of the page. Otherwise, use the mdls command to get the bundle identifier.
# Run this command in Terminal.app
mdls -name kMDItemCFBundleIdentifier -r <path/to/chromium-app.app>
# Example:
# $ mdls -name kMDItemCFBundleIdentifier \
# -r /Applications/Google\ Chrome.app/
# com.google.ChromeOnce you have the bundle identifier, use the defaults command to set BuiltInDnsClientEnabled to false.
# Run this command in Terminal.app
defaults write <bundle-identifier> BuiltInDnsClientEnabled -boolean false
# Example:
# defaults write org.chromium.Chromium \
# BuiltInDnsClientEnabled -boolean falseMake sure to restart the app after you run the defaults command. You can use dnsleaktest.com to check which DNS server is used by the Chromium browser.
You can revert to using the built-in DNS client by deleting the BuiltInDnsClientEnabled preference.
# Run this command in Terminal.app
defaults delete <bundle-identifier> BuiltInDnsClientEnabled
# Example:
# defaults delete org.chromium.Chromium \
# BuiltInDnsClientEnabled| Application | Bundle Identifier |
|---|---|
| Chromium | org.chromium.Chromium |
| Google Chrome | com.google.Chrome |
| Obsidian | md.obsidian |
| Visual Studio Code | com.microsoft.VSCode |
| Vivaldi Browser | com.vivaldi.Vivaldi |
I learned about this preference from this comment on discourse.pi-hole.net ↩︎
7-year-old: Can I put my drawing videos on YouTube?
Me: No.7-year-old: Can I put my drawings on Instagram?
Me: No way.7-year-old: Can you make me a website for my drawings?
Me: (after thinking for a moment) Okay. That I can do!…
After a day shiro.ws!
It’s a bunch of HTML pages generated by @eleventy. The content is fetched from a Notion Table. Notion allows me or my spouse to add images and text. I have created an iOS Shortcut to publish – rebuild – on Netlify.
—Saneef Ansari (@saneef@front-end.social) on 3rd February, 2024
After posting on Mastodon, it was full of surprises for us. Many folks sent emails, long ones, to my kid. Those were the very first emails my kid got. It was fun for me to explain what are emails, and to type out the replies.
Thank you to all who took out time to write those emails to our kid.
]]>