André Ruffert
LightNews LightNews
banner
andreruffert.com
André Ruffert
@andreruffert.com
67 followers 94 following 73 posts
Self-taught software engineer with a passion for building high-quality, user-friendly software. Web platform. ✨

JavaScript, HTML/CSS, UI/UX, DX, Cutting-Edge, Web Standards, Open Source

✌️

andreruffert.com
Posts Replies Media Videos
andreruffert.com
Kicking off day two! #btconf
November 7, 2025 at 9:20 AM
andreruffert.com
“The web as a platform is a safe bet. It’s un-versioned by design. That’s the commitment the web makes to you—take advantage of it.”

csswizardry.com/2025/01/buil...
Build for the Web, Build on the Web, Build with the Web – CSS Wizardry
What is the real, long-term cost of adopting a JavaScript framework?
csswizardry.com
November 1, 2025 at 3:04 PM
Reposted by André Ruffert
andreruffert.com
👀 “PiPHero is a macOS menubar app that enables you to picture-in-picture any of your application windows”

piphero.app
Picture-in-picture all the things · PiPHero
PiPHero is a macOS menu bar app that allows you to view any of your application windows in picture-in-picture mode, so you can keep an eye on them while multitasking
piphero.app
October 27, 2025 at 6:30 PM
andreruffert.com
Thank you so much for your support, @mjpawlowski.bsky.social!

🙌

github.com/sponsors/pip...
A screenshot of the PiPHero GitHub organization's sponsors activity.
October 30, 2025 at 5:07 PM
Reposted by André Ruffert
andreruffert.com
The DevTools Animations panel is also quite handy to debug view transitions. It is available in Chromium-based browsers.

developer.chrome.com/docs/devtool...
Animations: Inspect and modify CSS animation effects  |  Chrome DevTools  |  Chrome for Developers
Inspect and modify animations with the Animations panel.
developer.chrome.com
October 29, 2025 at 7:39 PM
Reposted by André Ruffert
zachleat.com
with an obligatory nod to andreruffert.github.io/syntax-highl... from @andreruffert.com
October 29, 2025 at 4:38 PM
Reposted by André Ruffert
beyondtellerrand.com
We want you ! Join the #team of #btconf in Berlin and experience the event from a different perspective. If you need reasons why, accept from not paying a ticket, check this link. beyondtellerrand.com/blog/join-be...
Join the Team – Be a Volunteer in Berlin 2025
Join the beyond tellerrand Berlin as volunteer! Be part of the team behind the magic.
beyondtellerrand.com
October 27, 2025 at 6:58 PM
Reposted by André Ruffert
random-mdn.bsky.social
🦖 Random MDN: Array.prototype.toReversed() 🦖

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/toReversed

The toReversed() method of Array instances is the copying counterpart of the reverse() method. It returns a new array with the eleme…

#webdev #JavaScript
Array.prototype.toReversed()
The toReversed() method of Array instances is the copying counterpart of the reverse() method. It returns a new array with the eleme…
developer.mozilla.org
October 23, 2025 at 1:39 AM
Reposted by André Ruffert
bram.us
A lot has happened since Chrome shipped Same-Document View Transitions in 2023.

In 2024 we shipped Cross-Document VTs, added refinements such as `view-transition-class` and VT Types, and also welcomed Safari in adding VT support.

And this year … well, I wrote a post summing it all up.
What's new in view transitions (2025 update)  |  Blog  |  Chrome for Developers
An overview of what changed for View Transitions in 2025
developer.chrome.com
October 8, 2025 at 11:31 AM
Reposted by André Ruffert
random-mdn.bsky.social
🦖 Random MDN: view-timeline-name 🦖

https://developer.mozilla.org/en-US/docs/Web/CSS/view-timeline-name

The view-timeline-name CSS property is used to define the name of a named view progress timeline, which is progressed through based on the change in visibility of an element (know…

#webdev #CSS
view-timeline-name
The view-timeline-name CSS property is used to define the name of a named view progress timeline, which is progressed through based on the change in visibility of an element (know…
developer.mozilla.org
October 8, 2025 at 6:30 PM
Reposted by André Ruffert
stefanjudis.com
TIL, Node.js ships a native `glob` utility since 22.17. 🎉
import { glob } from 'node:fs/promises'; const files = await glob('**/*.txt'); console.log(await Array.fromAsync(files));
October 7, 2025 at 6:45 PM
andreruffert.com
With the introduction of ES2024, JavaScript now offers native support for grouping data with the new Object.groupBy() and Map.groupBy() methods.
October 7, 2025 at 10:24 AM
Reposted by André Ruffert
utilitybend.com
🚀The new CSS sibling-index() and sibling-count() functions let us create staggered animations, dynamic color palettes, and even complex circular layouts with ease.
I wrote about my first experiments with these fantastic new CSS additions. So much fun! ♥️ ✨
#CSS
utilitybend.com/blog/styling...
Styling siblings with CSS has never been easier. Experimenting with sibling-count and sibling-index | utilitybend
Ready to spice up your CSS? This article dives into the new sibling-count() and sibling-index() functions, showing you how they can simplify your styling and create cool effects.
utilitybend.com
September 12, 2025 at 11:37 AM
andreruffert.com
Are developers the right target audience for such a scam? 🤣
A screenshot of a github issue which @mentions users to notify them and try to scam them. The full issue content: Paradigm | $80M GitHub & Paradigm PD25 [Closed pre-registration] Dear community, We are pleased to announce the next stage of the Github Grants Program — a collaborative initiative with Paradigm created to recognize and support contributors driving forward open-source projects and digital public goods. Your GitHub account has been pre-qualified for this event. Every form of contribution matters — whether it’s a single improvement or years of consistent engagement — all play a role in shaping the future of open source. Program highlights: Funding method: Quadratic Funding — amplifying community impact via a shared pool Total pool: $80,000,000 USDC Who can join: Active contributors and maintainers with proven or potential impact — not limited to project founders Next step: To confirm your preliminary registration and secure eligibility, please verify your wallet through Paradigm. This step ensures fairness, safeguards against Sybil attacks, and does not require personal information. The process takes less than a minute: simply connect your wallet and sign a verification message. Important: A refundable deposit is required for authorization. The full amount will be returned once verification is complete. ➖ Apply Now: grants.paradigm.xyz/apply Eligibility and funding allocation are finalized only with a valid Paradigm score. Complete instructions are available on the portal. Best regards, Paradigm Foundation In collaboration with GitHub You are receiving this message as a registered GitHub member. ©2025 GitHub, Inc. All rights reserved. Address: 88 Colin P Kelly Jr St, San Francisco, CA 94107, USA. [Manage notifications] | [Privacy Policy]
September 24, 2025 at 7:01 PM
andreruffert.com
👀 “The Web Install API aims to standardize the way installations are invoked by end users, creating an ergonomic, simple and consistent way to get web content installed onto a device.”

github.com/MicrosoftEdg...
github.com
August 29, 2025 at 3:42 PM
andreruffert.com
github.com is currently a good example of the consequences of not adopting a "mobile-first" approach, resulting in poor performance and UX on mobile devices.

(slow 4G network throttling)
August 29, 2025 at 3:12 PM
Reposted by André Ruffert
fridayfrontend.com
Should responsive images work with container queries? "Container queries are slowly moving towards cross-browser support, and it got me wondering: how is image loading supposed to work in a container-based world?" #CSS www.stefanjudis.com/notes/should...
Should responsive images work with container queries?
A summary of ongoing spec discussions regarding container based image loading.
www.stefanjudis.com
August 12, 2025 at 5:04 PM
Reposted by André Ruffert
sunkanmifafowora.bsky.social
css-questions.com

Can you get 20/20 on your first try?
August 11, 2025 at 11:04 AM
andreruffert.com
GitHub will no longer be independent after the CEO's resignation. Instead, it will become part of Microsoft's AI engineering team.

www.theverge.com/news/757461/...
GitHub just got less independent at Microsoft after CEO resignation
GitHub will be part of Microsoft’s AI engineering team
www.theverge.com
August 11, 2025 at 7:53 PM
andreruffert.com
Wow, a jQuery plugin/polyfill that I published over 12 years ago still gets about 2M hits per month on jsDelivr... 😅
rangeslider.js jsDelivr CDN download stats for the past month (July 2025) with 2M hits.
August 9, 2025 at 11:42 AM
andreruffert.com
#HTMLDay
htmlenergy.bsky.social html energy @htmlenergy.bsky.social · Jul 18
On Saturday, August 2nd, 2025, we'll be gathering in places around the world to write and celebrate HTML. Join us ❇️

html.energy/html-day/202...
HTML Energy
HTMl Day is on August 2nd, 2025!
html.energy
July 30, 2025 at 9:56 AM
Reposted by André Ruffert
darn.es
Damn, even works with contenteditable. Nice work @andreruffert.com!
github.com/andreruffert...
July 18, 2025 at 3:18 PM
Reposted by André Ruffert
stefanjudis.com
You might remember my old Random MDN bot that was killed by Elon on 🐦. @andreruffert.com just ported it to bsky! 🎉 👇
July 5, 2025 at 4:12 PM
andreruffert.com
Open Path is a show about @chadwhitacre.com’s quest to discover the true meaning of the gift of #OpenSource ✨

openpath.quest
Open Path by Chad Whitacre
Open Source is a gift that's greater than we realize.
openpath.quest
June 30, 2025 at 11:37 AM
Reposted by André Ruffert
echojs.bsky.social
A bot posting the Echo JS RSS feed to Bluesky

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

https://github.com/andreruffert/echojs-bsky-bot
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.
github.com
June 26, 2025 at 1:14 PM