Thomas Steiner (@tomayac)

Hamburg, Germany

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

February 2021

ESnextNews Streams web API—definitive guide@tomayaccweb.dev/streams/U ^ar

via TweetDeck (retweeted on 6:54 PM, Feb 28th, 2021 via Twitter Web App)

@kennethrohde @henrylim96 @diekus @Mustafa_x @codepo8 @alexey_rodionov @remoteforslides Wait. Some formatting is supported in Play Store descriptions: play.google.com/store/apps/det…. It has just taken ages to be approved (I thought it had gone live immediately w

via Echofon in reply to kennethrohde

@JohnMu @mahemoff Approximately 1 minute left.

It’s somehow the same for macOS updates or washing machines. Approximations are hard.

via Echofon in reply to JohnMu

domenic Oh cool, the Node.js docs started using content-visibility: auto and went from 1 minute to 1 second rendering time (in Chromium): github.com/nodejs/node/pu…

via Twitter Web App (retweeted on 11:50 AM, Feb 28th, 2021 via Echofon)

Still happy every time I see Apple @webkit mentioning “Home Screen Web Apps on iOS and iPadOS” or “websites saved to the home screen” sincerely. webkit.org/blog/9674/new-… ✌️ twitter.com/rmondello/stat…

via Echofon

@danbri @Paul_Kinlan That’s the way @clipchamp does it when I checked the last time.

via Echofon in reply to danbri

bramusblog SYMPHOSIZER – Playing with SF Symphony’s new Visual Identity

bram.us/2021/02/27/sym…y3

nnnhpic.twitter.com/ZjxMxTwcDyDy

via Bramus RSS (retweeted on 11:15 AM, Feb 28th, 2021 via Echofon)

johanpeitz ❣️picoCAD is released❣️

📐 Build tiny models!
🎨 Texture with pixel art!
🎥 Export spinning gifs!

💸 Name your own price!
💻 Mac, Windows, and Linux!
#️⃣

Hit RT and go get it:
johanpeitz.itch.io/picocad

👇 Read on for more details 👇 pic.twitter.com/3onepEEoHn

via Twitter Web App (retweeted on 11:08 AM, Feb 28th, 2021 via Echofon)

domenic ModalCloseWatcher code, including Android back button support, is in Chrome Canary behind a flag! Try out this demo. boom-bath.glitch.me/modal-close-wa…

One step closer to moving away from abuse of history.pushState() to get back-button-closable sidebars and dialogs!

via Twitter Web App (retweeted on 12:42 AM, Feb 27th, 2021 via Echofon)

heydonworks Worry less about people disabling JavaScript for websites.

Worry more about JavaScript disabling websites for people.

via Twitter Web App (retweeted on 12:32 AM, Feb 27th, 2021 via Echofon)

ChromeDevTools ✨ TGIF! New blog post. 😃

CSS-in-JS is different from regular CSS, and you can use DevTools to edit both!

In this post, @orKoN will explain:
▶️ What is CSS-in-JS
▶️ How we implement CSS-in-JS authoring in DevTools

👉🏼 developers.google.com/web/updates/20… pic.twitter.com/FKTMFi2tI2

via Twitter Web App (retweeted on 12:31 AM, Feb 27th, 2021 via Echofon)

The magic of `<script type=”importmap”>`. Here’s to the bundler-less future! twitter.com/mrdoob/status/…

via Echofon

I’m not entirely sure what is going on, but occasionally the sheet is empty. Too many parallel requests? Help, @googlesheets.

via Echofon in reply to tomayac

Glitch superstar @rowan_m strikes again and drops an awesome fractal viewer! Gorgeous and endless imagery to be explored!
(On iOS, the app requires the WebGL 2.0 flag, but then it works like a charm.) twitter.com/rowan_m/status…

via Echofon

@christianliebel @nic_o_martin Thanks! I see @sayhello has fixed the component selection already, all good then.

via Twitter Web App in reply to christianliebel

@christianliebel @nic_o_martin Could you file a new.crbug.com using the component Blink>Storage>FontAccess, please?

via Twitter Web App in reply to christianliebel

Oh, nice, my Streams API guide (web.dev/streams/) has made it into the latest JavaScript Weekly: javascriptweekly.com/issues/527. Always rewarding to see an article get visibility when you’ve been really working hard on it. 😀

via Twitter Web App

@nic_o_martin @christianliebel Super cool, thanks for sharing and experimenting. FYI, we’ll soon move to a picker model where the browser presents the user with a picker and where they can select fonts individually. We’ll keep you updated on web.dev/local-fonts/

via Twitter Web App in reply to nic_o_martin

christianliebel This week, I added the API to paint.js.org. You need Chrome Canary to enable the font-access flag in order to use it. Have fun! pic.twitter.com/E58oNxSdiX

via Twitter Web App (retweeted on 7:10 PM, Feb 26th, 2021 via Twitter for iPhone)

codepo8 👉🏻 “Capture Keys with the Keyboard Lock API”

🔗 web.dev/keyboard-lock/

Learned about that one today. good write-up by @tomayac

via Twitter Web App (retweeted on 5:11 PM, Feb 26th, 2021 via Twitter Web App)

I’ve worked on a tweet dashboard that shows y’all’s tweets about the Project Fugu 🐡 hashtags we invite you to use in our posts: goo.gle/fugu-tweets.

The zoomed out view’s interesting, showing that now , , & pic.twitter.com/0Cx8ffNcXi

via Twitter Web App

arw Want to keep your computer awake? caffeinate.computer ☕️ (for browsers that support navigator.wakeLock)

via Twitter Web App (retweeted on 12:39 PM, Feb 26th, 2021 via Twitter Web App)

@idoshamun @ChromiumDev Oh, yeah, news reader apps are one of the use cases the feature is being built for. Looking forward to your experiments with it.

via Twitter Web App in reply to idoshamun

@leeheycock @ChromiumDev Happy to read that this is well received. Looking forward to it landing, too!

via Twitter Web App in reply to leeheycock

@firt No worries. You’re definitely right for `display_override`. We’ll see what happens there.

via Echofon in reply to firt

@nhoizey @zachleat @eleven_ty @ambrwlsn90 @valeriangalliat @5t3ph Thanks for opening the PR, @nhoizey. Subscribed to it, let’s see what the outcome will be. Also thanks, @ambrwlsn90, for the original article and the research behind!

via Echofon in reply to nhoizey

@simevidas Perfectly doable in theory with `WKUserScript` and a `WKWebView`: developer.apple.com/documentation/…. That’s one way how browsers like Bluefy (apps.apple.com/de/app/bluefy-…) can work that add Web Bluetooth support to iOS.

via Echofon in reply to simevidas

@firt The fallback chain for `display` is specified in w3.org/TR/appmanifest….

via Echofon in reply to firt

@kennethrohde @henrylim96 @diekus @Mustafa_x @codepo8 @alexey_rodionov @remoteforslides I’m not sure this article is (still) accurate. I just tried it on my sample app play.google.com/store/apps/det… (the words “dark” and “light” should be <strong>, but

via Twitter for iPhone in reply to kennethrohde

@kennethrohde @henrylim96 @diekus @Mustafa_x @codepo8 @alexey_rodionov @remoteforslides Anecdotally neither the Play Store nor the App Store support rich text. It’s all ASCII art:

FEATURES:
• Awesome feature.
• Works great.

via Echofon in reply to kennethrohde

@jan0711 Thanks, I’ll have a look tomorrow.

via Twitter Web App in reply to jan0711

@zachleat I mean, sure. If you wanna go the official route, that’d be perfectly fine, given @ietf likes the idea.

via Twitter for iPhone in reply to zachleat

@zachleat You shouldn’t use this path, though: “Applications that wish to mint new well-known URIs MUST register them, following the procedures in Section 5.1.”-tools.ietf.org/html/rfc5785#s…i

Just come up with something else like `/.eleventy-data.json`.

via Echofon in reply to zachleat

samthor JS bundler fans: something I’m working on to save your bytes. If you’re interested, hear me talk for 2 minutes!

youtu.be/Saaz_zU4O-0

via Twitter for Android (retweeted on 10:37 PM, Feb 25th, 2021 via Echofon)

@LinkofHyrule89 @ChromiumDev @discord Window Controls Overlay is the article I’m working on these days… Hope to have it up oweb.devNL real soon!

via Twitter Web App in reply to LinkofHyrule89

@ChromiumDev (The broken hero image is a known issue, fix pending deployment.)

via Twitter Web App in reply to ChromiumDev

@ChromiumDev (The broken hero image is a known issue, fix pending deployment.)

via Twitter Web App in reply to ChromiumDev

ChromiumDev Did you know that the PWA `display` modes have a fixed fallback chain ⛓ as per the Web App Manifest spec?

With the new `display_override` property, you can make this fallback chain 👉your👈 custom fallback chain!

@tomayac explains it in web.dev/display-overri….

via TweetDeck (retweeted on 6:25 PM, Feb 25th, 2021 via Twitter Web App)

ChromiumDev An outlook in the near future: We’re working on adding Tabbed Application Mode 📑 to PWAs, so you can, for example, edit more than one document per window.

@tomayac’s latest article has all the details you need to know about this Project Fugu 🐡 feature.

web.dev/tabbed-applica…

via TweetDeck (retweeted on 6:24 PM, Feb 25th, 2021 via Twitter Web App)

kennethrohde I am so excited about this! Great installation dialog for Progressive Web Apps - I hope this comes to desktop as well pic.twitter.com/Wf9qMwAaVp

via Twitter Web App (retweeted on 5:48 PM, Feb 25th, 2021 via Twitter for iPhone)

@ebidel @petele @philwalton @aerotwist For Googlers following along: filed b/181201066 since this is a DevSite issue.

via Twitter Web App in reply to tomayac

@ebidel @petele @philwalton @aerotwist As usual: JavaScript ruins everything 😝.
On a more serious note, as the author of a PR that adds a similar feature to web.dev (github.com/GoogleChrome/w…), this is a good case to be aware of.

via Echofon in reply to ebidel

I’m a sucker for interesting maps and maps tiles design stories, and @stamen’s for the new @Facebook maps is no exception: hi.stamen.com/launching-the-…. twitter.com/stamen/status/…

via Echofon

anssik Apple implementing Contact Picker API in WebKit is great news for web developers. I look forward to more device-centric Web APIs in WebKit.

Trivia: the history of this Web API spec dates back to 2009: github.com/w3c/dap-charte… @tomayac

via Twitter Web App (retweeted on 10:52 PM, Feb 24th, 2021 via Twitter for iPhone)

I love these posts where someone dives deep into a topic you think you know everything about, and then you read it and you still learn something new. One of these is @lonekorean’s recent post on the `::before` and `::after` pseudo elements: codersblock.com/blog/diving-in…

via Twitter Web App

mbostock It’s been ten years since I pushed the first release of D3.js to GitHub. Have I learned anything? I hope so… but it’s a journeyobservablehq.com/@mbostock/10-y…iJ

via Twitter Web App (retweeted on 9:15 AM, Feb 24th, 2021 via Echofon)

@westonruter @pbakaus @cramforce A brilliant guide on integrating Webmentions (in Eleventy) is from @TheGreenGreek: sia.codes/posts/webmenti…. That’s what I used for my site (blog.tomayac.com/2019/09/29/the…).

via Echofon in reply to westonruter

@onthebass @davey_burke I came here to check if someone came here to say this. Else I would have come here and said this. Thank you, crash test dummies!

via Echofon in reply to onthebass

JavaScript performance beyond bundle size: nolanlawson.com/2021/02/23/jav…. Great overview of different approaches to JavaScript performance, by Nolan Lawson.

via Twitter for iPhone

ChromiumDev Got questions about PWAs or Fugu? Need help with your service workers, Workbox, Trusted Web Activity, Web Serial, etc?

A few of us will be answering as many StackOverflow questions as we can tomorrow (Tues, Feb 23rd). (1/3)

via Twitter Web App (retweeted on 2:18 PM, Feb 23rd, 2021 via Twitter for iPhone)

Brilliant introduction to CSS scroll-linked animations by @bramus. ⤵️ In many cases this will be able to replace JavaScript-based scroll listeners, which can be quite taxing. twitter.com/bramusblog/sta…

via Echofon

@rowan_m @TheRealNooshu Works fine on iOS 14.5 with the experimental WebGL 2.0 flag set. Nice work! 👏

via Echofon in reply to rowan_m

ricmac For my column this week, I talked to two companies using : @Keithamus from @github and @gregwhitworth from @salesforce. Web components are an emerging web standard and an alternative to using popular frontend frameworks like React. thenewstack.io/how-web-compon…

via Twitter Web App (retweeted on 10:56 AM, Feb 23rd, 2021 via Echofon)

piccalilli_ Have you got a personal site that you just can’t get to read as well as some of the others you like on the web? 

Do you just want to learn how to make things look good? 

I’ve got your back with the latest tutorial on Piccalilli: piccalil.li/tutorial/impro…

via Tweetbot for Mac (retweeted on 10:35 AM, Feb 23rd, 2021 via Echofon)

aharth Call for Developers at The Web Conference 2021 Developers Track: short descriptions of technically challenging web applications from all areas relevant to the web due Feb 28, 2021.
www2021.thewebconf.org/authors/call-f…

via Twitter Web App (retweeted on 9:56 AM, Feb 23rd, 2021 via Echofon)

tomayac @rniwa_dev This feature specifically was demanded by @unity3d in bugs.chromium.org/p/chromium/iss…. I have described it in web.dev/generic-sensor…. The engine uses it: docs.unity3d.com/Packages/com.u…. Game or AR developers can now soon use it on the Web. </facts> ✌️

via Echofon (retweeted on 9:50 AM, Feb 23rd, 2021 via Echofon)

@rniwa_dev This feature specifically was demanded by @unity3d in bugs.chromium.org/p/chromium/iss…. I have described it in web.dev/generic-sensor…. The engine uses it: docs.unity3d.com/Packages/com.u…. Game or AR developers can now soon use it on the Web. </facts> ✌️

via Echofon in reply to rniwa_dev

TheRealNooshu New blog post: “Testing priority hints with WebPageTest”. Also includes some experimentation using @Cloudflare Workers.

nooshu.github.io/blog/2021/02/2…

pic.twitter.com/UXntB1rHy3

via Twitter Web App (retweeted on 9:30 AM, Feb 23rd, 2021 via Echofon)

cramforce 🎉 New blog post: How to pick the ideal AVIF and WebP quality settings
Super TL;dr: For JPEGs with quality setting 60, encode AVIF with quality setting 50 and WebP with quality setting 65. AVIF are on average 36% smaller and WebP images 15% smaller.
industrialempathy.com/posts/avif-web…

via Twitter Web App (retweeted on 9:13 AM, Feb 23rd, 2021 via Echofon)

Getting Deep into Shadows: css-tricks.com/getting-deep-i…. Rundown of different ways to create shadows in CSS with their pros and cons.

via Twitter for iPhone

Making Service Workers easier to debug for Progressive Web Applications and more: blogs.windows.com/msedgedev/2021…. Some great additions to ⁦@EdgeDevTools⁩.

via Twitter for iPhone

@TypeSong Sorry, completely butchered the name. Mattias Buelens. @MattiasBuelens.

via Twitter for iPhone in reply to tomayac

@ryan_marsh Thanks again for the kind words over here, too!
I wasn’t personally planning on writing about TypeScript (I don’t consider myself an expert in TS, not even close), but actual expert @ddprrt has written a great book you might be interested

via Twitter for iPhone in reply to ryan_marsh

steveruizok 🚀 Just launched perfect-freehand, a minimal open source library for drawing beautiful freehand, pressure-sensitive lines. Simulates pressure on mouse / touch devices. github.com/steveruizok/pe… pic.twitter.com/NoydTzlG6N

via Twitter Web App (retweeted on 11:20 AM, Feb 22nd, 2021 via Twitter for iPhone)

@Nyr0 @firt It’s a contact picker sheet like in the built-in Contacts app. Multiple accounts is supported.

via Twitter Web App in reply to Nyr0

hn_frontpage Streams – The Definitive Guide
Lweb.dev/streams/VD
Cnews.ycombinator.com/item?id=261921…hB

via HN Front Page (retweeted on 11:34 AM, Feb 21st, 2021 via Twitter Web App)

Every now and then, the orange site treats you well. <3 pic.twitter.com/EMIy3u7iD9

via Twitter Web App

I’m on episode four of this course, and I can highly recommend it. It has helped me replace some muscle memory vague concepts I had with proper mental models. ⤵️ twitter.com/dan_abramov/st…

via Twitter for iPhone

I have written a complete guide to the Streams API: web.dev/streams/. If you were looking for an excuse to dive into it, this article might be it. At the end of the post, I list a couple of Web platform APIs that use streams.
twitter.com/ChromiumDev/st…

via Twitter Web App

@phdchristmas @ChromiumDev Disapprove of your choice of language, but the answer to your complaint is summarized in this article: androidcentral.com/how-turn-tab-g….

via Twitter Web App in reply to phdchristmas

Learn Snowpack: A High-Performance Frontend Build Tool. Nice introduction to ⁦@snowpackjs⁩ by ⁦@Jack_Franklin⁩. Love the outlook to the esbuild integration (which works, but self-proclaimed isn’t production-ready: esbuild.github.io/faq/#productio…). sitepoint.com/learn-snowpack/

via Twitter for iPhone

HenrikJoreteg Oooh… new 🐡 API tracker app!

fugu-tracker.web.app

via Twitter Web App (retweeted on 12:56 PM, Feb 20th, 2021 via Echofon)

rachelnabors Good weekend project… twitter.com/tomayac/status…

via Twitter Web App (retweeted on 5:35 PM, Feb 19th, 2021 via Twitter Web App)

@ChromiumDev Massive thanks 🙏 to everyone credited in the Acknowledgements web.dev/streams/#ackno…. I literally couldn’t have written this without all your help, review comments, and prior art!

via Twitter Web App in reply to ChromiumDev

ChromiumDev 📖 Readable Stream
✍️ Writable Stream
🗺️ Gulf Stream
♻️ Transform Stream

If you struggle to find the odd one out, @tomayac’s latest article “Streams—The definitive guide” is all you need to read!
web.dev/streams/K

via TweetDeck (retweeted on 5:28 PM, Feb 19th, 2021 via Twitter Web App)

@LinkofHyrule89 @ChromiumDev @kennethrohde @beverloo We’ll see. For now, this is the place to capture use cases. Many 3D printers, by the way, should work just fine with the Serial API: web.dev/serial/.

via Twitter for iPhone in reply to LinkofHyrule89

@LinkofHyrule89 @ChromiumDev @kennethrohde @beverloo Looks like you found the relevant bug already and commented on it, but for those following along here, the link is crbug.com/1163559.

via Twitter Web App in reply to LinkofHyrule89

@html5test Ah, that’s why it was working for me :-) Thanks for sharing that this was the problem.

via Twitter for iPhone in reply to html5test

@html5test The corresponding bug (crbug.com/1145102) was fixed. You should be able to see it in action in Chromium: download-chromium.appspot.com.

via Twitter Web App in reply to html5test

There was a bug for it, but seemingly no one had touched it: bugs.webkit.org/show_bug.cgi?i….

via Twitter Web App in reply to tomayac

😲 Surprise appearance in iOS 14.5 beta 2: the Contact Picker API. 📇

Article: web.dev/contact-picker/
Demo: contact-picker.glitch.me

Personally, I didn’t see this coming, but, hey, I take it. 🎉 It’s still behind a flag, but seems to work wellpic.twitter.com/dHOyZSj8SX

via Twitter for iPhone

Safari on macOS Big Sur 11.3 beta 2 finally supports WebM video. 👏 No signs of life yet for the format on iOS 14.5 beta 2, though. the8-bit.com/safari-finally…

via Twitter for iPhone

mmasnick I got tired of responding to every bad take regarding the Facebook Australia news on Twitter, and have now written a longer post about it. Just don’t try to share it on FB in Australia. techdirt.com/articles/20210…

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

@agektmr Surprising plot twist at the end: “That’s how passwords win.”

via Echofon in reply to agektmr

@mrdoob @NASA 🤯 Congratulations to present @mrdoob. Turns out this stuff is rocket science after all… 🚀

via Echofon in reply to mrdoob

@reillyeon @passle_ That’s another (and better) option, right.

via Twitter Web App in reply to reillyeon

@passle_ You could blob-ify the string (developer.mozilla.org/en-US/docs/Web…), get a stream from the blob (developer.mozilla.org/en-US/docs/Web…), and pipe that through a CompressionStream (wicg.github.io/compression/#c…). Not sure how feasible this would be given your input strings, but

via Echofon in reply to passle_

@fcbunn @peterfriese And even better, you can use a Web API called Screen Wake Lock to (responsibly!) prevent sleeping and see its effect in the Activity Monitor: web.dev/wake-lock/#scr….

via Echofon in reply to fcbunn

Correction: this should have read `FileSystemFileHandle` instead of `FileSystemHandle`. Also see the addendum for `FileSystemDirectoryHandle`: twitter.com/tomayac/status….

via Twitter Web App in reply to tomayac

Since people keep asking: Not just `FileSystemFileHandle`s 📄 can be serialized to IndexedDB, but `FileSystemDirectoryHandle`s 📂, too. Just updated our article accordingly (…iew-4698—web-dev-staging.netlify.app/file-system-ac… [staging link, PR pending merging]). Here’s a demo: …e-directoryhandle-indexeddb.glitch.metwitter.com/tomayac/status…

via Twitter Web App

Progressive Enhancement reading list 2021, by @ppk: quirksmode.org/blog/archives/…. A lot of great articles in this collection on a topic that is dear to my heart!

via Twitter Web App

@ppk Fascinating reading list, still working my way through it.

For CSS, arguably anything with a vendor prefix chain is PE (e.g., perishablepress.com/css3-progressi…) or anything that makes use of @​supports (e.g., smashingmagazine.com/native-css-mas… for CSS masonry layout).

via Twitter Web App in reply to ppk

I have re-worked our article on the Generic Sensor API, now featuring the brand-new `GravitySensor` 🏋️: web.dev/generic-sensor…. The amount of sensors you have access to on any given mobile device is incredible 🤯. Props to @intel engineering for a

via Twitter Web App

@ppk (Is the update deployed yet? Can’t seem to find the link. Curious about other additions you made, too. Thanks!)

via Twitter Web App in reply to ppk

@rem It certainly still is in @ChromeDevTools: umaar.com/dev-tips/136-s… (Not sure if the question was specific to @FirefoxDevTools; if so, ignore.)

via Echofon in reply to rem

argyleink Blog post is live as well, in case YouTube isn’t your preferred way to digest this stuff!

web.dev/building-a-tab… twitter.com/ChromiumDev/st…

via Twitter Web App (retweeted on 11:31 PM, Feb 17th, 2021 via Echofon)

@MicrosoftEdge I don’t seem to have the feature. I tried on macOS with the latest Canary. I’m physically in Germany, but Edge is set to en-US. 🤔 I also didn’t see a flag in edge://flags to force-enable this mode. What’s the trick?

via Twitter Web App in reply to MicrosoftEdge

@henrylim96 @rob_dodson I can reproduce this now 100%. Any zoom level >100% causes the issue. It’s exclusive to iOS Safari. @samthor may be able to look into this.

via Twitter Web App in reply to henrylim96

shadeed9 ✍️ Understanding Z-Index in CSS

A visual guide on how z-index and stacking contexts work in CSS. I hope you will learn at least something new. Happy reading!

🔗 ishadeed.com/article/unders… pic.twitter.com/6hmN9uIlhH

via Twitter Web App (retweeted on 1:53 PM, Feb 17th, 2021 via Echofon)

Oh, interesting. Microsoft is exploring a Kids Mode 👧👦 for its ⁦@MicrosoftEdge⁩ browser. support.microsoft.com/en-us/office/l…

via Twitter for iPhone

The new `aspect-ratio` CSS property is animatable as of Chrome 90. ⤵️ twitter.com/argyleink/stat…

via Echofon

@samthor Which is indeed spec’ed: html.spec.whatwg.org/multipage/inpu…

But again, my point was for client-side validation that typically involves JavaScript. The coupon code use case remains, just `trim()` server- and client-side before validating (or make your patte

via Twitter Web App in reply to tomayac

@samthor You got me curious: interestingly regular text input fields are left as-is, whereas email input fields get trimmed: both name and email had a leading and a trailing space, this is where I ended up at: interactive-examples.mdn.mozilla.net/pages/tabbed/f…

via Twitter Web App in reply to samthor

@samthor To clarify, this is mostly for client-side validation.

via Twitter for iPhone in reply to samthor

📢 PSA: If you have form fields where trailing/leading spaces don’t matter, just trim the value instead of failing:

Email: [confused@example.com ]
❌ No such user.

Coupon: [ sUp3r5eCreT]
❌ Coupon code invalid.

`HTMLInputElement.value.trim()` ✅

via Twitter Web App

smashingmag 🔥 Everything DevTools (Chrome, Firefox, Edge), with obscure panels and time-saving keyboard shortcuts.

– Triple Panes View
– Media Queries Debugging
– Tracking Changes
– Local Overrides
– Code Snippets
– 3D View
– Performance Panel
smashingmagazine.com/2021/02/useful…/pic.twitter.com/axiv4K4s2K/t.co/axiv4K4s2K

via TweetDeck (retweeted on 9:04 AM, Feb 17th, 2021 via Echofon)

Uppercod I just finished a small landing for Atomico made with @atomicojs and the performance is amazing⚡ atomicojs.github.io pic.twitter.com/7ob1zn3I9Z

via Twitter Web App (retweeted on 8:43 AM, Feb 17th, 2021 via Echofon)

@henrylim96 @rob_dodson I can’t reproduce this on either one of my devices, but might be worth adding this problem to the existing issue, since it seems to be related to the “growth” logic. If you have more details on when this happens, please add t

via Twitter for iPhone in reply to henrylim96

@bramus @AmeliasBrain @Una @googlechrome You can indeed override the individual page style or the default UA style with extensions. In your extension’s code you can use the `cssOrigin` property for extension-inserted scripts that gives the same user stydeveloper.chrome.com/apps/extension…drafts.csswg.org/css-cascade-3/…

via Echofon in reply to bramus

@meyerweb @regocas @igalia Yay, congratulations, Eric! Great news! 🎈

via Echofon in reply to meyerweb

@defaced Be sure to specify how the app generates audio (playing an .mp3 file via an audio tag, via the Web Audio API, via a video tag, etc.).

via Twitter for iPhone in reply to defaced

@defaced Hmmm 🤔, not sure what could be the problem, sorry. I use Chrome 89 on (a developer preview of) Android 11 with the built-in screen recorder. Maybe file a new.crbug.com (from your device) and describe your setup?!

via Twitter Web App in reply to defaced

@defaced Note that the screen recorder takes the volume into account. The first couple of horns were with volume set to zero, the one toward the end were with volume up. pic.twitter.com/4PlGURcS0T

via Twitter Web App in reply to defaced

rauschma “Tackling TypeScript” is now free to read online: exploringjs.com/tackling-ts/ pic.twitter.com/KQ050aESGt

via Twitter Web App (retweeted on 11:26 PM, Feb 14th, 2021 via Echofon)

MarcoInEnglish Managing focus in the shadow DOM | Read the Tea Leaves nolanlawson.com/2021/02/13/man…

via Twitter for iPhone (retweeted on 12:45 AM, Feb 14th, 2021 via Echofon)

@simevidas @mmatuzo I like the cursor idea. The Font Awesome community has come up with the concept of inverting the external link icon: github.com/FortAwesome/Fo….

“`css
a[href^=”#”] {
cursor: ns-resize;
}

a[href^=”#”]::after {
/* Icon from github.com/FortAwesome/Fo…

via Echofon in reply to simevidas

@agektmr Hiragana is a really great idea! Dispute settled:

“`html
<ruby>
GIF
<rt>
ぎふ
</rt>
</ruby>
“`

I love `<ruby>`: blog.tomayac.com/2021/01/24/rub…

via Echofon in reply to agektmr

@simevidas You could (), but in practice you should still use `src` just in case. See the demo from my first reply: webkit.org/demos/srcset/.

via Echofon in reply to simevidas

@DotProto What you’re looking for is called inflectors in the field of natural language processing. The go-to library is called natural, here’s the documentation on its inflectors: naturalnode.github.io/natural/inflec…. It’s best run on a server, but works on thenaturalnode.github.io/natural/develo…

via Echofon in reply to DotProto

With so many Project Fugu 🐡 hardware APIs (USB, Bluetooth, HID, Serial, NFC, Gamepad,…) it can be challenging at times to decide on the right approach for a given device. Here’s a guide: accessing hardware devices on the web, by François Beaufortweb.dev/devices-introd…

via Twitter for iPhone

@simevidas Use it like so:

“`
<img srcset=”foo.png 2x” width=”252” height=”251”>
“`

Note the natural width / natural height compared to intrinsic width / intrinsic height (see the popup).

(The image is not exactly square, shaky hands today, but you gpic.twitter.com/Xlxgo4WpHa

via Twitter Web App in reply to simevidas

@henrylim96 And happy new year of course!

福 🧧

via Twitter Web App in reply to tomayac

@ppk For the PE & JS and PWA section, may I suggest my article web.dev/progressively-…?

via Echofon in reply to ppk

PixelAmbacht 🤖 Wakamai Fondue is also a command line tool! 🤖

Point it at a font, and it’ll generate ALL THE CSS:

$ wakamai-fondue -c font.ttf

Never write font CSS by hand again! More info here: pixelambacht.nl/2021/wakamai-f…

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

@henrylim96 , wow! Do you have time to open a quick PR and add this to the article? Else I can do it.

via Echofon in reply to henrylim96

henrylim96 You can use Activity Monitor to check whether the Screen Wake Lock API is working properly or not.

Learn more: web.dev/wake-lock/

pic.twitter.com/JNR9iq5J2x

via Twitter Web App (retweeted on 10:03 PM, Feb 11th, 2021 via Echofon)

w3cdevs Specs defining browser use a formal definition language () which helps with writing and implementing these APIs. @tidoust, @dontcallmeDOM and @foolip are making it easier to re-use these definitions through a newly released NPM package:
npmjs.com/package/@webre… 🎉🎇

via Twitter Web App (retweeted on 9:53 PM, Feb 11th, 2021 via Echofon)

ryzokuken In case you missed it, we declared the Temporal proposal “effectively frozen” at the last TC39 meeting, which means that there will be no more changes in the API surface unless in response to a major oversight.

You can read the docs at tc39.es/proposal-tempo….

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

@MehulSatardekar Thank *you* for making said contributions! 🙏🏽

via Echofon in reply to MehulSatardekar

@LNplum Please see this slide deck where the life of a Project Fugu 🐡 feature is explained: docs.google.com/presentation/d…. For more process description, check out developers.google.com/web/updates/ca….

via Twitter Web App in reply to LNplum

@danbri @hdv I am really surprised they got through the App Store review with their fake UI pre-prompts, which, if the user denies, lets them ask again. Unlike with the actual prompts: once denied, you’re out forever (unless the user unblocks you deep s

via Twitter for iPhone in reply to danbri

@danbri @hdv I briefly granted Twitter access and revoked it after seeing the recommendations were still the same. Maybe my tweeps are simply not on the platform yet, or their algorithm really overly favors popularity… Anyway, I just found you, and foll

via Twitter Web App in reply to danbri

@derSchepp @TheRealNooshu Friendly reminder of the `<blockquote>` HTML the official Twitter embed gives you. Just add styling. Just remove JavaScript. Not sure any service worker complexity is needed. (But of course I’m not aware of the constraints unde

via Echofon in reply to derSchepp

Does this use the Update API (developers.google.com/safe-browsing/…) as “[s]everal web browsers” do, or indeed an Apple intermediate server to the Lookup API (developers.google.com/safe-browsing/…)? ⤵️ twitter.com/othermaciej/st…

via Echofon

codepo8 🆎 The styles pane now has a visual font editor that allows you to tweak the font settings of any CSS selector and to pick fonts. You can even convert font units with it!
aka.ms/devtools-font-… pic.twitter.com/flGJpjh8mB

via Twitter Web App (retweeted on 9:37 AM, Feb 11th, 2021 via Echofon)

@simevidas I would use what developer.mozilla.org/en-US/docs/Web… tells you. The natural width is the intrinsic width, corrected by pixel density. You probably also might want to use both `src` and `srcset` (example: webkit.org/demos/srcset/) if you care for devices whi

via Echofon in reply to simevidas

Keithamus @rockerest @slightlylate @gitlab History of web components at GH is long. Started 7 years ago with time elements github.com/github/time-el…. Saw success & kept investing.

~2 years ago we doubled down on investment and OSSd many web components.

Last year we tripled down. Released Catalyst github.github.io/catalyst/

via Twitter Web App (retweeted on 9:16 AM, Feb 11th, 2021 via Echofon)

A WebHID powered Elgato StreamDeck drum kit. 🥁 000587923.codepen.website (via @bramus) twitter.com/bramus/status/…

via Echofon

@danbri If you are into giving up your address book, then maybe yes. I haven’t found an interesting conversation yet; their “Tech” community is full of VC and crypto dudes. I haven’t shared my address book, so my recommendations for people to foll

via Echofon in reply to danbri

@echofon Bug report: tweets with two or more links pointing to the same origin (but not the same path) appear to link to the same URL, when clearly they are not. See the screenshots of the first and second link. Example tweet: twitter.com/bramus/status/… pic.twitter.com/5MdXHqAzVR

via Twitter for iPhone

@varunprime @mrdoob 🤩! I want to control this w/ `AbsoluteOrientationSensor` (developer.mozilla.org/en-US/docs/Web…; fallback to `DeviceOrientationEvent` for other browsers: developer.mozilla.org/en-US/docs/Web…) or maybe even w/ Joy-Cons (github.com/tomayac/joy-co…). Huge Super Monen.m.wikipedia.org/wiki/Super_Mon…

via Echofon in reply to varunprime

@TheRealNooshu Great results metrics-wise, yet still not fully convinced screenshots are the way to go. On a high quality screen, the smaller fonts are noticeably blurrier compared to actual text. Also most search engines won’t pick up any of the tweet

via Echofon in reply to TheRealNooshu

petele Offline support has been part of the installability criteria since day 1. The Chrome team is closing a loophole some developers used to meet the criteria. More details & timeline are at: goo.gle/improved-pwa-o…

Do you think this is a good change? goo.gle/pwa-offline-fe…

via Twitter Web App (retweeted on 9:07 PM, Feb 10th, 2021 via Echofon)

@Justin_Mandzik @excalidraw Only standing on the shoulders of giants. Looking forward to more cool things coming in the next couple of weeks and months!

via Twitter Web App in reply to Justin_Mandzik

hediet_dev Github1s is really nice.
Just add “1s” after “github” when viewing code on github.com and VS Code loads up instantly: pic.twitter.com/rW5tdxrqIJ

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

ChromiumDev 🎥 New HTTP 203! Making a seconds-counter in JS is as easy as 1… 2… 4…??

Here’s how this seemingly easy thing can go wrong, and how to avoid the gotchas.

➡️ Watch youtube.com/watch?v=MCi6AZ…3pic.twitter.com/j4bjbY7DUNbY7DUN

via TweetDeck (retweeted on 10:02 PM, Feb 9th, 2021 via Echofon)

JoshWComeau 🎉 Just published a new blog post: “An Interactive Guide to CSS Transitions” 🎉

It’s a deep dive into `transition`, the CSS motion workhorse. We’ll discover different timing functions, learn about UX and performance best-practices, and more! ⚡️

joshwcomeau.com/animation/css-… pic.twitter.com/88ndUkGXEa

via Twitter Web App (retweeted on 9:59 PM, Feb 9th, 2021 via Echofon)

@stevefaulkner @MarcoInEnglish Nice. Remindsme somewhat of “The ‘I’ in ‘team’ is right in the a-hole”.

via Echofon in reply to stevefaulkner

jaffathecake I’ve been going through the specs & behaviour of session history in browsers recently, and I’ve encountered a behaviour that makes me want to crawl under a rock and hibernate. (gist.github.com/jakearchibald/…) pic.twitter.com/wGRGZlLqKu

via Twitter Web App (retweeted on 9:44 PM, Feb 9th, 2021 via Echofon)

@excalidraw @node_monk Nooo! Trashing Mario, and the mouse and the elephant. 😱

via Echofon in reply to excalidraw

@stevefaulkner @MarcoInEnglish I can never read the verb to “assume” the same now. Thank you. Great post, too; ReTweeted. I hope it shows up as a traffic peak in your website anal-ytics.

via Echofon in reply to stevefaulkner

stevefaulkner 🗣️aria-description: By Public Demand and to Thunderous Applause
html5accessibility.com/stuff/2021/02/…

via Twitter Web App (retweeted on 9:38 PM, Feb 9th, 2021 via Echofon)

@kennethrohde @YouTube Can’t reproduce the intervention on Pixel 3a, but the videos appear as unstyled unplayable, objects. pic.twitter.com/prnqP5j9Po

via Twitter for iPhone in reply to kennethrohde

@nhoizey @fvsch Yes, this article and the other article web.dev/prefers-color-…, with the section on `<dark-mode-toggle>` (github.com/GoogleChromeLa…) specifically.

via Twitter Web App in reply to nhoizey

Friendly reminder to never ever hard-code version numbers into your sniffing code: bugs.chromium.org/p/chromium/iss….

`p = /Mac OS X (10[.\_\d]+)/.exec(i)[1];` (@unity3d)

🙀 This broke once Chrome started reporting `Mac OS X 11`—Now all browsers lie and rep

via Twitter Web App

@ChromiumDev 📢 If all you need is a baseline offline fallback page without actually delivering a true offline experience (which, acknowledgedly, many apps don’t need or can’t), then give my article a read: web.dev/offline-fallba….

via Echofon in reply to ChromiumDev

ChromiumDev Offline support has been part of the PWA installability criteria since the beginning. In Chrome 89, we’ll warn you if your PWA doesn’t have an offline experience. In Chrome 93, we’ll start enforcing the updated install criteria for new PWAs. developer.chrome.com/blog/improved-…

via TweetDeck (retweeted on 9:06 AM, Feb 9th, 2021 via Echofon)

You may have seen the favicon supercookie 🍪 paper on Twitter a couple of days ago (cs.uic.edu/~polakis/paper…). Jonas Strehle has now built a very approachable demo (supercookie.me) and written a nice summary supercookie.me/workwise of the attack

via Twitter Web App

💡 Good reminder from @codepo8 about the ability of sharing data between CSS and JavaScript using custom properties: christianheilmann.com/2021/02/08/sha…. That’s indeed the trick I use for my poor person’s Joy-Con WebHID demo: github.com/tomayac/joy-co….

via Twitter Web App

@metawops Sobald die Extension im App Store aufgenommen wird und du sie darüber auch installierst, läuft es ohne das Häkchen. Alles normal. Frohes Entwickeln noch!

via Twitter Web App in reply to metawops

@metawops Das ist nur für lokales Testen während des Entwickelns. Danach muss man einfach nur die Extension installieren und gut is’.

via Twitter Web App in reply to metawops

@metawops Die Kategorie wird benötigt, um die Extension entsprechend platzieren zu können (etwa eine Preisvergleich-Extension unter Shopping). Es gibt keine Kategorie für Extension (du verwechselst es vielleicht mit dem Xcode Projekttyp.

via Twitter Web App in reply to metawops

@metawops Das ist normal, siehe Schritt 3 auf developer.apple.com/documentation/…:

” Choose Develop > Allow Unsigned Extensions. The Allow Unsigned Extensions setting is reset when a user quits Safari; you must set it again the next time Safari is launched”.

via Twitter Web App in reply to metawops

@TheRealNooshu @Jack_Franklin For sure less than 2.7MB 😂. And you can lazy-load it only once the tweet embed comes close enough to the viewport. And it will be fully dynamic based on the kind of tweet (regular, poll, media, quote tweet,…). It’d wor

via Twitter for iPhone in reply to TheRealNooshu

@TheRealNooshu It’s possible via the front-end: umaar.com/dev-tips/201-e…. I’m pretty sure it’s exposed in Puppeteer, too. @Jack_Franklin might be able to point you in the right direction.

via Echofon in reply to TheRealNooshu

@TheRealNooshu While you keep the tweet text in the image’s `alt` attribute, it’s accessible to screen readers, but not _copyable_ for everyone. I don’t think screenshots are the way to go. I’d rather prefer we look into grabbing the CSS via Puppe

via Echofon in reply to TheRealNooshu

@hsivonen @mathias @fantasai After all these years still a brilliant article! 👏

(Noticed a small typo: s/distintion/distinction.)

via Echofon in reply to hsivonen

argyleink Wondering how sites like Github have nice dark form controls?

You gotta set the color-scheme!
✅ enable from CSS (whole page or per selector)
✅ enable from HTML (page can prepare early for your dark scheme)

lots more on web.dev - web.dev/color-scheme/ pic.twitter.com/gMWkdZeHkP

via Twitter Web App (retweeted on 8:29 PM, Feb 6th, 2021 via Twitter Web App)

@argyleink @kilianvalkhof @bramus It’s in my article: 😃 web.dev/color-scheme/.

Here’s the demo: color-scheme-demo.glitch.me (content warning: slowly alternating contrasting colors).

via Twitter for iPhone in reply to argyleink

lisa_staudinger I recently came across the concept of “uniwidth” typefaces – every letter has the same width across different weights – and was surprised to find very little resources. So I put together my own 🤓uxdesign.cc/uniwidth-typef…4YYL

via Twitter Web App (retweeted on 11:33 AM, Feb 6th, 2021 via Echofon)

@kristoferbaxter @philwalton @rowan_m I’m more of a “Happy M\o/nday” person.

via Echofon in reply to kristoferbaxter

@anssik @andreasbovens about frecency. Thanks for sharing!

via Echofon in reply to anssik

chrishtr I’m writing a book about how browsers work, along with
@pavpanchekha. Thank you Pavel for getting this started and letting me join the adventure. This book not only explains how they work, but shows you how to build a simple browser yourself, which is quite fun. twitter.com/BrowserBook/st…

via Twitter Web App (retweeted on 8:57 AM, Feb 5th, 2021 via Echofon)

@rem @brucel Current status: Doomscrollin’…

via Echofon in reply to rem

bramus 👀 Remember Coverflow? How about a “Pure CSS” version using @​scroll-timeline?

🔗 codepen.io/bramus/pen/xxR…

🧑‍🔬 Experimental technology: Chrome Canary with “Experimental Web Platform Features” enabled only for now. pic.twitter.com/YTvOmeyi0w

via Tweetbot for Mac (retweeted on 9:49 PM, Feb 4th, 2021 via Echofon)

v8js 🔥 What’s new in V8 v8.9? Top-level `await` enabled by default in Blink and performance improvements for calls with argument size mismatch.

v8.dev/blog/v8-releas…

via TweetDeck (retweeted on 6:50 PM, Feb 4th, 2021 via Echofon)

tomayac Landed idle detection in @excalidraw, and folks seem to like it. 😊 twitter.com/excalidraw/sta… pic.twitter.com/PWs6B9J29q

via Twitter Web App (retweeted on 6:37 PM, Feb 4th, 2021 via Echofon)

(To point this out again, it’s not using the new `IdleDetector`, but a conventional idle detection implementation: twitter.com/tomayac/status….)

via Twitter Web App in reply to tomayac

@AlexanderTrefz @UstunOzgur This page arguably exists. Its URL is chrome://dino. While fun, it’s not something most people want; hence the need (and opportunity) for customization.

via Twitter Web App in reply to AlexanderTrefz

@UstunOzgur @AlexanderTrefz PWAs that require a connection should still show an offline fallback page: web.dev/offline-fallba….

via Twitter Web App in reply to UstunOzgur

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