@smfr @FlowBrowser Judging from ekioh.com/wp-content/upl…, this is probably “using the ‘The Man In Blue’ HTML animation benchmark with the number of rendered objects doubled to 1,000 to drive up the intensity of the test”: themaninblue.com/experiment/Ani….
@dalmaer @RReverser My naive first idea that might actually work would be: Run npmjs.com/package/get-im… and check if the amount of pure black and pure white is above a certain to be determined threshold.
wesbos Browser Default Styles - awesome little app to see the default CSS of elements.
Made after the dev behind this took my JavaScript30 course’s typeahead tut
browserdefaultstyles.com pic.twitter.com/HTR2e4mVm4
@kennethrohde @_zouhir @darktears @MSEdgeDev Neat. I’ve deployed this for others and myself to play around with: kenchris-dual-screen-demos.glitch.me. Initially I thought you were talking about `env()` as in developer.mozilla.org/en-US/docs/Web….
This childish joy awaiting the hourly cron job and seeing the Webmentions integration work on blog.tomayac.com/2019/09/29/the… 😆 (thanks for the tutorial @TheGreenGreek). I’ve also hooked up my RSS feed to @rem’s webmention.app and am eagerly waiti@IFTTT
@zeyadetman @eleven_ty Neat. There seems to be a problem with dark mode in the blog section: it only gets dark after manually toggling dark mode, whereas the header correctly gets dark. Some contrast issues, too (hamburger menu gets almost invisible due tpic.twitter.com/ke7zmrIDyg
tomayac 🎉 New blog post: The redesigned Blogccasion is live:
👉blog.tomayac.com/2019/09/29/the…
I’ve completely overhauled the design 🎨 and tech stack 👨💻of my blog Blogccasion—It’s now based on@eleven_tyy, uses modern CSS Grid layout, and leverages `prefers-color-scheme` 🌒 for its dark mode.
@nhoizey @eleven_ty Hehehe, yeah, those were great days… This is a true story, they just turned back the server time.
@nhoizey @eleven_ty J’ai quelques posts en français d’une 2005/2006 vérsion de moi même 🙈 (la honte):
blog.tomayac.com/tags/France/
Mais “à l’occasion” c’est bien l’idée de mon blog.
I’m also pretty pleased with the @____lighthouse scores (📱 developers.google.com/speed/pagespee…, 💻 developers.google.com/speed/pagespee…). My self-hosted images (automatic WebP), the HTML, the CSS, and the JS get massaged 💆♂️ by mod_pagespeed (modpagespeed.com/doc/configurat…pic.twitter.com/3VKZGnZzj9
@mathias @eleven_ty Thanks. 😊 I went quite through some iterations until I settled on this. Reduced to the max.
@eleven_ty Things are still a bit rough around the edges, so if you spot a problem, please file an issue github.com/tomayac/blogcc… or send a pull request—each page has an “edit this page on GitHub” link.
🙏 Big thanks to y’all on whose shoulders I coul
🎉 New blog post: The redesigned Blogccasion is live:
👉blog.tomayac.com/2019/09/29/the…
I’ve completely overhauled the design 🎨 and tech stack 👨💻of my blog Blogccasion—It’s now based on@eleven_tyy, uses modern CSS Grid layout, and leverages `p
FlowBrowser @ppk Hi! It’s a new layout engine and new rendering engine. Everything other than the JavaScript engine (SpiderMonkey) is written from scratch.
HenriHelvetica Great lightning talk during #ChromeDevSummit from @tomayac on dark mode. Been looking for more explainers. Glad you’re keeping wifey in mind at night! 😄 #css
youtu.be/4rX19mqzI5k
igrigorik Nice thanksgiving present.. Support for Server Timing is now available in Firefox Nightly DevTools!
What’s Server Timing? @smashingmag has a nice nice intro tutorial: bit.ly/2CS1bMY pic.twitter.com/1NdvzCjX43
FlowBrowser Flow is a new clean-room multithreaded browser. Today it reached a new milestone: Rendering full Google Mail. ekioh.com/devblog/full-g…
This is a good thread on first- vs. third-party cookies and recent blocking circumventions: threadreaderapp.com/thread/1199817…. twitter.com/v0max/status/1…
@kennethrohde @slightlylate Just recalled that they’re a Google company now: blog.google/products/hardw…. Might be helpful in the causa Project Fugu 🐡 given all their sensors APIs.
(CC: @fractorious.)
@derSchepp @ChromiumDev @ChromeDevTools I *think* we don’t do this on purpose, but @slightlylate is better suited to address this proposal.
For combining tokens: you can combine them in one HTTP header separated by comma: github.com/GoogleChrome/O….
@derSchepp @ChromiumDev @ChromeDevTools Each token needs to be in its own meta tag.
@derSchepp @ChromiumDev @ChromeDevTools In @ChromeDevTools you can check for the presence of OTs via `$$(‘meta[http-equiv=”origin-trial”]’)`, but you can’t see which OT the tag is for. You can, however, feature-detect all current OT APIs (developers.chrome.com/origintrials/#…
I’ve forgotten how oEmbed works, but @smashingmag has a post on it today (smashingmagazine.com/2019/11/progra…), so I looked into it a bit more. You can see YouTube’s raw embed code here: oembed.com. Amazing time-tested
fellyph [pt-BR] Tutorial novo no blog, veja como implementar dark mode em suas aplicações web blog.fellyph.com.br/geral/utilizan… #darkmode #webdev #tutorial Thanks @tomayac for the support video is coming soon.
Lady_Ada_King I just published Making VSCode run faster on Chromebooks. #chromebook #crostini #vscode
medium.com/samsung-intern…
Not_Woods Check out all these PWAs with maskable icons! Support is growing. pic.twitter.com/nMgwVruQmi
Chrome Remote Desktop (remotedesktop.google.com) lets you access your PC from a phone, tablet, or other device. I’ve debugged what it does and found it renders from a hidden video into a canvas. Here’s me re-creating @ParallelsMac PiP view:
`$(‘video’).repic.twitter.com/BiCBd1Sc8N
TimvdLippe For the Sake of Your Event Listeners, Use Web Workers
macarthur.me/posts/use-web-…
Microsoft @MSEdgeDev is on fire with a new “Web Apps Identity Proxy” flag 🚩 whose purpose @thejohnjansen explains in techcommunity.microsoft.com/t5/Discussions…. Looks like Outlook.com 📧 plays an important role in the development: thurrott.com/cloud/microsof…
sw12 Search and read transcripts for #ChromeDevSummit videos:
devsearch.me
You can link to a search query, video transcript or specific caption:
• devsearch.me/?q=squoosh
• devsearch.me/?v=F1UP7wRCPH8
• devsearch.me/?v=F1UP7wRCPH8… pic.twitter.com/6zk0P08KFE
@aaranged @johnelincoln You mean schema.org I guess?!
☝️ Look, ma, no link. Secret: twitter.com/tomayac/status…
tdp_org I love telling people about NEL - Network Error Logging (w3c.github.io/network-error-…) and seeing the look on their face when they realise that mostly, as an industry, we’ve essentially ignored the client side of monitoring WRT networking until NEL. It’s a total game-changer.
@bradtaunt Me too I miss them; when I saw your post I immediately put it on my ToDo list. Finally got to redesigning my site. The problem is all those 2005 era posts with the most adventurous HTML. 😂
@bradtaunt Thanks a ton for the awesome “Valid HTML5” badge idea from uglyduck.ca/html5-validato…. I am proudly sporting it on my site now (not all pages are indeed valid, but having it there acts as a great reminder to care).
@steveschoger Thanks a ton for heropatterns.com/svg/circuit-bo…, just used it on my site and it looks great (your pattern, my site still needs some tweaks 😉).
stshank For those unaware, there is a collegial tradition in the browser world in which rivals send each other cakes for shipment milestones. I’ve always found it quite heart-warming. twitter.com/brave/status/1…
@simevidas @digitarald I don’t know, but you can ‘git blame’ the line in question and ask why it was marked that way. Or open an Issue directly. Thanks!
@simevidas @digitarald It’s said to be partially supported: Safari 9 has support for “pinned tab” SVG icons, but this requires an unofficial rel=”mask-icon” to be set and only works for all-black icons on Pinned Tabs.
developer.apple.com/library/archiv…
Indeed pinned
DasSurma 🎉 You can now register for the WebAssembly Summit 2020! 🎉
forms.gle/nVrjW7XMtoxfCb… pic.twitter.com/vgNx3B42cT
w3reality We’ve made a webm/mp4 encoder inspired by “Running FFMPEG with WASM in a Web Worker” paul.kinlan.me/running-ffmpeg… One limitation is FFmpeg itself runs in its single thread mode so it’s not as fast as desktop command😂
live: w3reality.github.io/async-thread-w…
source code: github.com/w3reality/asyn… pic.twitter.com/6P2iau9CC7
I’ve yet to see a better explanation of the SVG `viewBox` 🔭 than the one at the end of @Wattenberger’s blog post linked in the quoted tweet. ⤵️
(via @Mandy_Kerr) twitter.com/Wattenberger/s…
@LeonDerczynski @mahemoff @itskrtk @zeithq Do you log out of native apps as well and reset your advertising identifier?
Short-lived sessions are a frequent annoyance of web apps compared to native apps. Coincidentally just saw @mahemoff’s quoted tweet below right next to @itskrtk’s tweet twitter.com/itskrtk/status…. Seems like some companies like @zeithq are finally gettintwitter.com/mahemoff/statu…
@mathias @TimvdLippe YACNMV
Your actual class names may vary.
@Paul_Kinlan Now if only all these companies that you have created a *-share.now.sh app for just had a decent web app that supported Web Share Target themselves… Looking at you@redditit@LinkedInin, an@newsycombinatoror.
@__Sun__ @kushul_soomaree @cedpoilly @__fluxy__ @JKirstaetter For photographic images: re-colorize. See the article for some options: web.dev/prefers-color-….
For diagrams or scalable vector graphics: invert smartly. Here’s what we did for @v8js’s websitgithub.com/v8/v8.dev/blob…
@reillyeon @patrickkettner OK Google, dial 1800KITCHENLIGHTON.
@DotProto Peak Google ❤️
@mbrevda @mathias See github.com/webpack/webpac…, please.
TheGreenGreek I wrote a new thing!
Add Webmentions to your Eleventy static site with this step-by-step tutorial.
Special thanks to @zachleat @keithjgrant and @mxbck for their prior work on adding Webmentions to static sites and @eleven_ty
#indieweb #webmentions
sia.codes/posts/webmenti…
pomber Had to build a new blog and some tools to be able to publish this post with the format I wanted. It took some time but it’s finally ready!
📢 the updated DIY guide to build React from scratch
✨ pomb.us/build-your-own… pic.twitter.com/3kih0xLHIu
mathias 🚀 For large JSON-compatible objects, JSON.parse is faster than JS object literals.
➡️ True for all browser JavaScript engines!
➡️ Speed-ups from 1.2× to 2×
🎥 My #ChromiumDevSummit lightning talk explains why: youtube.com/watch?v=ff4fgQ…
This article by @danburzo on media quer units is brilliant: ⤵️ twitter.com/danburzo/statu…
TensorFlow Introducing Handtrack.js: a library that allows developers to track users’ hands on browser that only takes 3 lines of code! Learn more in this guest post by @vykthur. #PoweredByTF
Read the blog → goo.gle/handtrackjs pic.twitter.com/ID9riy4G1e
DasSurma The main thread is overworked (and underpaid)!
📽 youtube.com/watch?v=7Rrv9q… twitter.com/AndyDavies/sta…
@JohnMu Yeah, it’s on me. We’ve just migrated off DevSite, now it should be a lot easier to implement. It’s just a matter of time.
🌒 Dark mode aficionados, my #ChromeDevSummit lightning talk on dark mode has been published on YouTube: youtu.be/4rX19mqzI5k. 📺
It’s essentially the TL;DR of web.dev/prefers-color-…. 📚
@marcenglund @vaadin Note that this is exactly what the light.css / dark.css / common.css architecture does. You set the variables in light.css respectively dark.css, and use them in common.css. No JS needed.
@rob_dodson @nhoizey The core idea is to make everything dependent on the root font size (which in turn you set to 100%, so the user can choose their preferred default size in the browser settings):
“`css
body {
font-size: 100%; /* 16px by default, bu
mrdoob @tomayac @mathias I wonder if the argument of SMIL not being implemented in all major browsers still stand. groups.google.com/a/chromium.org…
@nhoizey I’m mostly making the case for _not_ setting it to anything absolute; `100%` does not change anything of course :-)
The idea is to make it relative, so you can…
“`css
@media (min-width: 768px) {
body {
font-size: 112.5%;
}
}
“`
@marcenglund @vaadin Thanks for the kind words 😊. You can actually make it completely independent from JavaScript by following the loading strategy outlined in web.dev/prefers-color-…. I love the `media` attribute on `<link rel=stylesheet>`, it’s inc
@nhoizey @simevidas @igrigorik @ppk @rob_dodson 100% of the user’s global browser font size setting, which defaults to 16px, but can be easily overridden. pic.twitter.com/XlEdEvSFgt
@slightlylate @jyasskin @kosamari @beverloo @KenjiBaheux It’s coincidence. I get these annoying DiDi SMS in Germany and was never using their app or site on an Android device, only the iOS app.
This tip by @TimvdLippe went immediately in my git config: ⤵️
(Context: twitter.com/domenic/status…) twitter.com/TimvdLippe/sta…
MylesBorins @nodejs If you want to learn more about working with ESM in @nodejs 13 feel free to check out this blog post about the current implementation and what we are still working on.
medium.com/@nodejs/announ…
rauschma Node.js 13.2.0 is out: github.com/nodejs/node/bl…
🎉 ES modules are now unflagged!
ℹ️ Details:
– ESM on Node.js2ality.com/2019/04/nodejs…oS
– Writing hybrid ESM/CommonJS packag2ality.com/2019/10/hybrid…cFux
@simevidas @igrigorik @ppk Setting the root font size to 100% is one of my favorite tips I learned from betterwebtype.com/articles/2019/….
CC: @rob_dodson regarding web.dev (I think this is the deep link: github.com/GoogleChrome/w…)
@rowan_m 🤯 We’ve been pitching PWA wrong the entire time.
Safari will soon have (textual) Async Clipboard API support. 👏
Maybe up next: `image/png` support (web.dev/image-support-…, requested here: bugs.webkit.org/show_bug.cgi?i…). twitter.com/webkit/status/…
Great post by @ericlaw on `navigator.registerProtocolHandler()`. ⤵️ twitter.com/ericlaw/status…
@marcenglund @vaadin This will catch color scheme changes, but you also need to initialize it on first load.
@mrdoob @mathias Thinking about it more, probably one should prohibit all network-involving operations to avoid tracking (onhover etc.).
@mrdoob @mathias Definitely cool!
🤔 If SVG <script> were scoped to the enclosing <svg> tags (rather than being global, as spec’ed now), could we then have scripts execute safely in an <img>?
<!— Unreachable —>
<svg […]>
<script>/* Can’t reach ou
@mathias @mrdoob @ppparshekar I wonder why anyone thought global scope for SVG <script> was a good idea: “Any functions defined within any ‘script’ element have a “global” scope across the entire current document.”-svgwg.org/svg2-draft/int…e
I’ve extended my animated SVG favicon demo app to now test SVGs with animations written in CSS, JS, and SMIL.
Turns out, CSS- and SMIL-animated favicons play fine in Firefox (😲), but neither play in Chrome.
Demo: animated-svg-favicon.glitch.me.
Screencastyoutu.be/SlesN-eGdIEtwitter.com/mrdoob/status/…
Samsa is a really impressive variable fonts explorer: axis-praxis.org/samsa/ 🔠 twitter.com/variablefonts/…
@jaffathecake There’s movement on the bug, so here’s hoping: bugs.webkit.org/show_bug.cgi?i….
@igrigorik @stefanjudis @ppk No hard data that I could share, sorry. It’s more popular on mobile: Android Q turns on dark theme with battery safer, and Apple has a pretty solid dark mode onboarding story when on updates to iOS 13. On desktop, it’s harmedium.com/dev-channel/le…
@mrdoob @ppparshekar Interesting, the planned SMIL depreciation got suspended. Just skimming the thread groups.google.com/a/chromium.org…; looks like it’s (been) an interesting situation. FWIW, your animation still plays on my iPhone in mobile Safari.
@mrdoob @ppparshekar Just remix my demo and keep us posted :-) I suspect it won’t work.
@DerekNguyen10 @firefox It does work, but there seems to be some aggressive caching happening that’s preventing the favicon from changing. Try reopening the demo in an incognito window.
@mrdoob @ppparshekar Just a regular CSS animation. animated-svg-favicon.glitch.me/icon.svg
The support situation for `Element.computedStyleMap()` isn’t great yet (developer.mozilla.org/en-US/docs/Web…), but what I just learned from @Rumyra’s ace article css-tricks.com/the-typed-obje… is that—unlike `Window.getComputedStyle()`—it doesn’t force relayout. That’s p
Given yesterday’s `prefers-color-scheme` SVG favicon findings and triggered by @ppparshekar’s question, I tried an SVG animation favicon, which doesn’t work (yet?). Only the first frame is drawn, but the animation itself doesn’t play.
Demo: animated-svg-favicon.glitch.metwitter.com/ppparshekar/st…pic.twitter.com/h5V8vGnmQM
@dominickng @kennethrohde @Not_Woods @AaronGustafson In all seriousness, this (fav)icon fever needs to stop. Let’s have the browser do the grudge work. We invented vector graphics for a reason…
@Not_Woods @AaronGustafson @kennethrohde @dominickng @snorp @agi_novanta inkscape -z -e icon.png -w 192 -h 192 icon.svg 😂
preetster I made a thing!
📢 Legra (LEgo brick GRaphics) - draw using LEGO® like brick shapes on an HTML <canvas> element.
🎨 Supports all basic graphics primitives
🌄 Draw images as lego bricks
📦 Nice little 3.4KB javascript package
legrajs.com
@Hicksdesign Support is actually pretty solid: caniuse.com/#feat=link-ico….
@AaronGustafson @kennethrohde I’ll try to come up with a holistic proposal these days hopefully. If done consequently, there’s indeed more than just the icons we might want to make theme-aware, or—maybe more general—`media`-aware.
tomayac 🎉 Chrome now accepts SVG favicons (crbug.com/294179#c73), which means you can style your icon with inline `prefers-color-scheme` and you’ll get two icons for the price of one!
Demo: 🌒 dark-mode-favicon.glitch.me ☀️
(Test it with the last Chromium build: download-chromium.appspot.com) pic.twitter.com/9UJuhOMwbK
@digitarald Looks pretty solid to me: caniuse.com/#feat=link-ico…. I’ll add the info to web.dev/prefers-color-….
@jaffathecake @mathias Also just linked to it in blog.tomayac.com/2019/09/21/pre…, since I have stolen your SVG almost literally… :-) Thanks for running these experiments already in 2016.
@jaffathecake @mathias You were, as always, ahead of everyone else! #Impact
Full credits to @mathias (via bugs.chromium.org/p/chromium/iss…), who independently has created almost the same demo as me (numerous-sulfur.glitch.me) that I didn’t check, but whose link to @jaffathecake’s post jakearchibald.com/2016/svg-media… I followed.
He filed follow-up crbug.com/1026539
@mathias @NathanG @jaffathecake Yeah, also a manual reload is required; the favicon doesn’t automatically refresh on color scheme change as the rest of the page does.
📢 New blog post: `prefers-color-scheme` in SVG favicons for dark mode icons: blog.tomayac.com/2019/09/21/pre… 🌒
🎉 Chrome now accepts SVG favicons (crbug.com/294179#c73), which means you can style your icon with inline `prefers-color-scheme` and you’ll get two icons for the price of one!
Demo: 🌒 dark-mode-favicon.glitch.me ☀️
(Test it with the last Chromiudownload-chromium.appspot.compic.twitter.com/9UJuhOMwbK
@tomus_sherman @NathanG @mathias At least adding a `media` attribute to the icon link doesn’t work yet: bugs.chromium.org/p/chromium/iss….
TensorFlow BodyPix 2.0 has been released, including multi-person segmentation support and a new live demo!
To learn more, read the post by @TYLERZHU3, @oveddan, @GreenBeanDou, @dsmilkov, @karlssonper, @ire_alva, @nsthorat.
Details here → goo.gle/bodypix2 pic.twitter.com/a4qKJu9EJ1
Interesting writeup by @SecurityMB on an @AMPhtml for Email bug based on DOM clobbering: research.securitum.com/xss-in-amp4ema…. ⚡️📧
@jaffathecake @dfabu FWIW, the #ChromeDevSummit livestream links are still up:
Day 1: youtube.com/watch?v=gUteNZ…
Day 2: youtube.com/watch?v=7ohLjc…
slightlylate Lots of great stuff in here; TIL about <lite-youtube>:
github.com/paulirish/lite… twitter.com/fox/status/119…
agektmr Search #ChromeDevSummit video transcripts and watch the video along with the transcript side by side. Nice work, @sw12
devsearch.me/search/
littledan Should JavaScript support a built-in BigDecimal type?
Early draft proposal, going for Stage 1 in December: github.com/littledan/prop…
@kennethrohde @simevidas @vaadin @marcenglund @sayhello No, our current thinking is that the two permissions need to be separate. Reading is _very_ different from writing. But we do appreciate feedback in the form of spec issues: github.com/wicg/native-fi….
@ecbos_ If multiple custom elements depend on the same CSS, you end up doing duplicate work. With a module, you only do it once.
@b1tr0t @firt @mathias No manifest icons, that’s still correct, but here’s bugs.webkit.org/show_bug.cgi?i… asking @webkit to implement it. Apple icons technically are specified as <link>s, not <meta>s: developer.apple.com/library/archiv….
@Paul_Kinlan @gregwhitworth @DasSurma @jaffathecake @kosamari @harleenkbatra 2013, yes. See developers.google.com/web/shows/cds.
/me takes mental note to start a PR to add the missing past other CDSs.
@othermaciej @nickshanks @LucasExqDit @googlechrome @firefox Never received a single notification prompt on iOS Safari, I’d say the restriction is pretty effective! 😜
Everyone else fixing their implementation is @webkit’s chance to get it right evbugs.webkit.org/show_bug.cgi?i…
@ecbos_ Not sure what is meant by that either, but it’s definitely not an elegant way to import CSS for your custom element.
The performance win is around the lower parsing cost and reduced memory overhead compared to CSS in template strings.
The Web Almanac’s Progressive Web App chapter is now complete, including all charts and diagrams (thanks, @rick_viscomi). Check it out in its full glory—and all the other chapters as well:almanac.httparchive.org/en/2019/pwaI. I ❤️ the cute illustrations!
KyleBuchanan8 I just published an article about SEO and web components, a test we did using three approaches to building web components, and the impact they have on how crawlers see your content. Let me know what you think.
medium.com/patternfly-ele…
#WebComponents #usetheplatform #seo
thekitze My next talk will be called “But you’re not Facebook”
@ecbos_ That’s why: github.com/w3c/webcompone…. It’s going to be a great improvement for custom elements.
Making new experiences possible on the web: blog.chromium.org/2019/11/making…
Intent to Explain: Demystifying the Blink Shipping Process, by @yoavweiss: blog.chromium.org/2019/11/intent…. 🧑🔬
@denladeside Happy birthday, Sir, hope you have a brilliant day! 🎂
ARIA Virtual Content makes lazy-loaded “virtualized” content discoverable for screen readers: github.com/MicrosoftEdge/…. #BlinkOn
Sweet, Microsoft @MSEdgeDev have a `forced-color-adjust` (drafts.csswg.org/css-color-adju…) @MSEdgeDev emulation setting. #BlinkOn pic.twitter.com/8ftEeDpMtA
@hkdennis2k @googlechrome @rob_dodson Yeah, the CLI flag should definitely work. The bug is currently still waiting for an implementer.
@hkdennis2k @googlechrome @rob_dodson Can you try the command line flag that is mentioned in one of the comments in bugs.chromium.org/p/chromium/iss…, please?
@hkdennis2k @googlechrome @rob_dodson In GTK/Gnome, set gtk-enable-animations to false. This is configurable via GNOME Tweaks (Appearance tab or General tab, depending on version).
Alternately, add gtk-enable-animations = false to the [Settings] block of
Improving the developer experience for writing structured data: opensource.googleblog.com/2019/11/improv…. The schema.org constraints enforced through TypeScript. Clever.
yoavweiss Origin diversity on the web: a third of traffic is coming from top 100 sites, another third from top 10000, and the last third is the next million+ pic.twitter.com/osoIkz5khy
@DenisTRUFFAUT @petele @jaffathecake See bugs.chromium.org/p/chromium/iss… for details on the discussions around supporting it.
📢 #BlinkOn 11 in Sunnyvale is in full swing. For the people who can’t attend, a lit of the sessions are livestreamed and slide links are available for some: script.google.com/a/macros/googl….
slightlylate 🐡 presentation at BlinkOn 11, and I’m excited that we’re going to be growing the list of folks helping us build web APIs in the future..
Also! Rad filesystem API demo from @vaadin: vaadin.com/labs/native-fs twitter.com/darktears/stat…
TejasKumar_ 🔥 HTML has native support for autocomplete-style dropdowns attached to inputs via the <datalist> element.
This input behaves like a <select> but you can type text in it and choose a specific value.
Incredible. 😍
🎨 Play on @CodePen: codepen.io/tejask/pen/OJJ… pic.twitter.com/NhnK3R6fS9
annevk If your site has notifications, please give this a read: hacks.mozilla.org/2019/11/upcomi…
bunopus Wakelock API: screen will not dim or lock
web.dev/wakelock/
#chromedevsummit pic.twitter.com/QY95YDAQQv
yoavweiss @cwilso To go along with our CDS talk, I wrote about how features make it into Chromium and Blink and the process involved. There’s even a shiny diagram!!
blog.chromium.org/2019/11/intent… pic.twitter.com/0SEG91qSJ5
rmondello iOS & iPadOS 13.3 Beta 2 Release Notes
“Now supports NFC, USB, and Lightning FIDO2-compliant security keys in Safari, SFSafariViewController, and ASWebAuthenticationSession using the WebAuthn standard, on devices with the necessary hardware capabilities.” developer.apple.com/documentation/…
@marcosc @kennethrohde No public signals from other browsers at the moment, yes: chromestatus.com/feature/537772….
Since no one ever implemented it, a PR by @marcosc now suggests the “serviceworker” member to be removed from the Web App Manifest spec: github.com/w3c/manifest/p…. Bye, we merely knew you…
🤯 Wow, this Native File System implementation by @vaadin is mind-blowing: labs.vaadin.com/native-fs/. Open local files 📂, edit 📝 and save 💾, and optionally invite 🤝 others to join in the editing fun. Here’s a write-up by @marcenglund on it: vaadin.com/labs/native-fs#NativeFStwitter.com/marcenglund/st…
@jeffposnick @Snugug @ericlaw Hah, I looked at the code and said “maybe it’s BroadcastChannel” this morning. Thanks for confirming!
@jaffathecake @argyleink Oh, that’s awesome! Thanks, Jake! Now all I need to do is get rid of my booth duties to actually be able to attend talks ;-)
@jaffathecake @argyleink A “Now” link would actually fit nicely in the main nav:
Schedule | Now | Venue | Remote | FAQs
Just an idea..pic.twitter.com/9UaO1iGjP8P8
@jaffathecake @argyleink Yeah, definitely using it from now on :-)
@jaffathecake @argyleink To be honest I didn’t even notice it. It’s below the fold on my device. ¯\_(ツ)_/¯ Knowing what’s coming up next is my one and only use case for installing a conference (web, never native!) app.
@schweinepriestr 🦇 Yes!
@jaffathecake @argyleink Feature request: while the conference is on, when opened from home screen, go straight to the schedule, scrolled to the currently running talk (or the upcoming talk if it’s break time).
@kennethrohde @andreban Come to the PWA/TWA/wasm booth right behind the Fugu booth, we have the script up and running. #ChromeDevSummit
People at #ChromeDevSummit, be sure to stop by the Web Capabilities (aka. Project Fugu 🐡) booth. We’ve been busy to get you the most exciting demos to play with.
People not at Chrome Dev Summit, do try this at home: web-sandbox.glitch.me. Enjoy, atwitter.com/devnook/status…
🦙 llama-pack by @andreban is a command line tool that helps you get your Progressive Web Apps into the Google Play Store via a Trusted Web Activity: github.com/googlechromela…. twitter.com/dalmaer/status…
philwalton Do you find it hard to stay up-to-date with all the latest performance metrics from Google?
I’m excited to announce that we now have a single place where you can find all our metrics guidance and best practices—across all our tools!
⚡web.dev/metricse ⚡pic.twitter.com/kF0SCD8iWDD
rijubrata Yay ! Try out on Chrome canary on Android and let us know👇
01org.github.io/web-test-suite…
Enable the WebNFC flag ⛳ and have fun! twitter.com/kennethrohde/s… pic.twitter.com/nyKSXwhcb2
hdjirdeh @paul_irish and @egsweeny just announced Lighthouse CI, which provides an amazing visualization that shows diff information for all your scores 🚀
github.com/GoogleChrome/l…
#ChromeDevSummit pic.twitter.com/XUlWWNYbaU
ChromiumDev Introducing Largest Contentful Paint and Cumulative Layout Shift!
New metrics to get you a holistic view of the real UX. 👥
→ goo.gle/36NcWAS pic.twitter.com/TeCfa5pRWv
HTTPArchive Just announced at #ChromeDevSummit!
almanac.httparchive.org/en/2019/ pic.twitter.com/G81V3HslOM
addyosmani In the future, Chrome would like to reward sites delivering typically fast experiences, while providing transparency into sites that may load slowly with badging in our UI:
blog.chromium.org/2019/11/moving… pic.twitter.com/MqvCwNGo7Z
ChromiumDev Web Bundles …
… a new web infrastructure that will allow you to distribute your content faster across any format, even if the user is offline. It’s now available behind an experimental flag. Try it out!
→ goo.gle/2q5JXYq
#ChromeDevSummit pic.twitter.com/kgfHG3Jc4i
ChromiumDev The CDS keynote kicks off with a host of new APIs to enable fully capable Web apps.
✅ SMS Retrieval
✅ Contact Picker
✅ Native File System API
And much more! We can’t wait to see what you build with these new capabilities. → goo.gle/2KcIqqB
#ChromeDevSummit pic.twitter.com/LGfPvdVMtG
Google Earth Studio (earth.google.com/studio/) 🌍 uses the Native File System API to store individual image files for “flyover” video exports. #ChromeDevSummit.
At his #ChromeDevSummit talk, @Snugug is showcasing the latest Project Fugu 🐡 APIs with two demo apps: fugu-journal.web.app and fugu-edit.web.app. Exciting stuff that unlocks completely new use cases on the web.
ChromiumDev Welcoming @jonathandavis to #ChromeDevSummit. 👋 twitter.com/tomayac/status…
Apple @webkit’s @jonathandavis is at #ChromeDevSummit and happy to take your toughest questions on Safari and the Web. 😃 Be sure to find him! ⤵️ pic.twitter.com/TOy7NjyxCm
brucel jQuery is used on 85.03% of desktop sites, and 83.46% of mobile sites. React is used on 4.6% of desktop sites. Web Almanac 2019) (almanac.httparchive.org/en/2019/javasc…
rick_viscomi 🎉 Announcing the Web Almanac! 🥳
It’s a free, open source, community-made ebook written by web experts to annually track the state of the web.
20 chapters
27 expert authors
84 total contributors
Start exploring and share your thoughts!
almanac.httparchive.org/en/2019/
@helloguille These are my first ever in-ear noise canceling headphones, so I don’t know. Sorry… ¯\_(ツ)_/¯
My number one use case of the new AirPods Pro may well be to just wear them with no music playing; just the world canceled out. The noise cancelation is freakin’ impressive.
@reillyeon @aerotwist City smells was one of my favorite Yahoo! Research sponsored projects: goodcitylife.org/smellymaps/pro…. They didn’t collect data for San Francisco, but they did for London.
@CharlieCroom How’s your friend at cache invalidation and naming things?
@coltborg @FirefoxFocus @webkit They don’t indeed. Looks like they still compile against the iOS 11 SDK for higher compatibility.
@kennethrohde @voxpelli This is the talk to be at: developer.chrome.com/devsummit/sess… by @Snugug.
@mischmerz We’re discussing, internally and externally, to come to the best possible outcome, and yet we don’t necessarily always all agree on the final decision, but we make sure all voices were heard and had a chance to speak up.
@coltborg @FirefoxFocus Firefox Focus, like all iOS browsers, is using (by force) @webkit as its rendering engine, most probably through a WKWebView or less likely through a UIWebView. If the app is compiled against the iOS 13 SDK, then the media query wi
Not an expert, but some of Brave’s points against privacy budgets seem to be perfectly valid: brave.com/brave-fingerpr…. I never considered the budgeting to be a fingerprint vector. twitter.com/brave/status/1…
@mischmerz Do make all the noise of the world on other channels, but please ideally steer the discussion to the public and open-to-all group.
How to read a WebPageTest waterfall chart: nooshu.github.io/blog/2019/10/0…. This article has seen some updates since I have shared it. 📖
@mischmerz Yes, I’m following the discussion here: groups.google.com/a/chromium.org…. This is also where the discussion should stay… :-)
@kipkniskern Sorry for that, it was a problem with the Unpkg CDN. Please try again now: dark-mode-class-toggle.glitch.me. 🌒
@kipkniskern @MasterDevwi @MSFTEdgeDev @Media @_scottlow @gregwhitworth It’s definitely supported on the new Chromium-based Edge: web.dev/prefers-color-….
Getting Started with Web Serial: developers.google.com/web/fundamenta…. A new codelab for the BBC micro:bit that teaches you about yet another Project Fugu 🐡 API: Web Serial.
It’s great to work on a project that many people are excited about… 😆
@philnashsh on Project Fugu 🐡 in quoted tweet: ⤵@olivierleplususdocs.google.com/presentation/d…i@kennethrohdedeyoutube.com/watch?v=03M6FO…5@mayeedwin1n1docs.google.com/presentation/d…n@felipenmouradocs.google.com/presentation/d…twitter.com/philnash/statu…
@petele 🤦
I challenge you to build something with icanhazdadjoke.com/api.
noopkat @slightlylate @ffconf It has viewport issues that I need to fix don’t judge me but it didn’t work on Android anyway 🙈 press start, then B and then A progressive-web-boy.glitch.me
This #AskChrome question in the quoted tweet by @chriscoyier made me re-read @philwalton’s excellent(!) article on obtaining Container Query like behavior with Resize Observer: philipwalton.com/articles/respo…. 👏 twitter.com/chriscoyier/st…
@Oliver41618769 I’ve just responded in StackOverflow: stackoverflow.com/a/58767177/625…. Android Remote Debugging is documented here: developers.google.com/web/tools/chro…. Hope this helps!
@Justinwillis96 Any plans on standardizing the “features” Web App Manifest property (w3c.github.io/manifest/) that this—at least weakly—depends on? It doesn’t seem to be a thing with native app stores; they just use long/short descriptions:support.google.com/googleplay/and…developer.apple.com/app-store/prod…
With the introduction of foldable devices the need for organizing web content along the resulting window segments arises, for example, a 🗺 map on the left and a 📍 POI description on the right segment. Here’s a proposal how this could work in the futgithub.com/MicrosoftEdge/…
mathias 💡 Fun fact: this works with `class` as well since V8 desugars class declarations of the form `class C { … }` to `let C = class C { … }` under the hocs.chromium.org/chromium/src/v…Ptwitter.com/ChromeDevTools…bL4P
JohnMu Making a site work with dark-mode is surprisingly easy, it can be just a bit of CSS that uses media-queries to switch color schemes. No need to be a black hat to join the dark side!
css-tricks.com/dark-modes-wit…
web.dev/prefers-color-…
developer.mozilla.org/en-US/docs/Web…
@slightlylate Wow, we should hand them out after each site clinic at our events.
digitarald Firefox’s “JavaScript Startup Bytecode Cache” helps sites that optimize cache hit rates and are often loaded by users (since 58).
After 4 page loads the generated bytecode will be cached and future loads skip parsing.
Read more how it works: blog.mozilla.org/javascript/201… twitter.com/tomayac/status…
@pylapp @olivierleplus Off-by-one error in your emoji ;-)
It’s officially the 🐡 blowfish emoji as rendered by Android. github.com/googlefonts/no…
@argyleink Also other logical props like `padding-block-start` for the win indeed.
slightlylate Super excited about Googlebot support for Web Components, so wrote a tiny test to verify: Googlebot understands Shadow DOM!
What you see on the page, and in devtools, is what will get indexed, regardless of Shadow/Light content location thanks to tree flattening. twitter.com/slightlylate/s… pic.twitter.com/xYyJmGV0ga