Building sites with HTML and CSS

This is a 40-minute discussion about the combining the latest technologies, like scroll-snapping, scroll-driven animations, anchoring, etc. to produce responsive, progressive, animated, modern, and very fast sites without any JavaScript at all.

Pure CSS Scroll Spy Table of contents − No JavaScript Required! by Kevin Powell & Adam Argyle (YouTube)

Carousels

Adam uses it all to build carousels, which is fine for demos and proving the power of the technologies, but … I’m not a fan. While our two hosts mention that Netflix comprises only carousels, they don’t really discuss that Netflix is also a deeply unsatisfying experience for finding content.

Slow adoption rate

They finish up with an interesting discussion of how quickly changes are introduced and the absolutely legitimate reasons why adoption of some features is so slow. It’s often difficult for developers to be aware that a feature exists and also to be aware that it would be a solution for the problem that they’re having. There’s also the fact that most developers and product owners will allow the scope of the familiar to limit their vision of what is possible.

You really need people who stay on top of these things and can say that yes, it is possible to animate this now, or it is possible to eliminate a ton of cruft here, and also to be aware of whether that feature is available on all target platforms, or whether it can be made optional with progressive enhancement, or … it’s a very complicated, complex thing to handle. It takes years before a feature is just known and accepted. Often, it takes a new generation of programmers who’ve grown up with that feature to know how to use it.

Forget about yesterday’s cruft!

Just think: today, you can build responsive, progressive, fast, pretty, and accessible web sites with no layout hacks and no JavaScript. Everything just works. But you haven’t always been able to do that, so there is a large percentage of the web-developer community that is not aware that this is the case because they stopped paying attention a while ago and are stuck on the feature set that they know.

At best, they’re aware that a feature exists but wasn’t ready for primetime when they last checked, even though they’ve not checked in a while. Even if they’re aware of it, they might not have the time or budget to use it in existing projects, where everything has already been tested. Who’s going to risk ripping out a ton of custom code to replace it with two lines of CSS, when you have to test everything all over again?