Thinking on ways to solve TOASTS

Thinking on ways to solve TOASTS

Channel:
Chrome for Developers
Subscribers:
791,000
Published on ● Video Link: https://www.youtube.com/watch?v=R75ZVW4LW5o


Duration: 14:38
18,235 views
705

In today's GUI Challenge, @AdamArgyleInk shares thinking on a way to build toasts, a non-interactive and passive component for UI to provide user feedback. Explore the [output] element, CSS grid, animations and the FLIP technique which helps build an adaptive and accessible component.

Chapters:
0:00 - Introduction
0:23 - Overview
2:02 - [output]
3:00 - Layout
4:41 - Animation
5:50 - JavaScript Part 1
6:55 - Reduced Motion
7:43 - Keyframes
8:09 - JavaScript Part 2
10:48 - F.L.I.P.
14:18 - Outro

Resources:
Read along → https://goo.gle/3GghBfI
Try a demo → https://goo.gle/3EHsuXG
Get the source → https://goo.gle/3oykceU
FLIP → https://goo.gle/3oz8P6D
Paul Lewis (from SuperCharged) → https://goo.gle/31IOFy0

Watch more GUI Challenges → https://goo.gle/GUIchallenges
Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs

#GUIchallenges #CSS #ChromeDeveloper



Other Videos By Chrome for Developers


2022-01-04Cross-fading DOM elements | HTTP 203
2022-01-03Chrome 97 - What’s New in DevTools
2021-12-30Record and replay user flow with the Recorder panel | DevTools Tips
2021-12-27Generating your color palette in CSS | HTTP 203
2021-12-21Responsive images & art direction - Designing in the Browser
2021-12-16Authoring colors with DevTools | DevTools Tips
2021-12-15Choosing the right caching strategy - Unpacking the Workbox
2021-12-14The Zombie DOM - old DOM stuff that still haunts us today | HTTP 203
2021-12-14Dark mode - Designing in the Browser
2021-12-10Adapting caching to your needs - Unpacking the Workbox
2021-12-08Thinking on ways to solve TOASTS
2021-12-07Macro & micro layouts - Designing in the Browser
2021-12-03Offline fallback page - Unpacking the Workbox
2021-12-03Container queries - Designing in the Browser
2021-12-02Faster DevTools navigation with shortcuts and settings | DevTools Tips
2021-12-01The fundamentals of CSS layout | Workshop
2021-12-01Building a web application in Angular | Workshop
2021-12-01Enhance accessibility in your Angular builds | Workshop
2021-12-01Launching your PWA to Google Play Store | Workshop
2021-12-01Security and usability with cross-origin isolation | Workshop
2021-12-01Faster loading times with AVIF images | Workshop


Tags:
GDS: Yes
thinking on ways to solve toasts
how to solve toasts
what are toasts
toasts tutorial
what is toasts
ways to build toasts
ui
user interface
output
output element
css
css grid
flip
flip technique
adaptive component
accessible component
gui challenges
css tutorial
how to use css
what is css
chrome developer
chrome developers
google chrome developer
google chrome developers
developer
developers
google chrome
chrome
google
Adam Argyle