In the midst of JamComments updates, I had the chance to experiment with a number of ways to preload images in JavaScript. Wrote 'em up here: macarthur.me/posts/preloa...

Your options for preloading images with JavaScript

There are a number of ways to preload an image on demand with JavaScript — each with their own strengths & drawbacks. Let's explore them.

macarthur.me

I wrote about DNS resolution from the POV of a browser, and how you can fine-tune the process to squeeze out some performance points. Check it: macarthur.me/posts/dns/

DNS Resolution Adds Up

DNS resolution is cheap, but it ain't free. In scenarios when it counts, the `dns-prefetch` resource hint could give you a nice, slight edge in the front-end performance game.

macarthur.me

He’s right. This place will continue to lose if it keeps operating like this.

Brett Meiselas@bmeiselas.bsky.social · last yr.

JD Vance just made an account on here and then was swiftly banned. I am obviously no fan of the VP, but Bluesky will never experience the growth it needs if it instantly bans any dissenting voice, including the Vice President of the United States. Feels like the wrong way to run things IMO.

I have learned first-hand that the document.currentScript can be useful. #javascript macarthur.me/posts/curren...

`document.currentScript` is more useful than I thought.

After discovering and being unsure of its value, I just realized how useful `document.currentScript` can be in exposing configuration properties to `<script>` elements (and other things too).

macarthur.me

I’ve been spending some dedicated time tinkering w/ iterators, iterables, & generators in #JavaScript. I’m still struggling a bit to find use cases in which it’s materially the best solution. But! I am liking the ergonomics more. Blog post: macarthur.me/posts/genera...

I think the ergonomics of generators is growing on me.

I took a stab at getting more familiar with iterators, iterables, and generators. I think I'm starting to like the ergonomics.

macarthur.me

Sickkk new feature coming to PicPerf: automatic resizing. Here's how it'll work: - Behind the scenes, PP will headlessly render your page at a large desktop's screen dimensions.

I learned about “forbidden” request headers recently, which can’t be overridden by client-side JavaScript APIs. A subset also give some nice context about a request, like whether it came from someone directly navigating to a page. Useful stuff. Wrote more here: macarthur.me/posts/forbid...

I guess some request headers are more trustworthy than others.

There's a subset of request headers that can't be modified by a spec-compliant user agent. Let's explore why they're useful for determining how and for what purpose a request was triggered.

macarthur.me

I think we’re over-indexing on the importance of time-to-ship and the AI tooling that minimizes it. Shipping is easier, but committing to iterating on & growing a product is still hard. That’ll probably continue to be the differentiating factor between success & failure.

TIL about “forbidden” request headers. None of these can be set in the browser by JavaScript APIs like fetch() or XMLHttpRequest.

Good post from @macarthur.me on the various ways to break up long tasks. macarthur.me/posts/long-t... I especially like nice summary at the bottom:

If you’ve ever needed to break up a long JavaScript task to keep the UI responsive, you’ve probably reached for setTimeout(). Turns out there are a boatload of other options at your disposal, like scheduler.yield(). I wrote about a handful & their tradeoffs:

Look at what you'll soon be able to do in native CSS (currently supported in Chromium browsers):

Short post about composing template literal types in TypeScript: macarthur.me/posts/templa...

I didn't know you could compose template literal types in TypeScript.

TypeScript's string literal types are a lot more useful than I originally thought.

macarthur.me

I wrote about using short-lived memoization bound to a single tick of the event loop in JavaScript. queueMicrotask() is awesome. Read: macarthur.me/posts/memoiz...

Short-Lived, Tick-Bound Memoization in JavaScript

Sometimes, typical memoization function won't cut it when there are so many changing variables in play between ticks of the event loop. Let's explore how we might fine-tune it.

macarthur.me

I blabbed a ton about forced DOM reflows, the event loop, and the browser’s repaint cycle, just to slide open a box with CSS transitions & JavaScript. Look: macarthur.me/posts/box

Using Forced Reflows, the Event Loop, and the Repaint Cycle to Slide Open a Box

Triggering smooth, reliable CSS transitions with JavaScript can be weirdly more complicated than you expect. We're gonna explore it more.

macarthur.me

Comment submissions for JamComments just got a big speed boost because I finally remembered to set Laravel’s QUEUE_CONNECTION to something other than “sync.” 🤦‍♂️

I’ve been learning about content security policies and have reached the following conclusion: They’re valuable even for simple blogs and very easy to set up. You should probably just get one. macarthur.me/posts/csp

You Might As Well Use a Content Security Policy

Content Security Policies, even for simple, content-focused sites, offer good protection against rare but real vulnerabilities out there. You might as well just get one.

macarthur.me

My first (personal) M series MacBook is coming this week. I’ve been doing all dev work on a 2015 MBP until now and I’m so ready to enter the future.

Simple demo for embedding JamComments client-side: - ~10 lines of code to configure - no custom styles necessary - ~2.6kb (gzipped) of JavaScript needed to load - ~3.6kb of HTML to load lazily load in after that And none of the grossness other comment tools throw in. jamcomments.com/demo/vanilla

My daughters are starting their first entrepreneurial endeavor. Introducing the Bin Buddies! binbuddies.pro

Let the Bin Buddies roll out your bins for you!

We'll take out your trash & recycling bins for you every week, so you don't have to keep forgetting about it!

binbuddies.pro

You can now embed comments on your website entirely client-side. Very similar to how some other services work, but with a waaaaaaaaaay smaller performance penalty and far less grossness. jamcomments.com/docs/integra...

JamComments.com is about to become very CSP-friendly. And as a result, it’ll be very difficult to tell you’re using a third-party service, even by looking through the page source. 🥷

JamComments: A guilt-free comment service for your blog.

A blog comment service and Disqus alternative that won't leave you feeling like you missed a shower.

jamcomments.com

Crazy how we’ve all just forgotten about the fact that there’s a map on the back of the Declaration of Independence.

What a friggin week. Never touching a database again.

Small blog post on running a Chrome extension's content scripts in a way that won't cause a review delay: picperf.io/posts/chrome...

Avoiding a "Host Permission" Review Delay When Publishing a Chrome Extension

Get a Chrome extension reviewed a smidge more quickly by more carefully executing its client-side scripts only when they're needed.

picperf.io

Of course.

Early version of the PicPerf Image Saver extension is out. Plz try it! It lets you download any WebP or AVIF as a more useful JPEG, PNG, or GIF. Got it submitted to the Chrome Web Store, but you can install the unpacked version now.

I’m proud of how PicPerf’s page analyzer is built. It uses Bun, Puppeteer, and Laravel to collect *only* the images that’d be downloaded when a user scrolls down a page on a phone, before running an optimization analysis on each one. Wrote about wiring it up: picperf.io/posts/collec...

Collect All Requested Images on a Website Using Puppeteer

Walking through how I used Puppeteer to programmatically collect every image loaded when a page is viewed in the browser.

picperf.io

Jira tickets: Pagan: “As a user,” Saintly: “As a child of the Living God,”

Found out a few weeks ago that React's `dangerouslySetInnerHTML` prop is more dangerous than I thought — inline event handlers on injected HTML still fire! Easy enough to neutralize, though. A short post about it. #javascript #reactjs macarthur.me/posts/safer-...

Make dangerouslySetInnerHTML Safer by Disabling Inline Event Handlers

Even though it won't run <script> tags, React's dangerouslySetInnerHTML still allows inline event handlers to execute. Here's how you might neutralize that threat.

macarthur.me