Thinking on ways to solve SWITCHES

Thinking on ways to solve SWITCHES

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


Duration: 18:43
18,431 views
663

In today's GUI challenge I share my thinking on a way to solve a switch. A tiny, UX packed component that ended up being one of the most involved challenges so far. Tons of great layouts, accessibility, animations and interactions to share, which means tons of places for you to have a style preference 😉

Chapters:
0:00 - Introduction
1:15 - States
2:05 - Interactions
2:45 - Screen reader
3:14 - Touch
4:10 - Hover
5:07 - RTL
5:56 - CSS/JS not required
7:00 - Vertical variant
9:14 - Flexbox
10:39 - Grid
12:10 - Overrides
15:38 - Javascript
18:15 - Outro

Resources:
Read along → https://goo.gle/3xBYGHy
Try a demo → https://goo.gle/2VJLVO0
Get the source → https://goo.gle/3n4Sfcg

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

#GUIchallenges #CSS #ChromeDeveloper



Other Videos By Chrome for Developers


2021-09-16Chrome 94 - What’s New in DevTools
2021-09-14Color Spaces: Do YOU know the difference between sRGB, LAB and CIE XYZ? - HTTP 203
2021-09-08Thinking on ways to solve ​​SPLIT BUTTONS
2021-09-08FLEDGE | What is the Privacy Sandbox?
2021-08-31New in Chrome 93: CSS Module Scripts, URL Handlers for PWAs, the PWA Summit, and more!
2021-08-31Random paint effects - HTTP 203
2021-08-26Chrome 93 - What’s New in DevTools
2021-08-25Attribution reporting | What is the Privacy Sandbox?
2021-08-17Deno - HTTP 203
2021-08-11First-party sets | What is the Privacy Sandbox?
2021-08-11Thinking on ways to solve SWITCHES
2021-08-05Core Web Vitals best practices (Italian with English subtitles)
2021-08-04web.dev Internationalization (Polish with English subtitles)
2021-08-03Debugging memory leaks - HTTP 203
2021-07-28Trust tokens | What is the Privacy Sandbox?
2021-07-27HTTP 203: Season 8 trailer
2021-07-235 tips for your Progressive Web App (Chinese with English subtitles)
2021-07-15Chrome 92 - What’s New in DevTools
2021-07-15Improving CLS by optimizing ad delivery (French with English subtitles)
2021-07-14Thinking on ways to solve BREADCRUMBS
2021-07-08Introduction to Web Stories (Swiss German with English subtitles)


Tags:
pr_pr: Chrome
type: Screencast (0-10min)
GDS: Yes
thinking on ways to solve switches
ways to solve switches
how to solve a switch
chrome developer
chrome developers
google chrome developer
google chrome developers
chrome
google chrome
google
Adam Argyle