Stefan Judis

Sharing web dev tricks with 6k people at webweekly.email

Today I learned Blogger

Maintaining tiny-helpers.dev

Pronouns: he/him

Newsletter: https://webweekly.email
Blog: https://www.stefanjudis.com
GitHub: https://github.com/stefanjudis
Twitter: https://twitter.com/stefanjudis

Public Key

npub19xz5yz4h93m39spmsry5q0hhskwymy5j6ajw9l77txa7npxklnmqj4pzaf

NIP-05 Address

stefan_at_front-end.social@momostr.pink

Profile Code

nprofile1qqsznp2zp2mjcacjcqacpj2q8mmct8zdj2fdwe8zll09nwlfsnt0easpz3mhxue69uhhyetvv9ujuerpd46hxtnfduqs6amnwvaz7tmwdaejumr0dsnzu7kt

Publishing to

saltivka.org

relay.damus.io

nos.lol

Author Public Key

npub19xz5yz4h93m39spmsry5q0hhskwymy5j6ajw9l77txa7npxklnmqj4pzaf

Show more details

Last Notes

2026-10-13 14:09:16 UTC

Here's a funky learning from a couple of years ago: do you know that there's a `CSS` namespace in JavaScript that includes a method to `escape` CSS selectors?
https://www.stefanjudis.com/today-i-learned/how-to-escape-css-selectors-in-javascript/
https://cdn.masto.host/frontendsocial/media_attachments/files/117/433/994/828/862/775/original/fe79be3dd6519f42.png

2026-10-12 10:44:29 UTC

I have mixed feelings about this CSS-only approach to custom elements. But the way slots are used here is very smart!
https://dev.to/stuffbreaker/css-only-custom-elements-go6
https://cdn.masto.host/frontendsocial/media_attachments/files/117/427/527/244/631/446/original/e5e4a58e2c9e2b23.png

2026-10-07 09:03:25 UTC

Here's the best website you'll open today.
You're welcome! 🫣
https://destroy.spritefusion.com/
https://cdn.masto.host/frontendsocial/media_attachments/files/117/398/818/121/605/429/original/a384626110b7072d.mp4

2026-09-14 14:10:21 UTC

Quick reminder, if you're working on a SaaS product that requires a login, please check if you've defined the well-known URL to change passwords. Password managers will check `/.well-known/change-password` to offer a quick way to change passwords.
https://www.w3.org/TR/change-password-url/
https://cdn.masto.host/frontendsocial/media_attachments/files/117/269/792/109/128/819/original/c3d033a379872e77.png

2026-09-14 10:44:09 UTC

With Firefox 155, released September 1st, the `progress()` CSS function became Baseline newly available. 🎉
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/progress
https://cdn.masto.host/frontendsocial/media_attachments/files/117/268/981/294/779/586/original/36e5f69fad9779ef.png

2026-09-11 14:10:38 UTC

Have you seen all these new HTML elements entering the platform? There's `<geolocation>`, `<usermedia>`, and `<install>`, just to name a few. Granted, many of these are Chromium-only, but I like where we're heading.
https://blog.master.dev/new-things-you-should-know-about-html-here-in-mid-2026/
https://cdn.masto.host/frontendsocial/media_attachments/files/117/252/806/274/621/122/original/5360cfec7e31760f.png

2026-09-10 10:44:30 UTC

The CSS working group came up with a new way to select prefixed classes. The Class Prefix Selector `.btn-*` matches `btn-primary`, `btn-secondary`, and whatever `btn-` class comes next.
https://www.bram.us/2026/08/20/the-future-of-css-target-multiple-classes-with-the-class-prefix-selector/
https://cdn.masto.host/frontendsocial/media_attachments/files/117/246/333/387/945/188/original/7d038e79cfacc380.png

2026-08-20 10:45:13 UTC

I'd say I was pretty aware of all the possibilities and information my browser shares about me, but it's still wild to see all this data in black and white. :/
https://kuber.studio/cookie/
https://cdn.masto.host/frontendsocial/media_attachments/files/117/127/427/690/682/431/original/dcc11593be6208ab.png

2026-08-07 14:22:43 UTC

Chrome 150 shipped the new text-fit property. There are no real MDN docs, and the spec would be the best we've got if it weren't for Krijn, who documented all the options with visual examples.
https://krijnhoetmer.nl/log/2026/07/playing-with-text-fit
https://cdn.masto.host/frontendsocial/media_attachments/files/117/054/672/924/405/013/original/34f38c9b117b0e20.png

2026-08-06 10:44:51 UTC

The "Await dictionary of Promises" ECMAScript proposal moved to stage three so that we'll finally be able to await objects. Can't wait!
https://github.com/tc39/proposal-await-dictionary
https://cdn.masto.host/frontendsocial/media_attachments/files/117/048/153/891/877/747/original/455965fb0d956e3f.png

2026-07-17 10:44:45 UTC

If you're dealing with SVG icons you probably know the pain of overwriting colors. There's a new spec in the making that allows controlling CSS variables from "the outside". And it's shipping in Firefox already!
https://drafts.csswg.org/css-link-params-1/
https://cdn.masto.host/frontendsocial/media_attachments/files/116/934/907/274/881/033/original/9949a4f01e532934.png

2026-06-26 14:09:08 UTC

TIL recap: Did you know that container size queries can detect landscape and portrait ratios?
https://www.stefanjudis.com/today-i-learned/size-container-queries-can-detect-landscape-portrait-orientation/
https://cdn.masto.host/frontendsocial/media_attachments/files/116/816/802/472/991/847/original/dff3c57850da64ca.png

2026-06-26 10:44:37 UTC

I know many of my followers aren't big AI fans. Still, the new MDN MCP server is super handy for pulling up docs and browser support data.
https://developer.mozilla.org/en-US/blog/introducing-mdn-mcp-server/
https://cdn.masto.host/frontendsocial/media_attachments/files/116/815/998/305/844/130/original/9d97a2821ac5bbb7.png

2026-06-23 14:08:49 UTC

Our friends at WebKit released a new cheatsheet for `display: grid-lanes` (Safari-only so far) with a built-in configurator and lots of examples. It has strong CSSTricks vibes from back in the day!
https://gridlanes.webkit.org/
https://cdn.masto.host/frontendsocial/media_attachments/files/116/799/814/264/038/329/original/616ecbbe198dd564.png

2026-06-03 08:11:14 UTC

The State of CSS survey is currently open: Go take the State of CSS 2026 survey if you have a minute!
https://survey.devographics.com/survey/state-of-css/2026
I just finished it, and it took around 10 minutes. It's an important data point for spec makers and browser vendors, so let's get this all done. :D

2026-06-02 14:10:05 UTC

Luckily I haven't dealt with date handling for a while. If you need to, you're probably excited about `Temporal`, which goes stable in Node.js. Luciano's write-up on Node.js 26 is excellent. I didn't know that `Temporal` clamps dates!
https://nodejsdesignpatterns.com/blog/whats-new-in-nodejs-26/
https://cdn.masto.host/frontendsocial/media_attachments/files/116/680/910/738/023/319/original/7b1f5215418f5dfe.png

2026-05-14 11:23:31 UTC

That's funny.
If you're a Firefox user, you'll soon be able to mute tabs playing audio right from the URL bar by typing "shush" or "sssh" (or good old "mute").
Landing in FF 152.
https://cdn.masto.host/frontendsocial/media_attachments/files/116/572/671/677/649/063/original/78a68c59e894115a.mp4

2026-04-22 10:44:47 UTC

Do you know that you can use `image-set` to serve different background images right in CSS? Now you do and `image-set` is "widely available" since last month! 🎉
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/image/image-set
https://cdn.masto.host/frontendsocial/media_attachments/files/116/447/948/769/938/587/original/eaa6f0ce1599a22b.png

2026-04-21 06:43:54 UTC

A new Git version just dropped and it comes with a new experimental `history` command!
`reword` can be used to change commit messages and `split` can untangle a single commit into multiple ones.
No more interactive rebase. 🎉
https://github.blog/open-source/git/highlights-from-git-2-54/
https://cdn.masto.host/frontendsocial/media_attachments/files/116/441/339/042/774/184/original/2e415d9258f77bd8.mp4

2026-04-04 07:26:42 UTC

This is absolutely beautiful and very well done.
> Nothing you own is finished. Everything exists in a state of permanent incompletion, permanently needing.
https://www.terrygodier.com/the-last-quiet-thing
https://cdn.masto.host/frontendsocial/media_attachments/files/116/345/248/260/089/227/original/784c0e776b08569d.png

2025-12-27 22:45:07 UTC

If you like using VS Code but don't like that it's "calling home", today I learned, there's also VS Codium.
https://vscodium.com/

2025-12-02 11:28:04 UTC

I was dealing with client-side cookies the other day and, of course, I used `document.cookie`. This API is "something", isn't it?
But then I remembered that `cookieStore` is a thing today, and it makes cookie handling way easier! 👇
`cookieStore` also emits change events. Not sure if I ever needed to listen for cookie changes, but hey, it's great to have it!
https://developer.mozilla.org/en-US/docs/Web/API/CookieStore
https://cdn.masto.host/frontendsocial/media_attachments/files/115/649/733/030/611/392/original/e589cb89cbad5bcd.png

2025-11-17 14:20:32 UTC

This week's Web Weekly is just about to go out and I think it turned out "very alright" this week. 🫣
If you want to keep up with all these new web platform features, you should check it out!
https://www.stefanjudis.com/blog/web-weekly-175/
https://cdn.masto.host/frontendsocial/media_attachments/files/115/565/476/477/009/946/original/14b2152e7045ef70.png

2025-11-16 19:00:45 UTC

When someone calls custom CSS properties "CSS variables" something in me wants to reply "That's not what they're called!".
It's time to let this go, though, bc TIL the spec lives at "/css-variables". 😂
Here are some more good arguments to convince someone like my past self.
https://blog.kizu.dev/css-variables/
Thanks @npub1p63…gl53 for writing this!
https://cdn.masto.host/frontendsocial/media_attachments/files/115/560/916/000/283/031/original/8e3515f95c9a1a75.png

2025-11-11 11:28:04 UTC

Did you know that you can localize quotes right in CSS?
Now you do! 🫵
https://www.stefanjudis.com/today-i-learned/how-to-use-language-dependent-quotes-in-css/
https://cdn.masto.host/frontendsocial/media_attachments/files/115/530/824/543/362/680/original/d39bae6ee5e629af.png

2025-11-02 15:17:15 UTC

Some birdy (thanks @npub10h2…w5v7) told me that Chrome supports split views behind a flag. 😲 Good stuff!
chrome://flags#side-by-side
https://cdn.masto.host/frontendsocial/media_attachments/files/115/480/764/809/892/450/original/2d873c9a0198ce84.mp4

2025-10-31 13:09:58 UTC

One for your bookmarks... 🫣
https://stopcitingai.com/
https://cdn.masto.host/frontendsocial/media_attachments/files/115/468/939/675/950/598/original/e19d4d010453d7e8.png

2025-10-20 07:54:29 UTC

I just realized that the new CSS `field-sizing: content` magic allows textareas AND inputs AND select elements to grow. 😲
I thought it was only about textareas. 😅
So far, it works in Chromium and Safari TP.
https://cdn.masto.host/frontendsocial/media_attachments/files/115/405/413/757/093/842/original/52d69bd71e6f89fd.mp4

2025-10-15 15:43:55 UTC

Disclaimer: the following is Chromium-only and more than cutting edge, but it's kinda wild that we can implement custom functions like "light-dark()" ourselves eventually.
Here’s @npub159n…rz7e looking into the future. 👇
https://www.bram.us/2025/09/30/css-custom-light-dark/
https://cdn.masto.host/frontendsocial/media_attachments/files/115/378/948/075/175/171/original/a8f489a58d8faaed.png

2025-10-06 14:09:19 UTC

- reply

This doesn't solve the a11y issue though, or?
If the default focus color matches the background focus styles are broken or do I understand this incorrectly?

2025-10-06 13:57:10 UTC

I must admit that I've forgotten the double focus ring practice to guarantee accessible focus rings on all sorts of backgrounds, but it's such a smart way to solve the issue of hard-to-spot focus styles.
@npub18vj…g4zy did a fabulous job explaining the technique!
https://piccalil.li/blog/taking-a-shot-at-the-double-focus-ring-problem-using-modern-css/
https://cdn.masto.host/frontendsocial/media_attachments/files/115/327/567/539/926/190/original/5a498be22b206bf5.png

2025-09-27 08:10:47 UTC

This year's State of JS survey is open and it comes with easy to access code snippets and baseline info so that you'll def learn some new tricks when filling it out. 👏
https://survey.devographics.com/en-US/survey/state-of-js/2025
https://cdn.masto.host/frontendsocial/media_attachments/files/115/275/244/689/621/307/original/9f992a70ca480ab9.png

2025-09-22 11:57:40 UTC

My small side project https://tiny-helpers.dev just passed 1k GitHub stars. 🎉
If you don't know it yet, the site lists 678 small utility tools for web developers that you usually won't find when googling. And over 200 people contributed already. 😊
https://cdn.masto.host/frontendsocial/media_attachments/files/115/247/825/275/793/998/original/dd17bba09184a902.png

2025-07-17 11:07:37 UTC

Every time, I see @npub1wpv…rz2s using custom properties to "hide" usage notes and error messages in CSS, I can only stand up and say "Chapeau, my friend!". 🎩 👏
Love this approach to self-document CSS code.
https://piccalil.li/blog/a-revisit-of-the-every-layout-sidebar-with-has-and-selector-performance/
https://cdn.masto.host/frontendsocial/media_attachments/files/114/868/253/708/961/158/original/59e744bdfdba88ef.png

2025-07-14 11:46:30 UTC

TIL — the CSS working group is working on `appearance: base;` which will give us:
- Identical styles across all browsers
- 100% WCAG 2.2 compliant controls
- Easy ways to customize all these form elements 💯
This talk is time very well spent. 👇
https://www.youtube.com/watch?v=WgSiqSqxTxw&t=59s
https://cdn.masto.host/frontendsocial/media_attachments/files/114/851/419/634/875/770/original/73fdf2f43abad930.png

2025-05-15 10:49:44 UTC

It was about time, wasn't it? 😅 👇
But now, with Firefox 138 all major browser engines support import attributes to import JSON from within your ECMAScript modules. 👇
✅ Chromium: 123+
✅ Safari: 17.2+
✅ Firefox: 138+ (released 2w ago)
PS. This syntax works in modern Node.js, too!
https://cdn.masto.host/frontendsocial/media_attachments/files/114/511/457/880/643/067/original/b66772fc9ac55942.png

2025-03-16 15:51:59 UTC

I just removed 15 dead helpers over on tiny-helpers.dev and it feels like a discover less and less small online tools for web devs… 👇
https://tiny-helpers.dev/
What are you favorite quick-to-use online tools these days? Maybe I can add some new ones.
https://cdn.masto.host/frontendsocial/media_attachments/files/114/172/907/736/814/926/original/43920c17a00db5f1.png

2025-02-28 15:12:05 UTC

Could it really be? Has the time really come?
SVG favicons are shipping in Safari Tech Preview. 🎉
https://cdn.masto.host/frontendsocial/media_attachments/files/114/082/153/807/706/324/original/01e2d5157e001530.png

2024-11-23 17:40:48 UTC

Is anyone using Zen browser?
(an open source Firefox-based Arc clone)
I tried it a month ago, and was pretty rough but it seems like they're catching up quickly.
I love some Arc features, but the company’s business model and AI stuff make me hesitant to use it as my main driver.
https://zen-browser.app/
https://cdn.masto.host/frontendsocial/media_attachments/files/113/533/494/554/787/794/original/fccc464f48966e23.mp4

2024-11-16 16:41:50 UTC

With the upcoming Firefox 133 release `fetch` gets a new baseline-supported parameter — `keepalive`.
Requests with the set `keepalive` option won't be cancelled when the page unloads or is closed. 💪
https://www.stefanjudis.com/today-i-learned/fetch-supports-a-keepalive-option-to-make-it-outlive-page-navigations/
https://cdn.masto.host/frontendsocial/media_attachments/files/113/493/626/486/062/331/original/ee2f3dc39dc48e2a.png

2024-10-28 13:50:27 UTC

For the bloggers: the W3C WebDX Community Group released a web component to display web feature baseline info. Drop `baseline-status` into your HTML and display some juicy browser compat data. 💯
https://github.com/web-platform-dx/baseline-status
https://cdn.masto.host/frontendsocial/media_attachments/files/113/385/368/682/490/345/original/a8c15c4b2ff3f3b2.png

2024-10-20 14:06:04 UTC

💡 TIL — the new `node --run` flag doesn't run life cycle scripts.
Node.js v23 was released last week and ships a new and stable `node --run` flag. The flag allows running `package.json` scripts without npm. It's slightly faster than `npm run` (we're talking a couple of hundred ms) but doesn't run life cycle scripts (e.g. `prestart`).
So `npm --run` is not an `npm run` replacement.
Will you use it? I'd rather stick with `npm run` in this case... 🤔
https://cdn.masto.host/frontendsocial/media_attachments/files/113/340/131/704/964/121/original/1f258ba7ce0647be.png

2024-09-15 14:06:04 UTC

Quick reminder: if your browser support allows it, `align-content: center` works on block layout elements these days. 💪 👇
https://caniuse.com/mdn-css_properties_align-content_block_context
https://cdn.masto.host/frontendsocial/media_attachments/files/113/141/950/855/761/455/original/6d43ce128f1b4bf5.png

2024-09-11 10:28:04 UTC

It's me... 😂
https://cdn.masto.host/frontendsocial/media_attachments/files/113/118/444/409/262/291/original/5b674f9f0c9262ba.png

2024-09-09 08:00:04 UTC

I think about this a lot: when we all use AI for coding / writing / creating now, it'll hurt our ability to "create" in the long run, won't it?
I've just read someone calling this inability to create without AI — "AI Fog". Great naming! 💯
https://garrit.xyz/posts/2024-09-01-AI-fog
https://cdn.masto.host/frontendsocial/media_attachments/files/113/106/537/814/275/598/original/19374578f024bd5c.png

2024-09-03 07:23:30 UTC

- reply

Not sure. 🫣 Maybe Eric can share what led him into this deep investigation. :)

2024-08-26 17:37:35 UTC

If you go down that path and really must reimplement "link behavior" in JavaScript, here's a list of keyboard interactions you should support with your custom "JS link".
Native links support a ton of keyboard interactions:
- navigating to the target URL
- opening tabs or windows in fore or background
- downloading the target HTML. 😅
Maybe the native link is a better choice!
Thanks to @npub18vj…g4zy for this research!
https://ericwbailey.website/published/basic-keyboard-shortcut-support-for-focused-links/
https://cdn.masto.host/frontendsocial/media_attachments/files/113/029/536/251/620/003/original/3aee087c3ff1e911.png