Halvor William Sanden
Articles and other bits
Detectives in puffer jackets getting drinks
Venturing into Nordic noir, or Snøballkrim as I refer to it in Norwegian, I wasn’t prepared for the well-worn knitwear of stereotypes within. Since the solstice, this bleak Jadis’ winter mixed with brutal overtones has provided me with light entertainment and a list of things to avoid if I ever …
Anti-design software
Another piece of software claims to be able to generate web interfaces from graphics. It’s a lie. Such a thing is not possible. Not 25 years ago, not now, not 25 years from now. There are two reasons: Graphics software doesn’t come close to describing interfaces sufficiently. Operating on the …
Not the users I have in mind
If most users say that a flow is good, we should make it so; if most say that the contrast is good, we should not take their word for it.Testing isn’t as straightforward as that, but the point is that there are two approaches to making the web: The majority and the minority – the general and the …
Saying goodbye to chatbots
The typical chatbot experience is like a psychic cold-read session with C-3PO. The inaccuracy with which information is given is only surpassed by the frustration and uncertainty about what isn’t there. Is there more I should know? Why can’t I look at the complete documentation? Why do I have to …
The Implied Web
People don’t need call-to-action buttons. Interface elements made to get attention and herd people towards clicks increase cognitive effort because they obscure themselves and reduce interfaces to clickable surfaces. The implied web is based on the idea that people read interfaces through the …
Nesting HTML list elements
There are two ways to nest lists in HTML, but only one communicates correctly.
Let’s say we are making a table of contents (TOC) for an article page. Beyond the page title of h1, the article has two heading levels, h2 and h3. We make the following structure …
CSS context variants
In Making components with CSS nesting, we looked at different ways to make a keyword list component with and without links. If we want to make that even more reusable, there are also multiple ways to make variants. With BEM, we have the modifier class. With JS components, we can set a prop and …
Making components with CSS nesting
CSS nesting can help us write better frontends by moving our approach towards thinking more about the bigger picture. It also makes working with fewer class names easier, but does it make BEM and other naming conventions obsolete? One of the areas I have overused classes in the past is lists …
CSS experience, structure and utility use
Write CSS as CSS in CSS. It is the best way to learn, and it gives us the best code quality because it leans on language and platform. Anything else tends to turn out not to be CSS at all, maybe fast to write at first but it makes us fall behind on the language and its evolution. We are …
Grasping CSS: The speed of proficiency
Getting fast at building frontend means going beyond trying to make something work as quickly as possible. Aiming for speed instead of efficiency makes learning CSS more difficult today than it was twenty years ago. It’s not because the language evolved but because the many shortcuts get us stuck in …
Grasping CSS: The concept of logic
The key to understanding CSS is to get past the notion that frontend development is about producing visuals. Visuals are one aspect, but we never make them directly. We make it easier for ourselves when we stop thinking about the interface as significantly related to the image. Two different …
Signing git commits with existing SSH key
Getting verified commits on GitHub by signing git commits using an existing SSH key requires specific steps that current documentation fails to explain clearly, especially if you don’t want to regenerate keys or make a GPG key. Anyone can commit using any name and email address they want …
Separating concerns with complex CSS selectors
I recently used CSS has() to show and hide buttons based on the content of a sibling of the parent. I considered using two classes to refer to one element; one to style a container and another one to check for content inside it. Using them separately, we can change the styling class name without …
From 15 lines of JS to 3 lines of CSS has()
Using CSS has() to write complex selectors is fun, especially when we compare the logic to JavaScript and can see how different the two languages are at doing the same. A colleague and I recently made two buttons to expand and collapse all the levels in a documentation schema, and we didn’t want to …
AI’s superficial ripoff for consumption
Images, text, music and other products from various so-called AI models will never be the artistic output it mimics because it’s not about creating; it’s just consumption.In terms of process, there is little difference between putting on a movie or song that already exists and prompting what in …
The dissonant, unverifiable, dull output of ChatGPT
Suppose you ask the so-called artificial intelligence (“AI”) why you like your favourite band. It will look at other bands you like, find the one closest to your favourite by predefined category parameters, and spit out that band name as an answer. It won’t be entirely wrong – the two have some …
Creativity without collaboration tools
My career-long aversion to post-it notes peaked after an intense period of workshops. Small, contained, limited and limiting; the tiny, sticky paper is the antithesis of a yes phase and attracts more lint than ideas. Post-its play a crucial role in many stupid things: Writing down passwords and …
Getting people to participate equally
Getting people to participate in meetings, workshops and their field of expertise goes beyond removing gates and lowering thresholds. We must also work with the participants’ inner threshold, whether too high or too low, because there is no correlation between one person’s words per meeting and the …
How pointer coursor affects our usability decisions
Most interfaces, design systems and UI frameworks seem to be made by someone who has only heard stories of interfaces. It’s what we get when imitating each other. It’s what we get when bad practices become expectations. It’s what we get when making decisions without reasoning. We know what …
Set up a global chart.js config
I needed to make a distributable global base config for the React version of chart.js that still allowed for local overriding. The nice thing about chart.js is that this is possible. On the other hand, it’s chaining-heavy, and the documentation for it is basic and lacks relevant use cases. The way …
Programming unique accessibility
Arguing against accessibility isn’t only about the inability to see things from the perspective of others. It might also come from mistaking universal accessibility for tailoring, thinking the interface will be less convenient or harder to use for some. A car might be custom-built for one person …
Target this pointer event
With e.target, this and a bit of CSS, we can cover several use cases where we need to both register a click, or event, on an element and then do something with the same element.
Let’s say we have a single button with the id loner that we want to hide when …
Iterating instead of redesigning
When we work as if interfaces can reach completion, our fixes and new features tend to turn into redesign projects. We set out to make things right this time around; we might improve them but also change them to a degree where we introduce new issues. This form of redesign not only makes testing …
JS, SSG and CMS: Pick what you need
HTML, CSS and JS are not the output of our work, it is the matter we must know, account for and work with. Even if we produce it indirectly through frameworks, server rendering, templates or other languages. These are some of my experiences with picking such frontend tools. Out tools must enable …
Sequential-functional teams
"Every team needs a role x" can mean two things, either plainly "we need expertise x to make y" or more complicated "if you don’t have role x, you don’t have expertise x". The first meaning is easy enough to agree or even disagree with. The second one is a problem for the cross-functional team, its …
Craft CMS, React, TypeScript and back again
I threw out React and saved the user from downloading 175 kB JavaScript spread across 1 bundle and 8 chunks. Almost 600 lines of code written for React was converted to under 200 lines of Twig code and 25 lines of JS. Additionally, I removed: 200 lines of PHP to generate the JSON output. React …
CS50 and my final project
I completed Harvard’s CS50x: CS50’s Introduction to Computer Science on the last day of October 2021 and received a passing grade a couple of weeks later. It’s a course about "abstraction, algorithms, data structures, encapsulation, resource management, security, software engineering, and web …
Code knowledge to design
Successfully designing web interfaces requires the intentional picking of HTML elements. As interfaces aren’t clickable visuals, we can’t avoid code and we can’t hand things off to be "translated" into code. Knowing HTML doesn’t mean knowing each element by heart. Knowing HTML means having a …
Date input height in Safari
input type="date" in Safari renders an input much taller than others. Why not let it render like other inputs? The reasons are unknown. Luckily, it can be fixed by targeting the -webkit-datetime-edit pseudo-element …
UI sketches, not just a waste of time
Sketches – complete drawings as interface blueprints – have no place in interface design. Their fixed nature is fundamentally different to that of the fluid interface. Yet, that doesn’t mean such drawings are always entirely useless. Although I stopped making them several years ago, and people …
Friendly and unfriendly px unit use
Our job is not to control what every user gets but to give the interface the ability to perform the calculations it needs to provide enough flexibility. Technically and ideally, an interface is a set of instructions that should work with whatever technology the user prefers or requires. We can …
Fluid web typography with clamp() and vw needs calc()
Setting the font size like clamp(1.875rem, 3vw, 3.75rem) defeats the purpose of using rem. We must throw calc() into the mix to make it user-friendly.
The clamp() function sets three sizes: a min size, an in-between size and a max size. A common example …
Keep using system fonts
“System fonts” sounds boring, like a choice not made. It has the air of “something an engineer would pick”; it doesn’t feel like a design decision. And it doesn’t allow us to put “friendly, well-rounded and warm font” in our presentations. All that is either wrong or pointless because: Using …
Design system docs without colour
Colour pages tend to be listed as one of the first items in a documentation because they are basic properties present in all other elements. But this turns them into base elements and makes the palette – and not users and functionality – the starting and reference points for new elements …
Contributing to Style Stage
Style Stage is a project showcasing different ways to style one page just by switching the CSS. My contribution, Sysfonts, is meant to demonstrate the use of system fonts because that is, in my opinion, the best option for applications, both browser-living and native. I think they work pretty good …
Breaking and wrapping text with CSS
Overflow happens when an element is bigger than its container. Wrap is when an element continues on the next line instead of overflowing. Text wrapping happens by default at characters like spaces and hyphens, but not inside words. That works in most cases, but sometimes we need to control if and …
The uselessness of donut charts
Donut charts are not good at communicating. They look cool but are just as useless as pie charts. A donut is not just a pie chart with a hole; it’s a distorted stacked bar biting its tail. In terms of shape, there are some warning signs …
Principle for responsive tables
When I set out to solve responsive tables, I figured it would take a whole team a couple of weeks and we would build a microscopic component to provide clever shuffling of div elements. Instead, my conclusion led me to the opposite. Responsive tables are less about making them responsive and more …
Hugo timestamp with relURL
I’m fairly new to Hugo, but I’ve worked with my fair share of template languages to feel reasonably at home. Enough to both see familiar patterns, but also wonder "why have they done it like that?" Although the documentation could be a lot better, my biggest gripe now is the patchy support of syntax …
Web typography: Header spacing
The default spacing places headers in the middle between two paragraphs. It is as if the headers don't really belong anywhere. The header becomes a visual separator, and the semantic connection to the text that follows it becomes unclear. The meaningful structure falls apart.The distance also makes …
Feedback in the age of pedants
If it is one typo in some notes. In the middle of a presentation. Immediately after the presentation. If your only feedback is typo based. If you wouldn't have appreciated feedback at the given time. If something is not finished and you have not been asked to give feedback. If your feedback is …
Craft CMS, React, TypeScript and useful overkill
This site's setup is was unnecessarily complex. It runs on the PHP based Craft CMS outputting JSON through its Element API, that is fetched and displayed using React written with TypeScript compiled to JavaScript. And that's only the front page, the articles still use Twig templating, the default …
Code – the superior design tool
From SCSS and back to regular CSS
After having used SCSS/SASS for about five years, I recently quit. It's a great tool, but other tools with the possibility to use only what you need have taken over. And CSS has changed as well. When I started using SCSS, it was for browser prefix mixins, I had some heavy stuff going on just for …
Scramble ramble: Passwords, salt and hash
Passwords should be set, not sent – and other things I thought about when someone talked about password-emailing as a natural part of the user registration. I'm no security expert, but that's a big no-no.A password can't be secure unless it has been set by the user, it doesn't matter if it's at …
Zombie CSS, dependency cravings
componentDidUpdate(): No prevState without prevProps
Before React Hooks, I used the React lifecycle method componentDidUpdate(). A common way to use it is/was to fetch data based on changes made by the user. Let’s say, selecting a date. If the user selects the same date as the current date, it’s nice to not go fetch the same data again. Avoiding …
What I learnt in my first two years as a comic artist
For years I wrote a bunch of nonsensical short texts. At 25-30 pages, of what I consider glimpses into different characters' life and times, I decided to make a comic called Husbråk. Instead of being crippled by the fact that I hadn't done much of it before, I wanted to utilise the process to …
Writing messages for unexpected downtime
Bold, italic, strong and emphasised text
People don’t read and understand a text by decoding one word at a time but through meaningful totals. One word next to another creates a new meaning; style one word and another meaning appears. Bold is a structural tool. Italics influence meaning. In HTML, we have even more granularity with …
Misapplying é in Norwegian interfaces
My bank does it, Google does it and quite a few online stores do it. I'm talking about throwing an é in where it doesn't belong. More specifically adding acute accent (accent aigu) to the letter e in verbs that end with -er. I also used it at some point, but in this age of pedants, it’s now the …
Git squash and rebase
Git squash takes your commits and squashes them together, usually into one commit. Useful for creating one commit if you've got a lot of smaller commits that creates a messy Git history. Git rebase takes your branch and places it at the tip of the master branch (or whatever branch you rebase on) …
- Anti-intellectual tech
- Detectives in puffer jackets getting drinks
- Anti-design software
- Not the users I have in mind
- Saying goodbye to chatbots
- The Implied Web
- Nesting HTML list elements
- CSS context variants
- Making components with CSS nesting
- CSS experience, structure and utility use
- Grasping CSS: The speed of proficiency
- Grasping CSS: The concept of logic
- Signing git commits with existing SSH key
- Separating concerns with complex CSS selectors
- From 15 lines of JS to 3 lines of CSS has()
- AI’s superficial ripoff for consumption
- The dissonant, unverifiable, dull output of ChatGPT
- Creativity without collaboration tools
- Getting people to participate equally
- How pointer coursor affects our usability decisions
- Set up a global chart.js config
- Programming unique accessibility
- Target this pointer event
- Iterating instead of redesigning
- JS, SSG and CMS: Pick what you need
- Sequential-functional teams
- Craft CMS, React, TypeScript and back again
- CS50 and my final project
- Code knowledge to design
- Date input height in Safari
- UI sketches, not just a waste of time
- Friendly and unfriendly px unit use
- Fluid web typography with clamp() and vw needs calc()
- Keep using system fonts
- Design system docs without colour
- Contributing to Style Stage
- Breaking and wrapping text with CSS
- The uselessness of donut charts
- Principle for responsive tables
- Hugo timestamp with relURL
- Web typography: Header spacing
- Feedback in the age of pedants
- Craft CMS, React, TypeScript and useful overkill
- Code – the superior design tool
- From SCSS and back to regular CSS
- Scramble ramble: Passwords, salt and hash
- Zombie CSS, dependency cravings
- componentDidUpdate(): No prevState without prevProps
- What I learnt in my first two years as a comic artist
- Writing messages for unexpected downtime
- Bold, italic, strong and emphasised text
- Misapplying é in Norwegian interfaces
- Git squash and rebase