googlechromedevelopers

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

(November 19, 2020)

Rick meets with Steve Souders, who created the HTTP Archive project 10 years ago this month, to talk about its origins and reflect on it's growth. They're also joined by Patrick Meenan, creator of WebPageTest and maintainer of HTTP Archive, along with Paul Calvano, past State of the Web guest and also a maintainer of HTTP Archive.

For links to everything we discussed → https://goo.gle/3nfhjfA

(February 5, 2020)

In this episode of the State of the Web, Rick Viscomi talks with Brad Frost (Web Designer and author of Atomic Design) about design systems highlighting web design, material design, and more. Let’s get started! 

For more info about everything discussed in this video, check out the original video→ https://goo.gle/3jqkq36 

(January 8 , 2020)

In this episode of the State of the Web, Rick Viscomi talks with Marcy Sutton (Head of Learning at Gatsby Inc) about web accessibility. Learn about what accessibility means, the impact of the Domino’s ruling, and more in this episode.

For more info about everything discussed in this video, check out the original video → https://goo.gle/2B37mPY

(November 6, 2019)

Rick and Doug talk about the best practices for including video on your page and some reasons you might actually *not* want to include video. It may seem like a daunting task given the array of configuration and hosting options, but, like images, there are simple best practices to ensure that there is a healthy balance between visual quality and the user experience.

For more info about everything discussed in this video, check out the original video → https://goo.gle/32uWF47

(October 2, 2019)

In this episode of the State of the Web, Rick Viscomi talks with Ben Morss (Developer Advocate at Google) about AMP. Learn how and why AMP got started, why you might want to use it on your website, and what new features are in its pipeline.

For more info about everything discussed in this video, check out the original video→ https://goo.gle/2ZM1Nxt  

(September 4, 2019)

Developing for the global web is so much more than just translating content into multiple languages. In this episode of the State of the Web, Rick Viscomi (Developer Programs Engineer at Google) sits down with Andrey Sitnik (Lead Frontend Engineer at Evil Martians) to talk about considerations for globalization and the tools available to web developers.

For more info about everything discussed in this video, check out the original video→ https://goo.gle/2Z5dYq6

(June 5, 2019)

Rick Viscomi and Colin Bendell (CTO Office at Cloudinary) discuss the state of images. Colin explains the basics like the conventional wisdom of choosing file formats, how to fine tune image quality, and serving responsive images. Rick and Colin also discuss some of the more advanced topics like the roles of human biology, automation, and security.

For more info about everything discussed in this video, check out the original video→ https://goo.gle/3e22M2A

(July 3, 2019)

When we pull stats about the state of the web, like the percent of websites adopting HTTPS or the median amount of image bytes per page, these figures come from web transparency datasets on BigQuery like the HTTP Archive and Chrome UX Report. In this video, Rick Viscomi and Felipe Hoffa (BigQuery Developer Advocate) talk about the capabilities of BigQuery and how to get started with it.

For more info about everything discussed in this video, check out the original video→ https://goo.gle/2C3kWD1