Squoosh is an image compression web app that allows you to dive into the advanced options provided by various image compressors

I finally got around to playing with Squoosh, an experimental web app from the Google Chrome team that compresses images in the browser. To test it out, I screen captured the Squoosh site to test Squoosh. (This movie would be called PNG-ception, y’all.)

The screen capture resulted in a 144dpi 340kB PNG file that I dragged and dropped onto Squoosh and trusty ol’ ImageOptim. These were the results:

On the surface, the ImageOptim output looks miles better. But I just went with Squoosh’s defaults and my ImageOptim settings have been tweaked over the years. I also did this dirty test in between meetings and that’s not enough time to explore Squoosh’s options and features. It works great on mobile, exports to WebP & AV1F, and… can automate it all on the command line with NPM. I sense my weekend slipping away from me already…

If you type out somebody’s work, you learn a lot about it. Amazingly it’s like music. And from typing out parts of Faulkner, Hemingway, Fitzgerald – these were writers that were very big in my life and the lives of the people around me – so yea I wanted to learn from the best I guess.

Hunter S. Thompson

So while drowning in Preact.js and Reef research for a project, I saw a fetch() method somewhere. One new tab led to another, and I found out just how far behind my JavaScript was.

In the process, I also learned things like const and var and let go of my fear of Promises and Terry Venables thenables by avoiding them completely with Async-Await.

What I wanted to do was to move away from XMLHttpRequest towards Fetch to reduce render blocking. So this is how I used to do load in my JSON bits before:

function loadContentFromExternalFile() {
    var requestURL = "/my/data/file.json";
    var request = new XMLHttpRequest();
    request.open("GET", requestURL, true);
    request.responseType = "json";
    request.send();

    request.onload = function() {
        var retrievedData = request.response;
        if (typeof retrievedData === "string") {
            retrievedData = JSON.parse(retrievedData);
        }
        doSomeThingsWithMy(retrievedData);
    }
}

After porting to the Fetch API, the same function looks like so:

async function loadContentFromExternalFile() {
    let requestURL = '/my/data/file.json';
    let reqResponse = await fetch(requestURL);
    var retrievedData = await reqResponse.json();
    doSomeThingsWithMy(retrievedData);
}

It’s asynchronous, easier to read, there’s lesser code, and no need to use a stupid function name where XML is in all caps but HTTP is ‘Http’. Does it perform better? Time to learn how to make the most of console.time().