Stanko Tadić

Stanko 21 May 2026 1 min read

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…

Stanko 15 Nov 2025 1 min read

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,…

Stanko 3 Nov 2025 3 min read

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…

Stanko 23 Oct 2025 1 min read

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…

Stanko 15 Aug 2025 11 min read

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

Stanko 5 Aug 2025 4 min read

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,…

Stanko 9 Jun 2025 2 min read

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…

Stanko 3 Jun 2025 4 min read

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…

Stanko 11 Apr 2025 3 min read

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 great. I couldn't find a native solution, so I tried using CSS instead.…

Stanko 3 Apr 2025 7 min read

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…

Stanko 31 Mar 2025 1 min read

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:…

Stanko 2 Mar 2025 3 min read

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…

Stanko 23 Feb 2025 1 min read

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…

Stanko 10 Feb 2025 14 min read

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…

Stanko 3 Feb 2025 2 min read

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…

Stanko 18 Jan 2025 3 min read

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…

Stanko 18 Nov 2024 4 min read

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…

Stanko 12 Nov 2024 1 min read

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…

Stanko 9 Nov 2024 3 min read

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…

Stanko 13 Jun 2024 6 min read

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…

Stanko 21 Dec 2023 3 min read

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…

Stanko 25 Nov 2023 1 min read

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:…

Stanko 4 Aug 2023 3 min read

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…

Stanko 10 Jul 2023 1 min read

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:…

Stanko 5 Jul 2023 2 min read

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…

Stanko 20 Jun 2023 4 min read

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…

Stanko 19 Jun 2023 3 min read

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…

Stanko 30 Apr 2023 1 min read

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

Stanko 30 Apr 2023 1 min read

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

Stanko 8 Apr 2023 2 min read

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…

Stanko 22 Mar 2023 2 min read

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,…

Stanko 23 Dec 2022 9 min read

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…

Stanko 22 Dec 2022 4 min read

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 solution I'm satisfied with, although it has…

Stanko 10 Nov 2022 7 min read

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 is available on CodePen): I…

Stanko 21 Oct 2022 3 min read

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 looks like this, it just updates currentTime based on window scroll.…

Stanko 13 Jul 2022 1 min read

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…

Stanko 3 Jul 2022 1 min read

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

Stanko 20 Jun 2022 3 min read

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…

Stanko 17 Jun 2022 2 min read

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…

Stanko 16 Jun 2022 1 min read

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 planned celebrating when we finally…

Stanko 2 May 2022 3 min read

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…

Stanko 4 Mar 2022 3 min read

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…

Stanko 1 Mar 2022 4 min read

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…

Stanko 28 Feb 2022 3 min read

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…

Stanko 24 Feb 2022 1 min read

Created: February 2022 Size: 15x15cm Paper: Fabriano Bristol 250gsm Pens: Pigma Micron

Stanko 20 Feb 2022 1 min read

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

Stanko 30 Sept 2021 2 min read

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…

Stanko 29 Sept 2021 1 min read

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

Stanko 19 Sept 2021 2 min read

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…

Stanko 23 Aug 2021 1 min read

Created: August 2021 Size: 30x21cm Paper: Fabriano Bristol 250gsm Pens: Pigma Micron, Sakura Gelly Rolls, Mechanical Pencil

Stanko 27 Jul 2021 1 min read

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 2021 Size: 30x30cm Paper: Fabriano Black Black 300gsm Pens: Uni-ball Signo UM-153

Stanko 4 Jul 2021 1 min read

Created: July 2021 Size: 30x21cm Paper: Fabriano Bristol 250gsm Pens: Pigma Micron

Stanko 11 Apr 2021 1 min read

Created: April 2021 Size: 77x62cm Paper: Farbiano Cotton Paper 300gsm Pens:

Stanko 27 Mar 2021 1 min read

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

Stanko 14 Mar 2021 1 min read

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

Stanko 14 Mar 2021 1 min read

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

Stanko 16 Feb 2021 1 min read

It took me some time to get the color blending just right. Because of so many colors, it was impossible to plot these. In the end I did five very tall prints. Be sure to check out the last photo to see all prints in one place. Created: February 2021 Size: 85x20cm each Paper: Farbiano Cotton Paper 300gsm Pens:

Stanko 1 Feb 2021 3 min read

2020 was a hard one. I started writing this post in December, but I couldn't make myself finish it. The whole situation with COVID made me anxious at times and I didn't really have motivation for my side projects including this blog. But I won't focus on bad things, everyone had a tough year, so let's try to stay positive.…

Stanko 6 Dec 2020 1 min read

Two separate plots, and I'm super happy how I managed to align them. On the last image, you can see the lines I drew to help me align it. My wife insisted we keep this one. Pigma Micron pens are indestructible, just saying. Created: December 2020 Size: 70x35cm Paper: Bristol 220gsm Pens: Pigma Micron

Stanko 3 Dec 2020 1 min read

It ended up being vertically symmetrical because I forgot to change parameters for the bottom half. Created: December 2020 Size: 30x42cm Paper: Fabriano Bristol 250gsm Pens: Pigma Micron

Stanko 7 Nov 2020 1 min read

Created: November 2020 Size: 42x23cm Paper: Fabriano Bristol 250gsm Pens: Pigma Micron, Sakura Gelly Rolls

Stanko 7 Nov 2020 1 min read

Created: November 2020 Size: 42x30cm Paper: Fabriano Bristol 250gsm Pens: Pigma Micron, Uni-ball Signo UM-153, Mechanical pencil

Stanko 17 Oct 2020 1 min read

I already built a mount for my Raspberry Pi camera, but it was 3d printed. Meaning that it has one fixed position. I used it a couple of times, but I wasn't super satisfied. Then I stumbled on these images, and thought it was a great idea to use Lego to build a new, more versatile mount. A friend of…

Stanko 16 Oct 2020 3 min read

For multiple projects, I had to add a simple video component with play/pause buttonAlways include at least basic video controls for accessibility and a buffering loader. It is not hard to detect the buffering state, but it can be tricky to get everything right. Therefore, I created a simple component which I now copy from project to project with slight…

Stanko 12 Oct 2020 1 min read

One plot ended up being smaller because I screwed up cutting it. Created: October 2020 Size: 15x15cm and 13x13cm Paper: Fabriano Bristol 250gsm Pens: Molotow Blackliner, Koi Coloring Brush, Mechanical pencil

Stanko 2 Oct 2020 1 min read

It was generated using the same algorithm as the previous drawing. Metallic pens give it a really nice effect in person. Created: October 2020 Size: 32x19cm Paper: Fabriano Black Black 300gsm Pens: Sakura Gelly Rolls Metallic

Stanko 30 Sept 2020 1 min read

Be sure to check the timelapse in the gallery below. Created: September 2020 Size: 52x27cm Paper: 200gsm Pens: Sakura Gelly Roll 0.8mm pen

Stanko 16 Sept 2020 1 min read

It is funny, I would never say I would be sad to deprecate a software project. Especially a project boilerplate. But I just merged the deprecation notice, and I do feel down a little. I created Marvin about four years ago for my own needs. Since then it grew, became internal project at Work&CoFun fact, our website is made on…

Stanko 11 Sept 2020 1 min read

A friend of mine asked for a color version of Black Holes. Again, it is so hard to take a good photo of these colors. They are nicer and more vivid in person. Created: September 2020 Size: 42x30cm Paper: Fabriano Black Black 300gsm Pens: Gelly Roll Moonlight

Stanko 2 Aug 2020 1 min read

You can play with algorithm here and download images. It took me ages to find appropriate pens to plot this one. Also check the blog post about how it is made. On the images below you can see two different drawings. Created: August 2020 Size: 42x30cm Paper: Fabriano Black Black 300gsm Pens: Sakura Gelly Rolls

Stanko 20 Jul 2020 1 min read

Generative process allows me to work with huge number of elements and tiny details. These details are sometimes impossible to plot, as they would just get lost in the process. That's why I love large format prints - they allow tiny details to be seen and shine through. Created: July 2020 Size: 60x84cm (can't remember for the small one 🙈)…

Stanko 11 Jul 2020 1 min read

Plotted in two takes on a single paper. White could be a little stronger, I still regret not doing two passes for each layer. Created: July 2020 Size: 70x40cm Paper: 200gsm Pens: Uni-ball Signo UM-153

Stanko 21 Jun 2020 1 min read

Earlier today I removed Google Analytics script from my website. Long time ago I switched to self hosted fonts instead of Google Fonts. That means, as of today, my blog is completely Google free. Google Analytics is a great product, but I probably used up to five percent of it's features. Still I had a fear of missing out. That's…

Stanko 27 May 2020 1 min read

I always liked the flow on this one, it feels natural. Created: May 2020 Size: 30x36cm Paper: Fabriano Bristol 250gsm Pens: Pigma Micron

Stanko 17 May 2020 1 min read

Real elevation data but with applied exponential scale to emphasize the relief. I made three plots, all three a little bit different. They ended up in three different countries. Created: May 2020 Size: 42x30cm Paper: Fabriano Bristol 250gsm Pens: Pigma Micron

Stanko 12 May 2020 1 min read

Mobile iOS Safari doesn't display preview thumbnail until you tap on the video. My go-to solution was to define a poster attribute and move on. But today I learned I could use something called Media Fragments. Media Fragments specify a way of sharing parts of audio and video files by simply adding url params. Browser support varies, but fortunately support…

Stanko 7 May 2020 2 min read

It has been almost two months since my last post because I was super busy with my new passion, generative artFor now, you can see my work on my Instagram profile. Expect new posts about my process and tools in the near future.. I also got my hands on the brilliant little machine by Evil Mad Scientist, AxiDraw plotter, and…

Stanko 2 May 2020 1 min read

My first attempt at real 3D vector composition. The gap was initially added to hide the border between two papers, but it grew on me. Created: May 2020 Size: 83x30cm (2 x A3) Paper: Fabriano Bristol 250gsm Pens: Pigma Micron

Stanko 2 May 2020 1 min read

Created: May 2020 Size: 83x30cm (2 x A3) Paper: Fabriano Black Black 300gsm Pens: Uni-ball Signo UM-153

Stanko 24 Apr 2020 1 min read

The base is white Bristol and the upper layer is tracing paper. I really like how it turned out, transparency gives it a nice sense of depth. But tracing paper is incredibly hard to work with, it has mind of it's own. Once it gets framed, I hope glass will press it evenly against the base layer. Created: April 2020…

Stanko 18 Apr 2020 1 min read

On the second to last image, you can see one of my first attempts to simulate tearing. If I ever return to this algorithm, I'll make a new composition wider. Created: April 2020 Size: 42x30cm Paper: Kunstdruck Pens: Pigma Micron

Stanko 11 Apr 2020 1 min read

Another Zappa, again generated by my Vertigo project. I still have this one lying around, I have to finally frame it. Created: April 2020 Size: 21x21cm Paper: Fabriano Bristol 250gsm Pens: Molotow Blackliner

Stanko 4 Apr 2020 1 min read

Created: April 2020 Size: ~18x18cm Paper: Fabriano Black Black 300gsm Pens: Uni-ball Signo UM-153

Stanko 3 Apr 2020 1 min read

I love the patterns that emerged from polygon splitting, it is a perfect contrast with the geometrical base of the drawing. My plotter wasn't calibrated properly, resulting in some lines not being perfectly aligned, but to me, it just gave even more soul to the drawing. Created: April 2020 Size: 30x42cm Paper: Kunstdruck Pens: Pigma Micron

Stanko 31 Mar 2020 1 min read

Check more drawings on the mini site. I also did a write up on how it is made. I really need to plot a couple more of these. Created: March 2020 Size: 42x30cm Paper: Fabriano Black Black 300gsm Pens: Uni-ball Signo UM-153

Stanko 28 Mar 2020 1 min read

Image was generated using Vertigo, a small vector shader tool I created. It is open source and you can try it live on it's website. Created: March 2020 Size: 40x32cm Paper: Kunstdruck Pens: Pigma Micron

Stanko 26 Mar 2020 2 min read

Today I have a very personal project to share with you all. Letters from Sarajevo is a web adaptation of the book of the same name. My brother wrote the book using authentic letters our father sent us while being stuck in Sarajevo during the war in the nineties. For more information about the book, please check about page. Illustrations…

Stanko 6 Feb 2020 4 min read

I'm all about generative art these days. Today, I present you Metaballs, my latest creation. It is one of those projects that I visualized in my head and managed to pull it off exactly how I imagined it. Somehow I came up with an idea to generate spheres, smoothly merge them to get organic looking shapes, which then I would…

Stanko 22 Jan 2020 5 min read

Recently I started playing with generative art. I'm new to the whole thing and I'm absolutely enjoying it. Today I want to show you the first generative art project I'm satisfied with. It is called Neon and you can check it out here or by clicking on the image below. I will try to explain in detail how Neon works,…

Stanko 31 Dec 2019 4 min read

Last time I wrote one of these recaps was in 2016. Not sure why I waited three years to write another, and from now on I'll try to do these annually. 2019 was a good year for me, and I want to highlight a couple of things. Blog # I'm really proud of my blog. And judging by the analytics,…

Stanko 18 Dec 2019 7 min read

Update, September 2025 # Replaced path.toShapes(true) with SVGLoader.createShapes(path) because toShapes misses some of the SVG-specific logic implemented in the loader. Thanks to forresto who pointed it out. Also updated the demo to use a fresh version of ThreeJS. These days I'm playing with three.js again. I'm not an expert but I enjoy playing with graphics. Conveniently, a friend of mine…

Stanko 11 Dec 2019 1 min read

Another Catalina rant, this time about Ruby. As far as I know, on MacOS, it is advisable to leave system Ruby version to the OSFor example users don't have write permission on the system's gems folder. , and install a separate version for development. I had one installed via Homebrew, and never had any issues with it. But after Catalina…

Stanko 10 Dec 2019 1 min read

Yesterday I updated my work laptop to MacOS Catalina.To be able to use AirPods Pro with it :/ Apple made a change and switched the default shell to zsh (instead of bash). From what I have read, the reason is a licensing issue. Bash is not gone and everything will work like it used to. But every time you open…

Stanko 1 Dec 2019 4 min read

I love easter eggs in software. You may have noticed the keyboard image in the background of my blog. This thing on the right side of the screen. Those with a keen eye figured out it highlights keys as you are typing. It has been here for some time now, and on my colleague's request, I'll explain how it works.…

Stanko 25 Oct 2019 1 min read

Short Firefox tip to disable Cmd + MouseWheel zoom. There is a weird interaction with it. Therefore I decided to turn it off completely (I never used it anyway). When I scroll a page using a trackpad and start switching tabs via Cmd + Tab, inertia scrolling would still be active, and the page I switched to gets zoomed in…

Stanko 26 Sept 2019 1 min read

Two years ago I wrote this rant. Firefox had a problem on MacOS on scaled resolutions, resulting in insanely high CPU usage and battery drain. Issue is finally fixed, and I'm happy to say I'm using it again. The fix is expected to land in the stable version in late October 2019, with the release of Firefox 70. Meanwhile you…

Stanko 12 Sept 2019 1 min read

Please note that I'm not using Jekyll anymore, so this post might be outdated. I'm using Staticman as a comment system on this blog. Unfortunately public instance can't handle all of the requests coming in. That resulted in some readers being unable to post a comment. That is why I decided to run my own instance on Heroku. It was…

Stanko 17 Aug 2019 3 min read

Today I want to share three bookmarklets I love to use in development. You can add them to your browser, by creating a new bookmark and entering bookmarklet code instead of URL. Clicking on a bookmarkletI usually keep them in the bookmarks bar to make them easier to find. , will run the code snippet on the page you are…

Stanko 16 Aug 2019 1 min read

Two weeks ago I got a pair of cheap Xiaomi's wireless earphones. This was an experiment to see if I like true wireless concept before buying something more expensive. Sound # Most of the reviews out there are saying AirDots are lacking bass, but that sound is good overall. Long story short - sound is bad. I don't like strong…

Stanko 5 Jul 2019 3 min read

I haven't published anything in a while, which is a shame because I have a couple of good things to write about. That said, today's post is going to be a short one. I wasn't sure if theme is interesting enough. But in the end I decided to write it anyway. And it will help me get back in the…

Stanko 1 May 2019 2 min read

This time I want to share a small range slider (progress bar) I built. Check the demo. Code and documentation are available here. Same story again, on a React project we needed a media progress bar, and I ended up writing one myself. Why I didn't like anything I found? Well, everything I tried was missing one of the things…

Stanko 2 Mar 2019 1 min read

Let me start with a little disclaimer. Just because you can, doesn't mean you should use it. Hiding scrollbars can be bad for accessibility and user experience. But there are rare cases where it makes sense, usually when you have scrolling effects or when modal is opened. So use it wisely. Check the demo. And find the cross browser code…

Stanko 25 Feb 2019 3 min read

Exactly ten years ago, on my my friend's blog I published a blog post about Internet Explorer 6 CSS hacks. I remembered it recently, and thought it would be really cool if I republished that same post, on it's 10th anniversary. I added comments about the hacks from today's perspective to give you some context. Cited parts are from the…

Stanko 9 Feb 2019 2 min read

Few days ago, I was chatting with our design team, and we were wondering how hard would be to create a fake audio spectrum (that mimics human speech) and visualize it. I immediately said it should be easy, and that I will play with it over the weekend. Of course, I didn't wait for the weekend, but wrote it the…

Stanko 4 Dec 2018 1 min read

I want to brag a little - my npm packages have been downloaded more than 1 million timesStats are coming from npm-stat.com. this year! And I finally got a real domain: https://muffinman.io/ I've been quiet for the last couple of months. Mostly because I was busy with other things, both work and personal. But I do have a few small…

Stanko 10 Nov 2018 1 min read

I love my Nintendo SwitchI have a huge draft about Switch, and how it have put the fun back in gaming for me. I hope to publish it at some point. Unfortunately, tonight I noticed that one of my Joy-Cons has two weird lumps on it. (This is the image from the internet, not mine.) On multiple forum threads, people…

Stanko 1 Oct 2018 2 min read

This is something I keep rediscovering, because I keep forgetting it. JSON.stringify will omit all object attributes that are undefined. In most cases, it doesn't really matter, because if we parse that string back, and try to access that attribute - it will be undefined by design. Check the example below: const user = { name: 'Stanko', phone: undefined };…

Stanko 7 Sept 2018 1 min read

I want to share a hack (or a trick if you prefer) my colleague Marko showed me today. What is the problem? We want our flex items to be equally distanced between each other and from the parent's edge. Unforunately space-evenlyI wasn't aware of this property, thank you Marc for mentioning it in the comment below. is not supported in…

Stanko 22 Aug 2018 1 min read

Yesterday, one of my colleagues shared UI Movement website. It resulted in me playing with random animations trying to replicate mockups I liked. Here are the results:

Stanko 16 Jul 2018 1 min read

This happened to me couple of times - borders would just randomly disappear in Chrome. All other browsers render them normally, but they just vanish in Chrome, on some screen sizes. Resizing helps sometimes, but I never was able to catch real pattern for reproducing. If this ever happens to you, there is a (hacky) solution. Change border width from…

Stanko 12 Jul 2018 2 min read

TL;DR # If you just want to add git version tag after npm publish add this to your package.json: "postpublish" : "PACKAGE_VERSION=$(cat package.json | grep \\\"version\\\" | head -1 | awk -F: '{ print $2 }' | sed 's/[\",]//g' | tr -d '[[:space:]]') && git tag v$PACKAGE_VERSION && git push --tags", I advise you to read rest of the post…

Stanko 1 Jun 2018 2 min read

This is a weird one, and not something you will stumble into every day. But it is a bug nonetheless. On iOS safari, if you use window.scrollTo(0, y) and y is larger than document's maximum scroll, any immediate call to getBoundingClientRect will return incorrect top value.Same will happen for horizontal scroll and left value. What happens is that browser thinks…

Stanko 9 May 2018 2 min read

Recently I switched to a new laptop and had to set it up to my likings.This comic describes my setup pretty accurately. My setup includes a bunch of small apps I found over the years. It seems that most people are not aware of these, so I decided to share a list. All of them are free (with the exception…

Stanko 19 Mar 2018 1 min read

Some CSS fun. Lately I've stumbled upon couple of websites with elastic hover effect on buttons. Each one was using SVG morphing, which is fine, but I was wondering how hard would it be to implement it in CSS. It ended up up being pretty easy. I created four pseudo elementsOnly two pseudo elements (::before and ::after) can be created…

Stanko 19 Mar 2018 2 min read

Today I learned: To upload files using fetch and FormDataFormData is supported in IE10+. you must not set Content-Type header. const fileInput = document.querySelector('#your-file-input') ; const formData = new FormData(); formData.append('file', fileInput.files[0]); const options = { method: 'POST', body: formData, // If you add this, upload won't work // headers: { // 'Content-Type': 'multipart/form-data', // } }; fetch('your-upload-url', options); Problem…

Stanko 18 Mar 2018 3 min read

I've been really busy lately, doing both work and pet projects. At the moment I'm playing with three.js trying to clone old DOS game to JavaScript. Games (and animations in general) need animation loop in which we are going to update the scene and re-render it. Example animations are simplified and they just move a box 60px per second. But…

Stanko 28 Feb 2018 3 min read

Snippet for a rather popular requirement. Formatting a date in a nice way, using infamous "time ago" function. This is the basic version which I adapt to fit a specific project. To keep it easily customizable to your needs, I haven't packaged it up. Just pass a date to it, and function will return one of the seven possible formats:…

Stanko 2 Feb 2018 1 min read

This time we joined forces with our friends from IT Girls. They are promoting tech among women, and helping them start a career in it. Together, we are organizing a series of meetups and workshops about React. Last night, my colleague Nemanja and myself had a pleasure to give the first talk in the series. We are planning to have…

Stanko 29 Jan 2018 2 min read

React Router switched to component based routing starting with the version 4. Redirects are now done by rendering a Redirect component, like this:Please note that you can use included withRouter decorator but it can cause update blocking and introduce side effects. This is small subset of it. <Redirect to='/redirect-url-here' /> What I usually do is to keep redirectTo property in…

Stanko 23 Jan 2018 1 min read

Short one today. I'm continuing to release small libraries. So let me present react-ratio, another small React component. You probably guessed what it does - creates element with the given aspect ratio. Check the demo or grab the source code

Stanko 22 Jan 2018 1 min read

I just released tiny library called has-tabbed. Again, it is a small piece of code I regularly copy from project to project. I always considered it too insignificant for releasing it as a standalone package. When user presses tab key, it adds CSS classBy default --tabbed is used, but it accepts custom class as parameter. to html element. Then, if…

Stanko 5 Jan 2018 1 min read

Marvin just got better! Few days ago I've released version 1.0 of my universal React boilerplate.Also known as Marvin There are some big changes, and I'm pretty happy with it's current state. At least 20 applications were shipped using Marvin. It has about seven hundred stars on GitHub with quite a few community contributions. Big updates # Switch from redux-thunk…

Stanko 1 Jan 2018 3 min read

This was intended to be a single paragraph in the post I'm still writing. It ended up much longer so I decided to publish it on it's own. So without further due, I present you my programming story. Origins # I got my first pc when I was four, shiny 286 with a color monitor! My father (who knows nothing…

Stanko 1 Jan 2018 1 min read

That's my new year's resolution. Code, write, play and craft more!

Stanko 15 Dec 2017 1 min read

Another one-liner I love, that returns body scrollbar width. If scrollbar is not shown it will return zero (including mobile devices). function getScrollbarWidth() { return window.innerWidth - document.documentElement.clientWidth; } Click on the button to try it yourself: Get scrollbar width! document.querySelector('.btn--demo').addEventListener('click', function() { alert('Scroll bar width is ' + (window.innerWidth - document.documentElement.clientWidth) + 'px') }); Browser support # Tested on:

Stanko 6 Dec 2017 4 min read

For handling API calls I have a small snippet I'm copying from project to project. I decided to clean it up, make more generic and share it. It is intended to be a starting point, so you might want to customize it to your custom needs. What it does? # It is a simple wrapper around native fetch.If you need…

Stanko 2 Dec 2017 1 min read

Two days ago I released two npm packages, window-scroll-manager and react-window-decorators. Scroll manager # Scroll managerPlx uses the same scroll manager so I extracted it to the standalone package. is just a simple wrapper around scroll event, that broadcasts custom window-scroll event once per requestAnimationFrame. Idea comes from MDN. React decorators # or higher order components are the bees knees,…

Stanko 28 Nov 2017 1 min read

This is a sad rant :( I love Firefox (and Mozilla too) and have never switched to ChromeAlthough I use Chrome for development. But few days ago I switched to Opera, because new Firefox's (aka Quantum) CPU usage is insane. Disabling extensions didn't help, it just hogs all available resources. MacOS is giving me "Service Battery" warning when Firefox is…

Stanko 27 Nov 2017 1 min read

Muffin Man is back! This time with new visual identity. This was long overdue, but new design took me more than I wanted to.Mostly because of the trillion things I'm working on. Now I can get back to writing. Alogn with the new design, some other things got updated too, hopefully making content easier to browse. To name a few:…

Stanko 27 Oct 2017 1 min read

Just wanted to share two articles that helped me understand visual design better. I was already aware of the most of these things, but having someone explain it how and why was really helpful. 7 Rules for Creating Gorgeous UI Optical Effects in User Interfaces (for True Nerds) Learn more about design # When asked how to learn more about…

Stanko 24 Oct 2017 1 min read

Just a quick proof of concept I made for transitioning between two react components. It animates height (of the parent) and fades components into each other. In componentWillReceiveProps it checks if children prop has changed. When that happens, it will save currently rendered children and the height of the wrapper. Then it will animate wrapper's height to a new component's…

Stanko 7 Oct 2017 17 min read

Last summer I wrote this post which quickly became my most popular one to day. With webpack 2 and 3 it got outdated, so I decided to write a new one. Before we start # I'll assume you have a basic knowledge of unix terminal, npm and JavaScript. You did some React, but now you want to level up and…

Stanko 1 Oct 2017 1 min read

I kinda got bored by the current design. Rotating SVGs in the header ate too much CPU power (oh the irony). So I decided to change a thing or two. First thing was to get rid of the rotation. Then logo got replaced and I added this marvelous font. Header is a bit smaller now and footer blends more with…

Stanko 27 Sept 2017 5 min read

Please note that I'm not using Jekyll anymore, so this post might be outdated. Update, March 2020 # This post is outdated and I simplified my setup a lot. I'll try to cover my current setup in one of the future blog posts. Original post # Few days ago I got a following message on LinkedIn. Hi Stanko! I'm a…

Stanko 27 Sept 2017 1 min read

But I need to regroup and focus on finishing at least one, instead of starting all of the trillion ones and finishing none.

Stanko 2 Sept 2017 1 min read

On the project I'm currently working on, client's logo is displayed in two versions, black on the white background and vice versa. To make their life easier, so they don't have to upload two assets, I suggested SVG. Alas they can't use SVGs (kinda long story), so I just applied CSS filter: invert(1);, but... ...you guessed it - it doesn't…

Stanko 2 Sept 2017 1 min read

If you are JavaScript developer and not using nvm you might want to look at it. Node Version Manager is easy way to install, manage and work with multiple node versions. Recently I got npm update notification, that looks something like this: For some reason, when I had node installed through nvm, npm i -g npm didn't work. However, when…

Stanko 9 Aug 2017 1 min read

If you didn't know, in Safari's private mode both localStorage and sessionStorage are not working. To be exact, Safari sets storage's limit to 0, so you can't write anything to it. I keep forgetting this, until QA people report it at some point. So I quickly wrote a small facade for it, which fails silently in this case. That means…

Stanko 26 Jul 2017 2 min read

When we left jQuery behind and embraced modern JavaScript frameworks, we thought we would never touch DOM directly again. Well that is not entirely true. There are a lot of cases when you need to get some DOM element size. For element's dimensions .offsetWidth and .offsetHeight are great way to do it. But one of the other common tasks is…

Stanko 24 Jul 2017 3 min read

I'm becoming predictable. Again, I haven't found component I like, so I wrote my own. This time, I've build React component for parallax (on scroll) effects. Check the live demo. It is called Plx, it is open source and available on GitHub and npm. What it does # So far in my career, I've built so many parallax components. Parallax…

Stanko 26 Jun 2017 1 min read

I use the same wallpaper for a long time now. But with high resolution displays, wallpaper started to look blurry and noisy, so I stopped using it. But recently, my girlfriend reminded me of this great website which super-scales images using magic. Ok, not magic, but it uses "Deep Convolutional Neural Networks", which is pretty much the same thing. Results…

Stanko 23 Jun 2017 5 min read

On the frontend, we do a lot of animations. Most of the simple animations I create by using CSS transitions. Either I will change class or inline style of the element, and define transitions in CSS file. Easiest way to do this in React is to render initial state, and then when it renders, change the state to apply class…

Stanko 25 May 2017 1 min read

I'm happy to announce Marvin, boilerplate for kicking off React/Redux applications. Basically my boilerplate became Work & Co's internal project. It is meant to be a starting point for our React projects. This way faster development is assured along with higher quality code. It is open source, and external contributions are welcome. Name comes from a fictional character Marvin, android…

Stanko 17 May 2017 2 min read

Update, December 2017 # Check this post for updated, more performant version. I love JavaScript decorators. One that I copy to every React project is scroll decorator. It is fairly simple way of injecting scroll position to react components. This way you can handle scroll using react lifecycle. This decorator is not listening to a scroll event, as that is…

Stanko 14 May 2017 1 min read

Friends of mine from the band Time Pills opensourced bunch of their tracks. You can find them on GitHub. They are looking forward to having them remixed by creative people and sharing it with the world Repo contains all of the tracks, stems, presets, loops and even midi files. Be sure to check them on SoundCloud as well. Enjoy!

Stanko 9 May 2017 1 min read

Another tech meetup coming up. This time we have three great talks about engineering and project planning. We also have a special guest - IT girls team. The IT Girls team will share their advances in promoting the professional development of women in technology in Serbia. This one will be held on Tuesday, May 16th at Impact Hub Belgrade. See…

Stanko 25 Apr 2017 1 min read

Just a short one. I want to share a simple command to display nicer git log in the terminal. git log has --pretty=format option built-in, we are just going to pass formatting to it. git log --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset' And it looks like this: Then add it to your .bash_profile as an alias (I'm using glog)…

Stanko 9 Mar 2017 1 min read

I started leading teams relatively early in my career. Mentoring and leading younger developers is something I tremendously enjoy. But there is one thing I really miss about being a "regular" developer. And that is - being able to put my headphones, play some rock 'n roll, and code for a couple of hours without any distractions. Something that is…

Stanko 6 Mar 2017 2 min read

Most JavaScript developers used jQuery's .slideUp() and .slideDown() methods, and got used to them. As component based frameworks usually do not include such functionality, the first logic choice is to turn to CSS. But alas, CSS transitions do not work with height: auto. (Transitions can do a tween only between two numeric values.) As we use this a lot in…

Stanko 5 Mar 2017 2 min read

In this post you can find seven talks I really liked in no particular order, most of them development related. I'll explain why I liked them, and why I should recommend watching every single one of them. Every talks is embedded, but link to a website or youtube is included as well. Please comment with the talks you think are…

Stanko 21 Jan 2017 1 min read

Update March 2019 # Check this fix too. It works really well in most cases. If you ever used vh units and tested your work on mobile Chrome (iOS and Android), you probably were annoyed by page jumping when you scroll. As you probably know vh units are based on the window height. When you scroll, Chrome's address bar disappears…

Stanko 18 Jan 2017 3 min read

May 2018 - Updated to match React Router v4 API. September 2019 - Updated to match React Router v5 API, added React Create App part. If you ever had to deploy React Router app to the subfolder on the server, you know what the problem is. Routes will get messed up once you upload it to the server. Here are…

Stanko 12 Jan 2017 1 min read

We prepared another tech meetup, this time with four presentations. There will be a break after the second one. This should be the biggest one so far, with two guest speakers. It will happen on February the 4th, at Belgrade Youth Centre. Hope to see you there! Visit Facebook event or meetup.com page. And apply here. Thanks to everyone who…

Stanko 28 Dec 2016 1 min read

Just something to cheer you up for the holidays :) I got this idea while I was sick in bed, and had nothing smarter to do. Pure CSS, no JavaScript at all. Hope you like it, I may add some more details. Check the code on codepen. Happy new year!

Stanko 21 Dec 2016 2 min read

2016 was quite a ride. I just want to write a couple of random things, to close this year with one last post. Work & Co # Big news here, my company became a part of Work & Co. We're really excited about that, and I'm looking forward to the great stuff we are going to build. Our collaboration goes…

Stanko 24 Nov 2016 1 min read

Currently, I'm working on a relatively small pet project. While setting it up, I decided to extract a webpack boilerplate from it. As whole JS community is moving really fast, I found very hard to set everything up using Webpack 1.x. One package would ask to update the other, that would break the third one, then that one... and so…

Stanko 24 Nov 2016 1 min read

Part three - also the last part # Other parts: Part 1 - Webpack, Babel, React, Router, ESLint Part 2 - SASS, more ES6 goodness (Static props, decorators, deconstruction...) Part 3 - Where to go from here Where to go from here # I really wanted to continue this series, but unfortunately whole JavaScript / Node community is moving so…

Stanko 7 Nov 2016 1 min read

Update November 2017 # Unfortunately, I'm not maintaining this repo anymore. Still, there are couple of really useful links on it. People are making awesome lists on the Git these days. I'm spamming our company's slack dev channel, and someone suggested to put all of those links in one place. So I created one awesome list as well. Awesome web…

Stanko 31 Oct 2016 2 min read

After the recent Apple keynote, it seems that community is not happy with the new MacBook Pro. Well, I'm not either. As for iPhone/iPad, those are toys, I could use pretty much any other modern smartphone/tablet. But MBP is my working horse, and I was always saying that it doesn't matter how much it costs, I would always get it.…

Stanko 24 Oct 2016 3 min read

Please note that I'm not using Jekyll anymore, so this post might be outdated. Update, November 2017 # I don't use this setup anymore, it might be outdated, proceed with caution. Original post # As I already mentioned, GitHub pages do not work with the Jekyll plugins. It is a security measure. So I researched it a bit, and colleague…

Stanko 20 Oct 2016 3 min read

Please note that I'm not using Jekyll anymore, so this post might be outdated. As you probably noticed I redesigned my blog and added some new features. This is a list of the new stuff. New design Category pages Comments Search Reading time Share buttons New design # My friend Nikola, from MIDA digital agency, helped me a lot with…

Stanko 28 Sept 2016 1 min read

Before modern frameworks, I always used jQuery's scrollTo method. At some point, not every project included jQuery, so I wrote simple function to animate window scroll. I have kept copying that function from project to project. Finally I took some time, cleaned it up and published it on the npm (this is the first npm package I published). Check the…

Stanko 8 Sept 2016 1 min read

We've all been there - trying to get right font sizes from PhotoShop to CSS. Designers usually work with points, which are used in the print, but not common on the web. They also use term tracking a lot, which is actually only a letter spacing with different units. You can recalculate everything by hand and try to keep track…

Stanko 2 Sept 2016 1 min read

Always try to use <button> when element is clickable, but it is not a link. Avoid <a>, <span>, <div> and other elements. Note that display: flex works differently on buttons in different browsers, but we have an easy fix for that. Why? # You will get multiple benefits - user can "tab" to it, and to activate it by pressing…

Stanko 30 Aug 2016 1 min read

I decided to move my CSS playground to the CodePen, and this is the first one I made. Idea came to me while I was riding on a bus, and I might use it on this blog, as a part of it's redesign. This is CSS only animation (I used JS to create 50 elements though). And you can see…

Stanko 29 Aug 2016 3 min read

Part two # Update: Part two is pretty much done. Part three will cover redux and production builds. Other parts: Part 1 - Webpack, Babel, React, Router, ESLint Part 2 - SASS, More ES6 goodness (Static props, decorators, deconstruction...) Part 3 - Where to go from here Adding SASS # We will use SASS loader for webpack, so let's install…

Stanko 23 Aug 2016 9 min read

Update, October 2017 # I just released updated tutorial right here. So feel free to skip this one, and read a new one. It uses updated tools, and hopefully it will grow into a new series of webpack/react posts. Update, March 2017 # Webpack 2 is out, so this post is slowly becoming outdated. For webpack 2 - react boilerplate…

Stanko 3 Aug 2016 1 min read

Recently I lost my iPhone headphones. I didn't care much, as they were almost three years old, and I had a brand new ones. But today, while getting ready for work, I found them in the pocket of the pants I washed about week ago. I was sure they wouldn't work, but guess what? They do! Probably the fact that…

Stanko 13 Jul 2016 1 min read

Another tech meetup is behind us, even more people came this time. As promised, we will keep them coming more often. Miloš spoke first about learning in tech, and keeping up with it. My talk was about SPAs, and how hard they can be. We hope that meetups like this will help to build and strengthen the community in Belgrade,…

Stanko 29 Jun 2016 1 min read

For a current project I'm on, we needed both circular timer, and progress bar. Again, I wasn't able to find small library to do that. But I found awesome answer on Stack Overflow, decided SVG is way to go, and wrote Sektor. Sektor is a plain JavaScript library that draws circle sector (or an arc). Once it is drawn, you…

Stanko 15 Jun 2016 1 min read

If you ever had to fix element on scroll, you probably had an issue on iOS Safari (and other mobile devices). Element will usually flicker, and disappear until scrolling has stopped completely. Just force GPU acceleration by adding transform: translate3d(0,0,0); to your element. You will have something like this: .Element-header { transform: translate3d(0,0,0); } .Element-header--fixed { top: 0; position: fixed;…

Stanko 7 May 2016 1 min read

Atom Babel plugin doesn't highlight variables in ES6 (ES2015) template strings. You'll need to add this snippet to your Atom's style.less atom-text-editor::shadow .variable.js { color: #F8F8F2; } In general, you can just inspect stuff in Atom, find out what classes element are using, and then style it via CSS (LESS). Just don't forget to add atom-text-editor::shadow before your rules. If…

Stanko 18 Apr 2016 1 min read

I'm a big fan of Sublime Text editor, which I was using for years now. Minimal, fast, reliable. But there is one big problem with it. Only one man is working on it's development and community really slowed down. JavaScript ecosystem is going forward at incredible speed, and I'm not sure if Sublime will be able to keep up. Even…

Stanko 15 Apr 2016 1 min read

Two days ago, we held the second Tech Meetup. There were two speakers including myself, and Nemanja Nićiforović, our CEO. Nemanja spoke How to Freelance, and I covered Intro to React. Grab slides: How To Freelance Intro To React We are very thankful to our friends at Zaokret where meetup took place. There were around 60 people and we hope…

Stanko 5 Apr 2016 1 min read

This is the one of my most popular repos. Once client asked for inline video that works on iPhone too. As Apple doesn't allow that (all videos are full screen in native player, and autoplay is not supported),. There was no easy solution, so this player was born. It uses HTML video and canvas. Script picks up the frame from…

Stanko 4 Apr 2016 1 min read

This simple bash command finds all of the files matching *~ recursively, executes rm on them and prints out which files are affected. You can replace file matching pattern, and command you want to execute. find ./ -name '*~' -exec rm '{}' ';' -print

Stanko 21 Mar 2016 2 min read

Generally when comes to replacing native UI components, I'm strongly against it. But, we've all been there, when the client insists on it. You'll see how to style it via CSS (webkit only), apply pure JavaScipt plugin with native scrolling or apply simple CSS hack. Well, let's go :) CSS solution, but only for webkit # Webkit scrollbars can be…

Stanko 12 Mar 2016 1 min read

I needed simple React slider component, as we are building our new website as a universal React application. But I did not find anything lightweight. There is a crazy trend in JavaScript world - add gazillion dependencies. So again, I made something myself. Check the demo. It has no dependencies, and about 200 lines of code. Very simple and extensible.…

Stanko 29 Feb 2016 1 min read

People need to realize that is not enough to have a nice website with a ton of animations and effects. There is no point having such a website if I can't scroll it, while CPU and coolers go crazy. And I use latest MacBook with maxed hardware. Can't imagine trying to use those websites on the old machine (or IE8-9).…

Stanko 27 Feb 2016 2 min read

Please note that I'm not using Jekyll anymore, so this post might be outdated. Update, November 2017 # I don't use this setup anymore, it might be outdated, proceed with caution. Original post # As you probably know this blog is powered by Jekyll. It is a really nice platform, but it lacks a few things I'm used to during…

Stanko 27 Feb 2016 1 min read

Please note that I'm not using Jekyll anymore, so this post might be outdated. It is nice to use post.excerpt instead of post.content on your Jekyll home page, but then users can't see if there is more to read until they open the whole post. To add Read more link, you can use this simple snippet. {% if post.excerpt !=…

Stanko 23 Feb 2016 1 min read

Again, I've seen it somewhere on the internet and recreated it. This one uses jQuery, although I plan to rewrite it to vanilla JavaScript. It switches between two sides of the cube, every time you hover. Depending from which side cursor entered the cube, it will rotate in opposite direction. It is fully responsive, and on touch devices, direction depends…

Stanko 22 Feb 2016 1 min read

Please note that I'm not using Jekyll anymore, so this post might be outdated. Jekyll comes with simple pagination which has only Newer and Older links. I wanted a little bit more, now pagination shows at least five pages, with current in the middle. On the larger screens there are also first and last page links. Newer and Older links…

Stanko 22 Feb 2016 1 min read

Well I saw a pretty nice mockup on Dribbble and decided to make it for fun. It didn't include a mobile/responsive solution, so I came up with my own. Check the demo. This is a pure CSS solution - it uses the :target selector for changing states. Find more about :target on MDN. This is neat, as it also can…

Stanko 21 Feb 2016 1 min read

Everything starts with a Hello World so does this blog. In the first couple of weeks, everything will be under heavy development, until I get it the way I want. As I really enjoy making stuff, I decided to try to make small JavaScript or CSS (SASS) plugin/script every week. Those are going to be both big and small, proof…