Select Page

Category: Link

Inclusively Hidden

Scott O’Hara recently published “Inclusively Hidden,” a nice walkthrough of the different ways to hide things on the web. Nothing is ever cut and dry when it comes to the web! What complicates this is that hidden begs the question: hidden for whom? Different answers to that have different solutions: Hidden for everyone? display: none; or visibility: hidden; or the hidden attribute. (But watch out for that hidden attribute, says Monica Dinculescu.) Hidden visually, but present for assistive tech? A .screen-reader-only class with a smattering of properties to do the job correctly. Hidden for assistive tech, but not visually? The aria-hidden="true" attribute/value. It’s worth grokking all this because it’s is a perfect example of why HTML and CSS is not some easy bolt-on skill for front-end web development. This is critical stuff that isn’t done as correctly as it should be. If you like video, I did one called “Hiding Things with CSS” that goes over a lot of this. As I write this, I’m freshly back from Smashing Conf in San Francisco. Sara Soueidan had a wonderful talk that covered some “hiding things” situations that are even less intuitive than what we might be accustomed to seeing. One thing she covered was the inert attribute and how it can be used to skip interactive elements from keyboard tabbing. It can even be used on a parent element, nullifying...

Read More

KV Storage

localStorage is… Good! It’s an incredibly easy API to use. localStorage.setItem('name', 'Chris'); let name = localStorage.getItem('name'); Bad! Philip Walton explains why: localStorage is a synchronous API that blocks the main thread, and any time you access it you potentially prevent your page from being interactive. Chrome has an idea (here’s the proposal) for reinventing it. Ultimately the API is even simpler: import { storage } from 'std:kv-storage'; storage.set('name', 'Chris'); storage.get('name'); But! It’s async, so I can use await before I do those things without blocking anything. This demo will work in Chrome Canary right now: See the Pen eXadrq by Chris Coyier (@chriscoyier) on CodePen. What in all heck is up with this line? import { storage } from 'std:kv-storage'; They are calling it a “built-in module.” In other words, something you can import but it makes no network request because it’s built into the browser. Pretty interesting approach. Philip continues: Not exposing built-in modules globally has a lot of advantages: they won’t add any overhead to starting up a new JavaScript runtime context (e.g. a new tab, worker, or service worker), and they won’t consume any memory or CPU unless they’re actually imported. Furthermore, they don’t run the risk of naming collisions with other variables defined in your code. This is built on top of indexedDB, so if you’re playing with it and need to clear the values...

Read More

Scroll-Linked Animations

You scroll down to a certain point, now you want to style things in a certain way. A header becomes fixed. An animation triggers. A table of contents appears. To do anything based on scroll position, JavaScript is required right now. You watch the scroll position via a DOM event and alter an element’s styling based on that position. Or, probably better if you can, use IntersectionObserver. We just blogged about all this. Now there is a new (unofficial) spec trying to bring these possibilities to CSS. I love it when web standards get involved because it sees authors like us trying to pull off certain design effects and wants to (presumably) help make it easier and more performant. I also like how this spec lists editors from Mozilla and Google and Apple. I wonder how they’ll handle the infinite-loop stuff here. Like you scroll to a point, it triggers some animation, which moves some element such that it changes the scroll position, which stops the animation, which moves the scroll position again… etc. I also wonder why it’s all specific to animation. “Scroll-position styling” seems like it would have the widest appeal and use level of usefulness. Direct Link to Article — Permalink The post Scroll-Linked Animations appeared first on CSS-Tricks....

Read More

Powers of Two

Refactoring is one of those words that evokes fear in the eyes of many folks, from developers to product owners and everyone in between. It may as well be a four-letter word in many ways. It’s also something that we talk about quite a bit around here because, like books on the topic, where to start with one, and the impact of letting technical debt pile up. Ben Rady has thoughts on refactoring as well, but in the context of pair programming: We pair for about 6 hours a day, every day. Everything that’s on the critical path is worked on in a pair. Always. Our goal is always to get the thing we’re working on to production as fast as we responsibly can, and the best way I’ve found to that is with a pair. Ben then dives into the process of working alongside others and how to ship software with that approach, a lot of which I think relates to front-end development best practices, too. But I also love how punk rock this team is, as they appear not to develop software with a backlog or a ton of meetings for managing their projects: No formal backlog. We have three states for new features. Now, next, and probably never. Whatever we’re working on now is the most valuable thing we can think of. Whatever’s next is the...

Read More

Podcasts on The Great Divide

Nick Nisi, Suz Hinton, and Kevin Ball talk about The Great Divide in JS Party #61, then I get to join Suz and Jerod again in episode #67 to talk about it again. Dave and I also got into it a bit in ShopTalk #346. Direct Link to Article — Permalink The post Podcasts on The Great Divide appeared first on CSS-Tricks....

Read More