2023 January // Programming
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 …
2023 January // Programming
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 …
2023 January // Gained knowledge – Teams and processes
Images, text, music and other artificial intelligence products (AI) 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 AI for …
2022 December // Gained knowledge
Suppose you ask 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 connection, and we …
2022 October // Teams and processes
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 …
2022 September // Teams and processes
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 …
2022 July // Making interfaces
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 …
2022 June // Programming – Tools – Gained knowledge
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 …
2022 April // Making interfaces
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 …
2022 March // Programming – Gained knowledge
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 …
2022 February // Making interfaces – Teams and processes
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 …
2022 January // Tools
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 …
2022 January // Making interfaces – Teams and processes
"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 …
2021 December // Programming – Tools
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 …
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 …
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 …
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 …
2021 March // Making interfaces – Tools
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 …
2021 February // Making interfaces – Programming
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 …
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 …
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 allow us to put “friendly, well-rounded and warm font” in our presentations. All that is either wrong or pointless because: Using …
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 …
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 …
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 …
2020 May // Making interfaces
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 …
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 …
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 …
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 …
2020 January // Gained knowledge – Teams and processes
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 …
2019 December // Programming – Tools – Gained knowledge
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 …
2019 October // Making interfaces – Programming – Tools – Teams and processes
2019 September // Programming – Tools – Gained knowledge
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 …
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 …
2019 August // Programming
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 …
2019 May // 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 …
2019 April // Making interfaces
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 …
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 …
2019 March // Programming – Tools – 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) …