A step-by-step visual guide on styling a UI badge. It starts with a solid green "Success" badge, transitions to a blended dark background, highlights the text in green, adds a checkmark icon, and finally repositions the icon using "negative margin-inline-start" for better alignment.

Design better badges 🎨

Collapsible sidebar built with @ariakit.org

Exploring sticky elements and scroll-driven animations.

Collapsible list items built with native HTML (ol > li > details > summary) and Ariakit Tailwind.

We're working on an improved version of @ariakit.org, and I've never seen anything this good.

– Superb UX
– 200+ new copy/paste examples
– Tailwind plugin for easy and accessible styling
– shadcn commands

Can't wait to release this.

A composite image displaying different UI patterns for selecting interests on a dark background. The variations include large graphical cards, smaller tag-like buttons within a registration form, and detailed rectangular cards with descriptions.

Working on custom styles for checkbox cards

> I am in a marathon, not a sprint, and no matter how far away the goal is, the only way to get there is by putting one foot in front of another every day.

I'm always impressed by how well this works in my life.

The Ariakit logo against a dark background of UI components, with text labels that say "Install components," "Pick styles," and "Copy & paste examples."

Ariakit has a banner (finally)

I miss watching Frieren. It's so chill.

Header with subtle animations

Is `shadcn add` like `npm install` for unbundled frontend code?

The lack of control over the CSS top-layer for native popovers and modal dialogs makes them far less useful.

For example, I want a popover to display above every element except a fixed page header, but I can't just move the header to the top-layer.

What's the logic behind hiring a domain broker who charges a 20% commission on the purchase price?

Isn't that a major conflict of interest? The buyer wants the lowest possible price, while the broker is incentivized to get the highest price to maximize their commission.

This is why I believe Ariakit dot org will stay relevant for decades:

– It's always been about examples. And we'll feature multiple libraries: Ariakit React, Radix, Base UI, RAC, Headless UI, and others outside the React ecosystem.

How much internet bandwidth would the world save if the Inter font came pre-installed on operating systems?

`cursor: pointer` (👆🏽) on every interactive element:

Over the years, whenever I get the chance, I run some informal usability tests to see if adding `cursor: pointer` to all interactive elements on a page really provides the best user experience.

Responsive code block/preview (for docs site).

CSS units like `ch` and `ex` perform very poorly in Chrome, especially when you resize the window, for no apparent reason.

It's so bad that I wouldn't recommend using them at all.

Elon vs. Trump

In politics, there’s a phenomenon (or tactic) where people or groups within the same camp pick fights with each other. They might lose some sympathizers to one another, but they also gain new ones from outsiders. Ultimately, their side of the spectrum ends up with more sympathizers.

Finally moved to the UAE. It's a huge cultural shift, but the most noticeable change is the jump from 20°C to 40°C 🥵

If you wonder why Brazil is so good at creating memes, it's because they play out in real life.

Browser compatibility table for the CSS at-rule ⁠@container for style queries with custom properties. Global support is 85.68%. The table displays support across Chrome, Edge, Safari, and Firefox versions. Cells are colored to indicate support levels: red signifies unsupported or prefixed support, and green indicates full support. Chrome shows full support from version 111 onwards. Edge has full support starting from version 111. Safari indicates no support from versions 3.1-17.6, then partial support from 18.0-18.5 and Technology Preview (TP). Firefox shows no full, unprefixed support across the listed versions (2-137, 138, and 139-141), with all corresponding cells colored red.

Firefox 😩

Astro vs. RSC

Having used both, I can confidently say RSC is superior, but it's like comparing an entire garden to a specific kind of flower.

For content-driven sites, Astro is superior to any other framework.

That said, I'd love to use RSC in Astro.

Agree. And @ariakit.org will be prepared for that.

It's hard to find a software more useful than @raycast.com

Totally worth paying for it.

After 2 months working with @astro.build, I think I've finally got the hang of it (it took some readjusting after 10 years with React's mental model), and now I feel like I'm really enjoying coding web apps again.

Note: No `unstable_` API has been needed so far.

Stripe Tax vs. MoR (Paddle, LemonSqueezy, etc.)

Does anyone have experiences to share? Is it really that bad if you just register in the EU and UK and ignore the rest?

I still think this would've been a better way to add additional verification.

If you need an icon, maybe you could use the domain's favicon.

I'm watching a wholesome anime with my son when, out of nowhere, there's a gratuitous close-up of female body parts or a sexualized joke that contributes nothing to the plot.

Hey Japan, what's your deal?