Thomas Steiner (@tomayac)

Now at @tomayac@toot.cafe

The below is an off-site archive of all tweets posted by @tomayac ever

January 2021

@defaced Not on Android, where it’s based on the Web App Manifest (web.dev/splash-screen/). On iOS, you can just specify whatever splash screen you like (developer.apple.com/library/archiv…). One workaround for Android might be to dynamically (re)set the theme col

via Echofon in reply to defaced

addyosmani New Performance Heads-Up Display is now available in @ChromeDevTools! Try it in Rendering > Core Web Vitals in Chrome Canary. pic.twitter.com/lcL7Zza34F

via Twitter Media Studio (retweeted on 12:07 PM, Jan 31st, 2021 via Echofon)

cramforce 🎉 New blog post: More than you ever wanted to know about font loading on the web
Featuring
👷🏽‍♀️ practical advice 😊
🛠a new tool based @notwaldorf’s font matching idea & @bram_stein’s FontFaceObserver
🕸and a web standard proposal to make things simple
industrialempathy.com/posts/high-per…

via Twitter Web App (retweeted on 11:43 AM, Jan 31st, 2021 via Echofon)

Several people have pointed at the wavy-dot proposal ( github.com/tc39/proposal-…) to make this line of code ⤵️ nicer, but error handling (which is YOLO in the quoted tweet) is still hard: github.com/tc39/proposal-…. twitter.com/threepointone/…

via Echofon

@henrylim96 @addyosmani @furqanabid @Una `aspect ratio` support’s growing (caniuse.com/mdn-css_proper…), but far from universal. Meanwhile, you can use the fallback, as @bramus explains: bram.us/2020/11/30/nat…. Depending on browser distribution, you could developer.mozilla.org/en-US/docs/Web…

via Echofon in reply to henrylim96

Favicons used for tracking purposes: cs.uic.edu/~polakis/paper… [PDF]. Interesting attack vector.

via Twitter for iPad

@diekus @GDGLaPaz Demasiado poco para ser útil, pero suficiente para ser peligroso.

via Twitter for iPhone in reply to diekus

@GDGLaPaz ¡Gracias por invitarme! Aquí están mis diapositivas: goo.gle/cds-extended-l…. Un placer estar en Sudamérica para esta charla. 🌎

via Twitter Web App in reply to GDGLaPaz

@HamidQasemy @slightlylate The closest we have so far is Window Controls Overlay for installed PWAs: github.com/WICG/window-co…. Maybe open a new Issue there, describing your use case (optionally including the screenshots from the tweet).

via Echofon in reply to HamidQasemy

DasSurma Mini-hack of the day:

Removed the Google Analytics script from my blog in favor of sendBeacon()-based custom code by @philwalton (thank you!).

It’s smaller, it’s anonymous (I don’t track users anymore) and I can collect core web vital scores.

github.com/surma/surma.de… pic.twitter.com/4EaVjBUCui

via TweetDeck (retweeted on 11:19 AM, Jan 30th, 2021 via Echofon)

andreban Tried out the Web Serial API in Chrome 89 today to interact with the MicroPython REPL on a Pi Pico. The whole thing is a little more than 60 lines of JavaScript. Check out the code glitch.com/edit/#!/viridi… or try it at: viridian-receptive-rugby.glitch.me @Raspberry_Pi @micropython twitter.com/ChromiumDev/st… pic.twitter.com/gvZPx1DP3M

via Twitter Web App (retweeted on 11:17 AM, Jan 30th, 2021 via Echofon)

Una CSS aspect ratio is finally here! 😱🥳🎉

web.dev/aspect-ratio/

via Twitter for iPhone (retweeted on 11:17 AM, Jan 30th, 2021 via Echofon)

codepo8 🚨 🛠 Experiment in @MSEdgeDev Canary @EdgeDevTools right now - adding a “+” to add new tools to the current tab control. Together with the “move tab to bottom/top” this gives us full control over the interface. pic.twitter.com/Joa4nGgfpe

via Twitter Web App (retweeted on 11:14 AM, Jan 30th, 2021 via Echofon)

jaffathecake 📝 Don’t use functions as callbacks unless they’re designed to be callbacks, and the same goes for option objects!

It might work fine today, but could break in the future.

jakearchibald.com/2021/function-…

via Twitter Web App (retweeted on 11:06 AM, Jan 30th, 2021 via Echofon)

Come on, folks, we can collectively do better. ⤵️ twitter.com/eva_trostlos/s…

via Echofon

@henrylim96 @kennethrohde @ChromiumDev Settings > Safari > Advanced > Website Data.

Alone enumerating the sites takes ages on my phone. 😬

via Echofon in reply to henrylim96

@sw12 @henrylim96 At a global level, there is a way better system than addresses: Open Location Code: github.com/google/open-lo…. Unfortunately I am not aware of a postal service in my part of the world that would use it.

via Twitter Web App in reply to tomayac

@sw12 @henrylim96 Or have them, but they don’t form part of the official way of writing addresses.

My parents live in “72770” (zip code) “Reutlingen” (city). The state is “Baden-Württemberg”, but the zip code already contains more accuratgoo.gl/maps/SEo75gknB…

via Twitter for iPhone in reply to sw12

sw12 Hey form users!

Help autofill work better on platforms like Google Forms.

• Use field labels browsers understand.
• Don’t split out name parts.
• Ask for street address in a single field.
• Remember that some countries don’t use postal codes.

Anything else?

ht @tomayac pic.twitter.com/ADZqNhrUn7

via Twitter Web App (retweeted on 12:50 PM, Jan 29th, 2021 via Twitter Web App)

A whole website in a single HTML file: clever use of the :target selector makes this site feel like an SPA: john-doe.neocities.org. Via ⁦@css⁩: css-tricks.com/a-whole-websit…

via Twitter for iPhone

There’s a developer preview of “Bento” components, that is, the possibility of using ⁦@AMPhtml⁩ components in isolation—without the AMP buy-in. Right now, they still require the entire AMP library, but the objective is to remove this dependencamp.dev/documentation/…

via Twitter for iPhone

People keep tripping over the question how to serialize a `FileSystemHandle` when working with the File System Access API. My StackOverflow post provides an answer: stackoverflow.com/a/65938910/625… (PR to add this to our article web.dev/file-system-ac… coming, too

via Twitter Web App

Back in August of last year @jefbinomed invited me to an event to present about Project Fugu 🐡 (youtu.be/U8vqBf8LB6s). Thanks so much for the super cute surprise that was in the mail today. <3 pic.twitter.com/CFzaxnhjnD

via Twitter Web App

webkit Release notes for Safari Technology Preview 119 are available with updates to Web Inspector, Speech Recognition, CSS, Scrolling, JavaScript, and more. webkit.org/blog/11525/rel… pic.twitter.com/RTy2XFEj96

via Twitter Web App (retweeted on 10:00 AM, Jan 28th, 2021 via Echofon)

@hashseed Is this a financial advice that I can hold you accountable for? I’m all in now.

via Echofon in reply to hashseed

ericwbailey I wrote about how you can use your mouse without using your hands, featuring a video where I put my gigantic eyebrows to good use. thoughtbot.com/blog/an-introd…

via Twitter Web App (retweeted on 9:25 AM, Jan 28th, 2021 via Echofon)

@shadeed9 The famous grid blowout. I was bitten by this, too, when I redesigned my blog (blog.tomayac.com/2019/09/29/the…). Thanks for sharing this article!

via Echofon in reply to shadeed9

When to use HTTPS for local development and how (web.dev/how-to-use-loc…), all explained by ⁦@maudnals⁩. 🔒 web.dev/when-to-use-lo…

via Twitter for iPhone

@andrey_l1nd3n 🎈 Congratulations, we need more professional bridge builders! 🌉

via Echofon in reply to andrey_l1nd3n

w3c The @w3c and the @ietf are pleased to announce that Web Real-Time Communications (WebRTC) is now an official standard, bringing audio and video communications anywhere on the Web.
w3.org/2021/01/pressr… pic.twitter.com/gBwdap47sO

via Buffer (retweeted on 8:25 AM, Jan 28th, 2021 via Echofon)

Long awaited and finally coming: The File System Access API will soon support a suggested file name for the file save dialog (and a suggested opening location, too). 🎉 Users of Browser-FS-Access 💾 will automatically make use of the name once it landgithub.com/GoogleChromeLa…twitter.com/intenttoship/s…

via Echofon

Bringing @EdgeDevTools to VS @code for debugging Web Apps, by @codepo8: christianheilmann.com/2021/01/27/bri…. I love it when the Web toolbox gets better. 🧰

via Twitter for iPhone

📢 PSA: If you use `browser-nativefs`, it has been renamed to `browser-fs-access` (github.com/GoogleChromeLa…) as part of our effort for a more inclusive language (developers.google.com/style/inclusiv…). Install the latest release v0.13.0 via npm:

“`bash
npm install -

via Twitter Web App

GDGLaPaz Thomas Steiner is a Developer Advocate at Google Hamburg, focused on making the Web a better place through standardization, creating and sharing best practices, and doing research. @tomayac


➡️Registrate en: bit.ly/ChromeDevSummi… pic.twitter.com/6kxKONSVwu

via Twitter for iPhone (retweeted on 5:24 PM, Jan 27th, 2021 via Twitter for iPhone)

@benadam11 @rsms 🎧 As a happy user of your PWA on desktop (installed via Chrome), I’m only bummed that Safari/Firefox don’t allow for the same install experience. Have you pushed them? (Full disclosure: Project Fugu 🐡 DevRel here ✌️.) pic.twitter.com/B4fgRq9Fpv

via Twitter Web App in reply to benadam11

@codepo8 The only caveat is the color of visited links. Chrome recently made the switch so our contrast is sufficient, but other browsers haven’t (bug links in the article). Also need to be careful w/ iframes, since the CanvasColor system color that thi

via Twitter for iPhone in reply to codepo8

@codepo8 Well, 15 lines of code is nice. But how about 1? 😉 Works best in combination with `prefers-color-scheme`, but also in isolation.

“`css
:root { color-scheme: dark light; }
“`

Article: web.dev/color-scheme/
Demo: apple-creative-airplane.glitch.me

via Twitter Web App in reply to codepo8

@DasSurma @RReverser @brucel @parceljs Something pretty close would be the eleventy-image package described in @zachleat’s post zachleat.com/web/eleventy-i….

via Echofon in reply to DasSurma

MSEdgeDev We’re proud to welcome Open Web Docs, a collective created to support a sustainable path forward for the development and maintenance of web developer documentation. opencollective.com/open-web-docs/… twitter.com/OpenWebDocs/st…

via TweetDeck (retweeted on 6:07 PM, Jan 25th, 2021 via Echofon)

samsunginternet We’re pleased to be a supporter of Open Web Docs – a new initiative to support technical documentation of the web platform! ^DKtwitter.com/OpenWebDocs/st…Jr

via TweetDeck (retweeted on 6:07 PM, Jan 25th, 2021 via Echofon)

ChromiumDev We’re excited to publicly introduce Open Web Docs, a collective project between Google, Microsoft, Mozilla, Coil, W3C, Samsung and Igalia!

Supporting a community of technical writers around strategic creation and long-term maintenance of web platform technology documentation. twitter.com/OpenWebDocs/st…

via TweetDeck (retweeted on 6:07 PM, Jan 25th, 2021 via Echofon)

OpenWebDocs We’re happy and proud to announce Open Web Docs, to support a community of technical writers around creation and long-term maintenance of web platform technology documentation that is open and inclusive for all.

opencollective.com/open-web-docs/…

via Twitter Web App (retweeted on 6:04 PM, Jan 25th, 2021 via Echofon)

ChromiumDev Progress update on the Privacy Sandbox initiative:
blog.chromium.org/2021/01/privac…

via TweetDeck (retweeted on 5:50 PM, Jan 25th, 2021 via Echofon)

@davidwalshblog Might be github.com/brave/brave-br…. Not sure if @brave does something else than Chrome when it comes to media-related wake locks.

via Twitter Web App in reply to davidwalshblog

@davidwalshblog Just saw davidwalsh.name/wake-lock-api—thanks for writing! I wonder what concrete video site issues you had in mind, since playing video takes a wake lock automatically, whereas this API web.dev/wake-lock/y) is for manual wake locks (e.g.web.dev/betty-crocker/

via Twitter Web App

@Gorsefan @ChromiumDev As many have argued over the years, footnotes in the print sense don’t really mean a lot in a linkable document. I use “footnote” indeed more in the sense of “annotation” (or side note if you will).

via Twitter Web App in reply to Gorsefan

@FremyCompany @chriscoyier @edent Yeah, absolutely. It’s more tolerable (for me at least) with small footnotes. I was hoping there somehow was a way to disconnect the `rt` box from the `ruby` by positioning it absolutely—no success so far. I also trie

via Twitter Web App in reply to FremyCompany

@FremyCompany @chriscoyier @edent Thanks for the feedback! I realize it’s not great at the moment (definitely not production ready). The properties`ruby-align`, `ruby-position`, and `ruby-merge`—once implemented—seem to improve the controllability o

via Twitter Web App in reply to FremyCompany

ChromiumDev ✍️ Over the weekend, @tomayac has been looking into using the `ruby` element for HTML footnotes [1]. He’s now interested in the thoughts of HTML, CSS, and accessibility experts [2].


[1] See quoted tweettwitter.com/tomayac/status…g ⤵️
[2] See blog post and tweet thread for details.

via TweetDeck (retweeted on 9:39 AM, Jan 25th, 2021 via Twitter Web App)

@svgeesus @draggett @edent @ppk Oh, super interesting! Do you have a pointer to mailing list threads (or similar) where I could read up on the original conversations from back then? Thanks in advance!

via Twitter Web App in reply to svgeesus

@Gorsefan @ChromiumDev Nice, thanks for the reply (example URL?)! `DL` is what the HTML 3.0 example (blog.tomayac.com/2021/01/24/rub…) used, too. I know progressive enhancement is perfectly possible with JavaScript. I am especially interested in pure HTML+CSS solu

via Twitter Web App in reply to Gorsefan

andrey_l1nd3n Everyone is excited about the baseline PWA launch and I’m just sitting here re-reading the @ZDF case study 👉 web.dev/zdf/ by @MartinSchierle and Scott Friesen and hoping YT keeps moving in the right direction at pace. There’s a bunch to catch up on!

via Twitter Web App (retweeted on 8:19 AM, Jan 25th, 2021 via Echofon)

bramusblog Implement footnotes in HTML with the `<ruby>` element (by @tomayac)

🔗 bram.us/2021/01/24/imp…

🏷 pic.twitter.com/2lMsjSqkDz

via Bramus RSS (retweeted on 11:28 PM, Jan 24th, 2021 via Twitter Web App)

@danbri @sw12 @agektmr Somewhat the same experience here. Especially “afraid” of autofill up-filling (i.e., retouching things I entered before). Down-filling (i.e., pre-filling things I haven’t touched before) is mostly fine, albeit still subtly wro

via Echofon in reply to danbri

stefanjudis Chrome 89 comes a bunch of useful @ChromeDevTools additions but I’m mostly excited about the new Puppeteer recording button! 🔴 🎉

🔗 Changelog: developers.google.com/web/updates/20…

Video alt: Example showing how to record a Puppeteer script right from within Chrome DevTools. pic.twitter.com/b7SRPGisu4

via Twitter Web App (retweeted on 10:02 PM, Jan 24th, 2021 via Echofon)

edent Here’s an interesting take on Footnotes in HTML from @tomayac
blog.tomayac.com/2021/01/24/rub…

via Twitter Web App (retweeted on 9:11 PM, Jan 24th, 2021 via Twitter Web App)

@justmarkup Thanks for the inspiration: blog.tomayac.com/2021/01/24/rub…. I would never have considered using the `ruby` element without your tweet. 🙏

via Twitter Web App in reply to justmarkup

@edent That’s interesting. Especially since Firefox is the only browser at the moment to support `ruby-align`. I wonder if by making the footnote text display block it’d look better, maybe in combination with different values of this property?

via Twitter Web App in reply to edent

@chriscoyier, since you had thoughts on @edent’s `<details>` footnotes (css-tricks.com/a-terrible-way…), I’m wondering what you think of `<ruby>` footnotes. Also, any CSS trick up your sleeve regarding my identified presentational shortcomings: blog.tomayac.com/2021/01/24/rub…

via Twitter Web App in reply to tomayac

👂 I’m very interested in the thoughts of experts of CSS (Can the rendering be improved?), accessibility (Does this work well with screen readers?), and HTML (Is this abusing `ruby`?). Also HTML elders (@draggett, what happened to `FN`?). I mention prio@edent@ppk

via Twitter Web App in reply to tomayac

Interesting: WebXR (w3.org/TR/webxr/) was added to the ⁦@webkit⁩ status tracker as officially “in development”. platformstatus.io/Changes/2021-0…

via Twitter for iPhone

@AdaRoseCannon @Vincent_Scheib @KevinPicchi Wow, that’s really cool. I stalked your GitHub, Kevin, but at the first glance couldn’t find it. Curious since I have built a similar WebHID “driver” for Nintendo Joy-Cons: blog.tomayac.com/2020/12/21/rel…. Is yo

via Echofon in reply to AdaRoseCannon

@Justinwillis96 Did you check its site engagement score? Just curious…chromium.org/developers/des…sPweb.dev/periodic-backg…M6

Also: nice URL :-)

via Echofon in reply to Justinwillis96

andreban Easily sharing content is one of the things that make the web great. Chrome 88 shipped a change to Custom Tabs that will make it easier for users to share URLs. Read more about it at blog.chromium.org/2021/01/better…

via Twitter Web App (retweeted on 12:01 AM, Jan 23rd, 2021 via Echofon)

rachelandrew Towards the end of last year I was working on some material on animations with @kaycebasques and I’m happy to see it go live web.dev/animations/

via Twitter Web App (retweeted on 11:59 PM, Jan 22nd, 2021 via Echofon)

@DotProto Yeah, I saw that when scrolling up, but it was too late, the tweet was sent. Anyway, we agree on the topic, which is nice. ✌️

via Twitter Web App in reply to DotProto

@myfonj @bramus It’s essentially density-independent pixels, which you might know from Android: developer.android.com/training/multi….

via Twitter Web App in reply to myfonj

@bramus It’s a little more complex. Check out goo.gle/learning-from-… for some background. I also have a series of articles coming on the topic.

via Echofon in reply to bramus

@samthor Thanks. It’s too many around me for being either of those, though. Weird.

via Echofon in reply to samthor

@zachleat Really nice custom element () and great use case. You might want to change the styling though, since on mobile (iOS at least) it’s indistinguishable from regular text (it works perfectly fine, it’s just not discoverable).

via Echofon in reply to zachleat

@DotProto Smart, but please do not put this in the extension docs. People don’t have to be destructuring experts to build extensions, and those who are will easily spot the potential for smartifying the code when reading the docs.

via Echofon in reply to DotProto

@samthor Do you have any idea what these /N[A-Z0-9]{4}/ devices are? I see plenty of those when I scan around at my place.

via Echofon in reply to samthor

smashingmag 🔥 How We Improved SmashingMag Performance, a case study

How on critical CSS, JavaScript optimizations, code splitting, web font loading, third-parties, performance profiling and a fancy CSS outline property.

smashingmagazine.com/2021/01/smashi… pic.twitter.com/Qv0GDmI9zf

via TweetDeck (retweeted on 11:08 PM, Jan 21st, 2021 via Echofon)

derSchepp Running WebKit on Windows schepp.dev/posts/running-…

via TweetDeck (retweeted on 10:53 PM, Jan 21st, 2021 via Echofon)

@kennethrohde @yoavweiss @dhh @firefox @webkit @domenic @hober I realized that there wasn’t a @webkit bug asking for import maps support (<script type=”importmap”>), so I created one:
bugs.webkit.org/show_bug.cgi?i…. Thanks for your consideration!

via Echofon in reply to kennethrohde

Now can we get PiP in PiP next? On a serious note, multiple PiP is a really cool feature! ⤵️ twitter.com/FirefoxNightly…

via Echofon

ddprrt 📝 “Low maintenance types” in TypeScript

Maintaining types is boring, let’s make sure they update themselves:

👉 fettblog.eu/low-maintenanc…

via Twitter Web App (retweeted on 10:11 PM, Jan 21st, 2021 via Echofon)

I maintain a local reverse geocoder library (i.e., a library that translates 📍 latitude/longitude pairs to 🏠 addresses), where “maintain” nowadays mostly means merging PRs. Surprisingly they keep coming. Thanks so much to @rdil_pickle for the latestnpmjs.com/package/local-…

via Twitter Web App

samthor I write about observing 👀 DOM nodes via callbacks: removal/addition, resize, and being moved around the page:
whistlr.info/2021/observing…

Detecting move is pretty fun and (ab)uses IntersectionObserver ➡️ check out this video & demo: codepen.io/samthor/pen/da…! pic.twitter.com/1ZauKOjHBQ

via Twitter Web App (retweeted on 11:48 PM, Jan 20th, 2021 via Echofon)

_developit Element Worklet is my proposal for threaded DOM:
Custom Elements in threads for performance isolation.

jasonformat.com/element-workle… pic.twitter.com/MKXQOa4lqW

via Twitter Web App (retweeted on 11:02 PM, Jan 20th, 2021 via Echofon)

alexey_rodionov Good news! 🔥

@ChromeDevTools now shows categories and screenshots from web app manifest (w3c.github.io/manifest-app-i…).

It also shows some basic validation errors, e.g. for the min size of screenshots.

Available in Chromium Nightly right now and in Chrome Canary tomorrow. 😉

pic.twitter.com/aHFTmnjYbt

via Twitter Web App (retweeted on 10:49 PM, Jan 20th, 2021 via Echofon)

@rowan_m Increasing my initial and follow-up rating to now ⭐️⭐️⭐️⭐️☆. This is a lot of fun already. Would rate even higher if it supported device motion or Joy-Con motion signals. I hear there’s a cool library…

via Echofon in reply to rowan_m

svillarsenin After “Flexbox gaps” I’m presenting “Flexbox cats” the sequel everybody was waiting for 😁. Check it out at blogs.igalia.com/svillar/2021/0… and tell me what do you think

via Twitter Web App (retweeted on 10:00 PM, Jan 20th, 2021 via Echofon)

@lmedini @dret An important question raised in a response to my initial tweet is how sites would be incentivized to adopt this. I see way too many dark patterns where the “customize” option is several hidden clicks away, and the “accept all” setti

via Twitter Web App in reply to lmedini

shadeed9 ✍️ New Article: Understanding Clip Path in CSS

I wrote an article about clip-path in CSS, exploring how it works, its various values, and where we can use it along with interactive demos. Happy learning!

🔗 ishadeed.com/article/clip-p… pic.twitter.com/lKMHt70oYs

via Twitter Web App (retweeted on 10:46 AM, Jan 20th, 2021 via Echofon)

@bramus Indeed. Just realized my early morning brain typed “expired” instead of “inspired”. Anyway you got it.

via Echofon in reply to bramus

@rowan_m Addendum: doesn’t load on my machine. Copied the URL http://localhost:8080 exactly, but no luck. This is a scam, or vaporware at best. Updated rating is ⭐️☆☆☆☆, and would be zero stars if I could.

via Echofon in reply to tomayac

@rowan_m I expected sparkles at the climax. Rating this experience ⭐️⭐️☆☆☆ so far.

via Echofon in reply to rowan_m

kennethrohde 📢 Service Announcement

Web App Manifest fields related to digital store fronts is now maintained in its own extension spec “Application Information”, edited by own good friend @AaronGustafson 👏

@ChromiumDev is currently implemented support for these fields on Android! 🥳🎉 pic.twitter.com/zexJkUqFVq

via Twitter Web App (retweeted on 9:30 AM, Jan 20th, 2021 via Echofon)

brave Our CTO and co-founder @brianbondy details the work our team has done for the first deep @IPFS integration of its kind. brave.com/ipfs-support/

via Twitter Web App (retweeted on 9:13 AM, Jan 20th, 2021 via Echofon)

ChromiumDev Chrome 88 is rolling out now! @petele has all the details!

* Extension manifest v3
* CSS aspect-ratio property
* Play billing OT for PWAs using Trusted Web Activity
* Throttling of chained JS timers
* Abort signals in `addEventListener`s
* And lots more

developers.google.com/web/updates/20… pic.twitter.com/R7p0yMNGp2

via TweetDeck (retweeted on 9:10 AM, Jan 20th, 2021 via Echofon)

brave With today’s desktop browser update (v1.19), Brave is the first browser to offer a native @IPFS integration, enabling users to seamlessly browse the decentralized Web,
and increasing content availability and Internet resilience. brave.com/brave-integrat…

via Twitter Web App (retweeted on 9:08 AM, Jan 20th, 2021 via Echofon)

ChromeDevTools ✨ First What’s New in DevTools of 2021!

🐞 Debugging support for Trusted Types violations
📸 Capture *full* node screenshot (finally)
🖲 New Trust Token tab
🩸 Color pickers for custom CSS properties

Try in Chrome Canary today!

Full list of goodies 👉🏼 developers.google.com/web/updates/20… pic.twitter.com/fgAqIaRQA6

via TweetDeck (retweeted on 8:43 AM, Jan 20th, 2021 via Echofon)

@bramus Wisdom of the ancients: xkcd.com/979/ . It expired my StackOverflow username.

via Echofon in reply to bramus

CascadeStudio (see quoted tweet ⤵️) is an amazing app if you’re interested in CAD. It makes use of the File System Access API (web.dev/file-system-ac…) for its file operations, for example, for saving: github.com/zalo/CascadeSt…. This kind of app is whtwitter.com/JohnSelstad/st…

via Echofon

@hdv @Una In the Bundesland of Hamburg, Germany (not all of the federal country yet), it’s a reality already: hamburg.de/kindertagesbet… (try …cyoafdy-www-hamburg-de.translate.goog/kindertagesbet…). We have three kids (born 2007–2012) and it’s made a real difference. With each kid,

via Echofon in reply to hdv

@slightlylate @justinfagnani I _think_ what Alex is aiming at is: lit-html can be immediately used w/o tool chain: lit-html.polymer-project.org/guide/getting-… (which is great). When you come to LitElement and copy the example from lit-element.polymer-project.org/guide/start#in…, as a newbie you’rlit-element.polymer-project.org/guide/start#ad…

via Echofon in reply to slightlylate

@agektmr about the term “Stuttgart pitch” for A440: en.wikipedia.org/wiki/A440_(pit…. I grew up close to Stuttgart.

via Echofon in reply to agektmr

@simevidas @GDSTeam They’re all in one repo, github.com/alphagov/govuk…, and by following the steps at frontend.design-system.service.gov.uk/installing-wit… I was able to get things running. But yes, quite some tree shaking is required if you only need select components. I wonder if @snowpackjs@FredKSchott

via Echofon in reply to simevidas

@rick_viscomi @ChromeUXReport @HTTPArchive Congratulations, Rick! Have the best of all times and enjoy the extended family! 🍼

via Echofon in reply to rick_viscomi

andreban Saw someone asking if it is possible to integrate in-app-reviews with Trusted Web Activity. The answer is: yes, it is! And here’s how to do it: bandarra.me/2021/01/18/Int… pic.twitter.com/y0FsrM3iSt

via Twitter Web App (retweeted on 9:16 PM, Jan 18th, 2021 via Echofon)

Jack_Franklin If you’re building any UI components, I cannot recommend the WAI-ARIA authoring guides enough. They are a fantastic free resource that documents how to build highly accessible components.

For example, TreeView components: w3.org/TR/wai-aria-pr…

via Twitter Web App (retweeted on 6:28 PM, Jan 18th, 2021 via Echofon)

@wesbos @syntaxfm ☝️ This is super important! In case where you’re wondering what “base font size in their browser’s settings” (from above) is about, see the screenshot in the quoted tweet. Please never set an absolute font size unless you fultwitter.com/tomayac/status…

via Echofon in reply to wesbos

@mathias Impressed by your German! Maybe try the webmaster contact form instead: rki.de/SiteGlobals/Fo….

via Echofon in reply to mathias

For people seeing this only now: the explainer has landed in its own folder within the WebKit Explainers repository: github.com/WebKit/explain…. Issues are tracked through a special label: github.com/WebKit/explain….

via Twitter Web App in reply to tomayac

@dret @lmedini There is indeed a proposal for such an API. See the quoted tweet for details and some discussion. twitter.com/tomayac/status…

via Echofon in reply to dret

@mhartington Might be a memory issue. Works fine on my iPhone 11 Pro Max test device. </privilege>

via Echofon in reply to mhartington

An Analysis of Privacy on the Apple App Store, by ⁦@K0nserv⁩. Interesting patterns emerge. hugotunius.se/2021/01/03/an-…

via Twitter for iPhone

The fact that modern gaming platforms like @stadia rely on streaming means sharing game state can be as easy as sharing a 🔗 link: community.stadia.com/t5/Stadia-Comm…. The same is true for immediately Web-based games of course.
Does anyone remember savegame passworen.wikipedia.org/wiki/Saved_gam…twitter.com/tcmg/status/13…

via Echofon

@tunetheweb @scottjehl @HenriHelvetica @simevidas @jensimmons It certainly doesn’t hurt, even today. And for the foreseeable future, you need a backup plan anyway until all browsers you care about support it. I can’t wait for it to land everywhere. Th

via Twitter Web App in reply to tunetheweb

@tunetheweb @scottjehl @HenriHelvetica @simevidas @jensimmons Correct. The ultimate plan is to add it, as outlined here: github.com/WICG/intrinsic…:

The UA-stylesheets of all browsers will add this code:

img, video {
aspect-ratio: attr(width) / attr(h

via Twitter Web App in reply to tunetheweb

@scottjehl @HenriHelvetica @simevidas @jensimmons The difference to images is that you need to explicitly set the rule for videos or iframes, whereas the user-agent stylesheet now does it for you for images.

via Echofon in reply to tomayac

@scottjehl @HenriHelvetica @simevidas @jensimmons I’d say yes, put it. The new aspect ratio calculation can use it. See Example 2 of drafts.csswg.org/css-sizing-4/#….

via Echofon in reply to scottjehl

@simevidas You might need both:

Alt: A rolled up cat sleeping on a chair.
Caption: Taking a nap.

via Echofon in reply to simevidas

@andreban @samthor Yeah, seems like an end-of-life Android device’s System WebView (apkmirror.com/apk/google-inc…). Maybe someone embeds your app and ships it (for $) on the Play Store. Good luck combing through play.google.com/store/search?q….

via Echofon in reply to andreban

modelviewer Very impressive use of our web component! slide3d.com

Especially nice is the use of annotations in combination with pointers baked into the 3D model. pic.twitter.com/N8osM5g7PM

via Twitter Web App (retweeted on 1:45 PM, Jan 16th, 2021 via Echofon)

IPFS We teamed up with @igalia to bring the to browsers. See what we’ve done so far, and what’s coming up next!

blog.ipfs.io/2021-01-15-ipf…

via Twitter Web App (retweeted on 1:30 PM, Jan 16th, 2021 via Echofon)

_developit 😴 turns out you 𝗰𝗮𝗻 implement sleep() in JavaScript.

Never do this on the main thread, but if you need to pause a Worker thread… here’s how:

jasonformat.com/javascript-sle… pic.twitter.com/gC1b0SpG1Q

via Twitter Web App (retweeted on 1:23 PM, Jan 16th, 2021 via Echofon)

@_developit @kristoferbaxter I pretty regularly move myself into a state where it’s easier to copy my changes into a temporary directory, delete the whole project, and start off with a freshly cloned copy where I paste in my stuff in a new branch. 🙈

via Echofon in reply to _developit

excalidraw Continuous integration in one chart.

stats.excalidraw.com

Click refresh if you haven’t done it in a while to get the latest tweaks of Excalidraw.

pic.twitter.com/hCQM87kQDX

via Twitter Web App (retweeted on 1:08 PM, Jan 16th, 2021 via Echofon)

Advanced Promise Patterns: Promise Memoization. jonmellman.com/posts/promise-…

via Twitter for iPhone

@kennethrohde Wow, that’s brilliant. ⌚️+🖱 This got to be the new cassette + pencil meme.

via Echofon in reply to kennethrohde

@samthor 😱 Wait, are you building Excalidraw in a `WKWebView`? We just deprecated the Electron version: web.dev/deprecating-ex….
Or are you working on improving the Web app when running in a Safari tab on iOS?

via Echofon in reply to samthor

@aardrian @scottohara Why this is not the default is beyond me, and why browser vendors (a11yproject.com/posts/2017-12-…) reflected it even more.
From old @Apple Human Interface Guidelines: “When using the mouse is undesirable, difficult, or impossible, users ctableless.github.io/exemplos/pdf/g…

via Echofon in reply to aardrian

@zachleat @yoavweiss Since `prefers-reduced-data` is really new, you first want to be sure the browser even has an idea what it is, because, turns out, there is a gotcha: blog.tomayac.com/2019/09/16/not….

via Echofon in reply to zachleat

@_zouhir All the best for whatever comes next!

via Echofon in reply to _zouhir

@littledan Woohoo, congratulations and enhorabuena or enhorabona, whichever you prefer. Both count!

via Echofon in reply to littledan

@NicoloRibaudo @laurieontech I so want this. Completely wasn’t aware of dedent and simply clicked through for the funny name. It would be so useful to have this in the core language. Thanks for bringing this to my attention.

via Echofon in reply to NicoloRibaudo

@_developit I’ve been on it since the first beta. There were a lot of issues with kernel extensions that have been fixed with the final version. I’m now still on the latest betas after stable, and performance has been realllly bad. The design is nice.

via Echofon in reply to _developit

scottjehl Web video is a big performance challenge. According to @HTTPArchive, avg video weight is heavier on mobile (1897kb) than desktop (1592kb)! It’s too hard for developers to deliver appropriate video sizes.

A proposal: HTML Video Sources Should Be Responsive
filamentgroup.com/lab/video-with…

via Twitter Web App (retweeted on 6:33 PM, Jan 14th, 2021 via Echofon)

Streams 😎

“`js
const c = (await fetch(‘streams.spec.whatwg.org’)).body
.pipeThrough(new CompressionStream(‘gzip’));
const h = await showSaveFilePicker({types: [{
description: ‘GZIP File’,
accept: {‘application/gzip’: [‘.gz’]}
}]});
c.pipeTo(awa

via Twitter Web App

We’re in full Chrome Dev Summit Extended season. @sw12 and I have the pleasure and honor to speak at CDS Extended Indonesia 🇮🇩, organized by @gdgjkt, alongside many other exciting local speakers from the thriving community. If you’re interested, siggdg.community.dev/events/details…pic.twitter.com/6cVmxvZs1t

via Twitter Web App

alexey_rodionov Exciting news! 🥳

You can enable a new PWA install UI via chrome://flags/-pwa-install-use-bottom-sheet flag in Chrome Canary on Android.

pic.twitter.com/dE0T8Tfc0o

via Twitter for Android (retweeted on 9:17 AM, Jan 14th, 2021 via Echofon)

webcomp_dev And now is open source!

github.com/github/jtml

Thanks @Keithamus and the team.

via Twitter for Android (retweeted on 11:06 PM, Jan 13th, 2021 via Echofon)

FredKSchott Introducing Snowpack v3.0: Our biggest release yet!

☁️ Pre-bundled streaming imports
⚡️ Integrated bundler (esbuild)
📦 New JS API
🎮 New SSR runtime
✅ Bug fixes & improvements

snowpack.dev/posts/2021-01-…

via Twitter Web App (retweeted on 9:50 PM, Jan 13th, 2021 via Echofon)

andreban A while ago I used the Doom Fire animation to experiment with the Offscreen Canvas API. I finally got around writing about it and you can read it at bandarra.me/2021/01/13/Bui…. Check out the implementation (as a web component!) in the blogpost or at doom-fire.com.

via TweetDeck (retweeted on 9:45 PM, Jan 13th, 2021 via Echofon)

domenic Readable *byte* streams are coming to Chrome 89, implemented by Nidhi Jaju! Here are some benchmark results: pic.twitter.com/x9SLfe1qdJ

via Twitter Web App (retweeted on 9:13 PM, Jan 13th, 2021 via Echofon)

@edsu It’s indeed interesting that they didn’t just block new tweets (as they’d have done for regular users), but that they suspended the whole account. Regarding your questions: I guess we’ll find out beginning on January 20, 2021 on the newly estrumplibrary.gov

via Twitter Web App in reply to edsu

slightlylate Love how compact this is with Web Animations and `new KeyframeEffect()`; it’s like a dozen or so lines vs. an NPM thicket for alternatives:

kirillvasiltsov.com/writing/how-to…

via Twitter Web App (retweeted on 8:40 AM, Jan 13th, 2021 via Echofon)

@DotProto @mhartington Yes, it’s spilling over to the Web. See bugs.chromium.org/p/chromium/iss… for how the browser could solve this.

via Echofon in reply to DotProto

@mhartington Android icons need to be PNG. The browser or WebAPK service should, IMHO, totally take care of the conversion from SVG, though.

via Echofon in reply to mhartington

jaffathecake Interesting timing attack with tainted <canvas> + CPU rendering blog.mozilla.org/attack-and-def…

via Twitter for Android (retweeted on 10:41 PM, Jan 12th, 2021 via Echofon)

“AVIF is a new image format derived from the keyframes of AV1 video. It’s a royalty-free format, and it’s already supported in Chrome 85 on desktop.”-jakearchibald.com/2020/avif-has-…a.

avif.js adds support to other browsers through wasm and a service worker:github.com/Kagami/avif.js

via Twitter Web App

@chrisdavidmills For folks following this from the comfort of their couches at home: github.com/mdn/yari/issue….

via Twitter Web App in reply to tomayac

@samthor @MozDevNet This would certainly be an option. I’m also thinking something something Web IDL, but am not sure to what extent (if at all) it’s being used for creating @MozDevNet article (stubs). I’m hoping for a secret link in MDN I can click

via Twitter Web App in reply to samthor

Still stuck on this one. Maybe @chrisdavidmills has an idea!?

via Twitter Web App in reply to tomayac

Chromium University 2020 was a virtual public event that’s well worth catching up with and that was organized by @samuelgoto where Chromium engineers gave lectures about many aspects of the project.
👉 Schedule: code.sgo.to/2020/12/16/chr…
👉 YouTube playyoutube.com/playlist?list=…

via Twitter Web App

“The @USNatArchives will receive, preserve, and provide public access to all official Trump Administration social media content, incl. deleted posts from @realDonaldTrump and @POTUS. [It will be] made available online at NARA’s newly established trumplibrary.gov

via Twitter Web App in reply to tomayac

🤔 @MozDevNet—Is there a way to find all properties or methods that return objects of a certain data type? E.g., I know that Blob.streams()` developer.mozilla.org/en-US/docs/Web…1) and `Body.body` developer.mozilla.org/en-US/docs/Web…b) return a `ReadableStream`. How

via Echofon

w3c 📣 Web NFC API ships in Chrome ift.tt/3sig6HQ

via IFTTT (retweeted on 9:32 PM, Jan 11th, 2021 via Echofon)

v8js V8, step back from the regex! Or maybe don’t 😏

V8 now has an additional RegExp engine that can prevent many instances of catastrophic backtracking: v8.dev/blog/non-backt…

via TweetDeck (retweeted on 9:27 PM, Jan 11th, 2021 via Echofon)

samthor Check your legacy JS with TS: whistlr.info/2021/check-js-…

via Twitter Web App (retweeted on 1:34 PM, Jan 11th, 2021 via Echofon)

@_developit @wesbos Next I got a Samsung Yepp YP-E64 (amazon.com/Samsung-YP-E64…) that—as a flash device, had no issues with vibration—but with only 64MB forced me to down-encode my proud 128 kbps music collection, which I did for a few selected tracks,

via Echofon in reply to tomayac

@_developit @wesbos 🎧 I thought I was living in the future when I bought the Freecom Beatman: a Mini CD player capable of playing MP3 CDs 💿 via Echofon in reply to _developit

HenriHelvetica Well then, looks like @firefox support for AVIF will be set to default in release 86, which should be in Feb 2021.



hg.mozilla.org/mozilla-centra…

via Twitter Web App (retweeted on 8:51 PM, Jan 10th, 2021 via Echofon)

@ricmac @mahemoff All my tweets get auto-archived at tomayac.com/tweets/ through Tweet Nest (github.com/graulund/tweet…). It’s a bit outdated and unmaintained, but has done a decent job so far. I think there are some forks that patch some of the bugs.

via Echofon in reply to ricmac

@lmatteis That’s true. Unfortunately the Library of Congress has abandoned its Twitter archive project: npr.org/sections/thetw…. Not sure whether there’s anything official or will be.

via Echofon in reply to lmatteis

Wow, the developer Brendan got back already. There’s now an endpoint where you can search by tweet ID. Example: thetrumparchive.com/tweets/1347569….

via Echofon in reply to tomayac

xkcd Steepen the Curve xkcd.com/2409 pic.twitter.com/buClthMojS

via Twitter for iPhone (retweeted on 7:41 PM, Jan 9th, 2021 via Echofon)

@JorgeCasar @passle_ @mxbck When I read about it, I asked for technical details, but haven’t heard back so far. Any updates now, @devoorhoede?

twitter.com/tomayac/status…

via Echofon in reply to JorgeCasar

With Trump’s Twitter account suspended, there needs to be an archive to look up his past tweets. There’s thetrumparchive.com, which is used regularly by reputable sources (according to thetrumparchive.com/faq), but which doesn’t offer tweet ID stwitter.com/HillaryClinton…

via Echofon

Looping over Arrays: `for` vs. `for-in` vs. `.forEach()` vs. `for-of`, by ⁦@rauschma⁩. 2ality.com/2021/01/loopin…

via Twitter for iPhone

1996: JavaScript Annoyances and Meeting The DOM: webdevelopmenthistory.com/1996-javascrip…. 🤓

via Twitter for iPhone

firt Progressive Web Apps in 2021-New post! ✍️
Current status, market share, what’s new, what’s missing, new challenges, and new capabilities
firt.dev/pwa-2021/

via Twitter Web App (retweeted on 11:50 PM, Jan 8th, 2021 via Echofon)

anssik Web NFC API just received its 3rd LGTM approval signaling readiness to ship by default in Chrome 🚀

It’s been my privilege to shepherd this spec from an early idea to production. Congrats team for this massive milestone and for the “sisu” attitude! 💪groups.google.com/a/chromium.org… pic.twitter.com/Ort6kULaI8

via Twitter Web App (retweeted on 11:12 PM, Jan 8th, 2021 via Echofon)

@Lipis @fireship_dev @excalidraw This would probably work, but maybe with the phone as a secondary input device that controls a desktop instance of Excalidraw.

via Twitter Web App in reply to Lipis

@spacegangster @ChromiumDev @excalidraw Thanks for asking. They still love us because the app is designed to work well with notch devices (webkit.org/blog/7929/desi…) and for the advanced features we use a progressive enhancement approach: blog.excalidraw.com/browser-native…

via Twitter Web App in reply to spacegangster

.@RegSprecher Trying to read the description of the necessary cookies on my iPhone 11 Pro Max. It’s almost as if in order to read the _necessary_ cookie information, I need to accept _all_ cookies first. And I’m a technically versed person.

pic.twitter.com/gk0WncTi7E

via Echofon

@theurbenlife @WebCreators Noticed that on smaller viewports the headings flow in two lines, with the second line reaching into the main text.

via Echofon in reply to theurbenlife

jensimmons Aspect Ratios in CSS will also solve the oh-so-annoying problem with not being able to make iframe-based videos flexible (YouTube, Vimeo, etc) without JavaScript or a padding hack.

Check out how this non-hacky CSS makes squishy videos super easy:

codepen.io/jensimmons/pen…

via Twitter Web App (retweeted on 8:05 AM, Jan 8th, 2021 via Echofon)

Seven lesser-known web features that you can implement into a Progressive Web App (PWA). Nice rundown by @fireship_dev. youtu.be/ppwagkhrZJs

via Twitter Web App

webcomp_dev 🔥 All the ways to make a Web Component - 2021 🔥

New update with the number of variants bumped to *51*!

Please RT♻️

See thread for some highlights ⤵️

webcomponents.dev/blog/all-the-w…

via Twitter Web App (retweeted on 1:31 PM, Jan 7th, 2021 via Echofon)

The results of the @w3ctag elections are in: w3.org/blog/news/arch…. The TAG is essential for providing feedback on all of the browser API proposals coming out of the Project Fugu 🐡 team. Thanks for your work in advance, and congratulations to all newtwitter.com/kennethrohde/s…

via Echofon

GoogleDevsIN 📢Get ready for ✨

@WebDevsIn

Say ‘hi’👋to the
Speakers-@shidhincr, @imsaurabhrajpal, @bharatagsrwal, @angularboy, @Paul_Kinlan
&
Panelists - @tomayac, @sunitj, @rithekar, @vikassalyan

When: Jan 9th, 2 pm IST
Register👉cds.webdevsin.com pic.twitter.com/DkznbxYF94

via Twitter Web App (retweeted on 8:32 AM, Jan 7th, 2021 via Twitter Web App)

@excalidraw @Hicksyfern The Catalan flag emoji isn’t properly supported/defined yet, but the underlying issue still is that languages aren’t countries. We have discussed this before. I have corrected the translation, though: Catalan is català.

via Echofon in reply to excalidraw

@Hicksyfern @excalidraw Laura (my wife who actually is Catalan) raised her eyebrows. A few of her eyebrows…emojipedia.org/flag-for-catal…9W

via Twitter Web App in reply to Hicksyfern

petele @dalmaer @dangoor @cjamcl @andreban @justinfagnani I put the code for my StreamDeck + Google Meet extension up at github.com/petele/StreamD…. You could easily modify it to send emoji or a handful of other things.

The super cool thing, it uses WebHID, so no special drivers/software required, and it works on ChromeOS! pic.twitter.com/x5We7VoKQh

via Twitter Web App (retweeted on 11:32 PM, Jan 5th, 2021 via Echofon)

ricmac 1/ Introducing my new side project: WebDevelopmentHistory.com ⏳ It’ll be an ongoing chronicle of internet history, from a development perspective rather than a business one. Subscribe now via email or RSS. Here’s a bit more about the project, including links to the first posts 👇

via Twitter Web App (retweeted on 11:22 PM, Jan 5th, 2021 via Echofon)

@Hicksyfern @excalidraw My wife and I just finished Catalan. ✅

via Echofon in reply to Hicksyfern

@JoubranJad The world is waiting for CSS module scripts, proposed by @justinfagnani: github.com/WICG/webcompon…:

`import styles from ‘./styles.css’;`

via Echofon in reply to JoubranJad

Interesting breakdown of browser use in the Dutch market (for an undisclosed site, but the analysis is exciting nevertheless). Be sure to read the whole thread. Some great insights on the commonalities and differences between Android and iOS. twitter.com/html5test/stat…

via Echofon

addyosmani Tip: In @ChromeDevTools you can copy all authored CSS for an element for instant reuse. Right-click element -> Copy -> Copy styles pic.twitter.com/Gk6kDcP7qJ

via Twitter Media Studio (retweeted on 9:01 AM, Jan 5th, 2021 via Echofon)

There’s more tweets in this month! Go up and select a date to see more ↑