
shadeed9 ✍️ New Article: Colors in CSS
I wrote about color types, specific keywords, and when to use them along with use-cases. This is a brain dump to keep my notes about colors in one place. I hope you enjoy it!
🔗 ishadeed.com/article/css-co… pic.twitter.com/WN3FFLNOpo
@fjakobs @mikedeboer @mozilla I think filing a feature request bug on Mozilla’s bug tracker bugzilla.mozilla.org/enter_bug.cgi?… could work as a first step.
dalmaer “They do use some interesting software on Dragon 2. They use Chromium and JavaScript for the Dragon 2 flight interface. The actual flight computers still run on C++”
And kudos to those who helped them here. You know who you are. space.stackexchange.com/questions/9243…
@nhoizey @simevidas @briankardell Just opened github.com/WICG/display-l….
fjakobs Surprised that the WebSocketsStream API is gaining no traction outside of Chrome. It’s so obvious that missing backpressure in the existing API is such a miss.
/cc @stubbornella @tomayac @cramforce
web.dev/websocketstrea…
@nhoizey @simevidas @briankardell Yeah, “display locking” is not the most intuitive name. Think “locking the displaying of things on a screen”, _not_ “locking the physical display (i.e., screen)”. Maybe “render locking” would be a better (
@nhoizey @simevidas @briankardell “Display Locking is an umbrella term of related features [to increase perf.]. In addition, some of the features in the display locking project enable site behaviors that were not previously easy to accomplish (e.g. seargithub.com/WICG/display-l…
simonhearne There’s been some discussion about Chrome’s `Lite mode` recently. I dug into 2Bn page views to find out who uses it.
Some of the key factors:
💰 Income inequality
📱 Device cost & age
📶 Network quality
It’s set-and-forget, do folks know it’s on?
simonhearne.com/2020/save-data/
@nhoizey @simevidas @briankardell Shhh 🤫, work on fixing it is already happening: github.com/WICG/display-l….
.@MozDevNet now has great tutorials for React, Vue, and Ember: developer.mozilla.org/en-US/docs/Lea…. My (unpopular 🐧?) opinion is that most people should probably start here: developer.mozilla.org/en-US/docs/Web…. #UseThePlatform. This is not against frameworks, but about knowintwitter.com/MozDevNet/stat…
App Shortcuts (web.dev/app-shortcuts/) is a Project Fugu 🐡 feature that seems universally appreciated and loved. It also just got its third LGTM from the Blink API owners (groups.google.com/a/chromium.org…), meaning it’s ready to ship (currently scheduled for C
microblocksfun MicroBlocks now runs in a Chrome or Edge web browser.
microblocks.fun/blog-2020-05-2…
🤩 Chrome 84 Beta: Web OTP, Idle Detection, App Icon Shortcuts, Wake Lock, Content Index,..blog.chromium.org/2020/05/chrome…b5. It’s Project Fugu 🐡 wonderland essentially.
@maudnals Maybe intranet search?
Chrome 84 will put an end to those “Click to prove that you are not a bot” (and similar) notification prompt tricks. 👏 twitter.com/ChromiumDev/st…

ChromiumDev 📢 Announcing Core Web Vitals support across all your favorite developer tools!
web.dev/vitals-tools
- PageSpeed Insights
- Lighthouse + CI
- Chrome DevTools
- Chrome UX Report
- Search Console
…and more! pic.twitter.com/mMWQwBUHHx
@Paul_Kinlan I’ve used @IFTTT for this in the past. Here’s a recipe that sounds like it’s doing (plus an email) what you’re doing: ifttt.com/applets/Jdn2HB….
Official Google Webmaster Central Blog: Evaluating page experience for a better web: webmasters.googleblog.com/2020/05/evalua…
If you happen to use NoSleep.js (npmjs.com/package/noslee…), be sure to update to version 0.11.0: @_richtr has just merged my PR that adds native Wake Lock API support. 🎉 It’ll fall back to the previous invisible video hack for browsers that don’t suppor
@DanShappir @_developit @DanShappir @_developit For 2), @sergiomdgomes has covered this in developers.google.com/web/updates/20….
kennethrohde TC39 presentation about ES Module Attributes
I really hope this progresses smoothly
docs.google.com/presentation/d…
@FremyCompany @frivoal Makes sense, merci. Seems like for color schemes we’ve ended up in a binary world where it’s either dark or light. Personally I’m fine with this, but I certainly understand the argument you have been making. Thanks for the wor
@frivoal (Actually mentioning @FremyCompany.)

@frivoal @fantasai @csswg Thanks, again very helpful!
The Windows 10 three-way setting I have allows for dark/light/custom, with custom letting you only switch between light/dark separately for windows and apps. So still binary in the end. I’m on an Insidpic.twitter.com/1mcy4wsAqn
@frivoal @fantasai @csswg Truly trying to understand the historical development here, this is not about blaming the ones or the others. As far as my understanding goes, Apple was first with piloting dark mode and the media query: webkit.org/blog/8718/new-….
@frivoal @fantasai @csswg Thanks for the additional information, very helpful. Not sure if browsers alone are to blame for the lack of `no-preference`, though. Didn’t OS vendors default folks who never touched the system settings into light (or only giv
@AnaestheticsApp Thanks, looks great. Let’s see what the investigation of the team reveals.

@aemkei 100/100 for SEO? 😝 pic.twitter.com/Tjn3RCACXl
@AnaestheticsApp Interesting. It doesn’t reproduce on iOS Safari. Could you file a crbug.com/new and post the bug URL here? Thanks!
@kennethrohde @yoavweiss @DanShappir @sil @briankardell en.wikipedia.org/wiki/.ipa Close. Definitely catchier than APK.
@yoavweiss @DanShappir @sil @briankardell It would obviously get rejected, but it could still be distributed in code form for people to build themselves (or even the built IPA so folks can side-load it). I’m just curious if someone ever attempted it.
@AnaestheticsApp It seems I need an account to navigate to this particular page in the app, so I couldn’t test. Did you set a dark background on the `html` element, too, apart from the `body`?
pikapkg Snowpack 2.0 - A build system for the modern web.
◆ Starts up in <50ms.
◆ O(1) file builds.
◆ Simplified tooling.
◆ Built-in support for TS, JSX, CSS Modules.
◆ Works with your favorite production bundler.
◆ Create Snowpack App (CSA) templates.
snowpack.dev/posts/2020-05-…
@johnwilander I like the cool one for its more neon-ish look.
Watching your Web Vitals (web.dev/vitals/) is now as easy as opening the Search Console ⤵️. If you care for your users, have an eye on your numbers and fix them. #SEO for reach. 😉 twitter.com/googlewmc/stat…
@slightlylate @Justinwillis96 Coffee ☕️? Here 🤚.
@yoavweiss @DanShappir @sil @briankardell Did someone ever try to build real Chromium for iOS? Did someone ever succeed even?
@fantasai @frivoal @csswg Gotcha, thanks! In theory at least on a page it could be dark for `dark`, light for `light`, and, for example, red for `no-preference`. I have seen no one use that. Probably for the reason you wrote.
@fantasai @frivoal @csswg Do you have an example of a site that meaningfully deals with all three values?
@premnath321 I can’t provide individual SEO consulting here, sorry. Be sure to subscribe to youtube.com/user/GoogleWeb….
@premnath321 @sebabenz @AMPhtml 2! PWA is not limited to mobile.
The `prefers-color-scheme` media query used to support three values:
`dark` 🌒,
`light` ☀️,
`no-preference` 🤷♀️
Since almost everyone, me included, treats `no-preference` as `light`, the @csswg has just decided to remove `no-preference` github.com/mozilla/wg-dec…
The use case for keeping the screen on is _absolutely_ valid (see web.dev/betty-crocker/), which is why on the Project Fugu 🐡 team we have developed a native Web platform way to achieve this.
📢 In Chrome, we plan on no longer taking wake locks for invisible videos (see chromium-review.googlesource.com/c/chromium/src…).
This was used as a “hack” to keep the screen on, which you can do natively now with the Screen Wake Lock API: web.dev/wakelock/.
(@_richtr Fgithub.com/richtr/NoSleep…
@rauschma Excellent blog post on Records and Tuples! Thank you. I noticed a tiny typo: s/an compound/a compound/. (Would have DM’ed it, but your DMs aren’t open.)
The most concise overview of the Records and Tuples JavaScript proposal that I’ve read so far. 👏 Thanks, @rauschma! twitter.com/2ality/status/…
bocoup 📣 Introducing the Web Platform Contribution Guide
📖 A free in-depth guidebook about how YOU can help improve the web platform:
bocoup.com/blog/introduci…
I’m super excited about #webdevLive, a three-day all virtual event that we’re putting together from our home offices 🛋 for all web developers. Day 2 is the Project Fugu 🐡 & Progressive Web Apps day. web.dev/live/. Each day starts frientwitter.com/ChromiumDev/st…
👍 The @FirefoxDevTools now show the reason (for example, due to an extension) why a request was blocked in the Network tab. Filed bugs.chromium.org/p/chromium/iss… to have this in @ChromeDevTools. twitter.com/FirefoxNightly…
Records and Tuples looks like a really nice potential addition to the JavaScript language. You can play with it in the playground: rickbutton.github.io/record-tuple-p…. More details in the quoted tweet: ⤵️ twitter.com/sebastienlorbe…

andrey_l1nd3n Wake Lock API by @BettyCrocker 👉 web.dev/betty-crocker/
✅ User-first design with failsafe fallbacks
✅ Interoperability
✅ 3.1x longer sessions
❌ Flour on screens
🌐💙🍳 pic.twitter.com/FZHrTbuFM7
__DavidFlanagan A bit of a blog rant here about old features of JavaScript and the web platform that are completely obsolete now and that deserve to be forgotten: davidflanagan.com/2020/05/12/jav…
I’m sure I’ve missed plenty. What bits of old JS are you most happy to no longer need?
@simevidas There’s a setting to turn “What’s new” off: groups.google.com/forum/m/#!topi….
Part of the Project Fugu 🐡 launch process (developers.google.com/web/updates/ca…) is the Blink launch process (chromium.org/blink/launchin…)—of which getting a@w3ctagg review is an important subpart.
🙋 Be sure to subscribe to the TAG issues for “your” Project Futwitter.com/w3ctag/status/…
cjamcl Is a running app possible as a PWA? I think maybe, but you’d have to use the screen wake api, which would burn battery. Any way to use geo api when phone is locked?
@cjamcl Some time ago I experimented with exactly this idea, but with an at the time still defined “system” wake lock (the demo no longer works): blog.tomayac.com/2018/12/18/exp…. For the Project Fugu 🐡 take (potentially in the future), track bugs.chromium.org/p/chromium/iss…
Let’s Make One of Those Fancy Scrolling Animations Used on Apple Product Pages: css-tricks.com/lets-make-one-…. Definitely keep the final remark in the article in mind: be wasteful only if you can afford it (rephrasing mine).
@jyasskin @slightlylate I was about to point to github.com/RemoteDebug/re…, but have personally never been able to get it to work on iOS >12. It’s nice in theory, though, or at least for devices on old builds.
@simevidas @anssik Since the workaround to achieve the same behavior (i.e., playing an invisible video) doesn’t require permission, we made the API permission-less, and gave it a predictable lifecycle: web.dev/wakelock/#wake….
@simevidas That’s fair feedback. Compatibility is mentioned in web.dev/web-share-targ…, but yes, it might be clearer.
@gregwhitworth @MSEdgeDev All the best for whatever comes next.
Eruda: An entire DevTools in a script tag that you can inject in a page via a bookmarklet: github.com/liriliri/eruda… 🤩 (via @Paul_Kinlan)
rauschma Browser-NativeFS: native file system API for browsers, with legacy fallback
github.com/GoogleChromeLa…
argyleink Did you know the macOS system-ui font was a variable font?
.. and it just got better!
Chromium 83 brings the new variable font features to CSS near you and also resolves a pesky macOS Catalina system-ui bug.
What’s new and how we fixed it 👇
web.dev/more-variable-…
Paul_Kinlan TIL that you can run bookmarklets in Chrome on Android, after years of me thinking you couldn’t.
paul.kinlan.me/use-bookmarkle…
Wow, this is a genius take on the masonry layout challenge with pure CSS 🤩 and flexbox at its core ⤵️. @tobiasahlin has created demos for various column counts: codepen.io/collection/XPj….
(via @argyleink) twitter.com/tobiasahlin/st…

searchliaison Google’s Knowledge Graph has amassed over 500 billion facts about five billion entities — people, places and things. This post explains how the Knowledge Graph works, presents information in knowledge panels & how we work to improve it. blog.google/products/searc… pic.twitter.com/ZR4CR8BzTJ
mattdsteele Made a little <bt-device> component to make setting up Web Bluetooth a little easier: steele.blue/renderless-web…
Also a few thoughts on building “renderless” web components, which I think are pretty neat
Why is this website port scanning me? nullsweep.com/why-is-this-we…. Interesting blog post on a dubious bot detection and fingerprinting method.
Super stoked about App Shortcuts, a true Project Fugu 🐡 collaboration between @MSEdgeDev and @ChromiumDev. Available on mobile and desktop, and super easy to add to your PWA. Read all details in François’ and @jungkees’ article: ⤵️ twitter.com/ChromiumDev/st…
@chelo_xl @ChromiumDev This is working as intended, when the screen turns off, speech synthesis will stop. See chromium.googlesource.com/chromium/src.g… for details. If you need to prevent the screen from turning off so your app continues to speak, use the screen wake lockweb.dev/wakelock/

aemkei // #HIEROGLYPHS.js
// Valid JavaScript from the year 2020 BC:
𓅂=”,𓂀=!𓅂+𓅂,𓁄=!𓂀+𓅂,𓊎=𓅂+{},𓆣=𓂀
[𓅂++],𓊝=𓂀[𓇎=𓅂],𓏢=++𓇎+𓅂,𓆗=𓊎[𓇎+𓏢
],𓂀[𓆗+=𓊎[𓅂]+(𓂀.𓁄+𓊎)[𓅂]+𓁄[𓏢]+𓆣+
𓊝+𓂀[𓇎]+𓆗+𓆣+𓊎[𓅂]+𓊝][𓆗](𓁄[𓅂]+𓁄[
𓇎]+𓂀[𓏢]+𓊝+𓆣+’`𓅂 𓏢 𓂀 𓁄 𓆣 𓊝 𓇎`’)“ pic.twitter.com/ETU1EMXysZ
@chelo_xl @ChromiumDev This is not about fixing, but about getting more info about the problem. Check the error’s message property, it might have more details.
🎊 Trusted types, updated form elements, serializable file handles, barcode detection, color-scheme,… Some many things are new in Chrome 83developers.google.com/web/updates/20…K5
@chelo_xl @ChromiumDev Have you tried catching errors? wicg.github.io/speech-api/#sp… Maybe the browser lets you know more details.
@mischmerz I honestly don’t know.
@chelo_xl @ChromiumDev Maybe try filing a new.crbug.com, or providing additional data for a potentially existing bug.
@schweinepriestr “DoT only uses port 853, while DoH uses port 443.
Because DoT has a dedicated port, anyone with network visibility can see DoT traffic coming and going, even though the requests and responses themselves are encrypted.”-cloudflare.com/learning/dns/d…
@aemkei Congratulations! Well deserved! 🎊
The @MSEdgeDev team’s Project Fugu 🐡 talk from the #MSBuild conference: youtube.com/watch?v=y4p_QH…. Super excited about their work!
Chromium Blog: A safer and more private browsing experience with Secure DNS blog.chromium.org/2020/05/a-safe…. DNS-over-HTTPS is a massive step forward toward a better, more secure web. 🔒
windowsblog Everything new from Microsoft Edge at Build 2020 blogs.windows.com/msedgedev/2020…

____lighthouse 📣Lighthouse 6.0 is out! Introducing new metrics to track Core Web Vitals, an updated performance score, multiple new audits, and more. Read the full details:
web.dev/lighthouse-wha… pic.twitter.com/zMtYvSwRbP

tkadlec Nice little feature in Chrome Dev Tools. Hover over the LCP badge under Timings in the Performance Panel and it shows you what triggered the LCP metric. pic.twitter.com/lGDiHudpBG
ChromiumDev 🧁 Recipe site @BettyCrocker has implemented the Wake Lock API seeing a 300% increase 📈 in purchase intent indicators on bettycrocker.com and resolving the “№ 1 millennial problem”—devices turning off during cooking:
👉web.dev/betty-crocker/N
(by@philkriee &@tomayacc)
@derSchepp @ChromiumDev Huh, I thought it was supported since 76 (web.dev/backdrop-filte…). @argyleink, do you have more background?
@gingerbeardman @danbri @benedictevans PWAs can’t badge the app icon on iOS yet, but they can on macOS. FWIW, @danbri, I’ve just filed crbug.com/1084470 regarding the inability to turn off badges via System Preferences.
@simevidas @rynkns Maybe flash a custom ROM: getdroidtips.com/lineage-os-16-… 🤓
@mischmerz I don’t have an answer, sorry.
ChromiumDev Preparing for AppCache removal:
Chrome 85 removes support for AppCache by default. Most developers should migrate off AppCache now, and not wait any longer.
web.dev/appcache-remov…
@danbri @benedictevans Once PWAs are better integrated in the operating systems it should be possible to forcibly turn badges off on a per-app basis using the particular OS’s settings option. Meanwhile, yeah, I can see how this could be annoying. App de
@benedictevans This feels like an interesting place to let people know about the Badging API: web.dev/badging-api/. 🔴 Yes, your Progressive Web Apps can do this.

@thalhamm Thanks, I’ve just filed feedback. If you notice something like this in the future, please let us know. 🦉 Ironic error indeed..pic.twitter.com/4tj7YhZJkQkQ
@rektide @welfordian @ChromiumDev The API will, if, and only if, all preconditions (running in secure top-level context, notifications permission granted) are met, report the idle state as outlined here: web.dev/idle-detection…. Note that this is an origigithub.com/GoogleChrome/O…
Microsoft Edge now has its own origin trials system: developer.microsoft.com/en-us/microsof… 🧪 Exciting stuff coming from @MSEdgeDev!
@MartijnSaly @ChromiumDev Addendum: “Your device may receive push messages from the backend servers of apps and extensions installed in Chrome, websites that you grant the “notification” permission to, and your default search engine.”-google.com/chrome/privacy…
@denladeside @ChromiumDev That’s the best reply so far. 😂
@bacellirodrigo @ChromiumDev For the time being (during this origin trial), you would have to revoke the notification permission for the site: support.google.com/chrome/answer/….
@koome_EE @ChromiumDev Please see web.dev/idle-detection….
@realnoam @zackster @ChromiumDev @kennethrohde The requirement is to be running as a top-level frame (web.dev/idle-detection…) with the notifications permission, but yes, with enough time correlating even fuzzed signals might be possible.
@realnoam @zackster @ChromiumDev @kennethrohde Yes, personally I do agree: github.com/WICG/idle-dete….
@bacellirodrigo @ChromiumDev Some example use cases are given in web.dev/idle-detection…. Note that this API isn’t exposed to all sites, but just the sites you trust enough to grant them the notifications permission: web.dev/idle-detection….
@kennethrohde @zackster @ChromiumDev Yes, this is likely going to confuse users if it appears out of context and since permissions don’t let the developer add metadata (X is requesting the Y permission because X wants to do Y.”).
@arye_eidelman @welfordian @ChromiumDev Notification prompts should be less noisy now (blog.chromium.org/2020/01/introd…), but I agree, there are use cases for this API that don’t touch notifications: github.com/WICG/idle-dete….
@zackster @ChromiumDev @kennethrohde This is a very valid argument, permission fatigue is real. At the same time, we’re wondering whether “notifications” is the right umbrella permission for this, or whether there should be a dedicated “idle-detection” pe
@HenriHelvetica @ChromiumDev @instagrameng @fb_engineering I obviously can’t speak for other companies, but any kind of communications product (text, voice, video,…) could potentially use this for higher accuracy than their current solutionsweb.dev/idle-detection…
@madebyfabian @ChromiumDev Note that you’d need to grant advertisers the notifications permission for this to be abused: web.dev/idle-detection….
@MartijnSaly @ChromiumDev This would hypothetically be possible, but is not the case.
@EJDaly @ChromiumDev This would be a legitimate use case, yes.
@MartijnSaly @ChromiumDev It can only be abused if you have granted the advertising company the notifications permission: web.dev/idle-detection….
@EJDaly @ChromiumDev Activity in other apps than the browsers is considered, yes.
@iamareebjamal @givbacksandwich @ChromiumDev I personally tend to agree: github.com/WICG/idle-dete….
@welfordian @ChromiumDev This would certainly be an option: github.com/WICG/idle-dete….
@ThunderySteak @ChromiumDev Please see web.dev/idle-detection….
@asumaran @ChromiumDev The opt-out currently is to not grant the “notifications” permission. Please see web.dev/idle-detection….
@givbacksandwich @ChromiumDev Anyone whom you have granted the “notifications” permission. Please see web.dev/idle-detection….
ChromiumDev @tomayac For this exciting new Project Fugu 🐡 API we’re very much looking forward to hearing your feedback: tell us if notifications is the right permission to use: web.dev/idle-detection…. #IdleDetection
ChromiumDev 📢 Detect inactive users with the Idle Detection API!
web.dev/idle-detection/ by @tomayac
Use the Idle Detection API to find out when a user isn’t actively using their device, e.g., to show reliable chat availability:
🟢 @alice (active)
⚪️ @bob (away)
🟢 @tomayac (active)
@zcorpan @Rich_Harris @sibbngheid That’s the strategy behind `<dark-mode-toggle>`, too (github.com/GoogleChromeLa…). I’ve had best experiences with separate CSS files (github.com/GoogleChromeLa…), not so great with a dark class (github.com/GoogleChromeLa…). In the
@zcorpan @Rich_Harris @sibbngheid Spec deeplink: drafts.csswg.org/css-color-adju….
@zcorpan @Rich_Harris @sibbngheid Careful with the “$something only”. See the red warning in web.dev/color-scheme/#….
@Rich_Harris @zcorpan @sibbngheid The Medium article was written before full standardization, some things were still undefined. The latest article to read is web.dev/color-scheme/.
HenrikJoreteg This Project Fugu tracker doc makes me very, very happy:
goo.gle/fugu-api-track…
@kdzwinel Congratulations on the family extension!
@bramus @shadeed9 Seems like the mobile Safari data on developer.mozilla.org/en-US/docs/Web… is wrong (claims support, but it’s not working). Have you filed a @webkit bug? bugs.webkit.org/enter_bug.cgi
Una This was a fun post 🥰
Making pure CSS games with counter increment!
una.im/css-games/
@jaffathecake @WebReflection @scottjehl Yepp, mine, too. Trailing slash/

pwabuilder The 0.5 version of the pwa-inking web component is here! 🎉github.com/pwa-builder/pw… uses low-latency canvas rendering with the desynchronized hint for canvas.getContext() and requestIdleCallback() to offer a speedy inking experience. pic.twitter.com/gynlpG5HvX
MylesBorins Experimental support for `Top-Level Await` just landed in @nodejs core!
Amazing work @devsnek
Should go out with the next 14.x release (backporting as I type this). Will work with both `—experimental-top-level-await` and `—harmony-top-level-await`
github.com/nodejs/node/co…
ChromiumDev 🎬 More people should be aware of the new `requestVideoFrameCallback()` API. Read @tomayac’s post to learn more about it. ⤵️ twitter.com/tomayac/status…
@trappology As the spec states (html.spec.whatwg.org/multipage/medi….), it’s an estimation. Different user agents (browsers) may use different heuristics.
@trappology For this use case, `canplaythrough` (developer.mozilla.org/en-US/docs/Web…) is the event you should be listening for. If you’re more of a lazyloading kind of site (or if you don’t preload videos in general or for `Save-Data: 1` folk), then maybe use `loadeddeveloper.mozilla.org/en-US/docs/Web…
@trappology Use cases are outlined in the Explainer: github.com/WICG/video-rvf….
📢 New blog post: The `requestVideoFrameCallback` API.
blog.tomayac.com/2020/05/15/the…
The `requestVideoFrameCallback()` method allows developers to register a callback that runs in the rendering steps when a new video frame 🎞 is sent to the compositor.

shadeed9 What a cool way to learn how SVG paths work! Great explanation by @MathieuDutour.
🔗 svg-path-visualizer.netlify.app pic.twitter.com/84ydMTSzX3
rowan_m I’ll be honest, I had a surprising amount of fun, perhaps even… too much fun fiddling with the demo for thisheavy-ads.glitch.meltwitter.com/ChromiumDev/st…0x
ChromiumDev 📣 Chrome’s Heavy Ad ⚖️ Intervention will unload ads that exceed their allowance for CPU or network usage.
blog.chromium.org/2020/05/resour…
📋 Learn how to monitor these with the Reporting API and update your ads to avoid issues.
developers.google.com/web/updates/20…

Una 🎉 Aspect Ratio just landed in Chrome Canary! 🎉
➡️Check it out by enabling the experimental web platform features flag in version 84.0.4145.0 or later
👋🏽 Say your goodbyes to 56.25% and let me know if you find any bugs! 🐞 pic.twitter.com/M7elcIG6EL
mathias What’s new in Chrome 84’s @ChromeDevTools?
➡️ Issues tab
➡️ Inspect Mode tooltip shows a11y info
➡️ Performance panel: TBT, CLS
➡️ Styles pane: CSS `revert`, image previews
➡️ Colorpicker produces modern CSS syntax
developers.google.com/web/updates/20…
@glitch @potch Any plans on @deno_land support on the Glitch platform? This would be pretty aligned with the way I understand Glitch’s mission.

9to5Google Progressive Web Apps will support Android’s homescreen app shortcuts 9to5google.com/2020/05/12/and… by @NexusBen pic.twitter.com/CX23Hg83Fm
@akctba @rynkns You can annotate your shortcut “url” entries like your “start_url” entries, here’s an example for Google Analytics:
…
“start_url”: “/?utm_source=homescreen”,
…
“shortcuts”: [{
“url”: “/shortie?utm_source=homescreen”
…
}]
…

googlechrome A little organization can go a long way. Managing your tabs just got easier on desktop. Learn more about the latest version of tab groups, now available in #Chrome beta: goo.gle/2WPP63r pic.twitter.com/gebDyzoEo2
@pushbullet @DotProto @rowan_m @ArtemR @Paul_Kinlan Gotcha. I just thought the rejection notice looked horribly familiar. Hope this situation resolves soon.
pikapkg 🍰🍰 Happy Deno v1 Release Day! 🍰🍰
Want to run npm packages in Deno? Try Pika CDN:
🏗️ Works with any npm package, not just ESM!
🪄 TypeScript types included automatically!
👉 pika.dev/cdn
Learn more: dev.to/pika/introduci…
@pushbullet @DotProto @rowan_m @ArtemR @Paul_Kinlan You might do this already, as I wrote I didn’t check your code, but this is what caused my rejection to magically go away for an extension of mine. The Chrome Web Store team’s message was equally cry
@pushbullet @DotProto @rowan_m @ArtemR @Paul_Kinlan Haven’t seen code, but what helps is DYNAMICALLY injecting the contentscript:
chrome.tabs.executeScript({
file: ‘contentscript.js’
}
This allows you to REMOVE this block from the manifest:
“conten
@torgo @w3c Loved your subtle @Snowden visual book mention during the call. It has a special place on my bookshelf, too.
@argyleink #TIL. There should probably be a mention of this only applying to user-editable (as in an input field or `contenteditable`) elements (the section before mentions this: drafts.csswg.org/css-pseudo-4/#…).
@samthor The desktop PWA is great, the music selection is good, including some non-official stuff like concerts etc. (albeit this content may be short lived). No Android Wear app yet, so I am a little stuck with Play still on my watch.
@slightlylate @eleven_ty @Netlify Nice job, especially thanks for keeping the URLs working. I ended up doing an .htaccess lookup table for my blog, but it works.
Meta: I’m seeing some color switching as if links were initially blue, then black, and als
@patmeenan @scottjehl @dalmaer They should have opted for the long URL CableNewsNetwork.com in hindsight. No one ever would have noticed how slow the CNN homepage is this way.

patmeenan The synthetic Web Vitals (LCP, CLS and TBT) are now front-and center in the WebPageTest results for browsers that report them (Chromium-based).
The Filmstrip view also shows a red box around the frame that corresponds to LCP so you can verify it measures correctly for your site. pic.twitter.com/cevy8PDOGW
@fanthomas_ @rynkns @9to5Google It’s not required, but recommended, since most platforms will use shortcuts with icons. w3c.github.io/manifest/#shor…
@fanthomas_ @rynkns @9to5Google Did you use Chrome Canary when you installed the app? It might also be Samsung’s modifications of stock Android, but this is just guessing.

excalidraw We’ve released an initial implementation for free draw support. There’s space for improvement, but we didn’t want to keep you waiting! Let us know what you think.
Thanks @kbariotis! pic.twitter.com/xs2mwsepx8
Read files in JavaScript—from the good old file input to drag and drop to the Native File System API: great overview article by@kaycebasquess and@petelee ⤵️web.dev/read-files/I.
For a “fire and forget” solution, also consider 💾 browser-nagithub.com/GoogleChromeLa…twitter.com/petele/status/…

tomayac 📢 App icon shortcuts are coming to Progressive Web Apps near you! Try @rynkns’s demo sadchonks.com and install it using Chrome Canary on Android.
How does this even work? Glad you ask, it’s through the Web App Manifest’s `shortcuts` member: w3c.github.io/manifest/#shor…. pic.twitter.com/sf1446pOSB
@nhoizey @AaronGustafson Non… ¯\_(ツ)_/¯ At some point there were plans to updat@webkitit Status apparentlybugs.webkit.org/show_bug.cgi?i…qU.
Pro-tip: this also works on Windows if you set the chrome://flags/#enable-desktop-pwas-app-icon-shortcuts-menu flag 🚩!

📢 App icon shortcuts are coming to Progressive Web Apps near you! Try @rynkns’s demo sadchonks.com and install it using Chrome Canary on Android.
How does this even work? Glad you ask, it’s through the Web App Manifest’s `shortcuts` member: w3c.github.io/manifest/#shor…pic.twitter.com/sf1446pOSB
@samthor @MylesBorins I guess I don’t want to know the story behind the “One day you were told…” in the README that led to the creation of this library.
@kevin_dorion Happy about the performance gains. If you need/want me to have a private look, feel free to reach me at tomac AT google DOT com.
@kevin_dorion Hehe, I’m just the messenger in this case. Do reach out to the spec editors, they’ll certainly appreciate your support.
Feel free to share your use case or app if you want, I’d be curious to learn how you use the API.

stefanjudis Today I learned a solution to a problem I didn’t even realize I had. :D
`align-items: safe center;`
#devsheets
🔗 MDN: developer.mozilla.org/en-US/docs/Web…
Video alt: Explanation of safe/unsafe overflow alignment within a flex container. Safe positioning helps to prevent data loss. pic.twitter.com/fVgVdaoATK
@SRobTweets It wasn’t that hard: google.com/search?q=%22ye… 😃
Powerful and super honest post by @SRobTweets on imposter syndrome ⤵️. It hits all of us, don’t you worry! Bonus: I dug out the “Yelp for APIs” Sarah mentions in the post—it’s still up and running:hapily.herokuapp.comS. 👏twitter.com/SRobTweets/sta…
@bradeeoh @simevidas @vjrngn @getify A lot of people ask these questions, so I’ve written a paper about this: research.google/pubs/pub46739/. It also covers the changes Brady mentions: developer.apple.com/documentation/… (SFAuthenticationSession).
@JecelynYeen @eleven_ty @Firebase Great work on the site, love the design. For the toggle: we offer one that’s used on v8.dev, too: github.com/GoogleChromeLa…. Looks like you’re good already, though.
RonnyOrbach @benevansnz @devictoribero @chrisoncode ok, looks like @tomayac already wrote up a piece about Web standardization processes with this very idea (along with why it hasn’t and probably won’t be implemented).
Good read: medium.com/dev-channel/en…

yemount Check out Pose Animator - a web animation tool that brings SVG illustrations to life with real time human perception TF.js models.
Play with demos:
pose-animator-demo.firebaseapp.com
Github repo and tech design documentation:
github.com/yemount/pose-a…
#MadeWithTFJS #TensorFlow #PaperJS pic.twitter.com/KNTRjZqaMv
Preprint xkcd.com/2304/ According to a new Adobe® PDF document… #xkcdcd
stoyanstefanov Nice writeup about the new FB redesign: engineering.fb.com/web/facebook-r… I’m happy to have been a small part of this, mostly around the atomic CSS implementation - value normalization, minification and such
@RReverser @danbri *Cough*, yes it does: github.com/w3c/csswg-draf….
(CC: @tabatkins)
@danbri @RReverser Also. But it comes up in other metadata contexts, like the Web App Manifest: github.com/w3c/manifest/i….
@HenrikJoreteg @DasSurma Pinging @reillyeon for Web Serial, and Web USB. And Web SCSI and Web PCMCIA 😂. Everything Web * really. @petele has written the Web Serial codelab: codelabs.developers.google.com/codelabs/web-s….
@RReverser I know this isn’t about structured metadata, but slightly derailing topic: for blog.tomayac.com, I’ve…
blog.tomayac.com/screenshot-dar…Xg
☀blog.tomayac.com/screenshot-lig…Y6
…schema.orgOW78’s BlogPosting image has no notion search.google.com/structured-dat…@danbri
@alexandracaulea Happy the article was helpful! Nice dark mode implementation!

alexandracaulea I’ve decided to experiment a bit with prefers-color-scheme CSS media feature.
As a good reference to read and follow I found this article web.dev/prefers-color-… written by Thomas Steiner.
Link to CodePen: bit.ly/fccportfoliopa…
#html #css #frontenddeveloper #codenewbie pic.twitter.com/6BVR5Kl9DA

thespite There you go, a Virtual Webcam extension for Chrome
github.com/spite/virtual-…
Have fun and please be responsible! pic.twitter.com/XPRpJtg7S0
@gsnedders @saschaplas XSLT was (at least) okay, too. The issue back then was that the juicier functions weren’t implemented in browsers.

@mahemoff Fully agree, that’s why I wrote “technically”. 😃 (Technically some widgets are customizable by the way.) pic.twitter.com/gtzVDwdwo5
@mahemoff Technically widgets are very much a thing on iOS, just not on the home screen but only in the Today View: support.apple.com/en-us/HT207122.

v8js Logical &&= assignment ||= feature ??= explainer 🔥 v8.dev/features/logic…
In which @_shu shows how to use a new ECMAScript syntax for conditional assignments.
(Experimental implementation is available in V8 v8.4 behind the —harmony-logical-assignment flag.) pic.twitter.com/UihzErr6TY
Super detailed post by @simonhearne on racing the browser cache against the network: simonhearne.com/2020/network-f…. twitter.com/simonhearne/st…

ChromiumDev Flexbox gap!
Need some background, want to know timing of when it hits Chrome stable, or to just ramp up in general!? CSS Chromie @argyleink conjured a web.dev post with some help from the implementing engineer David Grogan.
👇
web.dev/flexbox-gap/ pic.twitter.com/r9Z86OALKj
@SimmerVigor Some well deserved REST…
@Anoesj Yes, this should be it for now. There’re probably going to be more changes in the future: github.com/wicg/native-fi….
@Anoesj You can transparently switch from v1 to v2 simply by removing the v1 token, but again be aware of the code changes (hence the pointer to browser-nativefs).
Your app sounds really interesting, hope to learn more :-)
@Anoesj There’s a new origin trial going on for v2 of the API with some minor changes: developers.chrome.com/origintrials/#…. If you use the browser-nativefs library (github.com/GoogleChromeLa…), these changes are taken care of. Good luck with your project. Is it public
ChromiumDev A couple of the Project Fugu 🐡 folk (virtually) presented a demo paper at The Web Conference (@TheWebConf) in April:
📄 Paper: research.google/pubs/pub48955/
🐡 Demo: glitch.com/~fugu-greetings
The idea’s to show how the various Fugu APIs can progressively enhance an app. Try on 📱💻🖥.
@AutomatedTester @cwiiis In the case of the Play Store, it’s in my opinion not about _prioritizing_ PWAs over native apps, but about positioning them _equally_. It’s a journey with the occasional bump, but it has started: web.dev/using-a-pwa-in….

shadeed9 ✍️ New Article: Everything I Learned About min(), max(), clamp() In CSS
I tried to learn CSS comparison functions and went from “What, how” to “Ahaa, got it”. I wrote about the main concepts, and provided some use-cases and thoughts.
🔗 ishadeed.com/article/css-mi… pic.twitter.com/fAmTuLnliH
@robert_daly @DasSurma Just did some research, this has been discussed in the CSS WG, see github.com/w3c/csswg-draf… (and the entire thread really). I’m not aware of other solutions than the one you are already aware of.
@robert_daly @DasSurma I’ve read this multiple times, but I don’t understand the tweet. Can you provide a link to an example maybe?