Whenever a browser upgrades versions, it’s a little marketing event, and rightly so. Looks like for Firefox it’s about once a month, Chrome is ~6 weeks, and Safari is once a year.
Chrome 80 just dropped, as they say, and we get a video and blog post. What strikes me about releases like this these days is that there isn’t big flagship features that we’re all collectively interested in as developers. Maybe a little great divide stuff going on, but more broadly, just different front-end developers (the people who care about browsers) work on different things and so care about different things.
Let me try to illustrate that with a feature rundown of this release:
- Content Indexing is a way to access metadata of files your browser has cached (that you specifically cached). Seems like a great idea, but I’ve never really dealt with offline stuff like this seriously so it’s not really in my wheelhouse.
- Web Workers can use ES modules now. That’s cool, I didn’t even know they couldn’t.
- Origin Trials are like feature flags I guess, except you opt-in from a website and not just on your local browser. Totally new to me, but sounds like they have been effective in gathering and refining new APIs.
- Periodic background sync. Jeremy laid out how useful this in his article where he called it “silent push”. You can also schedule notifications, making them more resilient to offline situations.
- HTTP content tries to auto-upgrade to HTTPS if the site is HTTPS. Great idea. I use the Cloudflare setting for this, but makes sense it moves to the browser level.
- Contact Picker API. Very much like this, in the same way I like the Web Payments API. If I can build a UI that helps users fill out forms faster and more accurately, that’s great. That’s why I use 1Password. I use it just as much for filling out address and credit card forms as I do for passwords.
- SameSite cookies. Scares me. I know that we need to update our cookies on CodePen to make sure it has this value but I haven’t researched it deep enough yet, and 80 is already shipping.
- Actual CSS stuff!
overflow-wrap: anywhere;I can’t seem to grok the difference. This stuff is already very complicated.
- Nothing HTML related. Poor HTML never gets nuthin’.
And then the two that really caught my eye!
- SVG favicons. Awesome. We already ship one for CodePen because it looks so nice on Safari. Although Safari supports it with
<link rel="mask-icon" href="...">and Chrome is supporting it with
<link rel="icon" href="...">so I’m not quite sure what to do there. I guess since Firefox supports SVG with
rel="icon", just ship SVG for both?
- Text fragments. How cool. I had no idea this was coming. People have been talking about this for at least a decade. The idea is linking to things on a page without needing a
idto link down to, just using text. The syntax is funky:
https://site.com/#:~:text=Links to first occurance of this text.
Here’s a video from Stefan Judis:
Text fragments will soon be available in Chromium land. You can then use `#:~:text=` to highlight certain text. 😲— Stefan Judis (@stefanjudis) February 5, 2020
🔗 Chrome status: https://t.co/e60xiQoQoT
🔗 Spec: https://t.co/t02TFfGO2X#devsheets
Video alt: Usage of text fragments to highlight text on wikipedia pic.twitter.com/W5tUYZk8NY
Especially notable to me: it links you to the middle of the page, not headbutting the top. I much prefer this.
Oh my god. I had no idea about Nullish Coalescing or Optional Chaining. This will make my life so much easier.