Halvor William Sanden

Senior developer at Bring (Norwegian postal service)

Set up a global chart.js config

Article -

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 to define one global property is to use the complete chained object for each setting, like …

Read "Set up a global chart.js config"

Programming unique accessibility

Article -

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, which is OK since it is that person’s car, compared to public transport intended for everyone. On the …

Read "Programming unique accessibility"

Target this pointer event

Article -

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 clicking it. We can solve that in the following way by using e.target …

Read "Target this pointer event"

Iterating instead of redesigning

Article -

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 both less viable and valuable, but it also hinders building the team’s experience. We can counter …

Read "Iterating instead of redesigning"

Sequential-functional teams

Article -

"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"

CS50 and my final project

Article -

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

Article -

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"

UI sketches, not just a waste of time

Article -

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, people don’t ask me for them, and I don’t get handed any. Sketches can be useful when made with the proper …

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

The unfriendly px unit

Article -

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"

Learn how to configure Webpack

Article -

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

Article -

"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"

Breaking and wrapping text with CSS

Article -

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 …

Read "Breaking and wrapping text with CSS"

Principle for responsive tables

Article -

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"

Trykke.no

Project -

Norwegian site on how to prepare things for print. A way of keeping and sharing some of the things I learned while working in printing. Features calculators for image resolution and paper weight.

Text HTML CSS Javascript Craft CMS

Chocolator

Project -

Calculate how many pieces of chocolate you need in your recipe.

An ongoing JavaScript experiment with maybe limited usefulness, but it's fun to keep improving the code. Written a few years back using jQuery, later refactored to ES6 and then currently into Svelte.

Affinity Designer HTML CSS Javascript Svelte
Headshot of me with medium long beard, dressed in a black coat

Halvor William Sanden

william@8yd.no

What I do

Mindset and motivation

  • Taking something complex and make it useful and understandable
  • Text and code are the ultimate design tools
  • Never stop acquiring skills and knowledge
  • Writing for good communication and fun

Short history

  • Passed Harvard’s CS50x, 2021
  • Designer/developer, Vanberg/Zoom Grafisk, 2008–2018
  • Ad agency course, Berghs/Westerdals, 2013
  • Designer/developer, freelance, 2007–2008
  • BA in graphic design and marketing, HiBu (USN), 2009
  • BA in art and communication, NTNU, 2006

Other creative endeavours

Making music

I play drums mainly and some keys and bass.

Dannet Konversasjon

A Norwegian podcast about things my co-host Milla and I think we know something about.