Hi, I'm Josh! I'm a frontend developer with a passion for open source, static analysis, and the web. I'm a full time open source maintainer and work on projects in the TypeScript ecosystem such as typescript-eslint and TypeStat. I'm also the author of the Learning TypeScript book, published by O'Reilly.

Josh Goldberg

Type-Safe Style Systems: The Future of CSS

Most CSS developers today write visual styles in terms of what you literally see: exact color values, size numbers, and so on. But what if you could write styles as a function of how they fit into your design system? And what if you could get type safety in specifying and using those values, including in responsive props?

This talk will dive into some of the key features and flaws in many design system builders today such as Chakra UI and Tailwind. We'll establish what the best next steps for design systems should be with type-safe TypeScript APIs and performance both for prebuilt pages and at runtime.

Open Source Developer, Self-Employed

Type-Safe Style Systems: The Future of CSS - Josh Goldberg

Design systems -collections of common components, colors, and other constants- are a key way to scale teams and web applications on the modern web. They're particularly handy for deduplicating frontend development costs for micro frontends and remote teams. But how do you create one from scratch -- or, much more commonly, in-flight from an existing service?

Workshop description:
This hands-on workshop will take you through three stages of crafting your design system:
Part 1 (Design): Extracting colors, spacing, and typography from your existing brand. We'll look at an example site that has a rough collection of variant UIs, and trim the variants down to a consolidated set.
Part 2 (Design+Dev): Creating components following standard Atomic Design using the first day's designs. We'll cover atoms, molecules, and so on, match the design sets to their categories, and implement them in a React + CSS variables design system.
Part 3 (Design+Dev): Fleshing out components and documenting usage with Storybook and TypeScript. Now that we have our basic design system, let's go one by one and swap out the preexisting components and designs on the site!

Pre-requisites

Intermediate React and CSS knowledge.

Josh Goldberg

About

Watch on YouTube

Type-Safe Style Systems: The Future of CSS - Josh Goldberg

Building a Design System Mid Flight - Josh Goldberg