What are view transitions? // TRAIN BRAIN

What are view transitions?

View Transitions enhance the user experience by creating smooth transitions between different views. Learn what view transitions are and a use case in this Short video. Want to learn more? Head over to the full length podcast.
Watch more The CSS Podcast → https://goo.gle/CSSpodcast
Subscribe to Chrome for Developers → https://goo.gle/ChromeDevs
#CSSPodcast #ChromeForDevelopers #Chrome
Speaker: Bramus Van Damme

Chrome for Developers

Making the web more awesome....

Protecting apps with Arcjet through WebAssembly

Decode performance charts with AI Assistance

Keep your HTML styles intact with the Clipboard API unsanitized option

Master prompt engineering for better AI results

Understand performance with AI assistance #DevToolsAI

Diagnose Slow Interactions with the Long Animation Frames API (LoAF)

Roll back Chrome Extension updates instantly

Stay in fullscreen mode with Keyboard Lock API

Cross-document view transitions

Optimize your site's interaction speed with Interaction to Next Paint (INP)

One click debugging in Console Insights

Understand network requests with AI assistance #DevToolsAI

What is the Shared Storage API?

Caching AI models in the browser

Speculation Rules API

Cross-document view transitions #CSSwrapped

Declarative net request API

Web Driver Bidi enables more efficient and capable cross browser test automation.

Find scrollable elements quickly with DevTools

Light dark CSS color function #CSSwrapped

Get started with Scroll-Driven Animations

WebDriver BiDi is production-ready

CSS debugging with AI assistance panel in DevTools

Monitor live performance metrics in DevTools

scheduler.yield API

Boost your workflow with File System Observer

CSSNestedDeclarations

Simpler sign-ins, stronger security with passkeys

Re-imagine the web with CSS anchor positioning

Re-imagine the web with View Transitions API

Learn scroll-driven animations #CSSwrapped

Animate height: auto with interpolate-size in CSS

How to share a performance trace with notes #DevToolsTips

What’s new in DevTools: Chrome 130-132

Chrome Built-in AI APIs

17 new features and improvements #CSSwrapped

Re-imagine the power of the web

How to keep the classic DevTools look

Chrome Extensions Program Manager answers your questions

CrUX supports navigation types

Never debug alone ? → ? #DevToolsAI

Find scrollable elements quickly with DevTools

Get started with Scroll-Driven Animations

Enabling NPUs to speed up workload

WebDriver BiDi is production-ready

CSS debugging with AI assistance panel in DevTools

CSS Wrapped 2024 is here!

Monitor live performance metrics in DevTools

Record and analyze a performance trace #DevToolsTips

scheduler.yield API

Re-imagine the web with scroll-driven animations

Dynamic and adaptable designs with CSS Container Queries

Boost your workflow with File System Observer

CSSNestedDeclarations

Help us fix the Chrome DevTools plane with AI assistance #DevToolsAI

Simpler sign-ins, stronger security with passkeys

MediaPipe Web: Bringing cross-platform AI tech to the browser

ML training on the web: Building Simple ML for Google Sheets

Transforming access to healthcare through Web AI

Declarative Shadow DOM: Hello HTML

Beyond the banner: The power of Web AI to personalize paid rich media ads

Why are Web Extensions fantastic for AI?

The future of AI is now: Real-life case studies for on client-side AI adoption in web apps

Web AI in industry: How TensorFlow.js has driven what you see on the supermarket shelves

Lessons learned from being customer zero of Chrome's built-in APIs

Styling improvements to details and summary elements

AI assistance helps aligning things in CSS #DevToolsAI

Overview of Chrome built-in AI

Exploring alternative interactions in JavaScript

Visual Blocks: Visual prototyping of AI pipelines

State isn't all you need, but It helps: building better LLM apps in the browse"

WebLLM: A high-performance in-browser LLM Inference engine

Accurately segment text in different language with Intl.Segmenter

CSS highlight inheritance is changing

Squishy Wasm apps using Extism with Dylibso's Steve Manuel - WasmAssembly

Live metrics in Performance panel #DevToolTips

Modern CSS for sites: View transitions, scroll effects, and more!

CSS light-dark function

New in Chrome 131: external CSS highlight inheritance, improvements to details, and more!

ml5.js - Friendly machine learning for the web