Exploring sticky elements and scroll-driven animations.
08.08.2025 14:09 β π 11 π 1 π¬ 0 π 0@diegohaz.bsky.social
Did you mean @haz.dev
Exploring sticky elements and scroll-driven animations.
08.08.2025 14:09 β π 11 π 1 π¬ 0 π 0Collapsible list items built with native HTML (ol > li > details > summary) and Ariakit Tailwind.
06.08.2025 09:21 β π 23 π 4 π¬ 1 π 0We'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
29.07.2025 17:10 β π 20 π 2 π¬ 0 π 0> 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)
19.07.2025 09:19 β π 18 π 2 π¬ 1 π 0I miss watching Frieren. It's so chill.
18.07.2025 15:37 β π 1 π 1 π¬ 1 π 0Header with subtle animations
14.07.2025 08:24 β π 13 π 1 π¬ 1 π 0Is `shadcn add` like `npm install` for unbundled frontend code?
04.07.2025 12:31 β π 2 π 1 π¬ 1 π 0The 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?
18.06.2025 09:29 β π 7 π 1 π¬ 0 π 0`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).
11.06.2025 13:51 β π 4 π 1 π¬ 0 π 0CSS 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 π₯΅
02.06.2025 15:56 β π 2 π 1 π¬ 1 π 0If you wonder why Brazil is so good at creating memes, it's because they play out in real life.
30.05.2025 00:04 β π 5 π 1 π¬ 0 π 0Browser 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 π©
23.05.2025 05:59 β π 3 π 1 π¬ 0 π 0Astro 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.
06.05.2025 17:11 β π 9 π 1 π¬ 0 π 0It'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?
I want to offer Popover components in Ariakit that don't rely on Floating UI, allowing users to customize them with CSS anchor positioning (using a polyfill for browsers that lack support).
01.04.2025 15:08 β π 6 π 2 π¬ 3 π 0Screenshot of combobox with groups in dark mode
Screenshot of combobox with groups in light mode
Working on new Combobox examples for Ariakit π§π½βπ»
01.04.2025 10:51 β π 12 π 2 π¬ 1 π 0