• About
  • Page Markup and Formatting

garykealy.dev

  • How Computers Work – Learning Plan 2022

    February 2nd, 2022
    Updated May 2, 2022

    A copy of How Computers Really Work by Matthew Justice arrived in the post a couple of days ago. This year I want to get back to basics and be more intentional with the tools I use. Along with How Computers Really Work, I have a lengthy list of unread books from Humble Bundle that I finally intend to work my way through. 

    After getting my head around the computer, I’ll move onto The Linux Command Line and then some vim and git. The overall aim is to get really solid with the perennials that we tend to learn on the job. I’m comfortable with all them but I want to be better. 

    This post will serve as an accountabiliblog to keep me on the straight and narrow. I’ll update it over the year and leave some breadcrumbs. If anyone has any resource suggestions (preferably books), I’d love to hear them. 

    Update March 7

    For anyone trying to understand events in Ukraine, this booklist looks like a good place to start, and Timothy Snyder seems to know what he’s talking about. It feels odd to consider anything else under these circumstances, but here we are.

    How Computers Really Work (HCRW) did exactly what I hoped it would. It gives a very broad overview from binary and electrical circuits to the internet protocol suite and bitcoin, and helped fill in some knowledge gaps I have with lower level computers workings.

    It was nice to trace a line between my Dad’s work (electrician) and my own. I called to him up to ask some questions about the chapters on electrical circuits. It was also wonderful to step out of the continuous stream of tutorials and sit down for hours at a time with a book.

    I found this guide very useful in approaching the book and will continue to use it as I work through this year’s reading list. It suggests reading the book three times so I haven’t finished HCRW yet really, but will interlace it with other books when relevant.

    In one chapter, describing a circuit for a vending machine, it explains how electric circuits are so fast that they often need to be slowed down whenever human interaction is involved. This was rather upsetting reading given the daily struggle with bloated websites. We’ve somehow managed to make this inherently fast system very slow.

    Next on the reading list is The Linux Command Line, another No Starch Press book (keep on eye on Humble Bundle for No Starch Press book bundles). It is bigger and more dense than HCRW. I could probably spend the the rest of the year with it. We’ll see how it goes…

    Update May 02

    I’ll try to keep this update short, otherwise this post will be unbearable by the end of the year (if it isn’t already).

    The Linux Command Line was lighter than expected, however I had to recommit to it a couple of times, and the juiciest chapters were rushed through on the train to Málaga with my two year old daughter wriggling around beside be. Not ideal.

    Some of the most useful parts for me were how to manipulate output. Here’s a little script I wrote that retrieves the version number for any WordPress plugin. This is part of a larger script to help me automate some premium plugin updates*.

    find . -type f -depth 1 | xargs grep -i 'plugin name:' | cut -f 1 -d ':' | xargs sed -n '/* version:/Ip' | cut -f 2 -d ':'

    * If you are a WordPress plugin developer, please provide a way to install your plugin with composer so no one has to do this.

    If this looks like hieroglyphs to you, check out the book. I’d recommend it to any programmer. It’s both informative and enjoyable. I laughed out loud a few times, a huge plus for a technical book.

    Next on the reading list is Linux Command Line and Shell Scripting Bible and Shell Scripting: Expert Recipes for Linux, Bash, and More, third edition and first edition respectively. These are two PDFs I have from Humble Bundle.

  • Optimising Google Fonts in WordPress

    July 7th, 2020
    Updated August 15, 2021

    Harry Roberts has a great piece on optimising Goolge Fonts. I’m going to assume you’ve read it, and show you how you might implement his suggestions in WordPress.

    Firstly, WordPress automatically adds dns-prefetch for any styles or scripts from external hosts. Harry doesn’t mention dns-prefetch at all, so lets just mark that down as a good-to-know and move swiftly on.

    I’m not going to bother with running the numbers here as Harry has already kindly done that for us. So without further ado…

    Async CSS

    This is a very nice little trick. It’s certainly worth reading the Filament Group post about it. To do this in WordPress, the style_loader_tag hook can be used:

    <?php
    
    add_filter( 'style_loader_tag', 'google_fonts_async', 10, 3 );
    /**
     * Load Google Fonts Asynchrously
     * 
     * @see https://www.filamentgroup.com/lab/load-css-simpler/
     */
    function google_fonts_async( $html, $handle, $href ) {
        if ( false === strpos( $href, 'fonts.googleapis.com/css' ) ) {
            return $html;
        }
    
        return str_replace(
            "media='all'",
            "media='print' onload=\"this.media='all'\"",
            $html
        );
    }

    I’m checking the href here, so any styles with ‘fonts.googleapis.com/css’ will be loaded asychronously, but you could just use the handle if you want to target a specific stylesheet.

    Also, some plugins remove media='all' from link tags. In that case rel='stylesheet' can be used for the string replacement.

    preload

    WordPress does not have an API for preloading links yet, so we can just use wp_head for the time being.

    <?php
    
    add_action( 'wp_head', 'google_fonts_preload', 1 );
    /**
     * Add preload link for Google Fonts
     */
    function google_fonts_preload() {
        ?>
    
        <link rel='preload' as='style' href='GOOGLE-FONTS-URL'>
    
        <?php
    }
    

    Alex MacArthur has a post on automating the preloading of scripts.

    preconnect

    This one was used in the Twenty Seventeen theme, which was probably released around the same time as WordPress 4.6 when wp_resource_hints() was introduced.

    <?php
    
    add_filter( 'wp_resource_hints', 'google_fonts_resource_hints', 10, 2 );
    /**
     * Add resource hints for Google Fonts
     */
    function google_fonts_resource_hints( $urls, $relation_type ) {
    	if ( 'preconnect' === $relation_type ) {
    		$urls[] = [
    			'href' => 'https://fonts.gstatic.com',
    			'crossorigin'
    		];
    	}
    
    	return $urls;
    }

    Plugin

    I’ve created a little plugin with all of the above. Here’s the gist. Drop it into your mu-plugins directory then in your theme:

    <?php
    
    if ( class_exists( 'ylkyrg\OptimiseGoogleFonts' ) ) {
    	( new ylkyrg\OptimiseGoogleFonts() )->run();
    }

    It can take an array with either the handle or href for the fonts.

    <?php
    
    if ( class_exists( 'ylkyrg\OptimiseGoogleFonts' ) ) {
    	( new ylkyrg\OptimiseGoogleFonts(
    		[
    			'handle' => 'google-fonts-handle',
    			'href'   => 'GOOGLE-FONTS-URL'
    		]
    	) )->run();
    }

    If the handle is provided only that specific style is targeted. The href is requied to add preloading.

Proudly powered by WordPress