Today I Learned - Rocky Kev

TIL about heavy.js

POSTED ON:

TAGS: javascript mdn

Repo: https://github.com/gargakshit/heavy.js

Heavy.js's goal is to make your website heavier with a single, zero dependency script.

I love projects like this.

What does it do:

It downscales all images on your webpage by a factor of 3, takes the RGB values and creates spans with appropriate styles. Yes, this converts your images to HTML p and spans.

Might be tuned to my display? Who cares about the actual users' machines anyways. If my M1 Max 64GB MacBook can run it, their machines will surely run it!

How it works:

  1. It finds all the images on the page.

  2. It loops through each image by running a forEach(callbackFunction)
    mdn forEach

  3. The callback Function called is pixelify(image), which passes the image into that function.

  4. It then takes the image, converting it into pixels of color.

  5. It then goes through loops to identify the rgba, and create a span tag, force a rgba color on it and a innerText being '■'.

  6. Then all those spans get added together and replaces the image.

After all of this is finished, we've just turned to a image into a span. So something like a 100x100 image becomes 10,000 span tags! Beautiful!

Huzzah for reverse-optimization!

Related TILs

Tagged: javascript

TIL what is npm Script

Despite their high usage they are not particularly well optimized and add about 400ms of overhead. In this article we were able to bring that down to ~22ms.

TIL fancy methods to transform Javascript Objects

You can use Object.entries(), Object.keys(), Object.fromEntries()...

TIL how to hide your JS code

ONE THING TO NOTE: Encrypting a script is stronger than obfuscation, both methods are still not adequate to protect secret content. Honestly, I don't think it's worth it on a production site, and instead just go with pure server-side if you want security. But it's fascinating.