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…
Using AbortController as an Alternative for Removing Event Listeners
February 15th, 2021
The idea of an “abortable” fetch came to life in 2017 when AbortController was released. That gives us a way to bail on an API request initiated by fetch() — even multiple calls — whenever we want. Here’s a super simple example using AbortController to cancel a fetch() request: const controller = new AbortController(); const…
Front-End Dissatisfaction (and Backing Off)
February 13th, 2021
Asko Nõmm reached a breaking point with front end: I want to have a personal life and not have to spend my nights reading up on some new flavor of *.js in fear that if I don’t I would soon be made irrelevant. I don’t want to learn nor use a million different tools. I…
Monorepo
January 26th, 2021
I’m not exactly a large-scale DevOps guy, but I can tell ya we’ve been moving back toward a monorepo at CodePen and it’s rife with advantages over a system with lots of smaller reports. For us, I mean. It’s very likely that you have entirely different challenges and have come to entirely different conclusions at…
Checkerboard Reveal
January 25th, 2021
Back when I was 10, I remember my cousin visiting our house. He was (and still is) a cool kid, the kind who’d bring his own self-programmed chess game on a floppy disk. And his version of chess was just as cool as him because a piece of the board would disappear after each move….
How to Make GraphQL and DynamoDB Play Nicely Together
January 14th, 2021
Serverless, GraphQL, and DynamoDB are a powerful combination for building websites. The first two are well-loved, but DynamoDB is often misunderstood or actively avoided. It’s often dismissed by folks who consider it only worth the effort “at scale.” That was my assumption, too, and I tried to stick with a SQL database for my serverless…
Fading in a Page on Load with CSS & JavaScript
January 13th, 2021
Louis Lazaris demonstrates a very simple way of doing this. Hide the body (with JavaScript) right away with with a CSS class that declares opacity: 0 Wait for all the JavaScript to execute Unhide the body by transitioning it back to opacity: 1 Like this: CodePen Embed Fallback Louis demonstrates a callback method, as well…