Josh Black

Josh Black

@josh.black

Building a design system at GitHub. Previously worked on the Carbon Design System.

769 followers130 following94 posts

Josh Black
@josh.black

Using more and more CSS features has also been such a fun knock on effect of this transition, it really showed how willing we are to adopt new things and use them when they allow us to improve the overwll experience and ship less JS

Josh Black
@josh.black

Things like container queries, anchor positioning, layers alongside great additions like popover, dialog, and invoke commands has been so much fun 🥳

Josh Black
@josh.black

It was a lot of fun going through this experience. Definitely a big difference between Carbon and Primer has been how much closer I am to production when it comes to the design system and shipping changes

Josh Black
@josh.black

It's been wild catching up on LLM stuff after being out on parental leave for a bit 😵‍💫 One of the biggest things that came up when working on Primer for me was trying to find a way to answer the question "does this make things better, or not?" This lead to a fun project: github.com/primer/agent...

View full thread
Josh Black
@josh.black

It will be interesting how useful this will be looking forward 👀 It feels so helpful for making sure tools we ship actually do _something_ in terms of improving outcomes. I also hope it will not only let us make helpful additions over time, but also removals as models change over time

Josh Black
@josh.black

Super curious what other folks are doing in this space 👀 If you have a project or technique that you've found helpful would love to hear about it! I would imagine we're all on some part of this same journey as we figure this out for our own design systems

Josh Black
@josh.black

It's been wild catching up on LLM stuff after being out on parental leave for a bit 😵‍💫 One of the biggest things that came up when working on Primer for me was trying to find a way to answer the question "does this make things better, or not?" This lead to a fun project: github.com/primer/agent...

Josh Black
@josh.black

So many LLM resources were flying around, from MCPs to skills to instructions to sub-agents 😅 I really wanted to find a way to create experiments to compare these different ways of doing things against scenarios that I cared about (and could deterministically test against)

Josh Black
@josh.black

Under the hood, all this really does is bring in the different scenarios into a fresh Docker container and run the prompt using Copilot CLI. But it was cool to start seeing how different performed across not only the scenarios but against different models too

Josh Black
@josh.black

Apple Health has decided that now that I have a newborn it is time to talk about my sleep score 😂 I get it, Apple, I also want better sleep at nights but that might not happen for a bit 😅🥲

Josh Black reposted

Shaun Bent
@shaunbent.co.uk

A few years back, I nearly wrote "The Fallacy of Federated Design Systems." Then @nathanacurtis.bsky.social beat me to it. But what happens when you try it anyway? At Spotify, I watched federated fail twice, resulting in a huge number of barely reused components and damaged trust in design systems.

shaunbent.co.ukWhy Federated Design Systems Keep FailingWhy do federated design systems keep failing? I watched it happen twice at Spotify. Here's what actually happened, where they broke down, and why centralised models usually work better.
Josh Black
@josh.black

For folks that do truncation patterns in their components, how do you handle SC 1.4.4? We often see requests for truncation in different parts of the UI in GitHub but it seems difficult to satisfy this in a lot of scenarios 🤔

Josh Black
@josh.black

Relevant section: “…truncation is acceptable if the component's full content is available on focus or after user activation and an indication that this information can be accessed, is provided to the user in some way besides the fact that it is truncated.”

Josh Black
@josh.black

This reminded me that if you like Cholula definitely give Valentina a try 😋

Chris Coyier@chriscoyier.net

The Great (Refrigerator) Divide I like a good hot sauce. It's not, like, my personality, but I enjoy them. There are enough different hot sauces that having a bit of a collection of them is reasonable. Cholula is a mainstay, working equally well on Mexican and egg-based dishes. Although admit…

chriscoyier.netThe Great (Refrigerator) DivideI like a good hot sauce. It's not, like, my personality, but I enjoy them. There are enough different hot sauces that having a bit of a collection of them is reasonable. Cholula is a mainstay, working equally well on Mexican and egg-based dishes. Although admit Tabasco is my general go-to. The green Tabasco works particularly well on Chipotle for whatever reason.
Josh Black
@josh.black

For folks using custom elements, how do you deal with styles when doing declarative shadow DOM? 🤔 Specifically would love to avoid duplication and also would like the styles present in the initial payload instead of styles having to be parsed from the JS bundle and applied during hydration

Josh Black
@josh.black

Could be cool to try something like this @katielangerman.bsky.social @sid.st 👀👀

Gergely Orosz@gergely.pragmaticengineer.com

Linear has a 30-minute weekly meeting called "Quality Wednesdays." I sat through one and WOW Devs show a quality or perf-related fix they did last week. It can be big, or small. We went through 17 issues, from massive backend performance wins, to this tiny one. Can you see it?

Josh Black reposted

Eric Bailey
@ericwbailey.website

Focus rings! Plural! I wrote for @piccalil.li about how to create a branded double ring focus effect that is dynamically generated based on the interactive element's text color. piccalil.li/blog/taking-...

piccalil.liTaking a shot at the double focus ring problem using modern CSSA double focus ring is really useful in general but especially so with complex, themed systems. Eric Bailey shows us how to develop a really smart system, using modern CSS.
Josh Black
@josh.black

Finally got around to making an MCP server for Primer: github.com/primer/react... 👀 It's been interesting playing around with tools to provide more context to agents, specifically around our components/tokens/icons/etc and their guidelines. Still holding my breath to see how much it can help 😅

Josh Black
@josh.black

Have been trying to use more custom elements for things but I feel like I keep hitting a wall 😰 Does anyone have a good example of a library that handles things like tooltips, comboboxes, etc well? 👀

Josh Black
@josh.black

For example, with a tooltip it'd be awesome to have a component with a slot for the trigger and the content but as soon as I mess around with the Shadow DOM I lose the ability to relate these with attributes for a11y. I had assumed this is what ElementInternals was used for but now I'm not sure 🤔

Josh Black
@josh.black

Having the hardest time getting events from custom elements working alongside React components in Next.js 🤔 Anyone else have luck with this? It seems to work fine standalone but as soon as I'm in Next.js-world the events stop being fired. I assume something is going on due to SSR? But who knows 🤷‍♂️

Josh Black
@josh.black

When it comes to helpful layout components, what have folks found helpful to include in their design systems?? 🤔 In the past I’ve done ones for Grid, Stack, or a UI shell / page layout type one but would love to know if there are others people like to include 👀

Josh Black
@josh.black

After doing design systems work for a bit, the most surprising skill to have learned is how to gradually and safely migrate code (and how to design code to make that easier in the future 😅) With Primer, we own more of the migrations compared to Carbon and it's been interesting comparing the two

Josh Black
@josh.black

The field in the project is especially cool since it let's us annotate issues with a number of the `sx` usages impacted by taking on the work in a particular area (basically codeowners) and is updating daily as the migration is ongoing.

Josh Black
@josh.black

Has anyone had success with an MCP server for their design system?? After seeing the shadcn features for their registry would love to try it out and see if it helps or not 🤔

Josh Black
@josh.black

I’d love to start writing more (especially about design systems) this year and I’m curious if I did if there are any topics that folks would be interested in here 👀

Josh Black
@josh.black

For folks that have made similar tools / or track usage at their company, I'm super curious what you've found most helpful when shipping this kind of tool for your team 👀

Josh Black
@josh.black

One technique that's been invaluable for releasing design systems work for me has been feature flags. It was awesome using them for the last major release of Carbon and now being able to use them for our CSS Modules migration work for Primer has been so nice.

Josh Black
@josh.black

Being able to try things out before fully committing is always helpful (really helps me build confidence when I'm not so sure about something 😅). Also great for running experiments in production to help validate certain types of changes.

Josh Black
@josh.black

Have been going through Converge 2024 talks this week and now I'm curious what is everyone's favorite Design Systems talk from the year?? 👀

Josh Black
@josh.black

Was curious for other folks doing design systems if you have a good way to get the TypeScript types for your package and components in it? 👀 Have been trying to look into different tools (api extractor, typedoc, docgen, etc) for this but nothing seems to quite cover everything yet.

Josh Black
@josh.black

Honestly have been loving hanging out here this week, the vibes are good 🥰 I’ve been so bummed about Twitter for so long and it’s been a breath of fresh air here.

You are up to date.