Web Rush

Episode 133: How to Design CSS for Design and Performance with Nicole Oliver


Listen Later

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
  • AG Grid

  • Nrwl

    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.

...more
View all episodesView all episodes
Download on the App Store

Web RushBy Dan Wahlin, John Papa, Ward Bell, Craig Shoemaker

  • 4.9
  • 4.9
  • 4.9
  • 4.9
  • 4.9

4.9

37 ratings