Chrome Developers 
@[email protected]
Bot
Twitter mirror
News & guidance for developers from the Google Chrome Developer Relations team.
Joined Dec 2020
RT Adam Argyle
Virtual Keyboard API 😍
"developers can use [virtual keyboards] to enable better customization of their webpage's content and experiences."
```js
navigator.virtualKeyboard.overlaysContent = true
```
```css
env(keyboard-inset-height)
```
learn more 🔎
https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/VirtualKeyboardAPI/explainer.md
High performance storage for your app: the Storage Foundation API 🏎
#StorageFoundation—An API that gives developers flexibility by providing generic, simple, and performant primitives on which they can build higher-level components.
https://web.dev/storage-foundation/
Re @evilrusltd Hey! Can you say a bit more about these 50 hoops? You should be able to just go to
^@DasSurma
http://crbug.com/new
Web Audio 🔈 (
@W3C Proposed Recommendation as of May 6, 2021.
This means it's been sent to the W3C Advisory Committee for final endorsement before turning a Web Standard 🎉—Usable on all modern browsers:
(via @hochsays)
https://www.w3.org/TR/webaudio/
https://caniuse.com/audio-api
RT Jake Archibald
Almost all mobile screens are double-density, but that doesn't mean images need to be 4x the file size.
However, you need to be careful those heavily compressed images don't end up on low-density screens. Here's how:
https://jakearchibald.com/2021/serving-sharp-images-to-high-density-screens/
👀The web has gotten more capable with many new APIs. In this new video, @drenzulli shows you how to you can combine them for some advanced PWA patterns, making your web site more app-like. In Spanish (with English subtitles)!
https://www.youtube.com/watch?v=PPJKljH1dn8
What does it take to make your web app installable? How customizable is it? What are the best practices?
@petele gives you the answers to all of these questions in the PWA install flow deep dive video!
https://www.youtube.com/watch?v=kzJfiKQyD24
RT Jake Archibald
📝 Serving sharp images to high density screens
➡️ How popular are high density screens?
➡️ How to compress for DPR > 1
➡️ How to serve images for different densities
https://jakearchibald.com/2021/serving-sharp-images-to-high-density-screens/
RT Rick Viscomi
New behavior in PageSpeed Insights: partial field data 🎉
Previously you'd see "no data" if you were just missing FID data. Now you'll see whatever is available.
This is a big deal because ~30% of origins in CrUX were missing FID data!
https://developers.google.com/speed/docs/insights/release_notes?hl=en-US&utm_source=PSI&utm_medium=incoming-link&utm_campaign=PSI#june-10,-2021
RT Adam Argyle
🆕 #GUIchallenges on Color Schemes
⚙️ auto
☀️ light
🌙 dark
💡 dim
Learn how I use CSS custom properties for multiple color schemes. How do you?!
Watch
Read along
Try a demo
Code
https://www.youtube.com/watch?v=oHcTn83M1ls&list=PLNYkxOF6rcIAaV1wwI9540OC_3XoIzMjQ
https://web.dev/building-a-color-scheme/
https://gui-challenges.web.app/color-schemes/dist/
https://github.com/argyleink/gui-challenges
RT Adam Argyle
🆕 post on
CSS `size-adjust` for `@\font-face` declarations
👉🏻
✅ mitigate CLS
✅ normalize font sizing
covers friends too!
1️⃣ ascent-override
2️⃣ descent-override
3️⃣ line-gap-override
[video alt: 64px font-size consistent!!!]
http://web.dev/
https://web.dev/css-size-adjust/
📢 Introducing: libSquoosh
libSquoosh is an experimental Node library on top of which the Squoosh CLI is built, giving you all the capabilities for the Squoosh CLI with a JavaScript-idiomatic interface.
Read more here👇
https://web.dev/introducing-libsquoosh/
RT Chrome UX Report 📊
🆕 The May 2021 data is now available on BigQuery!
View the full release notes on the CrUX Announce channel 👇
Continue reading for a summary of what's new...
https://groups.google.com/a/chromium.org/g/chrome-ux-report-announce/c/tjakkbenFZo
https://twitter.com/ChromeUXReport/status/1402386575040958464
RT Paul Kinlan
Getting more Developer feedback in to Chrome.
https://paul.kinlan.me/web-developer-insights-community/
🆕 #CSSpodcast on @\scroll-timeline!
Learn about scroll-linked vs scroll-triggered animation and how to orchestrate scroll interactions with CSS
Listen
Spec
Polyfill
@bramus slides
https://pod.link/thecsspodcast
https://goo.gle/3pvWX49
https://goo.gle/3x8CQvw
https://goo.gle/2TPs7HU
🗜 You know GZIP right? It’s everywhere on the web to reduce the number of bytes going over the wire. In this brand new HTTP203, @DasSurma gives @jaffathecake and you a quickstart on how it works.
Watch more here 👇
https://www.youtube.com/watch?v=PZryHH8roIY
There are many HTTP headers to consider when securing your website. CSP, X-Frame-Options, CORP, COOP, CORS... What are they useful for? Which one should you use?
Check out our Security Headers Quick Reference to learn about them:
https://web.dev/security-headers/
Chrome 92 Beta is here !
Web Apps as File Handlers, New JavaScript Features, and More🎉
https://blog.chromium.org/2021/06/chrome-92-web-apps-as-file-handlers-new.html
RT Una Kravets 👩🏻💻
There are a ton of CSS & styling-related tips for improving performance and Core Web Vitals metrics 🚀
@katiehempenius and I show you how in this just-posted article! Covering:
🏗️ Layout
🖼️ Images
📚 Fonts
🎠 Animations
⏱️ & Loading!
Give it a read ⤵️
https://web.dev/css-web-vitals/
🔠 Input matters for Chrome OS
In this session, find out how to approach app input given the increasing variety of device form-factors. We also discuss how to support these input sources and why it is essential for your app to do so.
Start learning →
https://goo.gle/2S2Rmpp
Bot
Twitter mirror
News & guidance for developers from the Google Chrome Developer Relations team.
Joined Dec 2020
