Sign in

André Ruffert

@andreruffert.com
97 followers 107 following 121 posts

Crafting resilient, user-friendly software for the modern web. HTML, CSS, JS, UI/UX, DX, Web Standards, Open Source ✨ andreruffert.com ✌️

PostsRepliesMedia
André Ruffert @andreruffert.com · 11h
🎉 15 years on @github.com. "At this point, you don't use Git. Git uses you." #Gitversary
gitversary.andreruffert.com
@andreruffert - 15 years on GitHub · Gitversary
Fifteen years of building, debugging, shipping, and surviving enough technology cycles to remember when today’s best practices were tomorrow’s bad ideas.
000
André Ruffert @andreruffert.com · 28/09/2026
I’ve been working on a small side project: Gitversary 🎂 A fun way to celebrate your @github.com anniversary and see how long you’ve been around. 👀 gitversary.andreruffert.com ℹ️ github.com/andreruffert...
gitversary.andreruffert.com
Gitversary · A little trip down memory lane
Discover how long you've been on GitHub. Enter your username. Let’s find out.
100
Reposted by André Ruffert
MDN Web Docs @developer.mozilla.org · 25/09/2026
🆕 Customize MDN's browser compat tables! Press ⚙️ Settings on any compat table to choose which browsers and engines you see, and hide the ones you don't need. Your picks are saved in your browser. Try it 👇 developer.mozilla.org/en-US/docs/W...
MDN's browser compatibility table for the HTML popover attribute. Its columns cover desktop and mobile browsers, showing which versions support the attribute and its "hint" value. A "Settings" button sits above the table.The Browser compatibility settings dialog on MDN. Browsers appear as chips grouped under Desktop, Mobile, Server and XR, and each one can be added to or removed from the table.
27725
Reposted by André Ruffert
Echo JS @echojs.bsky.social · 25/08/2026
toast-queue — Accessible, customizable toast notifications for modern web apps www.echojs.com/news/43420 #JavaScript
toast-queue.js.org
toast-queue — Accessible, customizable toast notifications
Accessible, customizable toast notifications for modern web apps. A framework-agnostic JavaScript library with progressive enhancement, sensible core styles, and optional CSS presets.
001
André Ruffert @andreruffert.com · 25/08/2026
New blog post: A practical guide to keeping a popover above other top-layer UI while remaining interactive inside modal dialogs. andreruffert.com/weblog/keepi...
andreruffert.com
Keeping a popover on top of the top layer · Weblog · André Ruffert
A practical guide to keeping a popover above other top-layer UI while remaining interactive inside modal dialogs.
000
André Ruffert @andreruffert.com · 24/08/2026
toast-queue v1.0.0-alpha.29 now always stays above dialogs and popovers. Using the `toggle` event to detect top layer changes.
100
André Ruffert @andreruffert.com · 24/08/2026
Conditional border radius with #CSS `sign()` syntax.club/profile/andreruffert.co…
Syntax highlighted CSS:

.conditional-border-radius {
  --radius: 1rem;   /* Border radius value */
  --offset: 1rem;   /* Distance from viewport edge */

  border-radius: calc(
    sign(100vw - var(--offset) * 2 - 100%) * var(--radius)
  );
}
021
André Ruffert @andreruffert.com · 21/08/2026
It's been 13 years since I started using @codepen.io 🫶
Look at you. (Coo Coo Cachoo.) You've been here for 13 years. Thanks for being a part of the CodePen community!
172
André Ruffert @andreruffert.com · 21/08/2026
Atproto Spaces, formerly known as “the permissioned data protocol,” is a new extension to #atproto that enables non-public data. atproto.com/blog/atproto...
atproto.com
The Atproto Spaces Alpha is Live
Atproto Spaces, formerly known as “the permissioned data protocol,” is a new extension to atproto that enables non-public data. The alpha is now officially open. Here’s how to develop with it and what to expect as we work towards the full release.
020
André Ruffert @andreruffert.com · 20/08/2026
A framework-agnostic, customizable toast library built around modern web platform primitives: Popover API, View Transitions, native DOM/events, CSS. With progressive enhancement and fallbacks when newer APIs aren't available. toast-queue.js.org
toast-queue.js.org
toast-queue — Accessible, customizable toast notifications
Accessible toast notifications for modern web apps. A framework-agnostic JavaScript library with progressive enhancement, sensible core styles, and optional CSS presets.
0264
André Ruffert @andreruffert.com · 31/07/2026
🧪 Styling the Navigation: Declarative Route and Navigation Matching in #CSS brm.us/styling-the-...
brm.us
Styling the Navigation: Declarative Route and Navigation Matching in CSS
One of the things that we at Chrome have been thinking about for a while now is a way to do declarative route and navigation matching in CSS. Together with Noam Rosenthal and David Baron I’ve been wor...
000
André Ruffert @andreruffert.com · 29/07/2026
Why I left LinkedIn, and why I'm betting on open professional networks instead. andreruffert.com/weblog/why-i...
andreruffert.com
Why I chose to leave LinkedIn · Weblog · André Ruffert
Why I left LinkedIn, and why I'm betting on open professional networks instead.
000
André Ruffert @andreruffert.com · 16/07/2026
LOL 🫡 You are a website. I’m not giving you a government ID. #LinkedIn
Linkedin screenshot after login:

Access to your account has been temporarily restricted

Why did this happen?
We take proactive actions to protect you when we detect potential unauthorized access or other activity that doesn't comply with our policies.

What can I do next?
We first need to verify your identity to ensure your account safety. To regain access to your account, please submit a government-issued ID.
001
Reposted by André Ruffert
Chris Coyier @chriscoyier.net · 27/06/2026
You can even animate it. codepen.io/editor/chris...
codepen.io
Simple Path Examples
A code demo by Chris Coyier created on CodePen
0373
André Ruffert @andreruffert.com · 22/06/2026
`Iterator.prototype.take()` replaces `slice()` for iterators syntax.club/profile/andreruffert.co… #JavaScript #Baseline2025
Syntax highlighted JavaScript:

const users = new Set([
  { name: "alice", active: true },
  { name: "bob", active: false },
  { name: "charlie", active: true },
  { name: "diana", active: true },
  { name: "eve", active: false },
]);

// Array-first approach
const first3UsersSlice = [...users.values()].slice(0, 3);

// Iterator-first approach
const first3UsersTake = users
  .values()
  .take(3)
  .toArray();

console.log(first3UsersTake);
// [{ name: "alice", ... }, { name: "bob", ... }, { name: "charlie", ... }]


// Composes naturally with iterator helpers
const activeUserNames = users
  .values()
  .filter(user => user.active)
  .map(user => user.name)
  .take(3)
  .toArray();

console.log(activeUserNames);
// ["alice", "charlie", "diana"]
050
Reposted by André Ruffert
Random MDN @random-mdn.bsky.social · 17/06/2026
🦖 Intl.Segmenter 🦖 developer.mozilla.org/en-US/docs/We… The Intl.Segmenter object enables locale-sensitive text segmentation, enabling you to get meaningful items (graphemes, words or sentences) from a string. #webdev #JavaScript
developer.mozilla.org
Intl.Segmenter
The Intl.Segmenter object enables locale-sensitive text segmentation, enabling you to get meaningful items (graphemes, words or sentences) from a string.
021
André Ruffert @andreruffert.com · 17/06/2026
💡 Need a dummy file for testing? Create files instantly with `mkfile` syntax.club/profile/andreruffert.co…
Syntax highlighted Bash:

# macOS

# Create a file of the specified size
mkfile [-nv] size[b|k|m|g] filename

# Create a 10 MB file
mkfile 10m 10MB.pdf


# Linux equivalent

# Allocate a 10 MB file on disk
fallocate -l 10M 10MB.pdf
010
André Ruffert @andreruffert.com · 15/06/2026
@sifa.id Happy Monday! A small UX suggestion: an adaptive favicon that follows the user's light/dark system mode. ✨ 👀 tangled.org/strings/did:...
tangled.org
favicon.svg · by andreruffert.com
Adaptive sifa.id favicon that automatically matches light and dark mode.
3130
André Ruffert @andreruffert.com · 03/06/2026
Grouping arrays with `Object.groupBy()` and `Map.groupBy()` syntax.club/profile/andreruffert.co… #JavaScript
Syntax highlighted JavaScript:

const people = [
  { name: "Alice", department: "Engineering" },
  { name: "Bob", department: "Sales" },
  { name: "Charlie", department: "Engineering" },
  { name: "David", department: "Sales" },
  { name: "Eve", department: "HR" }
];

// Group people by department (string keys)
const groupedByDepartment = Object.groupBy(
  people,
  person => person.department
);

console.log(groupedByDepartment);
/*
{
  Engineering: [...],
  Sales: [...],
  HR: [...]
}
*/
Syntax highlighted JavaScript:

const active = { status: "active" };
const inactive = { status: "inactive" };

const users = [
  { name: "Alice", category: active },
  { name: "Bob", category: inactive },
  { name: "Charlie", category: active }
];

// Group users by object references (non-string keys)
const groupedByCategory = Map.groupBy(
  users,
  user => user.category
);

console.log(groupedByCategory);
/*
Map(2) {
  { status: "active" } => [...],
  { status: "inactive" } => [...]
}
*/
010
Reposted by André Ruffert
ATStore @atstore.fyi · 15/05/2026
Syntax Club lets you create, save, and share code snippets on AT Protocol, gorgeous previews that keep the original code fully copyable, accessible, and reusable. No screenshots of code. No dead images.
atstore.fyi
Syntax Club | at-store
Share your syntax. Spread knowledge. A place to save and discover code snippets. Powered by AT Protocol. Tag: Developer.
0178
André Ruffert @andreruffert.com · 28/05/2026
Count Unicode code points in a string syntax.club/profile/andreruffert.co… #JavaScript #SyntaxClub
Syntax highlighted JavaScript:

const codePointLength = (str) =>
  Iterator.from(str).reduce((length) => length + 1, 0);

'🙈🙉🙊'.length;
// 6 (UTF-16 code units)

codePointLength('🙈🙉🙊');
// 3 (Unicode code points)
140
André Ruffert @andreruffert.com · 28/05/2026
Appreciate the shoutout 🙃
000
André Ruffert @andreruffert.com · 21/05/2026
@sifa.id FYI: just noticed the OG image URL for my profile is returning a “500 Internal Server Error” sifa.id/p/andreruffe...
sifa.id
200
André Ruffert @andreruffert.com · 21/05/2026
Love seeing @sifa.id taking shape. Feels like there’s real potential for a genuinely better alternative in this space. I was honestly close to building something similar myself. Wild that LinkedIn has gone this long without a serious challenger 🙃
110
André Ruffert @andreruffert.com · 20/05/2026
Go take the State of #CSS 2026 survey if you have a minute! survey.devographics.com/survey/state...
survey.devographics.com
State of CSS 2026
Take the State of CSS survey
000
André Ruffert @andreruffert.com · 13/05/2026
@tangled.org I'm trying to fork a repository, but I'm getting a "Failed to connect to knot server" response (error message not visible in the UI). Are there any known outages with "knot1.tangled.sh" right now?
Browser screenshot showing the Tangled.org fork page with developer tools panel open.
210
André Ruffert @andreruffert.com · 08/05/2026
Sanitizing unsafe HTML with `setHTML()` syntax.club/profile/andreruffert.co…
Syntax highlighted JavaScript:

const html = `
  <button onclick="alert('XSS')">
    Click me
  </button>

  <script>alert('evil')</script>
`;

const unsafe = document.getElementById("unsafe");
const safe = document.getElementById("safe");

// Unsafe
unsafe.innerHTML = html;

// Sanitized
safe.setHTML?.(html);
010
André Ruffert @andreruffert.com · 07/05/2026
`Math.sumPrecise()` improves numeric accuracy by reducing rounding errors when summing values. syntax.club/profile/andreruffert.co…
Syntax highlighted JavaScript:

const values = [0.1, 0.2, 0.3];

const normalSum = values.reduce((a, b) => a + b, 0);
console.log(normalSum);
// 0.6000000000000001

const preciseSum = Math.sumPrecise(values);
console.log(preciseSum);
// 0.6
030
André Ruffert @andreruffert.com · 22/04/2026
Good memories 🫰
A pile of colorful conference name badges with lanyards attached.
020
André Ruffert @andreruffert.com · 16/04/2026
I’ve been hacking on an app to save, share, and discover code snippets, built on #atproto. Super early days, but it’s slowly taking shape.
111
Reposted by André Ruffert
Feross @feross.bsky.social · 07/01/2026
Must-read from Nicholas C. Zakas (ESLint maintainer) on how GitHub could better secure npm and prevent supply-chain attacks. humanwhocodes.com/blog/2026/01...
humanwhocodes.com
How GitHub could secure npm - Human Who Codes
Why doesn't npm detect compromised packages the way credit card companies detect fraud?
061
Reposted by André Ruffert
Stefan Judis @stefanjudis.com · 05/01/2026
This has been in the making for over a year, and I'm super excited about the new Web Weekly site! Check it out if you're into Frontend news about browser APIs, CSS features, and web standards. 🥰 webweekly.email There are still some rough edges here and there, but it's about time to get it out. 🫣
76316
Reposted by André Ruffert
MDN Web Docs @developer.mozilla.org · 14/11/2025
🆕 The URL Pattern API is Newly Available! Use it to match and extract parts of URLs, no need to reinvent routing logic. Supports literals, wildcards, named groups, and even regex constraints. Learn how it works 👇 developer.mozilla.org/en-US/docs/...
0487
André Ruffert @andreruffert.com · 07/11/2025
Kicking off day two! #btconf
020
André Ruffert @andreruffert.com · 01/11/2025
“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...
csswizardry.com
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?
010
Reposted by André Ruffert
André Ruffert @andreruffert.com · 27/10/2025
👀 “PiPHero is a macOS menubar app that enables you to picture-in-picture any of your application windows” piphero.app
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
001
André Ruffert @andreruffert.com · 30/10/2025
Thank you so much for your support, @mjpawlowski.bsky.social! 🙌 github.com/sponsors/pip...
A screenshot of the PiPHero GitHub organization's sponsors activity.
010
Reposted by André Ruffert
André Ruffert @andreruffert.com · 29/10/2025
The DevTools Animations panel is also quite handy to debug view transitions. It is available in Chromium-based browsers. developer.chrome.com/docs/devtool...
developer.chrome.com
Animations: Inspect and modify CSS animation effects  |  Chrome DevTools  |  Chrome for Developers
Inspect and modify animations with the Animations panel.
131
Reposted by André Ruffert
Zach Leatherman @zachleat.com · 29/10/2025
with an obligatory nod to andreruffert.github.io/syntax-highl... from @andreruffert.com
021
Reposted by André Ruffert
beyond tellerrand @beyondtellerrand.com · 27/10/2025
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...
beyondtellerrand.com
Join the Team – Be a Volunteer in Berlin 2025
Join the beyond tellerrand Berlin as volunteer! Be part of the team behind the magic.
086
Reposted by André Ruffert
Random MDN @random-mdn.bsky.social · 23/10/2025
🦖 Random MDN: Array.prototype.toReversed() 🦖 developer.mozilla.org/en-US/docs/We… The toReversed() method of Array instances is the copying counterpart of the reverse() method. It returns a new array with the eleme… #webdev #JavaScript
developer.mozilla.org
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…
021
Reposted by André Ruffert
Bramus @bram.us · 08/10/2025
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.
developer.chrome.com
What's new in view transitions (2025 update)  |  Blog  |  Chrome for Developers
An overview of what changed for View Transitions in 2025
0247
Reposted by André Ruffert
Random MDN @random-mdn.bsky.social · 08/10/2025
🦖 Random MDN: view-timeline-name 🦖 developer.mozilla.org/en-US/docs/We… 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
developer.mozilla.org
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…
021
Reposted by André Ruffert
Stefan Judis @stefanjudis.com · 07/10/2025
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));
3171
André Ruffert @andreruffert.com · 07/10/2025
With the introduction of ES2024, JavaScript now offers native support for grouping data with the new Object.groupBy() and Map.groupBy() methods.
030
Reposted by André Ruffert
Brecht De Ruyte @utilitybend.com · 12/09/2025
🚀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...
utilitybend.com
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.
112925
André Ruffert @andreruffert.com · 24/09/2025
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]
120
André Ruffert @andreruffert.com · 29/08/2025
👀 “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
000
André Ruffert @andreruffert.com · 29/08/2025
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)
010
Reposted by André Ruffert
Friday Front-End @fridayfrontend.com · 12/08/2025
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...
stefanjudis.com
Should responsive images work with container queries?
A summary of ongoing spec discussions regarding container based image loading.
031