1
Mechanical Watch
Interactive article explaining how a mechanical watch works.
2
Sound
Interactive article explaining how sound works.
3
GPS
Interactive article explaining how GPS works.
4
I regret my website redesign
Mistakes I made working with my first design agency.
5
4.2 Gigabytes, Or: How to Draw Anything
In our world, we can do anything that we want to do here. Any old thing. - Bob Ross, The Joy Of Painting Season 29 Episode 1
6
Draw SVG rope using JavaScript
Transforming a SVG path into a rope drawing turned out to be a surprisingly fun problem to solve. I'll walk you through the process and show you a few tricks that made it work.
7
CSS Gradients that avoid the “gray dead zone”
Have you ever noticed that gradients tend to look a little gray and washed-out in the middle? This happens because of a mathematical quirk with RGB colors. Fortunately, we can work around this quirk, and create beautiful, lush, saturated gradients.
8
AirPods don't “just work”
AirPods are a fantastic product. However, the small annoyances that occur when using them don't allow it to fall under the category of Apple products that "Just Work".
9
A UX designer walks into a Tesla Bar
I borrowed a friend’s Tesla 3 yesterday. About 5 minutes into the ride, the windshield started fogging up. I couldn’t find the defroster on the large control screen Teslas are so famous for. In desperation, I tapped the CAR icon but that took me to the settings screen which ended up being a dead end. Frustrated, I…
10
The end of the nice GTK button
A look into my favorite Adwaita button and why I'm not happy it's going away
11
Front end developers: stop moving things that I’m about to click on
Please. It’s an insult to my brain. Like, you put the button in one place, and then you’re like “nah, let’s move it somewhere else.” Here…
12
An interactive guide to Flexbox
When we truly learn the secrets of the Flexbox layout mode, we can build absolutely incredible things. Fluid layouts that stretch and shrink without arbitrary breakpoints. In this action-packed interactive tutorial, we'll pop the hood on the Flexbox algorithm and learn how to do remarkable things with it. ✨
13
Yep, I created the new Avatar font
Fonts designed by John Roshell in sunny Southern California
14
Please stop disabling zoom
I’m a frontend developer, consultant, accessibility auditor, blogger, teacher, and book author from Austria.
15
The most satisfying checkbox
The Art of Game Feel (a.k.a Juice) in Product Design
16
How to design a house to last 1000 years
At last, we’re finally ready to put together the design for our house. A fully specified design, with every detail and system described, is well beyond the scope of this newsletter (not to mention the scope of my knowledge). But we can give a high-level schematic design, laying out the basic building systems and how…
17
Why do so many brands change their logos and look like everyone else?
Tech and fashion logos are becoming increasingly similar, all of them using sans serif fonts. Why do they do that? And why it doesn't make sense.
18
The Follower: Using open cameras and AI to find how an Instagram photo is taken
How does this work? I launched the project on 12 September 2022. The YouTube video was just created with results of 10 days. I will publish new results on my socials. Press:
19
20
We need a flowchart editor that doesn't give you carpal tunnel
This is a post about why I'm making knotend , a flowchart editor designed for speed, and why we need to get away from mouse-based flowchart editors.
21
Shader-like holographic effects with CSS
Get a shiny WebGL look without actually using WebGL. In this article we take a look at how CSS blend modes unleash the potential of cool compositing effects without the need for JavaScript
22
23
Forking Chrome to turn HTML into SVG
I've been working on a program called html2svg , it converts web pages to SVG. It's based on a fork of Chromium to support modern web standards. This post explains most patches.
24
When I made another Monkey Island
Ron Gilbert's often incoherent and bitter ramblings about the Game Industry
25
Clarus returns home in macOS Ventura
Did you know Clarus the Dogcow is hiding in the macOS Ventura beta?
26
Isometric Pixel Art
Intro Isometric pixel art is based on the isometric projection, which is a method for accurately ‘projecting’ 3D objects into fancy 2D. Unlike perspective drawing, there is no vanishing point in isometric projection. Furthermore, the 3 coordinate axis have equal foreshortening, eliminating the need
27
The 12-bit rainbow palette
A palette of twelve colours chosen with consideration for how we perceive luminance, chroma, and hue
28
How does perspective work in pictures?
Why don’t photographs make distant objects big enough?
29
30
Please Stop Using Grey Text
For over 1000 years black text on white paper has been the best practice for printed texts worldwide. Since the advent of the web and WCAG…