Nobody Cares about Tractor Loader

While writing, I loathe leaving my editor to edit images in some GUI. It’s worse during the revision process, when the same image might need to be adjusted over and over as the article changes. So a few years ago for this blog I wrote Tractor Loader. Tractor Loader enables inline image transformation in JSX and MDX. For example, in the source for my previous article, the pictures near the beginning look like this:

![corner side view](./side_2.jpg?crop=350,500,550,200&tractor)

![top view](./top.jpg?crop=100,100,100,750&tractor)

![top view lid removed](./top_in.jpg?crop=250,500,200,600&tractor)

![bottom view](./bottom.jpg?crop=100,50,300,0&tractor)

![side view with flipped lid](./flip.jpg?crop=300,100,250,100&tractor)

![outer corner close-up](./img.jpg?crop=0,200,0,400&tractor)

![inner corner close-up](./corner_inner.jpg?crop=0,0,0,150&tractor)

This lets me just dump the raw images from my camera into my source folder, and crop/rotate them to fit the article as I write. It’s great; I rarely crack open Paint.Net for my articles nowadays.

If You Build It, They Won’t Even Know About It

When I published this library I announced it on X, Product Hunt (cringe?), the NextJS Discord, and I published tractor-loader and the mdx support on npm. I published some documentation which is indexed by Google.

Then, I did nothing, because primarily I just needed this for myself. But I’m now wondering — what should I have done? What could I do now to get more feedback or see if anyone else would find it useful? How much “dark software” is like this in the world, possibly useful but undiscovered?

What’s Next?

I am going to try this on a few places I didn’t before, Show HN and LinkedIn (cringe?). Is there somewhere else? Let me know on X.

A Parting Example

import Image from "next/image";
import i0 from "./img.jpg?rotate=-45&crop=o250,o250,o-250,o-250&tractor";
import i1 from "./img.jpg?rotate=0&crop=o250,o250,o-250,o-250&tractor";
import i2 from "./img.jpg?rotate=45&crop=o250,o250,o-250,o-250&tractor";

<div className="grid grid-cols-3">
  <Image className="rounded-l-md" src={i0} alt="cat" />
  <Image className="" src={i1} alt="cat" />
  <Image className="rounded-r-md" src={i2} alt="cat" />
</div>;

Image Credits

The cat photo for this article is the one from the Tractor Loader Documentation, by Mikhail Vasilyev from Unsplash.