JS Party: JavaScript, CSS, Web Development

What's new in CSS land

Nov 24, 2023

Una Kravets, developer advocate at Google & web platform ambassador, discusses recent advancements in CSS including expanded color spaces and matching backgrounds with photos. Updates in CSS architecture, components, animations, transitions, and responsive design are explored. The complexity of CSS, updates to browser components, and the introduction of new features in the rendering engine are discussed. The podcast highlights the benefits of CSS in simplifying web development and touches on interactivity and the future of CSS. The effectiveness of Tailwind CSS is debated and the importance of CSS knowledge is emphasized.

01:14:27

Creator website

Episode guests

Una Kravets

AI Summary

AI Chapters

Episode notes

Podcast summary created with Snipd AI

Quick takeaways

The latest CSS features enable the creation of interactive popovers, tooltips, and menus without extensive JavaScript.

The linear easing function in CSS eliminates the need for JavaScript libraries, allowing developers to create custom easing animations.

Container queries in CSS enable better separation of code concerns and architectural improvements in building responsive interfaces.

Deep dives

New CSS features for components

The podcast episode explores the latest CSS features for creating components, including the 'pop over' attribute which allows for the creation of interactive popovers, tooltips, and menus without the need for extensive JavaScript. The use of layers, starting styles, and animation properties provides more control over the styling and behavior of components. Additionally, the linear easing function offers customizable easing animations for smoother transitions.

Introduction

2min

Advancements in CSS and Making Web Development Easier

18min

The Use of Origin Trials for Future-Proofing Web Features

16min

The Complexity of CSS and Updates to Browser Components

6min

Introduction of New CSS Features in the Rendering Engine

2min

Discussion on Popovers and Job Security in Web Development

3min

Updates in CSS and Interactivity

18min

The Golden Age of CSS

5min

Debating the effectiveness of Tailwind CSS and emphasizing the importance of CSS knowledge

4min

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 – Mastodon, Twitter, GitHub, Website
Amal Hussein – Twitter, GitHub
Nick Nisi – Mastodon, Twitter, GitHub, Website

Show Notes:

Something missing or broken? PRs welcome!

Get the Snipd
podcast app

Unlock the knowledge in podcasts with the podcast player of the future.

AI-powered
podcast player

Listen to all your favourite podcasts with AI-powered features

Discover
highlights

Listen to the best highlights from the podcasts you love and dive into the full episode

Save any
moment

Hear something you like? Tap your headphones to save it with AI-generated key takeaways

Share
& Export

Send highlights to Twitter, WhatsApp or export them to Notion, Readwise & more