Nerd.

For a long time I wondered what the media-query min-aspect-ratio does exactly. What does something like @media (min-aspect-ratio: 1000/1414) mean, and more importantly, what does it do. The spec is concise. It simply says the ‘aspect-ratio’ media feature is defined as the ratio of the value of the ‘width’ media feature to the value of the ‘height’ media feature.
But what does this mean?

The people of Creative Mornings in Utrecht asked me to do a small talk about Freedom¹ (video here). It’s always nice to get a topic for a talk, especially such a light hearted one. At least, if you look at freedom as a beautiful thing. But there are many definitions of freedom, and I think that I should mention one in particular before I start talking about the wonderful kinds of freedom the web has brought us.

What freedom is that?

A few months ago — inspired by the Indie Web Camp movement — I decided to create my own photo-site. I’ve tried many self-hosted gallery scripts before, but they never did what I wanted them to do. Many of these script have a bad case of feature creep, while others lack some essential features. And all of them are slow. During a two week period between jobs I wrote my own script. I’ve been using it since and I’ve posted more than 320 pictures on it. It’s not open source — I’m not a good programmer so I don’t think it’s safe to share this code. But I guess sharing my ideas might help others in creating something similar.

Interesting, go on

When an element has an ID, you can link to it. All browsers I know will scroll to the position of that ID on the page. This is a very useful feature. It enables you to provide skip links to sections of a long article, for instance. The problem with this technique though, is that most of the time that thing you want to link to doesn’t have an ID. Today I found a script that tries to solve that problem. From now on you can link to any text you like on my blog.

Show us how

I really like the :target pseudo-selector. It enables you to style the target of a so called skip-link. For instance when you link to a section in an article: you could highlight the header of that section. Or you can use it for toggling simple drop-down menus — the ones you see a lot on small screens. But you can also use it to create a completely different layout.

How do you do that?

I sometimes use the space bar to scroll down a page while reading. Recently I’ve been using it a lot with the random stuff I create, like the Daily Rectangle. Hitting the space bar shows you the next image, minus a bit: it doesn’t scroll 100%, it scrolls a bit less. This makes sense when you’re reading an article. The last lines you were reading at the bottom of the page will still be visible at the top after scrolling. I was wondering how high this height was, and if it’s the same on every browser.

That’s very useful!

Yesterday I ran some maintenance scripts via a maintenance app I’ve been using for ages on my Mac. For the first time ever it completely fucked up my computer. Some system preference icons were greyed out for instance, which means you can’t use them anymore. So Choosy — an app I need — stopped working. Hazel stopped working. I couldn’t manage my login items. And the finder kept crashing every ten seconds. Last week I wrote about my backup plan. Yesterday I needed it for the first time. They say that backing up is only useful if you can use your backups to restore your computer.

Did it work?

This column was published in the Dutch, paper version of Web Designer Magazine. It’s in Dutch. De manier waarop we websites ontwerpen is de laatste jaren radicaal veranderd. En de komende jaren gaat die verandering nog wel even door. Onze aandacht ging tot voor kort voornamelijk uit naar de interface: een duidelijke, grote header met een logo en een navigatie bovenaan de pagina, aan de linkerkant een subnavigatie; uiteraard maakten we ook minutieus vormgegeven — maar compleet nutteloze — widgets aan de rechterkant, en een rijke, volle footer. Dit alles zetten we op een grid in een zelfbedacht kader. Ik heb nooit zo goed begrepen waarom we dit kader wilden hebben: veel schermen zijn veel groter dan 960 pixels, en andere zijn weer veel kleiner. Deed het ons misschien aan het oude vertrouwde papier denken? Is het misschien makkelijker om in vaste formaten te denken? Of dwingen de tools die we tot nu toe gebruikten ons tot het denken in vaste formaten? Wellicht was het een combinatie van meerdere factoren. In elk geval ben ik heel blij dat we websites op een andere manier beginnen vorm te geven.

Ja, leuk

There are several reasons why I redesigned my site. One of them is the whole page. The previous design, like most websites, didn’t use the whole width of the viewport. The text was centred with a lot of white space around it on bigger screens. This is not really a problem, but it’s also not necessary.

Why not?

I decided to get rid of Dropbox. And I decided I don’t want to spend a fortune on fantastic hardware and software. So right now I now have the following setup to keep my important data in sync and safe from physical disaster.

Tell us how!

A few days ago Chris Coyier wrote an article about which font-size units to use. It’s a very clever idea. He basically says to use the em for font-sizes of elements like <h1>, and use rem to adjust the font-size of different components on the page. This definitely makes sense. It sounds like a similar solution to the one I describe here. There is one important flaw in this article though. Chris defines the root font-size in pixels. This is an accessibility problem.

Really?

I’m going to do a series of workshops about code for web designers. The goal of these workshops is to teach some essential basics about how HTML and CSS work to people who currently design stuff for the web in tools like Photoshop. After these series I don’t expect them to write production code, but I expect them to be able to solve certain design problems in the browser. I’m going to start with explaining semantics. Then I’ll teach them how to style texts, how to do good typography. After that I’ll teach them all those fabulous selectors we have. They’ll learn how to make animations and transitions, and how to apply bling with shadows, border-radius, gradients, etc.

But there’s more

Last week Nathan Ford published an article on A List Apart about shaping your content with grids based on ratios, instead of shaping it with grids based on columns. Since I have no feeling about what’s beautiful and what’s not I love articles like this one. They give me theory I can play with. By playing with this theory I might, one day, understand beauty. And I really want to understand beauty, so I started playing with the theory.

Go on

Every now and then I get a strange but happy e-mail alert. The alert tells me that someone liked a highlight I made in a book. This means that somebody was reading the same book I read a while ago, saw that I highlighted a sentence, probably read the comment I wrote in the margin and then decided that this highlight and comment were useful enough to like it. Of course this feature can not be found in a physical book, it is a feature in Readmill, an e-reader.

Sounds interesting