Web Shows - Google Developershttps://developers.google.com/web/images/web-fundamentals-icon192x192.pnghttps://youtube.com/user/ChromeDevelopers/YouTube videos from the Google Chrome Developers team2022-07-14T13:00:19Zhttps://developers.google.com/web/images/web-fundamentals-icon192x192.pngHow to emulate CSS user preference media features | DevTools Tips2022-07-14T13:00:19Z2022-07-14T13:00:19Zhttps://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 DevelopersBreaking words with wbr and ­ #Shorts2022-07-13T13:00:10Z2022-07-13T13:00:10Zhttps://youtu.be/HsCOhsqzimg
Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs
]]>
Google DevelopersDemystifyingish SVG paths | HTTP 2032022-07-12T10:13:08Z2022-07-12T10:13:08Zhttps://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 DevelopersHow to inspect CSS container queries | DevTools Tips2022-06-30T13:00:24Z2022-06-30T13:00:24Zhttps://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 DevelopersThinking on ways to solve FABs2022-06-29T13:01:50Z2022-06-29T13:01:50Zhttps://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 DevelopersFLIP animations | HTTP 2032022-06-28T10:00:03Z2022-06-28T10:00:03Zhttps://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 DevelopersGradient shadow #Shorts2022-06-22T09:00:26Z2022-06-22T09:00:26Zhttps://youtu.be/R1Bst2uilxE
Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs
]]>
Google DevelopersNew in Chrome 103: HTTP 103 early hints, Local Font Access, AbortSignal.timeout, and more!2022-06-21T13:00:10Z2022-06-21T13:00:10Zhttps://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 DevelopersChrome 103 - What’s New in DevTools2022-06-16T13:00:02Z2022-06-16T13:00:02Zhttps://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 DevelopersNew in Chrome 102: PWAs as File Handlers, inert, the navigation API, and more!2022-06-08T13:09:42Z2022-06-08T13:09:42Zhttps://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 DevelopersThe history API is dead. Long live the navigation API | HTTP 2032022-06-07T10:00:14Z2022-06-07T10:00:14Zhttps://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 DevelopersChrome 102 - What’s New in DevTools2022-05-30T13:20:05Z2022-05-30T13:20:05Zhttps://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
Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs
]]>
Google DevelopersSamsung Internet - the why & how | HTTP 2032022-05-24T10:03:55Z2022-05-24T10:03:55Zhttps://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 DevelopersThinking on ways to solve BUTTONS2022-05-18T13:00:01Z2022-05-18T13:00:01Zhttps://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 DevelopersBringing Adobe's Creative Cloud to the web: Starting with Photoshop2022-05-13T01:40:24Z2022-05-13T01:40:24Zhttps://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 DevelopersTop 10 web things to know from Google I/O2022-05-12T20:07:08Z2022-05-12T20:07:08Zhttps://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 DevelopersThe state of responsiveness on the web2022-05-12T18:06:01Z2022-05-12T18:06:01Zhttps://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 DevelopersState of CSS2022-05-12T16:07:36Z2022-05-12T16:07:36Zhttps://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 DevelopersDevTools: State of the Union 20222022-05-12T14:11:33Z2022-05-12T14:11:33Zhttps://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.
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 DevelopersA deep dive into optimizing LCP2022-05-12T12:37:25Z2022-05-12T12:37:25Zhttps://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 DevelopersLearn how browsers are working together to make it easier to build for the web2022-05-12T12:33:38Z2022-05-12T12:33:38Zhttps://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 DevelopersOpen web standards with Privacy Sandbox2022-05-12T12:32:24Z2022-05-12T12:32:24Zhttps://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 DevelopersBest practices for developing classroom tools with ChromeOS2022-05-12T12:32:01Z2022-05-12T12:32:01Zhttps://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 DevelopersGaming with ChromeOS2022-05-12T12:30:17Z2022-05-12T12:30:17Zhttps://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