Web Weekly #185
Guten Tag! Guten Tag! 👋
Have you heard of Chrome's soft navigations? Do you parse the sec-fetch header to prevent CSRF? Or do you know that elements with overflow: hidden are still scrollable?
Turn on the Web Weekly tune and find some answers below. Enjoy!
Pablo listens to ROSALÍA - Berghain and says:
Rosalía's Berghain (& the LUX album) are real masterpieces. Berghain has passages in German, showing us in the key of Opera what Hildegard of Bingen was experiencing, who saw "the reflection of the living Light" as a vision of God. Rosalía's Berghain translates in German the religious visions as "The flame penetrates my brain Like a lead teddy bear". I absolutely recommend listening to this album, sung in German, French, Catalan, Italian, Ukrainian, Japanese and Spanish.
Do you want to share your favorite song with the Web Weekly community? Hit reply; there are six more songs left in the queue.
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
- Developing Taste → "Expose yourself to great work, this way you’ll learn how greatness looks and feels like."
- Why Am I Doing the Thinking for You? → "when you ask someone 'what do you think?' without sharing what you think, you’re not collaborating, but more like outsourcing?"
Soft navigations in Chrome
This is probably old news for all the performance experts, but I learned this week that Chrome has been experimenting with a new navigation type for a while: soft navigations.
The goal is to gather common web vitals across JS-navigations in single-page apps. I'm game!
Laws of UX
Just in case you want to be the person quoting UX laws in your next interface discussion, Raphael put together a nice guide with interactive examples.
setHTML is coming to Firefox
Firefox became the first browser shipping the new setHTML method. What's wrong with good old innerHTML? innerHTML and older ways to change the DOM were all open to XSS attacks.
setHTML finally tries to fix this!
Yet another way to center elements in CSS
Here's Juan sharing another way to center absolutely positioned elements in CSS.
I don't have anything else to say other than that centering things in CSS is a solved problem in 2026, don't you think?
Side note: and if this post isn't enough, here's another post explaining how margin: auto can help with absolutely positioned elements, too.
The wonderful weird web – aem1k
Martin is a fairly famous code golfer and man... every time I see his work I'm blown away.
What's code golfing? When you're code golfing, you're trying to use the fewest possible characters. This is hard and complicated in itself already, but Martin pushed this even further.
Do you see this ASCII globe there? 👆 This globe is the script that renders itself. Unbelievable!
Here are my favorites:
TIL - tabs and newlines are removed from URLs
Well, did you know that browsers remove newlines and tabs from link URLs? I definitely didn't!
sec-fetch as modern CSRF protection
Cross-Site Request Forgery (CSRF) is an attack in which an attacker tricks a user's browser into making an unintended request to a site where they might be logged in. If someone is on evil.com and the browser makes a POST request to my-bank.com, it could go through because all cookies are sent with it. Not good.
To protect yourself, many sites implement CSRF tokens to ensure that the user is really on the site when the request is made. But there's a header that we can use since 2023: sec-fetch.
Miguel shared this discovery in December and the MDN docs on CSRF are also quite good. Enjoy and be safe!
Does this demo still count as a select?
I shared that customizable selects are coming to the web in Web Weekly 183. They're still Chromium only, though.
Now, Temani pushed the concept to the next level and I'll let you decide if you would call this experience a select box.
Random MDN – :open
From the unlimited MDN knowledge archive...
Here's a little party trick: do you know that input elements with a picker like select or date inputs also support :open? You're welcome!
Side note: while looking at :open I discovered that Safari still doesn't support it? Not even for details elements? I'm a bit disappointed...
TIL recap – overflow: hidden is still scrollable
Do you know that elements with overflow: hidden set can still be scrolled? If you don't, check out the blog to learn which property prevents scrolling.
Find more short web development learnings in my "Today I learned" section.
New on the baseline: rcap, rch, rex and ric
Firefox started to support the relative <length> CSS values: rcap, rch, rex and ric.
Granted, these units are a bit niche, because how often do you need to style something based on the width of the glyph 0 (rch)? But it's still good to know they exist.
And cap isn't actually that exotic: here's how the cap unit can help with vertical alignment.
Classifieds & friends
If you're based in the Netherlands and would like to go to the JS Nation conference (June 11 & June 15), I've got one ticket to give away for free! Hit reply and let me know! And even if you don't win, Web Weekly readers get 10% off with the code WEBWEEKLY. 🎉
Three valuable projects to have a look at
- thisiskps/fetch-network-simulator – A request/response network behavior simulator for frontend applications.
- dlvhdr/diffnav – A git diff pager with a file tree, à la GitHub.
- edge-js/edge – Node.js template engine with a breath of fresh air.
A new Tiny Helper
CruxVis isn't a new tool, but I'm sure some of you haven't seen it.
If you want to check a site's Core Web Vitals coming from real users via Crux, the site offers quick-to-use graphs and visualizations.
Find more single-purpose online tools on tiny-helpers.dev.
Thought of the week
One might think Ibrahim has a point here. 🫣
When a customer reaches for your chatbot, it's not because they think chatbots are cool. It's because you've failed them.
Did you learn something from this issue?
If so, join 37 other Web Weekly supporters and earn a huge bag of karma points by supporting Web Weekly via 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! 👋
Join 6.5k+ developers and