Skip to main content

Web Weekly #184

Guten Tag! Guten Tag! πŸ‘‹

Have you ever struggled with lazy loading videos? Or have you used CSS zoom before? And do you know what Map.getOrInsertComputed does?

Turn on the Web Weekly tune and find some answers below. Enjoy!

AndrΓ© listens to "Ordinary" by Alex Warren and says:

This is genuinely one of the most beautiful songs I've ever listened to. It landed instantly on my short-list playlist of personal 'masterpieces' β€” the kind of songs that feel timeless to me, alongside classics like 'The Sound of Silence'. It's emotionally honest, restrained, and quietly powerful in a way that really stays with you.

Do you want to share your favorite song with the Web Weekly community? Hit reply; there are seven more songs left in the queue.

This Web Weekly turned out very beefy already, so I'll keep the intro short. I discovered modern.css and it's outstanding.

Stop writing CSS like it's 2015

The site lists old practices next to their modern counterparts. I'm sure you'll learn some new tricks by simply browsing around. Highly recommended!

If you enjoy Web Weekly, share it with your friends and family.

A quick "repost" really helps this indie newsletter out. Thank you! ❀️

No code

New on the blog

Web Weekly Housekeeping

Since I doxed my inbox two weeks ago asking for more replies, I've been having many nice email conversations. And because I enjoy this, let's keep the housekeeping going for a bit longer.

Question this week: many people told me that Web Weekly is a bit too long at times. I can totally relate to this. And frankly, writing Web Weekly is a ton of work.

So, what would you cut? I'm torn because I actually like it as is. Reply and let me know!

Oh and a quick reminder: Web Weekly is open for sponsorships. If you want to reach 6.5k developers, you know what to do!

An in-depth guide to customizing list styles

@counter-style --fleurons { system: cyclic; symbols: ❦ ✾ ✀ ❈ ✺ β₯; suffix: ""; speak-as: bullets; }

If you want to spice up your list styling going beyond some bullets or numbers, Richard dropped a massive article explaining ::marker, @counter-style and symbols(). My highlight: I had forgotten that list-style-position is a thing...

List with style

TIL β€” CSS zoom

Example showing how `zoom` affects a component's layout.

I've seen the zoom property before but I didn't realize that it can actually be pretty dang useful. If you want to learn more about the difference between zoom and scale, check out this demo on the blog.

Zoom!

The web breaks free from rectangles

Example showing elements that don't have a rectangular outline when being focused.

If you had told me that one day I'd be excited about a property called border-shape, I wouldn't have believed you. And yet, here we are. Una shared the new CSS property coming to Chrome that allows you to actually "shape" elements.

Unlike clip-path, which simply masks an element, border-shape actually redefines the "box" itself. When you apply a shape to a border, the background, the border-image, focus outline, and the box-shadow all follow that new geometry.

Shape the web

Safer JS error checking

const iframe = document.createElement('iframe'); document.body.appendChild(iframe); const err = new iframe.contentWindow.Error('Oops!'); err instanceof Error; // false

Short and sweet: Matt explains why Error.isError is the way to go for error checking.

Check the error

The wonderful weird web – Kaomoji Cool Club

An emoji consisting of parentheses and other Unicode characters

Did you know that these "emojis" are called Kaomoji? "Kaomoji" is a mix of the Japanese words "kao" ι‘” (face) and "moji" ζ–‡ε­—(character). Today I learned. And if you want to snatch some of the funky faces to look cool, that's what the Kaomoji Cool Club is about!

Express yourself with Unicode

Lazy loaded videos are coming to the web

<video loading="lazy" autoplay playsinline muted controls src="path/to/sloth.webm" poster="path/to/sloth.jpg"></video>

Scott and his team at Squarespace are working on bringing loading="lazy" to video and audio elements, and it's wild that we didn't have this in 2026, isn't it?

Defer the heavy load

Side note: Scott was also behind pushing browser vendors to add responsive video support, and I honestly think that his "little side projects" are very inspiring.

Are image sprites still a thing?

Visualization of a CSS sprite showing all the different frames.

Josh got into the topic of image sprites which, I must admit, I haven't used in at least a decade. But because Josh's posts are always so much fun to read and he explains object-fit, object-position and the animation step() function, it's definitely worth a read!

Remember sprites

Yet another list of web dev stuff

Can we β€” A collection of websites focused on browser usage and features.

You probably know about caniuse.com. But do you know about caniemail.com? Or canidev.tools, whocanuse.com and cssdb.org?

I love a good list, and canwe.dev lists all these utility webdev sites.

Get some resources

New in Chrome DevTools β€” Render blocking

Chrome DevTools with a highlighted "Render Blocking" column

If you care about web performance, you probably check for render-blocking resources. Chrome supports a handy JS API to discover all these offenders.

And there's now a new column in the network panel giving you this information.

Random MDN – text-box-trim

Demo of text-box-trim showing how the bounding box of text can be controlled.

From the unlimited MDN knowledge archive...

Unfortunately, text-box-trim doesn't work in Firefox yet, but man, I can't wait for this to work everywhere because it will make vertical alignment so much easier!

Align

TIL recap – text-transform can affect screen readers

VoiceOver pronouncing an "add" button with text-transform uppercase as ADD (each letter spelled out).

Did you know that text-transform: uppercase can affect how screen readers read out the content? Well, now you do!

Be aware

Find more short web development learnings in my "Today I learned" section.

New on the baseline β€” new map methods

const map = new Map(\[\["bar", "foo"\]\]); const defaultCreator = (key) => `default for ${key}`; console.log(map.getOrInsertComputed("baz", defaultCreator)); // Expected output: "default for baz"

JavaScript maps got two new methods to access entries while providing fallback values: getOrInsert and getOrInsertComputed. The method names are a bit too wordy for my taste, but I dig that getOrInsertComputed allows you to evaluate the fallback lazily.

Three valuable projects to have a look at

  • auroris/logo-soup – A JS library to normalize and harmonize logo visuals.
  • seflless/slowmo – Slow down, pause, or speed up time of any web content.
  • Veirt/weathr – A terminal weather app with ASCII animation.

A new Tiny Helper

SVG Studio Logo.svg

If you're looking for a quick way to update and tweak SVG files in code, svg.studio will help you out!

Tweak all the SVGs

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

Thought of the week

Nolan shared his thoughts on how AI might be changing programming, and of course, I can relate. I love coding. I love the puzzling part and am excited about learning things. But will all these things still matter? We'll find out soon enough.

My immediate fear isn't that I'll be out of a job. My fear is that I'll lose the part of my job that I love the most.

Did you learn something from this issue?

❀️ If so, join 37 other Web Weekly supporters and give back with a small monthly donation on Patreon or GitHub Sponsors.

This is all, friends!

Loved this email? Hated this email? I want to hear about it!

If you think something needs improvement or something sparked some joy, reply to this email because I want to know more!

And with that, take care of yourself - mentally, physically, and emotionally.

I'll see you next week! πŸ‘‹