Thread by @bunopus

Here i'll start text streaming of @chromedevsummit #chromedevsummit. Keep in touch 🖐️

It's starting! 🥳

Opening Keynote highlights
Platform:
- focus on fully capable web applications (PWA)
- WebAssembly Summit, Feb 10 (bit.ly/wasm-summit-20…)
- Backdrop filter
- SMS receiver API

@rauchg on stage! Straight from @holyhs 😄

Web developers tools:
- lighthouse-ci, tool to run Lighthouse reports in CI (github.com/GoogleChrome/l…)

Chrome memes! #ChromeDevSummit

And of course, here is the bigwebquiz.com. This year battle of preferences!
Tabs vs spaces 🤯🙄

Security with @estark37 and @Log3overLog2:
- Chrome will show a new warning, if domain contains visually similar characters. Like Cyrillic "a" in exаmple.com
- EV certificate is now will move to popup
- simplified url bar
- Suspicious site reporter
#chromedevsummit

goo.gle/suspicious-sit…
Special extension for Chrome that shows full url and many more
#ChromeDevSummit

New tools for third parties:
- goo.gle/private-join-a…
- federated.withgoogle.com
- goo.gle/cookie-blockin…
#chromedevsummit

New in cookies: they will be available for first party site only, by default.
goo.gle/samesite-none-…
#chromedevsummit

SMS receiver API: allow browser to read SMS messages, to reduce time to login.
Use navigator.sms.receive()
Learn more: goo.gle/SMSReceiverAPI
#chromedevsummit

2FA with authenticator: you can use navigator.credentials API.

Good news for Pixel 4 users, face verification will work starting from Chrome 79, yay! 🥳
#chromedevsummit

Useful links about authentication:
goo.gle/FIDO
webauthn.guide
goo.gle/WebAuthnReauth…
bit.ly/AwesomeWebAuthn
#chromedevsummit

New CSS feature: backdrop filter. Instagram like filters in Chrome!🤯
#chromedevsummit

Performance Metrics evolution
#chromedevsummit

New performance metrics in Chrome:
- Largest Contentful Paint (LCP)
- Total Blocking Time (TBT)
- Cumulative Layout Shift (CLS)
web.dev/metrics
#chromedevsummit

New metrics score in Lighthouse v6 (Jan 2020)
#chromedevsummit

Important note: new Lighthouse extension will run reports on the server, not locally
#ChromeDevSummit

Lighthouse stack packs - hints for specific framework were updated for major frameworks. Angular, React and others
#ChromeDevSummit

Lighthouse CI! 🥳
bit.ly/lhci
bit.ly/lhci-action
#ChromeDevSummit

Adaptive loading react hooks! 🤯
Adapt your content for low-end devices or network.
(Angular or Vue available too)
bit.ly/react-adaptive
bit.ly/adaptive-angul…
bit.ly/adaptive-vue
#ChromeDevSummit

Proposal for media query, that aware if user prefer reduced data. Developer can show low quality images in that case.
bit.ly/csswg-prd
#ChromeDevSummit

Network-avare code splitting for React. Load resource depending on network
#ChromeDevSummit

Comlink - package that wraps Web Workers and gives nice API on top of them
npm.im/comlink
#ChromeDevSummit

To support media buttons use navigator.mediaSession.setActionHandler("key", () =>)
#ChromeDevSummit

Few words about CSS:
Use scroll-snap-type for carousel-like lists to stop on each element while scrolling
#ChromeDevSummit

media(prefers-*) queries:
- reduced-motion to reduce animation
- color-scheme for dark mode
- contrast
- reduced-transparency
- light-level
- forced-colors
#ChromeDevSummit

Flex gap! 🥳
#ChromeDevSummit

Houdini custom properties: ability to describe properties with inheritance, syntax etc. #ChromeDevSummit

Typed OM: you can get computed style propery as an object, not as string #ChromeDevSummit

Check out this site: Painting api examples extra-css.netlify.com
#ChromeDevSummit

New in css:
- size
- aspect-ratio
- min(), max(), clamp()
- list style type 🔥🔥🔥
- display: outer inner
- css regions
- css modules
Learn more: a.nerdy.dev/css-at-cds
#ChromeDevSummit

Logical properties:
Optimize your site for international usage (RTL or other languages)
#ChromeDevSummit

Future in PWA manifest:
- app shortcutsblike in Android
- web share target
#ChromeDevSummit

Some of PWA hints:
- promote your PWA, but not to
your native app users web.dev/get-installed-…
- hide mini infobar using 'beforeInstallPromt' listener
- don't forget the analytics
#ChromeDevSummit

#PWA hints:
- Modify default focus ring
- Don't ship default UI components
- Disable text selection
- Set theme color
- Disable overscroll or set a background color on <html>
- Safe-area-inset
- Don't allow navigation to another domain
#ChromeDevSummit

Past, present and Future of Chrome API. So many things! 😮😮
Which one is your favorite?
goo.gle/fugu-api-track…

And that's it for the day one. Stay tuned for day two✌️#chromedevsummit

Hello from day two of #ChromeDevSummit

Use developers.chrome.com/origintrials to test new Chromium features
#chromedevsummit

Contact picker API: show native contact picker using 'navigator.contacts'
#chromedevsummit

Idle detector API. Super useful to do some background work or stop heavy tasks
#chromedevsummit

Microsoft and Google collaboration around UI elements:
- new <meter>
- <range>
- <checkbox> and <radio>
- time picker! 🔥
#chromedevsummit

Another new controls by Microsoft
- color picker (with high contrast via media query forced colors)
#chromedevsummit

Select is most hateful form control 🤬 #chromedevsummit

New feature (announced a while ago though) - Display locking. Affects performance and a11y.
#chromedevsummit

Wakelock API: screen will not dim or lock
web.dev/wakelock/
#chromedevsummit

Shortcuts API: add Android or iOS shortcuts for installed apps
github.com/MicrosoftEdge/…
#chromedevsummit

Looks like @Google bets on #nextjs. My congratulations to @rauchg 🥳
#chromedevsummit

New Babel preset helps to ship less JS to modern browsers github.com/babel/preset-m…
#chromedevsummit

Periodic background sync for #PWA
web.dev/periodic-backg…
#chromedevsummit

CI for web bundles (web.dev/web-bundles/)
'npm install wbn'
🔥🔥🔥
#chromedevsummit

Oops, of the thread

https://twitter.com/bunopus/status/1194358184686673920?s=19

New WebAssembly features
- implicit cashing
- threads (Chrome 74+)
- feature detection (github.com/GoogleChromeLa…)
- SIMD (mediapipe.page.link/web)
#chromedevsummit

Audio device client. API for low-level access to audio device
github.com/WebAudio/web-a…
#ChromeDevSummit

Chrome extension manifest v3 is a significant change in extensions API.
To migrate you'll need:
• background context changes
• host permission changes
• remotely hosted code restrictions
• network requests modification changes
bit.ly/mv3-migration
#ChromeDevSummit

Raw clipboard API: gives ability to read raw clipboard data
github.com/WICG/raw-clipb…
#ChromeDevSummit

About Google search:
- Googlebot is evergreen (up to date)
- do NOT detect bot by user agent (it will change)
- lazy loading is supported 🔥
- shadow DOM is supported too
- there is special api for high res images
- Structured data bit.ly/rich-results-g…
#ChromeDevSummit

Aaand that's it for the #ChromeDevSummit 2019! Thank you all 😘