Still Hoping for Better Native Page Transitions
April 21st, 2021
It would be nice to be able to animate the transition between pages if we want to on the web without resorting to hacks or full-blown architecture choices to achieve it. I could imagine an API that would run stuff, perhaps integrating with WAAPI, before the page is unloaded, and other stuff after the next…
Building a Full-Stack Geo-Distributed Serverless App with Macrometa, GatsbyJS, & GitHub Pages
March 25th, 2021
In this article, we walk through building out a full-stack real-time and completely serverless application that allows you to create polls! All of the app’s static bits (HTML, CSS, JS, & Media) will be hosted and globally distributed via the GitHub Pages CDN (Content Delivery Network). All of the data and dynamic requests for data…
Maps Scroll Wheel Fix
March 23rd, 2021
This blog post by Steve Fenton came across my feeds the other day. I’d never heard of HERE maps before, but apparently they are embeddable somehow, like Google Maps. The problem is that you zoom and out of HERE maps with the scroll wheel. So imagine you’re scrolling down a page, your cursor (or finger)…
Creating Patterns With SVG Filters
March 15th, 2021
For years, my pain has been not being able to create a somewhat natural-looking pattern in CSS. I mean, sometimes all I need is a wood texture. The only production-friendly solution I knew of was to use an external image, but external images are an additional dependency and they introduce a new complexity. I know…
Too Many SVGs Clogging Up Your Markup? Try ‘use’.
March 10th, 2021
Recently, I had to make a web page displaying a bunch of SVG graphs for an analytics dashboard. I used a bunch of <rect>, <line> and <text> elements on each graph to visualize certain metrics. This works and renders just fine, but results in a bloated DOM tree, where each shape is represented as separate…
Web Components Are Easier Than You Think
March 8th, 2021
When I’d go to a conference (when we were able to do such things) and see someone do a presentation on web components, I always thought it was pretty nifty (yes, apparently, I’m from 1950), but it always seemed complicated and excessive. A thousand lines of JavaScript to save four lines of HTML. The speaker…
A Super Flexible CSS Carousel, Enhanced With JavaScript Navigation
March 5th, 2021
Not sure about you, but I often wonder how to build a carousel component in such a way that you can easily dump a bunch of items into the component and get a nice working carousel — one that allows you to scroll smoothly, navigate with the dynamic buttons, and is responsive. If that is…
Reduced Motion, CORS, WhiteHouse.gov, popups, and 100vw
February 26th, 2021
In this week’s roundup, we highlight a proposal for a new <popup> element, check the use of prefers-reduced-motion on award-winning sites, learn how to opt into cross-origin isolation, see how WhiteHouse.gov approaches accessibility, and warn the dangers of 100vh. Let’s get into the news! The new HTML <popup> element is in development On January 21,…
Mistakes I’ve Made as an Engineering Manager
February 18th, 2021
I’ve been a manager for many years at companies of different scales. Through these experiences, I’ve done my share of learning, and made some mistakes along that way that were important lessons for me. I want to share those with you. But before diving in, I want to mention a strong caveat that my advice…
How to Create a Shrinking Header on Scroll Without JavaScript
February 16th, 2021
Imagine a header of a website that is nice and thick, with plenty of padding on top and bottom of the content. As you scroll down, it shrinks up on itself, reducing some of that padding, making more screen real estate for other content. Normally you would have to use some JavaScript to add a…