Web Shows - Google Developers
https://youtube.com/user/ChromeDevelopers/
YouTube videos from the Google Chrome Developers team
14 Jul 2022 13:00:19 GMT
14 Jul 2022 13:00:19 GMT
HandlebarsJS
https://developers.google.com/web/images/web-fundamentals-icon192x192.png
Web Shows - Google Developers
https://youtube.com/user/ChromeDevelopers/
How to emulate CSS user preference media features | DevTools Tips
14 Jul 2022 13:00:19 GMT
https://youtu.be/gOkM1L6azEI
https://youtu.be/gOkM1L6azEI
You can use DevTools to emulate user preferences like device orientation, light/dark themes, color contrast, reduced motion and more. DevTools is your best friend in building user adaptive interfaces.
Learn now on today’s episode of DevTools Tips with Adam Argyle and Jecelyn Yeen.
Chapters:
0:00 - Intro
0:24 - What are user preference media features
1:13 - Why do we need DevTools?
1:34 - Simulate mobile devices with Device Mode and Sensors tab
1:44 - Render CSS media features with the Rendering tab
1:57 - Emulate light and dark themes
2:13 - Shortcuts to emulate light and dark themes
2:39 - Emulate reduced motion
2:53 - Emulate contrast preferences
3:00 - Emulate forced color preferences
3:08 - Emulate reduced data preferences
3:17 - Why build user adaptive interfaces
3:29 - Emulate user preferences with Run Command
3:44 - Learn more
Links:
New responsive  → https://goo.gle/3kqM2q3
Emulate CSS media features with DevTools → https://goo.gle/devtools-emulate-css
Simulate mobile devices with Device Mode →  https://goo.gle/3PFIoGQ
Emulate location and device orientation with Sensors tab  → https://goo.gle/3uZz60y
Workshop: Build user-adaptive interfaces → https://goo.gle/3yTq46h
Catch more DevTools Tips → https://goo.gle/DevToolsTips
Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs
#DevToolsTips #Chrome #Developer
]]
Breaking words with wbr and ­ #Shorts
13 Jul 2022 13:00:10 GMT
https://youtu.be/HsCOhsqzimg
https://youtu.be/HsCOhsqzimg
GUI Snippets → https://goo.gle/GUIsnippets
GUI Challenges → https://goo.gle/GUIchallenges
Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs
]]
Demystifyingish SVG paths | HTTP 203
12 Jul 2022 10:13:08 GMT
https://youtu.be/9qen5CKjUe8
https://youtu.be/9qen5CKjUe8
Cassie Evans (from Greensock) chats to Jake about SVG paths, and what that mess of letters and numbers actually means.
The logo turtle demo → https://goo.gle/3IyzSXT
More videos in the HTTP 203 series → http://goo.gle/HTTP203
Subscribe to Google Chrome Developers here → https://goo.gle/ChromeDevs
Also, if you enjoyed this, you might like the HTTP203 podcast → https://goo.gle/HTTP203Podcast
#HTTP203 #ChromeDeveloper #WebDev
]]
How to inspect CSS container queries | DevTools Tips
30 Jun 2022 13:00:24 GMT
https://youtu.be/X4TYXlvbb2E
https://youtu.be/X4TYXlvbb2E
What are CSS container queries and why do we need them? Learn now on today’s episode of DevTools Tips with Jecelyn Yeen and Una Kravets.
Chapters:
0:00 - Intro
0:30 - What is Container Queries
1:50 - Identify parent containers with DevTools
2:17 - The Container Queries syntax
2:32 - View and modify container queries with DevTools
2:53 - Learn more
Links:
Inspect and debug CSS container queries → https://goo.gle/devtools-container-q
Designing in the Browser → https://goo.gle/cq-design-in-browser
Catch more DevTools Tips → https://goo.gle/DevToolsTips
Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs
#DevToolsTips #Chrome #Developer
]]
Thinking on ways to solve FABs
29 Jun 2022 13:01:50 GMT
https://youtu.be/RXopH5t2Kww
https://youtu.be/RXopH5t2Kww
In today's GUI Challenge, @Adam Argyle builds a couple of floating action buttons (FABs) and talks about the UX and CSS considerations for fixed position buttons on the web.
Chapters:
0:00 - Introduction
0:43 - Logical Properties
1:50 - Accessibility Tree
3:18 - FAB Group
4:41 - Focus Order vs Document Order
6:21 - .fabs CSS
7:16 - .fab CSS
12:54 - Animation
14:02 - Outro
Resources:
Try a demo → https://goo.gle/3IgJEhr
Get the source → https://goo.gle/3n4Sfcg
Watch more GUI Challenges → https://goo.gle/GUIchallenges
Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs
#GUIchallenges #CSS #ChromeDeveloper
]]
FLIP animations | HTTP 203
28 Jun 2022 10:00:03 GMT
https://youtu.be/8q_05PUYv1o
https://youtu.be/8q_05PUYv1o
Cassie Evans from GreenSock walks through FLIP – a great animation technique for transitioning between states, and also a terrible backronym (yes, Jake writes these descriptions)
Purple box FLIP demo → https://goo.gle/3mRYiBO
List shuffle demo → https://goo.gle/3xTZ4ob
List shuffle with GSAP → https://goo.gle/3xVkmlo
List item transform → https://goo.gle/3xxpgDs
GSAP FLIP plugin → https://goo.gle/3NW801Q
More videos in the HTTP 203 series → http://goo.gle/HTTP203
Subscribe to Google Chrome Developers here → https://goo.gle/ChromeDevs
Also, if you enjoyed this, you might like the HTTP203 podcast → https://goo.gle/HTTP203Podcast
#HTTP203 #ChromeDeveloper #WebDev
]]
Gradient shadow #Shorts
22 Jun 2022 09:00:26 GMT
https://youtu.be/R1Bst2uilxE
https://youtu.be/R1Bst2uilxE
GUI Snippets → https://goo.gle/GUIsnippets
GUI Challenges → https://goo.gle/GUIchallenges
Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs
]]
New in Chrome 103: HTTP 103 early hints, Local Font Access, AbortSignal.timeout, and more!
21 Jun 2022 13:00:10 GMT
https://youtu.be/e8LUoJClVo4
https://youtu.be/e8LUoJClVo4
Chrome 103 is rolling out now! There’s a new HTTP status code that helps the browser decide what content to preload before the page has even started to arrive. The Local Font Access API gives web applications the ability to enumerate and use fonts installed on the user’s computer. There’s an easier way to implement timeouts on asynchronous APIs. And there’s plenty more!
Pete LePage has all the details about what’s new for developers in Chrome 103.
Check out https://goo.gle/3zBMYRO for a deeper dive, including links to docs, specs and samples.
Check out what’s New in Chrome → https://goo.gle/NewInChrome
Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs
#NewinChrome #ChromeDeveloper #Chrome
]]
Chrome 103 - What’s New in DevTools
16 Jun 2022 13:00:02 GMT
https://youtu.be/LyMts4yfQu8
https://youtu.be/LyMts4yfQu8
What’s new in DevTools (Chrome 103) → https://goo.gle/3tFcDp3
Chapters:
0:00 - Intro
0:12 - Recorder supports double click and right click
0:55 - Lighthouse Navigation node
1:22 - Lighthouse Timespan mode
2:21 - Lighthouse Snapshot mode
3:04 - Better zoom control in Performance Insights
3:36 - Delete confirmation in Performance Insights
3:57 - Reorder panes in the Elements panel
4:25 - Picking color outside of browser
4:49 - Display inline value preview for debugging
5:16 - NOT a bonus tip: Google I/O 2022
Links:
Interaction to Next Paint metric → https://goo.gle/3tFrvUe
Performance insights panel → https://goo.gle/devtools-performance
New modes in Lighthouse → https://goo.gle/39BlQrn
I/O 22 DevTools: State of the Union → https://goo.gle/io22-devtools
I/O 22 Debugging accessibility with Chrome DevTools → https://goo.gle/io22-devtools-a11y
What’s New in DevTools → https://goo.gle/NewInDevTools
Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs
#ChromeDeveloper​ #WebDev #DevTools
]]
New in Chrome 102: PWAs as File Handlers, inert, the navigation API, and more!
08 Jun 2022 13:09:42 GMT
https://youtu.be/AGyP85QEBzY
https://youtu.be/AGyP85QEBzY
Chrome 102 is rolling out now! Installed PWAs can register as file handlers, making it easy for users to open files directly from disk. The inert attribute allows you to mark parts of the DOM as inert. The navigation API makes it easier for single page apps to handle navigation and updates to the URL. And there’s plenty more!
Pete LePage has all the details about what’s new for developers in Chrome 102.
Check out https://goo.gle/3MrIYGk for a deeper dive, including links to docs, specs and samples.
New in Chrome → https://goo.gle/NewInChrome
Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs
#NewinChrome #ChromeDeveloper #Chrome
]]
The history API is dead. Long live the navigation API | HTTP 203
07 Jun 2022 10:00:14 GMT
https://youtu.be/cgKUMRPAliw
https://youtu.be/cgKUMRPAliw
In this episode, Cassie (from Greensock) and Jake (not from Greensock) sit down to chat about the new Navigation API, which replaced the old and busted History API.
Docs on the Navigation API → https://goo.gle/3NWd8T9
The demo → https://goo.gle/395gHYB
Source for the demo → https://goo.gle/3ax16kX
Follow Cassie on Twitter → https://goo.gle/3Q4FQDd
More videos in the HTTP 203 series → http://goo.gle/HTTP203
Subscribe to Google Chrome Developers here → https://goo.gle/ChromeDevs
Also, if you enjoyed this, you might like the HTTP203 podcast → https://goo.gle/HTTP203Podcast
#HTTP203 #ChromeDeveloper #WebDev
]]
Chrome 102 - What’s New in DevTools
30 May 2022 13:20:05 GMT
https://youtu.be/0V_ph7PA_aw
https://youtu.be/0V_ph7PA_aw
What’s new in DevTools (Chrome 102) → https://goo.gle/3NDVZO1
Chapters:
0:00 - Intro
0:13 - Performance insights
0:35 - Performance analysis struggles
1:20 - Analyze page load performance
2:49 - Shortcuts to emulate light/dark themes
3:22 - Improve security on the Network Preview tab
4:20 - Improved reloading at breakpoint
5:37 - Bonus tip: Different way of screenshots
Links:
Performance insights panel → https://goo.gle/devtools-performance
What’s New in DevTools → https://goo.gle/NewInDevTools
Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs
#ChromeDeveloper​ #WebDev #DevTools
]]
Huellipsis #Shorts
25 May 2022 13:00:35 GMT
https://youtu.be/qA4C_O87H18
https://youtu.be/qA4C_O87H18
GUI Snippets → https://goo.gle/GUIsnippets
GUI Challenges → https://goo.gle/GUIchallenges
Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs
]]
Samsung Internet - the why & how | HTTP 203
24 May 2022 10:03:55 GMT
https://youtu.be/F-rZOIBGIaQ
https://youtu.be/F-rZOIBGIaQ
Ada Rose Canon from Samsung Internet chats to Jake about why Samsung Internet exists, and how it differs from other Chromium browsers.
Samsung Internet → https://goo.gle/39UwF7Z
Samsung Internet beta → https://goo.gle/3PIxeC3
Samsung Internet DevRel → https://goo.gle/3sZdVLb
Samsung internet on Twitter → https://goo.gle/3GhmpCR
Found a bug on Samsung Internet? Report it to browser@samsung.com
More videos in the HTTP 203 series → http://goo.gle/HTTP203
Subscribe to Google Chrome Developers here → https://goo.gle/ChromeDevs
Also, if you enjoyed this, you might like the HTTP203 podcast → https://goo.gle/HTTP203Podcast
#HTTP203 #ChromeDeveloper #WebDev
]]
Thinking on ways to solve BUTTONS
18 May 2022 13:00:01 GMT
https://youtu.be/aJNq-b1zlog
https://youtu.be/aJNq-b1zlog
In today's GUI Challenge, @Adam Argyle  styles all the web's different button types with custom properties and :where(), for light/dark adaptive buttons that are easy to make new variants with.
Chapters:
0:00 - Introduction
0:19 - Overview
2:08 - Keyboard UX
2:46 - New theme switcher
3:09 - Mouse UX
3:34 - Buttons in forms
4:30 - Disabled button
5:22 - HTML
5:43 - CSS base selector
6:24 - Adaptive custom properties
7:20 - Button variants
10:10 - Live button variant building
11:18 - Recap
11:50 - Reduced motion
12:57 - Outro
Resources:
Read along → https://goo.gle/3wEsaWR
Try a demo → https://goo.gle/3a2guoV
Get the source →https://goo.gle/39uY8Na
Watch more GUI Challenges → https://goo.gle/GUIchallenges
Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs
#GUIchallenges #CSS #ChromeDeveloper
]]
Bringing Adobe's Creative Cloud to the web: Starting with Photoshop
13 May 2022 01:40:24 GMT
https://youtu.be/CF5zZZy0R9U
https://youtu.be/CF5zZZy0R9U
Creative Cloud is a collection of 20+ apps for photography, video, design, web, UX, social media, and more. Learn about some of the steps the Adobe and the Chrome teams took in order to bring Adobe's Creative Cloud to the Web, starting with Photoshop and Illustrator.
Speaker: Thomas Steiner
Resources:
Thomas Steiner Twitter →  https://goo.gle/3Plu2we
Blog post → https://goo.gle/3L8v2QS
Wasm samples → https://goo.gle/3FFL7wi
COOP and COEP → https://goo.gle/3wquqR8
Wasm exception handling → https://goo.gle/3Mc3ds6
Wasm SIMD → https://goo.gle/3Fy57Rj
Wasm feature detection → https://goo.gle/3Nb9bJX
Wasm browser support → https://goo.gle/38sv8Fz
Wasm debugging → https://goo.gle/faster-wasm-debugging
Wasm debugging extension → https://goo.gle/3FUlPe9
Access Handle → https://goo.gle/3l6e4YQ
P3 test image → https://goo.gle/3suWsKa
CSS color() function feature bug → https://goo.gle/3FDG0fY
Adobe Spectrum Web Components → https://goo.gle/3w7yXcn
Web Components DevTools extension → https://goo.gle/3N8Cug5
Lit → https://goo.gle/3w8mxBa
Workbox precaching → https://goo.gle/3swQjgG
Adobe Photoshop → https://goo.gle/3l1767s
Watch more:
All Google I/O 2022 Sessions → https://goo.gle/IO22_AllSessions
Web at I/O 2022 playlist → https://goo.gle/IO22_Web
All Google I/O 2022 technical sessions → https://goo.gle/IO22_Sessions
Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs
#GoogleIO #IO22
]]
Top 10 web things to know from Google I/O
12 May 2022 20:07:08 GMT
https://youtu.be/m8R9vvsbU4I
https://youtu.be/m8R9vvsbU4I
We’re breaking down all things web at Google I/O 2022! Discover the top 10 web things to know from Chrome at Google I/O 2022, from UI stability across browsers to new features in Chrome DevTools and more.
Watch more:
All Google I/O 2022 Sessions → https://goo.gle/IO22_AllSessions
Web at I/O 2022 playlist → https://goo.gle/IO22_Web
Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs
#GoogleIO
]]
The state of responsiveness on the web
12 May 2022 18:06:01 GMT
https://youtu.be/Mizzbsvv8Os
https://youtu.be/Mizzbsvv8Os
First Input Delay (FID) is a great metric to measure input responsiveness during page load. However, as the web is becoming more capable, and users are expecting richer, more interactive interfaces, simply looking at responsiveness during page load doesn't tell the full story. Learn how Chrome has been taking a more holistic approach to measuring responsiveness, and explore how the web feels to interact with today, according to the latest metrics.
Speakers: Annie Sullivan, Michal Mocny
Watch more:
All Google I/O 2022 Sessions → https://goo.gle/IO22_AllSessions
Web at I/O 2022 playlist → https://goo.gle/IO22_Web
All Google I/O 2022 technical sessions → https://goo.gle/IO22_Sessions
Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs
#GoogleIO
]]
State of CSS
12 May 2022 16:07:36 GMT
https://youtu.be/Xy9ZXRRgpLk
https://youtu.be/Xy9ZXRRgpLk
Styling on the web has been moving fast, bringing rich features for container-based styles and layouts, managing color contrast, leveraging device vibrant colors,  gradients, and new color spaces for mixing, orchestrating stylesheets, subgrid, inert, :has() selector, and much more. With each browser working in unison to improve stability while also delivering fan favorite features, 2022 is shaping up to be a huge year for styling.
Resource:
State of CSS 2022 → https://goo.gle/38vtFy6
Speaker: Adam Argyle
Watch more:
All Google I/O 2022 Sessions → https://goo.gle/IO22_AllSessions
Web at I/O 2022 playlist → https://goo.gle/IO22_Web
All Google I/O 2022 technical sessions → https://goo.gle/IO22_Sessions
Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs
#GoogleIO
]]
DevTools: State of the Union 2022
12 May 2022 14:11:33 GMT
https://youtu.be/YqWEqYa-evk
https://youtu.be/YqWEqYa-evk
See a demo tour of new DevTools features that allow web developers to generate site performance insights, automate user flows, debug design issues, and more.
00:00 Introduction
00:38 Design
06:19 Accessibility
08:44 Debugging
12:50 WebAssembly (WASM)
14:16 Performance insights
20:38 Automation - User flow Recorder
23:09 User flows transformation - Puppeteer Replay
Resources:
Identify potential performance improvements with the Performance Insights panel → https://goo.gle/devtools-performance
Record, replay, and measure user flows → https://goo.gle/devtools-recorder
Identify potential CSS improvements → https://goo.gle/css-overview
Grid debugging tools → https://goo.gle/devtools-grid
Full page accessibility tree → https://goo.gle/accessibility-tree
Debugging WebAssembly Faster → https://goo.gle/faster-wasm-debugging
Performance Insights panel → https://goo.gle/devtools-performance
User flow Recorder  → https://goo.gle/devtools-recorder
Puppeteer Replay  → https://goo.gle/puppeteer-replay
Speaker: Jecelyn Yeen
Watch more:
All Google I/O 2022 Sessions → https://goo.gle/IO22_AllSessions
Web at I/O 2022 playlist → https://goo.gle/IO22_Web
All Google I/O 2022 technical sessions → https://goo.gle/IO22_Sessions
Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs
#GoogleIO
]]
A deep dive into optimizing LCP
12 May 2022 12:37:25 GMT
https://youtu.be/fWoI9DXmpdk
https://youtu.be/fWoI9DXmpdk
There is no shortage of advice on the web about improving page load performance, and yet, of the three Core Web Vitals, Largest Contentful Paint (LCP) is still the hardest metric for most sites to consistently meet the recommended "good" threshold. This talk looks at what makes LCP a hard metric to optimize, and offers some concrete strategies to break this complex metric down into a few simple parts, making it much easier to reason about and ultimately improve.
Resource:
Optimize LCP → https://goo.gle/3vhmmSg
Speaker: Philip Walton
Watch more:
All Google I/O 2022 Sessions → https://goo.gle/IO22_AllSessions
Web at I/O 2022 playlist → https://goo.gle/IO22_Web
All Google I/O 2022 technical sessions → https://goo.gle/IO22_Sessions
Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs
#GoogleIO
]]
Learn how browsers are working together to make it easier to build for the web
12 May 2022 12:33:38 GMT
https://youtu.be/fGlhRnp5M-g
https://youtu.be/fGlhRnp5M-g
Making a web application work in the same way across browsers can be hard. Learn why these interoperability problems happen, how browsers are working together to prioritize the issues most problematic for developers, and find resources to better understand the gaps in support where they still exist.
Resources:
Bridging the gap: making it easier to build for the web → https://goo.gle/3vcOLsA
Interop 2022: browsers working together to improve the web for developers → https://goo.gle/3rjw0Tf
Speaker: Rachel Andrew
Watch more:
All Google I/O 2022 Sessions → https://goo.gle/IO22_AllSessions
Web at I/O 2022 playlist → https://goo.gle/IO22_Web
All Google I/O 2022 technical sessions → https://goo.gle/IO22_Sessions
Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs
#GoogleIO
]]
Open web standards with Privacy Sandbox
12 May 2022 12:32:24 GMT
https://youtu.be/VVgtGkRtVPU
https://youtu.be/VVgtGkRtVPU
Core to the web's success is the ability to easily compose sites from a variety of different third-party services, but that same ability has enabled pervasive cross-site tracking. Privacy Sandbox lays out a number of proposals for open web standards to achieve key use cases across advertising, identity, and more without the need for cross-site tracking. Learn about progress on the path to making third-party cookies obsolete and creating a thriving web ecosystem that's private by default.
Resources:
Get the developer details for the Privacy Sandbox on the web → https://goo.gle/3Jh56BA
Learn about the overall Privacy Sandbox initiative → https://goo.gle/3x6qYx2
Speaker: Rowan Merewood
Watch more:
All Google I/O 2022 Sessions → https://goo.gle/IO22_AllSessions
Web at I/O 2022 playlist → https://goo.gle/IO22_Web
All Google I/O 2022 technical sessions → https://goo.gle/IO22_Sessions
Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs
#GoogleIO
]]
Best practices for developing classroom tools with ChromeOS
12 May 2022 12:32:01 GMT
https://youtu.be/orM0BQkY4Bo
https://youtu.be/orM0BQkY4Bo
School Chromebook usage has skyrocketed the last few years with students and teachers using Chromebooks for everything from video editing to 3D modeling and graphic design. Take a virtual tour of a modern school, go hands-on with the newest school Chromebooks, and explore the new Education page of ChromeOS.dev chock full of best practices for building classroom tools for ChromeOS.
Speaker: Andy Russell
Watch more:
All Google I/O 2022 Sessions → https://goo.gle/IO22_AllSessions
Web at I/O 2022 playlist → https://goo.gle/IO22_Web
All Google I/O 2022 technical sessions → https://goo.gle/IO22_Sessions
Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs
#GoogleIO
]]
Gaming with ChromeOS
12 May 2022 12:30:17 GMT
https://youtu.be/FJmpyniOg58
https://youtu.be/FJmpyniOg58
Learn about gaming on Chromebooks and how to bring Android, Steam, and PC games to the fastest growing desktop OS in the world. Check out an overview of how ChromeOS sees gaming, the options available to users, and some critical steps developers can take to bring their games to Chromebooks.
Speakers: Brad McKee, Matt Monasch
Watch more:
All Google I/O 2022 Sessions → https://goo.gle/IO22_AllSessions
Web at I/O 2022 playlist → https://goo.gle/IO22_Web
All Google I/O 2022 technical sessions → https://goo.gle/IO22_Sessions
Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs
#GoogleIO
]]