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! ❤️
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!
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!
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.
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:
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!
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.
: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...
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.
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.
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. 🎉
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.
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.
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. ❤️
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
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。