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 · 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 · 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
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
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
After:
010
André Ruffert @andreruffert.com · 15/06/2026
Before:
110
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
André Ruffert @andreruffert.com · 01/06/2026
tangled.org/tangled.org/...
000
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 · 13/05/2026
The same goes for creating a new repository. Am I doin something wrong? 😅
Browser screenshot of the Tangled.org “Create New Repository” page displaying a “Failed to reach knot server” error message.
100
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 · 07/11/2025
Kicking off day two! #btconf
020
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
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 · 14/09/2025
There are some really low-hanging fruits in there that would lead to improvements... 🤷‍♂️
A screenshot of github.com/facebook/react with the browser dev tools open.A screenshot of github.com/facebook/react with the browser dev tools open.
100
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
André Ruffert @andreruffert.com · 09/08/2025
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.
010
André Ruffert @andreruffert.com · 25/06/2025
I had a great time at #GoogleIOConnect Berlin! Thanks to everyone involved 🫶
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.
110
André Ruffert @andreruffert.com · 23/06/2025
Wow, <syntax-highlight> element was featured in the latest issue (#741) of JavaScript Weekly. javascriptweekly.com/issues/741 💛
A preview screenshot of the JavaScript Weekly issue #741 on the web.
010
André Ruffert @andreruffert.com · 04/03/2025
A desk showing a setup with a MacBook Air (M1, 2020) on an mStand, a mounted Dell UltraSharp (U2720Q) monitor, an Apple Magic Keyboard with Numeric Keypad and a Magic Trackpad. Some decorative accessoires in the background, pens and sticky notes on the side.
040
André Ruffert @andreruffert.com · 27/01/2025
e.g.
A code diff example showing how to replace the metadata.openGraph property with metadata.other.
000
André Ruffert @andreruffert.com · 20/09/2024
Bluesky now has over 10 million users, and I was #824,473!
Bluesky is celebrating 10 million users. I was #824,473! First 10%.
040