Web Weekly #28

Welcome to Web Weekly #28!

γεια, friends!

A few people reached out to me this week to check if I'm okay with the flooding going on in Germany. Thank you, I am, and I really hope the same applies to you!

This week's highlight was that I started reading On writing well. Unsurprisingly, the book teaches how to write better non-fiction. I'm only a few chapters in, and I like it a lot. Get ready for it; my writing might become more concise soon!

Before we jump into web stuff, let me share a comic about the state of the web with you.

Blob screaming "Actually, follow me over there. It'll be easier for us to reach each other" pointing to Facebook.

This week's Web Weekly includes:

  • loops in JavaScript
  • the git worktree command
  • natural shadows in CSS

... and, as always, GitHub repositories, a new Tiny Helper and some music.

Ready? Steady. Go!

The various loops in JavaScript

Table of contents including the for loop, the for-in loop, Array.foreach and the for-of loop

There are four different loops in JavaScript – for-in, for-of, forEach and the oldschool for. If you wonder when to use what, Axel Rauchmayer covered all of them on his blog.

Learn more about JS loops

Are downloaded webp/avif images useless?

Another lifehack to help your users save pictures of kittens in a format convenient for them. If you use AVIF or WebP images on your site, it is a huge chance that no one will be able to save them on their computer or phone to view them later. More precisely, they can save the image, but they can’t view it. Very sad.

Nikita Dubko's post on image downloads points out that we're breaking user flows with new image formats. webp/avif are great for web performance, but when used, they ultimately break the browser's "Save image" functionality because the formats are usually not supported by today's operating systems. People can save images but then can't open them. Are we breaking some essential functionality by using the new formats?

Learn more about downloads

Passive-aggressive zoom backgrounds

Zoom background: I don't want to be here.

I probably won't use these passive-aggressive Zoom backgrounds, but they made me laugh out loud. 😆

Share your thoughts with your background

Start a brag document

Get your work recognized: write a brag document

Oldie but goldie: the teams at Contentful were discussing brag documents last week. The idea is simple: collect and write down all your accomplishments to shine when someone asks you "What have you been up to the last six months?". I recommend. 😉

Start your brag document

ISR, DPR, what the ...?

ISR vs DPR. Big Words, Quick explanation

The Jamstack is not only about pre-generated pages anymore. With new features coming from Vercel and Netlify, the line of what the Jamstack is becomes very blurry. Cassidy Williams explained the latest terms and features (Incremental Static Regeneration and Distributed Persistent Rendering) on Smashing Magazine.

Learn about ISR and DPR

Natural shadows in CSS

See the result in action. This shadow is done in pure CSS (sort of 🙈). Below is an color gradient cirlce with a shadow that reflects the gradient colors.

SVG filters are so powerful! I played around with a natural shadow effect that works only with CSS (sorta).

Add natural shadows

WebPageTest now provides Web Vitals

Web Vitals on WebPageTest showing "Largest Contentful paint", "Cumulative Layout Shift" and "Total Blocking Time"

Short'n'sweet: WebPageTest now allows you to monitor and check your Web Vitals scores. 🎉

Monitor Web Vitals from anywhere

TIL: How to access the Google cache from the URL bar

Example showing how prepending "cache:" to a URL leads to the Google cached version.

I learned that you can find out when the Google bot visited your site and what was indexed. If you have Google Search defined as your browser search engine, prepend cache: to the URL and receive information about the Google cache.

The git worktree command

YouTube cover showing `git-worktree`

If you're using git and have to switch branches regularly, you know the problem. You're right in the middle of changing a lot of files, there are many uncommitted changes, but you have to switch branches to check something.

What do you do now? Should you stash all the changes? Should you make a "WIP" commit? ThePrimeagen explains how git-worktree can help in these situations.

Start to use worktree

The beauty of web APIs on the server-side

Deno is trying not to be an API. It is trying to be the web API.

I haven't played with Deno yet, but I'm very intrigued to give it a try soon. Ryan Dahl (who's also the creator of Node.js) aims to create a JavaScript/TypeScript server-side runtime without Node.js' flaws. Deno seems to have come a long way, and Jim Nielsen shared his thoughts about how Deno adopts web APIs.

Learn more about Deno

Three valuable projects to have a look at

A new Tiny Helper

Slowfil.es

The files loaded in a website play an essential role in web performance. slowfil.es is a service that you can use for performance debugging. Add a JavaScript/CSS file to your site, configure how long it should load, and see how it affects the page performance.

Check Slowfil.es

Find more single-purpose online tools on tiny-helpers.dev

A quote to think about

I listened to the My First Million podcast, and Shaan Puri spent an entire episode sharing ways to spark more interesting conversations. He said this week's quote.

Ask a better question. Get a better answer.

A song that makes you stop coding

Music video screenshot: Two more years from Bloc Party

This week's song is an Indie classic: Bloc Party's "Two more years" just came on the radio, and I love this song so much!

Listen to "Two more years"

Thank you for reading!

And that's a wrap for the twenty-eighth Web Weekly! If you enjoy my newsletter, I'd love you to tell others about it. ♥️

If you're not a subscriber, you can change that! 😉

Stay safe, and I'll talk to you next week! 🎉 👋

PS. I heard the cool kids use RSS. You can find multiple feeds on my site.