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.

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...

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.

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/

Shame on you.

Shame on you.

Oh my

Further confirmation of my point. ✅

My point confirmed. ✅

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

much appreciated, @andrejnsimoes.com + @gregex.bsky.social!

`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).

I have learned first-hand that the document.currentScript can be useful. #javascript

macarthur.me/posts/curren...

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.

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...

- The lighter, resized images will be served for future page views.

I've seen many, many examples of 3000px-wide images being used for a small 300px-wide card. Now you don't even need to think about it.

Just plop a small, deferred, non-intrusive script pages with PP images. ⚡️

- Each image will be measured, using the rendered & natural widths to determine if it could be resized more effectively.

- Eligible images will be asynchronously resized based on how they *actually* show on a large screen.

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 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.

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 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.

list of forbidden request headers

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

How Do I Choose? The approaches we've covered here are not exhaustive, but I think they do a good job at representing the various trade-offs you should consider when breaking up long tasks. Still, depending on the need, I'd probably only reach for a subset of these myself. If I can do the work off from the main thread, I'd choose a web worker, hands-down. They're very well supported across browsers, and their entire purpose is to offload work from the main thread. The only downside is their clunky API, but that's eased by tools like Workerize and Vite's built-in worker imports. If I need a dead-simple way to break up tasks, I'd go for scheduler.yield(). I don't love how I'd also need to polyfill it for non-Chromium users, but the majority of people would benefit from it, so I'm up for that extra bit of baggage. If I need very fine-grained control over how chunked work is prioritized, scheduler.postTask() would be my choice. It's impressive how deep you can go in tailoring that thing to your needs. Priority control, delays, cancelling tasks, and more are all included in this API, even if, like .yield(), it needs to be polyfilled for now. If browser support and reliability are of the utmost importance, I'd just choose setTimeout(). It's a legend that's not going anywhere, even as flashy alternatives hit the scene.

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:

Thanks Barry!

macarthur.me/posts/long-t...

scheduler.yield() example

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:

We'll soon be able to slide open a `height: auto` box with native CSS. Using JavaScript or other creative tricks to animate open a box with unknown contents will soon be a thing of the past. Let's tinker with two new approaches native to CSS.

Wrote about it more detail here:

macarthur.me/posts/modern...

You can now opt into animating intrinsic size keywords by using "interpolate-size: allowed-keywords" on a parent element.

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

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.

Short post about composing template literal types in TypeScript:

macarthur.me/posts/templa...

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.

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...

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.

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

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.” 🤦‍♂️

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.

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

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