Design Systems and the source of truth

An article, posted 8 days ago filed in atomic design, design, design system, system, css, html, components, @bradfrost, collaboration & work.

Some excerpts I created from the transcript of the Design System Podcast, hosted by Chris Strahl, which in Episode 11 featured Brad Frost and Evan Lovely.

Hand-over of comps

The traditional process starts with the design of comps, comps, non-interactive previews, which are generated by the design team and undergo a rigid design review process up to a design director or VP, and is only then passed on to the developers who need to implement that initially static comp pixel perfect. But Evan Lovely notes that while there is nothing wrong with comps, there is something wrong with mistaking it for the final product. That’s why he likes tools like pattern lab, storybook or knapsack, because they really allow someone to quickly mock up a comp that actually works within the final environment.

To some companies this is a problem; because the formal approva…

Continue reading...


An article, posted about 2 months ago filed in browser, Edge, chrome, Firefox, support, mobile, Safari, complexity, quality & performance.

murb hanteert een browser support grading systeem (een idee dat ik ooit heb gekregen van Anselm Hanneman bij het lezen van How to define a browser support level matrix) voor browserondersteuning. We classificeren browsers met een A, B, C of D.

Klasse Omschrijving A Beste gebruikerservaring; alle features werken en weergave is duidelijk. B Alle features werken. Weergave niet altijd optimaal. C Basis functionaliteit werkt (in ieder geval rollen buiten controle (b.v. niet-admin functies)), maar geavanceerdere functies zijn niet altijd beschikbaar. Performance mogelijk niet optimaal. D Wordt niet ondersteund.

B2B projecten

Veelal kantoortoepassingen, complexe schermen, mobile support is een nice to have.

Klasse A Browsers:

  • Google Chrome op Desktop (laatste en op één na laatste versie)
  • Micros…

Continue reading...

To Tailwind or Not

An article, posted 4 months ago filed in tailwind, css, frameworks & bem.

Tailwind is a popular utility first based CSS framework, something that front-end developers can use to make a page look more stunning and/or more consistent. A few interesting takes on tailwind, one of the most popular utility first css frameworks:

I am still not convinced about Tailwind. Heck, I’m even not a major fan of full BEM, although I use it when I am building more complex components with mutiple thightly coupled related parts. The principles behind IT CSS still form the basis of how I prefer to like CSS (note: the author of IT CSS, Harry Robert, is also maintaining a [guideline on how to write maintainable CSS](…

Continue reading...

Highlights from the Atomic Design book by Brad Frost

Since his talk at Fronteers I was interested in the thinking of Brad Frost, his blog posts, etc., but never actually read his book Atomic design until recently, as it got more and more relevant to an internal discussion at an organization I was working for. A few notes:

  • Most importantly, what it is not: Atomic Design is not about being a practical guide for implementing design systems (although it has some examples in Pattern Lab, which was originally built by him). I was also hoping it would also give guidance on naming things / structuring CSS when building atomic design based design systems, but it does not. But don’t mind, plenty of good content(!)
  • Atomic design sounds like an too obvious idea and while I didn’t dismiss it because of that, I realized I also didn’t try to understand it thoroughly enough. Reading the book helped me to better understand it and especially thinking about the intermediate forms (molecules) was actually despite its o…

Continue reading...

Tag descriptor


An article, posted 7 months ago filed in pruning.

Software is never done. New ideas develop, new threaths arrive (business wise, security wise). Much like gardening really. Sometimes you can just enjoy the fruits of your labour, but at other times you have to deal with undesired plants that outgrow your crops, crop-eating insects etc. Fruit trees need to be pruned yearly to keep giving fruits. Anyway, I was realizing that I have been repeating this theme as an anology for software development for quite some years now, hence this overview ;)

Continue reading...

Using Tippy.js with Turbolinks

An article, posted 8 months ago filed in library, javascript, html & TurboLinks.

Tippy.js is a nice library to show popups. It may, however, not always be obvious how to use Tippy.js with Turbolinks (or any other library that modifies the DOM). The basic ingredient is somewhat hidden in the docs: deffered. But loading a HTML template requires a slight adaptation of what is presented in their documentation to make loading of these templates deferred.

From beginning to start. Add the library:

$ yarn add tippy.js

Add a CSS-class for your templates to be hidden by default:

.tippy-template-content {
  display: none;

And then add the following to your application.js (or equivalent in your setup):

import {delegate} from 'tippy.js';

delegate('html', {
  content(reference) {
    const id = reference.getAttribute('data-tippy-template');
    if (id) {
      const template = document.getElementById(id);
      return template.innerHTML;    
  allowHTML: true,   ...

Continue reading...

99% tegen 1%

An article, posted 11 months ago filed in geld, ethiek, efficientie, duurzaamheid, ict, it, goed, energie, occupy, datacenter, cariere, verdienen, economie & fout.

Hoe ik mijn geld verdien houdt mij bezig. Ik vond deze draft terug uit ~2011.

Nietzozeer over hoe ik rijk kan worden, maar meer om te weten of ik wel (mee)werk aan iets waardig is.

… en dat ik dus niet die hefboom aan het creëeren ben waardoor 99% minder gelukkig wordt, en slechts 1% profiteerd, omdat een wereld waarin een goede middenstand bestaat beter functioneerd.

Door de focus op kostenbesparingen en efficientie, die sterk versterkt wordt door de lage prijs van het geautomatiseerd toepassen van een beproefd recept (de kracht van een computerprogramma) zorgen monopolistischd ondernemers ook voor een grotere scheiding tussen arm en rijk.

Nu ontstaan er altijd weer nieuwe banen. En er ontstaan ook altijd weer nieuwe problemen die nieuwe unieke oplossingen vereisen. Maar kunnen die onafhankelijk tot bloei komen als de het er altijd weer op …

Continue reading...

Bye Internet Explorer

An article, posted 11 months ago filed in ie, internet explorer, windows, Edge, Chromium, chrome, browser & Firefox.

It is easy to say, just stop supporting Internet Explorer (IE). But there are large organisations that require IE for legacy stuff. If you serve these, you might be asked to support IE. Even though, globally, roughly only 2% of the users still use this browser.

For versions before IE the argument has been easy: "We don’t support a browser Microsoft is not supporting," but support for IE11 doesn’t seem to stop anytime soon: The latest IE (IE11)will be supported as long as the last version of Windows that supports it. That means untill support for the current version of Windows has ended.

With the launch of Edge, Microsoft initially went along with popular demand not to bring support for older engines to their new browser, then codenamed Spartan, but released as Edge. The very latest version of Edge, however, now…

Continue reading...

Tag descriptor

Coffee and Oranges

An article, posted about one year ago .

End of 2018 I started a separate blog. Coffee and orange. I decided to move all content back to my main blog, because I didn't want to keep on maintaining a Wordpress instance. This site is happily served by my own system. Below are the just 5 posts. I happily continue to post new items on my blog.

Continue reading...

Relative font sizes, or pixel based? 2020-edition

An article, posted about one year ago filed in px, font, usability, accessibility, user, sketch, css & design.

Occasionally I still have discussions about px-based font sizing, feeling like the other party has lived under a rock since early 2000's. But some designers still like their pixel based tools; maybe it even got popularised again by relatively new tools like Sketch and Figma, introducing pixel-units in a vector-based tool.

Well, to be honest, it matters less these days when compared to the days I learned that pixels are bad. Those days browsers were enlarging only text when it used relative sizes. In response to not all sites serving relative font siz browsers have introduced full page zoom functions, which is common place these days, when you press Command/Control plus ‘+’ everything will scale; text images etc.

But the text-size function is still used. In Firefox, Settings > General > Language and appearance sets the default font-size. In Chrome: Settings > Appearance > Lettersize. When you’re young and able you probably wouldn’t need to know about these things. But we shoul…

Continue reading...

Nieuwjaarsrede 2020: Introspectie

Weer verhuist. Hopelijk blijft het zo. Een prachtige plek in Amsterdam voor mij, mijn vriendin en onze dochter. In een nog redelijk gemengde wijk, maar voor ons zaten er arbeidsmigranten met een westerse achtergrond dus euh :) #gentrificatie

Ik zit in een luxe positie. Een huis kunnen kopen in Amsterdam is al een luxe op zich. Toch voel ik mij nog steeds verwant met de linkse kant van het politieke spectrum. Alleen schijnt dat niet bij iedereen een populaire positie te zijn. De linkse politiek is het afgelopen jaar een gewild doelwit geworden van een uitdijende groep. FvD’ers, Nazi’s, Boeren, VVD’ers. En dat wringt toch ergens, want links ben je in de eerste plaats toch vooral omdat je betrokken bent, bij mensen die het financieel minder hebben, bij het milieu en het klimaat, bij gediscrimineerde minderheden. En het idee is dus dat die mensen, dieren, planten, planeet, geholpen dienen te worden vanuit de overheid (want democratisch en onpartijdig), iets dat (eenvoudig gezegd) het…

Continue reading...

How to REST?

An article, posted more than one year ago filed in rest, api, technology, computer, resource, manipulation, http, requests, post & delete.

Today I tried to explain REST (as in REpresentational State Transfer, not near sleep) to a manager and why some of the services deployed at the organization he was working for wasn't REST. While there isn't a formalized spec, there is a dissertation by the Roy Fielding, who came up with the REST-principles as a set of principles that guided him while shaping the HTTP 1.1 standard which only recently got a successor with version 2.0… REST is a set of principles/guidelines that are very stable & predictable. It is also very simple, and theirin lies both its strength, and the sometimes too loose application of its principles.

Apparently many developers didn't get 'the web' (HTTP) right, hence REST was developed as a basic set of principles to explain how HTTP is supposed to work. This is a list of my favourite parts, also based on some secondary resources.

Some key concepts.

REST is about …

Continue reading...

Considering online generation of certificate requests

An article, posted more than one year ago filed in certificates, browser, javascript, ssl & tls.

Recently I’ve been researching what other Certificate Authorities do within the domain of online generation of certificate requests (and related private keys).

It is tricky territory: JavaScript and Crypto. Or more generic, webapplications and crypto. But with the advance of the WebCryptoAPI some issues that were raised (e.g. insufficient random number generation) by security experts have been addressed, but still: the WebCryptoAPI entry on MDN starts with a fair warning: “If you're not sure you know what you are doing, you probably shouldn't be using this API.”

Why think about a web implementation at all to create a certificate request? Typically tools to generate certificates are hard to use. Just look at the list of options a user has to generate certificates, which are typically all of…

Continue reading...

Total cost of ownership valt niet te generaliseren

An article, posted more than one year ago filed in software, samsaffron, performance, ruby, windows, linux, macos & support.

Om de zoveel tijd komt de term weer terug: 'TCO'. Total Cost of Ownership. Hoeveel het allemaal bij elkaar kost. Het werd in het verleden ondermeer uit de kast gehaald door Microsoft om te waarschuwen voor de kosten die de conversie van naar opensource software met zich mee zouden brengen. Onder TCO wordt dan ook gekeken naar o.a. opleiding, de kosten van licenties, wat de onderhoudsmedewerkers kosten (linux beheerders zouden duurder zijn dan mensen met een microsoft diploma). Wat willekeurige observaties.

Jaren terug genoteerd:

> Grappig om te zien hoe hij met het bijna niets kostende stukje software (van een grote speler) vele uren bezig is om via de complexe interface iets relatiefs simpels voor elkaar te krijgen: een factuur te printen. Straks gaat het zich terugbetalen, zo gaat het argument… maar ik heb er weinig vertrouwen in. Niet in dit geval. Wanneer je werkt met relatief grote bedragen worden er niet zoveel facturen verstuurd. Automatische koppelingen met de bank is …

Continue reading...

Bad CSS in JS

An article, posted about 2 years ago filed in css, react, style, javascript, standards, simple, simplicity, npm, packages & coffeeandorange.

I tried to understand the argument made for styled components vs. ‘traditional’ CSS. But when reviewing these arguments I found out that they typically use bad code as proof for their point.

See e.g. the following SCSS code:

$blue = #5DBCD2;

@mixin button-styles($bg-color, $color) {
  background: $bg-color;
  color: $color;
  border: none;
  border-radius: 0.20em;
      background: darken($bg-color, 6%);
      cursor: pointer;

.button {
  @include button-styles(#ddd, black)

.button--primary {
  @include button-styles($blue, white)

To pair with a simple component along the lines of:

const Buttons = props => (
export default Buttons

The suggested alternative is:

import themeVars from "myTheme"
import styled from "styled-components"
import { darken } from "polished"

const B...

Continue reading...

murb blog