Log inSign up
Image
user avatar
Haz
@diegohaz
Author of @ariakitjs. Ex Automattic, WordPress. Posts about Design, JS, CSS, a11y. Neurodivergent, dad.
πŸ‡§πŸ‡·πŸ‡ͺπŸ‡ΈπŸ‡¦πŸ‡ͺ
instagram.com/ariakitjs
Joined July 2009
123
Following
12.1K
Followers
  • Pinned
    user avatar
    Haz
    @diegohaz
    Jan 24
    I've wanted to write this for a long time. It's both advice and a love letter to Design. 5 min read.
    user avatar
    Haz
    @diegohaz
    Jan 23
    Article cover image
    Why Every Developer Should Become a Designer in the Age of AI
    I have been obsessed with Design since I was a teenager, but not for the reasons you might expect. It wasn’t about making things look β€œpretty”. It was a survival mechanism. Growing up, my...
    13K
  • user avatar
    Haz
    @diegohaz
    Nov 8, 2022
    TIL you can render diagrams on GitHub using markdown 😱 Markdown / Preview
    Markdown file with the following contents: ```mermaid stateDiagram-v2 [*] --> Still Still --> [*] Still --> Moving Moving --> Still Moving --> Crash Crash --> [*] ```
    State diagram with the following states: Still, Moving, Crash.
  • user avatar
    Haz
    @diegohaz
    May 20, 2022
    GitHub is adding some fancy blockquotes to markdown previews (documents, issues, PRs, discussions, etc.) Markdown / Preview
    On the left, there are two examples of markdown code: > **Note** > This is a note > **Warning** > This is a warning On the right, it shows how GitHub renders it in the document preview. They're regular blockquote. But the "Note" word is blue with an info icon on the left. The "Warning" word is yellow with a warning icon.
  • user avatar
    Haz
    @diegohaz
    Dec 31, 2022
    </2019> <2020> <2021> <2022></2022> </2021> </2020> <2023>
    284K
  • user avatar
    Haz
    @diegohaz
    Oct 26, 2023
    Replying to @Rainmaker1973
    "Volunteers"
    Image
    GIF
    285K
  • user avatar
    Haz
    @diegohaz
    May 28, 2022
    Did you know about queueMicrotask() in JavaScript? It's pretty handy.
    A snippet of code that declares an onClick function where a focus event is triggered on another element. Full code: function onClick() { // ❌ Focus will fire on another element before the // click event finishes bubbling. You may get events // in the wrong order on parent elements. anotherElement.focus() // βœ… By queuing a microtask, the click event will be // completely done when the focus event fires. queueMicrotask(() => { anotherElement.focus() }) }
  • user avatar
    Haz
    @diegohaz
    Sep 21, 2022
    Unpopular opinion: snake_case is much easier to read than camelCase, and I wish the JavaScript community agreed with me. πŸ₯²
  • user avatar
    Haz
    @diegohaz
    Nov 11, 2022
    Render maps on GitHub using markdown. πŸ’― Markdown / Preview
    Markdown code with the following contents: ## Location ```geojson { "type": "FeatureCollection", "features": [ { "type": "Feature", "properties": {}, "geometry": { "type": "Polygon", "coordinates": [ [ [ -0.12729298301002245, 51.53284601937814 ],
    Markdown document preview with the title "Location" and a map with a purple circle on London.
  • user avatar
    Haz
    @diegohaz
    Sep 11, 2022
    React is dying.
    Chart showing npm downloads of Angular, React, Vue, and Svelte, for the past 5 years. - React had 1.3M downloads in 2017; 15.7M in 2022. - Angular, 433k in 2017; 3M in 2022. - Vue, 200k in 2017; 3.5M in 2022. - Svelte, 3k in 2017; 370k in 2022.
  • user avatar
    Haz
    @diegohaz
    Mar 7, 2024
    Just another day working with TypeScript.
    The following TypeScript code shows a type error when passing the value constant to the setState function: if (value === undefined) return; store.setState(key, value);
    The following TypeScript code doesn't show any type error: if (value === undefined) return; if (value === undefined) return; store.setState(key, value);
    558K
  • user avatar
    Haz
    @diegohaz
    May 14, 2019
    A year ago I left my job to dedicate myself to this open source project. πŸŽ‰ Announcing Reakit v1 πŸŽ‰ πŸ‘‰ reakit.io This is the best project I’ve ever done in my 17 years of programming. I’m sure it'll help many companies ship accessible web apps with ease. ♿️
    Image
    00:00
  • user avatar
    Haz
    @diegohaz
    May 11, 2022
    TypeScript protip: accept any string, but suggest some specific values on autocomplete. typescriptlang.org/play?#code/C4T…
    A snippet of TypeScript code that defines a StringWithAutocomplete abstract type. An editable text version is available on the link in the tweet.
  • user avatar
    Haz
    @diegohaz
    Feb 18, 2022
    πŸ”΄ Annoying sub-menus πŸ”΅ and how to fix them.
    Image
    GIF
  • user avatar
    Haz
    @diegohaz
    May 18, 2022
    Did you know you can use the built-in browser validation API with JavaScript to control how error messages are rendered? Besides the simplicity, you also get i18n for free. ✨
    A snippet of code that uses the element.validity.valid and element.validationMessage properties. Full code: const [error, setError] = useState("") function onBlur(event) { if (event.target.validity.valid) { setError("") } else { setError(event.target.validationMessage) } } <div> <input minLength={3} onBlur={onBlur} /> <div>{error}</div> </div>
    A screenshot of a page with an input filled with a single character and a styled error message saying, "Please lengthen this text to 3 characters or more (you are currently using 1 character)".