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
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 Kravets, web platform ambassador & lead of the Google Chrome UI Developer Relations Team, joins Amal & Nick to take them CSS to school as they start this podcast in CSS kindergarten and end it with a Level-Up CSS Diploma. (LUCD?)
We explore all the amazing features which have recently landed in CSS — enabling super-charged user experiences with no JavaScript. Don’t forgot to check out all the epic links & demos in the show notes — and hold on to your butts, kids, this one is a ride!
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.
Typesense – Lightning fast, globally distributed Search-as-a-Service that runs in memory. You literally can’t get any faster!
Featuring:
Una Kravets – Website, GitHub, Mastodon, X
Amal Hussein – GitHub, X
Nick Nisi – Website, GitHub, Mastodon, X
Show Notes:
What’s new in CSS UI 2023 (the blog post we referenced on the show)
CSS Podcast - UNA and Adam’s AMAZZZZZZING Podcast - 🙌🏾❤️ Like and Subscribe ❤️🙌🏾
Igalia
Bocoup
Follow Lea Verou and Chris Lilley for CSS Leveling up
Releasing Color.js: A library that takes color seriously (Lea’s blog post)
Releasing Color.js (Chris’ blog post)
Contrast Ratio (a helpful tool to help find the right contract ratios)
High Definition CSS Color Guide
What is a color space?
New color spaces!
Proposal for “open-stylable” Shadow Roots (aka breaking shadow DOM encapsulation
CSS Nesting
Can I Use
MDN Baseline - a unified view of stable web features
What are Origin Trials?
Origin Trials available via Chrome
Origin Trials available via FireFox
Origin Trials available via Edge
“Accessibly blueberry muffin analogy” - Baking Accessibility In (Talk from Cordelia McGee-Tubb)
“Accessibility is Delicious” - great blog post referencing Cordelia’s talk
Trigonometric functions in CSS
nth of syntax
nth-of-child & nth-of-last-child Codepen demo
Scoped CSS
Scoped CSS Codepen demo
Cascade Layers
Cascade Layers Codepen demo
Una’s wonderful YouTube video explaining CSS Cascade Layers
Popover API
Anchor positioning
Scroll driven animations
Scroll driven animations demo site (scroll-driven-animations.style)
Container Queries
Style Queries
Linear Easing Function MDN
Create complex animation curves in CSS with the linear() easing function
Linear Easing Generator (a tool via Jake Archibald)
View Transitions API
View Transitions Guide
View Transitions support in Svelte
View Transitions support in Astro
:has() API
web.dev- Guidance to build modern web experiences that work on any browser
developer.chrome.com - Simplifying the web to help you build, grow and innovate
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!
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!
This week Emma and Adam are joined by Una Kravets to discuss difficult parts of CSS.
Join the discussion
Changelog++ members save 3 minutes on this episode because they made the ads disappear. Join today!
Sponsors:
O'Reilly Media – Learn by doing — Python, data, AI, machine learning, Kubernetes, Docker, and more. Just open your browser and dive in. Learn more and keep your teams’ skills sharp at oreilly.com/changelog
Raygun – With Raygun Error and Performance Monitoring you have all the information you need at your fingertips to quickly find and fix errors and performance issues across your tech stack down to the line of code. Get started with a free 14-day trial, head to raygun.com and join thousands of customer-centric software teams who use Raygun every day.
Sentry – Build better software, faster with Sentry’s application monitoring platform. Diagnose, fix, and optimize the performance of your code. Cut your time on error resolution from hours to minutes. Use the code PARTYTIME and get the team plan free for three months.
Featuring:
Una Kravets – Website, GitHub, Mastodon, X
Emma Bostian – GitHub, LinkedIn, X
Adam Stacoviak – Website, GitHub, LinkedIn, Mastodon, X
Show Notes:
The CSS Podcast
Toolsday
Atomic Habits by James Clear
Tailwind CSS
Bootstrap
Adam Argyle
Open UI
Inverted Triangle CSS
CSS The Definitive Guide by Eric Meyer
10 modern layouts in 1 line of CSS by Una
Grid Garden
Flexbox Froggy
CSS Tricks Grid Guide
CSS Tricks Flexbox Guide
Container Queries
Learn CSS by Una’s team
Something missing or broken? PRs welcome!
In today's episode, I interview Una Kravets, developer at IBM and prolific open source advocate.
Mentioned or Relevant on Today's Episode
@Una
Una's site/blog
Una's GitHub Goals
Agile Manifesto
You Might Not Need JS
You Might Not Need jQuery
Getting Things Done ("GTD")
"Estimating Sandwiches" - Developer Tea episode
Spec Slack Community
React JS
Redux
Flux
Rebecca Murphey
@rmurphey
zsh aliases
Rebecca Murphey on Developer Tea
Stuff In Austin
BrooklynJS
Una's GitHub
Today's episode is sponsored by Digital Ocean! Use the code DeveloperTea at checkout to get one month of a 1GB droplet, completely free!
And lastly...
Please take a moment and subscribe and review the show! Click here to review Developer Tea in iTunes.
In today's episode, I interview Una Kravets, developer at IBM and prolific open source advocate.
Toolsday Podcast
@Una
Una's site/blog
BEMCSS
Atomic Design
Dev Tea Episode about Pattern Libraries
Bluemix
"Classy CSS"
CSSGram
Instagram
CSS Blend Mode spec
My article on blend modes article on Web Design Tuts
Art the Web (arttheweb.com)
f.lux on Desktop
f.lux on iPhone
iOS Preview
Media Queries Level 4 (including 'light-level')
Google Glass
Moore's Law
Today's episode is sponsored by Hired.com! If you are looking for a job as a developer or a designer and don't know where to start, head over to Hired now! If you get a job through this special link, you'll receive a $2,000 bonus - that's twice the normal bonus provided by Hired. Thanks again to Hired for sponsoring the show!
And lastly...
Please take a moment and subscribe and review the show! Click here to review Developer Tea in iTunes.
Una Kravets found her love of design at a young age, publishing homemade magazines complete with polls and special color editions and handing them out to her classmates. Now, she translates that love of design to code, building prototypes and design systems at IBM Design. She talks to us about her love of design and dev, how she open sourced her personal goals, and how CodeNewbies can better manage and achieve their coding goals.
Show Links
Partner with Dev & CodeNewbie! (sponsor)
Wacom tablet
Action Script 2.0
Bluemix
The Open Design Foundation
Neopets
IBM Design
Open Source Personal Goals
Codeland Conf
Codeland 2019
Una Kravetz
Una Kravets is a front end developer, architecting design systems and building software prototypes at IBM Design, Austin. She’s a core member of the Design Open Organization and founder of both the Sassy DC and ATX Sass Meetups.
.jpg?width=400){kind=small}