CSS Container Queries, Layers, Scoping and More with Miriam Suzanne
Syntax - Tasty Web Development Treats16 Juni 2021

CSS Container Queries, Layers, Scoping and More with Miriam Suzanne

In this episode of Syntax, Scott and Wes talk with Miriam Suzanne about all things CSS — container queries, layers, scoping, and more! Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax. Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. RevenueCat - Sponsor RevenueCat makes it easy to build and manage iOS and Android in-app purchases. With a few lines of code, RevenueCat provides IAP infrastructure, customer analytics, data integrations, and gives you time back from dealing with edge cases and updates across the platforms. Created by developers, for developers, thousands of the world’s best apps use RevenueCat to power their in-app purchases and subscriptions. Get started for free at revenuecat.com. Guests Miriam Suzanne Show Notes 02:21 - When did you come on board with container queries? 10:27 - How would you declare specificity? Layer example: @layer default; @layer theme; @layer components; @import url(theme.css) layer(theme); @layer default { audio[controls] { display: block; } } 13:08 - What is your background? 18:20 - What are container queries? 22:06 - What is the background on contain? How does it work? https://developer.mozilla.org/en-US/docs/Web/CSS/contain 29:25 - Is it still under development? https://www.igalia.com/open-prioritization/index 33:51 - Have you tried the EQ polyfill from Johnathan Neal yet? 35:21 - How far out are we? 38:10 - What is Scope? 44:00 - How will MQ and CQ work together? 45:49 - Do you use inline and block? 48:44 - What browser do you use? Links OddBird Susy Jonathan Neal FireFox Codepen https://github.com/w3c/csswg-drafts https://twitter.com/TerribleMia ××× SIIIIICK ××× PIIIICKS ××× Scott: Reelgood Wes: Embroidery machine Shameless Plugs Miriam: OddBird Scott: 1: SvelteKit 2: Level Up Tutorials Pro Spring Sale - 50% off annual subscriptions! Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off! Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

Avsnitt(972)

892: The History of Syntax

892: The History of Syntax

Wes and Scott talk about the origins of Syntax, sharing how a friendly course name conflict led to a mastermind group, then a podcast, and eventually a full-blown media brand. They also reflect on key milestones, from early episodes and sponsorships to joining Sentry, expanding the team, and what’s next. Show Notes 00:00 Welcome to Syntax! 00:51 How Wes and Scott met Scott Tolinski & The Origins of LevelUpTuts LevelUpTutorials WesBos.com 09:31 How Syntax got its name Episode 001: React Tools 15:30 Getting sponsors Delicious Brains FreshBooks 18:53 Hasty Treats and expanding the show 22:36 Adding interviews to Syntax SVGs with Sara Soueidan 23:38 Syntax’s first live show Live at JAMstack_conf 27:58 Brought to you by Sentry.io 28:34 Acquisition by Sentry 600th Episode! Major Announcement and Swag Giveaway! 33:56 Hiring a producer Randy Rektor 36:39 Transitioning to video and growing the team Rating and ROASTING Coding Desk Setups CJ Reynolds Kaitlin Bloom 41:47 Launching the merch store Sentry.shop 46:01 The future of Syntax 47:23 Sick Picks + Shameless Plugs Sick Picks Scott: Crucial X10 Pro 4TB Portable SSD Wes: MONVICT Cordless Glue Gun Shameless Plugs Syntax YouTube Channel Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

9 Apr 202555min

891: Light and Dark Mode

891: Light and Dark Mode

Light mode? Dark mode? Scott and Wes break down the best ways to implement theme switching in CSS, from prefers-color-scheme to manual overrides. Plus, tips on handling shadows, icons, and the dreaded flash of dark mode! Show Notes 00:00 Welcome to Syntax! 01:05 Brought to you by Sentry.io. 02:06 Light and dark mode, things to consider. 02:31 Light and dark mode from scratch. drop-in.css. 04:41 Calculations vs assigned color. 05:32 color-mix and relative color. 08:15 Foreground and background variables. –tint-or-shade: color-mix(in oklab, var(–fg), transparent 95%); –tint-or-shade-harder: color-mix(in oklab, var(–fg), transparent 90%); 09:13 Setting color scheme. 12:38 light-dark function in CSS. 15:48 Manually setting dark mode. 18:43 The challenges with shared caching. 19:33 Tailwind CSS implementation. Tailwind dark-mode. 19:52 Shoehorning in dark mode. 22:25 Other things to consider. 22:28 Color contrast. Lea Verou contrast-color. 24:39 Logos. 25:22 Icons and images. 26:20 Accessibility. Polypane. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

7 Apr 202527min

890: Accepting Money on the Internet in 2025

890: Accepting Money on the Internet in 2025

Wes and Scott talk about the ins and outs of accepting payments online—from choosing processors like Stripe and PayPal to handling fraud, taxes, custom checkouts, and more. Show Notes 00:00 Welcome to Syntax! 02:34 Payment processors Stripe PayPal Square Authorize.net 09:29 Checkouts 18:22 The checkout flow 23:10 Methods of accepting money 25:30 Brought to you by Sentry.io 28:34 Merchant of Record Lemon Squeezy Gumroad Paddle Beacons 32:51 Handling fraud, disputes, and refunds 41:25 Sick Picks + Shameless Plugs Sick Picks Scott: Parcel Wes: Parcels App Shameless Plugs Syntax YouTube Channel Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

2 Apr 202546min

889: Planning A Build

889: Planning A Build

Scott and Wes talk about the planning process for a major redesign of the Syntax.fm website. They share their thoughts on organizing tasks, choosing tech, handling styling, and the debates that come with deciding what to keep and what to change. Show Notes 00:00 Welcome to Syntax! 01:36 Brought to you by Sentry.io. 02:48 Why we need version 3.0 of Syntax.fm. Level Up Tutorials, Travis Neilson. 04:41 Project planning and organization. 05:53 The codebase. 09:50 The CSS changes. Episode 770: Design Systems With Brad Frost. 12:27 Tooling. 15:54 Development process. 16:38 Mobile and responsiveness. 18:37 Saving VS Code extension into the repo. 19:56 Using a dev container. 20:53 AI agent rules. 21:35 Code styles. 23:42 Canadian podcast. 24:33 Content storage. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

31 Mars 202529min

888: You Need a Monorepo × Client Only React × TanStack + More

888: You Need a Monorepo × Client Only React × TanStack + More

26 Mars 202552min

887: Vibe Coding Is a Problem

887: Vibe Coding Is a Problem

Is Vibe Coding the future of software development or just a fun way to experiment? Scott and Wes talk about coding with AI, the risks of ignoring the details, and the cool (and sometimes cursed) projects they’ve Vibe Coded. Show Notes 00:00 Welcome to Syntax! 00:31 “Personal Software”. 01:30 What exactly is Vibe Coding. 02:46 The challenges of coding with AI. Levelsio Airplane Game. 04:49 Brought to you by Sentry.io. 05:39 Vibe coding quality concerns. 07:25 Vibe Coding as a learning tool. 10:11 Things we’ve Vibe Coded. Scott’s Piano UI on X. Episode 876: MIDI & Music In the Browser. Wes’ Roomba on X. Wes’ Roomba on YouTube. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

24 Mars 202516min

886: AWS and IAC for Dummies with SST

886: AWS and IAC for Dummies with SST

Wes and Scott talk about Infrastructure as Code and how SST makes deploying to AWS easier than ever. They dive into SST’s features, developer experience, and how it simplifies managing services like databases, email, and more. Plus, insights on Cloudflare integration, auto-scaling, and real-world use cases. Show Notes 00:00 Welcome to Syntax! Supper Club × Next.js on AWS + Serverless with Dax Raad 02:37 Brought to you by Sentry.io 04:52 Intro to SST config SST AWS 05:40 Overview of Scott’s SST config file 12:33 Exploring SST’s endless capabilities SST’s docs Cloudflare 15:42 The SST developer experience Infrastructure for TS Devs: Kubernetes, WASM and Containers with David Flanagan Supper Club × Flightcontrol with Brandon Bayer 19:05 SST console and GUI overview 22:13 Resource management and pricing 24:52 Secrets management 27:38 Tunneling and security https://sst.dev/docs/live 30:52 Simplifying DNS 35:18 Sick Picks + Shameless Plugs Sick Picks Scott: Aquaphor Healing Ointment Wes: Magnetic Picture Hanger Frame Shameless Plugs Syntax YouTube Channel Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

19 Mars 202539min

885: CSS Fonts Fallbacks, Variable and Trimming

885: CSS Fonts Fallbacks, Variable and Trimming

Scott and Wes dig into the wild world of CSS fonts—covering fallbacks, variable fonts, and new tricks like text-box-trim. They also break down font-display, font kits, and how to avoid layout shifts when loading custom type. Show Notes 00:00 Welcome to Syntax! 01:06 Brought to you by Sentry.io. Damnit Sans. 02:53 @font-face. 03:27 Font Display. 07:40 Avoiding layout shift. Fallbacks. 10:45 Variable fonts. Fontaine. font-kit Wakamai Fondue. Syntax Ep. 782. Font Variation Settings. 16:23 Variable font sizing. 17:46 v-fonts. 19:10 text-box-trim & text-box-edge. text-box-trim examples. 21:28 Browser support. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

17 Mars 202523min

Populärt inom Politik & nyheter

p3-krim
rss-krimstad
svenska-fall
flashback-forever
rss-viva-fotboll
motiv
aftonbladet-daily
rss-sanning-konsekvens
aftonbladet-krim
rss-vad-fan-hande
olyckan-inifran
grans
rss-krimreportrarna
dagens-eko
fordomspodden
rss-frandfors-horna
spar
krimmagasinet
blenda-2
rss-flodet