This is an interesting read on the current state of scrollbars and how to control their behavior across operating systems and browsers. The post also highlights a bunch of stuff I didn’t know about, like
Element.scrollIntoView() and the
scroll-behavior CSS property.
My favorite part of all though? It has to be this bit:
In our opinion, Progressive Enhancement is the best approach to follow when implementing non-trivial scrolling in your web projects.
Make sure you can provide the best possible minimal, but universally supported UX, and then improve with modern browser features in mind.
Speaking of the cross-browser behavior of scrollbars, Louis Hoebregts also has a new post that notes how Edge does not include the scrollbar when dealing with
vw units the way other browsers do and he provides a nice way of handling it with CSS custom properties.
Huge thanks to Kinsta for sponsoring CSS-Tricks this week! We're big fans of WordPress around here, and know some of you out there are too. So this might come of interest: Kinsta is WordPress hosting that runs on Google Cloud Platform. And in fact, it's officially recommended by Google Cloud for fully-managed WordPress hosting.
What does that matter? Well, when you go with a cloud host you're entering a new realm of reliability. For example, your site is run in its own isolated container, including all the software required to run it. Familiar stuff like PHP, MySQL, and Nginx. Those resources are 100% private and not shared between anyone else - not even other sites of yours.
VuePress is a new tool from Vue creator Evan You that spins up Vue projects that are more on the side of websites based on content and markup than progressive web applications and does it with a few strokes of the command line.
But, like anything new, even the basics of getting started can feel overwhelming and complex. A tool like VuePress can really lower the barrier to entry for many who (like me) are still wrapping our heads around the basics and tinkering with the concepts.
There are alternatives, of course! For example, Nuxt is already primed for this sort of thing and also makes it easy to spin up a Vue project. Sarah wrote up a nice intro to Nuxt and it's worth checking out, particularly if your project is a progressive web application. If you're more into React but love the idea of static site generating, there is Gatsby.
Let's say I told you we can get the results below with just one HTML element and five CSS properties for each. No SVG, no images (save for the
The team at Kapwing has collected a lot of images from the Internet Archive’s Wayback Machine and presented a history of how the homepage of popular websites like Google and the New York Times have changed over time. It’s super interesting.
I particularly love how Amazon has evolved from a super high information dense webpage that sort of looks like a blog to basically a giant carousel that takes over the whole screen.
Huge thanks to BigCommerce for sponsoring CSS-Tricks this week!
Here's the basics: BigCommerce is a hosted eCommerce platform. In just a few minutes, anybody can build their own online store. From a personal perspective, I'd suggest to any of my friends and family to go this route. CMS-powered websites are complicated enough, let alone feature-packed eCommerce websites. Please go with a solution that does it all for you so your site will look and work great and you can focus on your actual business.
There is no shortage of videos out there where you can watch people code with an educational vibe. A golden age, one might say. Here are a few that I've watched and really enjoyed lately:
- @keyframers - "An animated, collaborative coding live stream by @davidkpiano & @shshaw." They've got 2 epsidoes out now, each of which they start with an animated interface GIF and then collaboratively re-build it.
- The Coding Train - Daniel Shiffman's show is a force of nature on it's own, featuring challenges, introductions, and guest tutorials. Speaking of guest tutorials, CodePen recently sponsored an episode featuring Catt Small and game development with Phaser.js.
- Creative Coding with CSS. You have to sign up for Skillshare to watch it, but Jake Albaugh loves getting crazy with CSS and it's fun to watch.