If Mondriaan used light, instead of paint.

Last week I showed my class a diagram that shows the difference between mixing colours with light, and mixing colours with paint. If you mix light, you work with red, blue and green, and when you mix them all together you get white. And of course, the absence of colour is black. Paint works differently. Here the primary colours are red, blue and yellow. And if you mix them, theoretically, you get black. And the absence of pigment results in white paint. This made me wonder, if Piet Mondriaan worked with light instead of with paint, what would his works look like?

Different, probably

I added a browser cache script to this site

I copied this service worker script and added it to my site. This means that when you’re offline you can still visit the pages you visited before — if you use a browser that supports Service Workers. I was really excited when I first tested it. It works! And five clicks later it felt completely normal. It occurred to me that yes sure, this is fantastic, but it shouldn’t be: this should be how the browser cache works. So I’m happy it can be done, but I’m not happy at all that I need to add a script to my site to do it.

Collect all characters you use on a page, a bookmarklet

Yesterday Peter van Grieken asked on Twitter if anybody knew a tool that displays all the different characters that are used on a page. This would be a handy tool for font subsetting: if your page only uses a few characters you don’t need to add all those other characters in your fancy font-files. Quite a few people answered to Peter’s tweet, but as far as I can tell nobody linked to a tool that does this. So I decided to create this tool.

It’s a bookmarklet

Enhancement blockers

Sybren Wartna has a better name for content blockers. He calls them enhancement blockers. And according to him, they shouldn’t change the way we design things for the web too much. Progressive enhancement was always a good idea. And he argues beautifully that the we should use it not just to design the happy flow. We should use progressive enhancement out of love.

Not just love, real love

Deel die data nou gewoon

Ik schrijf nu al een jaar of drie elke maand een column voor Webdesigner Magazine. De reden dat ik dat doe is omdat ik het belangrijk vind dat ik de kennis die ik bezit moet delen met jullie. Met mensen met meer talent dan ik. Met mensen met toffe klanten die gebaat zijn bij mijn kennis. Ik kom uit een familie van onderwijzers, dus deze manier van denken is vanzelfsprekend voor me. Kennis wordt pas écht interessant als je hem deelt. Als andere mensen er mee aan de slag gaan dan komen ze namelijk op ideeën en inzichten die jij nooit had kunnen verzinnen. Zo werkt vooruitgang. Voortborduren op andermans kennis.

En die dan weer delen, natuurlijk

Instead of just fixing it

The ever brilliant Maciej Cegłowski created another gem. He copied the Google AMP promotion page and made it fast, as it should be. Not by using AMP, like Google suggests when your website is slow, but by simply fixing the problem. He removed all unnecessary cruft, loaded the page directly (instead of slowly, slowly fading it in), added an extra quote from a contributor, and updated the copy here and there.

Some quotes

Losing sight

I wrote this set of functions that translate the HSL colour notation to human readable text. To be honest, I wondered if this idea makes any sense to, for instance, blind people. I thought it might, but I wasn’t sure. A while ago I met Léonie Watson at a conference and she confirmed that yes, this is useful to people like her who lost their sight. She still remembers colours. She wrote this heart breaking account of how she lost sight. You should read it. And then you should optimise all your sites so they work for everybody. Because that’s the thing that makes the web as incredible as it is: we can make stuff that everybody can use.

CSS stacking contexts

A good explanation by Tiffany B. Brown about how CSS stacking contexts work, and what triggers them. She also links to this article about the same topic by Philip Walton. Powerful stuff. Your (debugging) life is so much easier when you understand this.

Some problems with webfonts explained

In this clear article about some of the issues with webfonts Prateek Rungta wonders why some designers and developers still have such a hard time with accepting the fact that the web doesn’t look the same under different conditions. You should read it and let the people who don’t understand this read it as well. Like your art directors, your boss, your client.

yourself, perhaps?

Generating random colours from an array

I use a few different ways to generate random colours for my random projects. They result in different colour moods. RGB for instance is much more colourful than HSL. Very dark, very light, and unsaturated colours are not common when you generate random RGB. They are very common when you generate HSL though. And both will have relatively many green results.

Orange is nice as well

The Daily Dwagd, an inspiration bot.

Last week I finally bought the incredible Phaidon Archive of Graphic Design. It is a box filled with 500 sheets of paper, each with a description and a few images of one masterpiece from the history of graphic design. It is a fantastic resource for graphic designers, lecturers and students. The only problem I have with it is that it is a physical box with papers in it. You can not click through it, and you can not link to the works. I thought about digitising the whole thing, so I could create a webpage that shows you one random work every time you open it. It turns out you’re not really allowed to digitise books.

That’s stealing, according to some

Fast Food Design

I’m working on a talk for my students about what a visual (interface) designer is supposed to do. What does it mean to be responsible for what things look like? I asked for examples of sites that look the same, or sites that are boring, or ugly. Charis Rooda tweeted a link to this very good presentation about the value of good (visual) design by David S. Wieland. It is a perfect recap of some brilliant articles — like the instant classic Design Machines — and it translates the ideas about the future of visual design into some very clear points. It answers the question what the value of template-based things is, like Shopify for instance.

But it looks good

Blogging links

A while ago I decided that if I think a web page is interesting enough to link to, I should use more than 140 characters to explain why. This means that I publish links here, on my blog, instead of using Twitter. Most of the time I like this idea. It gives me more time to reflect, and it offers the possibility to add some other links, and to place the link in context.

Sounds ok

Add content to a browser error page

The network connection at my job sometimes doesn’t work. There seems to be some sort of conflict between some wifi access points and my computer specifically. The problem is that this doesn’t occur all the time. As you might understand, it doesn’t occur when the network support crew calls you back to further investigate the issue. So we agreed that I will call him back next time it happens.