Matt Mayes

I like to build things and reverse engineer code. Currently studying all things JavaScript and Node. Always goes further than “it works” to “why does it work?” and “how can it work better?” Also a lover of music and bbq. More »

Latest Posts

Javascript Generators and the Spiral Matrix algorithm Feb 3, 2021 Generators are dope - and JavaScript has had them since ES6 (aka ECMAScript 2015, not confusing at all). I thought the Spiral Matrix algorithm would make a good example. To solve this algorithm you need to incrementally fill a grid with sequential numbers from the outside in (“sprialing” towards the center). I thought it would be handy if I could control the iteration and manually animate the filling of the grid, and since a generator lets you control iteration, it was the perfect thing to use. ... ➦

Should Every Developer Spend Time in Support? Feb 1, 2021 Don’t get me wrong - I don’t mean the mind-numbing “tech support” that typically comes to mind. Rather, I’m talking about onboarding a new developer through debugging and reverse engineering. If you are a mid to senior level devoloper/engineer - I think this is a great way to learn about the things you will be working on. I’ve just ended a 4 year stint as a Senior Support Developer - before that I was a site developer (at the same company), and was pretty happy in that initial role. ... ➦

Fun With Pi-hole and Raspberry Pi Nov 22, 2020 A Raspberry Pi sure is a handy thing to have around - not only to tinker with but also when you need a 24⁄7 server on the cheap to do things like cron jobs, act as motions detectors - or in my case, make a DNS Sinkhole with Pi-hole. After setting this up, not only am I enjoying quicky disposing of ads, but also the faster loading of web pages. ... ➦

Site Now on Github :) Oct 15, 2020 I’ve received a few requests to make this site fully available on github, and now it is! You can access it here: https://github.com/stoptime/mattmayes-hugo Have a look around, and if something seems wrong in my content or anything else, please raise an issue or PR. Thanks for the interest!

Making Hugo Even Faster Jan 4, 2020 UPDATE this site is now on Netlify, which is frickin’ awesome (and free for basic sites) but if you’re on another host, especially one that uses Apache, this might help you. We all want our mobile PageSpeed Insights score to be in the 90s right? There’s more to it than tossing on that old flannel, here are some things that helped me. Take advantage of Free Cloudflare Cloudflare has a free plan that can really boost your site by handily taking care of things like minification, serving your site over HTTP/2 or even HTTP/3 when possible, “Page Rules” you can use to cache the heck out of those static assets, Brotli compression (the safe version of gzip for https connections); their Rocket Loader™ improves paint time for pages that include javascript - not to mention their free and easy HTTPS and everything is on their CDN. ... ➦

JavaScript Arrow Functions and 'this' Dec 27, 2019 One of the things that makes JavaScript so interesting (and weird) is not only the various ways to write an arrow function, but how ‘this’ behaves within one. The paricular part I find interesting is that arrow functions don’t have their own this - rather, they inherit this from the invocation context that calls them, aka their outer function. Maybe That’s a Strength? We can use that knowledge to get around some dodgy problems. ... ➦

Hugo: Add Handy Css Classes to the Body Tag Dec 19, 2019 It is so handy to have some css classes on the <body> tag. When working in Drupal, I like to at least have the content type as a css class, “article” or “page” or whatever. In Hugo, I also put the content type as a class on the <body>, as well as the filename/path, like so: <body class="{{ .Type }} {{ with .File }}{{ .TranslationBaseName }}{{ end }}"> In the hyde-hyde theme this is done in the baseof. ... ➦

Hugo Rsync Deploy and Htaccess Dec 18, 2019 Deploying this site to my WebFaction account was super easy, I pretty much just followed the Hugo docs for rsync deployment, with one minor change to minify the html output: #!/bin/sh USER=your-username HOST=your-username.webfactional.com DIR=webapps/your-app/ # the directory where your web site files should go hugo --minify && rsync -avz --delete public/ ${USER}@${HOST}:~/${DIR} exit 0 Note the --minify flag after hugo, which will make your pages even more performant by minifying the the html output. ... ➦

Hugo: How to Properly Add Custom CSS Dec 16, 2019 UPDATE: This works the exact same way with scss - on this site I just updated my config.toml to point to scss/custom.scss. So you’ve picked out and installed your Hugo theme, but you just need to tweak a few things here and there, yet you don’t see a config setting that allows you add your own css file(s) in config.toml 👎 In addition to adding your own css file, wouldn’t it be great if they were minimized and had the integrity set too? ... ➦

Hugo and Wrangling Hyde-Hyde Dec 15, 2019 So I’m just getting started with Hugo, and decided to go with, and tweak, a classic theme: hyde-hyde. Off the bat, while the hugo docs are good - here’s a few things that helped things click for me. When you just run hugo - it creates a public directory, and this is where your files are served from (and what you would upload to a host). If things seem off or just weird, look for this directory and if exists, delete the whole thing - it’s easy to recreate by just running hugo again. ... ➦