@rick_viscomi Here we go! Aced the Project Fugu š” quiz:
The Big Web Almanac Quiz: Capabilities edition (3/3)
š©š©š©
big-web-almanac-game.web.app/?chapter=capabā¦
rick_viscomi Play the Big Web Almanac Quiz, a hackathon project from @Una, @petele, and myself:
š big-web-almanac-game.web.app š
Compete to answer as many questions about the state of the web in under 1 minute! pic.twitter.com/vWrZSuzyuB
@edent “This is a fascinating area of work because it brings together the need for technical and cyber
expertise”. It’s got to be a great job when it has “cyber” in the role description! Congratulations on the new endeavor! š
mattgperry š” Hardware-accelerated CSS and WAAPI animations should be considered *progressive enhancement*, rather than mandatory. Why? One word, that you’re probably sick of hearing:
Safari. š§µ [1/6]
@mtomweb Probably platform requirements. I assume native iOS requires PNG. @quicksave2k has implemented SVG icon support for Android, with similar requirements. Maybe he can tell us his theory?
As usual, @firt has dived deeply into the latest beta ā¤µļø and has discovered some more things that might be coming, but some of it is still speculation: Push API, WebXR, text fragments links… Here’s hoping, though. š¤ (Disregard the version numbetwitter.com/firt/status/14ā¦
You can finally reset the iOS/iPadOS Safari experimental features flags to their default values! Small thing, but greatly appreciated! š twitter.com/tomayac/statusā¦
Icons in the Web App Manifest are finally supported in Safari on iOS 15.4 beta 1, so you don’t have to provide them via the proprietary way. For some reason, in my demo ios-a2hs-demo.glitch.me, it chooses the 32 pixels variant, despite many better optiobugs.webkit.org/show_bug.cgi?iā¦
@bramus So sorry for your loss! I can’t imagine what you are all going through. Wishing your family and you lots of strength! Hugs!
@HenrikJoreteg @quicksave2k @reillyeon No worries, we’ve all been there. Glad it works now.
I was doubting my intelligence when my driver for the Joy Cons worked fine on macOS, but not at all on Windows. Turns out the two OSes send different init signa
@AnaestheticsApp This didn’t launch in 98, the launch info was wrong. Just opened github.com/GoogleChrome/wā¦ that removes this.
@LinkofHyrule89 Click on each feature for an explanation, for example, “image cache”: “Caching of images in web browsers is a standard behavior. But if that cache leaks between websites, it can be abused for cross-site tracking”.
#TIL about privacytests.org, an open-source (github.com/arthuredelsteiā¦) testing program that measures browser privacy characteristics. twitter.com/ericlaw/statusā¦
@joeld @zachleat Ah, I see. I think it’s the video embeds. Could you add the details of your browser to github.com/GoogleChrome/wā¦ that I’ve just created?
@joeld @zachleat Do you mean the conversion to SVG is slow, or do you mean the actual loading? The prior is a known problem with Safari, since it doesn’t support some of the new canvas 2D APIs that make it fast on Chrome. If the latter, this would be negithub.com/tomayac/SVGcodā¦
@jeffposnick @justinfagnani Same. The family plan is nice. I also like the PWA. The only downside is that for some reason it’s rated 17+ on the App Store and 16+ on the Play Store, which means the kids on their Google Family accounts can’t use the nat
github Need to quickly generate diagrams for your READMEs or PR comments? You might like (or love) @steveruizok’s tiny little drawing app! github.com/tldraw/tldraw pic.twitter.com/3q4oigK7Rt
zachleat Raster to SVG image conversion? Fascinating.
Read more from @tomayac: web.dev/svgcode/ twitter.com/tomayac/statusā¦
This app, SVGco.de, uses a shiny underground framework called vanilla.js š¦. Looking at the @____lighthouse score, it was worth spending the last ~20 years of my career studying it. Still not done, still learning new things every day.
pagespeed.web.dev/report?url=httā¦pic.twitter.com/ZA0xpIIoLK
SVGcode (svgco.de) has learned a new trick: it can now rotate ā©ļø your input images. pic.twitter.com/6pOczMLNzf
simonhearne I was reminded in a recent engagement of how tricky caching headers can be, so here’s an opinionated post on configuring cache headers for optimal #WebPerf and #UX!
simonhearne.com/2022/caching-hā¦
@simevidas Ah, marked as WontFix in 2019: crbug.com/860557.
@simevidas Just came across this. It doesn’t seem to work anymore. While it creates a file on the desktop, this file is a zero bytes long file.
@BarryNorton @quicksave2k Just dropping this here..mattw.io/bad-ui/RS
quicksave2k Finally!
Chrome 99 will ship with the HTMLInputElement showPicker() method, a canonical way to show a browser picker not only for dates, but also time, color, and files.
š developer.chrome.com/blog/show-pickā¦
š² show-picker.glitch.me/demo.html pic.twitter.com/EpIJsrgv4n
š¢ macOS 12.3 beta (build 21E5196i) activates Universal Control. It’s amazing how seamless it works with iPadOS 15.4 beta (build 19E5209h)!
twitter.com/viticci/statusā¦
@stefanjudis Just dropping this here: careers.google.com/jobs/results/?ā¦.
@ManuelBieh I don’t know the answer. It didn’t directly come up in the Issues: github.com/tc39/proposal-ā¦.
@kennethrohde @amarkeev Two would mean the parsing would be ambiguous, since “ is the empty string: github.com/tc39/proposal-ā¦.
@bramus @MarcoInEnglish @LeonieWatson Wait, are you talking about the property `HTMLElement.inert` (developer.mozilla.org/en-US/docs/Webā¦) becoming settable somehow via CSS? Do you have a link to a discussion around this?
@kristoferbaxter Wow, this comes unexpected. But all the best for whatever comes next! šI’m sure it’ll be great!
chriscoyier Did you know there is movement on a new native <select> element (for now, called <selectmenu>) that is *entirely* styleable in CSS just like you would want it to be?
(WELL THERE IS.)
@davatron5000 showed me for @ShopTalkShow video.
shoptalkshow.com/video/an-html-ā¦ pic.twitter.com/Mvetx2hsiT
@bramus @MarcoInEnglish Sorry, meant to mention @LeonieWatson, not @ātink.
@bramus For a screen reader, is CSS’ `pointer-events: none` semantically the same as HTML’s `select[disabled]`? It seems perfect for sighted people, but we need to make sure it works for everyone. I don’t know the answer. Do you? Or @MarcoInEnglish @tink
@reillyeon Duty calls. xkcd.com/386/
@KartikSoneji_ @harshgkapadia @cramforce Same for JS (e.g., npmjs.com/package/dedent), but it’s so much nicer if stuff like this is supported at the language level.
Language-level string dedenting proposal for JS: github.com/tc39/proposal-ā¦.
“`js
class Foo {
print() {
console.log(“`
Look ma, no leading spaces!
“`)
}
}
“`
This will output the template with margins stripped:
“`
Look ma, no leadin
@EricR57959850 Thanks for clarifying. I have tested the various scenarios, and believe me, it’s all taken care of, but it simply takes time to roll this out gradually to all the different variants of what a Google search can end up in (image, maps, shoppi
RonAmadeo Google has a survey out for Legacy G Suite users facing the free account shut down.
If you have 10 or fewer people on your custom domain account, Google is hinting at there maybe being “more options” available in the coming months.
docs.google.com/forms/d/e/1FAIā¦
@othermaciej @hober I ran it through the OCR feature that’s built into Safari and it (and I) think it says: (/me pastes) “No”. š pic.twitter.com/RIbuM4sTaC
Clarification: If you’re still on macOS Catalina or Big Sur, it’s a Safari-only update (not a full OS update as on iOS, iPadOS, and macOS Monterey): support.apple.com/en-us/HT201222ā¦.
(via twitter.com/othermaciej/stā¦)
@tropicadri And I think it’s safe to say that the team likes you āŗļø! I do for sure!
š¢ Update all Apple operating systems now so your browser doesn’t leak data anymore: “Apple released iOS and iPadOS 15.3 and macOS Monterey 12.2 software updates that fix [the Safari 15 IndexedDB leaks] vulnerability (CVE-2022-22594).”-safarileaks.comtwitter.com/brucel/status/ā¦
dontcallmeDOM One week to go to submit papers to #TheWebConf Developers & @w3c track! twitter.com/TheWebConf/staā¦
The baseline for web development in 2022. Some great observations and maybe hard to swallow for some folks truths by ā¦@AlanGDavalosā©. engineering.linecorp.com/en/blog/the-baā¦
@mtomweb @dannymoerkerke Web browsers on desktop typically just basically maintain a running connection to a server that then triggers the showing of a message. E.g., Firefox: wiki.mozilla.org/Firefox/Push_Nā¦.
@dannymoerkerke (Clarified offline: On desktop, notifications only come through when the browser is running. This is different from Android.)
othermaciej Apple’s WebKit team many openings. I’ll highlight a position every couple of days.
WebKit Web Compatibility Engineer
Generalist with C/C++ exp. to build Web Platform features and improve quality in all areas, from DOM to CSS.
Apply at link below or DM.
jobs.apple.com/en-us/details/ā¦ pic.twitter.com/IDUNNw6QfW
@dannymoerkerke AFAICT launching a PWA always launched Chrome, but there’s a desire to uncouple them. Notifications should always come through. Can you file a new.crbug.com and include the URL of the PWA where this happens (and allow Chrome no
@voxpelli Strange how they group summer time zones with regular time zones. I mean it’s true, but only half of the year.
zachleat New blog post:
Trailing Slashes on URLs: Contentious or Settled?
zachleat.com/web/trailing-sā¦
Challenging my own assumptions about whether or not to use the (apparently unpopular) trailing slash.
Google announced the new Topics API yesterday, which shall enable interest-based ads in a post third-party cookies šŖ world:
Announcement: blog.google/products/chromā¦
Developer docs: developer.chrome.com/docs/privacy-sā¦
Spec repo: github.com/jkarlin/topics
(via @adsliaisontwitter.com/adsliaison/staā¦
Good take on the new Googlebot meta tag content attribute value “indexifembedded” (developers.google.com/search/blog/20ā¦) in the quoted tweet ā¤µļø.
“`html
<meta name=”googlebot” content=”indexifembedded” />
“` twitter.com/SEOMalc/statusā¦
@edent @simevidas “To include a reference to the source of quoted material which is contained within a <blockquote> or <q> element, use the cite attribute on the element.”-developer.mozilla.org/en-US/docs/Webā¦w.
See the example at the top how to combine `<blockqu
@simevidas Oh, thanks, I’ll fix this.
I got curious why browsers don’t seemingly do anything useful with `<blockquote cite>`. It’s got to be a valid URL and all, but no browser I know displays it or lets users click it. [citation not needed]? š Here’s the spec: html.spec.whatwg.org/multipage/grouā¦twitter.com/tomayac/statusā¦
@simevidas I went to the spec to see what UAs are supposed to do with `cite`: “User agents may allow users to follow such citation links, but they are primarily intended for private use (e.g., by server-side scripts collecting statistics about a site’s
@bertails Congratulations on the new gig! š
Some insights into how `:focus-visible` came to @webkit through Igalia from @meyerweb, who works for Igalia, but who wasn’t involved in Open Prioritization or in the `:focus-visible` project. ā¤µļø twitter.com/meyerweb/statuā¦
@DasSurma I wish more companies’ interviews were like this. In my opinion, roasting a candidate 60min in which you “test” role-related knowledge, coding, potentially cultural fit, and leave time for candidate questions—and this 5–6 times in a ro
5t3ph āØ An Introduction to CSS Cascade Layers
Learn about this incoming method to orchestrate the “C” in CSS!
Layers are now an official candidate recommendation, and available for experimentation in evergreen preview releases.
smashingmagazine.com/2022/01/introdā¦
Giving Web Standards a Seat at the Table: great article on how standardization became important to the IE team. Thanks, ā¦@mholzschlagā©, and thanks, ā¦@cwilso,ā© I guess! š thehistoryoftheweb.com/web-standards-ā¦
@kennethrohde Try now (the service worker reloads the app if there’s an update). It’s the user agent stylesheet. To be honest, not sure it necessarily looks much nicer, but it saves a few pixels…
Quick SVGcode update: the dreaded pinch-zoom issue has finally been resolved and you can now zoom š and pan āļø around freely _and_ intuitively. Thanks, @jaffathecake, for the `<pinch-zoom>` element and the help making it work with SVGs ā¤µļø. Try svgco.detwitter.com/jaffathecake/sā¦
@RReverser @jeffposnick Nervously following the situation from here, too. Hoping diplomacy will eventually solve this situation somewhat at least and prevent the worst from happening!
amilajack Server side render everything
amazon.com is server side rendered and has no client side rendering framework. The potential latency hit didn’t justify it.
We were stuck with jQuery 1.6.4 š¬
SSR React wasn’t fast enough for us. This blew my mind.
“@samsunginternet is also committed to bringing modern capabilities, therefore following topics like adding the Device Posture API as a standard, Web Authentication with NFC, and collaborating with Project Fugu will be on our agenda for 2022.”
Ace to twitter.com/samsunginterneā¦
@adamdbradley @WestbrookJ Oh the sweet temptation of `innerHTML()`…
`s/or/and` ā¤µļø twitter.com/HenrikJoreteg/ā¦
marcel_wiessler IT IS LIVE EVERYONE š±
our first public multi-user webxr app š„
go build castles nowš°
on castle.needle.tools āļø
made in @unity š§
rendered in @threejs ā¶ļø
networked on @glitch šŖ
by @NeedleTools @hybridherbst and š
#madewithunity #screenshotsaturday #webxr #webgl pic.twitter.com/nC50CIVxbq
@youyuxi @slightlylate Just noticed an interesting issue: the `#potential-required-actions` ID on `/` leads to nowhere, since it only makes sense in the context of `/posts/vue-3-as-the-new-default.html`. This should be detectable at build and serving timepic.twitter.com/kpXFt8BxHG
samthor Minor improvements to airnote.to this morning, my ephemeral Markdown editor. Share button and some internal cleanups.
Give it a go next time you need to collaborate for 5 minutes with others!
airnote.to etc
āļøāļø
@benmorss Brilliant, congratulations again! š”
HTTPArchive The Web Share API enables websites to share content with other apps.
In the Capabilities chapter of the 2021 Web Almanac, @christianliebel found it on 9% of sites, making it the most popular Fugu API.
š Read more about other emerging capabilities
almanac.httparchive.org/en/2021/capabiā¦ pic.twitter.com/20V7htdRpR
@DasSurma @jaffathecake @Una Yes, but I was suggesting we discuss moving _off_ the present permissive license. And yes, we all agree, it’s immoral and not cool to take someone else’s content and pass it as yours.
@jaffathecake @Una We may want to consider changing the license then; I’ll start a thread. CC BY 4.0 explicitly says commercial reuse is fine: creativecommons.org/licenses/by/4.ā¦. (Didn’t look at our video license, just speaking of our articles.)
@kennethrohde @justinfagnani The manifest exists at calculator.apps.chrome/manifest.json, but the app fetches it with “use-credentials”, so it 404s:
“`html
<link rel=”manifest” href=”/manifest.json” crossorigin=”use-credentials”>
“`
Sent feedback about this issue.
@justinfagnani @kennethrohde Great, I let you do the bug reporting then. I haven’t looked into this and was not aware of this app.
@m_yxnk @argyleink @bramus @tabatkins My goal was to make it work without JavaScript support, but if this isn’t a requirement, it can even be shorter indeed. The no-JS version of course doesn’t have a way to memorize the theme.
@agektmr Yes, same here.
@agektmr I don’t understand the tweet’s text, but by looking at the image I understand it anyway. Been there yesterday!
@bramus Oh no š. Wishing everyone a speedy recovery! It hit our family, too, so I very much feel you.
If you want to understand what this OpenSea-Twitter stuff is all about: support.opensea.io/hc/en-us/articā¦. Example: twitter.com/gidwellsoon/nft. Can we just stop? š
@mischmerz Let’s ask @thebodycoach. I had to skip my daily workout today. I missed it. :-/
Safari Technology Preview 138 adds `:focus-visible` (developer.mozilla.org/en-US/docs/Webā¦) and service worker navigation preload (developer.mozilla.org/en-US/docs/Webā¦). š twitter.com/webkit/status/ā¦
@argyleink @bramus @tabatkins I have put a lot of thought into my loading strategy: web.dev/prefers-color-ā¦. It’s overkill for small pages, but pays off if you have more complex theme CSS.
@Una Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License [.]
Copying 1:1 is fine(!), but what’s missing is indeed the attribution part. This is a clear violation of the license: creativecommons.org/licenses/by/4.ā¦
@davrous @diekus If you do, we could add your experiences to web.dev/pwas-on-oculusā¦ and widen the article’s scope, or maybe consider writing an article on its own?!
RReverser š” Just published: “Porting USB applications to the web. Part 1: libusb” (or how I ported libusb to WebAssembly + WebUSB) web.dev/porting-libusbā¦
š· In the demo I compiled it together with libgphoto2 so that you can mirror and control DSLR cameras over USB from a web app!
@wesbos @gingerchris It works because I know what’s coming out of Potrace, the library my app svgco.de uses internally to get the job done. I still kinda feel dirty for doing it. Might investigate this library. Thanks for the pointer!
patrickbrosset Super excited for the Custom Highlight API to come soon!
Spec ā”ļø w3.org/TR/css-highligā¦
This will enable many libraries and apps to do find-on-page, spellchecking and other such use cases faster and much easier. pic.twitter.com/edvcaIj5Sm
@wesbos @gingerchris What’s wrong with string replacement and RegExp? github.com/tomayac/SVGcodā¦ (/me ducks and covers.)
Personal family update (in order of detected infection):
š§ (09yo) š(BioNTech) š¦
š§ (12yo) ššš(BioNTech) š¦
šØāš¦² (40yo) ššš(AstraZeneca, BioNTech) š¦
š§ (14yo) ššš(BioNTech)
š© (39yo) ššš(Astra
@tropicadri Ā”Feliz cumpleaƱos! š Enjoy the day! š“
@othermaciej @chrmod @jonathandavis Updating an existing extension should be as easy as uploading a .zip file. Having to go through the process each time’s annoying. On top—acknowledging that this may be just me—the App Store Connect step plagues metwitter.com/tomayac/statusā¦
š” I didn’t know Microsoft had a “What’s new in Progressive Web Apps” updates page, but thanks to this @MSEdgeDev recap post by @patrickbrosset in the quoted tweet ā¤µļø I know now: docs.microsoft.com/en-us/microsofā¦. twitter.com/diekus/status/ā¦
@argyleink One of the biggest challenges I found is what the button should show: the state you enter when you click it or the state it’s currently in. That’s why I added two modes to my element: switch and toggle, so people can choose their preferred
argyleink š GUI Challenge:
Thoughts on a Theme Switch component
ā
custom prop driven
ā
CSS & SVG mask animated
ā
accessible
ā
locally stored setting
ā
and more!
watch youtube.com/watch?v=kZiS1Qā¦
read web.dev/building-a-theā¦
try gui-challenges.web.app/theme-switch/dā¦
grab src github.com/argyleink/gui-ā¦ pic.twitter.com/dJln6io7e6
@argyleink That’s lovely! A little whimsy on a page goes a long way. Can’t stop staring at this!
@argyleink Here’s my custom element: github.com/GoogleChromeLaā¦.
b1tr0t Awesome advanced web graphics tutorials from @fserb at canvas.rocks Love the reimplementation of the original Substrate demo! pic.twitter.com/YHuxqbhcyk
jeffposnick š Preview the new @workboxjs docs! š
It’s a walkthrough of everything you need to know before deploying to production, from the foundations of the service worker API and lifecycle, to matching the right Workbox tools to your specific web architecture.
developer.chrome.com/docs/workbox/
@rezmason @Paul_Kinlan @kainino0x Thanks for the reply, so it basically works as I was expecting it to work. You framed it better, though. š
@kairollmann @petele Thanks for the kind words! āŗļø Thanks for building on the Web!
@TheRealNooshu Happy to hear some great news from you!
@Paul_Kinlan @rezmason @kainino0x The 8K (lookingglassfactory.com/8k) seems cool. Looking at rezmason.github.io/matrix/?versioā¦ on a regular screen, it seems like you just program in “lines”, so each pixel has several multidimensional representations that the softw
anildash There’s a wonderful nod to @tomayac’s clever @glitch app “Wikipedia Around” in @SamSifton’s latest piece. Very cool! nytimes.com/2022/01/19/dinā¦
@anildash @jeffposnick @gregleaver Happy to try help untangle the info maze. Can you describe some use cases you’re hoping to solve? (The entire space is admittedly a bit confusing at the moment, since we are figuring out what even is the right set of a
intenttoship Blink: Intent to Prototype: CSS Subgrid groups.google.com/a/chromium.orgā¦
Vite plugin PWA, the subject of the article linked in the quoted yweet ā¤µļø, is what I use in production in svgco.de. It works great for my use case, as documented here: web.dev/svgcode/#progrā¦. twitter.com/css/status/148ā¦
@MarcoInEnglish Take some good rest and the time you need to recover! Thanks for all the things you have done while at Mozilla.
@stuartpb @samuelgoto Yeah, +1. If you really want to, you can replace the `<a download>` step with a call to `showSaveFilePicker()`. Pssst š¤«, I have a library that does the latter, falling back to the former, for you: github.com/GoogleChromeLaā¦.
@quicksave2k @sangwhanmoon @simevidas Had a go at reviewing the explainer (github.com/steimelchrome/ā¦). Was initially thrown off by the API design, but the placeholders discussion made a lot of sense. I’m excited for this. Can’t wait for the DHTML remoteflylib.com/books/en/3.292ā¦
@heyawhite @rachelandrew Yeah, I’d be curious to see some of them. You mean physical paper posters? I recall from a visit there that Facebook had a printshop on site for employees to print (motivational?) posters.
rikschennink You can now edit your photos at edit.photo š
šŖ no cookies to accept
š¤¹āāļø no popups to close
š¤ no account to create
šÆ no ads to ignore
šµļøāāļø no spying on you
āØ 100% free
Paste, browse, or drop your photo and start editing.
addyosmani @ken_wheeler @jlongster I’d say convert your raster pencil drawing => SVG (few tools can do this including svgco.de) then use svgator.com for the animation. Closest thing to the Flash animation stage I’ve found for SVG.
Demo: twitter.com/addyosmani/staā¦
@EricR57959850 That’s macOS’ optional permanently shown scrollbar, yes.
@sangwhanmoon @simevidas @quicksave2k might know.
@tropicadri That sucks. š Not sure if it helps, but I get comments about my accent on my YouTube videos, too, and it’s making me feel equally down. We both know you rock! š¤
@simevidas Also see chromestatus.com/feature/484460ā¦ where this has been proposed before.
@EricR57959850 OK, turns out as many things that’s a staged roll-out. The dark scrollbars are already implemented and using my corporate Google account it’s visible (see screenshot), but using my regular account it wasn’t visible yet. So stay tuned, it wipic.twitter.com/do6g6NmPzE
@EricR57959850 Thanks for the report. I see what I can do.
@cos_theta @miketaylr It’s bugs.webkit.org/show_bug.cgi?iā¦ (from the blog post), but it’s not visible to mere mortals like me. Given the blog post is out now, the security embargo might be lifted, but maybe there’s more, which they didn’t cover. Also not
@jlongster The Memento protocol (w3.org/blog/2016/08/mā¦, mementoweb.org/guide/quick-inā¦) is very interesting in this context; it’s implemented by the @internetarchive.
@jlongster The thing is: these links are not provided by the author, but by users. The author is not in control. With the current Web architecture, if you need absolute link stability, you probably need to archive the page on the @internetarchive or so an
@jlongster @addyosmani @rauchg See my response here: twitter.com/tomayac/statusā¦.
addyosmani @rauchg It’s so nice! Some cool related experiments around “link to media” twitter.com/tomayac/statusā¦
@giuseppegurgone It’s actually a little less likely to break for media than for text, since the selector is based on attributes on (children of) `video`, `img`, and `audio`. Unless, of course, the media per se is removed or changed. Time will tell…
@stanzillaz The link is hidden at the end of the video: github.com/tomayac/link-tā¦. It’s still early days, so you need to side-load the extension. Once the code matures, it will be properly released on the Chrome Web Store.
@feross @noor_siddiqui_ Congratulations, this got to be the most documented proposals (plural!) ever. <3
@cos_theta @johnwilander All this isn’t new. This is a newspaper article about Auschwitz with an ad from Eon, an energy company, which says they’re taking care already today of the gas of tomorrow. More coverage: google.com/search?q=Landeā¦.
Exploiting IndexedDB API information leaks in Safari 15. Just played with the demo (safarileaks.com) and the leak still reproduces on iOS 15.3 (19D5040e). It was reported to the WebKit Bug Tracker on Nov 28, ’21 as bug 233548. Hoping for a fix! fingerprintjs.com/blog/indexeddbā¦
@johnwilander <troll>This is because Safari took all the personalization possibilities away for ads with ITP, so all that remains for targeting is page context.</troll> (I’m obviously not being serious.)
Una CSS Cascade layers are coming to Chromium 99 (currently in Canary) & Firefox 97 (currently in Nightly)
So what are they & how do you use them? š
I made a quick video to show you:
youtu.be/ilrPpSQJb3U pic.twitter.com/vENwrV9q3q
@TheRealNooshu Thinking of you! Hang in there, Matt!
andreasbovens This is the kind of statement I’d like to see from @mozilla as well. twitter.com/vivaldibrowserā¦
@ddprrt I just endorsed you for SOAP Web services.
yoavweiss Rediscovered @xharaken’s bit.ly/how-blink-works the other day, and it’s just an *amazing* resource for high-level understanding of the Blink rendering engine and its internal concepts
@jasonmcneill No, name is a generic field as defined in w3c.github.io/contact-api/spā¦. The structure of names is not universally the same, e.g., not all cultures have a notion of first name/last name, so the spec just uses one field for all.
@tmcw @pfrazee @odbol @RReverser Quick update here: It’s not a bug, just a gotcha. The great @jaffathecake has summarized the situation in his bug comments: crbug.com/1287459#c1. (I have updated the documentation fix PR accordingly: github.com/GoogleChrome/wā¦
@tmcw @pfrazee @odbol @RReverser As promised looked into this. I’ve created a reduced reproduction case (heady-flame-editor.glitch.me) that I’ve also linked in a Chromium bug (bugs.chromium.org/p/chromium/issā¦)—where I’m not sure if it’s a bug indeed or just unintuitigithub.com/GoogleChrome/wā¦
@tmcw @pfrazee @odbol Wow, good find. That’s surprising behavior (to me at least) that you unearthed there. I’ll have a very close look tomorrow. I’d give this bug a solid 10/10 to be honest. (Thanks, @RReverser, for looping me in.)
@HenrikJoreteg @quicksave2k I personally haven’t, sorry, but @reillyeon is the expert and can probably help you out. Meanwhile, if you can create a quick new.crbug.com with a link to a minimal reproduction case, this would definitely help Reil
ā Go to w3schools.com/html/html5_vidā¦ (bare with me, it’s just a page with two videos).
ā” Paste the code below into the @ChromeDevTools Console.
“`js
await import(‘unpkg.com/link-to-media’)
.then(module => console.log(module.createLink(document.querySelepic.twitter.com/zM6s0faHkS
@antonioberetini @ChromiumDev CC: @diekus for this feedback.
@sephr I’ll spend some time on it today and tomorrow, but definitely happy for you to see what you can contribute and improve on the weekend.
@sephr The polyfill bits are here: github.com/tomayac/link-tā¦. It’s early days of course and this was built during a hackathon, but we have plans to improve this.
@sephr Yes, the extension code and the polyfill it uses will be released separately.
@ckundo @WestbrookJ Linking based on the `alt` attribute is definitely on our list. For now we purely finished an MVP implementation for the scope of the hackathon.
Here’s a preview of what my team came up with during a team-wide hackathon: Link to Media šš¼, a Chrome extension allowing for linking to arbitrary images, videos, audios: youtu.be/g90bqxdpwLw. It’s based on a new fragment directive syntax progithub.com/WICG/scroll-toā¦
Unpacking the Workbox is a great YouTube series by @tropicadri and @jeffposnick that teaches you @workboxjs from zero to hero š¦øāāļø, since writing service worker code from scratch isn’t everyone’s favorite. Hint: insiders.vscode.dev uses i@codetwitter.com/jeffposnick/stā¦
devongovett š¢ Announcing Parcel CSS: A CSS parser, compiler, and minifier written in Rust!
ā”ļø Extremely fast
šļø Small output
š¢ Vendor prefixing
šŖ Syntax lowering
š± CSS modules
š¦ Use with Parcel, or standalone in JS or Rust!
GitHub: github.com/parcel-bundlerā¦
Blog: parceljs.org/blog/parcel-csā¦ pic.twitter.com/z05FnHFPCA
diekus š„Visual Studio @code Insiders is a #PWAš„ insiders.vscode.dev. Here you see VS Code *installed* and running *offline* on my android phone. Boom. š¤Æ pic.twitter.com/hU4ZN3viHC
2ality Publishing and consuming ECMAScript modules via packages – the big pictur2ality.com/2022/01/esm-spā¦Hv
@bramus @mgechev @pedrasmachado Oh, sorry. I read Twitter in Echofon, which doesn’t support threads.
@bramus@mgechev@pedrasmachadodeveloper.chrome.com/blog/colrv1-foā¦developer.mozilla.org/en-US/docs/Webā¦
@robflaherty Thanks š. The prompt is covered in web.dev/pwas-on-oculusā¦: “Currently the `BeforeInstallPrompt` event will not fire in Oculus Browser, despite feature detection reporting it to be supported.”
“HTML vs ARIA booleans: [F]or HTML boolean attributes, it’s all about presence and absence, while in ARIA boolean attributes, the boolean state is expressed via “true” and “false” string values and there are a bunch of attributes that take those strintwitter.com/hdv/status/148ā¦
@insequential @samthor Giving the input a minimum font size of 16px is the usual fix.
agektmr On Chrome, websites will be unable to set `document.domain`. It’s a known technique to allow same-site-but-cross-origin comm, but is also problematic.
// Chrome will disable modifying `document.domain` to relax the same-origin policy
developer.chrome.com/blog/immutableā¦ #security
jacobrossi Great article from @tomayac on building and testing PWAs for Oculus Quest!
web.dev/pwas-on-oculusā¦
@jacobrossi Thanks, means a lot coming from you! š
@samthor @hashseed Leaving Google to work on a messaging app? But, but, no one has ever been fired for working on a messenger app at Google. š
š This change (quoted tweet ā¤µļø) adds a `ServiceWorkerRegistration.id` attribute that can be used to uniquely identify registrations w/ mutable scope. Previously, if you wanted to change the scope, you’d have to re-register the SW which could lose stattwitter.com/intenttoship/sā¦
@slightlylate To be fair, we’ve seen rip-offs of PWAs on the Play Store. Here’s Proxx (play.google.com/store/apps/detā¦), which is actually Proxx (proxx.app). Proxx is licensed in a way that permits this. Not sure about Wordle; there’s no licen
@slightlylate š¤¦ Where is the emoji reaction to this?
@jaffathecake @AndreJaenisch @hdjirdeh Thinking about it, I recall my `div` in the quoted tweet and replace it with, probably, `section`. HTML is not easy. twitter.com/tomayac/statusā¦
@jaffathecake @hdjirdeh Right. Depends on the kind of dashboard of course, but when I think “dashboard” I think of repeated panels, each (simplified) consisting of:
div (container)
h2 (panel heading)
p (panel description)
svg (chart)
But all w
The Optional Chaining Operator, “Modern” Browsers, and My Mom: ā¦@jimnielsā© tells a story of evergreen browsers on non-evergreen devices, that is, out-of-support-life iPhones, iPads, or Chromebooks. blog.jim-nielsen.com/2022/a-web-forā¦
@diekus @AnaestheticsApp I noticed the chevron doesn’t need to be clicked if you install from the Microsoft Store. Try it: microsoft.com/en-us/p/svgcodā¦. At least it was the case on my Insider Preview version of Windows. @diekus to confirm it’s generally th
samthor An experiment: ephemeral collab text editor with no server. If you leave, a peer takes over. If everyone leaves… š„
etyper-server.web.app
@ericlaw @CharlieCroom may be able to relay this feedback.
@hdjirdeh š¤ Interesting take: “You don’t want to have to remove annoying margins every time you use a `p` element in a piece of your dashboard UI”. Isn’t this one of the legitimate cases for using a `div` that doesn’t have styling? To be fair,
@SRobTweets This tweet is meta on so many levels. Love it!
@KevinPicchi @ProductHunt Upvoted. Such a great idea š!
@TheRealNooshu All the best for the treatment to be successful in yours and a whole lot of others’ cases! Fsck cancer! Wishing you strength! <3
@theSdev Yes, the fun fact here is that this uses a different (user land) implementation: github.com/GoogleChromeLaā¦ (you’re probably using the extension github.com/GoogleChromeLaā¦ on Firefox). The polyfill is also injected into Chrome for iOS by the way.
If you care for this kind of issue: star crbug.com/1176001 to be informed of progress.
#TIL that “Find in Page” doesn’t find words with a `::first-letter` styling (developer.mozilla.org/en-US/docs/Webā¦). This also means that text fragments links (internally based on this) don’t work:
ā Linking to “šorem”: yari-demos.prod.mdn.mozit.cloud/en-US/docs/Webā¦
ā
Linking to “ipyari-demos.prod.mdn.mozit.cloud/en-US/docs/Webā¦pic.twitter.com/4H3ivYG6Y3
chriscoyier I wrote “Why would a business push a native app over a website?” css-tricks.com/why-would-a-buā¦
And then it turned into this podcast with deeper detail. š§” twitter.com/tomayac/statusā¦
@dfabu @chriscoyier @davatron5000 @ShopTalkShow I think the point here was going from logged-in in the tab experience to installed experience, which means you have to log in again. I was a bit nervous, though, so might have missed a nuance.
I, erm, was a guest on @chriscoyier’s and @davatron5000’s podcast @ShopTalkShow to rant about Project Fugu š”. There’re some content nuggets between the “erm”s, I promise! ā¤µļø twitter.com/ShopTalkShow/sā¦
@AnaestheticsApp I asked the same question in the Intent to Ship. @diekus’ answer in groups.google.com/a/chromium.orgā¦ was “[Window Controls Overlay] is enabled by the end user. The user must enable the feature by toggling the chevron on the controls overlay. This
@PaulCozma1 It’s working on Chrome OS already, check the demo in the article web.dev/launch-handler/. Other desktop OS support coming.
@schweinepriestr There is a spec draft: wicg.github.io/window-controlā¦. I have a PR open that updates the article accordingly: github.com/GoogleChrome/wā¦.
Chrome 98 enables Window Controls Overlay (web.dev/window-controlā¦) by default, and I really love this feature! twitter.com/ChromiumDev/stā¦
@jaffathecake @simevidas š¤© Oh, nice. Thank you very much for the support! Clever idea with the proxy! I’ll incorporate this into SVGcode soon. Thanks again for the element and helping me use it. So much pain gone!
@jaffathecake @simevidas I’m not sure it’s a bug, it’s _way_ more likely me holding it wrong. Here’s a repro: ā¦aired-sumptuous-paranthodon.glitch.me. See the drift when zooming? It zooms via the <g>, and overrides your —x, —y, —scale, as this would pixel-zoom, not vespiny-ember-authorization.glitch.me
@jaffathecake @simevidas Switched to this for SVGcode. I’m still somehow holding it wrong, since it drifts sideways: github.com/tomayac/SVGcodā¦. I tried fiddling with the transform origin, but it didn’t work. I’m zooming via nested <svg> where the zoomgithub.com/tomayac/SVGcodā¦
aemkei THE #MATRIX
An animated quine in only 187 bytes of HTML+JS:
<body onload=’setInterval(f=_=>{for(t++,o=i=0,w=35;i<384;o+=i++%+w?(f+f+f)[i].fontcolor(g==9?”#FFF”:[0,g,0]):”\n”)g=0|(i/w-t/((i%w)**5%w+3)+w*t)%w;p.innerHTML=o},t=9)’bgcolor=X><pre id=p>
aem1k.com/matrix/quine/
š pic.twitter.com/Qg7T1uLAXe
@edent My own. š scholar.google.com/scholar?hl=en&ā¦
@MarcoInEnglish Get better soon, and good to hear you at least can make the best of it by podcasting!
@danbri It perfectly could, but for now there is no way to promote an in-browser experience (2D PWA or full 3D WebXR app) to become installable. App Lab is the lowest friction way. See web.dev/pwas-on-oculusā¦ and web.dev/pwas-on-oculusā¦.
tomayac I had a ton of fun with PWAs on Oculus Quest 2. Read my article to learn more about my journey… ā¤µtwitter.com/ChromiumDev/stā¦jV
@danbri There’s the New Tab page, which might include PWAs (but so far only features WebXR stuff). The Oculus Store eventually could contain a section of PWAs (unlikely using the branding, though) and the App Lab (sidequestvr.com/apps/applab, all games at the
I had a ton of fun with PWAs on Oculus Quest 2. Read my article to learn more about my journey… ā¤µtwitter.com/ChromiumDev/stā¦jV
Of course managed to mess up the link: the tool can be found at brid.gy.
@stefanjudis @simevidas @MozDevNet Forgot to paste the link I had on the clipboard: developer.samsung.com/internet/releaā¦.