Jim Nielsen’s mom couldn’t open a website. Jim worked on confirming the issue and documented how he got to the bottom of it:
“[…] well it can’t be a browser issue. It’s not like my Mom is using Internet Explorer! She has relatively modern tech: an iPad (Safari) and a Chromebox (Google Chrome).”
But the more I thought about it—a website that works on some devices but not on others—the more I realized this had to be a browser issue.
So I looked at the version of Chrome on my parent’s computer. Version 76! I knew we were at ninety-something in 2022, so I figured that was the culprit. “I’ll just update Chrome,” I thought.
Turns out, you can’t.
I absolutely celebrate the idea of evergreen browsers. It’s one of the absolute most important things that has happened to the web in recent-ish years. It enables a much quicker evolution for the web, and all browsers are taking advantage of it.
But even browsers that I think of as evergreen aren’t always. Eventually, hardware limits the software. The logic isn’t as simple as “if Chrome, then evergreeen,” for example.
Safari normally updates via system updates, but in this case it was a first-generation iPad Air stuck on iOS 12, and no more updates were possible for what Apple considers a “vintage” device. Same deal with a Chromebook stuck at Chrome 76.
A couple of little optional chaining question mark (?
) characters borked the whole dang site. Unfortunate. That “serve two bundles, modern and legacy” idea is still pretty smart.
Speaking of moms, I was reminded of an older episode of ShopTalk we did with Paul Irish’s mom that has a lot of this “regular person using the internet” vibes.
Thanks Chris. A very timely post!
We’re about to remove any IE11-specific JS polyfills, PostCSS (for CSS Grid) and Sass code from our codebase at work. Hurrah!
However, we will still be using the differential bundling implementation as detailed in the Philip Walton article you linked to.
We use a simple feature detection test for Fetch & IntersectionObserver APIs. If that test fails, then we assume browser is legacy, and so we serve transpiled ES5 code and a separate “polyfills.js” file.
Nice and simple.
And that’s why I minimize code, add polyfills, never put raw code. Rollup to libraries, webpack to full pages and browserlist last 2 browsers. Such basic treatments prevent problems.
While I agree we should strive to use progressive enhancement as much as possible, there’s a limit to what a developer can do.
I would point the finger, again, to those trillion dollars companies. In this case Apple and Google.
They produce disposable devices to fuel their own sales. They stop releasing updates and security fixes after a very short amount of time just so they can rope you in their next best thing…
Microsoft gets a lot of flak and negative comments, but it’s the only one that actually support their OS for many years to come. They will even release out-of-support security updates when needed.
Developers shouldn’t be held accountable for these companies bad practices. I think it’s high time developers crank up the heat and pressure those companies to fix their s**t. They wanted the reins of the web, they need to assume the responsibilities that come with it…
I kinda feel like this article is a little to quick to point the finger to the website developers instead of to Google, who should support its Chrome OS-devices longer than what they provide (especially for older devices), and Apple, who really should stop bundling apps and Safari in particular with the OS it self.