089: View transitions // TRAIN BRAIN

089: View transitions

In this episode Una and Adam bring on an esteemed guest Bramus, who brings us deep knowledge on View Transitions. These are easy to get started with but difficult to master, but not with Bramus here to teach us. He'll be covering introductory to advanced API features and a big bag of examples and demos.
Resources:
Developer Documentation → https://goo.gle/4aHY7zo
Quick intro to View Transitions (Google I/O 2023 video) → https://goo.gle/3ZieRLp
What's new in View Transitions? (Google I/O 2024 video) → https://goo.gle/3zeYNj3
Misconceptions about View Transitions → https://goo.gle/3Tpsu7O
Bramus's Demos:
Collection of various demos, both SPA and MPA → https://goo.gle/3B4edY8
Accordion → https://goo.gle/3B4egDi
Adam's Demos:
Grid gallery → https://goo.gle/4giz0XV
Always great grid → https://goo.gle/3MH68Lu
Flexbox visualizer → https://goo.gle/47kmJOB
Editable tabs → https://goo.gle/4ghNfMx
Dollar number input → https://goo.gle/4e0FsBf
Stateful morphing button → https://goo.gle/4ebBNR2
Drag and Drop → https://goo.gle/3XlP2Yn
Isotope recreation → https://goo.gle/4dVX5lN
Local development animated → https://goo.gle/3XHjm17
Una Kravets (co-host)
Twitter → https://goo.gle/452aBRb
YouTube → https://goo.gle/457oMnS
Making the web more colorful ✨? Web DevRel @googlechrome Unicorn face Host of Tools Today → https://goo.gle/4aI6JpC &
Designing in the Browser ? → https://goo.gle/4e4YTcM
Adam Argyle (co-host)
Twitter → https://goo.gle/3yFnHYu
Instagram → https://goo.gle/3wUb6QJ
YouTube → https://goo.gle/4dZNKK7
@GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; ??
CSSWG → https://goo.gle/4bFErxq
VisBug → https://goo.gle/4bDcVQZ
The CSS Podcast
#CSSpodcast
Watch more The CSS Podcast → https://goo.gle/CSSpodcast
Subscribe to Chrome for Developers → https://goo.gle/ChromeDevs
#CSSPodcast #ChromeForDevelopers #Chrome
Speaker: Una Kravets, Adam Argyle, Bramus Van Damme

Chrome for Developers

Making the web more awesome....

An experience for user choice with third-party cookies

What is a Remote Hosted Code?

Test your site for third-party cookie breakages

Elevate UX with the Screen Wake Lock API

New in Chrome 130: Document Picture-in-Picture, CSS nesting improvements, and more!

Customize performance data in DevTools with extensibility API #DevToolsTips

Chrome shifts to user choice for third-party cookies

Special episode on the June meeting of the WebAssembly Community Group - WasmAssembly

Time to check your site for third-party cookies

Third-party cookies and the era of user choice

Build a custom chrome cursor

Intro to Long Animation Frames (LoAFs)

Subgrid: Stress-free, flexible grid layouts

Looking back on Season 5

Real-time metrics in the Performance panel #DevToolsTips

An introduction to WebAssembly

091: Season 5 wrap-up

Interactive pop-ups using dialog element and popover attribute

Visit scroll-driven-animations.style

Animate intrinsic sized elements with interpolate-size

Real-time metrics in the Performance panel

Exploring the Bytecode Alliance with Cosmonic's Hailey Bayes - WasmAssembly

090: Scroll-driven animations

Anchoring experiences

What are view transitions?

Yield long tasks with scheduler.yield()

Built-in AI: Gemini Nano in Chrome

089: View transitions

State queries in CSS

What’s new in DevTools: Chrome 127-129

New in Chrome 129: Yield long tasks, animate intrinsic sized elements, and more!

088: State queries

Simulate low storage quota with DevTools #DevToolsTips

Over-Easy Anchor + Popover Mini Web Machine

Promise.try

Caching demystified: Inspect, clear, and disable caches #DevToolsTips

Distinguishing the anchor from the positioned element

Line-breaks for the ruby element

A promising feature: JavaScript Promise Integration with Francis McCabe - WasmAssembly

087: Anchor positioning

Learn how to transition dialog elements with the Pop n’ Lock Mini Web Machine

New in Chrome 128: line-breaks for the ruby element, Promise.try, and more

What are content scripts?

Top 10 web updates from Google I/O ‘24

Say goodbye to the & symbol for nesting bare HTML elements

Create bounce and spring effects with linear()

String built-ins with Mozilla's Ryan Hunt - WasmAssembly

085: Linear easing function fun

How to inspect disappearing elements

How to add a custom cursor to Chrome

Pop n' Lock Dialog Mini Web Machine

CSS font-size-adjust

Freeze screen & inspect disappearing elements #DevToolsTips

New in Chrome 127: cross-document view transitions, CloseWatcher API re-enabled, and more

Testing best practices for web apps

Professional text wrapping with one line of CSS

084: Text Wrap

Save time with the has() selector

083: :has() tips and tricks

The updates to color in CSS

What is a Remote Hosted Code?

082: What's new in color & color functions

What’s new in DevTools: Chrome 124-126

Math functions in CSS

Gamepad API trigger-rumble extension

The WASI Revolution: Luke Wagner on WebAssembly's Past, Present, and Future

081: Trigonometric Functions

Animating dialogs and popovers to and from top-layer

View Transitions API

080: Animating to and from top-layer

What is Chrome?

Dialog over a popover #CSSPodcast

New in Chrome 126: Cross-document view transitions, CloseWatcher API re-enabled and more

079: Popover and Dialog

Test UI changes with overrides in Chrome DevTools

3 new ways to customize the DevTools Performance panel (Part 2)

3 new ways to customize the DevTools Performance panel (Part 3)

3 new ways to customize the DevTools Performance panel (Part 1)

What’s the Looper-Pile Mini Web Machine?

Chrome user, Chrome profile, Chrome client