Where Whisk Is Better Than Hype!

Share your Work
1

I wanted to put the smiley face with looking eyes on my website, but I didn't want to include the whole Hype runtime for just an oversized emoji. So, I converted it to raw code. But to do that, I needed to see where the elements would end up. That's when I used Whisk.

I put a transparent image of the smiley in the same element, so I could better gauge where to put the elements — eyes, eyeballs, mouth.

So, the original “Looking” directory, built with Hype, is 444K…

444K

The new version built with Whisk, and then some adjustment in WordPress, is 2.3K…

2.3K

Nice!

Now the Hype project doesn't use all of the files in the directory…

hype-files
hype-files696×548 17 KB

…but even one of the smallest runtimes is 56K and the generated script is 7K. I was worried about lowering my web.dev score if I added this little animated widget as a Hype project. So, using Whisk instead optimized the widget. :slightly_smiling_face:

2 Likes
2

The *_hype_generated_script.js is tied to a specific version of the runtime; any old versions wouldn't be used/downloaded. My guess is that it uses only the HYPE-734.full.min.js as this is the latest and you can delete all the 500 ones. I'm guessing you use a vector shape or something that would bump it to use the full runtime, leading to a 100 KB download. Yeah, that can be a bit, but it is always a tradeoff on your time to hand-tune vs. users bandwidth :slight_smile:.

1 Like
3

The mouth is vector, looked like a better smile than an earlier version.

Ah, I was wondering why the older versions would be there. Heh, now I realize that the old directory wasn't deleted. Instead, the new files were just added.