Preview, Edit and Generate Meta Tags with MetaTags.io

Speaking of meta tags in the previous post, the Meta Tags tool has been sitting in my bookmarks for quite a while now: With Meta Tags you can edit and experiment with your content then preview how your webpage will look on Google, Facebook, Twitter and more! Drop in an image, type some text, and …

The serverless gambit: Building ChessMsgs.com on Cloud Run

Interesting read how Greg Wilson built ChessMsgs.com, a website that can track chess games played by sending links to eachother. Instead of tweeting moves back and forth, players tweet links back and forth, and those links go to a site that renders the current chessboard, allows a new move, and creates a new link to …

Ray – Dump Debugging Evolved

The folks over at Spatie have released a new tool called Ray that helps you with debugging. Ray is a beautiful, lightweight desktop app that helps you debug your app. After installing one of the libraries to send information to Ray, you can use the ray() function to quickly dump stuff. Any variable(s) that you …

Progressive Web Apps in 2021

The Progressive Web App term is now five years old, and it’s time to sit down and understand where we are at 2021 within the platform, what has changed during 2020 and what we are expecting for the upcoming months. It shouldn’t surprise you while reading that iOS is the bottleneck here … Progressive Web …

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

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