Claim Ownership

Author:

Subscribed: 0Played: 0
Share

Description

 Episodes
Reverse
DevTools Mini Series continues, this time on interactions. Una Kravets and Adam Argyle are joined by Jecelyn Yeen to discuss interaction, and interaction inspection/ debugging in DevTools.  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
DevTools Mini Series continues, this time on accessibility tooling. Una Kravets and Adam Argyle are joined by Jecelyn Yeen to discuss how DevTools can help you discover and fix accessibility issues.   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
DevTools Mini Series continues, this time on layout. Una Kravets and Adam Argyle are joined by Jecelyn Yeen to discuss an overview of how DevTools can help you create and debug layouts.   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
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
032: Page Media

032: Page Media

2021-03-0221:53

In this episode we talk about page media queries and all the ways you can pivot your styles based on device capabilities, viewport size, etc.    Links Media Queries → http://goo.gle/2MhYfR2 Scripting → http://goo.gle/2Mdan5E The 'display-mode' media feature → http://goo.gle/2NoFr3c Prefers-* Security and Privacy → http://goo.gle/3kfwUM0 CSS Color Adjustment → http://goo.gle/3qLkduJ   The CSS Podcast #CSSpodcast
053: Season 2 wrap up

053: Season 2 wrap up

2021-08-0335:45

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
051: Styling SVG in CSS

051: Styling SVG in CSS

2021-07-2032:541

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
049: Accessibility

049: Accessibility

2021-07-0631:38

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
048: Touch interaction

048: Touch interaction

2021-06-2925:54

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
046: Custom properties

046: Custom properties

2021-06-1527:291

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
045: Scroll timeline

045: Scroll timeline

2021-06-0822:26

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
044: Transitions

044: Transitions

2021-06-0126:18

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
043:  Containment

043: Containment

2021-05-2614:51

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
042: Snap points

042: Snap points

2021-05-1116:49

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
041: Transforms

041: Transforms

2021-05-0430:241

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
040: @font-face

040: @font-face

2021-04-2723:52

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
Comments (9)

ID22165180

Really good analogy. I always had trouble internalizing and remembering the box model. Now I can visualize it. I’m sure it will help in my future work. I absolutely love it.

May 21st
Reply

Егор Жигулин

мужик - ебаный полупидор. интонирует, как шлюха на выгуле.

Sep 15th
Reply

Mostafa A.

Great job, guys. I really enjoy the podcast and appreciate your hard work. keep 'em coming 💙

Sep 4th
Reply

sky

great episode guys , but it would be nice if maybe you could clarify a little more about the key topics (I e origin , specificity etc etc .) , I only understood what all the key topics were at the end lol.

Apr 3rd
Reply

Denys Tsybka

Hi! I am really enjoying the podcast and want to thank you personally for the amazing work you are doing. Also I want to ask you to make a podcast about sizing one day. All these, px, em, rem, etc and what is the best way to use them. I am learning web development myself and it is so far very confusing to me. Thank you so much!!! Sincerely,  Denys

Apr 1st
Reply

sky

great podcast guys , loving the enthusiasm lol , keep it up.

Mar 18th
Reply

Denys Tsybka

Easy to listen and understand! I would like to suggest that you use analogies every time, when explaining something. It makes it much easier to visualize for those, who don't have access to computer or internet at the moment. Thank you very much for the job you are doing!!!

Mar 17th
Reply

Ross Savill

Really cool and easy to understand podcast, subscribed!

Mar 14th
Reply

Amir Naziri

This is Awesome. Keep it up! ✌️

Mar 14th
Reply
Download from Google Play
Download from App Store