State of JS 2020

Following up on last year’s 2019 edition the results for the State of JS are in. 23,765 people answered the survey resulting in an overview of what’s hot and not for JavaScript and its ecosystem.

It’s great to see that language features like Destructuring, Nullish Coalescing and Optional Chaining seem to be common nowadays. However, just like last year, do take this all with a grain of salt though as 43% of the participants consider them to be experts in … CSS 🤨

State of JS 2020 →

☝️ For CSS a likewise survey was done: the State of CSS 2020

Update 2020-01-14: If you’re thinking the survey is too biased towards white male Americans, be sure to read State of JS 2020: Common Criticisms by author Sacha Greif.

Optimal Overlay Finder For Readable Text on a Background Image

A trick you can use to make text better stand out against a background image, is to use a color overlay with a certain opacity on top of the image. This tool by Yaphi calculates the ideal opacity to use, so that the contrast meets the WCAG standards.

`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 -P /tmp && rm /tmp/10MB.zip

You can also integrate it as a build step in your CI/CD pipeline, and make it break the build in case you don’t meet a certain quotum.

Installation per Homebrew:

brew install dive

dive →

🔗 Related: In How to build smaller Docker images you can find some practical tips to keep your docker image size under control.

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. You can get to a basic result really quickly, but most of your time will go to making it resilient, supporting RTL, implementing all variants, supporting Dark Mode, …

The Art of Building Real-life Components →

DALL·E: Creating Images from Text

DALL·E is a 12-billion parameter version of GPT-3 trained to generate images from text descriptions, using a dataset of text–image pairs. We’ve found that it has a diverse set of capabilities, including creating anthropomorphized versions of animals and objects, combining unrelated concepts in plausible ways, rendering text, and applying transformations to existing images.

If you give DALL·E the task to generate images with “an armchair in the shape of an avocado”, you get this:

And to say I was questioning the power of computers earlier today 😅

DALL·E: Creating Images from Text →

🤓 Clever name too: Dali + WALL·E = DALL·E

10 Next.js Tips You Might Not Know!

Next.js can do a lot for you — which means there’s features you probably haven’t used! This video covers ten tips you might not know about Next.js.

Litepicker Date Range Picker

I like that the daterange needs to be entered in one single input, and that Litepicker 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 — Date range picker – lightweight, no dependencies →

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 commit to the Kali Git repository that would include a number of items, but also have a surprise. The commit we made was the initial commit of the “Legacy Wallpapers” where we took the old Kali and BackTrack wallpapers and made them available to everyone. However, embedded in one of the images was a steganographic message which was a private SSH key. This is the same background image that was used throughout the show’s filming.

With a password, the SSH key could be extracted from that image. Then with that, players of the ARG could use it to connect to a “final target”.

Ha, just brilliant!

Kali Linux + Mr. Robot ARG Society →
Post-Season 4 ARG Solution →

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 monochrome image dithering →
Ditherpunk Demo Page →