`dive` – A tool for exploring a Docker Image, Layer Contents, and discovering ways to shrink the size of your Docker/OCI Image

You can use dive to help you optimize your Docker image layers. Say you have these two layers in your Dockerfile: RUN wget http://xcal1.vodafone.co.uk/10MB.zip -P /tmp RUN rm /tmp/10MB.zip Then you’ll end up with 10MB of wasted space. dive will tell you, so that you can combine these into one optimized layer: RUN wget http://xcal1.vodafone.co.uk/10MB.zip …

The Art of Building Real-life Components

Ahmad Shadeed sweats the details to recreating the little component above, as found in Facebook’s Messenger. In this article, I will show you a component that looks simple from the first glance, but there is a ton of work behind it. As you can derive from the article’s length: the devil is in the details. …

Litepicker Date Range Picker

I like that the daterange needs to be entered in one single input, and that the rendered datepicker is used as a progressive enhancement on top. Installation per NPM: npm i litepicker At its core, usage is really simple: import Litepicker from ‘litepicker’; const picker = new Litepicker({ element: document.getElementById(‘litepicker’) }); Highly configurable too! Litepicker …

Kali Linux + Mr. Robot ARG Society

Throughout the (excellent!) television show Mr. Robot the Kali Linux distribution is used. Turns out the makers were also involved in the “Alternative Reality Game” that lived outside the show. To solve the Post-Season 4 ARG, a key part was to be extracted from one of their repos: The idea was, we would do a …

Monochrome Image Dithering Explained

Surma digging into the oldskool dithering technique: I always loved the visual aesthetic of dithering but never knew how it’s done. So I did some research. This article may contain traces of nostaliga and none of Lena. Turns out there’s quite a lot to it 😅 Ditherpunk — The article I wish I had about …

My stack will outlive yours

Steren (who happens to be PM for the wonderful Cloud Run): My stack requires no maintenance, has perfect Lighthouse scores, will never have any security vulnerability, is based on open standards, is portable, has an instant dev loop, has no build step and… will outlive any other stack. It’s not LAMP, WordPress, Rails, MEAN, Jamstack… …

Options for styling Web Components

Nolan Lawson, author of emoji-picker-element, a web component you can use to provide an emoji-picker: What wasn’t obvious to me, though, was how to allow users to style it. What if they wanted a different background color? What if they wanted the emoji to be bigger? What if they wanted a different font for the …

How we built the GitHub globe

The GitHub homepage features a very nice rotating 3D globe, augmented with realtime data shooting around. Here’s how they built it: At the most fundamental level, the globe runs in a WebGL context powered by three.js. We feed it data of recent pull requests that have been created and merged around the world through a …