Published at
Updated at
Reading time
The Web Weekly newsletter keeps you up to date, teaches you web development tricks and covers all things working in tech.

Guten Tag! Guten Tag! πŸ‘‹

Non-Webkit engines coming to iOS (sorta)! What are numeric font variants? And when would you use scrollbar-gutter?

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

Aaron Ladage listens to "Waxahatchee (ft. MJ Lenderman) - Right Back to It" and says:

"I love this twangy gem! Katie (from Waxahatchee) and MJ's voices intersect in such a hauntingly beautiful way. I could listen to it on repeat all day!"

Do you want to share your favorite song with the Web Weekly community? Hit reply, and I'll include it!

There's one major, major, major news this week! EU citizens will soon be able to use a non-Webkit browser engine on iOS. What? Yes! Yay for the open web. But there's a big but.

The Cupertino giant isn't happy about it. How could you tell? It shows in their announcements and press releases. Apple didn't want this. Using other engines is nothing but a security threat and will harm user experience. I feel the bitterness from the other side of the world, and they're not really holding back.

Why did they open up in the first place? They were forced to by law aka the EU's Digital Markets Act (DMA).

For now, other browser engines are EU-only. How would you test "another iOS browser" when you aren't based in the EU? I've yet to find an answer to this question.

And what happens to the website visitor if there's a EU-only web experience for Apple users? We all know the "Chrome-only" popups, but "EU-only" is new.

Here's Eric A. Meyer:

If Apple sticks to their declared intentions, web devs outside the EU won’t be able to test their sites/webapps/whatever against the non-WebKit iOS browsers that will exist in the EU. So, get ready for aggressive browser sniffing and β€œbest viewed in/please switch to” badges making a comeback, because those are easy responses to this. Not good responses, at all, but humans are nothing if not lazy.

There's so much buzz about this announcement; it's too much for a newsletter intro.

But it's clear that the "Heck yeah!!!" moment only lasted a minute because Apple didn't want this. And they won't make it easy...

Something that made me smile this week

This International Standard specifies a datastream and an associated file format, Portable Network Graphics (PNG, pronounced "ping"), for a lossless, portable, compressed individual computer graphics image transmitted across the Internet.

I'll refuse to follow the PNG spec here, but saying "This ping is pretty big; should we run it through TinyPing (aka tinypng)?" makes me chuckle.

Read the spec

What's requested and when?

Chrome DevTools showing a image request that changed fetch priority

The Chrome DevRels Jecelyn Yeen and Barry Pollard explained how to analyze the resource fetch priority. It's a good watch showing some DevTools tricks.

πŸ’‘ TIL: browsers sometimes change fetch priority while loading and parsing a page.

Debug fetch priority

Scroll animations eye candy

Links that expand their background on scroll.

Chris Coyier shared how you can create CSS-only link reveal eye-catchers with scroll-driven animations. Nice!

Spice up your links

And I can't wait for scroll-driven animations to land outside Chromium land. Look at this stunning demo! The web's getting shiny!

Text fade out techniques

Faded out text on a gradient background.

Kilian Valkhof shared multiple ways to fade out text. I really should consider using mask-image more often.πŸ˜…

Fade away

Numeric font variants

font-variant-numeric examples and how the affect rendering.

I was well aware of font-variant-numeric: tabular-nums, but Mandy Michael collected so many other font-variant-numeric facts that I had to get pen and paper to write down all these TILs.

Style the numbers

You're halfway through!

Wowza! Would you enjoy getting Web Weekly straight to your inbox?

The wonderful weird web – fixmyspeakers

Fix My Speakers πŸ”Š  Eject πŸ’¦ water from your phone's speakers after getting it wet.

I couldn't test it because I wasn't willing to sink my phone in the drain, but if playing specific frequencies would help with wet phones, that'd be cool!

Make some noise

What are your favorite internet corners? Send them my way, and I'll include them in Web Weekly!

A neat CSS overview

- Stable Upgrades: fix a hack or issue by replacing older techniques - Stable Enhancements: provide an improved experience with well-supported modern properties - Progressive Enhancements: provide an upgraded experience when these properties are supported without causing harm in unsupporting browsers

Nothing better than a decent one-liner. Stephanie Eckles shared 12 handy CSS enhancements. I love that scrollbar-gutter and overscroll-behavior made it into the list.

Add one line

On mastering HTML...

All this to say... HTML markup is a skill that is honed in the fires of experience that may be learned but never mastered, but it is an honorable and worthy battle.

And here's more from Stephanie: she also reminded us that writing good HTML is more than using headings or buttons.πŸ˜…

The article starts incredibly strong, and if you want to level up your HTML game, research the answers to all these questions. I will!

Research all these questions

How to find all these any types?

TS code that assigns the `any` type to a `TODO` type definition. `any` then becomes a TODO in the code base.

Kyle Shevlin shared that we should make them TODOs. Me likey!

Strengthen your types

An almost CSS-only slider

A slider that shows the current value in a tooltip.

To be fair, the slider above only works in Chrome Canary with experimental web platform features enables, and it includes four lines of JS. But it's still stunning work with wild CSS tricks. 🀯

Jhey explained how it's built on video.

Learn the cutting edge

Random MDN – :visited

Little white lies β€” To preserve users' privacy, Firefox and other browsers will lie to web applications under certain circumstances.

From the unlimited MDN knowledge archive...

Did you know that browsers lie to you when you want to use :visited in JavaScript or with advanced CSS? Now you do!

Respect privacy

TIL recap – Number.isNaN

Number.isNaN('foo'); // false Number.isNaN(12);    // false Number.isNaN({});    // false Number.isNaN(NaN);   // true πŸŽ‰

Here's something from the JavaScript curiosity camp. Do you know the difference between isNaN() and Number.isNaN()?

Detect NaN

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

New on the platform

.new-item::before {   /* "black star" and element content is read out */   content: "β˜…";      /* "Highlighted item" and element content is read out */   content: "β˜…" / "Highlighted item";      /* Generated content is ignored and only element content is read out */   content: "β˜…" / ""; }

Safari shipped alternative text for generated CSS content in its preview channels. Alternative text in CSS content? That's right! Learn more about it on the blog.

Make before and after accessible

Three valuable projects to have a look at

An old Tiny Helper

Shell Check – find bugs in your code

Just because I used it the other day β€” if you're not using ShellCheck for shell scripting, install it now. You'll learn a ton (and write better scripts).

Write good shell scripts

Find more single-purpose online tools on

Thought of the week

Here's some wisdom from Jens Oliver Meiert on HTML complexity.

HTML is the most underappreciated and least understood language of the Web, because most everyone is blinded by its simple syntax.

This is all, friends!

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

If you think there’s something that needs to be improved or something that you enjoyed, 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! πŸ‘‹

Was this post interesting?
Yes? Cool! You might want to check out the email version. The last edition went out 4 days ago.
Stefan standing in the park in front of a green background

About Stefan Judis

Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.

Related Topics

Related Articles