Cancelling accounts

I used to be excited about services like spotify. Now I didn’t have to find that one person who happens to have that LP record and go over there and tape it, and I didn’t have to enter people’s computer via limewire to download low bitrate mp3’s. Instead I could just listen to most music right away. Which is nice. Until I read that they don’t really pay their artists. And that they generate songs with llm’s. And that they promote these songs. And that they spend money on machines that kill.

So I canceled my spotify account. There are some things you should consider before canceling: all your playlists will be gone as well. Also the shared playlists that you started. As a result, some friends of mine were unhappy that I left. I invited them to also come over to Qobuz and Bandcamp. I’ll be there, until these services become assholes too. We had a family account at spotify. I had to cancel that. The rest of the family didn’t want to move away (yet), so they created a duo account. I downloaded all my data, and deleted the account. It feels good.

I have never been excited about linkedin. I opened an account a few years ago because I thought it would let me follow my students, to see what they were up to. But linkedin doesn’t allow you to follow a simple timeline, it does silly stuff with algo’s, and it uses ridiculous translation machines, and it sends me spam messages, and it is owned by microsoft, a company that earns billions of dollars from machines that kill.

So I canceled that account as well. There is absolutely nothing to consider when you cancel that account. Just close it and you’re done. It is a ridiculous place where people act crazy. People say things like “I am grateful for having spent time with company x” when company x just fired them. “Fuck company x” is the appropriate reaction, but the algo doesn’t like those messages.

I will not miss both these accounts. They are absolutely horrible businesses that don’t deserve my money or time.

A lasting digital clock

Most of my clocks are just websites, you can look at them in your browser. I turn some of my clocks into physical objects, physical clocks for in your home. One of the things that I find most complicated is the question of how to show the correct time on these things. There are a few possible strategies.

Sync time with NTP

Computers use NTP to synchronise time. Raspberry pi computers use this protocol as well, so as long as there’s a network connection, the time will be right. This isn’t a real long term solution though. There are quite a few dependencies though, and I want as few dependencies as possible. First of all, NTP will probably stop working, one day in the future. From that day on the clock will not be a clock anymore.

The second issue with depending on a resource on the internet is that the clock needs an internet connection. Raspberry pi computers do have wifi, so it is possible to add a connection to such a clock. The problem here is: Will wifi exist forever? And the other, more complicated problem is: How do you change this network, if the clock moves to another place, or if the wifi is changed?

To make things more complicated, these clocks are in read-only mode. Which means that a graphical interface to change the network would involve restarting the computer first, then set the new wifi name and password, and then set the computer back into read-only mode. I find this too complicated.

Set the time manually

The other option is to let the owner of the clock set the time manually somehow, for instance via a visual interface. This way you don’t depend on the internet, and on protocols, and the clock just works. The issue with this solution is that the internal clock of a raspberry pi is not very precise, and that time doesn’t keep on ticking when the power is cut off. You will have to set the time after every restart, and even if you never turn it off, you have to adjust the time every now and then.

What I like about this solution is that you have to interact with your clock, just like you have to interact with old mechanical clocks. My parents wind their clock every morning, and correct the time, if needed. It is part of a morning ritual, and it makes them more aware of the time, and of their clock.

Add a real time clock

Then finally there is the option of enhancing a manually adjustable clock, by adding a real time clock module to the raspberry pi. These modules can be pretty accurate, and they have the added benefit that they keep on ticking when you turn the power off. They do need a battery for this feature though, so that is a dependency. The battery will eventually run out, which can take years. The owner of the clock can then buy a new battery, if these specific batteries are still for sale in the future. And if not, the clock will fall back to a clock that needs manual adjustment after every restart. This might feel like the clock is broken, to people who are used to it.

Conclusion

I started writing this article with the intention of asking you, the reader, what the best option would be: NTP, a simple manual clock, or an enhanced manual clock with a real time clock module. But after writing it I come to the conclusion that I like the manual clock most. I’m still a bit in doubt if I like the enhanced version better. So if you have a very strong argument about one or the other, please let me know.

I broke my mastodon

Update: I fixed it. You can all find me on Mastodon again.

Colourful news

In the Netherlands the leader of one of the fascist parties is seeking attention again. And in the US there are a few men who get too much attention in the news as well. A while ago I made a browser plugin that looks for news items that contain the names of these men, and replaces them with brightly coloured rectangles. I’ve been using this plugin for quite a while now and I am very happy with it.

But don’t you miss important news?

No.

Install it in your browser of choice

If you want to turn your digital newspapers in to readable, colourful websites, you can find the link to the plugin right here on codeberg, or on the mozilla website. Works in any browser, as long as it’s firefox¹.

This plugin is a few months old now, I just forgot to post about it on my website. That’s fixed now.

1. Or another browser based on the same rendering engine, like Floorp or LibreWolf. ☝

The unofficial Pre-CSS Day event

One of the webby highlights of the year must be the CSS Day conference in Amsterdam. It is not just single day conference about CSS, it’s much more than that. The conference itself is two days, and there are events on the day before, and on the day after the conference as well. So if you want to, it’s a four day event, filled with brilliant speakers. I love these days. I’m not always surrounded by hundreds of people with whom I can discuss all the latest developments around CSS, unfortunately. It’s four wonderful days of utter niche nerdery. I love it. Me and my colleagues always try to be a part of the events, not just by visiting, or by speaking, but also by organising side events.

On the afternoon before CSS Day I’ve always tried to organise a meetup at the University of applied sciences in Amsterdam. Since many of the international speakers are already in Amsterdam, I try to invite one or two of them to come over and speak to my students, to my colleagues, and to everyone else who is interested. I did the same thing this year, which resulted in the one and only Unofficial Pre-CSS Day event¹ on Wednesday June 4 at 16:00, and I am very excited about the line up.

The line up

Nils Binder is not speaking on CSS Day, but he should be. So this is a chance to see him talk about really creative, and really webby webdesign. It’s an important topic. Nils will show us that the web is not done, it cannot be automated. We need creative designers who understand the material that websites are made from, in order to make the web accessible, usable, and beautiful.

And Miriam Suzanne will give a talk about the fact that Tech continues to be political. You may have read that article recently, it did the rounds, and this is your chance to listen to Miriam tell an updated version of this story, live. It is a very important topic, you should be there and hear it.

We’ll also give a short presentation of the work our students have made during the creative CSS course they followed a few weeks ago. This course was given by Sanne ’t Hooft, Roel Nieskens and Nils Binder. I am so jealous of my students!

The details

You’ll have the chance to meet Nils, Miriam, our students, and all the other visitors, after the talks. Please do register on our Gath.io page, so we can make sure there are enough chairs, and enough drinks and bites for you all. The event starts at 16:00 on June 4, and it takes place in the beautiful old lecture hall on the 9th floor of the Kohnstamm building, with an incredible view over Amsterdam. After the event there will be people who can guide you to the Official Pre-CSS Day Event.

1. The one and only official Pre-CSS Day event is called ::before{content: “CSS Day”} — Pre-conference Meetup and it’s at IO Digital. You should attend it, after you’ve attended our event. They have a fantastic line-up as well! ☝

Talking about clocks

Whenever people want to know about the clocks I make, I talk about them. These conversations are usually in private. But a while ago Edgar Walthert from letterspace.amsterdam asked me if I wanted to give a public talk about my clocks. And I said yes. So if you want to, and you are in Amsterdam on the 11th of June, you can reserve a seat to listen to me talking about clocks.

I’m going to talk about the experience of time, about controlled randomness, about unrepetetive repetitiveness, about Greek time, and about Dutch time, which is much weirder than you might think. I’m going to show some of the clocks that I made: precise clocks, human clocks, a salad clock, fuzzy clocks, the Pix Clock, and a clock that claims to be an alternative to the sun. And since this talk is part of a series of events that focuses on typography I will show one or two typographic clocks as well.

You can reserve a seat on the Eventbrite page. See you all there!

I make clocks

I make clocks. They are all very nerdy. So they deserve a spot on my nerd blog. But they are also very arty, so they deserve to be on my Love Nonsense blog as well. I chose to write about my clocks on Love Nonsense, so here’s a summary of all the clock posts I wrote over there.

A clock that shows the correct time twice a day

I made a clock that shows the correct time just twice a day. This sounds easy. A picture of a clock would probably do the job for most people. But what if you want to make a digital clock, on the internet, that only shows the correct time two times in 24 hours, and take this literary. I built the clock, but it turned out to be complicated enough to write a complete blog post about it.

The Pix Clock

Of course I wrote an article about the world famous Pix Clock, the clock that shows the time by showing pictures of clocks. By now the clock is full, it has at least one picture for every minute in a day, thanks to many people who helped. Especially David Krooshof has contributed many, many pictures. More pictures are always welcome, so go ahead and send them to me.

A clock with eight units

I took a picture of a drawing of a clock which left me puzzled what time it was on that clock. I turned it into a useless, complicated, but working clock.

Typewriter clocks

When Erik van Blokland released his NCND font I just had to make a few clocks with it. I especially loved the variable power axis of the font, which resembles the way old mechanical typewriters used to work: the harder you hit the keys, the bolder the letter. I made a few clocks that use a random weights for each letter. And then I decided to write a pinky algorithm, that chooses a force based on the finger that types the letter. A very nice experiment that even turned into a nice physical clock.

Square clocks

I used to have a problem with square clocks, and thanks to my daughter’s maths classes I was able to solve it once and for all. In the end it turned into a unforeseen graphic clock.

A wandering hour clock

I recreated an medieval clock mechanism with modern CSS. It’s the so called wandering hour mechanism and it’s brilliant. I wrote about the process of building it.

Anti clocks and off clocks

I wrote a few blog posts about anti clocks, or off clocks: clocks where the minute hand is in a different place than you would expect when you look at the hour hand. Usually these clocks need a bit of maintenance, but instead I decided to look for systems where they would show the correct time. Here’s an article about anti clocks, with hands that that move in different directions.

There were other, more complicated ways to make clocks, which turned into this series of off clocks, clocks where the hour hand doesn’t move, or where the face moves together with the hour hand. A very nice experiment that resulted in the even nicer physical alternative to the sun.

Another off clock is on this image of a digital clock that Robert Jan Verkade sent me. It shows the time as 25:14, which triggered me to make a whole series of clocks that could show this timestamp.

Interactive clocks

So far, all these clocks are just things you look at, not things you have to interact with. I wrote about a few projects where the clocks turned into interactive things, like these rotary phone clocks. One of these clocks is an accessible version of the Pix Clock, which blind people can use as well.

These rotary clocks are physical clocks. I also made a few digital interactive clocks. Clicky clocks, typey clocks, and scrolly clocks

I enjoy making clocks. I’ll probably write more about them in the future. If you enjoy those posts, follow Love Nonsense. Or otherwise wait for the next clock update here on my nerd blog, in a few years.

Picking an LP record at random

We have a collection of LP records here at home. It’s not one of those wall filling record collections (yet), but it is quite large. And it’s growing. I discussed having a record collection with a friend of mine recently. He really has an enormous collection. He said he stopped buying new records (I’m not sure I believe him). Instead of buying new records, he picks records at random and then listens to them. It’s very likely that he hasn’t heard these songs for a long time. This gives him a similar sensation to buying a new record, he said. I kinda like this idea.

I’ve noticed that if you pick a thing at random from a physical row, items at the edges of this row have a lower chance of getting picked. This means that this idea of picking a physical record at random doesn’t work for me. Instead I used the discogs API to create a random LP picker for me. My record picker first checks how many records there are in my collection, then it picks one at random, it does some math to see on what page it can find the details about this record (there are 50 records per page), and then it shows the artist and the title of the record.

At first it simply showed a new title whenever I reloaded the page. This meant that I could cheat: If I didn’t want to listen to this record I could simply refresh the page. And again and again until it shows something I want to listen to. This beats the purpose. The purpose is to be surprised by one random album. So I rebuilt it to only show a new record after a certain amount of time. Ideally this would be after the duration of the record itself, but unfortunately the API doesn’t return this data. I set it to ten minutes for now: the average duration of a 7 inch single + the time to find it and put it on.

An accessibility meetup

A while ago the kind people of the Idea11y meetup group contacted me to see if we, at the CMD school of digital design in Amsterdam, were interested in co-organising an accessibility meetup. Of course we are. Such a meetup is perfect for our students. For instance for the students who follow the web design & development minor. It’s a great opportunity to meet people from the field in an informal manner, and to hear different stories about accessibility in practice. We do give our students assignments where accessibility is a main consideration, but for our students these are still just assignments. It’s good to meet people who actually put things in practice. But this meetup is not just good for my students, it’s good for you as well. So feel free to join us.

We invited two accessibility experts to each give a talk. Erik Kroes, a very experienced accessibility expert, will give a talk called Practical fixes for common WCAG failures. An interactive session where he will share his extensive knowledge about working with accessibility in large organisations like ING, IKEA, WeTransfer and VodafoneZiggo. The second speaker is Nienke de Keijzer, a former CMD student, who recently graduated with a project for the Amsterdam public transport operator, GVB. She redesigned their app with a focus on accessibility. She involved all kinds of people in the process, from blind travellers to bus drivers. All her findings will be implemented in the app, and they offered her a job as a UX designer. It’s going to be her first appearance as a public speaker. You don’t want to miss this.

Update:

Making my own CMS, hahah

The first weblog-like website I made was simply a bunch of HTML files connected with hand written links. Later I found out there were weblog systems. They seemed handy. The first one I used was the incredible Pivot flat file system made by the incredible Bob den Otter ∞. I used Pivot because I was afraid of databases. Later, when this fear faded a bit, I switched to wordpress. But wordpress is overkill for a personal website¹. I looked at things like Kirby and 11ty, but whenever I want to change something in any of those systems it takes me forever to find the right place. Way too complicated, with way too many generic features for the very specific stuff I want. And so, as all nerds do, I started making my own CMS. A CMS for myself, for someone who understands and likes HTML, CSS and PHP.

Why would you ever want to do that?

I found myself managing the system, more than that the content management system was managing anything for me. Software like wordpress needs constant updating. I don’t want to update software, I want to build stuff and I want to write stuff. That’s one reason to make my own CMS.

Another reason is that I don’t like the idea of templates. I think they make the web boring. On every weblog, all pages look the same. And I think the way something looks influences its meaning. So I want to be able to tailor every page to its exact needs. I did add default styling to each page, but I can easily add to it, or completely overwrite it if I feel like it. So this is a CMS that invites me to be creative. It is a system that allows me to completely manage my content in every way.

How

Instead of using some server rewrite magic to create nice URLs, this system simply generates a real folder with this slug name, with all necessary files in it: a markdown file, a CSS file, and a PHP file. I write the content in the markdown file, if I want to I can add styling to the CSS file, and if I want to go crazy I can change the complete structure of the page in the PHP file. I don’t need images yet, but in the future I’ll probably write a simple script that generates images in different sizes. This will happen again in the folder itself. All content in one place.

I look forward to playing with this CMS. It is a very Vasilis-like CMS. It seems to fit in perfectly with my need to create stuff.

1. And the guy who runs it cannot be trusted. ☝

What makes a designer a good designer?

Years ago we organised a series of meetups at CMD Amsterdam around the question what makes a thing a good thing? We’ve let that question rest for a few years. But it kept itching. So we’re starting a new series of events around an updated variant of this same question. This time we are less interested in the thing, and more interested in the person. So the question we want to investigate this time is what makes a designer a good designer? And related questions like what makes a designer a critical designer?

We’ve started organising a brand new series of meetups at the CMD school of design in Amsterdam. We’ve invited an eclectic mix of digital experts to help us find an answer to this complicated question. The first three events are already planned, so block these dates and please do come by. It’s been too long we met.

The first speaker is in this series is Peter Biľak. You might know him from incredible ventures like the Typotheque type foundry, the Works That Work magazines, or the incredible Fontstand font rental service. Peter will come by and talk to us about what he considers good, researched, informed design. This meetup is was on the 17th of October at 16:00 on the third floor of the Theo Thijssenhuis. I’m very much looking forward to seeing you all there. Please get a free ticket at our eventbrite page, or via this Gathio link If you let us know you are coming, we’ll make sure we have enough chairs during, and enough bites and drinks after the talk.

On the 14th of November 2024 Yolijn van der Kolk and Robbert Broersma will come over to talk about their work on the NL Design System. Next to reflecting on the question what makes a designer a good designer, they’ll talk about the successes, but they’ll also talk about some of the things that went wrong. Again it starts at 16:00 on the third floor of the Theo Thijssenhuis. A pattern emerges.

On the 12th of December 2024 a team from Q42 will come over to talk about a project that is at the moment still a secret.

Our colleagues, my students and me, we are all very much looking forward to seeing you all at these three events. We haven’t planned any talks for 2025 yet, if you have any suggestions please let us know.

The meetups are of course for inspiration. We try to invite people who have something really interesting to say. The meetups are also about meeting people in an informal setting. Everybody who is interested in the topic is more than welcome, either laypeople or experts. Also interesting for some organisations: these meetups are not mandatory for our students. This means that the students who do attend are the more motivated bunch. You might want to meet them. They sure want to meet you.

Google search is corrupt

Yesterday I received a message from the person who used to write the transcripts for my podcasts. We chatted a bit and then she told me that her google ad campaign got hacked (or something) and that now it’s hard to find her website on google. So in order to be found on google you have to pay them. Which means that if I, as someone who searches, am looking for something I end up at the website with the largest marketing budget. Not necessarily at the website with the best content. That’s bad. That’s very bad. But it gets worse.

There’s another way to end up high in google’s rankings. You might think it has something to do with taking good care of the content on your websites, but that’s not it. The other way to end up high in google’s rankings is by making sure your website loads fast. Making fast websites used to be pretty easy: use plain HTML and CSS, add a little bit of JavaScript if needed, and make sure your images are small (in kilobytes) and optimised. Today making fast websites is an enormous, and highly specialised industry. If you want to make sure your website loads fast according to google’s guidelines you need some highly specialised experts on your team.

Which means that if you want to end up high on google’s search you either need a very large marketing budget to pay for ads or you need a very large budget to pay for performance experts. These are both budgets that you cannot spend on making proper content. And so you see more and more unredacted, very crappy generated content on websites.

The UX of HTML

Recently when I gave a coding assignment — an art directed web page about a font — a student asked: does it have to be semantic and shit? The whole class looked up, curious about the answer — please let it be no! I answered that no, it doesn’t have to be semantic and shit, but it does have to be well designed and the user experience should be well considered. Relieved, all of my students agreed. They do care about a good user experience.

The joke here is, of course, that a well considered user experience starts with well considered HTML.

Somehow my students are allergic to semantics and shit. And they’re not alone. If you look at 99% of all websites in the wild, everybody who worked on them seems to be allergic to semantics and shit. On most websites heading levels are just random numbers, loosely based on font-size. Form fields have no labels. Links and buttons are divs. It’s really pretty bad. So it’s not just my students, the whole industry doesn’t understand semantics and shit.

Recently I decided to stop using the word semantics. Instead I talk about the UX of HTML. And all of a sudden my students are not allergic to HTML anymore but really interested. Instead of explaining the meaning of a certain element, I show them what it does. So we look at what happens when you add a label to an input: The input and the label now form a pair. You can now click on the label to interact with a checkbox. The label will be read out loud when you focus on an input with a screenreader. When you hover over a label, the hover state of the connected input is shown. My students love stuff like that. They care about UX.

I show them that a span with an onclick-event might seem to be behaving like a link, but that there are many layers of UX missing when you look a bit closer: right-click on this span, and a generic context menu opens up. When on the other hand you right-click on a proper link like this one a specialised context menu opens, with all kinds of options that are specific to a link. And I show them that proper links show up when you ask your screen reader to list all the links on a page, yet spans with an onclick-event don’t. Moreover, a span doesn’t receive focus when you tab to it. And so on. My students see this and they get it. And they love the fact that by being lazy they get much more result.

So when I teach about HTML I always start with the elements that are obviously interactive. I show them the multitude of UX layers of a link, I show them the layers and layers of UX that are added to a well considered form. I show them what happens on a phone when you use an input with a default text type instead of the proper type of email. They get this, and they want to know more. So I show them more. I show them the required attribute which makes it possible to validate not only form fields, but also fieldsets and forms. They love this stuff.

Then I go on and show the details element with a summary. Whoah! No JavaScript!

These interactive things are the most important parts of HTML. These are the things that truly break or make a site. If you don’t use these elements properly, many people are actively excluded and the UX degrades in many ways. The interactive elements are what makes the web the web.

The old focus on semantics

Every time I come home from a web conference I hang the lanyard with the badge on a doorknob. There are at least 35 lanyards there. The oldest is more than fifteen years old, the newest just a few months. On most of these conferences there was someone telling us about the importance of using proper semantic HTML. And they all talked about the importance of heading levels. So for at least 15 years we’ve been telling the web design and web development community that heading levels are very important. Yet after all these years, and after all these conferences there are almost no websites that do it right.

Later, when HTML5 was introduced the talks about semantics were still mostly about creating a proper document outline, but this time with sectioning elements in combination with headings. Unfortunately this idea was never properly implemented by browsers. And it turned out that these sectioning elements are very hard to understand. For years I’ve tried to explain the difference between a section and an article, and almost nobody gets it. And of course they don’t, because it’s very, very complicated theory. And above all: There’s no clear UX feature to point at. The user experience doesn’t change dramatically if you use a section instead of an article. It’s mostly theoretical. So nowadays, next to divitis, we also have sectionitis.

Understanding how heading levels work is hard. And understanding how sectioning elements work is really hard. And explaining these things is even harder. What’s the use for theoretical purity if the end result is the same?

Yes, I know that some sectioning elements actually have some UX attached to it. But not that much UX if you compare it to the real interactive elements. Not getting your heading levels right is not at all as destructive as using divs instead of links.

Now, I’m not saying that we should stop teaching people about heading levels and sections. We shouldn’t. Heading levels and sections do things as well. But we should think about when we teach these more complicated and subtle parts of HTML. First we need to get people exited about HTML by showing all the free yet complex layers of UX you get when you use the interactive elements properly. And then, when they do understand the interactive elements, when they’re really excited and they ask for more, show them the more obscure UX patterns. You need a good idea of what UX is before you can understand things like the option to nagivate through the headings on the page with a screen reader. Without an idea of what UX means you cannot understand what landmarks do. First start with the obvious, then show the details.

I am very much looking forward to 15 more years of web conferences and publications. I look forward to seeing inspiring talks about the UX of HTML. Talks about the incredible radio button and its wonderful indeterminate state! Talks about validating forms in a friendly way with just HTML and some clever CSS. Talks about the different context menus that appear on different elements. In other words, talks about what HTML does, and much less about what it means in theory. Let’s talk about user experience, and let’s stop talking about semantics and shit.

This article was also posted on the 2023 HTMHell advent calendar.