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, con...

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 2023Size: 27x27cmPaper: Fabriano Bristol 250gsmPens: 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 2023Size: 31x30cmPaper: Fabriano Bristol 250gsmPens: 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 s...

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 Line...

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 po...

I was tasked with getting lines of text from an element many times. Usually it was to truncate the textBefore 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 solutio...

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 stadiumsAccording to Wikipedia these are known as Mexican or stadium waves. So I made waves using CSS only (code ...

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 framesEvery 100 frames Code used look...

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.Creat...

The second plot from the series. Polygons instead of the circle, to get this cube like shape.Created: July 2022Size: 26.5x30cmPaper: Fabriano Bristol 250gsmPens: 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...

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 ...

End of an era. I started my career when IE6First 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...

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 n...

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 o...

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....

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 t...

Created: February 2022Size: 15x15cmPaper: Fabriano Bristol 250gsmPens: 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 2022Size: 24x26cmPaper: Fabriano Bristol 250gsmPens: 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...

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...

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...

Created: August 2021Size: 30x21cmPaper: Fabriano Bristol 250gsmPens: Pigma Micron, Sakura Gelly Rolls, Mechanical Pencil

Shading was done by generating (a lot of) dots. Then I used saxi's option to connect nearby dots in order to create these squiggly lines.Created: July 2021Size: 30x30cmPaper: Fabriano Black Black 300gsmPens: Uni-ball Signo UM-153

Created: July 2021Size: 30x21cmPaper: Fabriano Bristol 250gsmPens: Pigma Micron

Created: April 2021Size: 77x62cmPaper: Farbiano Cotton Paper 300gsmPens:

I wrote the blog post about the creation process. Fun fact, this plot got sold even before I plotted it.Created: March 2021Size: 30x42cmPaper: Fabriano Black Black 300gsmPens: Sakura Gelly Rolls

You can see some ellipses are not being cropped properly. I love how it turned out so I kept it like this.Created: March 2021Size: 18x18cmPaper: Fabriano Bristol 250gsmPens: Pigma Micron, Molotow Blackliner, Mechanical pencil

Everything is actually 2D, but made to look like 3D. Same algorithm as "Pokeball".Created: March 2021Size: 18x18cmPaper: Fabriano Bristol 250gsmPens: Pigma Micron, Molotow Blackliner, Mechanical pencil