This interactive post will show you how to build your own fleet of space invaders by mixing geometry with randomness and a splash of color.| Muffin Man
Before we start, here is a demo of the counter (you can also check it out on CodePen):| Muffin Man
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 same evening. It was fairly straightforward, but it had few gotchas.| Muffin Man
I want to brag a little - my npm packages have been downloaded more than Sidenote noteStats are coming from npm-stat.com.1 million timesSidenote this year! Image src".1m.png" alt"Image showing yearly ...| Muffin Man
All 144 posts I've written over the last 9 years, in chronological order.| Muffin Man
A variation of an origami jumping frog that I learned to make as a child.| Muffin Man
SVGs support non-scaling strokes using the vector-effect attribute, which we can even use to draw non-scaling rectangles and circles.| Muffin Man
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: Image src'.imgusb-sound-card....| Muffin Man
On my current project, I'm making a Progressive Web App (PWA) and I was really annoyed that the status bar on iOS was | Muffin Man
Make complex regular expressions easier to read by breaking them into multiple lines.| Muffin Man
Image comparison component leveraging native HTML range input and a few lines of JavaScript.| Muffin Man
My wife's favorite bunny brooch broke, and she turned to me to fix it. If you have a 3D printer at home, 3D printing is the answer.| Muffin Man
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.| Muffin Man
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.| Muffin Man
I just released @stanko/dual-range-input - a native dual-range input. Here is how it looks with the default styles:| Muffin Man
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.| Muffin Man
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.| Muffin Man
HTML inert is a relatively new property, but it is supported in all major browsers since April this year.| Muffin Man
Moon plots based on NASA photographs.| Muffin Man
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.| Muffin Man
Postcards for Plot Party postcard exchange| Muffin Man
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:| Muffin Man
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.| Muffin Man
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.| Muffin Man
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.| Muffin Man
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.| Muffin Man
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.| Muffin Man
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:| Muffin Man
Today, I'll take you through the process I came up with in regard to transforming an SVG path into a vector rope drawing.| Muffin Man
I was tasked with getting lines of text from an element many times. Usually it was to| Muffin Man
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 | Muffin Man
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.| Muffin Man
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.| Muffin Man
The second plot from the series. Polygons instead of the circle, to get this cube like shape.| Muffin Man
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.| Muffin Man
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.| Muffin Man
End of an era.| Muffin Man
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.| Muffin Man
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.| Muffin Man
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.| Muffin Man
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.| Muffin Man
I'm still working on this algorithm, but I had to plot a small one.| Muffin Man
I plotted it four times before I was satisfied.| Muffin Man
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.| Muffin Man
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 to the next menu item.| Muffin Man
Plotted one for my best man.| Muffin Man
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.| Muffin Man
Made out of fifty thousands dots. The Knight for scale.| Muffin Man
Pretty large print, on a thick watercolor cotton paper.| Muffin Man
Power of Voronoi diagrams.| Muffin Man
Small plots are fun.| Muffin Man
Classic example of bug becoming a feature.| Muffin Man
Colorful blobs following a vector field.| Muffin Man
2020 was a hard one.| Muffin Man
11 hours of plotting and 115 981 dots.| Muffin Man
46534 pen plotted dots.| Muffin Man
The best photo I had is this one that I took while plotting was still in progress.| Muffin Man
It gives me almost claustrophobic vibe, therefore the name. Silver looks so much nicer in person.| Muffin Man
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.| Muffin Man
For multiple projects, I had to add a simple video component with| Muffin Man
Not really generative, I just played with blender's SVG export.| Muffin Man
This one gives me strong sci-fi vibes.| Muffin Man
Although simple, I really like this one and hexagon-based tilings in general.| Muffin Man
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.| Muffin Man
In full neon.| Muffin Man
My first real attempt at generative drawings.| Muffin Man
Large one was planned, small was not.| Muffin Man
Finely tuned vector field. Myself for scale.| Muffin Man
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.| Muffin Man
I started playing with sine function and this is what came out.| Muffin Man
City of Belgrade.| Muffin Man
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.| Muffin Man
It has been almost two months since my last post because I was super busy with my new passion,| Muffin Man
The second galaxy plot, silver on black. Pen for scale again.| Muffin Man
Super wide, plotted on two separate papers. Pen for scale.| Muffin Man
I tried adding some depth by plotting on multiple layers, using tracing paper.| Muffin Man
~27000 circles, 82 meters of lines and 6 hours of plotting.| Muffin Man
You've guessed it, I'm a Zappa fan.| Muffin Man
Unfortunately I don't have good photos of these.| Muffin Man
It took more than 16 hours to plot this one. One of my first plots and definitely one of my all time favorites.| Muffin Man
First plot from the Metaballs series.| Muffin Man
The first real plot I did, made for a friend of mine who is also a Zappa fan.| Muffin Man
Today I have a very personal project to share with you all.| Muffin Man
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.| Muffin Man
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.| Muffin Man
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.| Muffin Man
These days I'm playing with three.js again. I'm not an expert but I enjoy playing with graphics.| Muffin Man
Another Catalina rant, this time about Ruby. As far as I know, on MacOS, it is advisable to| Muffin Man
Yesterday I| Muffin Man
I love easter eggs in software.| Muffin Man
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).| Muffin Man
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.| Muffin Man
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.| Muffin Man
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.| Muffin Man
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.| Muffin Man
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 writing shape.| Muffin Man
This time I want to share a small range slider (progress bar) I built. Check the demo. Code and documentation are available here.| Muffin Man
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.| Muffin Man
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.| Muffin Man
