Thorsten Beeck

Improvable Stovetop User Experience

2026-03-30T00:00:00Z

I never thought I would write a blog post about our stove, specifically the user experience of our stovetop. But here we are.

Three years ago my wife and I moved into our own newly built house. With the new house came a new kitchen. When we set out to choose a kitchen, we had a plethora of kitchens to choose from. Like every kitchen, our new kitchen needed a stove. So the salesperson showed us a small selection of stoves, and we picked the one we liked best. And like almost every new stove, it came with a ceramic stovetop.

Features, features, features, and a problem

The ceramic stovetop came with a lot of features, such as a child lock that beeps five times every time you place an item on the stovetop. Which is great because you get immediately notified when one of your cats jumps on the stovetop. Which is not so great because you get notified every time an item is placed on the stovetop. But after three years we got used to it.

Another feature the stovetop had in petto was a touchscreen to control everything. So we had to say goodbye to the normal buttons and say hello to the touchscreen. At the beginning we really thought the touchscreen was a great upgrade because of the minimalist and futuristic look. Looking back, we wish we had chosen a different ceramic stovetop because its touchscreen is very, very, very sensitive. Every time we cook, we have to watch out that no water, steam, or food drips on the touchscreen, which would either cause it to turn on one of the five cooking zones, to change the temperature of one of the cooking zones in use, or—what happens the most—turn off the stove immediately, which is very frustrating because we then have to clean the touchscreen and turn on the stove again.

That problem makes the fact that you need some exercise and precision to select the cooking levels between 5 and 14 almost forgotten.

Our ceramic stovetop with a touchscreen to control everything.

Not just an isolated case

Unfortunately, we don’t seem to be the only ones that have that problem with their stovetop. My parents-in-law bought a new stove with a ceramic stovetop from another manufacturer a little over a year ago, and they have the same problem we have.

After a quick search on the Internet, I found out that my parents-in-law and my wife and I aren’t the only ones being annoyed by our stovetop. For example, I found a subreddit with a bunch of people having the same problem.

How the problem could be addressed

Don’t get me wrong, I’m a big fan of minimalist designs. But if the stovetop’s user experience is so underdeveloped that it makes cooking a hassle, it degrades the best designed user interface.

A quick solution could be to make the touchscreen of the stovetop less sensitive to everything that touches it except your fingers. And in general, it shows that designers and engineers should invest more time in testing their products before they hit the market, to spare other people this unfavorable experience.

App Defaults 2026

2026-02-23T00:00:00Z

Below are all the apps that I currently use. This type of post became popular through the Hemispheric Views podcast Episode 97 and then further through the App Defaults page maintained by Robb Knight.

🔖 Bookmarks: In the browser
🌐 Browser: Safari, Firefox
💰 Budgeting & Personal Finance: Calc
📆 Calendar: Calendar
💬 Chat: WhatsApp, Signal, iMessage
📁 Cloud File Storage: iCloud
🧑‍💻 Code Editor: Visual Studio Code
👤 Contacts: Contacts
🎨 Design: Figma
🌳 Git: GitHub
📷 iPhone Photo Shooting: iOS Camera
📨 Mail Client: Gmail
📮 Mail Server: Google
🗺️ Maps: Google Maps
🎞️ Movie Tracking: Letterboxd
🎵 Music: Tidal
📝 Notes: Notes
🔐 Password Management: iCloud KeyChain
🟦 Photo Management: Photos, Amazon Photos
📊 Presentations: Keynote
📖 RSS: NetNewsWire
🛒 Shopping Lists: Notes
📈 Spreadsheets: Numbers, Calc
✅ To-Do: Notes
🌦️ Weather: Weather
📜 Word Processing: Pages, Writer

My First 3 Months Using Tidal

2026-01-29T00:00:00Z

In October 2025 I finally canceled my Spotify subscription and moved to Tidal. Big shoutout to Thomas Rumbold, who recommended Tidal to me and showed me a way to transfer my playlists from Spotify to Tidal.

Why I made the move

Of course, there were a few reasons for switching to Tidal. I didn’t want to give my money any longer to a company that uses it to finance things I don’t like. Additionally, a subscription fee raise was looming around when I was thinking of cancelling my Spotify subscription. I was also looking for a music streaming service that pays the artists better than Spotify did. Although it’s the largest music streaming platform, the payout for the artists is very small. Finally, I noticed an increasing number of AI music on Spotify, which I didn’t want to support any longer.

Pros & Cons

After using the Tidal for iPhone for three months now, I thought it might be interesting to share the experiences I’ve had so far.

First things first, Tidal has listed almost all music titles Spotify has, is cheaper than Spotify, the sound quality is noticeably better, and the user interface is just as good.

The only thing I’m not a big fan of is the new, floating app navigation at the bottom that came with the latest iOS version. In my opinion, the element is too large and distracts from the main content, especially when you scroll through the content.

I also noticed that the app sometimes doesn’t work when I’m on the road and my internet connection is bad. It wouldn’t even play the songs I downloaded on my iPhone. I must add that the benchmark is very small, as I only had that problem on one out of three occasions so far.

Another slightly annoying thing that occurred until recently is that I had to delete each cached file manually or delete and reinstall the app again. Fortunately, it looks like the latest version of the iPhone app doesn’t cache files anymore on the latest iOS version.

Conclusion

All in all, some things could be better, but as of now I’m going to stick with Tidal as my music streaming service but might explore other alternatives in the near future.

2025 Year in Review

2025-12-30T00:00:00Z

The year 2025 was filled with a lot of ups and downs, cool, unexpected and sad moments.

Personal

I’m finally properly adjusted to my ADHD medication, which helps me stay focused for a longer time period and get more things done in a shorter amount of time. Fortunately, my creativity has not suffered at all.

On December 22nd my wife’s sister and her husband welcomed their first child, so I’m officially an uncle now. Speaking of newborn kids, our son Kilian will be a big brother in March 2026. He’s already super excited, and so are my wife and I. The only downside is that my wife has developed gestational diabetes.

Unfortunately, Christmas was followed by a very sad event. My in-laws’ dog Ruby died unexpectedly on December 26. Although she was a fairly old lady and would’ve turned 13 years old in January, it’s always sad to lose a beloved pet.

Work

I started into my fifth year for my current employer and into my second year in my position as Senior Web Designer. Over the year I was part of a team that launched many cool projects.

My site/side projects

In September I launched a new version of this site with writing blog posts again being the main focus. Additionally to the new design, I also changed what’s under the hood, using the static site generator Eleventy together with a combination of Markdown and Nunjucks.

In March I launched a new side project, ADHD Links, a collection of useful links for people with ADHD. When I was diagnosed with ADHD in late 2023, I searched the internet for sources that helped me understand ADHD better but also gave me tips to deal with all the symptoms that come with it and live a better life. Finding the information I was looking for was sometimes really difficult. That’s when I got the idea of building ADHD Links, a website that offers useful links for people with ADHD so they can save time when searching the internet for the sources they’re looking for.

Socials

In January I finally deleted my account on X (formerly known as Twitter) for obvious reasons and never looked back.

Movies

This year I watched 34 movies, some good ones, some mediocre ones and some bad ones. A few highlights were Bohemian Rhapsody, Jojo Rabbit, Scream VI, The Raid 2 and The Super Mario Bros. Movie.

Concerts & Festivals

This year we slowed down a little bit and attended only a small number of concerts and one festival. In February my wife and I attended a double concert featuring Bullet for My Valentine and Trivium, both playing their entire 2005-released albums. In June my wife and I filled in for my wife’s sister and her boyfriend and saw Kim Dracula live. In early December we redeemed my wife’s birthday present and saw Ice Nine Kills live. The only festival my wife, 8-year-old son, father-in-law and I attended was the Elbriot festival in August. In perfect weather conditions, we were able to see Siamese, Future Palace, The Chats, Smash Into Pieces, Kissin’ Dynamite, Kerry King, Kreator and Papa Roach live. Listening a lot to Papa Roach’s Infest album as a teenager, it was really rewarding to see Papa Roach live for the first time ever.

Ice Nine Kills performing live at the Sporthalle Hamburg on December 4, 2025

Outlook

I’m looking forward to an exciting 2026 with a new baby in the house.

Building an accessible weather forecast with HTML and CSS

2025-10-27T00:00:00Z

This summer I spent some time visiting weather forecast websites. Many of them had a multi-day weather forecast, usually for the next seven days. Many of the seven-day weather forecasts were displayed with an accordion where each day had its own accordion tab you could open and close. A lot of them also had in common that the accordion was built with a lot of unnecessary HTML and JavaScript. But what scared me the most was that none of them were accessible and operable via keyboard.

So I thought about if it was possible to create a weather forecast with HTML and CSS only. To build the accordion tabs, I used the HTML tags <details> and <summary>.

HTML

To display the weekday, weather, temperature and wind force, I used  tags as child elements of the <summary> tag. To display the weather details for each weekday, I used further information inside the <details> tag. For the headline and a brief text, I used the <h2> and  tags.

Check out the complete HTML code below:

<h1>Accessible Weather Forecast</h1>

<div class="forecast">
	<details>
		<summary>
			<span class="weekday">Mon</span>
			<span class="weather" role="img" aria-label="Sun behind small cloud">🌤️</span>
			<span class="temperature">24°/13°</span>
			<span class="wind">17 km/h</span>
		</summary>
		<h2>The local weather for Monday</h2>
		<p>The weather will be quite hot with temperatures reaching 24°C. During the evening and night time the temperatures will drop to 13°C.</p>
	</details>
	<details>
		<summary>
			<span class="weekday">Tue</span>
			<span class="weather" role="img" aria-label="Cloud with rain">🌧️</span>
			<span class="temperature">16°/15°</span>
			<span class="wind">16 km/h</span>
		</summary>
		<h2>The local weather for Tuesday</h2>
		<p>The weather will be comfortable with temperatures around 16°C. During the evening and night time the temperatures will drop to 15°C.</p>
	</details>
	<details>
		<summary>
			<span class="weekday">Wed</span>
			<span class="weather" role="img" aria-label="Sun behind rain cloud">🌦️</span>
			<span class="temperature">22°/15°</span>
			<span class="wind">12 km/h</span>
		</summary>
		<h2>The local weather for Wednesday</h2>
		<p>The weather will be quite hot with temperatures reaching 22°C. During the evening and night time the temperatures will drop to 15°C.</p>
	</details>
	<details>
		<summary>
			<span class="weekday">Thu</span>
			<span class="weather" role="img" aria-label="Sun behind rain cloud">🌤️</span>
			<span class="temperature">27°/15°</span>
			<span class="wind">6 km/h</span>
		</summary>
		<h2>The local weather for Thursday</h2>
		<p>The weather will be hot with temperatures reaching 27°C. During the evening and night time the temperatures will drop to 15°C.</p>
	</details>
	<details>
		<summary>
			<span class="weekday">Fri</span>
			<span class="weather" role="img" aria-label="Cloud with rain">🌧️</span>
			<span class="temperature">21°/15°</span>
			<span class="wind">9 km/h</span>
		</summary>
		<h2>The local weather for Friday</h2>
		<p>The weather will be quite hot with temperatures reaching 21°C. During the evening and night time the temperatures will drop to 15°C.</p>
	</details>
	<details>
		<summary>
			<span class="weekday">Sat</span>
			<span class="weather" role="img" aria-label="Cloud with rain">⛈️</span>
			<span class="temperature">20°/16°</span>
			<span class="wind">15 km/h</span>
		</summary>
		<h2>The local weather for Saturday</h2>
		<p>The weather will be quite hot with temperatures reaching 20°C. During the evening and night time the temperatures will drop to 16°C.</p>
	</details>
	<details>
		<summary>
			<span class="weekday">Sun</span>
			<span class="weather" role="img" aria-label="Sun">☀️</span>
			<span class="temperature">23°/15°</span>
			<span class="wind">7 km/h</span>
		</summary>
		<h2>The local weather for Sunday</h2>
		<p>The weather will be quite hot with temperatures reaching 23°C. During the evening and night time the temperatures will drop to 15°C.</p>
	</details>
</div>

CSS

I tried to keep the CSS part as simple as possible. I set the <summary> tag to display: flex;, flex-direction: row;, align-items: center; and justify-content: center; to position the four  tags. And for the animated arrow at the end of the <summary> tag I used the ::after pseudo-element. The rest of the CSS is just basic styling.

Check out the complete CSS code below:

* {
    box-sizing: border-box;
}
body {
    background-color: #2b5876;
    font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, Adwaita Sans, Cantarell, Ubuntu, roboto, noto, helvetica, arial, sans-serif;
    font-size: 100%;
}
h1   {
    color: #fff;
    font-size: 30px;
    text-align: center;
}
h2 {
    color: #062c45;
    font-size: 18px;
    margin: 0;
    padding: 24px 24px 0 24px;
}
p {
    color: #062c45;
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
    padding: 12px 24px 24px 24px;
}
.forecast {
    border-top: 1px solid #d3e3ec;
    border-right: 1px solid #d3e3ec;
    border-left: 1px solid #d3e3ec;
    margin: 0 auto;
    max-width: 640px;
}
.forecast details {
    background-color: #fff;
    font-size: 18px;
}
.forecast details[open] {
    border-bottom: 1px solid #d3e3ec;
}
.forecast details[open] > summary:after {
    transform: rotate(90deg);
}
.forecast summary {
    align-items: center;
    background-color: #f3f8fb;
    border-bottom: 1px solid #d3e3ec;
    color: #062C45;
    display: flex;
    flex-direction: row;
    font-weight: bold;
    height: 72px;
    justify-content: space-between;
    padding: 24px;
}
.forecast summary::after {
    border-color: transparent transparent transparent #062c45;
    border-style: solid;
    border-width: 6px;
    content: '';
    transform: rotate(0);
    transform-origin: .2rem 50%;
    transition: .25s transform ease;
}
.weather,
.weekday {
    width: 40px;
}
.weather {
    font-size: 28px;
    line-height: 1;
    text-align: center;
}
.temperature,
.wind {
    text-align: center;
    width: 100px;
}

Result

Feel free to check out the complete accessible weather forecast below or on CodePen:

See the Pen Accessible Weather Forecast by Thorsten Beeck (@thorstenbeeck) on CodePen.

How to fix wrong font weights in Safari

2025-09-28T00:00:00Z

With many browsers come various problems that occur in one browser but not in the other ones and vice versa. One of them is how fonts are displayed.

The problem

Recently I stumbled upon a problem: a font that was used on a website wasn’t displayed correctly in Safari. In that particular case, the font was Futura PT Condensed Extra Bold, and it was self-hosted. The issue occurred in Safari for macOS and iOS. The font was used for headlines with a font weight of 700 and was supposed to look thick. The font looked fine in Chrome and Firefox, but in Safari it looked way too thick and ugly.

Ugly Futura PT Condensed Extra Bold

Beautiful Futura PT Condensed Extra Bold

The solution

After researching on the internet, I only found a handful of resources that helped me solve the problem. The first one was a post on Stack Overflow. The second one was a post on Reddit. The third one was a post by Anders Norén that was published only two months ago.

Using the font-synthesis property and setting it to none was the magic solution. So I added the line font-synthesis: none; to my <body> tag in the CSS file, and thought the problem was solved. The font didn’t look thick and ugly anymore in Safari and looked slightly thinner in Chrome and Firefox. But that was something I could live with.

Unfortunately, tags like ,  and  weren’t defined in the CSS file and all styles that come with those tags as standard were removed. To fix that, I had to define all HTML tags that weren’t defined in the CSS file so that everything looked good again.

Summary

If you stumble upon the problem that a font you use on a website is displayed way too thick and ugly in Safari, adding the line font-synthesis: none; to your <body> tag in the CSS file can really save your day. But make sure that all tags (e.g., , , ) you use on your website are defined in the CSS file. Otherwise, their styles that come as standard will be removed.

New Month, New Website

2025-09-01T00:00:00Z

Yesterday was the last day of my summer vacation. Today is the first day of September. A few weeks in the making, I thought it would be cool to launch my new personal website to sweeten up this Monday.

The reasons for redesigning my personal websites are simple. I was bored with the website design, and I wanted to start blogging again.

As I wrote above, I’ve spent some time redesigning and rebuilding my personal website in the past few weeks. Apart from the new design, I added a few more new pages, such as the pages About, Resume and Blog.

I also created an RSS feed if that’s your thing.

What’s under the hood?

This website is climate-friendly built, using the static site generator Eleventy together with a combination of Markdown and Nunjucks. Additionally, this website doesn’t use any cookies or tracking and aims to conform to the Level AAA accessibility standards outlined in the WCAG 2.2 specification. So if you experience any accessibility issues on this website, let me know and I’ll take care of the problem.

What’s next?

At the moment, I have ideas for several blog posts focusing on web design & development, accessibility, user experience, sustainability and personal stuff.

Make sure you also check out some of my personal projects:

Social Media Commitment

2014-01-06T00:00:00Z

Nowadays more and more people are connected with each other on social networks like Twitter, Facebook, Instagram, Dribbble and so on. While you can use Facebook more privately—at least I, my friends and many other people I know use it to be connected with people we also know in real life—the focus of social networks like Twitter, Instagram and Dribbble is to follow anybody.

What all those social networks have in common is that all their members can publish content whenever they want, which can immediately be seen by their friends and followers. If a friend of mine or a person I follow and who follows me publishes something, I have the option to like it, comment on it or share it.

After a while you get either bored by it or—what happened to me—addicted to it. I liked almost everything published by my friends and people I follow, whether I liked it or not. Additionally, I started to check my social networks more and more often. After some time I spent more time liking other people’s stuff than working on my own stuff. I also got mad when my friends and followers didn’t like all of my stuff that I published.

After some more time I noticed that I got more and more stressed the more I checked my social networks—and through that stress, anger developed. Anger about my friends and followers for not liking and commenting on all the stuff I posted and created. Instead of leaving my stress and anger at the computer, I carried it with me and let it out on my girlfriend, my family and my friends in real life.

Of course they all didn’t like that I seemed to be mad at them because of something that happened on the internet and that didn’t have anything to do with them. I finally realized that they were right and that I had to change something in my (internet) life. I started to use the social networks less and only liked the stuff that was really appealing to me. Furthermore, I realized that my biggest fear was not being liked and losing friends and followers. Like in real life, internet friends will still be your friends in the future regardless of whether you like all their stuff or not. If they don’t want to be your friend or don’t want to follow you anymore just because you don’t like and/or comment on everything they publish, they aren’t real internet friends.

Instead of wasting too much time liking and commenting on stuff on the internet, focus on the stuff that you produce and—what is even more important—spend time with your family and real life friends.

Don’t rely on Dribbble only

2013-09-30T00:00:00Z

I recently saw a lot of web designers’s portfolios that offered a huge range of information. But all were lacking one thing. Instead of showing information and images of projects they did in the past, they just put a link to their Dribbble profile on their website.

I would have totally understood that if the web designers were well-known in the industry and didn’t have to worry about getting new clients. But instead they were young, aspiring web designers looking for new clients. While you can also show complete designs in the attachments, there are a few big problems if you rely on Dribbble only.

So if a possible future client visits your website and clicks on the link to your Dribbble profile just to find a maintenance site, he/she might choose a different designer whose work is immediately accessible. The same thing would probably happen if Dribbble was blocked for the possible future client.

Don’t get me wrong. Dribbble is a great platform to show your work-in-progress and get new clients. But if you want to make sure to reach the largest amount of clients as possible, you should make the extra effort of showcasing your best work on your personal website, too.

The Hamburger Problem

2013-09-18T00:00:00Z

Websites, web apps and native apps—they all have the same thing in common—they often use icons instead of written text to display links. The reason for that is to save space. Whether it’s the person’s silhouette icon to display the user’s profile link or the three-lines list icon (the hamburger) to display the menu link—those icons should be well-known to web app and native app users. The same technique is used to save space on responsive websites that trigger smaller devices and mobile websites.

However I recently noticed this technique is also used to display links on (responsive) desktop websites—especially the hamburger icon. Of course, web app and native app users will immediately recognize those icons. But what about all the users that browse the internet with their desktop computers, like my 89-year-old grandfather? He doesn’t own a smartphone and surfs on the internet about 30 minutes per day. He doesn’t know all those icons, especially not the hamburger icon and that it’s the symbol for a menu. The only thing he can do is to play the guessing game and use the trial-and-error method. Having screen resolutions up to 2560x1440 pixels and more, it doesn’t make much sense to display a few menu links as the hamburger icon on a flexible, full-width website.

Although it may look cool to display the menu links of a website as the hamburger icon, it will probably confuse older people and non-digital natives. So think twice about how you want to display your menu links on your website for desktop users, keeping your targeted audience in mind.