Best Nested Query Podcasts (2024)

1
090: Scroll-driven animations 46:33

4d ago46:33

46:33

In this episode our esteemed guest returns! This time to help us grok Scroll Driven Animation. Learn all about scroll(), view(), animation-timeline, timeline-scope, animation-range, and more. Power those animations with off-the-main-thread CSS scroll animation powers. Resources: Bramus's Demos: All mentioned Demos + Tools + Video Course + DevTools …

1
089: View transitions 41:51

11d ago41:51

41:51

In this episode Una and Adam bring on an esteemed guest Bramus, who brings us deep knowledge on View Transitions. These are easy to get started with but difficult to master, but not with Bramus here to teach us. He'll be covering introductory to advanced API features and a big bag of examples and demos. Resources: Developer Documentation → https://…

1
088: State queries 23:13

18d ago23:13

23:13

In this episode, Una and Adam discuss a future web capability that builds on container queries: state queries. From CSS, this feature will be able to detect if a container is overflowing, when an element is scroll snapped, and when an element is stuck from position: sticky. Resources: :stuck, :snapped, :on-screen, etc → https://goo.gle/3WVhSi6 stat…

1
19 - The Summer Extravaganza 1:00:35

28d ago1:00:35

1:00:35

We share our summer projects, including babies and GSAP. We figure out that some feature flags in Safari are just a checkbox and loop back to topics from our previous episode. We discuss how to do structured schema data and how Figma enables AI training by default. CSS can put Rob off these days. We re-discuss CH units and steal some buttons. Intro…

1
087: Anchor positioning 38:02

1M ago38:02

38:02

In this episode Una and Adam explain anchor positioning and all its amazing features. Resources: Introducing the CSS anchor positioning API → https://goo.gle/3SWrvM5 CSS anchor positioning → https://goo.gle/4dwgmd9 Tab’s talk from CSS Day → https://goo.gle/4ds8g5B Una's Anchor Tool → https://goo.gle/3yDYDSd Una Kravets (co-host) Twitter | Instagram…

1
086: Nesting 2024+ 8:10

2M ago8:10

8:10

In this episode Una and Adam catch you up to the latest syntax features of CSS nesting. Resources: Episode 47 → https://goo.gle/3SvM9T4 Episode 65 → https://goo.gle/3ygA7X1 CSS Nesting Update → https://goo.gle/3WHCRpK Una Kravets (co-host) Twitter | Instagram | YouTube Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face host of @t…

1
085: Linear easing function fun 16:10

2M ago16:10

16:10

In this episode Una and Adam cover the linear() CSS easing function that can create bounce and spring effects. Resources: Ep 22 on Animation → https://goo.gle/4frnp8y linear() generator → https://goo.gle/46xs2JZ Complex animation curves in CSS with linear() → https://goo.gle/4ftm0Oz Open Props premade spring and bounce variables → https://goo.gle/4…

1
18 - Are people using container queries? Transition to auto height, fit to width, Fig and Amazon Q, relative colors, nth-child, Things, and Markdown 56:11

2M ago56:11

56:11

In this episode we recorded a month ago, we establish that Jay is clearly running this show and Rob just sits there. We cover our experiences with the recent Statamic Flat Camp and discover that Jay procrastinates watering his plants. Also: using modern CSS features, transitioning to auto, relative colors, Rob yelling at the Markdown cloud and a wh…

1
084: Text Wrap 12:47

3M ago12:47

12:47

In this episode Una and Adam talk about text wrap, a great modern improvement to typography on the web platform. Learn how you can create logical layout rules for your headings and other copy with just one line of code. Resources: text-wrap on MDN → https://goo.gle/3zvwixd soft breaks → https://goo.gle/4cXKLAq Una Kravets (co-host) Twitter | Instag…

1
083: :has() tips and tricks 36:14

3M ago36:14

36:14

In this episode Una and Adam expand on episode 61 about :has() by focusing specifically on use cases, tips and tricks. Get inspired and discover new ways to make reactive UI from CSS. Resources: Ep 61 → https://goo.gle/4cID6pE Piccali → https://goo.gle/4ePKJMG Ahmad Shadeed → https://goo.gle/4bsk85F The Looper → https://goo.gle/3yKmXkI Una Kravets …

1
082: What's new in color & color functions 18:24

3M ago18:24

18:24

In this episode Una and Adam provide a color update, covering changes to the specs and new functions. Links RCS calc() tool → https://goo.gle/4cRRJHt Apple Annie CSS Color Modules and Changes, Part I → https://goo.gle/3xtTr2A Lea verou article on RCS for contrast → https://goo.gle/3L3x5YF Una Kravets (co-host) Twitter | Instagram | YouTube Making t…

1
081: Trigonometric Functions 43:04

3M ago43:04

43:04

In this episode Una and Adam share practical use cases, syntax and strategies for all the new math functions in CSS. From trig to algebra, they'll help you get a good idea on where and how these fit into your UI toolbelt. Links Ana Tudor tests your browser for CSS math function support → https://goo.gle/4cmBm5r Great guide and overview from Daniel …

1
80: Animating to and from top-layer 31:23

4M ago31:23

31:23

In this episode Una and Adam continue talking about dialogs and popovers, but this time it's all about animating them into and out of the top layer.. We'll be introducing starting-style, a new mode for transitioning discrete properties, and the overlay property for smooth entry and exit animations. Links: top-layer CSS spec → https://goo.gle/4c2elU…

1
79: Popover and Dialog 19:55

4M ago19:55

19:55

The CSS Podcast is back, with an episode highlighting the popover API and dialog element! Learn what they can do, and when to use which when. Links Popover API lands in Baseline → https://goo.gle/3Vo2dIs Dialogs and popovers seem similar. How are they different? → https://goo.gle/3wXD1z5 Dialog dilemmas and modal mischief → https://goo.gle/3R9nmDE …

1
17 - Mechanical keyboards, domain names, animating strokes, Vidstack 57:31

4M ago57:31

57:31

It has been a while. When we recorded this episode a while ago after a few drinks, and apparently it took Jay time to recover the edit. But here we are, with more profanity than usual. Sorry, not sorry. Jay spent a lot of money on hardware and a domain. We share what we've been working on, cover a lot of news and vacuum Jay's tiny London apartment.…

1
16 - Radical Design with Jack McDade, Flat Camp EU in Italy, Statamic v5 features, CMS Competitors & Ethics 1:05:38

6M ago1:05:38

1:05:38

Jack McDade joins us to talk about his brand new Radical Design Course. The three of us are all going to Flat Camp EU and it is just around the corner. Statamic will get a major version update soon and it contains some pretty exciting new features and enhancements. Lastly, there’s a very generous discount code for Radical Design in this episode as …

1
15 - Clients sliding into your DMs, cap units, Arc Search, Herd Pro, stylable switches, and overflow hidden is dead 51:16

7M ago51:16

51:16

After a two month recording pause including an in person meetup, we have a lot to go over. Like clients sliding into your DMS, the new Cap unit, Dune 2, and the use and misuse of uppercase text. We also cover Herd Pro, the switch property, overflow:clip, form-sizing, CSS Generators, typescale.com, a warning about evergreen browsers, kanban boards i…

1
14 - Em vs ch, pseudo alt text, animating summary/details, mechanical keyboards, grids and repeating gradients 51:15

9M ago51:15

51:15

Three minutes of Indiana Jones chat followed by em's vs ch units—we know how to bring in the New Year! Webkit has introduced alt text for pseudo-elements. The summary/details element may soon be animatable. We record on Blue Monday which cleary increases Rob his grumpiness towards the endless stream of AI content. Jay documents his journey into the…

1
13 - Christmas 2023, hanging punctuation, light & dark, Figma & Adobe, and GitHub Copilot as a useful AI 59:45

10M ago59:45

59:45

In our very first Christmas episode, Jay makes fun of Dutch again when English clearly lacks a very important word; Rob shares updates regarding his password manager changes and doesn't like big blobs of light. Tailwind gets :has(), Figma get a cool $1B, and something's up with Chrome dev relations. We chat about the most recent news in CSS, and Ja…

1
78: Season 4 wrap! 19:58

10M ago19:58

19:58

I can’t believe we’re already at the end of season 4! This season, we’ve been focusing on CSS gotchas and resolving these common CSS pitfalls. And alas, on our last episode of the season, we’re going to take a look back at all of those tips and tricks and pick some of our favorites to highlight in this recap episode. Links: Why isn’t percentage wor…

1
77: Why isn't percentage working here? 15:05

10M ago15:05

15:05

In this episode, Una and Adam talk about percentage resolution for various properties like font-size, padding height and width. They break down and explain why percentages may not work or may not be what you expected. Links → https://goo.gle/47XtWU1 Understanding CSS Percentage → https://goo.gle/3RhLJzG CSS Box Sizing Module Level 3 → https://goo.g…

1
12 - Side projects, politics, third-party cookie deprecation, little LDN meetup, CSS’s biggest year, and 1Password 47:40

10M ago47:40

47:40

With Jay back in London, we return to remote recording again. We talk about abandoned side projects before Rob finally strikes back regarding pronunciation. We also cover Dutch politics (sorry), trivia, Google’s Topics API, and a lot of CSS news, including scroll snapping v2. Rob shares his experience of moving from 1Password to iCloud Keychain, an…

1
76: Why isn't my element stuck where I wanted it to stick? 9:52

11M ago9:52

9:52

In this episode Una and Adam help you uncover moments where a sticky element isn't sticking. There are a couple of gotcha around implementing a sticky element and by the end of the show you'll know what they are and a few ways to work around them. Links: sticky stack - https://goo.gle/3QICxTz sticky desperado - https://goo.gle/3sC3OPj sticky slide …

1
11 - Laravel Precognition, Canvas, PostCSS stages, hipster animation, Safari goes scroll-driven, Passkeys & 1Password 54:04

11M ago54:04

54:04

Fireworks and popping beers. In this very first in-person recording, Rob gets flagged for proper pronunciation again. Jay has gathered more coffee knowledge. Rob doesn't spit out his wine when tasting. Last but not least, from the comfort of a fire stove, we laugh over vicar jokes and cover Laravel Precognition, Canvas, PostCSS, (scroll-driven) ani…

1
75: Why isn't my custom property the value I expect? 19:32

11M ago19:32

19:32

In this episode, Una and Adam discuss common gotchas with custom properties, which often feel fully reactive during use, but their limits and implementation details can popup at unexpected times and create a headache. They'll cover these situations and their solutions! Links: Value stages → https://goo.gle/3FDo7yA How custom property values are com…

1
74: How do I center a div? 17:01

12M ago17:01

17:01

In this episode we tackle one of the most asked questions of all CSS history.. how do I center this div? We'll cover multiple strategies that each have tradeoffs and super powers over each other. Links: Centering in CSS → https://goo.gle/3RRki02 Comparing grid and flex place-items and place-content → https://goo.gle/3ZE3NGM Centering in CSS: A Comp…

1
10 - From freelance back to full-time employment, with Ross Wintle. Duck Duck Go, Safari and CSS nesting news 1:00:44

12M ago1:00:44

1:00:44

After freelancing for ten years, Ross now works for WPEngine. He joins us to chat about his journey between the freelance and corporate worlds and the empowering revelation that everyone is creative. In the news, HTML introduces a brand-new search element, and CSS nesting is relaxing their requirement for ampersands—said in a Dutch/French accent. W…

1
73: Why is my animation glitching? 25:50

1y ago25:50

25:50

On this episode of the #CSSpodcast, we’re diving into how to deal with glitchy animations in your code base! Links: MDN transform-style - https://goo.gle/45YFu8B MDN backface-visibility - https://goo.gle/46mPvfE Una Kravets (co-host) Twitter | Instagram | YouTube Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face host of @toolsda…

1
9 - Age Gate Indexing, Opening Links In New Tabs, Stealing Design, CSS 48:57

1y ago48:57

48:57

Jay has an interesting time implementing Age Gate with search engines. We chat about the launch of our new Code Rush website, including decisions on opening links in new tabs, and designing á la Olivia Rodrigo—a world-famous pop star, for those that don’t know. Subgrid is upon us, and so is Google’s “Privacy Sandbox” which has garnered much debate …

1
72: Why does my gradient have muddy colors in the middle? 16:11

1y ago16:11

16:11

In this episode, we tackle the issues around getting undesirable gradient results. Sometimes it's you, sometimes it's the color space. We'll help you identify, assess and remedy muddy gradients. Links: HD color guide - https://goo.gle/3RhyvmP various gradients in color spaces - https://goo.gle/3Pc02TV modern css gradient tool - https://goo.gle/3P4K…

1
State of Web accessibility, ARIA in HTML, and missing UI patterns 1:00:06

1y ago1:00:06

1:00:06

01:21 Leonie and TetraLogical 06:28 State of accessibility 13:34 Screen readers 19:38 AI-generated alts 27:33 Specs interoperability 38:22 Missing UI patterns 49:21 State of ARIA specs Hosts Léonie Watson Bruce Lawson Vadim Makeev Leonie and TetraLogical Léonie’s blog Léonie on Mastodon Léonie on LinkedIn TetraLogical State of accessibility ARIA Au…

1
71: Why do I have layout shift? 11:30

1y ago11:30

11:30

In this episode we're shifting the topic to layout shift, that moment where you watch the page adapt to something lazily loaded which has impacted the layout in some way where you see content shift around. Links: CLS - https://goo.gle/3kle3AW Optimizing CLS - https://goo.gle/3fxu6IE CSS for Web Vitals - https://goo.gle/3E98gY9 Una Kravets (co-host)…

1
8 - Where Is WordPress Now? With Amber Weinberg, Agency Life and News Including CSS Sticky/Stuck 50:09

1y ago50:09

50:09

Amber Weinberg is a frontend developer at Studio Simpatico with over 25 years of experience. She joins us to muse over all the CSS news and to tell us all about how they use WordPress for their client work. All the while we complete CSS. Jay opens up about health and coffee. Introduction Jay on Coffee and Cholesterol A Good Use of ChatGPT New CSS F…

1
70: Why is my image distorted? 17:52

1y ago17:52

17:52

Too small? Too big? Learn how to make your images just right and all the reasons they might be looking a little funky when you’re adding media to your interface. Links: CSS for Web Vitals → https://goo.gle/3E98gY9 Learn Responsive Images → https://goo.gle/45EFuds Aspect Ratio → https://goo.gle/3PdyjDS Demos → https://goo.gle/3qJuQ6z & https://goo.g…

1
69: Why is it overflowing? 15:04

1y ago15:04

15:04

In this episode we're overjoyed to overexplain why you may be having overflow in your page. somewhere over the rainbow, an overheating developer overcooked the inline sizes and ended up oversleeping for work the next day. Now let's overanalyze and overshare about CSS overflow. Links: The rules of Margin Collapse → https://goo.gle/441OGaH Everything…

1
Easy Web Scraping With Google Sheets 8:29

1y ago8:29

8:29

Hi there! We are looking at the 5 Import functions built in to Google Sheets. There's an accompanying video and spreadsheet demo linked below for you!👇 Thanks for listening, I Want to Hack is a weekly discussion of coding and spreadsheet concepts. I hope you'll subscribe to follow along! Links at the bottom, but if you do nothing else, would you co…

1
68: Why isn't the margin applying? 16:14

1y ago16:14

16:14

In this episode we explore why margin may not be working for you. We’ll teach you about block formatting contexts and margin collapsing! We'll make you the space you want in your designs! Links: The Rules of Margin Collapse → https://goo.gle/441OGaH CSS Margins → https://goo.gle/4434Ctj Learn more → https://goo.gle/3YrJDiw Una Kravets (co-host) Twi…

1
7 - Privacy and Ethics with Dave Smyth 52:22

1y ago52:22

52:22

Dave Smyth is a designer and developer interested in privacy and ethics. He joins us for this episode. Jay tries his best to lighten the tone with the latest web news while Rob and Dave get heavy with privacy and ethics. Introduction Social Media and Mental Health CSS Nesting in Firefox Spat Chat: CSS confusion? Custom easing in CSS Profiles coming…

1
View Transitions API, snarling cats, a new era at Shopify, and cake jokes 52:28

1y ago52:28

52:28

01:32 Cats and View Transitions 10:28 Design and inspiration 21:43 Browser support 32:27 Use cases and future proofing 41:22 Shopify and cake jokes Hosts Jake Archibald Bruce Lawson Vadim Makeev Jake on socials Jake on Mastodon Jake on Twitter Jake’s blog Cats and View Transitions Missing cat thread on Twitter Smooth and simple transitions with the…

1
67: Why isn't z-index working? 16:55

1y ago16:55

16:55

In this episode we explore why z-index isn’t working for you. We’ll teach you about stacking context and how to make sure you’ve set yourself up for layering success! Join us on this journey through positioning, variable architecture, tools, and more, to bring those elements to light. Links: Stacking context → https://goo.gle/43It8jl Una Kravets (c…

1
6 - Scroll Driven Animations in Stable Chrome, CSS Subgrid, Kirby v4, Responsive Archetypes, Wix AI Builder, and More 47:44

1y ago47:44

47:44

Rob is grumpy. In all his excitement about a certain thing being released in stable Chrome, Jay texted him, to which Rob responded in a very lame manner. This must be why Jay keeps giving Rob a hard time on his English pronounciation. There's a actual news this episode as well, and with Jay as our anchorman, we cover it all. Contract Killer Scroll …

1
5 - Clients and CMS Control, Pricing Web Development, and Spat Chat 45:37

1y ago45:37

45:37

How much access and control do you give Clients in a CMS Control Panel? Jay actively limits clients while Rob gives more - albeit restricted - freedom. Pricing stuff in Web Development is hard, how do we do it? We also have a new segment called Spat Chat 💦. Control Panel access for Clients Pricing in Web Development Spat Chat on Design for the Web …

1
What the W3C TAG is, how standards are made, and why gray is darker than darkgray 56:26

1y ago56:26

56:26

01:44 Lea’s hats in 19.3 seconds 11:16 What is the W3C TAG 24:05 CSSWG, TC39, and others 33:36 WHATWG, W3C, and WebDX 46:19 Family, SVG, and named colors Hosts Lea Verou Bruce Lawson Vadim Makeev Lea’s hats in 19.3 seconds Lea on Mastodon Lea on Twitter Lea’s blog What is the W3C TAG W3C TAG CSSWG, TC39, and others CSSWG TC39 WHATWG, W3C, and WebDX…

1
4 - WWDC, Safari Updates, Web Apps and Sticky Elements 38:55

1+ y ago38:55

38:55

Jay is anxiously waiting for his new MacBook and hasn't told his client yet that he's taken progressive enhancement to an insane level. Rob, again, didn't go to a conference. We discuss scroll driven animations and the fancy Apple Vision Pro. What is new in Safari and what do sticky elements mean for accessibility. Introduction Scroll driven animat…

1
3 - Multi Page View Transitions, Conferences, Colour Models, and Statamic v4 35:55

1+ y ago35:55

35:55

After looping back around to some previous topics to course-correct, we discuss the web conference circuit and the idea of simply meeting up for fun, à la "Flat Camp" style—Statamic's new conference. Colour models are now supported in all modern browsers so we cover everything from RGB, HSL, through to the newest OKLCH model. Finally, we comb over …

1
2 - View Transitions, The Dangers and Advantages of Picking a Small CMS, and Is Safari really "Evergreen"? 39:40

1+ y ago39:40

39:40

Jay got a new King, and Rob's kids sold stuff on a blanket to celebrate the birthday of his King(?!). We tinker with the idea of "View Transitions", the web's answer to soft-loading content—similar to the behaviour of iOS and Android apps. Is it ready for traditional websites? We weigh up Content Management Systems and close off by discussing if Sa…

1
The Fugu project: priorities, Mozilla and Apple, support realms, Web vs native, and future plans 1:10:39

1+ y ago1:10:39

1:10:39

00:01:19 Thomas and the Fugu project 00:10:48 Partners and priorities 00:17:13 Mozilla’s and Apple’s positions 00:36:38 Support realms 00:50:59 Web vs native competition 01:02:46 Fugu’s future plans Hosts Thomas Steiner Bruce Lawson Vadim Makeev Thomas and the Fugu project Thomas on Mastodon Thomas on Twitter Thomas’ blog Fugu landing page Partners…

Podcasts Worth a Listen

Nested Query Podcasts

Podcasts Worth a Listen

Quick Reference Guide