bramus My last full post of the year is a fact. Not a “year in review” one but an article covering “Higher Level Custom Properties”, a #CSS proposal that excites me very much. twitter.com/bramusblog/sta…
@stoyanstefanov Awesome job and pet peeve resolved, thank you!
Try slapping some `:root { color-scheme: dark light; }` on its CSS and with the present baseline design you’d get a decent enough dark mode for almost free.
More background:
👉 web.dev/color-scheme/web.dev/prefers-color-…
@samthor Yeah, it’s definitely not an “uninstall as if it never happened” for the majority of all apps, and the same is true for most Windows apps.
(My bug [hopefully obviously] is of course about deeper system-level integration for settings like notifications, not uninstall per se. PWAs on macOS can be uninstalled with Finder [among other ways], just like all native apps: support.apple.com/en-us/HT202235.)
rick_viscomi As of October, 10.6% of the web is using native image lazy loading, per @HTTPArchive. That number was 1.5% in July! 🤯
This appears to be _entirely_ driven by WordPress at 28.9% of WP pages, which makes up one third of the web.
httparchive.org/reports/state-…
left: all web
right: WP pic.twitter.com/RQnDw4UZ56
Soon you’ll be able to uninstall PWAs installed from Chrome on Windows through the regular Windows system-level uninstall flow (just like with Edge). I have a bug open for making the same happen on macOS: bugs.chromium.org/p/chromium/iss…. androidpolice.com/2020/12/22/chr…
Small but nice trick used by Apple to make its Timer app more intuitive. Good digging by @_lhermann. lukashermann.dev/writing/why-th…
@DanShappir Not just in Chrome, that’s how it’s spec’ed: html.spec.whatwg.org/multipage/imag….
@passle_ I found the most reliable way to communicate is by wrapping the calls as in github.com/GoogleChromeLa…. If you’re running the extension in an enterprise environment, one of the reasons for the error may be blocked sites (like for Google, extension
@ricmac @dalmaer On operating systems with true browser engine choice Progressive Web Apps will integrate even closer with said OS. Electron will become less and less of a necessity. We’ll see some stunning Project Fugu 🐡 case studies, but the market
xkcd First Thing xkcd.com/2404 pic.twitter.com/uYuL8zo2Ju
FlowBrowser On the fifth day of Christmas, Flow Browser gave to me… a download for the Raspberry Pi 400: support.ekioh.com/download/
Read more: ekioh.com/blog/flow-rasp… pic.twitter.com/oqXmB7mEB5
@mhartington ¯\_(ツ)_/¯ They may have changed it.
(Happy YouTube Music customer here, I stopped caring when my free Apple Music month expired.)
@mhartington Last time I tried it, it even did the same on desktop.
@aadmathijssen `:root { color-scheme: dark light ; }`
(Forgot to close the parentheses.)
@aadmathijssen For a more immersive experience, try adding `:root { color-scheme: dark light` to the CSS. On latest browsers, this also turns scrollbars etc. dark.
More info: web.dev/color-scheme/ and web.dev/prefers-color-…. Also see the referenced to
wesbos Awesome article from @Stegosource on how to get the benefits of TypeScript in a regular JS project
austingil.com/typescript-the…
adrian_twarog CSS Reset vs CSS Normalize.
Something I always confuse has been made so much easier with this visualisation…
.elijahmanor.com by { author: @elijahmanor } pic.twitter.com/LwNN2Ucr1i
@justmarkup Frameset was Ajax before AJAX. Actually, (i)frames is what powers mini apps today; and we can learn from their success on the Web! See slides 54 onwards of my deck goo.gle/learning-from-…. You might find the entire deck interesting actually.
@ddprrt At the lower right corner of the knowledge panel you should see a “Feedback” link that you can use. Some schema.org markup that identifies your creations as yours will also help.
@appsforartists @Vjeux The “getting the data into the laptop” part is easy enough with the library you have linked to. I’m not aware of a way to “tee” the data, though. Maybe @reillyeon is?
For doing it manually, there are definitely ways to emugithub.com/mart1nro/joyco…
@hashseed Love how “Freizeit” appears before “Studium” in your bookmarks. Work-life balance!
Into My Veins xkcd.com/2402/ #xkcd
@denladeside @samthor This looks like it’s using the Presentation API: w3c.github.io/presentation-a…. Santa playing it safe. 😂 Can’t risk a Fugu 🐡 intoxication on the big day…
If you’re interested in the background story of how PWAs came into being, read @slightlylate’s thread. Some of the side conversations are worth a read, too. twitter.com/slightlylate/s…
@denladeside @samthor It’s in our bedroom. Together with all my test devices and video recording equipment. My wife hates all of it.
@henrylim96 Hope it made you smile a little 😃! Happy holidays!
@addyosmani @__apf__ @shanselman @vilterp DevRel of the Text Fragment URL feature here 👋. We’ve got you covered, see web.dev/text-fragments… for your options.
@addyosmani Great summary, thanks Addy!
I tripped over “Outside of a meta-framework (like Next.js), you often have to tackle this optimization manually, replacing import() statements with dynamic imports.”
You probably meant `import` statements, not
regocas Oriol Brufau form @igalia has just published a technical blog post explaining the implementation of ::marker pseudo-element in @ChromiumDev: blogs.igalia.com/obrufau/2020/1…
Despite it might look like a small feature, it ended up being quite a project. Kudos for the awesome job there! 👏
@DasSurma If you try WebHID, some of the “getting orientation data from gyroscope and accelerometer” code from Joy-Con WebHID (blog.tomayac.com/2020/12/21/rel…) _might_ be useful—at least for the basic mechanics:github.com/tomayac/joy-co…2. Right now, I can’t
dhh Hotwire aka NEW MAGIC is finally here: An alternative approach to building modern web applications without using much JavaScript by sending HTML instead of JSON over the wire. This includes our brand-new Turbo framework and pairs with Stimulus 2.0 😍🎉🥂 hotwire.dev
@yoichiro @agektmr Funny that the domain name is German. “Eisbahn” means “スケートリンク” ja.m.wikipedia.org/wiki/スケートリンク
@yoichiro @agektmr This is super cool and exactly one of the use cases for which this API was created! Thanks for sharing.
(Translated via …cyoafdy-www-eisbahn-jp.translate.goog/yoichiro/2020/…)
@johnwilander @jaffathecake @pes10k @slightlylate @jasvir @estark37 Which, effectively, it’s doing already, since the service worker takes over only after initial load the earliest. Just a realization. 🤯
@johnwilander @jaffathecake @pes10k @slightlylate @jasvir @estark37 The browser could display different certificates for initial load and follow-up loads. 🤔
letsencrypt Thanks to innovative thinking from our community and our wonderful partners @IdenTrustGov, we have a solution that allows us to maintain wide compatibility after our cross-signed intermediates expire.
letsencrypt.org/2020/12/21/ext…
tomayac 📢 New blog post: Releasing Joy-Con WebHID, a WebHID “driver” for Nintendo Joy-Con controllers so you can use them in the browser. Be sure to check the demo 🎮 and see me (and try it yourself!) play `chrome://dino` 🦖 by jumping. Video in the post: blog.tomayac.com/2020/12/21/rel…
@simevidas Not yet as far as I can tell.
@kennethrohde Official game soundtrack: music.youtube.com/watch?v=Xhzpxj…. 🏃
stshank Now coming to Chrome (and perhaps other Chromium-based browsers). But don’t expect to see this in Safari or Firefox, whose developers see these hardware interfaces (like Web USB and Web Bluetooth) to be too risky. twitter.com/tomayac/status…
📢 New blog post: Releasing Joy-Con WebHID, a WebHID “driver” for Nintendo Joy-Con controllers so you can use them in the browser. Be sure to check the demo 🎮 and see me (and try it yourself!) play `chrome://dino` 🦖 by jumping. Video in the post: blog.tomayac.com/2020/12/21/rel…
Integrate your PWA deeply with the operating system with the File Handling API. Another great article (of many) in the ❄ PWAdvent calendar. pwadvent.dev/day/21/
Tell your story with Charts, by @Lipis. Just copy and paste one or two columns of tabular data into @excalidraw and be stunned. blog.excalidraw.com/tell-your-stor…
ChromiumDev ☝️Take your web apps to the next level ☝️
Reach the maximum number of users with your application. @b1tr0t covers a handful of recently released capabilities in this video.
🌪 Take the whirlwind tour → goo.gle/34nQtL2
#ChromeDevSummit pic.twitter.com/wTNeqQ7Wpp
marcysutton Rounding out the week with a new blog post on Chrome `content-visibility` and accessibility from my time working on @forem! 🤓
TL:DR; this feature suppresses HTML semantics in assistive tech in favor of faster rendering performance. So use it wisely! dev.to/marcysutton/co…
I learned to love the Same-Origin Policy: css-tricks.com/i-learned-to-l…. Good story on an Exif data leakage spec fix for images served cross-origin.
@LeonieWatson If this is about iheartmob.org, try the email heartmob@ihollaback.org instead.
@programmingart Congratulations, Dr. Marx! 🧑🏫
slightlylate In 🐡 news, the Blink API OWNERS just approved Web HID and Web Serial for launch in 89!
Check out François’s articles to see the amazing stuff they make possible:
web.dev/hid/
web.dev/serial/
…then follow @Vincent_Scheib for the cool demos he finds. twitter.com/slightlylate/s…
aweary here’s the engineering blog post on one of the big problems we faced with keyboard navigation at @discord: focus rings!
we’ve also released our solution as an open source library, react-focus-rings 💍
github.com/discord/focus-… twitter.com/discord/status…
@robertnyman @kennethrohde (It was a joke, I know some of these things are up for grabs; and screens aren’t.)
Fond memories of GDD India where we were stuck in a cab in a traffic jam and suddenly saw 3 participants on 1 motor scooter pass by us with 4
@PixelAmbacht @glitch @TheRealPomax @sayhello provides this demo: oyiptong.github.io/opentype.js/fo…. Maybe helpful in your context as well.
@PixelAmbacht Correct. See web.dev/local-fonts/#a…. Our partners didn’t see enough flexibility in table access, so it was removed and replaced with a format they could do anything with.
wanderview We’ve been working on a native API to more easily match URLs in the browser called URLPattern. While not complete, its now in a useable state in Chrome Canary behind a flag. Read about our latest efforts here:
github.com/WICG/urlpatter…
A couple of highlights below. pic.twitter.com/3k2iSdQZHm
@robertnyman @kennethrohde Stolen.
I tried to do the same with the 70” displays. While I managed to squeeze three of them in my backpack and smuggle them through customs, I slipped on the last step of the staircase of our house and broke them.
@zachleat @briankardell I read this and immediately checked my Web mentions code. Past me actually was smart enough to stick `loading=”lazy”` on the avatars (self high five); I had just missed the fallbacks. Fixed in github.com/tomayac/blogcc…. Thanks for sh
@PixelAmbacht Sigh, it’s a @glitch glitch again. Try my copy on GitHub: github.com/tomayac/font-s…. The demo is here: tomayac.github.io/font-select/de….
@mathias @sergiomdgomes @ChromeDevTools Here we go: bugs.chromium.org/p/chromium/iss…. Thank you!
@mathias @sergiomdgomes @ChromeDevTools Will do!
@robertnyman @kennethrohde Stole it from the office?
MozDevNet The 2020 MDN Web Developer Needs Assessment (DNA) report is now available! 🎉📖
This year, browser compatibility remains the top pain point.
You can read the full report here: insights.developer.mozilla.org
Massive thanks to all who contributed to the survey!
hacks.mozilla.org/2020/12/2020-m…
@sergiomdgomes I always thought it was just me being too stupid to handle the columns. Can we make this behave like Excel (double-clicking the column separator automagically fixes everything), @ChromeDevTools?
anssik Screen Fold API allows web developers to craft web experiences that adapt to various foldable device postures e.g. flat, tent, book… Kudos to the @w3c Devices and Sensors WG for this milestone! ⛺️↔️📙↔️💻↔️📱w3.org/TR/screen-fold/ twitter.com/w3c/status/133… pic.twitter.com/4fiWcnZVkA
Unlocking Creativity With Font Access, @slightlylate’s take on the Local Font Access API in this year’s ❄ PWAdvent calendar. pwadvent.dev/day/18/
@monteslu @slightlylate It was on my list for a long time to give this site a mention. The present article was the perfect occasion! Thanks for maintaining the site!
slightlylate PWAs getting capable enough to help teams avoid becoming incidental browser vendors?
😎
blog.excalidraw.com/deprecating-ex…
via @tomayac pic.twitter.com/oMnJqUpPxT
@html5test @reillyeon @slightlylate More people have this need it seems:
github.com/micwallace/Web…
developers.google.com/cloud-print/do…
🖨
@henrylearn2rock @GoogleStadia It seems like they always force-push you to the app based on user-agent sniffing. Sorry… ¯\_(ツ)_/¯
@fernap3 @excalidraw Have you tried it? Did you notice the careful UI considerations for the notch phones? The advanced features are progressive enhancements and we _do_ want browser vendors—including Apple—to support more features, but we don’t wan
@tomhermans This is a known issue that was fixed in later versions. The underlying bug was crbug.com/1150493. Thanks for reporting nevertheless.
It’s a pleasure to see Project Fugu 🐡 help unlock deprecations like this. The best is yet to come… So many exciting features in our pipeline, looking forward to bringing them t@excalidrawaw. Meanwhile, happy ✍️ Excalidrawing everyonetwitter.com/excalidraw/sta…
excalidraw Why we’re deprecating Excalidraw for Desktop.
A great post by @tomayac 💕
blog.excalidraw.com/deprecating-ex…
@nhoizey @firt @GoogleStadia This can bite actually. Android Chrome suggested to install the PWA, but the PWA is useless on Android due to its UA sniffing. It should `prefer_related_applications`. Bug filed :-)
@nhoizey @firt @GoogleStadia PS4 should work. For gaming, it needs to be network-connected of course, but I agree, a simple offline fallback page wouldn’t have hurt. It’s one of the bugs I have filed internally. twitter.com/tomayac/status…
@nhoizey @firt @GoogleStadia You get best latency with the official Stadia controller, since it connects directly to the cloud and doesn’t go through the device like regular gamepads.
@nhoizey @firt @GoogleStadia At the moment it’s a semi iOS-optimized web app without service worker, but with a web app manifest. Gaming works well, though (limited with touch controls, but well with a controller, which doesn’t have to be the officialpic.twitter.com/ZyNPQ0GB3e
@nhoizey @firt @GoogleStadia The workaround would be to create gaming personal account.
@nhoizey @firt @GoogleStadia Stadia should have launched in France, but is not supported on “G Suite, Google for Education, and certain other[?] managed Google accounts”.
support.google.com/stadia/answer/…
@firt @GoogleStadia Filed a couple of bugs. The splash screen, by the way, is defined, but to a set of solid color images (e.g., ssl.gstatic.com/stadia/gamers/…).
@henrylearn2rock @GoogleStadia Looks like user-agent sniffing. Are you logged in to your Google account? Do you have a paired controller?
ianbicking I wrote a new blog post with my thoughts about Mozilla, Firefox, focus and product and revenue: “Firefox Was Always Enough” ianbicking.org/blog/2020/11/f…
@firt @GoogleStadia I’ll have a look tomorrow on my devices and see how it plays out in a supported country. Thanks for the report already!
@firt @GoogleStadia It only shows that when you’re logged out. Once you log in, you end up on the regular Stadia home screen with your games ready to be played.
Stadia comes to iPhone and iPad with new iOS beta. @GoogleStadia is now a PWA: stadia.com. Test it on the free tier! 🎮 theverge.com/2020/12/16/221…
Vincent_Scheib Intent to Ship WebNFC! groups.google.com/a/chromium.org… Learn about the API: web.dev/nfc.
shadeed9 ✍️ New Article: Handling Short And Long Content In CSS
I wrote about handing varying content lengths in CSS. I started with the problems, the techniques to solve them, and some use-cases and examples. Happy reading!
🔗 ishadeed.com/article/css-sh… pic.twitter.com/X0WF7PZl6l
Really cool demo that allows you to live-caption yourself: live-caption.ably.dev. See the quoted tweet for the link to a write-up. If this eventually happens on-device with no delay, it will be a life changer for folks like my dad, who’s hard of hearitwitter.com/denladeside/st…
Highlights from Chrome Dev Summit 2020: bitsofco.de/chrome-dev-sum…, by @ireaderinokun.
@mrdoob Super well deserved! Congratulations, Ricardo! 🎈
argyleink #CSS `::first-line`
A dynamic and responsive pseudo selector that targets the first line of text.
p::first-line {
font-style: bold;
background: hotpink;
color: white;
}
See how ::first-line adapts to text wrapping, super cool! pic.twitter.com/4v2C6h7xQ2
cassiecodes The internet’s peaked. We can all quit our jobs now.
No one will ever manage to make a better thing on the web.
artsandculture.google.com/experiment/blo…
MozDevNet Yari has landed! 🎉
After several intense months of work on such a significant change, the day is finally upon us: MDN Web Docs’ new platform (codenamed Yari) is finally launched! hacks.mozilla.org/2020/12/welcom…
maudnals YT is up again ⏩ Take a peek at the privacy budget, a proposal to prevent browser fingerprinting:
🎬 goo.gle/privacy-budget…
⚡️No time for that? 2-minute TLDR in the thread below ⤵️ pic.twitter.com/vOG8uH91m5
jeffposnick 🤔 Want to create your own strategies and plugins for @workboxjs?
👍 This article, and the accompanying video from last week’s #ChromeDevSummit covers everything you need to know:
web.dev/extending-work…
Paul_Kinlan Inspired by .new domains, I wrote a little demo web app that let’s you create a quick launcher on Android (and I’m told on Edge on Windows too)
shortcut.cool
Click Create Launcher, then Install.
Feedback and bug reports appreciated. pic.twitter.com/YwEwQEjHwP
@rowan_m Have you tried hooking up your Joy-Cons to it? I may have a module that makes this a breeze: npmjs.com/package/joy-co…. Hide one controller in your hoodie and impress your friends with time that you can bend by, erm, bending.
@denladeside @kylealden @jacobrossi @adamdbradley @kennethrohde @petele Haven’t checked all replies in all detail yet (and neither the linked to site), but in many cases youmightnotneedelectron.com.
@DenisTRUFFAUT For JavaScript, set the Unicode flag:
/[\p{L} ]+/gmu
developer.mozilla.org/en-US/docs/Web…
The Wikimedia foundation has made a @Wikipedia app for @KaiOStech available and open-sourced it (github.com/wikimedia/wiki…), including the market research (upload.wikimedia.org/wikipedia/comm… [PDF]) that led to the decision to do so. It works very well, read more here:diff.wikimedia.org/2020/12/10/gro…
@slightlylate @phae Not sure this would have helped. Thinking back to Duke Nukem Forever…web.stanford.edu/group/htgg/sts…eG [PDF]en.m.wikipedia.org/wiki/Developme…Gd
hashseed Stumbled over an obscure @ChromeDevTools feature: named loggers. pic.twitter.com/5Px34h0GlV
@_gsathya What’s most confusing is that `forEach()` now works on `NodeList`, but other array methods don’t.
stoyanstefanov Web performance calendar day 12 with @patmeenan on Web vitals and WPT calendar.perfplanet.com/2020/analyzing…
intenttoship Blink: Intent to Ship: import maps (inline only) groups.google.com/a/chromium.org…
@ericlaw @briankardell Oh, that’s new then, thanks for letting me know. Anyway, Brian’s use case requires more flexibility. We have a long thread going…
@briankardell At least you would have to use a browser that supports extensions (Chrome doesn’t, maybe Kiwi works play.google.com/store/apps/det…), or extract the logic of the content and background script into a bookmarklet.
@briankardell Even if you decide not to, the tips from the last few tweets will definitely allow you to fix your problem, and be it by hardcoding the strings according to your preferences.
@briankardell It could be something like:
Prefix: “Quote: “” +
selected text +
Suffix: “”—” +
URL
All fields would be configurable. You could optionally expose additional different options in the context menu (Copy, Copy with Text).github.com/GoogleChromeLa…
@briankardell Actually, I’d happily merge a PR of yours that adds this in a configurable way: prefix + URL + suffix. Are you up for it? No pressure, I can do it myself if enough people ask for it. developer.chrome.com/docs/extension…
@briankardell You could very easily patch my extension to do all this for you. Just add your desired text around the `url`: github.com/GoogleChromeLa…. You get the originally selected text (and some more surrounding text) here: github.com/GoogleChromeLa….
At
If you only take one thing away from this brilliant video ⤵️ then to make your free text inputs (like for the name) use this regular expression for validation:
/[\p{L} ]+/
\p{L} matches any kind of letter from any language, see regex101.com/r/o10xne/1twitter.com/jennylg/status…
@briankardell 1) Visit chrome://flags
2) Search for “Copy link to Text” flag
3) Profit. This copies the text and the text fragment URL. This builds upon the success of chrome.google.com/webstore/detai….
nic_o_martin #Barcode or #FaceDetection directly in the browser? Sure!
Today, @tomayac writes about the #ShapeDetectionAPI pwadvent.dev/day/11/
#PWA #PWAdvent
@MinnowCulture @jaffathecake To be expected, albeit there is a toggle for enabling the CSS Painting API in the Safari that ships with iOS 14.3 (18C65). While it now passes Jake’s feature test (below), the demos currently don’t work yet.
const demosSugithub.com/jakearchibald/…
jaffathecake 📝 Using the CSS paint API to create ‘random’ effects that react well to layout and style changes.
I had fun making the interactive examples for this one.
jakearchibald.com/2020/css-paint…
Compiled click stats for our Project Fugu 🐡 demos in #ChromeDevSummit Adventure. Happy that they were super popular (competing w/ a ton of other demos):
🦖 goo.gle/chrome-dino-we…—252
📹goo.gle/camera-pan-til…C—229
goo.gle/window-placeme…N7goo.gle/fonts-clipboar…pic.twitter.com/cxFx1Ne4JE
Final #ChromeDevSummit Adventure achievement unlocked. I now have the Legendary Fishing Rod. It’s rainbow colored 🌈🎣 and stunning beautiful. Project Fugu 🐡, the best is yet to come, but now for a couple of quiet days after the event and before pic.twitter.com/ETfIiAj4Vl
@felixarntz Nice story and impressive walk!
(Feature request for the format, which you can maybe pass on to the right channel: if a story has no sound throughout, don’t display the loudspeaker icon. I “unmuted” your story, only to see a “this st
jeffposnick This is a fantastic, practical guide to caching on the web, motivated by @samthor’s experiences working on web.dev.
Give it a watch!
youtube.com/watch?v=tprJYF…
Vincent_Scheib Devices on Web presentation Video: youtube.com/watch?v=ZIZqmX…
_developit Here’s how we can move from ES5 to modern JS.
Module authors: ship modern JS using the “exports” field. Just make sure it’s a semver major release.
App developers: you’ll need to update your configs a bit at some point. Likely when you update your build tool. pic.twitter.com/fQ3m2v5SAM
kennethrohde Project Fugu 🐡 is where the party is at! pic.twitter.com/PxEVSNK0O4
grigs 🎉Announcing Lighthouse Parade!🎉
Open source tool built by @emersonthis and @_calebeby at @CloudFour that spiders a website, runs Lighthouse on every page, and pulls the results into a spreadsheet so you can find the which pages you need to fix.
cloudfour.com/thinks/big-pic… pic.twitter.com/qN57yOl4jz
rodydavis Want to build a design system with Web Components? 👀
Join @asyncLiz and myself in our latest #ChromeDevSummit video where we (@materialdesign) talk about how to design at scale with #webcomponents 😎
Design once. Build once. Use everywhere.
🦆 youtu.be/DBcz_bGcHgk
@rodydavis @polymer @asyncLiz @materialdesign Great talk, congratulations! 🎈
Super tiny thing: the speech bubble handle (for the lack of a better word) should probably update its border color in dark mode. 💬 🦆 pic.twitter.com/1G7nTxS5Dp
@webwizart @slightlylate Joy-Cons? #ChromeDevSummit Adventure controller coder here. Pair them first at the OS level, then they will be recognized in the game when you press a button. Note that the two Joy-Cons form a virtual controller together (use the
_mysteryDate Fall for Canvas2D all over again…
Discover new features for the 2D drawing API at the Chrome Developer Summit, happening now!
youtube.com/watch?v=dfOKFS…
tomayac The Project Fugu 🐡 demos in #ChromeDevSummit Adventure:
Play Chrome Dino 🦖 with WebHID: goo.gle/chrome-dino-we…
Manage 1+ screens and keyboard lock: goo.gle/window-placeme…
Pan, tilt & zoom a camera: goo.gle/camera-pan-til…
Use local fonts and files: goo.gle/fonts-clipboar…
SetSnailStudio We just launched CDS Adventure! It’s a virtual conference where we reimagine physical conferences at @googlechrome. In the game you can explore the virtual world, socialize, collect swag and of course play games like miniature golf! goo.gle/cds-adventure #ChromeDevSummit pic.twitter.com/p4BQyigLlp
@simevidas @jensimmons Thanks for looping me in. Migrating extensions was easy enough, but the submission process had a steep learning curve for me as a Web developer with no App Store experience. I documented my steps for others and myself: blog.tomayac.com/2020/11/09/sub…
val_deleplace #ChromeDevSummit and @tomayac teaching me WebHID, pushing serendipitous HID tech 🎮 to infinity and beyond 🍻
tomayac.github.io/chrome-dino-we… pic.twitter.com/1cGXZRS1I4
📢 Be sure to check out the WebHID demo in #ChromeDevSummit Adventure! Here’s a preview of what to expect: youtu.be/HuhQXXgDnCQ. 🦖
Find it here developer.chrome.com/devsummit/adve… in the game, or use the direct link goo.gle/chrome-dino-we…. (Requires Nint
ChromiumDev 🌇 Rise and shine as we start day 2 of the first ever virtual #ChromeDevSummit!
Join us as @kosamari shares how we changed the way we work, from remote work to new initiatives.
🔴 [LIVE] now → goo.gle/cds2020 pic.twitter.com/aVkEEf4q0J
Meet the Project Fugu 🐡 and PWA team at developer.chrome.com/devsummit/adve… in #ChromeDevSummit Adventure!
twitter.com/petele/status/…
@henrylim96 @tcmg @ChromiumDev (By the way, you can just put the current URL here, the deeplinks work!)
@kennethrohde @itsmeandresito @kosamari has made us some stickers in the past I think.
If you do anything that involves media on the Web, using the Media Session API is a must: pwadvent.dev/day/10/. 🎞🎵
Drowning in tabs? Navigate to chrome://flags/#chrome-labs in Chrome Canary, enable Chrome Labs 🧪, and then Tab Search. You can now search your tabs from each browser window. See the screenshots for the steps. pic.twitter.com/4m4mK10Rr5
@henrylim96 @SetSnailStudio @ChromiumDev Good catch. We’ll look into this as well! Thanks!
@henrylim96 @SetSnailStudio @ChromiumDev Got it. We will fix the link. Thanks for the report!
@henrylim96 @SetSnailStudio @ChromiumDev Was this in the HTTP 203 area or in the CSS area?
@henrylim96 Thanks, reported to the team. We’re having a look. 👀
@skypackjs 🟨🟨🟨🟨🟨
🟨🟨🟨🟨🟨
🟨🟨🟨🟨🟨
🟨🟨🟨JS 🟨
🟨🟨🟨🟨🟨
Not sure which one is better. 😂
We’ve just committed some improvements to #ChromeDevSummit Adventure: touch (or mouse) controls on desktop/tablet (apart from mobile, and—independent from that—apart from gamepad controls). You can also now play in gorgeous full screen mode. Rollingpic.twitter.com/hFw0meYEU1
@henrylim96 Haha, seems like the tip helped. Welcome to Chrome Island! 🏝
@JashSayani Gone 🎣 and 🏌️. At a conference. As one does. 😂
@lavrton @Vjeux @excalidraw Playing with this app now. You might be interested in local fonts access: web.dev/local-fonts/. I have a custom element that you could try: github.com/tomayac/font-s… (demo: tomayac.github.io/font-select/de…).
@rowan_m I re-read that twice, then thrice (actually twice was sufficient, but I couldn’t resist using that word), and it made sense eventually.
#TIL about deprecate.it and mitigation.supply—Two resources that track adoption of to-be-deprecated features and mitigation methods that have been put in place.
(via@mikewestt)
addyosmani Chrome Dev Summit 2020 is on! Catch the videos free now for all day 1 talks including:
🔧 State of Speed Tooling
🧪 Optimizing UX for Core Web Vitals
⚡️ New features for Web Performance
bit.ly/cds-2020 🥳
and tune in for day 2 live 🎙 pic.twitter.com/V7hW6xLlkZ
Re: the quoted tweet, since there’s no boat 🚣, try shuffling the letters and try `atob()` and `btoa()` on something that keeps changing when you walk. The #ChromeDevSummit Adventure will open again in a couple of hours. Meanwhile just leaving this hedeveloper.chrome.com/devsummit/adve…twitter.com/jeffposnick/st…
Una 🎨 Cross-browser Houdini worklets that break the boundaries of what’s possible with existing CSS?!
+ Resources?!
+ Usage tutorials?!
🦁🐯🐻 OH MY!
➡️ Check out houdini.how yourself now
& follow #ChromeDevSummit where I’ll be going over this tool + more tomorrow! pic.twitter.com/fGV4fy2YW4
@skypackjs 🟨🟨🟨🟨🟨
🟨🟨🟨🟨🟨
🟨🟨🟨🟨🟨
🟨🟨🟨JS🟨
🟨🟨🟨🟨🟨
ChromiumDev Chrome OS is adding Play Billing support for PWAs published in the Google Play Store that use Trusted Web Activity, which is ready for testing behind a flag, in Chrome OS 88!
📱What’s more, it’ll be supported on both Chrome OS & Android!
Read the blog → goo.gle/CDS20PlaySuppo… pic.twitter.com/ardnMRM9sr
jaffathecake 🎨 Lots of new bits in squoosh.app. Some new features, new design, and big performance gains!
Motion Illusions. The “moving but not actually moving” illusions that you’ve been seeing on Twitter recently explained in technical depth. jake.vision/blog/motion-il…
rick_viscomi 📣 Introducing the 2020 Web Almanac!
This is our second annual state of the web report: a free, open source ebook made by the web community.
22 chapters
40 expert authors
116 contributors
I’m so proud of all of the hard work that went into this! 🎉
almanac.httparchive.org/en/2020/
w3cdevs One last 🎬 recording of a #w3cTPAC breakout session is now available: “Learning from #MiniApps” or what Web #developers can learn from mini apps and their developer experience - youtu.be/6DT4yZL1GLQ (slides at goo.gle/learning-from-…)
@kennethrohde @petele @denladeside @tcmg Tom Greenaway has been looped in, hopefully he can resolve this.
@kennethrohde @petele @denladeside @tcmg It’s in the game FAQ. Hamburger menu, then feather, then FAQ. pic.twitter.com/idgmhNBu42
@petele @kennethrohde @denladeside @tcmg Probably he’s logged in as a “guest”.
@kennethrohde Can’t take credit. This was contributed by an unknown to me developer completely out of the blue: github.com/tomayac/chrome….
@denladeside @petele Yeah, I was just chatting to you in the game :-)
@petele @denladeside And the PTZ demo specifically was built by François! 🙇
Super proud to be in the Credits of #ChromeDevSummit Adventure 😊!
Even prouder to have managed it into the game twice through a glitch 👯.
But absolutely proudest about the fact that for one short glimpse of history I was the coolest dad of the worpic.twitter.com/NH7N8xZRJj
@denladeside @UnJavaScripter Same. The selfie was with my stuck virtual self that I can no longer control. Still counts, it was me for sure… :-)
@UnJavaScripter LOL, this is so cool. Virtual hug 🤗!
UnJavaScripter Selfie with the awesome @tomayac at #ChromeDevSummit pic.twitter.com/B1VCCiu5Lc
henrylim96 #ChromeDevSummit Adventure works with gamepad! 🤯🎮
developer.chrome.com/devsummit/adve…
@tomayac @ChromiumDev pic.twitter.com/dcD3zoMztL
The Project Fugu 🐡 demos in #ChromeDevSummit Adventure:
Play Chrome Dino 🦖 with WebHID: goo.gle/chrome-dino-we…
Manage 1+ screens and keyboard lock: goo.gle/window-placeme…
Pan, tilt & zoom a camera: goo.gle/camera-pan-til…
Use local fonts and fgoo.gle/fonts-clipboar…
Join us at #ChromeDevSummit Adventure, a virtual conference environment where you can explore a huge map of conference booths with a ton of demos. And it supports gamepads! 🎮
👉 developer.chrome.com/devsummit/adve… pic.twitter.com/eTeBVSW3XT
tomayac In @excalidraw we support working with files on all browsers (#LeaveNoOneBehind), but on browsers that support the File System Access API, we’re able to pull off some special tricks! Read my post on the Excalidraw blog to learn more: ⤵️ twitter.com/excalidraw/sta…
@lavrton @Vjeux @excalidraw Thanks for the kind words 😊. Let me know how it goes! Happy to help in case you run into trouble.
HenrikJoreteg Excited to be part of the #ChromeDevSummit keynote today to show what we’ve been using Web Serial (and other cool APIs) for at AnesthesiaCharting.com!
Huge thanks to @dalmaer and the other Google folks who helped make that happen.
It starts at 9:30 PT.
developer.chrome.com/devsummit/sess…
@_GobiTodic @excalidraw It’s from a recent talk that I gave: docs.google.com/presentation/d… (slide 6). It was _literally_ on slide 1 of the original Progressive Enhancement deck (hesketh.com/publications/i…). pic.twitter.com/8uF0BK6lPm
In @excalidraw we support working with files on all browsers (#LeaveNoOneBehind), but on browsers that support the File System Access API, we’re able to pull off some special tricks! Read my post on the Excalidraw blog to learn more: ⤵️ twitter.com/excalidraw/sta…
What Can You Put in a CSS Variable? codersblock.com/blog/what-can-…
@justinfagnani @kennethrohde @ChromeDevTools @Google They were making sure you specifically don’t see it should they hold lit wrong. 😂
(By the way, did you have a chance to look if I was holding lit wrong? Slides 54 onward of this deck: goo.gle/learning-from-…
@kennethrohde @Not_Woods This can be set: developer.android.com/reference/andr….
ChromiumDev 🧹 All eyes on #ChromeDevSummit 🧹
We’ve revamped developer.chrome.com, your central source for all things Chrome. We’re adding new and migrated Chrome-specific content with more to come in the coming weeks and months.
Check it out ↓ goo.gle/2VVrwlL
steeevg Not in the Christmas spirit yet? Well, my new @CodePen might help! Use the Christmas Cannon to fill a room with festive fun!
codepen.io/ste-vg/full/Ba… pic.twitter.com/oj5ZIbr4Vb
🌙 The @github dark theme is gorgeous: github.com/settings/appea…. You’re welcome! pic.twitter.com/Dx7JT6sAtU
Building UI components in @ChromeDevTools with Custom Elements: docs.google.com/document/d/1Gw…. Well-written guidance for any custom element developer!
@html5test It’s a pretty popular feature request, see the 👍 on github.com/WICG/file-syst…. Good that it’s finally being worked on.
@html5test Please track (star) bugs.chromium.org/p/chromium/iss… for this feature request.
@marcenglund @AppleSupport Oh, a native app? Really surprised it made it through Apple’s app review process. This is a complete no-go according to the Apple Design Guidelines. The bar is IMHO needed for multitasking and going back to the home screen, so
@marcenglund @AppleSupport It’s the site that is wrong, not the phone maker. This started as webkit.org/blog/7929/desi…, but is now standardized as drafts.csswg.org/css-env-1/#env…, also see developer.mozilla.org/en-US/docs/Web…().
PSA since this keeps getting asked and I had to re-find it several times myself: the Project Fugu blowfish emoji is part of the Noto Emoji font, here’s the SVG raw code. ⤵️ twitter.com/tomayac/status…
JoshWComeau ✨ New blog post: “The Rules of Margin Collapse” ✨
Sometimes margins overlap, sometimes they don’t, and it’s often surprising and bewildering!
Learn how it works with this comprehensive, interactive tutorial that covers the 8 rules of margin collapse.
joshwcomeau.com/css/rules-of-m… pic.twitter.com/DYFrmSHqr5
@diekus @kennethrohde @slightlylate It’s part of Noto Emoji: raw.githubusercontent.com/googlefonts/no… (github.com/googlefonts/no…) \u1f421
@_tea_two It’s an indieweb standard described here: indieweb.org/Webmention. I have followed this tutorial sia.codes/posts/webmenti…, as described in blog.tomayac.com/2019/09/29/the….
@samthor How am I the first person to like this tweet?
@MarcoInEnglish All the best, Marco! Hope you can find some well deserved rest in the next couple of weeks. Take care of yourself! 🤗 And happy holidays!
stefanjudis TIL `addEventListener` accepts callback functions and(!) EventListener objects. 😲 #javascript
TIL post: stefanjudis.com/today-i-learne… pic.twitter.com/zfTBSo5RHz
@AnaestheticsApp If you’re interested in static site PWA I10N, read @Snugug’s piece on how they built chromeos.dev: smashingmagazine.com/2020/11/intern…. Probably most of the concepts are adaptable for non-static sites, too.