Halvor William Sanden
Senior developer at Bring (Norwegian postal service)
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 …
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 …
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 …
Date input height in Safari
Article -
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
Article -
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 …
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 …
Web typography: clamp() with vw needs calc()
Article -
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 …
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 …
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 …
Sysfonts
Project -
I contributed to Style Stage, a project showcasing different ways to style one page just by switching the CSS. Sysfonts is meant to demonstrate system fonts, which I see as the best option for web and native applications.
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: normal and …
The uselessness of donut charts
Article -
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 …
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 …
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.
Web typography: Header spacing
Article -
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 …
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.
Bold and italics, the choice isn't yours
Article -
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 …
Misapplying é in Norwegian interfaces
Article -
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 …
