Halvor William Sanden

Articles and other writings

Categories
Display

JS, SSG and CMS: Pick what you need

2022 January // Tools and productivity

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 us to generate code on a level that at least matches what we otherwise would have hardcoded. Beyond …

Read "JS, SSG and CMS: Pick what you need"

Sequential-functional teams

2022 January // Making interfaces – Tools and productivity

"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 members and their process. If we put together a team based on a set of roles, each member runs …

Read "Sequential-functional teams"

Craft CMS, React, TypeScript and back again

2021 December // Programming

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 and react-waypoint. Duplicated SVG code (Craft can flexibly inline SVGs instead). I have previously …

Read "Craft CMS, React, TypeScript and back again"

CS50 and my final project

2021 November // Gained knowledge

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 programming". In addition to ten labs and problems sets along the way, there’s a final project where you …

Read "CS50 and my final project"

Code knowledge to design

2021 November // Making interfaces – Programming

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 it later. Knowing HTML doesn’t mean knowing each element by heart. Knowing HTML means having a combined knowledge enabling us to use the right elements and communicate what they are and what …

Read "Code knowledge to design"

Date input height in Safari

2021 November // Making interfaces – Programming

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 …

Read "Date input height in Safari"

UI sketches, not just a waste of time

2021 March // Making interfaces – Tools and productivity

I stopped making them several years ago, people don’t ask me for them and I don’t get handed any. 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 completely useless. Sketches can be useful when made with the right fidelity for …

Read "UI sketches, not just a waste of time"

The unfriendly px unit

2021 February // Making interfaces – Programming

Pixels fixates the layout, the sizes, the spacing and the typography. It’s useful when we make things like drawings, ads or video. But when it comes to interfaces, we want as much fluidity and relativity as possible. Something pixels are unable to provide. Technically and perhaps ideally speaking, an interface is a set of instructions that should work with whatever technology the user prefers or …

Read "The unfriendly px unit"

Web typography: clamp() with vw needs calc()

2021 January // Making interfaces – Programming

Setting the font-size like clamp(1.875rem, 3vw, 3.75rem) defeats the purpose of using rem. But if we throw calc() into the mix, we’re back in the business of user-friendly sizing. The clamp() function sets three sizes, a min size, an in-betweeen size and a max size. Many examples use the following …

Read "Web typography: clamp() with vw needs calc()"

Learn how to configure Webpack

2020 December // Programming – Tools and productivity

Going from an empty folder to a living React project can feel like a daunting task. If you are overwhelmed by certain ejected configs or underwhelmed by zero-configs, it’s time to learn how to make pragmatic, powerful and customisable configs. A colleague and I have written an article on why and a tutorial on how …

Read "Learn how to configure Webpack"

Keep using system fonts

2020 November // Making interfaces

"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 give you the opportunity to put "friendly, well-rounded and warm font" in your presentation. I think that’s the wrong approach because: every choice is a design decision, the title of the person making it doesn’t matter for a lot of …

Read "Keep using system fonts"

Design system docs without colour

2020 October // Making interfaces – Programming

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 …

Read "Design system docs without colour"

Contributing to Style Stage

2020 August // Programming – Gained knowledge

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 on more text-based sites as well. I have written an article about system vs. custom fonts …

Read "Contributing to Style Stage"

Breaking and wrapping text with CSS

2020 June // Making interfaces – Programming – Gained knowledge

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 where wrapping should occur. Break is when wrapping happens inside a word. overflow-wrap: normal and …

Read "Breaking and wrapping text with CSS"

The uselessness of donut charts

2020 May // Making interfaces

Donut charts are used because they look cool, not because they are good at communicating. While being just as useless as pie charts, a donut is not just a pie chart with a hole, it’s also a distorted stacked bar biting its tail. In terms of shape, there are some warning signs …

Read "The uselessness of donut charts"

Principle for responsive tables

2020 March // Making interfaces – Programming

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 about presenting them in responsive environments. Read about the principle and the explanation over at …

Read "Principle for responsive tables"

Hugo timestamp with relURL

2020 February // Programming – Gained knowledge

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 highlighting and formatting. When my team tried to combine a timestamp with a relative url we got …

Read "Hugo timestamp with relURL"

Web typography: Header spacing

2020 January // Making interfaces – Programming

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 the paragraphs' normal line-height look too tight. It tempts you to increase the line-height …

Read "Web typography: Header spacing"

Feedback in the age of pedants

2020 January // Tools and productivity – Gained knowledge

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 feelings-based. If you are trying to impress someone. If the nerd alert is about to go off. If there is …

Read "Feedback in the age of pedants"

Craft CMS, React, TypeScript and useful overkill

2019 December // Programming

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 for Craft. The workflow isn't inefficient, but I could have made it simpler by just keeping Twig or …

Read "Craft CMS, React, TypeScript and useful overkill"

Code – the superior design tool

2019 October // Making interfaces – Programming – Tools and productivity

Read "Code – the superior design tool"

From SCSS and back to regular CSS

2019 September // Programming

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 supporting flexbox. And even then a lot of the parameters had to be duplicated because the values …

Read "From SCSS and back to regular CSS"

Scramble ramble: Passwords, salt and hash

2019 August // Programming – Gained knowledge

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 registration or if it has been forgotten. Online stores, banks, email providers, no one should have …

Read "Scramble ramble: Passwords, salt and hash"

componentDidUpdate(): No prevState without prevProps

2019 June // Programming – Gained knowledge

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 blinking interfaces and unnecessary network requests. In order to do that, we compare the current date to …

Read "componentDidUpdate(): No prevState without prevProps"

What I learnt in my first two years as a comic artist

2019 May // Tools and productivity – Gained knowledge

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 improve my skills …

Read "What I learnt in my first two years as a comic artist"

Bold and italics, the choice isn't yours

2019 April // Making interfaces – Programming

Bold and italics are in no way stylistic choices with interchangeable meaning. Using the right one can be as important as using the right words. People are not understanding by decoding one word at a time, but through sentences that are meaningful and important as a whole. Italics have direct meaning in the context of what's being told. Bold communicates outside of that context, it has no control …

Read "Bold and italics, the choice isn't yours"

Misapplying é in Norwegian interfaces

2019 April // Making 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 only typo I usually point out. Once you become aware of it, it will hurt your eyes every time you see …

Read "Misapplying é in Norwegian interfaces"

Git squash and rebase

2019 March // Programming – Tools and productivity – Gained knowledge

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). Useful for when the master has been changed since you branched off, an now want to have those changes …

Read "Git squash and rebase"

Things that got done

2019 February // Gained knowledge

The key takeaway for me in Getting Things Done was getting the things out of my head. For a few years now I have put all ideas, tasks and projects into my task system instead. It increases the chance of doing the things and frees up mental resources. Great for planning, but not for reviewing. At best it can show you what's done, but not the result of it. Being obsessed with productivity while/and …

Read "Things that got done"