I Saw Two Mega Menus Today…
One was the footer of an (older) U.S. Government website:
The other was the navigation for AWS services from the AWS Console:
It’s weird how much they use the word “Amazon” and “AWS” when you’re literally logged into AWS.
Both of them have that vibe of: holy crap we have a lot of stuff, I guess ..
Dynamically Switching From One HTML Element to Another in Vue
A friend once contacted me asking if I had a way to dynamically change one HTML element into another within Vue’s template block. For instance, shifting a
element to a element based on some criteria. The trick was to do this without relying on a series of v-if and v-else code.
I didn’t..
“Cancelable” Smooth Scrolling
Here’s the situation: Your site offers a “scroll back to top” button, and you’ve implemented smooth scrolling. As the page scrolls back to the top, users see something that catches their eye and they want to stop the scrolling, so they do a smidge of a scroll on the mouse wheel,, trackpad, or whatev..
Open Web Docs
Robert Nyman:
Open Web Docs was created to ensure the long-term health of web platform documentation on de facto standard resources like MDN Web Docs, independently of any single vendor or organization. Through full-time staff, community management, and our network of partner organizations, we enab..
Figma Crash Course
Totally free course from Pablo Stanley. Can’t beat that.
Figma is just blowing up, and for good reason. It’s good software aligned with what digital designers need. It’s fast. It’s on the web, so you can’t lose stuff and don’t need to figure out a storage strategy. It’s useful beyond designers dire..
No-Jank CSS Stripes
My mind goes immediately to repeating-linear-gradient and hard-stop gradients when thinking of creating stripes in CSS. You make one stripe by using the same color between two color stops, and another stripe (or more) but using a different color between two colors stops (sharing the one in the middl..
Bulletproof flag components
A clever use of CSS grid from Jay Freestone to accomplish a particular variation of the media object design pattern (where the image is centered with the title) without any magic numbers anything that isn’t flexible and resiliant.
The trick is to use an “extra” row above and below the title:
The i..
Styling Web Components
Nolan Lawson has a little emoji-picker-element that is awfully handy and incredibly easy to use. But considering you’d probably be using it within your own app, it should be style-able so it can incorporated nicely anywhere. How to allow that styling isn’t exactly obvious:
What wasn’t obvious to me..
GreenSock ScrollTrigger
High five to the Greensock gang for the ScrollTrigger release. The point of this new plugin is triggering animation when a page scrolls to certain positions, as well as when certain elements are in the viewport. Anything you’d want configurable about it, is. There’s been plenty of scroll-position li..
A Whole Website in a Single HTML File
I can’t stop thinking about this site. It looks like a pretty standard fare; a website with links to different pages. Nothing to write home about except that… the whole website is contained within a single HTML file.
What about clicking the navigation links, you ask? Each link merely shows and hide..
