Monthly Digest December 2020 (#blogPost)

Happy new year! 🍾 We made it into 2021! I hope you all had fantastic holidays, are safe and sound, and had time to rest. From my end, I got a lovely new comic character for Christmas and decided to change the format of this newsletter. The structure ... more

A picture element to load correctly resized webp images in HTML (#snippet)

tl;dr – I have trouble remembering (and finding) the complete HTML snippet to load responsive webp images. You (and future me) find the snippet below. Loading images in the best sizes and formats was always complicated. With the Avif image format around ... more

How to refresh a page in an interval (without JavaScript) (#tilPost)

Today I saw a tweet by the FrontEnd Dude, and it was a real gem. How often did you build a page that had to refresh itself after a given amount of time? Yeah, okay... maybe not that often, but I went for a JavaScript solution when I did. It turns out ... more

iTerm2 offers a way to notify you when a long-running command has finished (#tilPost)

We all know the problem; sometimes, you have to run a terminal command, and it takes ages. In the meantime, you start browsing YouTube or Twitter and completely forget about the thing you wanted to do. Thirty minutes later, you find out that your command ... more

slowfil.es – a service for slow assets with high priority (#note)

I finished watching Tim Kadlec's Jamstack conf talk "Oh The Scripts We'll Load". Tim dives into the nitty-gritty details of script loading and how JavaScript affects performance. He covers the script element's async and defer attribute, goes ... more

addEventListener accepts functions and (!) objects (#tilPost)

To build interactive web interfaces, you have to use DOM (Document Object Model) events. How does that usually work? You define the event type you're interested in, pair it with a callback function and you are ready to react to clicks, keypresses, scrolls ... more

How to display the last build date in Eleventy (#snippet)

I came across a nifty eleventy trick shared by Hugo Giraudel. They shared that it only takes a few lines of JavaScript to display the time when an eleventy site was generated and rendered. If you look in the footer of this site, you'll see when it was ... more

How to make textareas grow automatically with a little bit of CSS and one line of JavaScript (#note)

This post is a quick one for the bookmarks: Chris Coyier shared a smart way to automatically grow textareas when user content expands across the defined textarea size. See the Pen Easiest Autogrowing Textarea by Chris Coyier (@chriscoyier) on CodePen. ... more

Actions against "Full Stack Anxiety" (#note)

I just watched the talk "Full Stack Anxiety" by Joel Califa. Joel, at the time, was design lead ad Digital Ocean and he's a designer who also writes code. With that skill set, he is confronted with an unlimited number of things that he could ... more

Monthly Digest October 2020 (#blogPost)

Hello everybody, Oh well... 2020 keeps being a challenging year, and I really hope you are all safe and sound! Let me share my favorite content in October. Let's build today-i-learned.dev ! Section titled Let's build `today-i-learned.dev`! In a pure ... more

Thoughts on the over-engineering of everyday tools and apps (#note)

I read the post The world smallest office suite by Serge Zaitsev. It made me think about my workflows and the tools I use every day. I don't know about you, but I struggle to settle on tools and apps. I'm continually looking for apps to integrate the ... more

Say goodbye to resource-caching across sites and domains (#note)

When I started doing web development, we all loaded jQuery from the official global jQuery CDN. The idea was straightforward: if everybody loads the same jQuery script file ( cdn.jquery.com/jquery.latest.js – or whatever URL it was back then), then the ... more

JavaScript tools that aren't built with JavaScript (#note)

Axel Rauschmayer wrote a quick post listing tools for the JavaScript ecosystem that aren't written in JavaScript (Rust and go are the popular languages these days). That's one for the bookmarks! For me, the main reason for changing tools can only be ... more

Monthly Digest September 2020 (#blogPost)

Hello everybody, I hope you all had a healthy and relaxed September. I spent half of September living in a cabin, surrounded only by the wind and the north sea, it was beautiful! If calm holidays are your thing, I can only recommend checking out Denmark. ... more

How to create a diff of npm package releases on the command line (#snippet)

Today I came across Julian Gruber's package npm-diff, which solves a problem that I regularly have. You probably know the situation: you update one dependency in your Node.js project, and everything breaks. Even though this update was supposed to be ... more

How to preload responsive images with imagesizes and imagesrcset (#tilPost)

Today I read Addy Osmani's article Preload late-discovered Hero images faster. It's a good summary of ways to preload resources if you want to adjust and improve the browser's loading behavior. The cool thing about this article; I discovered a recently ... more

Bash scripting pitfalls and solutions – how to do (safe) things in bash (#note)

If you ever tried to write a good-looking but also well functioning and safe shell script, you know that this is not a trivial task. Unfortunately, most of the shells out there (and bash is no exception) make it hard to do things the right way. Or rephrased ... more

Monthly Digest August 2020 (#blogPost)

Hello friends! I'm about to wrap up the week for a two-week vacation, and I can't wait to hang out in a cabin in Denmark. Apart from that, I finally made it to finish my website rebuild with Eleventy. And I'm so happy about it. I tweeted some details ... more

The navigation timing API includes the type of the current navigation (#tilPost)

Paul Calvano wrote an excellent article diving into back/forward caches in which he goes into RUM metrics gathered with mPulse. I learned that it is possible to access user navigation behavior info in JavaScript. You can see if your users navigated, ... more

Monthly Digest July 2020 (#blogPost)

Hello everybody, this month was hectic because I was heads-down recording a GraphQL video course for Contentful. Luckily this is now done, and I'm ready to catch up writing and I am already excited about August! Let's jump into my favorite content of ... more

npm init uses npx under the hood (#tilPost)

Today I read Tierney Cyren's article 11 Simple npm Tricks That Will Knock Your Wombat Socks Off. The article includes a bunch of npm magic, but one included idea made me stop. Tierney creates GitHub repositories while calling npm init using an npm init ... more

Monthly Digest May/June 2020 (#blogPost)

Hello everybody, I skipped sending the last newsletter because I spent my time reading things more important than web development. I hope you're all safe and sound! This newsletter includes my favorite content in May and June. Enjoy! Are we doing it ... more

TIL: Prevent npm install for not supported Node.js versions

Using local npm configuration you can prevent users from installing your module/project with an unsupported Node.js version ... more

Monthly Digest March 2020 (#blogPost)

Hello everybody, I hope you and your loved ones are all safe, and you handle staying at home okay. It's scary and challenging times; I wish you all the best. To not worry all day, I try to keep myself very busy, and I check the latest news and numbers ... more

Is the module/nomodule bridge worth it? (#note)

The support for ES modules <script type="module"></script> is quite good these days. Browsers that support them are also able to deal with modern JavaScript (arrow functions, let/const, ...). That's cool, because you can include ... more

TIL: npm install supports local modules

The npm installation command allows to quickly install locally available modules ... more

npm install supports local packages and dependencies (#tilPost)

Today, I read the article Making it Easier to Work With Local npm Packages written by Aaron Parrel. He describes that you can specify local packages and modules right in your package.json . { "dependencies": { "durable-functions": ... more

Monthly Digest February 2020 (#blogPost)

Hello everybody! I hope you're all well in this bizarre world full of viruses. This month was surprisingly busy, and I have some personal news to share next month. For now, though, I'll have to keep it quiet. 🙈 (I'm super excited) So, let me share some ... more

How to quickly fail bash scripts using set (#tilPost)

Last week I published an npm package called create-phone-number-forwarding. It wraps a shell script that uses the Twilio CLI. If you run the script, it buys a Twilio phone number and sets everything up to forward incoming SMS/calls to another number. ... more

requestSubmit offers a way to validate a form before submit (#tilPost)

HTML form elements are the foundation for the interactions in web pages. And they improved quite a little bit over the last years. Today, developers can use different types ( number , tel , color , ...) and set different input modes ( text , decimal ... more