thecsspodcast

Welcome to the DevTools Mini Series for The CSS Podcast. On this episode, Una Kravets and Adam Argyle are joined by Jecelyn Yeen to discuss an overview of color and shared tips.

Una Kravets (co-host)

Twitter | Instagram | YouTube

Making the web more colorful ✨🎨  Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬 

Adam Argyle (co-host)

Twitter | Instagram | YouTube

@GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘 

Jecelyn Yeen

Twitter | Facebook | YouTube

Developer advocate @ChromeDevTools 📐🤩

The CSS Podcast

#CSSpodcast

We’ve reached the end of season 2 of the CSS Podcast. In this closing episode, we recap every episode by sharing our favorite tips and learnings from the last few months!

Episodes reminisced
E30 → Lists
E31 → @rules
E32 → Page Media Queries
E33 → Preference Media Queries
E34 → Overflow
E35 → Background
E36 → Text & Typography
E37 → Cursors & Pointers
E38 → N-Match Notation
E39 → Paths, Shapes, Clipping and Masking
E40 → @font-face
E41 → Transforms
E42 → Snap Points
E43 → Containment
E44 → Transitions
E45 → @scroll-timeline
E46 → Custom Properties
E47 → :is(), :where(), and @nest
E48 → Touch Interaction
E49 → Accessibility
E50 → Inherit, initial, inset, and revert
E51 → Styling SVG
E52 → Counters & @counter-style

Una Kravets (co-host)
Twitter | Instagram | YouTube
Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬

Adam Argyle (co-host)
Twitter | Instagram | YouTube
@GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘

The CSS Podcast
#CSSpodcast

Count on The CSS Podcast to cover counters. Una and Adam teach all the ways to create, reset, and update counters. Use them for lists, games and more!

Links

Counters Level 3 → https://goo.gle/3f2BP18 

Pure CSS Games Collection → https://goo.gle/3l0wrQe 

Una Kravets (co-host)

Twitter | Instagram | YouTube

Making the web more colorful ✨🎨  Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬 

Adam Argyle (co-host)

Twitter | Instagram | YouTube

@GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘 

The CSS Podcast

#CSSpodcast

CSS and SVG are very intertwined, and you can create a lot of unique effects by combining the two. This episode dives into a few CSS + SVG tips and tricks, including where and how to use SVG on your page, icon systems, color theming, adding animations, filter effects, and more!

Links

Solved with CSS: Colorizing SVG → https://goo.gle/3x0Uilb

SVGOMG  → https://goo.gle/3hS6ksJ

SVG spec  → https://goo.gle/3wVgRYe

Una Kravets (co-host)

Twitter | Instagram | YouTube

Making the web more colorful ✨🎨  Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬 

Adam Argyle (co-host)

Twitter | Instagram | YouTube

@GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘 

The CSS Podcast

#CSSpodcast

This episode is about the very available CSS values inherit, initial, unset and revert. We'll help explain what they are, what they do and when to use them.

Links

CSS Tricks Article → https://goo.gle/2U5PxJw 

Quirksmode Article → https://goo.gle/2TY80rz 

Una Kravets (co-host)

Twitter | Instagram | YouTube

Making the web more colorful ✨🎨  Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬 

Adam Argyle (co-host)

Twitter | Instagram | YouTube

@GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘 

The CSS Podcast

#CSSpodcast

Today we are breaking down accessibility related styling choices to ensure a better user experience for all of your users. These include focus visibility, keyboard navigation, and more! 

Links

#lintHTMLwithCSS - https://goo.gle/3dSMIlU 

CSS Speech Level 1 - https://goo.gle/3xrg3vc 

Media Queries Level 5 - https://goo.gle/3qUcBXz

Una Kravets (co-host)

Twitter | Instagram | YouTube

Making the web more colorful ✨🎨  Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬 

Adam Argyle (co-host)

Twitter | Instagram | YouTube

@GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘 

The CSS Podcast

#CSSpodcast

Today we touch on touch interaction. Covering CSS's ability to change a user's touch experience with properties like touch-action, scroll-behavior, user-select and more.

Links

MDN - https://goo.gle/3y8My14 

Spec - https://goo.gle/3dm4opF 

Una Kravets (co-host)

Twitter | Instagram | YouTube

Making the web more colorful ✨🎨  Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬 

Adam Argyle (co-host)

Twitter | Instagram | YouTube

@GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘 

The CSS Podcast

#CSSpodcast

In this episode, Adam and Una explore some CSS syntactic sugar! They discuss the :is and :where functions, how they differ, and how they’re paving the way for nesting. 

Links

Adam's post on web.dev → https://goo.gle/3qhYifl 

MDN :is() → https://goo.gle/3qgU0Vf 

Forgiving selector parsing → https://goo.gle/3xLTYHL 

Una Kravets (co-host)

Twitter | Instagram | YouTube

Making the web more colorful ✨🎨  Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬 

Adam Argyle (co-host)

Twitter | Instagram | YouTube

@GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘 

The CSS Podcast

#CSSpodcast

Custom properties, aka CSS variables, are runtime dynamic variables which allow you to store loose or typed values. They're free, super fast, improve code legibility, unlock powers, are reachable with JavaScript, animateable, overall super fun and, well, kind of complex.

Links

Module Level 1 → https://goo.gle/3wtADL1 

82% of developers get this 3 line CSS quiz wrong → https://goo.gle/2U8oTPR 

A user’s guide to CSS variables → https://goo.gle/3zlmscV 

Locally Scoped CSS Variables: What, How, and Why → https://goo.gle/2KGESwR 

GitHub → https://goo.gle/3iOiVOa 

Una Kravets (co-host)

Twitter | Instagram | YouTube

Making the web more colorful ✨🎨  Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬 

Adam Argyle (co-host)

Twitter | Instagram | YouTube

@GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘 

The CSS Podcast

#CSSpodcast

In this episode we deep dive the experimental Scroll Animations spec to bring you the breakdown on @scroll-timeline powered CSS animation. Learn about scroll-linked animations vs scroll-triggered animations and how to orchestrate scroll interactions with elements of the page. 

Links

Scroll animations level 1 draft →https://goo.gle/3pvWX49 

Polyfill → https://goo.gle/3x8CQvw 

GUI Challenges - Tabs → https://goo.gle/34YYl5J 

Bramus's talk → https://goo.gle/2TPs7HU 

Una Kravets (co-host)

Twitter | Instagram | YouTube

Making the web more colorful ✨🎨  Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬 

Adam Argyle (co-host)

Twitter | Instagram | YouTube

@GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘 

The CSS Podcast

#CSSpodcast

In this episode it's all about transitions. What you can and can't transition, it's limits, and it's super powers. We'll finish up with ways to trigger transitions and a few tips and tricks.

Links

CSS Transitions https://goo.gle/3vIDi31 

Cont. https://goo.gle/3pcpueY 

Una Kravets (co-host)

Twitter | Instagram | YouTube

Making the web more colorful ✨🎨  Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬 

Adam Argyle (co-host)

Twitter | Instagram | YouTube

@GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘 

The CSS Podcast

#CSSpodcast

The CSS contain property can give you some serious performance gains by adjusting how and when the browser renders elements. In this episode, we go over all the different types of containment, and where you might use them.

Links

MDN doc on containment → https://goo.gle/3fRejEd 

Content-visibility → https://goo.gle/3wBMB52 

Una Kravets (co-host)

Twitter | Instagram | YouTube

Making the web more colorful ✨🎨  Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬 

Adam Argyle (co-host)

Twitter | Instagram | YouTube

@GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘 

The CSS Podcast

#CSSpodcast

In this episode we're guiding scroll areas into their peaceful resting places, maintaining alignment, keeping visual harmony, and improving the overall experience with the content.

Links

Scroll Snap Level 1 draft → https://goo.gle/2R9hUow 

overscroll-behavior → https://goo.gle/3o7vLYE 

scroll-behavior → https://goo.gle/3uKvkWU 

Una Kravets (co-host)

Twitter | Instagram | YouTube

Making the web more colorful ✨🎨  Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬 

Adam Argyle (co-host)

Twitter | Instagram | YouTube

@GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘 

The CSS Podcast

#CSSpodcast

In this episode we enter the 3rd dimension with CSS, placing and manipulating objects in 3D space with the transform property. 2D and 3D transforms are spectacular ways to animate and create a sense of depth in a design, follow along for how it all works.

Links

CSS Transforms Module Level 1 → https://goo.gle/2RsETdW 

CSS Transforms Module Level 2 → https://goo.gle/3tdGeCF 

Chaining transforms → https://goo.gle/3nKMKQp 

Una Kravets (co-host)

Twitter | Instagram | YouTube

Making the web more colorful ✨🎨  Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬 

Adam Argyle (co-host)

Twitter | Instagram | YouTube

@GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘 

The CSS Podcast

#CSSpodcast

In this episode Una and Adam talk about font adjustments when being used within @font-face. When fonts are loaded, there's an opportunity to provide default values and fine tunings.

Links
@font-face on MDN → https://goo.gle/2S3DAmp 
CSS Fonts Level 4 → https://goo.gle/3sGwO2s 

The CSS Podcast
#CSSpodcast

Paths, shapes, clipping, masking, oh my! There’s so much you can do with CSS shapes—from creating transition effects to creating interesting and organic typographic layouts. In this episode we dive in to how to wrangle shape effects in CSS.

Shapes Level 1 → https://goo.gle/3gkJAkG 

Shapes Level 2 →  https://goo.gle/3amJLIk 

Masking Level 1 →  https://goo.gle/3nb6Bb5 

Clippy tool → https://goo.gle/3sIM0w9 

clip-path transitions → https://goo.gle/3tGx96I 

CSS Masking → https://goo.gle/3goEcNt 

The CSS Podcast

#CSSpodcast

Welcome back to The CSS Podcast, where we cover all things CSS from accessibility to c-index. Today, Una and Adam will discuss a micro syntax for pseudo class notification when working with nth-child. 

Selectors level 3 →  https://goo.gle/3dWB48G 

Useful nth-child recipes → https://goo.gle/3e102DE 

Nth-child syntax → https://goo.gle/328nA4b 

Quantity queries → https://goo.gle/3a4NPwT 

Solved with CSS! Nth-tricks → https://goo.gle/3g65Wq0 

The CSS Podcast

#CSSpodcast