{"id":362222,"date":"2022-02-07T06:22:00","date_gmt":"2022-02-07T14:22:00","guid":{"rendered":"https:\/\/css-tricks.com\/?post_type=newsletters&p=362222"},"modified":"2022-09-19T15:56:01","modified_gmt":"2022-09-19T22:56:01","slug":"289-the-problem-with-evergreen-browsers","status":"publish","type":"newsletters","link":"https:\/\/css-tricks.com\/newsletter\/289-the-problem-with-evergreen-browsers\/","title":{"rendered":"289: The Problem With Evergreen Browsers"},"content":{"rendered":"\n

[Robin<\/strong>]: Here\u2019s a smart take from Eric Bailey: just because we have evergreen browsers doesn\u2019t mean we can use the latest features.<\/a> “Evergreen browsers” here meaning browsers like Chrome and Firefox that update automatically without you having to do anything. Except, well, Eric shows how folks might not restart their machine or the browser itself and so they might not be getting the latest features:<\/p>\n\n\n\n

Support from all evergreen browsers on caniuse.com does not necessarily mean support exists on the device a person is using\u2014updates that have been \u201cpushed\u201d out don\u2019t automatically get instantly applied.<\/p>

[\u2026] I advocate for tempering your excitement with some restraint. It can be very tempting to rush and use the new and the shiny. Believe me, I\u2019m not exempt from this urge\u2014CSS is about to go from great to amazing<\/a>, and the urge to use new features is very real.<\/p>

Instead, wait a bit. Work with the platform\u2019s ability to create progressively enhanced experiences<\/a> with CSS and JavaScript.<\/p><\/blockquote>\n\n\n\n

This sounds like a sad thing that we all should lament, but I think that this is perhaps one of the best things about working on the web. For example, Eric argues that we can use feature detection to detect if a browser can use the latest features in CSS like the upcoming subgrid\u2026<\/p>\n\n\n\n

.component {\n  \/* Base appearance *\/\n}\n\n@supports (grid-template-columns: subgrid;) {\n  .component {\n    \/* Styling and positioning enhancement tweaks if subgrid is supported *\/\n  }\n}<\/code><\/pre>\n\n\n\n
A lot of folks might feel annoyed that they have to build two interfaces here: one for the old way of doing things, and one for the new. But by progressively enhancing our interfaces ensures that we can provide the best experience to the highest number of users. We never have to leave folks behind.<\/p>\n\n\n\n
All this is super interesting though because I\u2019ve taken evergreen browsers for granted and never really thought about all the reasons why they might not update as magically as you think. Jim Nielsen wrote about this just the other day when he talked about a problem he discovered thanks to his mom<\/a>. It\u2019s a real interesting story but this was the takeaway for me:<\/p>\n\n\n\n
In my brain, I always thought of Safari and Chrome as \u201cmodern\u201d browsers. But even Chrome, an \u201cevergreen\u201d browser, failed because it wasn\u2019t on an \u201cevergreen\u201d operating system (or hardware).<\/p><\/blockquote>\n\n\n\n
So what Eric and Jim\u2019s posts remind me here is that even folks on the best hardware running the most up-to-date software benefit from progressive enhancement. And the more resiliency we build into our websites then the better off everyone is for it.<\/p>\n\n\n\n
\n\n\n
Scroll \u2019til you drop<\/h3>\n\n\n
The other day Michelle Barker made this scrollable and draggable timeline<\/a> of Radiohead\u2019s discography and dang it feels swish as all heck. At the top of this page you can scroll left or right and the content beneath will scroll up and down in response.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Michelle then wrote about how she built it<\/a> which shows just how much time was spent thinking about accessibility alongside these fancy animations. Each time you get to a new section, the text floats up slightly and the album art rotates but it doesn\u2019t feel janky like some similar animations I\u2019ve seen before. Instead, it\u2019s effortlessly smooth.<\/p>\n\n\n\n
Speaking of scrolling, Mary Lou made a lovely scrolling demo<\/a> where each column in the interface below scrolls in different directions. It feels unfamiliar but also extremely cool at the same time.<\/p>\n\n\n\n
This demo is built on Locomotive Scroll<\/a>, a library that helps us do weird things with scrolling. You can animate elements at different speeds or stagger elements to pop out at different times. It\u2019s pretty neat. On that note, King Nelson wrote about how to get started with that library<\/a> and all the possibilities it unlocks.<\/p>\n\n\n\n
These demos use a third-party library, but what if it was possible to control regular ol\u2019 CSS animations just by scrolling natively? What if browsers let us link animations with scrolling? Well! Bramus wrote about this new and upcoming feature coming to a browser near you called Scroll-Linked Animations<\/a>. Earlier this year, he also went ahead and rebuilt Mary Lou\u2019s demo<\/a> above just using this scroll-linked animations feature which is pretty darn neat.<\/p>\n\n\n\n
I am in one of two minds about this. The examples here are super interesting but with everything when it comes to scrolling and animations, we have to be careful. It\u2019s really, really easy to get this stuff wrong and make a wretched website experience.<\/p>\n\n\n\n
So I like this suggestion from Chris<\/a> where he checks first to see if users have turned animations off, and then does the fancy stuff after the fact:<\/p>\n\n\n\n
@media (prefers-reduced-motion: no-preference) {\n  @supports (animation-timeline: works) {\n    \/* Do fancy stuff *\/\n  }\n}<\/code><\/pre>\n\n\n\n
\n\n\n
One block to rule them all<\/h3>\n\n\n
One design pattern that is almost not worth mentioning these days because it\u2019s like oxygen to the modern web is this: blocks<\/em>. Ganesh Dahal wrote a deep-dive into the WordPress site editor<\/a> which is built entirely on the concept of blocks.<\/p>\n\n\n\n
A block could be anything; text, an image, a table. Notion is built on this concept, too. When you\u2019re in a document, just hit \/<\/code> and a whole world of possibilities open up. You can make a database! Or create a whole new page! And then you can move these things around to your heart\u2019s content.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
The interesting thing about this design pattern is that it\u2019s entirely custom. There\u2019s no “blocks standard” written in a spec somewhere deep on the W3C website, or documented officially as part of a standards body or anything. Notion has its idea of blocks, and WordPress has theirs. Two separate systems which do kinda the same thing under the hood.<\/p>\n\n\n\n
Well, that could change soon, as Joel Spolsky introduced the Block protocol<\/a> the other day:<\/p>\n\n\n\n
I thought, wouldn\u2019t it be cool if blocks were interchangeable and reusable across the web?<\/p>
Until now, every app that wants blocks has to implement them from scratch. Want a calendar block? Some kind of fancy Kanban board? Something to embed image galleries? Code it up yourself, buddy.<\/p>
As a result of the non-standardization of blocks, our end-users suffer. If someone is using my blog engine, they can only use those blocks that I had time to implement. Those blocks may be pretty basic or incomplete. Users might want to use a fancier block that they saw in WordPress or Medium or Notion, but my editor doesn\u2019t have it. Blocks can\u2019t be shared or moved around very easily, and our users are limited to the features and capabilities that we had time to re-implement.<\/p><\/blockquote>\n\n\n\n
\"\"<\/figure>\n\n\n\n
The Block protocol asks that we make the data that we pipe into these blocks similar so that we can all benefit from an enormous library of them in the future. It\u2019s a really neat idea that I\u2019m entirely onboard with.<\/p>\n\n\n\n
Will developers use this standard when they\u2019re making block patterns? And is this really going to help users in the end or is this just going to speed up developers? I\u2019m interested to see how this shakes out. <\/p>\n\n\n\n
\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
Sponsor<\/p>\n\n\n
Astra DB<\/a><\/h2>\n\n\n
Build ecommerce, crypto and gaming apps. Ops on us. Do more with Astra DB, the only database-as-a-service that helps developers build Apache Cassandra™ apps faster\u2014without the cost of self-managed operations. Get started today.<\/a><\/p>\n\n\n\n
\n
Start your free trial<\/a><\/div>\n<\/div>\n\n\n\n
\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
Sponsor<\/p>\n\n\n
Real-Time Backups For All<\/a><\/h2>\n\n\n
Jetpack now includes comprehensive, real-time backups for your WordPress site<\/a> in each of our Backup and Security plans. Don\u2019t pay for storage space you don\u2019t need \u2014 instead, pay based on the size of your site.<\/p>\n\n\n\n
\n
Get started<\/a><\/div>\n<\/div>\n\n\n\n
\n\n\n\n
[Chris]:<\/strong> There is some degree of pushback and classic tech drama around the Block Protocol stuff Robin talked about above. There is positive stuff. Like hey, I love blocks! I love the concept of blocks in WordPress’ Block Editor. I love the concept of blocks in Notion. I feel like blocks have been a real sea change for the better in how content is created and managed. A natural evolution of the rich text area. <\/p>\n\n\n\n
The friction comes in because there a lot of people who have been working on an API surface for “blocks” for the web for a long time. As Dave put it in our ShopTalk Discord:<\/p>\n\n\n\n
It has been 0️⃣ days since people invented Web Components.<\/p><\/blockquote>\n\n\n\n
Which elicits certain auditory cues<\/a> from people involved with those. The docs suggest:<\/p>\n\n\n\n
Blocks are web components. We suggest writing them using React, a ready-made framework for writing web components.<\/p><\/blockquote>\n\n\n\n
Justin says this in response to that:<\/p>\n\n\n\n
One of the team members replied to me that they didn’t want to dictate how you implement a block, so they didn’t want to require WCs – but that indicates that they think a WC is the implementation rather than the interface and they said they could provide a library to abstract over embedding blocks built with different frameworks – but that’s what web components already do!<\/p><\/blockquote>\n\n\n\n
The model for these blocks is clearly inspired by WordPress, as the intro blog post<\/a> makes clear in the first paragraph. And WordPress blocks are React components, so clearly there is some synergy there. Part of me doesn’t blame either of them, as the DX story of web components has been rough. That synergy clearly has some legs<\/a>:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Sounds like the Blocks Protocol people are up for considering Web Components more seriously<\/a>, which I would think would be at least worth exploring. These are all people involved who have hugely benefited from open source and open platform work their entire careers, seems like that would be a strong long-term move here. <\/p>\n","protected":false},"excerpt":{"rendered":"
[Robin]: Here\u2019s a smart take from Eric Bailey: just because we have evergreen browsers doesn\u2019t mean we can use the latest features. “Evergreen browsers” here meaning browsers like Chrome and Firefox that update automatically without you having to do anything. Except, well, Eric shows how folks might not restart their machine or the browser itself […]<\/p>\n","protected":false},"template":"","acf":[],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/newsletters\/362222"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/newsletters"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/newsletters"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/newsletters\/362222\/revisions"}],"predecessor-version":[{"id":373552,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/newsletters\/362222\/revisions\/373552"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=362222"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}