Don't Let Visitors Know Your Origin Server Exists For the best performance, there’s no good reason content-focused sites should ever serve an uncached page to a visitor. With modern caching directives and other approaches on the table, it’s easier than ever to preventing visitors from knowing your origin exists at all.
PicPerf's Impact on Jane Ross Tutoring's Website By activating the PicPerf WordPress plugin, Jane Ross Tutoring's website saw a drop of 1.2MB in image page weight -- 78% of the total image weight being loaded on the home page.
TIL: A Link’s Download Attribute Won’t “Just Work” for Cross-Origin Resources I just realized that using the "download" attribute on HTML links works only for same-origin resources by default. Fortunately, the "fix" is pretty simple, as long as you have control over your server’s response headers.
Get All That Network Activity Under Control with Priority Hints The browser is very good at prioritizing resources requests on its own. But it's not always great. Priority hints makes it easy to provide explicit instructions as to how and in what network activity occurs.
Your Cache Headers Could Probably be More Aggressive It's common for modern hosts to cache static assets in a flexible, but not most optimal way. Let's explore why that is and what we can do to push cache performance (for some assets) even further.
Reviewing PicPerf's Impact on SongwriterCity.com By using PicPerf, Songwriter City's saw a sizeable reduction in total page weight and a healthy boost in its overall performance score. Here are the details.
Building a Two-Way Data Binding Hook for Form Inputs in React Two-way form input binding is a popular feature offered by JavaScript frameworks like Vue and Svelte. I took a minute to explore what the React version of it might look like. I don't hate the result.
Taking Variable Fonts for a Spin It's been a minute since they were introduced, but I finally took some time to see how variable fonts stack up to their static counterparts. At least for my own blog, it was worth the effort.
Run Puppeteer with Docker on Fly.io Walking through the process of running Dockerized Node & Puppeteer on Fly.io.
How to Better Leverage Browser Preloading It's all too common to see websites preload assets already embedded in their HTML. But doing so often doesn't gain you much, and fails to leverage the tool for the greatest impact.
Mount a Multi-Page SPA into an App with Server-Side Routing Using React Router + Laravel as an example, let's explore how to mount a multi-page SPA into an application with traditional, server-rendered routes, as well as the reasons you might want to do so.
Why I Moved from Notion to Ghost for My Headless CMS After building content on Markdown and Notion for my blog posts, I think I've finally found a CMS I can see myself sticking with for a while.
remote:picperf Why Your Website Should Use Modern Image Formats With respect to performance, the format you choose for your site's images can have a huge impact on your site's performance and overall user experience.
Why I Like Using Maps (and WeakMaps) for Handling DOM Nodes Breaking down some of the reasons Maps (and WeakMaps) are especially useful tools when working with a large number of DOM nodes.
Elegant Memoization with Ruby’s .tap Method There are a few different ways to memoize complicated chunks of code in Ruby. Here's why .tap is my personal favorite.
If Possible, Don't Run Prism.js in the Browser I just moved this site's content over to a headless Ghost instance. As a part of that move, instead of processing Markdown, I'm retrieving raw HTML. I like that. It means fewer dependencies and a less complex build process. But it also means I need to
Consider Animating Your Canvas in a Web Worker With so much going on on the browser's main thread, keeping a canvas animation buttery smooth can sometimes be a challenge. Web workers can help ease that hassle by handling the painting process elsewhere.
More Elegant Destructuring with JavaScript Generators Exploring one of the few practical-ish use cases for iterables and generators I’ve come across so far — destructuring an arbitrary number of entities on demand.
Use a MutationObserver to Handle DOM Nodes that Don’t Exist Yet Exploring how the MutationObserver API stacks up against the more traditional approach of polling for nodes that’ll eventually be created.
You’ve Got Options for Removing Event Listeners Reviewing some of the most common approaches available to remove event listeners in JavaScript.
Use the .matches() Method to Determine if a Selector Matches an Element A Superior, Native Alternative to the Lame Approaches I’ve Used in the Past
remote:jamcomments How to Lazy Load Disqus for Improved Site Performance I’ve been a vocal opponent of using Disqus for a number of reasons, one of which being what it does to the performance of your website. It’s actually one of the reasons I built an alternative. Despite that, it’s a widely used service that won’t be
remote:jamcomments Keep Using Disqus if You Don’t Care About SEO, Performance, and User Privacy I remember when I first started to get a little more serious about blogging. It was with a statically generated Gatsby site, with posts stored in flat Markdown files, and deployed on Netlify. I loved it. But I knew it was still missing something I wanted: a way for readers
When I Actually Needed useLayoutEffect() in React If you’ve worked with React for any length of time, you’ve probably heard of the infamous useLayoutEffect() hook. You’ve also probably never used it. That’s because for most cases, useEffect() covers the vast majority of use cases with a much lower chance of shooting yourself in
