TypeScript, Minus TypeScript
August 6th, 2020
Unless you’ve been hiding under a rock the last several years (and let’s face it, hiding under a rock sometimes feels like the right thing to do), you’ve probably heard of and likely used TypeScript. TypeScript is a syntactical superset of JavaScript that adds — as its name suggests — typing to the web’s favorite…
Making Sense of react-spring
August 4th, 2020
The animation is one of the trickier things to get right with React. In this post, I’ll try to provide the introduction to react-spring I wish I had when I first started out, then dive into some interesting use cases. While react-spring isn’t the only animation library for React, it’s one of the more popular…
A Lightweight Masonry Solution
August 3rd, 2020
Back in May, I learned about Firefox adding masonry to CSS grid. Masonry layouts are something I’ve been wanting to do on my own from scratch for a very long time, but have never known where to start. So, naturally, I checked the demo and then I had a lightbulb moment when I understood how…
style9: build-time CSS-in-JS
July 29th, 2020
In April of last year, Facebook revealed its big new redesign. An ambitious project, it was a rebuild of a large site with a massive amount of users. To accomplish this, they used several technologies they have created and open-sourced, such as React, GraphQL, Relay, and a new CSS-in-JS library called stylex. This new library…
A Font-Like SVG Icon System for Vue
July 24th, 2020
Managing a custom collection of icons in a Vue app can be challenging at times. An icon font is easy to use, but for customization, you have to rely on third-party font generators, and merge conflicts can be painful to resolve since fonts are binary files. Using SVG files instead can eliminate those pain points,…
Reactive jQuery for Spaghetti-fied Legacy Codebases
July 22nd, 2020
I can hear you crying out now: “Why on Earth would you want to use jQuery when there are much better tools available? Madness! What sort of maniac are you?” These are reasonable questions, and I’ll answer them with a little bit of context. In my current job, I am responsible for the care and…
How to Make a Monthly Calendar With Real Data
July 21st, 2020
Have you ever seen a calendar on a webpage and thought, how the heck did they did that? For something like that, it might be natural to reach for a plugin or even an embedded Google Calendar, but it’s actually a lot more straightforward to make one than you might think and only requires the…
Creating a Gatsby Site with WordPress Data
July 20th, 2020
Gatsby, a React-based framework for static sites, is attracting attention not only from JavaScript developers but also from the WordPress developers and users. Many WordPress users find its features appealing, like ultra-fast image handling and improved security protection from hackers, but would like to use them while continuing to use the WordPress admin and editor…
Three CSS Alternatives to JavaScript Navigation
July 14th, 2020
Hey quick! You’ve gotta create the navigation for the site and you start working on the mobile behavior. What pattern do you choose? If you’re like most folks, it’s probably the “hamburger” menu that, when clicked, uses a little JavaScript to expand a vertical list of navigation links. But that’s not the only option. Depending…
An Eleventy Starter with Tailwind CSS and Alpine.js
July 10th, 2020
When I decided to try to base my current personal website on Eleventy, I didn’t want to reinvent the wheel: I tested all the Eleventy starters built with Tailwind CSS that I could find in Starter Projects from the documentation. Many of the starters seemed to integrate Tailwind CSS in a contrived way. Also, some…