Making visual and interactive stuff
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…
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,…
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…
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.…
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 .…
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:…
Before we start, here is a demo of the counter (you can also check it out on CodePen ): 1 2 3 4 5 6 7 8 9 10 - + 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…
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…
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 my current project, I'm making a Progressive Web App (PWA) and I was really annoyed that the status bar on iOS was completely transparent Although the option is called black-translucent . When the content scrolls behind it, it blends with the status bar elements, and it doesn't look great. I couldn't find a native solution, so I tried using CSS instead. To my surprise, my idea…
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,…
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 |…
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 mode I'm quite proud of it! The shadow effect is my…
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…
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 Joys Mala 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…
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…
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,…
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…
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…
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…
If you encountered a case where you wanted to run multiple commands in parallel, the usual suggestion is to use the shell's & operator to send commands to the background. This approach kind of works, but it has its quirks. I often ended up with a process hanging in the background, multiple outputs being mangled, or the output of some commands completely missing. Bash scripting wizards can…
HTML inert is a relatively new property, but it is supported in all major browsers since April this year. When you set inert on an element, the browser will ignore all user events on it, including tabbing into elements. It will also hide it from screen readers. I like to think of it as a "reversed focus trap". But we can use it to create focus traps for modals by setting inert on the main content.…
It is incredibly hard to take a good photo of these. Colors have metallic reflection which I wasn’t able to capture, but it is very prominent in person. They are plotted using five different color markers. I framed them separately and plan to take a better photo once they are on the wall. Code is available on my GitHub . Created: November 2023 Size: 14.5x14.5cm Paper: Fabriano Black Black 300gsm…
What if I told you that we can make a timer without using setTimeout , setInterval or requestAnimationFrame ? JavaScript is still necessary, but we can create the timer just by toggling some CSS classes. While I was working on an autoplay feature for a carousel, I thought to myself - CSS animations are kinda like timers. They have animationstart and animationend events and an ability to pause…
I started drawing these little houses a while ago, but never finished the project. Meanwhile, I decided to participate in Plot Party postcard exchange . So, I came back to my houses and used them to generate little towns as postcards. At the moment, they are on their way to five different countries, and I'll probably plot a few more. Created: July 2023 Size: 11x22cm Paper: Fabriano Black…
I recently learned about the pseudo CSS class :placeholder-shown . Obviously, it is a class that is added only when input placeholder is shown. But what that also means is that the input is empty : /* Input is empty */ input : placeholder-shown By negating it with :not() we can detect if the input has value : /* Input has value */ input : not ( : placeholder-shown ) I created a demo that uses…
Recently, a colleague asked me if there is a way to customize an input caret using CSS. I knew you could change the color of it, but it got me thinking if we could completely replace it. The problem seemed interesting to solve. But before we jump into the implementation, allow me to show you what I built in the end. Disclaimer # Please be aware that this is something I hacked together for fun, and…
Some operating systems and browsers are not showing scrollbars by default. That often results in developers forgetting about these pesky gray bars and the issues they can cause. I'll give you two quick examples: When setting overflow: hidden on the body element, if there was a scrollbar visible, content will jump a little as it now has more space. If you ever implemented scroll locking for…
The second plot for Work&Co 's anniversary, and my personal favorite. The bumpy sphere is an allusion to the challenging period we've all experienced due to COVID-19. Created: April 2023 Size: 27x27cm Paper: Fabriano Bristol 250gsm Pens: Molotow Blackliner
To celebrate Work&Co 's tenth anniversary, I'm excited to share this two-piece series. Both drawings are 3d scenes, hatched by my vector raytracer, Rayven, to get a hand drawn feel. Created: April 2023 Size: 31x30cm Paper: Fabriano Bristol 250gsm Pens: Pigma Micron
When writing Node.js scripts, I often want to output information to the console in different colors. Usually, it is to get the user's attention and signalize success or error. I could reach for a battle-tested library like Chalk , but I usually don't need all of its features. Instead, I have a tiny script I copy from project to project: const reset = "\x1b[0m" ; const log = { green : (…
I would like to give you a preview of my new project that I'm really excited about - Rayven . It renders 3D scenes as if they were line-hatched by hand: I've had this idea for a while and after researching, I found three projects that became my inspiration: Michael Fogleman's ln , Kushiro's Hatch Lines Shader and Piter Pasma's Rayhatching . Finally, I decided to give it a…
This is an interactive article. To fully experience it, you'll need to turn JavaScript on. Today, I'll take you through the process I came up with in regard to transforming an SVG path into a vector rope drawing. We'll learn how to turn the path on the left into the rope on the right: The problem popped up on a project my colleagues were working on, and it stuck with me. I thought…
I was tasked with getting lines of text from an element many times. Usually it was to truncate the text Before line-clamp was a thing or to animate the text line by line. It sounds easy, but I have encountered many edge cases in practice. After trying out multiple approaches, I finally have a solution I'm satisfied with, although it has some limitations. Let's start with a demo which…
It all started with the code challenge in our office. The weekly theme was waves , and I tried to think outside of the box. After dropping a few ideas, I remembered the waves people do on stadiums According to Wikipedia these are known as Mexican or stadium waves . So I made waves using CSS only (code is available on CodePen ): I started without a real idea on how to do it. Obviously, I needed to…
JavaScript part is actually pretty easy, it is more about preparing the video file correctly. If you just want the code for converting videos using ffmpeg, jump to the last section . Otherwise, let's start scrolling down to see these two videos scrubbing: Every 5 frames Every 100 frames Code used looks like this, it just updates currentTime based on window scroll. But the left video should…
I'll be honest, this one came out as an accident. I forgot to revert some old code and it just happened. To me, it resembles atmosphere or a cell. My favorite from the series so far. It is plotted with pens of two different width, which gives it more depth, especially when you see it in person. Created: July 2022 Size: 30x30cm Paper: Fabriano Bristol 250gsm Pens: Pigma Micron
The second plot from the series. Polygons instead of the circle, to get this cube like shape. Created: July 2022 Size: 26.5x30cm Paper: Fabriano Bristol 250gsm Pens: Pigma Micron
As someone who maintains a couple of npm packages, I got frustrated by all of the notifications about security issues in my dev dependencies. In 99.99% I wasn't even using the vulnerable code, and usually it would be buried deep in the dependency tree. Therefore, I decided to revisit and simplify my workflow. These were the main things I wanted to have: Use TypeScript and generate type…
I started this blog in 2016. More than six years now. But if you check my stats page, you'll see that the number of posts started declining fairly quickly, since 2018. I finally decided to stop this downward trend and to remember why I started writing in the first place. Why I started writing # For the joy of small projects. Basically I was just keeping a log of the things I've been…
End of an era. I started my career when IE6 First time I wrote about IE6 was back in 2009. was a thing. And yesterday, Microsoft announced they are retiring IE11. With that, no version of Internet Explorer is longer supported. Over the years it seemed that we are doomed to support IE forever. We even planned celebrating when we finally don't have to. But today, it feels funny, nobody is…
While making a simple SVG chart , I realized I would like to have non-scaling circles for data points. Unfortunately, SVG doesn't support it out of the box. If you are eager to see the result, jump to the examples below or play with the code on Codepen . Non-scaling stroke example # SVG does support non-scaling stroke width by setting vector-effect to non-scaling-stroke . When you set it,…
I'm super late with this post, but again, better late than never. I just couldn't find the inspiration and drive for writing last year. Generally, I lacked motivation and wasn't really productive. Generative Art # As for my art, 2021 wasn't as fruitful as the year before, but I did finish a couple of drawings. I'm still very much into it and lately I have found my drive…
This post was originally written for our internal technology newsletter at Work & Co . It is a little bit adapted for web, but the content is almost identical. About a year ago I made this plot. It is called "Krypton" Named by a dear friend and ex-colleague , and I'll try to break down how it was made. The wonderful thing about generative art is that code is just a tool. Thing that really…
This is going to be a very straight forward post. Just a list of JavaScript libraries I use in creating my generative art. And I really mean I use (and abuse) them. All of them are used in multiple of my drawings. I'll include couple of photos under the respective libraries. I finally settled with these libraries after trying several other alternatives for each. Performance was one of the key…
Created: February 2022 Size: 15x15cm Paper: Fabriano Bristol 250gsm Pens: Pigma Micron
I still think it is not perfect, but I stopped here. I may revisit the algorithm and generate a different drawing in the future. Created: February 2022 Size: 24x26cm Paper: Fabriano Bristol 250gsm Pens: Pigma Micron
If you just want the see the submissions, jump to the Weekly Code Challege website. But please bare in mind that the most of these were created in a couple of hours. This post is long overdue. Earlier this year, I came with an idea to organize a weekly code challenge in our Belgrade office . With the whole COVID situation going on, I hoped it could inspire people to start hacking and make…
If you are only interested in the wiring diagram, jump directly to the wiring section. HyperX's Cloud II headphones come with a USB sound card, which looks like this: It is a convenient little dongle. I had it plugged in into the front USB port, and I bumped into it, bending the connector for ninety degrees. Naturally, it stopped working. Good thing about these headphones is that the sound…
Recently I implemented a fly out menu in React, and stumbled on the following problem - I had to catch a blur event on the menu, but it had multiple focusable children. When user is tabbing between these menu items, blur event is triggered every time on the parent, followed by the focus event on the next item. As I wanted to close the menu on blur, this would close it before user was able to get…