André Ruffert

@htmlenergy.bsky.social FYI, the open graph description content has a typo (HTMl).

👉 "HTML Day is on August 2nd, 2025!"

#HTMLDay

Damn, even works with contenteditable. Nice work @andreruffert.com!
github.com/andreruffert...

Yes, it’s required for same-document view transitions 🙃👌

🤔 To start a same-document (SPA) view transition you have to invoke the `startViewTransition` method.

Try wrapping your DOM update method e.g.
`document.startViewTransition(() => { this.remove() })`

React Aria Craft world-class accessible components with custom styles.

👀 react-spectrum.adobe.com/react-aria/i...

It might be worth mentioning that Node.js has a built-in function, `util.parseArgs()` (added in: v18.3.0, v16.17.0), that parses command line arguments.

nodejs.org/api/util.htm...

You might remember my old Random MDN bot that was killed by Elon on 🐦. @andreruffert.com just ported it to bsky! 🎉 👇

Line numbers - <syntax-highlight> element A composition of Zach Leatherman's line-numbers web component with the syntax-highlight web component....

Composition of web components. ✨

codepen.io/andreruffert...

Open Path by Chad Whitacre Open Source is a gift that's greater than we realize.

Open Path is a show about @chadwhitacre.com’s quest to discover the true meaning of the gift of #OpenSource ✨

openpath.quest

GitHub - andreruffert/echojs-bsky-bot: 🦋 A bot posting the Echo JS RSS feed to Bluesky. 🦋 A bot posting the Echo JS RSS feed to Bluesky. Contribute to andreruffert/echojs-bsky-bot development by creating an account on GitHub.

A bot posting the Echo JS RSS feed to Bluesky

http://www.echojs.com/news/43014

https://github.com/andreruffert/echojs-bsky-bot

Likewise! 😊

👀 view-transitions.chrome.dev

“Preferring gaps to margins is so obvious to me that it’s honestly challenging to write about it. What is there to argue? It just makes sense.”

#CSS #DesignSystems

A industrial yard with red bricks, a wooden #GoogleIOConnect sign, and plants and people wandering around.

A hand holding a Google Chrome offline dinosaur ice cream popsicle.

I had a great time at #GoogleIOConnect Berlin! Thanks to everyone involved 🫶

Happy "European Accessibility Act goes into effect" week to all who celebrate

content-visibility - CSS: Cascading Style Sheets | MDN The content-visibility CSS property controls whether or not an element renders its contents at all, along with forcing a strong set of containments, allowing user agents to potentially omit large swathes of layout and rendering work until it becomes needed. It enables the user agent to skip an element's rendering work (including layout and painting) until it is needed — which makes the initial page load much faster.

Have a long webpage or infinite scroll? 📃

Apply content-visibility to sections of the page to delay rendering until they're visible, resulting in faster initial load times. Once the content scrolls into view, it gets rendered automatically.

Use now 👇
developer.mozilla.org/en-US/docs/...

<range-slider> ...

@chriscoyier.net FYI, I left a comment here about how to fix the currently broken pen. In case you have some free time... ✌️

codepen.io/chriscoyier/...

Added a retro TV effect to the overlay in my website instead of the smileys. Come say hi!

Remember I‘m available for commissions 🌈

www.ilithya.rocks

Wow, <syntax-highlight> element was featured in the latest issue (#741) of JavaScript Weekly.

javascriptweekly.com/issues/741

💛

JSON module scripts are now Baseline Newly available  |  Blog  |  web.dev Thanks to JSON module scripts and import attributes, you can now directly import JSON in JavaScript modules. Both features are now Baseline Newly available.

JSON module scripts are now Baseline Newly Available
@tomayac.com
web.dev/blog/json-im...

#ECMAScript #JavaScript

Use the new CSS relative color syntax to get an accessible contrast color.

Detecting the "stuck" state of an element using CSS container scroll-state queries · André Ruffert Styling elements based on the scroll state of the container.

🆕 CSS container scroll-state queries allow us to selectively apply styles to descendant elements based on the container's scroll state.

andreruffert.com/weblog/detec...

A workflow to automate content changes with GitHub Actions · André Ruffert

FYI

andreruffert.com/weblog/a-wor...

GitHub - ds300/patch-package: Fix broken node modules instantly 🏃🏽‍♀️💨 Fix broken node modules instantly 🏃🏽‍♀️💨. Contribute to ds300/patch-package development by creating an account on GitHub.

Great pnpm feature!

Alternatively, there is patch-package a cli to instantly make and keep fixes to npm dependencies.

github.com/ds300/patch-...

hello, world

Happy CSS naked day!

#CSSNakedDay

I spent longer than normal writing and rewriting my latest post: jschof.dev/posts/2025/4...

Javascript prototypes are a tricky subject with and interesting history, but it brings in web components, Array, Map, Errors, typescript, babel, Netscape, and so much more. Hope people enjoy it.

Carousels with CSS  |  Blog  |  Chrome for Developers Support scroll experiences with navigation buttons and markers with just a few lines of CSS.

👀 developer.chrome.com/blog/carouse...

Imagine if macOS required all browsers to use the WebKit browser engine 🤭

#openweb