Menu

Dev

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…