Tessera

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...

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.

andreruffert.com

André Ruffert@andreruffert.com · 2mo ago

toast-queue v1.0.0-alpha.29 now always stays above dialogs and popovers. Using the `toggle` event to detect top layer changes.

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

Conditional border radius with #CSS `sign()` https://syntax.club/profile/andreruffert.com/snap/3mtlpaznbnz27

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)
);
}

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!

Atproto Spaces, formerly known as “the permissioned data protocol,” is a new extension to #atproto that enables non-public data. atproto.com/blog/atproto...

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.

atproto.com

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.

toast-queue.js.org

André Ruffert @andreruffert.com · 3mo ago

🧪 Styling the Navigation: Declarative Route and Navigation Matching in #CSS brm.us/styling-the-...

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...

brm.us

Why I left LinkedIn, and why I'm betting on open professional networks instead. andreruffert.com/weblog/why-i...

Why I chose to leave LinkedIn · Weblog · André Ruffert

Why I left LinkedIn, and why I'm betting on open professional networks instead.

andreruffert.com

André Ruffert @andreruffert.com · 3mo ago

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.

Chris Coyier @chriscoyier.net · 4mo ago

You can even animate it. codepen.io/editor/chris...

Simple Path Examples

A code demo by Chris Coyier created on CodePen

codepen.io

Random MDN@random-mdn.bsky.social · 4mo ago

🦖 `d` CSS property 🦖 https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/d The d CSS property defines a path to be drawn by the SVG <path> element. If present, it overrides the element's d attribute. #webdev #CSS

Random MDN @random-mdn.bsky.social · 4mo ago

`Iterator.prototype.take()` replaces `slice()` for iterators https://syntax.club/profile/andreruffert.com/snap/3mounvpgbxv2w #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"]

🦖 Intl.Segmenter 🦖 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Segmenter The Intl.Segmenter object enables locale-sensitive text segmentation, enabling you to get meaningful items (graphemes, words or sentences) from a string. #webdev #JavaScript

Intl.Segmenter

The Intl.Segmenter object enables locale-sensitive text segmentation, enabling you to get meaningful items (graphemes, words or sentences) from a string.

developer.mozilla.org

💡 Need a dummy file for testing? Create files instantly with `mkfile` https://syntax.club/profile/andreruffert.com/snap/3moiggkaiks2e

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

@sifa.id Happy Monday! A small UX suggestion: an adaptive favicon that follows the user's light/dark system mode. ✨ 👀 tangled.org/strings/did:...

favicon.svg · by andreruffert.com

Adaptive sifa.id favicon that automatically matches light and dark mode.

tangled.org

ATStore @atstore.fyi · 5mo ago

Grouping arrays with `Object.groupBy()` and `Map.groupBy()` https://syntax.club/profile/andreruffert.com/snap/3mnf6hhar7i2q #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" } => [...]
}
*/

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.

Syntax Club | at-store

Share your syntax. Spread knowledge. A place to save and discover code snippets. Powered by AT Protocol. Tag: Developer.

atstore.fyi

Count Unicode code points in a string https://syntax.club/profile/andreruffert.com/snap/3mmw2bet4c22t #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)

Tangled@tangled.org · 5mo ago

Appreciate the shoutout 🙃

as always, big thanks to our several contributors! - @willdot.net - @pool.net.eu.org - @tolik518.tngl.sh - @nove-b.dev - @mitchellh.com - @linolevan.com - @subzidion.com - @paeth.xyz - @j3s.sh - @fabricio.dev - @diktomat.dev - @onev.cat - @andreruffert.com 5/5

@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

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 🙃

Go take the State of #CSS 2026 survey if you have a minute! survey.devographics.com/survey/state...

State of CSS 2026

Take the State of CSS survey

survey.devographics.com

@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.