Web Weekly #121
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.
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...
Learn Modern UI Engineering with Web Components and Web Standards
Join veteran UI architect, Rob Eisenberg, as he explores UI Engineering through the application of a broad range of modern Web Standards. With Web Components as its anchor, this course covers dozens of topics that professional UI engineers and designers can use on a daily basis. Across 13 modules with over 170 videos, you'll leverage a custom, interactive learning environment to dive deep, starting from DOM APIs and Web Components to modern CSS, Accessibility, Forms, Design Systems, Applications, Tools and more.
Use code WEBWEEKLY for 10% off today!
Coupon expires 3/15/2024.
Something that made me smile this week
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.
Quick links
- My newsletter provider, Buttondown (π), was so kind to interview me on how I run Web Weekly.
- PaweΕ Grzybek explained what's cool about
Promise.withResolvers(). - Mozilla listed technical issues in major software platforms that disadvantage Firefox.
What's requested and when?
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.
Scroll animations eye candy
Chris Coyier shared how you can create CSS-only link reveal eye-catchers with scroll-driven animations. Nice!
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
Kilian Valkhof shared multiple ways to fade out text. I really should consider using mask-image more often.π
Numeric font variants
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.
The wonderful weird web β fixmyspeakers
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!
What are your favorite internet corners? Send them my way, and I'll include them in Web Weekly!
A neat CSS overview
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.
On mastering HTML...
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!
How to find all these any types?
Kyle Shevlin shared that we should make them TODOs. Me likey!
An almost CSS-only slider
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.
Random MDN β :visited
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!
TIL recap β Number.isNaN
Here's something from the JavaScript curiosity camp. Do you know the difference between isNaN() and Number.isNaN()?
Find more short web development learnings in my "Today I learned" section.
New on the platform
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
- anfragment/zen β Simple, free and efficient ad-blocker and privacy guard.
- hexagoncircle/click-spark β A web component to add a little spark to your clicks.
- daviddarnes/play-button β A Web Component to play audio or video with a button.
An old Tiny Helper
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).
Find more single-purpose online tools on tiny-helpers.dev.
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! π