dullneon.com » random notes » page 3

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:

• Compressed PNG output file from Squoosh: 155kB
• Compressed PNG output file from ImageOptim: 54kB

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…

A micro-workshop from our friends at Root Verb to writing your own user manual.

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

There’s a mindset shift where people are increasingly looking to brands to solve societal problems

Marketing That Our Collective Future Depends On

Can’t Get You Out of My Head, a documentary by Adam Curtis (not the Kylie Minogue song).

If you have a login redirect loop issue on your WordPress site and recently activated a reverse proxy or a load-balancer, you need to add some constants in your wp-config.php file.

define('FORCE_SSL_ADMIN', true);
// in some setups HTTP_X_FORWARDED_PROTO might contain 
// a comma-separated list e.g. http,https
// so check for https existence
if (strpos($_SERVER['HTTP_X_FORWARDED_PROTO'], 'https') !== false)
$_SERVER['HTTPS']='on';

Sports car maker Lotus is going to build lifestyle models SUVs.

Now that I know the name for this feeling, I feel a bit better.

One is when your mind and body are truly tired. The other is when that system tricks you into feeling tired because you are in a rut. When you’re tired, you need rest. But if you’re in a rut, you need to nudge yourself into action.

Why I Stopped Running During the Pandemic (and How I Started Again)