https://developers.google.com/web/images/web-fundamentals-icon192x192.png https://youtube.com/user/ChromeDevelopers/ YouTube videos from the Google Chrome Developers team 2022-07-14T13:00:19Z https://developers.google.com/web/images/web-fundamentals-icon192x192.png 2022-07-14T13:00:19Z 2022-07-14T13:00:19Z 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 ]]> Google Developers 2022-07-13T13:00:10Z 2022-07-13T13:00:10Z 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 ]]> Google Developers 2022-07-12T10:13:08Z 2022-07-12T10:13:08Z 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 ]]> Google Developers 2022-06-30T13:00:24Z 2022-06-30T13:00:24Z 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 ]]> Google Developers 2022-06-29T13:01:50Z 2022-06-29T13:01:50Z 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 ]]> Google Developers 2022-06-28T10:00:03Z 2022-06-28T10:00:03Z 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 ]]> Google Developers 2022-06-22T09:00:26Z 2022-06-22T09:00:26Z 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 ]]> Google Developers 2022-06-21T13:00:10Z 2022-06-21T13:00:10Z 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 ]]> Google Developers 2022-06-16T13:00:02Z 2022-06-16T13:00:02Z 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 ]]> Google Developers 2022-06-08T13:09:42Z 2022-06-08T13:09:42Z 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 ]]> Google Developers 2022-06-07T10:00:14Z 2022-06-07T10:00:14Z 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 ]]> Google Developers 2022-05-30T13:20:05Z 2022-05-30T13:20:05Z 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 ]]> Google Developers 2022-05-25T13:00:35Z 2022-05-25T13:00:35Z 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 ]]> Google Developers 2022-05-24T10:03:55Z 2022-05-24T10:03:55Z 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 ]]> Google Developers 2022-05-18T13:00:01Z 2022-05-18T13:00:01Z 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 ]]> Google Developers 2022-05-13T01:40:24Z 2022-05-13T01:40:24Z 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 ]]> Google Developers 2022-05-12T20:07:08Z 2022-05-12T20:07:08Z 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 ]]> Google Developers 2022-05-12T18:06:01Z 2022-05-12T18:06:01Z 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 ]]> Google Developers 2022-05-12T16:07:36Z 2022-05-12T16:07:36Z 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 ]]> Google Developers 2022-05-12T14:11:33Z 2022-05-12T14:11:33Z 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 ]]> Google Developers 2022-05-12T12:37:25Z 2022-05-12T12:37:25Z 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 ]]> Google Developers 2022-05-12T12:33:38Z 2022-05-12T12:33:38Z 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 ]]> Google Developers 2022-05-12T12:32:24Z 2022-05-12T12:32:24Z 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 ]]> Google Developers 2022-05-12T12:32:01Z 2022-05-12T12:32:01Z 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 ]]> Google Developers 2022-05-12T12:30:17Z 2022-05-12T12:30:17Z 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 ]]> Google Developers