Let’s start off with some fun, simple, but powerful layout bits:
- Sticky, update-as-you-scroll navigation menu
- Slide-out navbar, using CSS only
- Revealed hidden footer, using CSS only
- Stacked cards on scroll, using a smidge of JS
About says it all!
How do you hide things in a browser? Know your options, and the pros & cons for each.
Intended to solve problems,
<input type="number"> might create more than it solves…
But to bring us back to “happy”, make your way through these HTML attributes that will make your users’ day way better!
For you copy/paste fiends out there (like me), this playground code-generator is going to make your day!
Nice little JS library to add pan & zoom functionality to any HTML element. Especially nice for mobile users!
I have been dreaming of Scroll to Text Fragment for a very long time. Although the documentation status says “shipping to stable channel in Chrome M80”, not working for me… Anyone?
Learn how to ship Smaller HTML Payloads with Service Workers. Note that while this article outlines how to do this for a static site, it could work just as easily for a dynamic site, by building a separate “content only” template.
Keeping with that topic, give your site a performance boost using IndexedDB to cache content.
Jeremy Keith has long been a proponent of preaching performance, but as we all know that is some times a hard pitch to both clients and upper management. But he offers a nice idea in his latest post on the topic.
Have you tested your favicons lately? Gonna guess no. This site does a thorough test of your current favicons, shows you errors for an incredibly large list of devices (including all various mobile device options and sizes), then let’s you upload an image to create all the various favicon images you need, and provides the HTML to put them all into action…
And finally, a complete history of the Millennium Falcon. Because… yeah, there is no reason for this…