Web Weekly #146
- Published at
- Updated at
- Reading time
- 9min
Are you aware that the ::details-content pseudo-element is coming to the web? Or have you used the Picture in Picture API already? And do you know that emojis have different meanings in the world?
Turn on the Web Weekly tune and find all the answers below. Enjoy!
Carlos listens to "Yann Tiersen -- Bagatelle (feat. Dominique A) -- L'Absente":
I hadn't heard it for a long time and had forgotten how wonderful and emotional it is, almost like a sung poem.
Do you want to share your favorite song with the Web Weekly community? Hit reply; there is only one more song left in the queue.
This week, I stumbled upon Antoine's portfolio site (disclaimer: there's a lot of motion), and wow! What. A. Beauty!
I'd love to discover more #badass developer portfolios. If you can think of one, please send it my way. Maybe we can collect and share a few next week!
Use at your own risk: these emojis' passive-aggressiveness reached a new level.
Kudos to Phil, who shared this gem on Bluesky.
- The Anchoreum teaches you the new anchor positioning CSS spec (Chromium only).
- The new Web Almanac is out!
- The State of JS survey is open.
I use Git's bisect command only once a year, but it's always magical if I do. If you discover a new bug or a regression, you can use the command to perform a binary search over a commit range. Git will then ask you if the commit is good or bad, and you'll find the faulty commit in no time!
Have you used the Picture-in-Picture API already? It's a fairly new API supported in Chromium and Webkit that allows you to pop out floating windows while staying on top of the other windows. It's a perfect web addition for video calls and streaming sites. And it almost screams for wildly creative demos โ have you seen any?
Josh published a new guide on container queries, and while it starts slow, the section on CSS containment is just great.
Learn more about container queries
If you want to learn even more, Roma is on a daily blogging journey and has collected more container query articles.
Thanks to Ahmad, I now understand when you would use overflow: clip (I think). If you haven't used this overflow value yet, this article is well worth your time!
Wowza! Would you enjoy getting Web Weekly straight to your inbox?
Can you see it? There? Right in the middle?
Yeah, that's a screenshot of my blog listed on onemillionscreenshots. The site lists, you guessed it, one million screenshots and tries to group all the sites.
It's, of course, a bit of promo for the underlying screenshot API, but I still love poking around the web this way.
Kevin shared cutting-edge CSS features to animate details elements using interpolate-size (Chromium-only), ::details-content (shipped in last Chrome), and transition-behavior: allow-discrete (supported in modern browsers).
And you might now say, "Hold on, Stefan! I can't use all this yet!" And that might be correct, but I agree with Kevin's take. All the practices shown in the video can be treated as progressive enhancement, and if a details element isn't animating, I don't think it's a big deal.
Our friends at the BBC went on a mystery treasure hunt for a bug that only appeared on their site when it was on a second monitor.
The reason was a not well-known fact of a mouse event's screenX property.
In a multiscreen environment, screens aligned horizontally will be treated as a single device, and so the range of the screenX value will increase to the combined width of the screens.
Well... today I learned!
If you're curious about how they fixed this behavior at the BBC, Josh also posted a follow-up explaining how they resolved this mystical discovery!
Adam and Bramus from the Chrome DevRels have been busy producing high-quality video materials. I haven't had the time to watch them entirely, but knowing both of them, I'm sure the videos are chefkiss.
- Modern CSS for sites: View transitions, scroll effects, and more!
- Master the art of scroll-driven animations!
Eric described the different kinds of focus, and it was a great lesson on using tabindex correctly.
Do you know that the โ๏ธ sign doesn't stand for victory or peace globally? In Australia, it's the counterpart to giving someone the middle finger. Super fascinating!
Eric lists some "icon fun facts".
On that note, if you wonder why the "increasing chart" emoji comes with a red line, you can read more about it on the blog.
From the unlimited MDN knowledge archive...
I love some good old Unicode nerdery. JavaScript code points are UTF-16 encoded. Some characters, like Emojis, have such a high code point number that they're represented with two code points (so-called surrogate pairs).
// 'a' fits into a single code point
'a'.length; // 1
// the emoji is represented by two code points
'๐ซฃ'.length; // 2
Things become tricky when you manipulate or split these pairs, and you end up having lone surrogates in your strings. Some methods like encodeURI will throw and reject your malformed strings.
// if you only access the first code point
// you're dealing with a lone surrogate
const someString = '๐ซฃ'[0]; // "\ud83d"
encodeURI(someString); // throws Uncaught URIError: malformed URI sequence
New Javascript methods can help out here.
const someString = '๐ซฃ'[0]; // "\ud83d"
someString.isWellFormed(); // false
someString.toWellFormed(); // "๏ฟฝ"
encodeURI(someString.toWellFormed()); // "%EF%BF%BD"
toWellFormed takes these lone surrogates and replaces them with the Unicode replacement character "๏ฟฝ". Good to know!
I learned that fetch supports a keepalive option so that you can use it as a flexible sendBeacon replacement. And the best thing is that it'll enter the baseline soon!
Find more short web development learnings in my "Today I learned" section.
Preparing for your next job interview is stressful and intimidating. The GreatFrontEnd prepares you to shine, and they're currently running a Black Friday sale that is 30% off. Check it out!
- cloudcannon/pagefind โ Static low-bandwidth search.
- lucahammer/tweetXer โ Delete all your Tweets for free.
- tBaxter/questions-for-employers โ A big collection of useful questions for potential employers.
We all know that running npm install pulls in millions of lines of code. Yet, I like looking at a project's dependencies. pkg-graph is another one of these package visualizers, and I love that you can control the dependency depth. This way, you can inspect the direct dependencies.
Find more single-purpose online tools on tiny-helpers.dev.
Manuel, who runs People & Blogs, shared this little gem in a post about social media. And it's so true!
Web Weekly is a small newsletter, and I kid you not; every reply or tiny gesture makes my day. And even though I might still owe some of you an answer (sorry, Carlos ๐ ), every message feels like a genuine connection to me.
I couldn't imagine how it would be if I'd received hundreds of emails after sending out Web Weekly. ๐ซฃ
Human connections can only happen at a small scale and low speed.
๐ If so, join 16 other Web Weekly readers and give back with a small monthly donation on Patreon or GitHub Sponsors.
A huge thanks goes to George for sponsoring Web Weekly on a generous tier for an entire year. Thank you buddy!
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 5.5k readers and learn something new every week with Web Weekly.
Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.