Web Rush
Episode 133: How to Design CSS for Design and Performance with Nicole Oliver
Recording date: April 1, 2021
John Papa @John_Papa
Ward Bell @WardBell
Dan Wahlin @DanWahlin
Craig Shoemaker @craigshoemaker
Nicole Oliver @Nixallover
Brought to you by
-
Visit nx.dev to get the preeminent open-source toolkit for monorepo development, today.
Resources:
- Nrwl on Twitter
- Nicole on Web Rush episode 0027 talking about TypeScript decorators
- Nicole on Web Rush episode 0057 on Styling Modern applications
- CSS (for those who ignore it)
- Nx Developer tools
- Rubik’s cube
- What are CSS Design Tokens
- Angular Playground
- Angular Playground Visual Regression Utility
- Figma
- Storybook
- Storybook Visual Regression Testing
- Visual Regression Testing
- PurgeCSS
- Optimizing CSS for Production
- UnCSS
- Addy Osmani talking about purging CSS
- Find unused CSS with Chrome dev tools
- Angular Material CDK
- Bootstrap
- Bulma
- Tailwind CSS
- Funny Terrible UI Experiences
- User Inyerface is another fun example
- On Running
Timejumps
- 00:49 Battleship grey
- 02:25 Guest introduction
- 04:30 Decorating with CSS
- 06:05 CSS Performance
- 06:56 Sponsor: Nrwhl
- 07:36 Why care about the size of CSS?
- 13:18 How do you gather elements when starting a new project?
- 20:23 Do you create UI books or standards?
- 21:56 The story of storybook
- 25:27 One single CSS or multiple CSS files?
- 32:31 How do you decide when to put something in global vs components?
- 34:27 Sponsor: Ag Grid
- 35:32 Orphan styles
- 43:29 Some of the tools to use
- 47:18 Final thoughts
Podcast editing on this episode done by Chris Enns of Lemon Productions.