Haz

@haz.dev

3105 Followers 238 Following

Co-founder @ariakit.com. Ex Automattic, WordPress. Posts about Design, JS, CSS, a11y. Neurodivergent, dad.

Weekly Downloads metric showing 1,084,779 downloads, with a purple sparkline trending upward despite several dips.
A settings interface for Custom instructions prompting an AI to always include code examples.
Terminal output showing the successful execution of the pnpm i command in the ariakit repository, adding node version 24.18.0
Console output comparison showing test duration dropping from 46.8 seconds with jsdom to 20.8 seconds with happy-dom
A dark mode settings panel showing pull request permissions set to Collaborators only.
A black and white pencil sketch of a young woman standing and hugging a dark electric guitar to her chest. She is dressed in a t-shirt reading LOVE ROCK under a fringed vest, plaid shorts, solid black tights, and ankle boots. A sketched, floating staircase curves behind her against a plain background.
A code diff summary showing 22,830 lines added and 48,919 lines removed.
Two screenshots of a code editor's autocomplete menu for the class bg-. The top image, marked with a red X, shows the menu cluttered with every individual shade of amber like bg-amber-50 and bg-amber-100. The bottom image, marked with a green check, shows a much cleaner menu where all amber shades are grouped into a single line like bg-amber-100, 200, allowing other background utilities to be easily visible.
A screenshot of a Twitter thread. The first tweet is from Adam Wathan on Jan 18, 2022. It reads: I think one of the biggest Tailwind anti-patterns I see pop up in GitHub issues all the time is trying to "extend" the behavior of an existing utility in some way, especially in combination with @apply. This output is correct but not what people doing this expect. Below this is an image showing two code blocks. The left is labeled Input and shows CSS classes like .my-page > div ~ .pointer-events-none, .profile-card, and .btn.outline-none using @apply with other utilities. The right is labeled Output and shows the resulting compiled CSS, which is unexpectedly long and repetitive. The second tweet is a reply from Haz (@diegohaz). It reads: Here's my use case for @apply: I have to write an external CSS file (first image) because it's going to be compiled and shown to the users as vanilla CSS (second image). Before Tailwind, we were writing normal CSS, but the DX was not great. Tailwind has greatly improved it. Below this is an image showing two panels. The left shows a .combobox CSS class utilizing @apply with many Tailwind utilities. The right shows a UI preview of an input field labeled Your favorite fruit above a code block displaying the compiled, vanilla CSS output for .combobox. The final tweet is a reply from Adam Wathan. It reads: Yeah and this is totally the type of use case I had in mind initially and I think something we would always want to support (thumbs up emoji). It's when people do the weird stuff I described above that it becomes this huge complicated mess of a maintenance burden I totally underestimated. The timestamp at the bottom is 10:09 PM, Jan 18, 2022.
@container style(--_ak-layer-parent-parity: even) { --_ak-layer-parent-parity: odd; --_ak-layer-parent-odd: var(--ak-layer); --ak-layer-parent: var(--_ak-layer-parent-even); } @container style(--_ak-layer-parent-parity: odd) { --_ak-layer-parent-parity: even; --_ak-layer-parent-even: var(--ak-layer); --ak-layer-parent: var(--_ak-layer-parent-odd); }
Vitest console output showing 993 tests passed across 3 files
A dark-themed documentation interface for React Aria featuring a search bar and tab navigation. The "Components" tab is active, displaying a grid of cards for Autocomplete, Breadcrumbs, Button, Checkbox, CheckboxGroup, and ColorArea. The "Breadcrumbs" card is currently highlighted with a blue focus border.
A documentation page titled "7.2 Custom Helper Functions". The text states: "Percentage parameters accept both string percentages ( '20%' ) and floating-point numbers between 0 and 1 ( 0.2 ). Both forms are equivalent." A code block follows with comments and examples for four scenarios: 1. "color-mix() wrapper all equivalent": Demonstrates `css.bg.mix` syntax blending primary and white colors. 2. "Relative color syntax wrapper for lightening": Shows `css.bg.lighten` (noting a typo "ligthen" in some lines) producing an `oklch` color with `calc(l + 0.1)`. 3. "Relative color syntax wrapper for darkening": Shows `css.bg.darken` producing an `oklch` color with `calc(l - 0.1)`. 4. "Opacity modifier": Shows `css.bg.alpha` setting transparency, resulting in `oklch` output with `/ 50%`.
Screenshot of technical documentation regarding "5.5 Setting Variables (the set Mixin)". The text explains that variables are set via the "set" mixin plugin and supports two forms. 1. Namespace form (for config-defined variables): Code examples show setting a namespaced variable like css.set.color.$primary("#000"), setting a top-level variable like css.set.$spacing("0.1em"), setting mid-chain like css.flex.col.set.color.$primary("#000"), and setting inside a wrapping mixin like css.dark(...). 2. Callable form (for any variable, including defineVar() variables): Code examples show defining a custom variable with css.defineVar() and setting it mid-chain using css.flex.col.set(custom, "value"), as well as setting a config variable using the callable syntax css.set(css.vars.color.$primary, "#000").
A technical diagram comparing three ways to style element corners using CSS variables `--r: 12px` and `--gap: 4px`. 1. "Border Radius": Standard support across all major browsers using `border-radius: var(--r)`. 2. "Corner Shape": Uses `corner-start-end-shape: scoop` and `border-start-end-radius` calculation, shown with Chrome and Edge icons. 3. "Border Shape": Uses a complex custom `border-shape` definition (likely CSS Houdini/Paint API) with extensive geometry calculations for shoulders and arcs, indicated with a Chrome Canary icon.
Checkbox cards that change style when clicked, with multiple variations: a floating checkmark, an expanding card that shows a checkmark when selected, a card with a description, and a card with an icon.
UI animation showing a selected tab box smoothly transitioning from the second tab to the first, with its bottom-left corner seamlessly merging into the tab panel’s top-left corner.
A UI animation demonstrating tab switching between "Profile" and "Settings." As the user selects a tab, its shape seamlessly merges with the main content card below. The animation highlights the CSS transition where the tab's bottom border radius smoothly changes to 0px at the intersection point, creating a fluid, integrated look.
Infographic explaining concentric border radius formula: inner radius = parent radius - padding
A visual comparison of two segmented toggle switches with "Profile" selected. The top version uses a flat white pill for the active state with no shadow, blending smoothly with the track. The bottom version adds a visible drop shadow to the white pill, giving it a lifted, floating appearance.
Interact with multiple button groups featuring animated hover effects and active-item backdrops.
A video showing user interaction with a dark-themed breadcrumb bar containing "Apps," "Settings," and "Users." When hovered with the mouse, the active segment highlights with a slanted, parallelogram shape. When navigating via keyboard (tab key), a focus ring appears that perfectly matches this custom slanted shape.
A slideshow showcasing various button styles and the JSX code used to build them.
Diagram illustrating component composition for various button styles. 1. Top Center: A simple "Button" rendered with `<Button>Button</Button>`. 2. Top Left: A square button with a plus icon, using `<ButtonIcon>` and screen-reader text. 3. Top Right: A white pill button "+ Follow back" using props `$bg="invert" $radius="round" $px="xl"`. 4. Center Left: A badge-style button "Technology 43" with a computer icon and a count span. 5. Bottom Left: A "Following" button with a checkmark icon using `$radius="round"`. 6. Bottom Right: A large profile button for "Haz @diegohaz" demonstrating complex layout with `$orientation="vertical"`, `$rowSpan`, and nested content (image, label, description, icons).
Instructional diagram about adaptive images on GitHub. - Method 1 (HTML): A code snippet using `<picture>` with `<source media="(prefers-color-scheme: light)" ...>` and a corresponding dark version. - Method 2 (Markdown): Code snippet showing `![Logo](...#gh-dark-mode-only)` and `![Logo](...#gh-light-mode-only)`. - Visual Output: Arrows point from the code to two versions of the "ariakit" logo—one optimized for a dark background (white text) and one for a light background (black text).
A 2x2 grid showcasing different designs for a "Delete" button. The top left shows a dark-mode ghost style with orange text. The top right is a light-mode outlined style with dark red text. The bottom left features a solid bright red button, while the bottom right shows a solid dark maroon button.
Collection of various UI button styles including primary, secondary, icon, and dropdown variants
Infographic titled "CSS 🤝 Math" demonstrating algorithmic design. - Top: A rendered "Technology" button with a white checkmark icon. - Bottom: An annotated version of the same button showing the underlying CSS logic. - `--py: 0.875em` (vertical padding) is the single source of truth. - `--px` (horizontal padding) is derived via: `calc(var(--py) + (1lh - 1cap)/2)`, where `1lh` is line-height and `1cap` is cap-height. - The icon's size is set to `1lh`. - The icon's right margin is adjusted with: `calc(var(--py) - var(--px))` to visually center the icon relative to the text and padding.
A UI kit display showing different states of a "Programming" choice chip. It includes unselected states with empty circular checkboxes, selected states with blue checkmarks and borders, variants with icons on the right, and different layout alignments (checkbox on left vs right).
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.
A UI comparison showing two buttons with icons. On the left (marked with a green check), the icon is centered within the blue square highlight on the button's left side. On the right (marked with a red X), the icon is positioned awkwardly, not centered within the red square highlight area.
Terminal output from a test runner (likely Vitest or Jest) showing successful results. "Test Files" shows 1 passed, "Tests" shows 735 passed. The run started at 19:08:16 and took a duration of 65ms.
Screenshot of a post by Dmitrii Kovanikov (@ChShersh). He writes about struggling to learn opinionated frameworks like Tailwind CSS, stating, "I can't force myself to learn 600 CSS classes someone just came up with. It's not fundamental knowledge." An attached image shows a code editor full of Tailwind classes alongside a preview of a music card titled "Class Warfare" by The Anti-Patterns.
A code snippet of an anchor tag showing advanced syntax highlighting within the `class` attribute. Standard utilities like `relative` are blue. Modifiers such as `before:` and `hover:` appear in pink. Arbitrary values inside brackets, like `[-2px]`, are colored differently (yellow/orange) to distinguish them from standard class names.
Weekly downloads chart showing 505,108 with an upward trend
A side‑by‑side code comparison showing migration from TypeScript path aliases to Node.js imports. On the left, tsconfig.json defines `"paths": { "@/ *": ["./ *"] }`, used as `import "@/foo"`. On the right, package.json defines `"imports": { "#app/ *": "./ *" }`, used as `import "#app/foo"`. Red arrows point from the TS config to the package.json config and from the old import style to the new one.
Screenshot of a GitHub Sponsors message with the Octocat logo and the headline “You have a new sponsor!” The line below says “@thnxdev is now sponsoring @ariakit for $219.00 one time!”
Less noise, more browsing. Ora is an open-source macOS browser built with Swift and WebKit. Fast, secure, and native Arc alternative that puts users first with smooth tab management, spaces, vertical sidebar, and many more.
Ranked proposals card for “CSS @container style()” with move up/down controls
Animated loader with lightbulb icon and “Booting WebContainer”
Dark‑mode “Can I use”‑style chart titled “CSS at‑rule: @container: Style queries for custom properties.” Global support shows 88.04%. Grid columns list Chrome, Edge, Safari, and Firefox with color‑coded version ranges: Chrome and Edge show support from 111+; Safari shows support from 18.x and also 26.x/TP; Firefox shows support from 144+. Earlier ranges are marked in red (unsupported).
Dark‑mode split view of two documentation pages. Left: “Disclosure” for Ariakit React; right: “Disclosure (React Aria).” Each page has an intro sentence about using the Disclosure component to build collapsible content, a pill tag (“Ariakit React” or “React Aria”), and a “Basic Example” card showing an expanded disclosure titled “How do I get started?” with two paragraphs. Small action icons (preview eye, code, external) sit above the example on both sides.
Scrolling through a web page with several UI and code examples
Hovering over an anchor and its tooltip with a magnifier tool that follows the cursor position
Using the browser's Find in Page to automatically open a nested disclosure widget when the search text matches
Interacting with nested disclosure widgets
Toggling an animated sidebar
Three side‑by‑side docs sidebars with high contrast
A triptych of a documentation navigation sidebar for “Acme Corp,” each panel using a light gray surface with a blue triangular logo at the top. The “Getting Started” section (rocket icon with a down caret) is open, revealing four items: Introduction, Installation (displayed as the current page with a white rounded pill and subtle shadow), Quickstart, and Editor Setup. Lower in the list are two collapsed groups—“Guides” (document icon) and “Resources” (stacked‑layers icon)—each with a right‑pointing chevron. The three columns illustrate subtle style variations (e.g., faint vertical guide line and spacing), but the structure and the Installation selection remain the same across all three.
Interacting with a sidebar in light and dark modes
Register form with name, email, and interest chips; Finance and Health selected
Interacting with a code block with embedded API docs that open when hovering over specific tokens
Interacting with list of disclosure widgets
Interacting with a preview/code block widget
Interacting with a segmented control widget
Interacting with a segmented control where the hover and checked pill positions animate across the interface
Screenshot of billing settings showing a masked Visa ending 3421 and recent $20 subscription charges
Screenshot from Weather app showing 37°, but feels like 40°
Elon Musk posts “True” and quote‑tweets Steven Barrett whose message reads: “The greatest lie of our time is pretending that Hitler’s National Socialists were ‘right wing’. All Socialists are Left Wing.” Visible engagement shows about 6.7K replies, 13K reposts, 87K likes, and 12M views.
Interacting with nested disclosure widgets