Dennis Ritchie had a problem.
The warping is certainly the cool part here. Some fancy math literally transforms the path data to do the warping. But the UX detail work here is just as nice. Scrolling the page zooms in and out via a transform: scale() on the SVG wrapper (clever!). Likewise, holding the spacebar lets you pan around which is as simple as transform: translate() on another wrapper (smart!). To warp your own SVG files, you just drag-and-drop them on the page (easy!).
One of the whole points of the Shadow DOM is that it provides encapsulation. No styles out, no styles in. But there are ways “through” the Shadow DOM, and one of them that is pretty cool and useful is using CSS custom properties on particular elements/properties.… Read article “#190: CSS Custom Properties Penetrate the Shadow DOM”
Fair warning: I can’t say I recommend this in general because it breaks a very strong expectation of where scrollbars are, which are useful for a lots of folks, not to mention, a core accessibility feature for many.
Michelle Barker covers a situation where you need offset rectangles part of a clickable area. The tricky part is having just the rectangles be clickable. That rules out using some parent element and making the whole larger encompassing rectangle clickable, which is a common (but equally tricky) pattern.
Hakim El Hattab tweeted a really nice little UX enhancement for a static site that includes a scrollable sidebar of navigation. … Read article “Memorize Scroll Position Across Page Loads”
But even more notably, Sacha Greif has been posting five links per day to Sidebar since 2012. That’s a remarkable achievement.… Read article “Refreshing Sidebar for 2020”
I’ve long been skeptical of quoting global browser usage percentages to justify their usage of browser features. It doesn’t matter what global usage of a browser is, other than nerdy cocktail party fodder. The usage that matters is what users on your site are using, and that can be wildly different from site to site.
Let’s look at a bunch of options and you can choose the ones that feel right to you. … Read article “Where Do You Learn HTML & CSS in 2020?”
Jamstack isn’t necessarily new. The term was officially coined in 2016, but the technologies and architecture it describes have been around well before that. Jamstack has received a massive dose of attention recently, with articles about it appearing in major sites and publications and new Jamstack-focused events, newsletters, podcasts, and more. As someone who follows it closely, I’ve even seen what seems like a significant uptick in discussion about it on Twitter, often from people who are … Read article “5 Myths About Jamstack”