Show Description Adam Argyle joins us to chat about new CSS features that are demo'd in a carousel configurator - a builder-like experience to help visualize the capabilities of a CSS only Carousel: buttons, markers, paging and inertness. Listen on Website Watch on YouTube Guests Adam Argyle Guest's Main URL • Guest's Social CSS at Google. Links Chrome Canary Features Demo Space CSS Carousel Configurator Black Emperor
In this episode of Syntax, Wes and Scott talk with Una Kravetz and Adam Argyle from Google Chrome about the evolution of CSS, new features, and the push toward more advanced UI capabilities on the web. They discuss the introduction of CSS versioning, exciting new properties like text-box-trim, state queries, and scroll state functionalities, select, and more! Show Notes 00:00 - Welcome to Syntax!. 01:43 - Brought to you by Sentry.io. 02:19 - The evolution of CSS. 04:07 - CSS versioning and spec levels. CSS RFC. 17:49 - Use-cases for allow-discrete. 20:34 - State queries. 24:19 - Where does the baseline data come from? 25:17 - Will the RFC become official? The latest in Web UI (Google I/O ‘24). 27:33 - New features Una is excited about. 29:44 - Select. https://open-ui.org/components/customizableselect. https://codepen.io/argyleink/pen/YzoEPOG. 38:31 - New features Adam is excited about. 39:24 - text-box-trim. 40:59 - State queries. 54:56 - Sick Picks + Shameless Plugs. Sick Picks Una: Logitech MX Master 3 Adam: Teenage Engineering K.O. II Shameless Plugs Una: Una.im Adam: The CSS Podcast 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
Jerod, Adam Argyle & the CompressedFM crew hang out prior to their Fronted Feud battle! They discuss CSS as a programming language, Apple’s walled garden, how nobody is on the same social media sites anymore, how to choose tech, the community’s sentiment shift on GraphQL & a whole bunch more. (This episode is for Changelog++ ears only.) Join the discussion Changelog++ members get a bonus 47 minutes at the end of this episode and zero ads. Join today! Sponsors: Changelog++ – You love our content and you want to take it to the next level by showing your support. We’ll take you closer to the metal with extended episodes, make the ads disappear & more. It’s better! Let’s do this Featuring: Adam Argyle – Website, GitHub, Mastodon, X Amy Dutton – GitHub, X James Q Quick – Website, GitHub, X Brad Garropy – Website, GitHub, LinkedIn, X Jerod Santo – GitHub, LinkedIn, Mastodon, X Show Notes: Changelog++ (It’s better!) Frontend Feud: CSS Podcast vs CompressedFM Something missing or broken? PRs welcome!
Una & Adam from The CSS Podcast defend their Frontend Feud title against challengers James & Brad from CompressedFM. Let’s get it on! Join the discussion Changelog++ members save 5 minutes on this episode because they made the ads disappear. Join today! Sponsors: Vercel – With zero configuration for over 35 frameworks, Vercel’s Frontend Cloud makes it easy for any team to deploy their apps. Today, you can get a 14-day free trial of Vercel Pro, or get a customized Enterprise demo from their team. Visit vercel.com/changelogpod to get started. Changelog News – A podcast+newsletter combo that’s brief, entertaining & always on-point. Subscribe today. Fly.io – The home of Changelog.com — Deploy your apps and databases close to your users. In minutes you can run your Ruby, Go, Node, Deno, Python, or Elixir app (and databases!) all over the world. No ops required. Learn more at fly.io/changelog and check out the speedrun in their docs. Featuring: Una Kravets – Website, GitHub, Mastodon, X Adam Argyle – Website, GitHub, Mastodon, X James Q Quick – Website, GitHub, X Brad Garropy – Website, GitHub, LinkedIn, X Jerod Santo – GitHub, LinkedIn, Mastodon, X Show Notes: The CSS Podcast CompressedFM More dev game shows! Something missing or broken? PRs welcome!
Una & Adam from The CSS Podcast defend their Frontend Feud title against challengers Chuck & Robbie from Whiskey Web and Whatnot. Let’s get it on! Join the discussion Changelog++ members support our work, get closer to the metal, and make the ads disappear. Join today! Sponsors: Fastly – Our bandwidth partner. Fastly powers fast, secure, and scalable digital experiences. Move beyond your content delivery network to their powerful edge cloud platform. Learn more at fastly.com Fly.io – The home of Changelog.com — Deploy your apps and databases close to your users. In minutes you can run your Ruby, Go, Node, Deno, Python, or Elixir app (and databases!) all over the world. No ops required. Learn more at fly.io/changelog and check out the speedrun in their docs. Featuring: Una Kravets – Website, GitHub, Mastodon, X Adam Argyle – Website, GitHub, Mastodon, X Chuck Carpenter – GitHub, LinkedIn, X Robbie Wagner – Website, GitHub, X Jerod Santo – GitHub, LinkedIn, Mastodon, X Show Notes: The CSS Podcast Whiskey Web and Whatnot More dev game shows! Something missing or broken? PRs welcome!
In this supper club episode of Syntax, Wes and Scott talk with Adam Argyle about a ton of new CSS features that have arrived or are coming soon, as well as his new site Gradient.style. Show Notes 00:34 Welcome 01:05 Guest introduction Adam on Bluesky Adam on Twitter 01:48 CSS buckets New CSS Relative Units · January 6, 2023 03:16 rex rch ric rlh 08:06 Gradient.style CSS HD Gradients Open Props: sub-atomic styles 13:49 What are style queries vs container queries vs state queries? una.im | Style Queries Getting Started with Style Queries - Chrome Developers CSS Container Style Queries | Can I use… Support tables for HTML5, CSS3, etc 18:09 Trig functions Trigonometric functions in CSS CSS Trigonometric Functions: cos() and sin(): dots on a circle 19:57 Live transitions Understand Disney’s 12 principles of animation | Creative Bloq 25:08 View transitions View Transitions Demo View Transitions API - Web APIs | MDN 26:01 Text-wrap balance CSS text-wrap: balance - Chrome Developers 26:45 Text-wrap pretty 27:44 What’s the future of the browser landscape? 31:44 nth-child(An+B [of S]) 33:06 Cascade layers 34:40 CSS Nesting 38:03 Animate discrete properties 39:42 Linear function Linear easing generator 41:33 Media query range syntax 42:04 Subgrid everywhere 44:41 Media query range and variables? UI Elements - Basics, Best Practice, and Built Ins — Syntax Podcast 612 45:32 env variables Hasty Treat - CSS Nesting 1 — Syntax Podcast 343 46:59 Animation composition 49:50 Select menu HTML element 52:16 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Shameless Plugs Onewheel // Future Motion Adam Argyle 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky
Adam Argyle joins Amelia and Nick to catch them up on all the goings on within the world of CSS colors. There are a lot more options than you’d expect if you haven’t been keeping up, and Adam’s here to help you avoid the “gray dead zone”! Join the discussion Changelog++ members save 4 minutes on this episode because they made the ads disappear. Join today! Sponsors: Fastly – Our bandwidth partner. Fastly powers fast, secure, and scalable digital experiences. Move beyond your content delivery network to their powerful edge cloud platform. Learn more at fastly.com Fly.io – The home of Changelog.com — Deploy your apps and databases close to your users. In minutes you can run your Ruby, Go, Node, Deno, Python, or Elixir app (and databases!) all over the world. No ops required. Learn more at fly.io/changelog and check out the speedrun in their docs. KBall Coaching – Free exploratory coaching sessions from JS Party co-host KBall! Click here to get started Changelog News – A podcast+newsletter combo that’s brief, entertaining & always on-point. Subscribe today. Featuring: Adam Argyle – Website, GitHub, Mastodon, X Nick Nisi – Website, GitHub, Mastodon, X Amelia Wattenberger – Website, GitHub, X Show Notes: Adam’s site Color interpolation animation oklch() - CSS: Cascading Style Sheets | MDN The “Gray Dead Zone” of Gradients | CSS-Tricks - CSS-Tricks OKLCH Color Picker & Converter Wes Bos single color experiments on TikTok color-mix() - CSS: Cascading Style Sheets | MDN A Preview of 4 New CSS Color Features | CSS-Tricks - CSS-Tricks OKLCH in CSS: why we moved from RGB and HSL—Martian Chronicles, Evil Martians’ team blog CSS HD Gradients Gradient.style Discord High Definition CSS Color Guide - Chrome Developers Something missing or broken? PRs welcome!
Una & Adam from The CSS Podcast defend their Frontend Feud title against challengers David & Shaw from the keyframers. Let’s get it on! Join the discussion Changelog++ members save 6 minutes on this episode because they made the ads disappear. Join today! Sponsors: Sentry – Session Replay! Rewind and replay every step of the user’s journey before and after they encountered an issue. Eliminate the guesswork and get to the root cause of an issue, faster. Use the code CHANGELOG and get the team plan free for three months. Lolo Code – If you’re familiar with building severless apps, think of Lolo Code as your backend with a visual editor that lets you think and build at the same time. All this without having to provision or manage servers. Use the visual editor to build your app, connect nodes, and add any npm libraries you need. You can even write your own integrations. This makes Lolo Code very Zapier-ish, but for devs. Try it free today with no credit card required at lolo.co/jsparty KBall Coaching – Free exploratory coaching sessions from JS Party co-host KBall! Click here to get started Featuring: Una Kravets – Website, GitHub, Mastodon, X Adam Argyle – Website, GitHub, Mastodon, X David Khourshid – Website, GitHub, X Shaw – GitHub, Mastodon, X Jerod Santo – GitHub, LinkedIn, Mastodon, X Show Notes: The CSS Podcast the keyframers More dev game shows! Something missing or broken? PRs welcome!
What’s this? A Frontend Feud! The ShopTalk guys return to defend their championship over Syntax against new contenders: Una and Adam from The CSS Podcast! Join the discussion Changelog++ members save 3 minutes on this episode because they made the ads disappear. Join today! Sponsors: Square – Develop on the platform that sellers trust. There is a massive opportunity for developers to support Square sellers by building apps for today’s business needs. Learn more at changelog.com/square to dive into the docs, APIs, SDKs and to create your Square Developer account — tell them Changelog sent you. Sentry – Working code means happy customers. That’s exactly why teams choose Sentry. From error tracking to performance monitoring, Sentry helps teams see what actually matters, resolve problems quicker, and learn continuously about their applications - from the frontend to the backend. Use the code PARTYTIME and get the team plan free for three months. Featuring: Chris Coyier – Website, GitHub, X Dave Rupert – Website, GitHub, X Una Kravets – Website, GitHub, Mastodon, X Adam Argyle – Website, GitHub, Mastodon, X Jerod Santo – GitHub, LinkedIn, Mastodon, X Amelia Wattenberger – Website, GitHub, X Nick Nisi – Website, GitHub, Mastodon, X Show Notes: Watch the video on our YouTube channel Shout out to Una’s Twitter! Shout out to OneWheel! Shout out to ShopTalk Show! Shout out to The CSS Podcast! Shout out to JS Party? Something missing or broken? PRs welcome!
.jpg?width=400){kind=small}
In this episode of Syntax, Scott and Wes talk with Adam Argyle about how stuff gets added to CSS. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. Guests Adam Argyle Show Notes 01:48 - Who are you and what do you do? 04:13 - How does stuff get added to CSS? 06:44 - Github issue proposal or public document Shares use case Problem made succinct StrawMan solution JS demo 10:12 - Time Multiple proposals Comments Back and forth Bikeshedding 20:00 - Editor’s draft spec (Stage 1) CSS typed Examples Provided code logic Implementor interest Can go stale Explainer Implementor Prototype behind flags in browser Intent to Prototype (I2P) 24:42 - Working Draft (Stage 2) WPTs Prototype behind flags in browser Needs two or more to graduate Intent to Ship (I2S) 24:54 - Conference Calls Around 10 items to discuss Issues or proposals Flexible list Things can be injected as emergency Things can get punted to the next call 25:26 - Face 2 Face (F2F) Four times a year Presentations Breakout sessions Houdini focus groups, etc Try to resolve as many Github issues as possible 27:34 - Candidate Recommendation (Stage 3) Could still be behind a flag Edge cases are being worked through WPTs and standards are being nudged into a final state 44:20 - Roles Spec author Community Member Print Color Internationalization Box Model AOM JS APIs Renderers etc Implementor It’s like pub/sub, where spec authors pub and implementors sub, and the community tries to help shape the message that’s published while supporting the subscribers who need to implement and make it real 46:32 - Questions What language is CSS written in? What's the deal with Houdini? Links https://github.com/w3c/csswg-drafts @rachelandrew @hj_chen Incomplete List of Mistakes in the Design of CSS 10 Things I Regret About Node https://ishoudinireadyyet.com/ ××× SIIIIICK ××× PIIIICKS ××× Adam Wok Scott: Balance Pad Wes: Security Bit Set Shameless Plugs Adam: The CSS Podcast Scott: CSS Design Systems - Sign up for the year and save 25%! 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
Google UX Engineer Adam Argyle joins Jerod and KBall to share all the details on VisBug, his just-released Chrome Extension that “makes any webpage feel like an artboard.” Adam is passionate about doing for designers what Firebug (and later DevTools) did for developers. In this episode, he shares that passion and how it’s driven him to create and open source VisBug. Join the discussion Changelog++ members support our work, get closer to the metal, and make the ads disappear. Join today! Sponsors: Gauge – Low maintenance test automation! Gauge is free and open source test automation framework that takes the pain out of acceptance testing. Rollbar – We catch our errors before our users do because of Rollbar. Resolve errors in minutes, and deploy your code with confidence. Learn more at rollbar.com/changelog. DigitalOcean – DigitalOcean is simplicity at scale. Whether your business is running one virtual machine or ten thousand, DigitalOcean gets out of your way so your team can build, deploy, and scale faster and more efficiently. New accounts get $100 in credit to use in your first 60 days. .TECH domains – There’s a new top level domain to consider when purchasing your next domain for your next big idea. Get your .tech for 90% off when you use code CHANGELOG on get.tech Featuring: Adam Argyle – Website, GitHub, Mastodon, X Jerod Santo – GitHub, LinkedIn, Mastodon, X Kevin Ball – Website, GitHub, LinkedIn, X Show Notes: VisBug was demoed live on-stage at ChromeDevSummit It is open source on GitHub You can install the Chrome Extension right here Something missing or broken? PRs welcome!