@stoyanstefanov @paulcalvano Train Wi-Fi is the new dialup for me. Old habits like the middle click on newsletter links never die.
@stoyanstefanov @paulcalvano Modern optimizations like lazy-loading are actually harmful in such circumstances. Here’s an idea: disabling lazy-loading if the loading process happens in the background.
@stoyanstefanov @paulcalvano “[I]f a web page loads in a background tab then does its load time really matter”? Just judging from my personal experiences, I load stuff (e.g., links in a newsletter) in the background when I know my connection is abysma
stoyanstefanov 🪐Web Performance Calendar day #31 with @nicj
📈 Self-Profiling Javascript API
🔗calendar.perfplanet.com/2021/js-self-p…
🥳 Today’s article 1 of 4!
xkcd Formatting Meeting xkcd.com/2562 pic.twitter.com/bvUbE7AKUz
The Gift of It’s Your Problem Now, by @apenwarr. Really insightful post on the way open source works and how it doesn’t. apenwarr.ca/log/20211229
Flash of Undefined Custom Elements (FOUCE): Interesting pattern to combine `Promise.allSettled()` with `CustomElementRegistry.whenDefined()` (developer.mozilla.org/en-US/docs/Web…) to control page visibility based on the critical custom elements being loaded. abeautifulsite.net/posts/flash-of…
finnhvman Moonshot project completed 🚀🎉
In 2021 I committed to create a unique organic pattern or texture each week in pure SVG. Size limit was 560 bytes (2 tweets). This is the 52nd piece:
Moon Surface 🌑 (416 bytes) #PetitePatterns on @CodePen
codepen.io/finnhvman/pen/… pic.twitter.com/k8SWG2WykC
simevidas If you have 15 minutes to spare, consider reading the official FAQ of the HTML Standard: github.com/whatwg/html/bl…
@AdaRoseCannon To be fair, I suppose Google’s Play Store’s review process to be equally “broken”, where “broken” means enforcing subjective rules using subjective human judgement.
Building designcember.com: web.dev/how-we-built-d…. Great behind the scenes look at our calendar.
@LinkofHyrule89 One could read that into the description. It could also just be to let app developers create _additional_ controls to minimize, maximize, etc. This would be similar to the way full screen works now: you can use the native green window cont
@LinkofHyrule89 The description is pretty clear, but I don’t think there is anything more out there quite yet. I can’t find a bug that would mention the flag description: bugs.chromium.org/p/chromium/iss….
Why Tumblr deals with this review process (see quoted tweet ⤵️) and why they don’t simply move to the Web is probably answered in their privacy policy: tumblr.com/privacy/en. It’s not about features (apart from push notifications maybe), it’s twitter.com/Carnage4Life/s…
stefanjudis If you want to know what the `hwb()` CSS color notation is about. 👇🙈
stefanjudis.com/blog/hwb-a-col…
❗ Disclaimer: to see the demo in action you have to use Safari 15 or Firefox 96 (currently Nightly).
Video alt: Color picker controls (hue, white and black) affecting a hwb color. pic.twitter.com/rcrP2oAwSr
@bramusblog Curious, what’s your prediction for CSS Module Scripts? web.dev/css-module-scr…
@hypeddev @kritisapra_ @ChromeDevTools You can track the bugs linked in web.dev/css-module-scr… to be informed of progress.
@simevidas @patrickbrosset I think videos and articles can very much complement each other. I would not necessarily say the one is easier to consume as the other. It also depends on the device you watch/read something on and the situation you’re in. Ide
@SimmerVigor @ChromiumDev Tracked already as @____lighthouse issue github.com/GoogleChrome/l…. But thanks for bringing this up anyways.
tomayac I had fun in creating a “solar-powered” ☀️ calculator with the Ambient Light Sensor and the Window Controls Overlay APIs: designcember.com/#26th 🎄. Jump right to the post web.dev/designcember-c… and enjoy the demo designcember-calculator.glitch.me (best viewed on Android—needs a flag).pic.twitter.com/PJemS8fznpp
ChromiumDev A gift for all! 🎁
Learn how @tomayac recreated the TI-30X SOLAR calculator in HTML, CSS, and JavaScript, using the Window Controls Overlay API and the Ambient Light Sensor API!
#Designcember 🎄🧮
designcember.com/#26th
I had fun in creating a “solar-powered” ☀️ calculator with the Ambient Light Sensor and the Window Controls Overlay APIs: designcember.com/#26th 🎄. Jump right to the post web.dev/designcember-c… and enjoy the demo designcember-calculator.glitch.me (bestpic.twitter.com/PJemS8fznp
@qgustavor This is acknowledgedly unusual, but the implementation in this case was finished (in Chromium 98, chromestatus.com/feature/564080…) before the spec PR was merged.
@_developit @_zouhir @glitch @github @code @PrettierCode Oh no. I have to say it burnt me once and I lost data and didn’t use it after that, but it was great _when_ it worked.
@_zouhir @glitch @github @code @PrettierCode Glitch is infamous for its glitches where it would be down for a bit and apps would just not wake up. It’s gotten a lot better recently. I understand and think it’s only fair that apps sleep after a while o
@_zouhir @glitch has git export, @github import and export, has immediate non-iframed hosting, and optionally gives you a server. I wish it had a slightly better uptime history and a richer editor (but there is a @code plugin for local editing, and it int@PrettierCode
Creating A Custom Range Input That Looks Consistent Across All Browsers: smashingmagazine.com/2021/12/create…. I can’t wait for @openuicg to make this process easier. Meanwhile, the generator tool range-input-css.netlify.app linked from the article is the next bes
webstandards_en Control how your app is launched. @tomayac tells about the Launch Handler API that will let PWAs customize their launch behavior across all types of app launch triggers.
web.dev/launch-handler/ pic.twitter.com/EwUHzKBTO7
Vjeux Cool blog post on how to draw an arrow between two boxes! dragonman225.js.org/curved-arrows.…
@dfabu @firt Came here to say this. But, hey, one can always hope 🤞. The best we can do is let the @webkit team know why we want this: bugs.webkit.org/show_bug.cgi?i…. FYI, @jensimmons. Two write-ups: web.dev/excalidraw-and… for @excalidraw and web.dev/svgcode/#file-…svgco.de
@JohnMu @danbri Yepp, the analogy gets weaker. I guess the gist is: people shouldn’t have to worry about the engine as long as it lets them get their regular tasks done. Which boils down to defining what counts as a “regular task” on the Web. Browser vend
@JohnMu @danbri The analogy becomes weaker here, but you’d choose a different engine (and car) when you want to drive in a desert or on a Formula 1 track (i.e., advanced apps) instead of the city, but with both a Jeep engine or a McLaren engine you could
@danbri @AnaestheticsApp Analogy of course, not metaphor. And yes, I dug up the difference now, trying to improve my knowledge on multiple levels here..writersdigest.com/write-better-f…RK
@danbri People definitely don’t know this, but it can be easily explained with metaphors: Cars are the browsers, and car engines are, well, the browser engines. Some cars share the same engine (examples: hotcars.com/surprising-car…) on the inside, but typical
@danbri Absolutely correct, just on desktop, where this kind of behavior may be less expected.
“My site is broken on DuckDuckGo’s browser” will be an interesting bug.
“In other words, on Windows, the browser will use Edge/Chromium rendering, and the same goes for Safari/Webkit on macOS.”
DuckDuckGo is working on a privacy-focused desktotheverge.com/2021/12/21/228…
@TheRealNooshu Thanks for taking the energy to write this up! Wishing the remaining 5% of G. the worst of times! All the best and much courage to you and your family. Hugs! 🤗
bramus 💡 Note that :has() is way more than a CSS “Parent Selector”
/* Select figure that has a figcaption as a child */
figure:has(figcaption) { … }
/* Select img that is a child of a figure that contains a figcaption */
figure:has(figcaption) img { …smashingmagazine.com/2021/06/has-na…xyZj
“Implemented `FileSystemFileHandle.getFile()`”. More File System Access API goodness coming to @webkit Safari! 👏 twitter.com/webkit/status/…
@jcubic @ChromiumDev This specific feature’s origin trial will currently work exclusively on Chrome OS according to the tracking bug: bugs.chromium.org/p/chromium/iss….
💡 Actually SVGcode (svgco.de) makes use of svgo internally for saving—the same library that powers SVGOMG jakearchibald.github.io/svgomg/V). But the best is that both tools can indeed play together super well thanks to the Async Clipboard API:web.dev/svgcode/#async…twitter.com/Accudio/status…
New origin trial alert: Web App Dark Mode 🌒 developer.chrome.com/origintrials/#…. Customize Web App Manifest properties like `background_color` according to the user’s preferred color scheme.
It’s already live in SVGcode: svgco.de! See the source codgithub.com/tomayac/SVGcod…pic.twitter.com/r5QYAuWSZN
@rauschma I have mnemonics, so I use “General Motors” (`/gm`) or “gum” (well, `/gum`), etc.
@DanShappir @nextInsurance1 All the best for this next step and congratulations! 🎈
@feross Admittedly the related Chromium page leaves to be desired (chromium.org/blink/deprecat…—FYI@chrishtrr), but search for “Feature deprecations” onchromium.org/blink/launchin…0, where (surprisingly?) the deprecation steps are clearly listed. Also seesysnet.ucsd.edu/~voelker/pubs/…@__apf__
@feross “Being ignored” is contradicted literally in the next email to the thread you linked to, written by @DanielBratell: “How much of the web will break, and how badly. The numbers mentioned, 0.5% of sites set document.domain, 0.05% seem to depen
Wattenberger viewBox
by default, the unit space in a SVG element is the same as the pixel space. “1” = 1px
but if you specify a viewBox, you can set the [x, y (top left corner), width, height] of unit space. v helpful for things like: making 0 the horizontal center
wattenberger.com/guide/scaling-… pic.twitter.com/qnL2PYOHYc
@DFlatMinor @Paul_Kinlan @dstaley This is the state of 2019. 2021 has this for you on offer: groups.google.com/a/chromium.org…. The change will probably go live in 2022.
Totally getting behind this! pic.twitter.com/3ujbLr2QxP
@cwilso @soMelanieSaid @DasSurma We usually call it Mantellängenunangemessenheitsangst (coat length inappropriateness fear).
@samthor /me bows in awe 🙇. You’re one of the people I deeply respect and look up to. All the best for what comes next. It’ll be great! Big remote hugs 🤗!
DasSurma `structuredClone()` is on its way to stable in all major browsers, and already available in Firefox, Node 17 and Deno.
I thought it was time to write an article!
👀👇
web.dev/structured-clo…
@dfabu @annevk @kennethrohde @firt @mkruisselbrink Could you bring this up in a new Issue on github.com/WICG/file-hand… (and probably link it to the Issue Anne mentioned, so the connection is made? Thanks!
@dfabu @annevk @kennethrohde @firt @mkruisselbrink Probably it’s best to get those proposals up on github.com/WICG/file-syst…, as suggested by Anne.
@annevk @dfabu @kennethrohde @firt @mkruisselbrink We need a name for the spec that will contain the `show{FileOpen, FileSave, Directory}Picker()` methods, i.e., the ones that Apple chose to _not_ implement. The concepts they share (like `FileSystemFileHa
@dfabu @annevk @kennethrohde @firt @mkruisselbrink Nope.
@dfabu @annevk @kennethrohde @firt @mkruisselbrink I think we need to very clearly convey in the names what is a file in the sense of `C:\Documents\notes.txt` vs. what is a “file” in the sense of “it exists in _whatever_ representation on disk _somewhere_
Wide Gamut 2D Graphics using HTML Canvas, by @heycam. Love the interactive demos! If you can, try it on a supported device: webkit.org/blog/12058/wid….
@Herschel_R /me looks for the space bar on the mobile website. 😂
tomayac @dfabu @kennethrohde @firt It’s a confusing situation, but things finally settle. See github.com/whatwg/sg/issu… for the details. Essentially Apple agreed on implementing the OPFS, but not the pickers, so this part was broken out of the WICG spec wicg.github.io/file-system-ac… and put into whatpr.org/fs/1.html.
brucel “On the CMA’s interim report on mobile ecosystems” - hot off the blog! brucelawson.co.uk/2021/on-the-cm… #AppleBrowserBan
@wesbos @SaraSoueidan I’d use the Web Share API (web.dev/web-share/) and fall back to the approach described by @wesbos in case it’s not available. I’d definitely not load the share widgets each service offers, they tend to be heavy and privacy
In case you use Flutter Web for building PWAs, this deck by @mhadaily in the quoted tweet ⤵️ (weird slides navigation, you want to navigate down until you can’t, then right, then repeat) shows you how to customize the service worker.
>$ flutter buitwitter.com/mhadaily/statu…
Congratulations 🎈 to all elected members of the @w3ctag, and thank you 🙏 for your service and everything you have done for Project Fugu 🐡 and the Web in general, @kennethrohde! twitter.com/w3cdevs/status…
Pool-Party: Exploiting Browser Resource Pools as Side-Channels for Web Tracking: “[W]e were able to identify exploitable limited-but- unpartitioned resource pools [like WebSockets or SSE] in all browsers, which we were successfully able to exploit[.]”arxiv.org/abs/2112.06324
@dfabu @kennethrohde @firt It’s a confusing situation, but things finally settle. See github.com/whatwg/sg/issu… for the details. Essentially Apple agreed on implementing the OPFS, but not the pickers, so this part was broken out of the WICG spec wicg.github.io/file-system-ac…whatpr.org/fs/1.html
ChromiumDev 🚀 Control how your app is launched: web.dev/launch-handler/.
Launch handler lets you control how your app is launched, e.g., if it uses an existing or a new window or if the chosen window is navigated to the launch URL 🔗. Learn all about `launch_handler` in @tomayac’s article.
@addyosmani Immediate Outrun throwback (en.wikipedia.org/wiki/Out_Run). Great animation!
ChromiumDev 🎥 We made this video on dumb old DOM APIs for 🎃halloween👻, but looking at the calendar, we might be a bit late.
Please enjoy this brand new HTTP203 video with @jaffathecake and @DasSurma on 🎄RuDOM the reflowed renderer🎁!
⬇️ Watch here ⬇️
youtube.com/watch?v=doeOKT…
maudnals Two-factor authentication (2FA) gives your users strong account security 🔒
Check out our new tutorial ⤵️ and learn how to implement 2FA with WebAuthn⏤a cross-browser, phishing-resistant web API!
developers.google.com/codelabs/webau… pic.twitter.com/VRUemUwTy7
Tsihanouskaya My husband, Siarhei Tsikhanouski, is sentenced to 18 years in prison. The dictator publicly takes revenge on his strongest opponents. While hiding the political prisoners in closed trials, he hopes to continue repressions in silence. But the whole world watches. We won’t stop. ✊ pic.twitter.com/hdnHj8y6HZ
The Competition and Markets Authority is carrying out a market study into mobile ecosystems in the UK 🇬🇧 (gov.uk/cma-cases/mobi…) and has published first results:
👉 Interim report: assets.publishing.service.gov.uk/government/upl… [PDF]
👉 Appendices: assets.publishing.service.gov.uk/government/upl…@mtomweb
New PWA alert from Adobe: Creative Cloud Express (express.adobe.com/sp/) makes many small utilities available for free, for example, background removal. It’s an installable experience and well deserves a spot in your apps folder. 🧰🎨 twitter.com/Adobe/status/1…pic.twitter.com/Z5kUakwxAE
ChromiumDev In 2021 we started an effort to eliminate browser compatibility problems in 5 areas
1️⃣CSS flexbox
2️⃣CSS Grid
3️⃣CSS position: sticky
4️⃣CSS aspect-ratio
5️⃣CSS transforms
…and now we have >90% score in all browsers!
Check our progress in this review 👉
web.dev/compat2021-hol…
@firt Wow, what a story. 🍿 Followed the different threads, luckily I understand enough Spanish…
@brucel @shwetank @andreasbovens @pepelsbey_ @mathias I miss Opera and Presto. 😢 My goto browser during high school and almost all of my university years…
@jaffathecake @andreban Well, it’s been around since JDK 1.0, so definitely has some legacy: docs.oracle.com/javase/7/docs/….
@jaffathecake @andreban Wholeheartedly agree. It’s mostly an academic discussion.
patrickbrosset The work done by open-ui.org is very exciting, and so important.
Early experimentation work in Edge makes built-in fully-stylable and accessible <select>s possible, no libraries or custom JS needed.
Check the demo in Edge Canary only: codepen.io/captainbrosset… pic.twitter.com/P03t1HXaIt
@andreban @jaffathecake Well, as the old saying goes: “URIs identify and URLs locate”.
You can now see the full accessibility tree in @ChromeDevTools: developer.chrome.com/en/blog/full-a… #a11y. Love the way you can toggle between regular view and tree view in the Elements panel. pic.twitter.com/UCh98XnTfW
@ivankutskir Well, your installed @photopeacom experience overrides the default behavior of [cmd]+[n] to not open a new window, but open a new file instead. So installation does give you some freedom to customize the default behavior.
@neil_neilzone @edent @andrewducker Thanks! Not a bad response.
@ivankutskir You probably know this by now, but here’s a link for anyone who stumbles upon this tweet: web.dev/keyboard-lock/.
🤩 Wow, @photopeacom has a cool new file explorer feature: File > Open More > From Storage. It’s all powered by the #FileSystemAccess API (web.dev/file-system-ac…)! Try it out at photopea.com. pic.twitter.com/AAekWHHM7o
@edent Very interesting! As a person whose first language isn’t en-GB, could you (or @andrewducker 👋) point me at an example of “the quintessentially British approach of a faint frown and a tone of mild reproof (or its email analogue)”?
bramus A trick I learned from @chriscoyier at @cssdayconf 2017 is that you can alter SVG path data from within CSS using the ‘d’ attribute.
🔗 bram.us/2017/06/21/cha…
Didn’t know it was Chromium only, but soon that’s no longer the case 🤩 twitter.com/intenttoship/s…
@TheRealNooshu Happy birthday 🎂, Matt! Stories like yours put so many things in relation… Here’s to many more birthdays, you better develop some good mid-life crisis! 🤗
@henrylim96 @argyleink It’s important to reduce motion that potentially causes negative effects like motion-triggered vestibular spectrum disorder: web.dev/prefers-reduce….
Hovering a button and it slightly moves up? Fine ✅.
Scrolling a page and paral
Kapwing: Powerful video editing for the web: web.dev/kapwing/. Apps like this is why we have created #WebCodecs (web.dev/webcodecs/) for. 🤯
@css Hey @chriscoyier 👋. Would you be interested in discussing some of the points on your list with a member (*cough*, me) of the Project Fugu 🐡 team?
@johnwilander Congratulations, John! 🎈 Let’s see when it’ll be available in Germany…
A 3min 56s conference talk where Alex “@slightlylate” Russell shows slides of network traces underlined by Die Toten Hosen’s song Hier kommt Alex: youtu.be/6z8o7qAIlIU. “Hey, hier kommt Alex! Vorhang auf für seine Horrorschau!” (lyricstranslate.com/en/hier-kommt-…
@natadimou Tenure-track assistant professor in Leuven? Wow, massive congratulations 🎈, and really happy you technically stay part of Team Belgium 🇧🇪!
@Jack_Franklin @TimvdLippe “Here are directions to GPS Intact Ltd., Edinburgh Rd, Trinidad & Tobago. By the way, the store might be closed by the time you arrive.”
@hochsays @simevidas Oh, great suggestion, and makes a lot of sense in hindsight 🤦. I’ll look into it after the weekend. Thanks so much for digging into this.
@hochsays @simevidas (Been there on Monday. Hope you feel better now/soon.) The code is here: github.com/tomayac/hiit-t….
Awww 🥰. User statements like this ⤵️ are the best motivation. Thanks so much, Alba! twitter.com/dawntraoz/stat…
@dluzar @ChromeDevTools CC: @JecelynYeen and @codepo8 from @EdgeDevTools.
regocas :focus-visible has just been enabled by default in @webkit! 🎉 trac.webkit.org/changeset/2867…
Breaking out of the [window] box [with #WindowControlsOverlay (web.dev/window-control…)]: great overview article with a neat motivational example by @patrickbrosset: alistapart.com/article/breaki…
MSEdgeDev The new Detached Elements Tool in Microsoft Edge DevTools helps you find and fix DOM memory leaks in your web app. Learn more on the blog: msft.it/6011Z6AKU
@rmondello @siracusa A while ago I requested support for the `BarcodeDetector` API in bugs.webkit.org/show_bug.cgi?i…. If this were implemented, devs could just throw the bare pixels at it and get the data out, even from a `table`-based QR code. (Yes, I get that
@rauschma Oh, thanks for sharing. It’s one of these things that bothered me, but not enough to investigate. Finally I know how to make @code do what I want there.
@simevidas @hochsays Yes, my suspicion is that the user gesture is counted as expired by WebKit. Need to investigate more.
tomayac 📢 SVGcode is on @ProductHunt today: producthunt.com/posts/svgcode-2. Very excitedly looking forward to answering the questions from the Product Hunt audience! 😆
@hochsays @simevidas Since I have your attention now, any idea why my simple beeping doesn’t work on Safari? It’s literally just a beep…
@carlschultz_ Thanks for the kind words 😊. I was basically the same, and in the end decided to just build what I was searching for.
@rauschma @intenttoship Technically that’s what alternative style sheets are for: developer.mozilla.org/en-US/docs/Web…. Unfortunately it’s only natively supported by few browsers like Firefox, but support is easy to add with JavaScript: alistapart.com/article/altern… (a litt
@simevidas @hochsays would probably know the answer. FWIW, I didn’t manage to make Safari even beep in a demo app (tomayac.github.io/hiit-time/) I did for an article (web.dev/mini-app-examp…).
intenttoship Blink: Intent to Experiment: Dark mode support for web apps groups.google.com/a/chromium.org…
@bansal_io It works somewhat, but some of the APIs that make it fast on Chrome (the actual Chrome, not the Chrome on Android that internally uses `WKWebView`) are not available on Safari unfortunately.
📢 SVGcode is on @ProductHunt today: producthunt.com/posts/svgcode-2. Very excitedly looking forward to answering the questions from the Product Hunt audience! 😆
@simevidas @ChromiumDev Protect My Choices is one of my personal favorites: chrome.google.com/webstore/detai…. Google also offers a Google Analytics opt-out extension: tools.google.com/dlpage/gaoptout.
wesbos I used github code search all the time to see how other people have implemented other APIs or to see how frequently something is used.
Excited for the new Github code search, this is going to be a power tool for groking and debugging code.
github.blog/2021-12-08-imp…
argyleink 🆕 #GUIchallenges
Thinking on ways to build Toasts
Toasts? 🤔
passive, non-interactive UI feedback components 🤓
✅ YouTube youtube.com/watch?v=R75ZVW…
✅ web.dev post web.dev/building-a-toa…
✅ Demo gui-challenges.web.app/toast/dist/ pic.twitter.com/WCTvURv0gq
My wife’s and my Nikolaus 🎅 present (December 6) was a booster shot 💉. This time we got @BioNTech_Group Comirnaty. Sore arms and 💤 were the only secondary effects. My pledge holds: If your country makes _any_ (booster) vaccine available, don’twitter.com/tomayac/status…
Are Text Fragment links (web.dev/text-fragments/) coming to @webkit/Safari?! This change list looks promising at least: trac.webkit.org/changeset/2855…. (Thanks @schweinepriestr for the pointer.) twitter.com/schweinepriest…
@bansal_io In all situations where you cannot serve from localhost, for example, on a shared computer where you don’t have shell access. 😃
@cramforce I mean technically it’s re-authentication I guess. It still knows who I am, yes. It’s super annoying nonetheless though, and, for example, Android never does this.
@simevidas @addyosmani @marblewraith I assume this are people on older iPhones that don’t get updated anymore who are stuck with iOS 13/14.
shadeed9 ✍️ New Article: Defensive CSS
I compiled a list of defensive CSS techniques to avoid possible issues. This is usually a checklist I use when I’m working on a new web project. Hope you find it useful.
🔗 ishadeed.com/article/defens… pic.twitter.com/5pSK31JKEu
@cramforce Can you start with corp. logging us out every, erm, whatever the period is, please?
@quicksave2k I looked up the spec to see how much freedom to lie it leaves up to implementations: html.spec.whatwg.org/multipage/work…. Fingerprinting mitigation is well mentioned there.
Pretty clever use of the Service Worker APIs: serve a local folder of files in your browser for easy testing without having to run a server. servefolder.dev
@daKmoR @kennethrohde @littledan You folks are familiar with @stackblitz WebContainers I suppose: blog.stackblitz.com/posts/introduc….
@hashseed Recruiters keep being impressed by my Java and PHP skills. ¯\_(ツ)_/¯
@DanShappir Oh, wow! All the best for the next gig! 🎈 Curious to learn more!
pwabuilder One codebase, one app, three channels for users to get that app: From your browser, from the Microsoft Store and from the Google Play store! PWAs are kinda magic😊 twitter.com/tomayac/status…
@kennethrohde @GooglePlay @pwabuilder Yes, that’s a known issue: github.com/tomayac/SVGcod… . . .
Thanks to @pwabuilder, you can now install SVGcode (svgco.de) right from the Windows Store 🛍 should you prefer so (apart from the Play Store): microsoft.com/en-us/p/svgcod…. Just using the Web app of course remains possible, too.
twitter.com/tomayac/status…
Shared Game Timer (sharedgametimer.com) by @Parakoos is a nerdy little fun PWA that uses a good number of Project Fugu 🐡 APIs like #WebBluetooth (web.dev/bluetooth/ for sharedgametimer.com/remote-control…), #Gamepad (web.dev/gamepad/), or #WakeLockweb.dev/wake-lock/
“Have Core Web Vitals made the web faster?” asked @tunetheweb: calendar.perfplanet.com/2021/have-core…
@miketaylr @simevidas Very interesting. I always thought internal (where Firefox’s is obviously public-“internal”) telemetry would necessarily use different data then what is Web-exposed.
@AaronGustafson @firt Maybe @arvindmurching, whom @slightlylate has pulled into the conversation in bugs.chromium.org/p/chromium/iss…, can add Microsoft’s perspective?!
@simevidas That’s interesting! Browsing the data, I’m surprised that Windows 11 is not even visible in the OS stats on data.firefox.com/dashboard/hard…. Can this be possible?
@AdaRoseCannon Why would you _not_ dance like no one’s watching and rather optimize your dance moves for the audience?
In contrary, I wish Twitter’s filters were better, so I could decide that to _me_, Ada’s AR stuff doesn’t matter, but that I ve
feross The team that powers VLC: How a group of university students transformed a school project into a media-player mainstay increment.com/teams/the-team…
@MarcoInEnglish @vick08 @ChromiumDev I have reported this as bugs.chromium.org/p/chromium/iss…. Please add more details to the bug if you can, especially the version where this started to occur. Thanks for your help! Also sorry for the inconvenience. 😔
@alexainslie @LeonieWatson @googlechrome To add to this: having this feature should by no means be seen as an excuse to no longer label one’s images. (By the way: feedback on my own image labeling here on Twitter is very welcome. I always try to describtwitter.com/tomayac/status…
ChromiumDev With an offline fallback page you can give your users a friendlier experience when they have trouble with the network. 💫 📶🚫
Check this video with @tropicadri to learn how you can serve your offline fallback with @workboxjs
and 1 line of code. 🖥️ ✅
youtube.com/watch?v=M7gQg9…
alexainslie Billions of images on the web today don’t have alt-text provided by creators/developers. That makes it difficult (sometimes impossible) for people who rely on screen readers to use the web.
To close the gap, @googlechrome can automatically generate labels for images. #a11y pic.twitter.com/yd1jkeZlRJ
@sw12 They can! Just need to wait for Chromium 97: chromestatus.com/feature/503246…. 🎉
@hadleybeeman All the best for whatever comes next! 🎈
@jaffathecake @ChromiumDev Might be worth discussing your idea with Beverloo. I don’t have enough background on the Android constraints (future and current).
@jaffathecake @ChromiumDev Android essentially. bugs.chromium.org/p/chromium/iss…
@jaffathecake @ChromiumDev Sad indeed, but talking to Beverloo, the decision—while disappointing because there was quite some developer excitement—makes sense.
tomayac 🙃 The comic in the quoted tweet ⤵️ probably is the best way yet to explain what my new PWA called SVGcode (svgco.de) does.
😀 For more background, watch the video (youtu.be/kcvfyQh6J-0) or read the article (web.dev/svgcode/).
twitter.com/mxbck/status/1… pic.twitter.com/01pQEddmoE
@ericlaw @simevidas LOL, typo’ed an off-by-one error… 😂 I’m sure it also will be great next year, too!
@ericlaw @simevidas I remember this article. It was great in 2017 and still is in 2022. The screenshots story around theme customization is mind boggling. How could they not notice?¿?
@simevidas WCO (web.dev/window-control…) lets the disguise become even more perfect. Another attack vector is to start like a harmless PWA that then tries to change its identity to look like your banking software. This is why WCO is opt-in and icon and/or
@ericlaw I definitely approve of _any_ place called Steiner Ranch Steakhouse 🥩. Five stars ⭐️⭐️⭐️⭐️⭐️.
@justinfagnani This article developers.google.com/search/docs/ad… describes all the steps. In short: prepare the new site (set up Search Console etc.), come up with an n:m URL mapping (n and m don’t have to be the same), and then start 301 redirecting.
@MattStudies @SpiderMonkeyJS Maybe @streamsstandard or @jaffathecake or @MattiasBuelens have more ideas?
puruvjdev VSCode app in macos.vercel.app is now powered by @stackblitz
I have been really liking the experience recently, hence it made perfect sense to give Stackblitz the love they deserve
(On Brave Browser, disable shields on site to view this 🤷♂️) pic.twitter.com/ZEx0BXcWp8
@tropicadri I muted the hashtag. 🙃
@HenriHelvetica @tkadlec @RealWebPageTest @Catchpoint @mdaoudi @JeenaJ @jefflembeck @reddycatchpoint @patmeenan Oh yes, that’s fantastic news! 👏 Huge congratulations on this gig! Can’t wait to see you make massive impact there! 🎈
@MattStudies @SpiderMonkeyJS See the bottom of chromestatus.com/metrics/featur… for sample URLs.
🙃 The comic in the quoted tweet ⤵️ probably is the best way yet to explain what my new PWA called SVGcode (svgco.de) does.
😀 For more background, watch the video (youtu.be/kcvfyQh6J-0) or read the article (web.dev/svgcode/twitter.com/mxbck/status/1…pic.twitter.com/01pQEddmoE
This demo is really rad: demos.ubilabs.com/moving-hamburg/ 🚇 twitter.com/ubilabs/status…
tunetheweb OK so the @HTTPArchive Web Almanac is really cool and all, but what I really like is the 7 HUNDRED page ebook we made out of it!!!!
almanac.httparchive.org/en/2021/table-…
It’s growing every year… #datanerd twitter.com/rick_viscomi/s… pic.twitter.com/9d1kEl1fV2
OskSta Oh. What’s this?
A free Townscaper web demo, playable straight in the browser: oskarstalberg.com/Townscaper/
🕊️💦🌊🏡🏤⛪️🏤🏡🌊💦🕊️ pic.twitter.com/Hg0f187xsb
@sillyslux @rflrkn Der zentrale Bug ist bugs.chromium.org/p/chromium/iss… (Deep-Link zum letzten Googler-Kommentar). Es ist wohl kompliziert…
argyleink Announcing Open Props 🎉
open-props.style
350 ✨free✨ CSS variables
Una We built the #Designcember landing page to highlight:
- AVIF image formats & animation
- Container queries & responsive grid
- Delightful dark themes
We also used a new CQ Polyfill & new CSS library 😎 Both linked in footer w/ a writeup to come!
designcember.com twitter.com/ChromiumDev/st… pic.twitter.com/R7xrbdQwj6
rick_viscomi 🔥 Introducing the 2021 edition of the Web Almanac 🔥
The web community’s “state of the web” report:
- Spanning 24 in-depth chapters
- Created by 100+ contributors
- Analysis of 40 TB of @HTTPArchive data
- 700+ pages of content
- Completely free!
almanac.httparchive.org/en/2021/
anssik 🧪For the brave, we provided a sneak peek into this Web API using the polyfill implementation: webmachinelearning.github.io/webnn-samples-…
💪When WebNN API lands in Chromium, you can expect a huge speedup over the polyfill: lists.w3.org/Archives/Publi…
@rauschma @firt @AnaestheticsApp @robwormald Adobe didn’t explicitly call it out, so probably not. twitter.com/BenDelarre/sta…
@KaaFury My example was only one of several traps people can fall into. The extension trains you to think about those traps as you code, but I agree, a good set of lint rules is definitely great, too.
Hello @madebygoogle. Anybody there?
🤔 Hmm, hilft denn da jemand bei @Telekom_hilft?
“`js
if (!’foo’ in bar) {
// foo not supported.
}
“`
The above code is buggy 🐛. This would have been spotted easily with @captbaritone’s JavaScript operator precedence extension for @code: jordaneldredge.com/blog/a-vs-code…. Brilliant idea!
(via @Vjeux.) pic.twitter.com/lzwWu4CFvH
@AnaestheticsApp @robwormald @rauschma Persisted storage definitely is last in the to-be-purged queue. But it can eventually still happen. #FileSystemAccess API support for Android is tracked as crbug.com/1011535.
@AnaestheticsApp @robwormald @rauschma @firt Safari Technology Preview 134 apparently: developer.apple.com/safari/technol….
@georapbox Correct, that’s a third example. twitter.com/tomayac/status…
philwalton 💡Want to ensure your pages are eligible for bfcache in Chrome—to get instant back and forward navigations?
DevTools recently added a feature to test this. Run it on any page and it’ll list all the issues blocking eligibility.
Learn more here:web.dev/bfcache/#test-…gpic.twitter.com/UXiWVpSHj00
pwabuilder Check out all these cool open source demo PWAs in the @MicrosoftEdge PWA docs! Tons of REALLY GOOD code samples here😊docs.microsoft.com/en-us/microsof…
@robwormald @rauschma `StorageManager.persist()` in particular: developer.mozilla.org/en-US/docs/Web….
maudnals Curious about Attribution Reporting? It’s a Privacy Sandbox API to measure ad conversions.
• Try the demo locally and check out the code
• Or test it in production (the origin trial is extended!)
All info in the new API guide ⤵️ 📏
developer.chrome.com/docs/privacy-s…
@Mustafa_x Congratulations on joining the flock! 🐦 *tweet, tweet