I've been developing SpaceDeck X since December last year. It started as me playing with a random framework I found fun, and it grew so much that I'm now working towards releasing it on Steam. I kept a devlog on Itch, but I feel like it is time to bring it to my own website. Especially considering that these updates are exclusive to the Steam version. I have a pretty clear vision for the release, and lately I've made amazing progress. Here are the major things I've made, in no particular order. Upgrades system # The new upgrades system was brewing in my head for a long time. Honestly, I…
I want your coins! I'm making a game. It is called SpaceDeck X and you can try it online. But thanks to Amsterdam Indie Arcade, it will be available on a physical arcade cabinet at Blast Galaxy. It will be released on the 14th of June with a small release party and hi-score tournament. If you are in Amsterdam, be sure to come and check it out. It will be available for the next two months, then a new indie game will take its place. Hi-Score Tournament # We are going to organize a hi-score tournament. The Indie Arcade organizer asked me if I could come up with a fun prize for the winner, so I…
I love everything about these. The process was so much fun and I'm super happy how the plots turned out. I got the idea while playing with vector fields and noticed that some shapes resembled a bird. I started tweaking the algorithm and after a lot of experimentation, made a tool that procedurally generates birds. The first drawing is 22x22cm, and others are around 15x15cm. As usual, these are hard to photograph (which is why it took me ages to post them here), so thanks to my friend David for letting me use his studio lighting to take proper photos.Created: November 2025Size: Various…
If you've ever used Web Workers (or any other event-based communication), you probably noticed that this kind of code can be hard to read and reason about. You also have to implement some kind of identifier for each message to recognize which worker response corresponds to which request. To simplify that, we can write a small wrapper that lets us use Promises to communicate with Workers. I'll show you an example for Web Workers, but the same pattern can be applied to Service Workers as well. The resulting API looks like this: const workerResponse = await sendToWorker(data); I first used this…
After almost two years (life and other projects happened), I finally plotted something new. I resurrected the Moon project, cleaned it up and published it online. Using a technical pen allowed me to add more detail to the image. It reminded me why I love pen plotting so much, and I hope to plot more in the near future. The code is available on my GitHub, and you can generate your own Moon here.Created: October 2025Size: 30x30cmPaper: Fabriano Black Black 300gsmPens: rOtring variant technical pen, Aristo white ink
This is an interactive article. To fully experience it, you'll need to turn JavaScript on. I recently made the Space Invader Generator for Creative Coding Amsterdam code challenge. I made it for fun of course... and galactic domination too! You can see how it looks below and in this post I'll show you how it works using an interactive animation. Here are a few invaders it can generate: While showing friends how it works, I realized the process would look great animated. So I decided to write another interactive blog post. I'll give you some background first, but if you are eager to see the…
Before we start, here is a demo of the counter (you can also check it out on CodePen): 12345678910-+ This idea started with a space invaders generator I recently made. If you look at the randomize button, you'll notice the number on the dice changes from five to three when you hover over it. A friend then said, "It would be really cool if you showed a different number every time you hover." That got me thinking, could I make this using CSS only?It's trivial to do in a few lines of JavaScript, which I'll probably do at some point. Before diving deeper, I decided to simplify the problem by…
This is a simple origami frog that jumps when you press on it. I was taught to make it by my parents when I was really young, so it holds a very dear place in my heart. There are other versions on the internet, but I think this one jumps better. It is actually simpler than the ones on the internet (it doesn't have front legs). I'm not sure if someone just forgot about them when passing the instructions, or if it was a purposeful change in order to make it jump better. I recently showed my niece how to make it, and she was delighted. I decided to find and send her the instructions, but I…
SVGs support non-scaling strokes using the vector-effect attribute, which we can even use to draw non-scaling rectangles and circles. For example, in graphs and charts, text can become too small or too large, so it would be really nice to make it non-scaling. But unfortunately, there is no native solution - text will always scale together with the SVG. We can manually define different font sizes on different breakpoints, but text is still going to be scaled within a single breakpoint. If we need truly non-scalable text, we'll have to use JavaScript. Luckily, not a lot of it - ten lines will…
Update August 2026: This workaround no longer works on recent iOS versions. WebKit changed how standalone PWAs handle the status bar area. The fixed overlay positioned outside the viewport no longer renders under the status bar. I haven't found a workaround for this yet. If you find a solution please let me know. On my current project, I'm making a Progressive Web App (PWA) and I was really annoyed that the status bar on iOS was completely transparentAlthough the option is called black-translucent. When the content scrolls behind it, it blends with the status bar elements, and it doesn't look…
Let me show you how I created a CSS-only image glitch effect. I was working on the robot poet and wanted my robotic bard to glitch - because it felt fitting given the quality of poetry it generates. Here's the final result: The effect involves quite a bit of HTML and CSS but no JavaScript. I did use JavaScript to generate the HTML and CSS, but it is not used in the final version. To be clear, there's nothing wrong with using JavaScript for this kind of thing. I just saw it as a fun challenge to make a pure CSS version. The idea # In the words of Daft Punk: Slice It Move It Hue-Rotate It We'll…
This is a simple formatting trick I use to make regular expressions more readable. The secret? Break them into multiple lines. To achieve this, format the regex as an array of strings and then concatenate the array into a single regex string. Example # Compare this example, written in a single line: const FILTER_REGEXP = /(?name>blur|brightness|contrast|grayscale|hue-rotate|invert|opacity|saturate|sepia)\((?value>-?\d*(?:\.\d*)?)(?unit>\w*?)\)/g; with the multi-line version: const SUPPORTED_FILTERS = [ 'blur', 'brightness', 'contrast', 'grayscale', 'hue-rotate', 'invert', 'opacity',…
While I was writing this post, I wanted to create an image comparison component. I made one with just a few lines of JavaScript, but I didn't include it in the post. Here is the finished slider, with images from the book Letters from Sarajevo. If you want to play with the code, you can find it on CodePen. Toggle debug Try out the debug modeI'm quite proud of it! The shadow effect is my favorite detail.. It reveals the structure in 3D and might give you a clue as to how I managed to create the slider with only a few lines of JavaScript. Here's a tip - the blue element is actually a native HTML…
I love 3D printing. It feels like magic - we are able to design and create physical things in a matter of hours, in our homes. I understand the underlying technology, but it still blows my mind when I think about it. It makes me a bit sad that more people aren't fascinated by it. Let's see what my love for 3D printing has to do with bunnies. Ski jumping bunnies to be exact. My wife has a brooch that she really likes - of a bunny ski jumping. She wears it on her backpack, and when she's in the mountains, on her ski jacket. But unfortunately it broke - the skies snapped off. So she asked me,…
If you are interested in how I over-engineered the process of making a tiny book for my wife, using AI, a pen plotter, a 3D printer, and a lot of time, you are in the right place. The book is titled The Tiny Book of Great JoysMala Knjiga Velikih Radosti in Serbian, and here is how it turned out: My wife is delighted with it, so it was worth all the effort. This post will take you through the process. It will be a long one, but please stick around - I promise there will be a lot of pretty pictures. Here is the outline of the post: The idea Drawings Text Plotting Bookbinding The finished book…
A lot of us as developers have hi-DPI screens, and we can easily forget to test the websites we build on low-DPI screens. One common issue I noticed is that thin font weights can be hard to read on low-DPI screens. Since there are fewer pixels to render details, fine lines can appear blurry due to anti-aliasing. Here is an example of the same text rendered on two screens with different device pixel ratios. At the top is a hi-DPI screen (with a pixel ratio of 2), and below is a low-DPI screen (with a pixel ratio of 1). The font used is Inter, 24px tall, with a font weight of 100. This problem…
I've seen this challenge on Herman's blog. I liked it, so I decided to do my own version, even though I'm not using the bear blog. For the same reason, I slightly adapted the original questions. Why did you make the blog in the first place? # Since I first got online, I've wanted a personal website - a piece of internet I can call my own. I had a few websites over the years, but none of them are online anymore (and I don't have backups). Then, in my late twenties, I decided to try again. As someone who loves programming and making things, I've gathered plenty of material to share over the…
I just released @stanko/dual-range-input - a native dual-range input. Here is how it looks with the default styles: The "native" part is somewhat open for discussion. I call it native because the library uses two native HTML range inputs. This means that all of the native interactions and accessibility features are preserved. Native inputs allow us not to reinvent the wheel. There is about fifty lines of JavaScript to synchronize the inputs, along with some CSS to ensure everything looks polished. In my book, that is native enough. Why # When I create my generative drawings, I use a tool I…
When an HTML element becomes too narrow, its content starts to wrap into multiple lines. This is intended behavior and works well in many cases. However, for short text, it doesn't look great when the last word or icon drops to the next line, becoming an orphan. For example, you might see something like this: Click here for more info It doesn't look great when the icon is left alone on its own row. Luckily, there's a simple CSS solution. Solution # Only thing we need to add is a single line of CSS: text-wrap: balance; This property tells the browser to wrap the text in a way that best…
I want to share some really nice open-source applications I use on a daily basis. I did a similar post about six years ago, so I felt there is a need for an updated one. I focused on the apps that I feel are really convenient but less known. All of the applications listed are free and open source. For each app, I included a brew install command. If you happen to like and use them, please consider donating to their respective authors. Here are all of the apps in alphabetical order: GUI Applications Hidden Bar ImageOption Itsycal Karabiner-Elements Keeping You Awake Maccy Maestral…
Read at the source
Your visit, your choice.
Optional Google Analytics helps us understand visits. Microsoft Clarity records masked interactions to improve the site. Optional tools stay off unless you choose them. Privacy details.