Front-End Moderators @mods

Pinned post

**Stefan Judis** @stefan · 5d *

The new Web Weekly is out and it's packed!

This time:

`width: stretch`
`fetchpriority` going into baseline
`box-decoration-break`
sparse JavaScript arrays
A JS default parameters fun fact.
new tools and web platform updates.

https://www.stefanjudis.com/blog/web-weekly-145/

**Stefan Judis** @stefan · 1d

Stefan Judis @stefan

Just found this lovely collection of free animated SVG icons. Turns out all icons come with `framer-motion` (49KB zipped)... #noThanks

Does any know of cute icons animated with CSS or SVG?

Stefan Judis boosted

**randomMDN** @randomMDN · 5d

randomMDN @randomMDN

As always, every six hours, I'll randomly select an article from MDN Web Docs¹ for you. You can also follow the RSS feed² or check out my GitHub repo³ for more options and information.

Live long and prosper

¹ https://developer.mozilla.org/en-US/docs/Web
² https://front-end.social/@randomMDN.rss
³ https://github.com/jaandrle/randomMDN

MDN Web DocsWeb technology for developers | MDNThe open Web presents incredible opportunities for developers. To take full advantage of these technologies, you need to know how to use them. Below you'll find links to our Web technology documentation.

**Stefan Judis** @stefan · 5d

Stefan Judis @stefan

Well... I've just sent out an email to 5k people with a pretty bad typo in subject line and text. 🤦‍♂️ Time to go to bed I think...

**Stefan Judis** @stefan · 5d *

5d *

Stefan Judis @stefan

The new Web Weekly is out and it's packed!

This time:

`width: stretch`
`fetchpriority` going into baseline
`box-decoration-break`
sparse JavaScript arrays
A JS default parameters fun fact.
new tools and web platform updates.

https://www.stefanjudis.com/blog/web-weekly-145/

Stefan Judis boosted

**pablolarah** @pablolarah@mastodon.social · 5d *

5d *

pablolarah @pablolarah@mastodon.social

Web Weekly 144 — unpredictable HTML whitespace rendering, `requestSubmit` and `flow-root`

by @stefan
#webdev #webdesign #html #js

https://www.stefanjudis.com/blog/web-weekly-144/

Stefan Judis

Stefan JudisToday, I've learned that (in most shells) you can jump through the history via `ctrl+p` and `ctrl+n`? 😲 I'm usually terrible at learning new keyboard shortcuts, but this one feels worth it because I don't have to move my hands off the default keyboard position.

Stefan JudisThe new Web Weekly is out. 🥂This time:✅ `display: flow-root` ✅ `requestSubmit()` ✅ the disturbing state of HTML whitespace rendering ✅ `git log -S` ✅ text fragment links? ➕ new tools and web platform updates.<a href="https://www.stefanjudis.com/blog/web-weekly-144/" target="_blank" rel="nofollow noopener noreferrer" translate="no">https://www.stefanjudis.com/blog/web-weekly-144/</a>

Stefan JudisFor 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. 💯<a href="https://github.com/web-platform-dx/baseline-status" target="_blank" rel="nofollow noopener noreferrer" translate="no">https://github.com/web-platform-dx/baseline-status</a>

Stefan Judis💡 Today I learned, how to search for commits that added or removed a string.If you're using Git on the command line, `git log` can scan all commit additions and deletions for a search string. 😲Apply your search string via `-S` (a condition, function call, or unique enough method name), and Git will return all the commits that added or removed your search string. Pretty neat!

Stefan JudisThe new Web Weekly Newsletter is out.🥂 This time: ✅ Get started with screen reader testing on macOS and Windows ✅ A new CSS logo? 😲 ✅ CSS feature detecting of at-rules ✅ The two competing Masonry CSS standards ✅ Node.js v23 and `node --run` ✅ The state of Interop 2025 ➕ New tools & more platform updates. Enjoy! <a href="https://www.stefanjudis.com/blog/web-weekly-143/" target="_blank" rel="nofollow noopener noreferrer" translate="no">https://www.stefanjudis.com/blog/web-weekly-143/</a>

Stefan JudisSo Google released this new tool to access CrUX (Chrome User Experience Report) data about web performance metrics and I love the fact that the graphs are built with color-independent icons. 👏 👇 <a href="https://cruxvis.withgoogle.com" target="_blank" rel="nofollow noopener noreferrer" translate="no">https://cruxvis.withgoogle.com</a>

Stefan JudisNew JavaScript excitement! 🎉 `promise.try` reached the ECMAScript proposal stage 4.So far, it's only shipping in Chrome, but it's included in `core-js` so that you can use it today!

Stefan Judis💡 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 `node --run` is not an `npm run` replacement. Will you use it? I'd rather stick with `npm run` in this case... 🤔

Stefan JudisI'm redesigning the Web Weekly landing page today (it's looooong overdue) and it's going quite well, I'd say. 🫣

Stefan Judis<a href="https://social.lol/@robb" class="u-url mention">@robb</a> For folks on an instance below v4.3, this is how it looks. :)

Stefan JudisThat's pretty cool! Apparently, Mastodon 4.3 shipped a new feature called "author tags".When you post a link and everything's configured correctly (HTML meta element + some mastodon profile config), the link preview shows the mastodon profile.Thanks for sharing this on your blog, <a href="https://social.lol/@robb" class="u-url mention">@robb</a>!Let's see if it works. 🤞Edit: It does.<a href="https://rknight.me/blog/setting-up-mastodon-author-tags/" target="_blank" rel="nofollow noopener noreferrer" translate="no">https://rknight.me/blog/setting-up-mastodon-author-tags/</a>

Stefan Judis

Stefan JudisIf you want to learn more, this article listed a whole bunch of past and present Safari issues. 👇<a href="https://webventures.rejh.nl/blog/2024/history-of-safari-show-stoppers/" target="_blank" rel="nofollow noopener noreferrer" translate="no">https://webventures.rejh.nl/blog/2024/history-of-safari-show-stoppers/</a>

Stefan JudisI'm usually no fan of all the "Safari is the new IE" chatter, but this statistic is kind of convincing. If you look at the number of web platform tests that only fail in one browser, Safari is leading big times...<a href="https://wpt.fyi/results/?label=experimental&label=master&aligned" target="_blank" rel="nofollow noopener noreferrer" translate="no">https://wpt.fyi/results/?label=experimental&label=master&aligned</a>

Stefan Judis💯 <a href="https://frontendatscale.com/issues/29/" target="_blank" rel="nofollow noopener noreferrer" translate="no">https://frontendatscale.com/issues/29/</a>

Stefan JudisThe new Web Weekly Newsletter is out and it's been very busy in the browser world.🥂 This time: ✅ A new HTTP method — QUERY ✅ Chromium-only: transitioning from and to `auto` ✅ A peek into the CSS future: more powerful `attr()`, `sibling-count()` and `random()` ✅ Simple cross-origin requests to avoid OPTIONS requests ➕ New tools & more platform updates. <a href="https://www.stefanjudis.com/blog/web-weekly-142/" target="_blank" rel="nofollow noopener noreferrer" translate="no">https://www.stefanjudis.com/blog/web-weekly-142/</a>

Stefan Judis💯 Knowing how the web works is a thousand times more valuable than knowing how to do things in the latest and greatest framework.<a href="https://frontendmasters.com/blog/you-might-not-need-that-framework/" target="_blank" rel="nofollow noopener noreferrer" translate="no">https://frontendmasters.com/blog/you-might-not-need-that-framework/</a>

Stefan Judis

Stefan JudisI just filled out the "State of HTML" survey that is open for another week. 👇 You should do the same because:a) the gathered insights are highly valuable to browser makers and the developer community. b) I promise that you'll discover some HTML features you haven't heard of.<a href="https://survey.devographics.com/en-US/survey/state-of-html/2024" target="_blank" rel="nofollow noopener noreferrer" translate="no">https://survey.devographics.com/en-US/survey/state-of-html/2024</a>

Stefan Judis

Stefan JudisHere's an HTML trick question: how many paragraphs are defined in the HTML below?It's two! 😱 From the HTML spec:> The term paragraph [...] is used for more than just the definition of the p element.If you want to learn more... 👇 <a href="https://www.scottohara.me/blog/2024/08/29/paragraphs.html" target="_blank" rel="nofollow noopener noreferrer" translate="no">https://www.scottohara.me/blog/2024/08/29/paragraphs.html</a>

Stefan JudisThe new Web Weekly Newsletter is out.🥂 This time:✅ What makes good forms? ✅ Accessible name computation ✅ `display: contents` ✅ Why not only `p` elements are paragraphs in HTML as 😱 ✅ Styleable selects in Chrome Canary ➕ New tools & more platform updates. Enjoy!👇<a href="https://www.stefanjudis.com/blog/web-weekly-141/" target="_blank" rel="nofollow noopener noreferrer" translate="no">https://www.stefanjudis.com/blog/web-weekly-141/</a>

Stefan Judis

Stefan JudisQuick reminder: if your browser support allows it, `align-content: center` works on block layout elements these days. 💪 👇 <a href="https://caniuse.com/mdn-css_properties_align-content_block_context" target="_blank" rel="nofollow noopener noreferrer" translate="no">https://caniuse.com/mdn-css_properties_align-content_block_context</a>

Stefan JudisWhen designing things, there's this saying that you should avoid pure black on white. And yet, I'm always struggling to find a fitting black alternative. I love this collection! Bookmarked. 🔖 <a href="https://uxplanet.org/alternatives-to-using-pure-black-000000-for-text-and-backgrounds-54ef0e733cdb" target="_blank" rel="nofollow noopener noreferrer" translate="no">https://uxplanet.org/alternatives-to-using-pure-black-000000-for-text-and-backgrounds-54ef0e733cdb</a>

Stefan JudisIt's me... 😂

Stefan JudisI 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! 💯<a href="https://garrit.xyz/posts/2024-09-01-AI-fog" target="_blank" rel="nofollow noopener noreferrer" translate="no">https://garrit.xyz/posts/2024-09-01-AI-fog</a>

Stefan Judis

Stefan JudisIt's probably too early to use alternative text for generated CSS content in prod and without proper fallback, but since Safari 17.4 and Firefox 128, the `/` syntax entered the baseline. 💪 If you want to learn more, I discovered it 4y ago... 👇 <a href="https://www.stefanjudis.com/today-i-learned/css-content-accepts-alternative-text/" target="_blank" rel="nofollow noopener noreferrer" translate="no">https://www.stefanjudis.com/today-i-learned/css-content-accepts-alternative-text/</a>

Stefan JudisThe new Web Weekly Newsletter is out after the summer break.🥂✅ New ECMAScript features ✅ Alt text for CSS `content` hits the baseline ✅ Chrome comes with new perf devtools features ✅ How to use `inert` in React ✅ `letter-spacing` and why it behaves differently than you think ➕ New tools & more platform updates.It's great to be back. 😊 Enjoy!<a href="https://www.stefanjudis.com/blog/web-weekly-140/" target="_blank" rel="nofollow noopener noreferrer" translate="no">https://www.stefanjudis.com/blog/web-weekly-140/</a>

Stefan JudisI'm playing around with Chrome's new performance dev tools and they're such an improvement. 👏The new view is available as an experimental feature in Canary, and quick access to web vitals alone is so much better (and quicker) than running Lighthouse. Debugging INP also becomes easier. Great stuff!If you want to learn more, our friends at DebugBear shared what you need to know. 👇 <a href="https://www.debugbear.com/blog/fix-web-performance-devtools" target="_blank" rel="nofollow noopener noreferrer" translate="no">https://www.debugbear.com/blog/fix-web-performance-devtools</a>

Stefan JudisIf 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 <a href="https://social.ericwbailey.website/@eric" class="u-url mention">@eric</a> for this research!<a href="https://ericwbailey.website/published/basic-keyboard-shortcut-support-for-focused-links/" target="_blank" rel="nofollow noopener noreferrer" translate="no">https://ericwbailey.website/published/basic-keyboard-shortcut-support-for-focused-links/</a>

Stefan Judis💯 There's quite some wisdom here. 👇 <a href="https://frontendatscale.com/issues/29/" target="_blank" rel="nofollow noopener noreferrer" translate="no">https://frontendatscale.com/issues/29/</a>

Recent searches

Search options

Administered by:

Server stats:

Stefan Judis@stefan@front-end.social

Recent searches

Search options

Administered by:

Server stats:

Stefan Judis@stefan@front-end.socialfront-end.social

Stefan Judis@stefan@front-end.social