andrey_l1nd3n 2 months since Web Dev Live is plenty to let key insights sink in. Take a look at Day 2 outcomes linkedin.com/pulse/webdevli… & go for it - experiment, fail forward & win with the Web! The entire Web community will be here to help answer questions and celebrate your work.
🌐💙🧰
@MartinSchierle @html5test @Vincent_Scheib @reillyeon Never mind the brand question (I meant “model” actually, not “brand”, it’s late here)… This seems to be itamazon.com/-/en/dp/B07K2D…fy.
@MartinSchierle That’s super cool! I wonder if @html5test and @Vincent_Scheib and @reillyeon have seen this? Also, what Dart board brand is this? 🎯
sulco #HTML/#JavaScript tip for today:
Checkboxes, radio inputs, and progress elements have an `indeterminate` state - just set the property with JavaScript. pic.twitter.com/QAN5B1REOz
ChromiumDev 🔊 Web Audio API users (developer.mozilla.org/en-US/docs/Web…): We want to hear 👂 your ideas about the future of the API!
Help us by filling out this brief survey: docs.google.com/forms/d/e/1FAI… ✅ Thanks!
@simevidas @robinrendle @FirefoxDevTools `html { overflow-x: hidden; }` then. Maybe @ChromeDevTools has an idea why this happens? Or @jensimmons from team @webkit why this happens in Safari?
@simevidas @robinrendle Adding `html { overflow: hidden; }` fixes the issue. @FirefoxDevTools ’ scroll container chip to the rescue..pic.twitter.com/JT4fXcUXrlrl
Top case study (web.dev/goibibo/#tools) of India’s ✈️ @goibibo PWA (goibibo.com).
List of leveraged Project Fugu 🐡 APIs:
- Contact Picker: web.dev/contact-picker/
- Web OTP: web.dev/web-otp/
- Web Share: web.dev/web-share/
developers.google.com/web/fundamenta…
paulcalvano If you are interested in digging into the data, I also wrote an HTTP Archive discussion forum post with all the queries and data here - discuss.httparchive.org/t/growth-of-th…
_developit 🦄 SSR for web components! 🦄
Declarative Shadow DOM is a proposed web platform feature that brings Shadow DOM to HTML.
Try it in Chrome (experimental flag) or via a polyfill:
👀 web.dev/declarative-sh… pic.twitter.com/IE2cS8AuLy
@miketaylr @googlechrome Congratulations and welcome to Google!
techdows Google integrates Link to Text Fragment into Chrome by @techvenkat techdows.com/2020/09/copy-l…
The Flavors of Object-Oriented Programming (in JavaScript): css-tricks.com/the-flavors-of…. A really in-depth post that discusses the various options for OOP and their pros and cons.
Messaging systems and why SMS refuses to die: xkcd.com/2365/ To-the-point #xkcd.
@apassant All the best, Alex! Fingers crossed 🤞, or as the German saying goes: thumbs pressed!
LeonieWatson 📢 How screen readers navigate data tables (+video demonstration) tink.uk/how-screen-rea…
@jaffathecake @hashseed @RReverser @mrdoob Are you talking about web.dev/storage-for-th…? FWIW, in the context of the original post, I was purely focusing on service worker installations. Or were you referring to both?
@jaffathecake @hashseed @RReverser @mrdoob Absolutely on-board with this not being desirable in the general case. I just always wondered if at one point we’d be forced to house-keep service worker installations.
@sulco As the author of the custom element watching you code this was fun. Apparently I got something right! 😊
If you grant me the usage rights, I’d love to add the video to the official README (with attribution of course). If you can imagine this,
sulco Just tried the `<dark-mode-toggle>` custom element and dang, implementing a dark/light theme has never been easier.
1⃣ - add a script tag
2⃣ - and the element to the page
3⃣ - create the dark stylesheet
I mean… that’s it 😲 pic.twitter.com/RB8sJudNvE
@hashseed @jaffathecake @RReverser @mrdoob DevTools on top of things—as always! 👏
Was wondering if at one point we’d need to adopt@webkitt’s way: “To keep only the stored information that is useful to the user, WebKit will remove unused servicewebkit.org/blog/8090/work…
@bgbrunocom @ChromiumDev It’s used in a lot of places, one of which is Google Search: web.dev/text-fragments…. Also Edge Collections: twitter.com/mattle/status/…. And of course a lot of individual usage.
ChromiumDev The Text Fragment URL feature and the Link to Text Fragment extension have seen great adoption (twitter.com/ChromiumDev/st…).
🔗 #:~:text=Yay
We’re happy to report that a first version of the extension is available for 🧭 @webkit
Safari: apps.apple.com/app/link-to-te… (Made by @tomayac).
ChromiumDev 🎉 Good news for people interested in the Notification Triggers API: after a short break (twitter.com/ChromiumDev/st…), the API is now in active development again.
@tomayac has updated the post with a link to a 🆕 origin trial for you to try out the API:
👉 web.dev/notification-t…
@zachleat @monjibram @simevidas My debugging stack is:
“`css
* {
outline: solid hotpink 1px;
outline-offset: -1px; /* 🔥 */
}
“`
jongalloway modify.video - A purely browser-based privacy-first video tool capable of performing tasks like converting, compression, etc. without uploading your files using #WebAssembly. pic.twitter.com/cUKmT8OeoS
Detached window memory leaks, by @_developit. web.dev/detached-windo…
passle_ While I agree web components still have shortcomings, I dont think this article is entirely fair. The article pins many of the wider JS ecosystems hardships on web components. twitter.com/LeaVerou/statu…
ChromeDevTools 📢 New engineering blog!
“How we built the Issues tab” by Jan Scheffler & @sigurdschn takes you through the design, prototyping and implementation of the new Issues tab.
👉🏼 developers.google.com/web/updates/20… pic.twitter.com/MzPbJx3BNK
ChromiumDev 📢 Create an offline fallback page:
web.dev/offline-fallba…
Use this🍴recipe described in @tomayac’s latest post to ensure your site’s visitors get at least a baseline offline experience.
firt 😱Wow! Luna, Amazon game platform, is a PWA on iOS. “We worked with the Safari team to ensure that some of the things that weren’t there are there, and that allowed us to kind of get to where we are today.” That’s why store rules mentioned the web recently engadget.com/luna-amazon-cl…
@briankardell I remember using webcomponents.org/element/Google… in the past. It was fine for the foreseen use cases. I needed something on top that wasn’t intuitive for me to do, or at least at the time I didn’t understand the concepts, so going all imperative
argyleink “`#CSS
text-decoration-thickness: from-font;
text-underline-offset: .5ex;
“`
.. headed for Chromium 87 🎉
will catch Chromium up with Safari & Firefox! Woot!!
🆕 `from-font`
look to the font for the font designer’s defined thickness or position, NOT the browser’s default twitter.com/intenttoship/s… pic.twitter.com/RMhqA5JgZV
Smarter throwing (`Error`s that is)..remysharp.com/2020/09/24/sma…AB. It totally didn’t occur to me either that `Error.prototype message` is mutable. Sometimes it’s small things like this. Thanks@remem.
JSJabber Check out this week’s episode of #JavaScriptJabber about #JSJ 450: Native Features Inside The Browser – Introducing Google’s Project Fugu with Thomas Steinerfr.bz/t15yae3g#JavaScriptpt Apple Podcast@ApplePodcastst@devchattvt@cmaxwx@DanShappiri@Aimee_Knighth@coolaj8686 @
@Paul_Kinlan @chrsgrrtt @samthor Mobile. Right. There’re indeed many options, and you’d have to hook the Escape functionality up with JS indeed. What’s elegant about @samthor’s solution is it makes the non-hamburger/FAB area a click target for clo
@Paul_Kinlan @chrsgrrtt @samthor I’d rather expect the Escape key to close it.
@DanShappir @jordaust @JSJabber Thanks both 😊! Really happy you found the episode worthwhile of your time. It was an honor to be on the show.
@BuzzIlk Thanks 😊. Really an honor to have people listening to my gibberish! Hope you could extract something useful from it.
@ericlaw There was, it was called Writable Files API. We discussed several options, including your suggestion, but also Local File System API (my favorite) etc. The worry was that “host” and “local” put too much emphasis on “on your device”, w
@firt Nice inception!
@simevidas @firt I see system apps as apps that are tied to the system, like the Phone app, the Messages app, or the Settings app.
@samthor Hehe, thanks for sharing your wisdom of doing things “the standard” way!
@firt Judging from the logo it’s Google Translate.
@Paul_Kinlan @chrsgrrtt A FAB could essentially be implemented the same way as a hamburger menu. Here’s @samthor’s demo codepen.io/samthor/pen/da… from dev.to/chromiumdev/th…. The history spamming is a no-go for many use cases (it’s nice that you can
@diekus @Samsung @samsunginternet All the best for the next gig, Sir!
@robertnyman @sleevi_ @yoavweiss @foolip @RickByers @atopal Text Fragment URLs to the rescue: web.dev/text-fragments/. 😆
@andreasbovens @mozilla All the best for whatever comes next, Andreas! Hope you stay on Team Web!
@NorbertRittel @excalidraw @dluzar Thank you! I have added the correct component and CC:’ed the relevant folks.
@NorbertRittel @excalidraw @dluzar I don’t think so. Could you open another crbug.com/new, please?
How @themarkup built the real-time privacy inspector Blacklight (themarkup.org/blacklight): themarkup.org/blacklight/202….
Project Fugu 🐡 API rename heads-up: the Native File System API is now called File System Access API.
The reason is our effort to make our language more inclusive: developers.google.com/style/word-lis….
I’ve a PR open (github.com/GoogleChrome/w…) to update our articles
@defaced I don’t think so. The closest we have is bugs.chromium.org/p/chromium/iss…, which is about allowing sites to become a Text-to-Speech engine. See this spreadsheet cell on our API tracker: docs.google.com/spreadsheets/d… (deeplink).
🎧 I had the pleasure and honor of being on the @JSJabber podcast and chat about Project Fugu 🐡. Happy listening! ⤵️ twitter.com/danshappir/sta…
@henrylim96 Oh no, I forgot to paste the links. Seems like once submitted I can’t edit the description. The links are:
[1] developer.mozilla.org/en-US/docs/Web…
[2] developer.mozilla.org/en-US/docs/Web…
[3] github.com/google/service…
Special thanks to @xeenon for helping me navigate the App Store submission process!
📢 PWA developers using Safari @webkit rejoice:
The 👷 Service Worker Detector browser extension is now on the @AppStore and makes your life a little easier:
💻 Read the beautified Service Worker code.
📄 See the Web App Manifest.
🛢 Checkapps.apple.com/app/service-wo…
katiehempenius Overview of CDNs:
📖 web.dev/content-delive…
- how they work
- selection
- setup
- performance features you should enable pic.twitter.com/x1wAcGs1Qg
ChromiumDev The Web DNA Report 2019 identified browser compatibility as the top pain point for developers. We spent 2020 diving deeper: the MDN Browser Compatibility Report identifies specific issues and possible solutions.
Read the full 120-page report: bit.ly/2ZZdlOY (PDF, 1.9mb)
jaffathecake It’s been talked about for years now, but we might get to the point where browsers disable HTTP/2 push support, because it currently makes things slower for users bugs.chromium.org/p/chromium/iss…
@NorbertRittel @excalidraw @dluzar Thank you! Pre-triaged and routed.
@NorbertRittel @excalidraw @dluzar Could you create a bug and ping me the URL here, please? I can help route and triage. For context, here’s @dluzar’s bug: crbug.com/1131034. Thanks for your help in advance!
@NorbertRittel @excalidraw We also have a bug on Windows. @dluzar is submitting a crbug.com/new as we’re tweeting. It’s still behind a flag for a reason. 😃
@cshjb007 @kevin_dorion (Removing the wrong (at)-kevin). I’ve added some more detail to the article on this: web.dev/requestvideofr……
@AmeliasBrain @nigeljohnwade @ChromeDevTools @mathias Can the time zone and the locale fields support autocomplete? A simple `<datalist>` (developer.mozilla.org/en-US/docs/Web…) could probably do the job (but haven’t checked myself).
I’ve landed File Handling support (github.com/excalidraw/exc…) in @excalidraw—a cool Project Fugu 🐡 feature:
1. (Re-)installexcalidraw.comq.
2. Open Finder/Explorer.
3. Doubleclick an `.excalidraw` file.
4. Edit on… 🎈
(Needs the chrome:/#filepic.twitter.com/3xQkogRobj
mathias New favorite screensaver: chrome://discards/graph 🤯 pic.twitter.com/YWNQMq4u65
@4xfelix Danke dir für den Blogpost. Schön, eine externe Perspektive auf das Projekt zu lesen!
@darth_na @cemper This question is independent from the Idle Detection API, but here’s the answer:
Page Visibility detects if the screen is locked: w3.org/TR/page-visibi… and so does `document.hasFocus()`: html.spec.whatwg.org/multipage/inte….
Demo: hasfocus-test.glitch.me
@darth_na @cemper This API doesn’t change any of that (window focus) behavior. It barely lets developers know if a user is still using their device, but maybe in another tab or a different app than the browser.
@darth_na @cemper I was not referring to screen locks, but banking sites that log you out for “security” reasons when you may actually still be using your device, but are maybe looking up a banking account number somewhere in your email.
@nhoizey @firt OK, finally tracked this down to a specific blocklist and opened github.com/BlackJack8/iOS…. Hopefully this gets merged soon.
“What is Project Fugu? More power to the web.” View of community member @4xfelix on the project I spend most of my time on. 🐡 felixgerschau.com/web-capabiliti…
The Idle Detection API (web.dev/idle-detection/) lets you find out which of their devices a user is currently using, so you can dedupe notifications. Another use case is for a banking site to only log a user out when they’re truly idle—not just busy ltwitter.com/intenttoship/s…
intenttoship Blink: Intent to Continue Experimenting: Idle Detection API groups.google.com/a/chromium.org…
@nigeljohnwade @AmeliasBrain This exactly! @ChromeDevTools has great I18N support. If something is missing, file a new.crbug.com (choose DevTools issue in the picker).
@scottjehl @argyleink Typos: `media=”pritn”` will never match. Sometimes people use fantasy names like `media=”lazyload”` for lazy loading.
@argyleink @scottjehl I have two issues open around the loading behavior, one for normal loads (bugs.chromium.org/p/chromium/iss…) and one for imports (bugs.chromium.org/p/chromium/iss…).
@excalidraw Or (temporarily) update to the Chrome Beta channel: google.com/chrome/beta/.
@nhoizey @firt These videos load for me. The one in firt.dev/webapps-backgr… doesn’t.
@firt I think I know what happens. There’s a missing space after the quote:
class=”eleventy-plugin-youtube-embed”style=”position:relative;width:100%;padding-top: 56.25%;”
embed”style
@RickByers Next Chrome offsite? Erm, wait… Will we ever do those again? 🤔
@simevidas @firt Adhering to `disablepictureinpicture` is marked as an OPTIONAL step in the spec: w3c.github.io/picture-in-pic…. Working as intended. It’s acknowledgedly a bad user experience. I wish YouTube would not do this.
@firt @mahemoff Consider filing feedback: github.com/w3c/picture-in….
alanwaketan Face ID for the web is live at GitHub.com! pic.twitter.com/Iep4wesSmP
argyleink I just stumbled across a dark theme in the @csswg draft for Color Level 5! 😈 drafts.csswg.org/css-color-5/ love it, ty somebody for trying this out pic.twitter.com/cuemQDkt0T
@firt Your YouTube embed somehow doesn’t show on my Pi-hole protected mobile. It does without Pi-hole. Any reason for this? Didn’t look into your code, but probably you want to track plays.
zachleat Wrote up a post on the @Netlify blog about using @eleven_ty and @vuejs together for a no-client-JS baseline tech stack:
Eleventy and Vue, a match made to power Netlify.com
netlify.com/blog/2020/09/1…
@samuelgoto Orkut. Now that’s a name I haven’t heard in a while. Look at this video featuring @chanezon speaking at the @Facebook Application Development Meetup: youtu.be/tdNguO6SzU4. The future that could have been.
You may have heard of OKRs and how Google “measures what matters” that way (google.com/search?tbm=bks…). Dump it.
The one and only @rowan_m introducing OKVRs. Read the whole thread (up and down). ⤵️ twitter.com/rowan_m/status…
@sw12 @yoavweiss Nice soundboard you got there! I think Media Fragments URI support never made its way to <audio> (caniuse.com/media-fragments), just <video>, but you could do this declaratively with an “image-less” video element: w3.org/TR/media-frags….
diekus Folding the Web: Enabling real responsive design on foldable devices. medium.com/samsung-intern… @samsunginternet @w3cdevs #foldable #foldalicious
@marcosc Thumbs-up’ed 👍. Great idea!
@sundress @marcosc @yoavweiss Especially on non-mobile devices you’d want more than one thing visible on the screen. Personally, I multitask all the time while cooking 🧑🍳…
(Not a really valid reason, just a data point: Safari on iOS and iPad
@sundress @marcosc @yoavweiss I am not against full screen optionally acquiring a wake lock (I really like the simplicity of the proposal actually), but it should not be the exclusive way to acquire one. The recipe page use case definitely is a good examp
@andreban I’m realizing this now: why is it “Site Settings” instead of “App Settings”? Or just “Settings”? Too much focus on technology IMHO.
googlewmc 🤓 Googlebot is learning a new HTTP dialect! 🤓
Starting mid November you may see some of the Googlebot crawl to happen over HTTP2 🙌
Read more:
webmasters.googleblog.com/2020/09/google…
@tjschleining @ChromiumDev Thanks for sharing. We provide a support library that helps with browsers that don’t support the API yet: github.com/GoogleChromeLa…. If you code against the API directly, note that there were some changes after the origin trials: github.com/WICG/native-fi…
@DotProto @reillyeon I tried this, but now whenever I want to open a work project on http://127.0.0.1/, Twitter opens instead.
🤐
MSEdgeDev Features like high contrast can help improve readability by enforcing a user’s required color scheme. Learn how browsers apply forced colors, how to optimize styles with new standards, and differences you can expect from legacy implementations. blogs.windows.com/msedgedev/2020…
@schneyra Oh, just responded to the original tweet, not having seen Scott’s follow-up. Anyway, here it is: twitter.com/tomayac/status….
@scottjehl This might break some sites that depend on animations having run. Here’s a snippet we collectively came up with that solves this issue: web.dev/prefers-reduce….
@AndyDavies @patmeenan Something I actually miss is a “reset to defaults” option. I keep forgetting which flags I toggled and make wrong assumptions about what’s live to the general public. Are you aware of a place with the documented shipping state
Validation succeeds, distribution fails. The messages.json file exists and is obviously being used (the extension uses strings from it) and the file exists in Xcode. Have an idea what’s wrong? The error code ITMS-90858 reveals one other user’s question: developer.apple.com/forums/thread/…
@xeenon Sorry to bug you… I’ve a weird error:
ERROR ITMS-90858:
“Missing messages file. Safari web extension bundle LinkToTextFragment.app/Contents/PlugIns/LinkToTextFragment Extension.appex is missing the messages.json file for the en locale.”
✅pic.twitter.com/LOovZb8BvU
@daviddalbusco @webkit Maybe only after logging in? Or maybe it’s an A/B test? Or it’s a repeat load thing?
Excited to share that the Service Worker Detector 👷♀️ Safari (@webkit) 14 extension (github.com/google/service…) has just been submitted to the App Store.
With it, I just found out that appstoreconnect.apple.com is a perfectly valid installable PWA.pic.twitter.com/Aqd8a0ZFnh
_inside App Clip seem to have propagated by now, so in theory if you scan this QR code from Control Center on iOS 14, you get to play around with @chibistudioapp (Or just open chibi.app in Safari and use the banner at the top) pic.twitter.com/9IzwADXJkI
@gregwhitworth @html5test @ericlaw @yoavweiss @_scottlow The latest message confirms that this is still the current plan: groups.google.com/a/chromium.org….
passle_ And there we go, first release candidate for generic-components
A collection of generic web components with a focus on:
🚹 Accessibility
🏗 Easy to use
🎨 Easy to style
All components are vanilla web components 🙂
Docs: genericcomponents.netlify.app
Github: github.com/thepassle/gene…
Wow, WebPageTest has been taken over by @Catchpoint. The article and the FAQ at the end have the details. Congratulations, @patmeenan! catchpoint.com/webpagetest-jo…
There is a feature request bug for `BroadcastChannel` in Safari: bugs.webkit.org/show_bug.cgi?i…. It’s currently blocked by a spec issue around partitioning: github.com/whatwg/html/is….
(CC: @DasSurma, @jaffathecake) twitter.com/chromiumdev/st…
@denladeside @Maersk @kennethrohde @slightlylate Sounds super interesting! Any details you could share here? Or maybe there’s even a blog post in the planning?
newsycbot Managing Several Displays with the Multi-Screen Window Placement API ift.tt/2GTRZMj (cmts ift.tt/2FAqoPv)
@pfeilbr Maybe worth submitting a new Issue for this proposal to get some discussion around it: github.com/WICG/idle-dete….
@henrylim96 @webkit Correct. Chrome used to ship its own userland implementation of the API, but the team changed their minds on this: blog.chromium.org/2020/01/rethin….
@peterfriese I downloaded the `.xip` directly via xcodereleases.com and unpacking the archive alone takes ages… Not even at the install stage.
Chrome on iOS 14 now is a capable-ish browser (or @webkit skin) with service worker support 👏 that can be selected as the default app.
Too bad 😕 that it still doesn’t support `getUserMedia()` bugs.webkit.org/show_bug.cgi?i… and `PaymentRequest`.
PWA testomayac.github.io/pwa-feature-de…pic.twitter.com/ppD3nz271P
gauravseth Great story. Made me reminisce the awesome time I got to spend on that product, working with @ahejlsberg and the amazing people on the @typescript team . Congrats TS team… way to go… !!! 👏👏👏
zdnet.com/article/typesc…
Sending you push notifications to only the device you are currently actively using is one of the core use cases of the Idle Detection API: web.dev/idle-detection/. ⤵️ twitter.com/kylealden/stat…
shshaw There’s been a lot of buzz about AVIF but testing and converting can be difficult. To make it easier we’ve added AVIF support to all of your image assets on @CodePen!
Get amazing savings & easily compare with WebP to get the best format for your images!
codepen.io/assets pic.twitter.com/Fclpxk08pQ
@sundress @slightlylate @kennethrohde @simevidas @yoavweiss @tabatkins has written an excellent explanation in a comment to the article: html5accessibility.com/stuff/2020/08/….
swyx 🆕 The Third Age of JavaScript
swyx.io/writing/js-thi…
Every 10 years there is a changing of the guard in JavaScript. I think we have just started a period of accelerated change that could in future be regarded as the Third Age of JavaScript. pic.twitter.com/qGX0JvNG5O
@sebi_io @BarryNorton @ChromiumDev It does have a USB port, though: teenage.engineering/guides/op-1/ha….
ChromiumDev Access alternative auxiliary keyboards and exotic gamepads with WebHID!
1️⃣ Learn about it at web.dev/hid/
2️⃣ Play with the Joy-Con and keyboard backlight demos
3️⃣ File feedback at github.com/wicg/webhid/
web.dev/hid/
#WebHID—A Project Fugu 🐡 API.
@yoavweiss @briankardell Polyunfill.
Informative intro to the Media Queries Level 4 Interaction Media Features `pointer`, `hover`, `any-pointer`, and `any-hover`, by @patrick_h_lauke: css-tricks.com/interaction-me…
Nice double article feature by @rachelandrew on CSS clipping ✂️ (web.dev/css-clipping/) and CSS masking 🎭 (web.dev/css-masking/).
surfaceduodev The @MSEdgeDev team wrote about #dualscreen web experiences with CSS and JavaScript examples for the #SurfaceDuo - thanks @_zouhir!
blogs.windows.com/msedgedev/2020…
holfelder As a member of Google’s Sustainability Board, I am proud that today we are announcing Google’s third decade of climate action with our most ambitious goal yet: By 2030, we aim to operate entirely on carbon-free energy, 24/7/365. Read more at: g.co/carbonfree. pic.twitter.com/6uBX490LXz
@HenrikJoreteg Re: 1: ♥️ Thank you!
Re: 2: Fixed: github.com/GoogleChrome/w….
I had a lot of fun building this demo, not to mention the photo shooting. ⤵️ twitter.com/chromiumdev/st…
@danbri @AaronSwartz That’d be @aaronsw 😢 actually.
How to tell browsers that your site supports color-schemes: stefanjudis.com/today-i-learne…
chromeunboxed Lacros: The “other” Chrome browser on Chrome OS just appeared in the Canary channel.
chromeunboxed.com/first-look-lac… pic.twitter.com/y2G9RoEJIP
Code_Craftsman Detect inactive users with the Idle Detection API by @tomayac web.dev/idle-detection/ — need this for a project I’m playing with!
@firt I’m using the published 85 and a 87 build, but it’s not there. ¯\_(ツ)_/¯
@firt I’m on iOS 14.0 (18A5373a), but I don’t have the browser switch option. Not sure why.
@sulco It’s called Text Fragments. Learn everything about this here: web.dev/text-fragments/.
passle_ 🎉 New blog
The year is 2020. Service workers are still rocket science. Humanity still hasn’t nailed service worker updates. The search continues.
dev.to/thepassle/on-p…
#pwa #progressivewebapp #workbox #updates
For people thinking this comes out of nowhere: it doesn’t. Here’s the in-flux spec: wicg.github.io/sanitizer-api/.
Wow, the HTML Sanitizer API is a useful potential Web platform addition:
const safe = (new Sanitizer()).sanitize(`
<script>
alert(“pwned 😈”)
</script>
<p>Harmless 👼</p>
`);
safe.children.length;
// 1
safe.children[0];
// <p> twitter.com/freddyb/status…
@pchampin Peut-être tu vas aimer cette extension aussi: addons.mozilla.org/firefox/addon/….
🤔 Every so often I encounter @webkit bugs that really make me go wonder…
“`html
<button type=button>
<img src=”foo.png” width=99 height=99 alt=”“>
</button>
“`
The image’s dimensions are ignored on iOS Safari.
Bugbugs.webkit.org/show_bug.cgi?i…qm
Demimage-in-button.glitch.mepic.twitter.com/b40gHVDj7H
TensorFlow Our Show & Tell has a new home 🏠
Join us for #TensorFlowJS Show & Tell 3 live on Sep 18, 10AM PT on our YouTube channel. See epic demos that give you superpowers with 8 new projects by the community. See you there! #MadeWithTFJS
Join the fun → goo.gle/3ii4E9r pic.twitter.com/lXV7MxzC83
scottjehl Not sure how I didn’t know about this already but if you need a simple and free spot to prop up a static website from some files, @Netlify’s drag/drop service here is pretty awesome. Thx for the tip, @zachleat
app.netlify.com/drop
argyleink TIL #CSS text-emphasis 🎉
em {
text-emphasis: filled double-circle deeppink;
}
🤯 Put emphasis or an accent on a letter, word or sentence with this nifty prop
Play via @CodePen codepen.io/argyleink/pen/…
Read more (spec) w3.org/TR/css-text-de… pic.twitter.com/b1XlDAmdQS
smashingmag Proportional Resizing with CSS Variables by @shadeed9
.rect {
—size: 186px;
—aspect-ratio: 2.35;
width: var(—size);
height: calc(var(—size) / var(—aspect-ratio));
}
ishadeed.com/snippet/propor… pic.twitter.com/C6UdWZ3oo6
ChromeDevTools 🥁 *drumroll* Introducing the new #ChromeDevTools engineering blog!
The first post by @TimvdLippe will take you through our journey of migrating DevTools from legacy custom module format to JavaScript modules.
developers.google.com/web/updates/20…
Stay tuned for more engineering content! 🤩 pic.twitter.com/OnaQAtGIFA
@xeenon Cool, thanks for confirming! Hopefully there will be some docs on how to submit by then, too…
Polls vs. the Street xkcd.com/2357/. Such a true #xkcd.
@xeenon (Friendly ping after the Labor Day break.)
@nemof Read more ababout this feature here: web.dev/text-fragments….
@Rumyra @medleyjp @MozDevNet It’s so great to have excellent documentation! I use it very frequently, and in some cases I even wrote the article. Thanks for your work, Ruth and Joe!
📑 “If an API’s not documented it doesn’t exist.”—email footer of@medleyjpp.
That’s also true for Project Fugu 🐡 APIs. Shoutout to@Rumyraa 👏 for her work on@MozDevNett:
•developer.mozilla.org/en-US/docs/Web…s
•developer.mozilla.org/en-US/docs/Web…Y
•developer.mozilla.org/en-US/docs/Web…wiki.developer.mozilla.org/en-US/docs/Web…
auchenberg Introducing Inspect – a new developer tool for macOS and Windows to inspect and debug your web apps and websites in Safari and WebViews on iOS devices 🤯🎉🔥
A little quarantine project of mine! 🤓inspect.devVpic.twitter.com/3qO9DjRYzhzh
andreban Bubblewrap CLI 1.6.0 is out! Now generating Android packages ~700k smaller. That’s up to 66% reduction! Also, a doctor command, dark mode for splash screens, site settings shortcuts and more. Check all changes at github.com/GoogleChromeLa…) and get it at npmjs.com/package/@bubbl….
Designing With Reduced Motion For Motion Sensitivities: smashingmagazine.com/2020/09/design….
For “the web [having] to pick up the scraps left by video formats,” @jaffathecake shows how incredible of an image format AVIF is: jakearchibald.com/2020/avif-has-…
littledan See the new decorators proposal here and in the upcoming TC39 meeting.
github.com/tc39/proposal-…
@normankev141 @MrJamesFisher Yes there is: addons.mozilla.org/en-US/firefox/… (the URL creation is the same logic as on Chrome, but the matching needs a polyfill that’s currently still in development).
@mattc0llier @MrJamesFisher Maybe a Thomas Steiner write up helps, too: web.dev/text-fragments/. 😂
What are the official version requirements for submitting an extension (and will there be docs for folks completely new to App Store submissions like me), and is this even possible yet? Thanks for your help!
@xeenon Question on Safari 14 extensions: the docs developer.apple.com/documentation/… don’t include submission info. I’ve guess-clicked myself thru App Store Connect, but am apparently on a too old Xcode (tried Version 11.7 [11E801a] and Version 12.0 beta [12A6159] pic.twitter.com/7afIm89JOm
@jaroslawjarosik Create a (or look for an existing) browser extension that injects the snippet mentioned here web.dev/prefers-reduce… into all websites.
Browsers may throttle `requestAnimationFrame()`. Some good digging into when browsers throttle the API. mattperry.is/writing-code/b…
University COVID Model xkcd.com/2355/
pes10k Thanks to the @EFF for updating panopticlick.eff.org to reflect Brave’s randomization fingerprinting protections. We know you all are slammed, so thanks much for the time.
Hope we can keep working together to improve web privacy! pic.twitter.com/rf8Tste8Y7
@b1tr0t Oh, wow, little did I know, but it’s right there: crunchbase.com/person/peter-m…. Congratulations, PJ! 🎈
cramforce 🚨 New 🚨
I released eleventy-high-performance-blog
A blog template for @eleven_ty that implements a very wide range of performance best practices by default 🎉.
🖼 image lazy loading
🏘 srcsets
� blurry placeholders
🎄 CSS tree shaking
😻 you name it!
industrialempathy.com/posts/eleventy…
Standards Developing Organizations (SDOs) as de facto do-ocracies — how [Web] standards are really made, by @tobiee: speaking.unlockopen.com/qulC58w
The latest Chrome 86 is absolutely killing it: my favorite launched feature is the Native File System API 🎉 that now graduated after a successful origin trial following the Project Fugu 🐡 process. And there’s lots more, see @medleyjp’s bloblog.chromium.org/2020/09/chrome…
surfaceduodev Excited to introduce #dualscreen capabilities for @MSEdgeDev on #SurfaceDuo. Learn how to build web apps for two screens using CSS and/or JavaScript! Edge Canary devtools has a Surface Duo “simulator” in the browser, so you can start today! devblogs.microsoft.com/surface-duo/bu…
DasSurma 📹New HTTP203 with @jaffathecake and me about everything weak in JavaScript.
And by that I mean WeakSets, WeakMaps and the brand new WeakRef & FinalizationRegistry that’s in Chrome84+!
youtube.com/watch?v=uygxJ8…
@WebReflection @firt @jensimmons @jonathandavis SVG icons cannot be added on the Android home screen for technical reasons outside of the browser’s scope. The browser, IMHO, could take care of the conversion from SVG to something like PNG automatically,
@mhartington @firt @jensimmons @jonathandavis To be fair, it’s a working draft w3.org/TR/appmanifest/ and there’s some outsourcing happening w3c.github.io/manifest-app-i…, but the icons parts have multi-implementor support by now: developer.mozilla.org/en-US/docs/Web….
Snowden Seven years ago, as the news declared I was being charged as a criminal for speaking the truth, I never imagined that I would live to see our courts condemn the NSA’s activities as unlawful and in the same ruling credit me for exposing them.
And yet that day has arrived. twitter.com/ACLU/status/13…
This more than two years old tweet unfortunately still represents the status quo on the latest iOS 14 beta. Here’s the bug for it: bugs.webkit.org/show_bug.cgi?i…. Is this on someone’s radar, @jensimmons & @jonathandavis? Thanks! twitter.com/tomayac/status…
@simevidas @KenjiBaheux clarified this on an internal thread:
Private DNS: Android OS feature. Uses DNS-over-TLS. Can easily be blocked (protocol wise).
Secure DNS: Chrome feature. Uses DNS-over-HTTPS. Not easy to block without collateral damage if offe
@feross @Speakeasy_JS @mikeal @mafintosh This looks _super_ intriguing, but the time is a little prohibitive for my locale. Any plans on rotating through the various time zones of the planet, or (even better) recording the event?
@simevidas @firt I have a local port of Service Worker Detector 👷 (github.com/google/service…) that works in Safari. Hopefully released officially soon.
ChromiumDev :focus-visible and the Quick Focus Highlight are new in Chrome 86!
:focus-visible helps developers build more accessible sites with improved focus states.
The Quick Focus Highlight gives users more control over when they see focus styles.
blog.chromium.org/2020/09/giving…
A recent post by Brave folks claimed that Web Bundles work against ad or content blockers. @jyasskin explains why this isn’t the case really: ⤵️ twitter.com/jyasskin/statu…
TensorFlow 🔋⚡️ Get supercharged with WebAssembly
In the latest update, supercharging the #TensorFlowJS WebAssembly backend with SIMD and multi-threading can get up to a 10x performance boost for free.
Learn more → goo.gle/2YZ1r73 pic.twitter.com/HM3dyliTND
sw12 A safer and more private browsing experience on Android with Secure DNS: blog.chromium.org/2020/09/a-safe…
@simevidas Without the market power of Apple who can just require apps to support their relay service, I wonder how long it takes until sites start disallowing “relay.firefox” in emails. It’s not a new concept: en.wikipedia.org/wiki/Disposabl….
@cemper @robertnyman @tyohan Oh, misunderstanding here. It’s @tyohan who is moving on from Google; nothing changed for me.
@ade_oshineye @Paul_Kinlan Oh, interesting. I’ve been using spectacleapp.com since forever, but it’s no longer being maintained and doesn’t have the magnetic snapping. Intrigued.
@robertnyman @tyohan Thanks, @tyohan, for all the impact you had on the local and global ecosystem! Enjoy your next step of taking an office break and whatever comes next! 🤗
codepo8 👉🏻 “Use advanced typography with local fonts
Learn how the Local Font Access API allows you to access the user’s locally installed fonts and obtain low-level details about them.”
🔗 web.dev/local-fonts/
by @tomayac - this is exciting stuff when you work on font tools :)
@jaffathecake @othermaciej Someone somewhere is optimizing for “engagement”. Lucky we don’t get this feature in our geoblocked bubble of the German Twitter (despite every language setting in the app, the site, and the device being set to en-US).
gregwhitworth Awe yeah!! The @wicg_ now has a proposal section for *well formed* proposals!! Love this idea rather than starting in discourse and then flowing into WICG. Thanks to the chairs for hearing the frustrations and removing friction. github.com/WICG/proposals
@simevidas @sil @petele There’s a couple of things in the pipeline that are planned, but that we haven’t gotten to. Check out goo.gle/fugu-api-track….