Muffin Man

https://muffinman.io

FrontEnd & Creative Coding

Muffin Man

Entries

  • Promise based Web Worker Messaging

    If you've ever used Web Workers (or any other event-based communication), you probably noticed that this kind of code...

  • Moon • Art

    After almost two years (life and other projects happened), I finally plotted something new. I resurrected the Moon pr...

  • How to draw a Space Invader

    This is an interactive article. To fully experience it, you'll need to turn JavaScript on. I recently made the Space ...

  • CSS only counter component

    Before we start, here is a demo of the counter (you can also check it out on CodePen): 12345678910-+ This idea starte...

  • Origami jumping frog

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

  • Preserving text size when scaling SVGs

    SVGs support non-scaling strokes using the vector-effect attribute, which we can even use to draw non-scaling rectang...

  • Apply blur to iOS status bar in PWA

    On my current project, I'm making a Progressive Web App (PWA) and I was really annoyed that the status bar on iOS was...

  • CSS-only glitch effect

    Let me show you how I created a CSS-only image glitch effect. I was working on the robot poet and wanted my robotic b...

  • Make regular expressions easier to read

    This is a simple formatting trick I use to make regular expressions more readable. The secret? Break them into multip...

  • Image comparison slider in 6 lines of JavaScript

    While I was writing this post, I wanted to create an image comparison component. I made one with just a few lines of ...

  • Bunny jumps again

    I love 3D printing. It feels like magic - we are able to design and create physical things in a matter of hours, in o...

  • The Tiny Book of Great Joys

    If you are interested in how I over-engineered the process of making a tiny book for my wife, using AI, a pen plotter...

  • Change font-weight based on the user's screen DPI

    A lot of us as developers have hi-DPI screens, and we can easily forget to test the websites we build on low-DPI scre...

  • Blog Questions Challenge

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

  • Native dual-range input

    I just released @stanko/dual-range-input - a native dual-range input. Here is how it looks with the default styles: T...

  • CSS fix to prevent orphan icons dropping to a new line

    When an HTML element becomes too narrow, its content starts to wrap into multiple lines. This is intended behavior an...

  • Open source mac apps I love

    I want to share some really nice open-source applications I use on a daily basis. I did a similar post about six year...

  • Node.js script to run multiple commands in parallel

    If you encountered a case where you wanted to run multiple commands in parallel, the usual suggestion is to use the s...

  • HTML inert property and React fallback

    HTML inert is a relatively new property, but it is supported in all major browsers since April this year. When you se...

  • Moon Phases • Art

    It is incredibly hard to take a good photo of these. Colors have metallic reflection which I wasn’t able to capture, ...