I'm a research software engineer exploring ... things
Notes on restoring my iPod Classic (4th Generation) I recently got into iPods again. I wanted to have an mp3 player again, be a bit less reliant on streaming services and add some intentionality to my music listening. I knew my parents had at least one old iPod laying around their house so I got them to dig one out! What they found was an iPod Photo, a “classic” iPod a.k.a the 4th generation. My…
Overview Explicit Resource Management is a newish JavaScript feature that lets you add tear-down functionality to function scopes. This means if your code sets something up, you can have it automatically clean things when that code completes. It's available in Node.js 20.4.0 + , Deno 1.38+ and TypeScript 5.2+ , so you should be able to use it on newer projects. It looks something like this: using…
Working on an internal app platform at work I found a way to iterate a set of events that get fired on an EventTarget. I did a cursory web search and only found some old StackOverflow posts so promptly dived in to try and implement it myself. An EventTarget is what a lot of JavaScript primitives are based on. It lets you listen to event on DOM elements , or WebSockets or EventSources . You'll…
I recently tooted that I was learning Für Elise on the piano. I've also been doing recordings and sharing them with my Mum, how cute! I thought it was kind of interesting to hear the difference in progress, this is probably only interesting to me. But here it is. I was also curious about how I could incorporate audio on my blog. First recording Recording number one I'm clearly still learning the…
I wanted a single shortcut to open a new Terminal so first I had to pick one. I had been using CMD+OPT+C in VSCode for a while to bring up the terminal pane and while dabbling with Nova I set up the same shortcut to open a new local terminal too. This had worked well for a while, but it was actually overriding the macOS default keyboard shortcut to show the colour picker, so it wouldn’t work as a…
I was posting on Mastodon about a documentation driven design process recently and thought I'd do a post to share the thing I was thinking about at the time and dig into the process and design a bit. Web Standards I've been thinking about server-side JavaScript a bit recently and especially the move towards web-standards on the backend. My first experience was when Deno came along with a really…
I've been learning about WebC recently and I'm pretty sure I'm converted. So I thought I'd put together a set of notes from my experience of learning it. To do this, let's create a little project together. From scratch. Prerequisites Before starting, I'm going to assume: You are happy to write some JavaScript You're familiar Eleventy You maybe understand custom elements (a.k.a web components)…
I've been playing around with Deno quite a bit recently. I'm really liking all of the integrated tooling and it's web-standards based approach. I wanted to create a little proxy so that I could access our Grafana dashboard on a Raspberry Pi-based display in our office. The problem is that Grafana requires authentication, but there was no way to configure the kiosk to provide it. So I set about to…
I recently wanted to host an ical feed for some events that I was organising. For the last MozFest, we added a feature to let you subscribe to the events in your MySchedule in your own calendar. People quite liked this feature and I thought it could work nicely in an Eleventy website. Under the hood a calendar feed is a ical file that is hosted on the web. In a calendar client, you subscribe to…
You can use JSDoc to automatically generate a documentation website to fully describe the contents of your API. This works by adding special comments around your JavaScript or TypeScript code that describe the code in more detail. For JavaScript you can even describe the types to better help the people using your API. An example JSDoc comment /** It erm ... adds two numbers together @param…
A macOS status bar menu showing available OATH accounts ready to generate codes for If you’ve got a YubiKey and you want to quickly get OATH codes from your macOS status bar it’s the app for you! Check out Yoath on the App Store . Oh and it’s open source , because I wouldn’t trust an app that talks to my #YubiKey that wasn’t!
While wanting to make a quick change to a blog post, I wondered how hard it could be to add a simple "edit on GitHub" shortcut to my site. On github.com while in a repository, you can press "." which opens the same repo on github.dev which is a lightweight vscode web app that lets you edit and commit changes back. I wanted to do something similar with my blog, but I only need to edit one post at a…
At work we have a Coffee Club. It goes back a while but we cooperatively bought a coffee machine and have been trying to work out the best way to organise coffee buying ever since. A brief history of the club In our old office we were split on two floors and upstairs had an "official" lab-sanctioned and paid machine and on our floor we had naught. One Black Friday a few of us clubbed together to…
Pointer events are the web's answer to mouse vs touch interactions, so you can add one event and it will be triggered consistently whether you are touching on mobile or clicking on a computer. I recently played around with some fun cards on my personal website. The project cards on my website. Click to flip over the card or click & drag to move them about. The main issue with implementing a drag…
Generating and flashing firmware onto an ESP32 can be a bit difficult. I've been using one for a new project and here is what I've learned. This post is in two parts, the pipeline I ended up creating and some key things I've learnt that I didn't think was obvious. Background This is my first time developing firmware for a chip like the ESP32 so my approach may be a little different from firmware…
ES Modules is the future for JavaScript. TypeScript support has been lagging behind, but it is finally catching up. Here's what you need to use them with TypeScript: src/index.ts export default function main ( ) { console . log ( 'This is the main export' ) } src/another-module.ts export default function alternativeMain ( ) { console . log ( 'This is an alternative export' ) } tsconfig.json {…
I recently added monitoring and alerting to my Kubernetes stack to discover and respond to failures faster. It took me a lot longer I than expected to get my head around kube-prometheus-stack and get it doing what I wanted it to, so here's what I found out. Background I've spent the last year building and running infrastructure to host virtual conferences ( Climate:Red , MozFest '21 & '22 &…
Creating custom errors in JavaScript can be very useful. If you want to handle those errors in a catch block you can use the instanceof operator to check for that specific error. And with TypeScript, you can then safely use the fields and methods on your custom error. Another benefit of custom errors is that you can provide your own constructor which lets you pass more information to the error.…
I've been quite getting into Nova recently, a macOS-only IDE developed by Panic . It's a "Mac-assed" editor and I feel it fits a lot more naturally into my flow. I've gone far enough into making a few extensions for Nova to make it work for me more. Here I want to share my experiences in doing that, specifically around setting up a project with TypeScript. Writing an Extension with TypeScript…
Static site generators are great... as I have previously mentioned, here is how to bundle JavaScript into your Eleventy site too. When you're making a website with a static site generator, you have already chosen to not to create a Single Page App (SPA). But you might still want to add JavaScript to add dynamic features. You can use an Eleventy JavaScript class template to bundle up multiple…
Static site generators are great for generating HTML from markdown files. Eleventy ( 11ty ) is a simple JavaScript based generator, named after the 11 templating languages it supports. Static HTML is great, but websites need CSS too! My go to css preprocessor is Sass, so I wanted to find a way to compile Sass directly in 11ty projects. After a bit of experimentation, the best way I found to do…
Quick Array to Map Conversion in JavaScript TLDR const people = [ { id : 'geoff' , name : 'Geoff' } , { id : 'helen' , name : 'Helen' } , { id : 'tim' , name : 'Tim' } , ] const peopleMap = new Map ( people . map ( ( item ) => [ item . id , item ] ) ) console . log ( peopleMap . get ( 'tim' ) ) // { id: 'tim', name: 'Tim' } Converting an array to a map is a useful tool to turn an O(n) operation…
systemd is a software suite that provides an array of system components for Linux operating systems. For us, it lets you run services, start them on boot then check and manage the status of them. This is useful for making sure a node.js script is running whenever a raspberry pi is running. To run through this I'll be installing a node.js app called blinkit . 1 - Installing Node.js Assuming you're…
function * myFirstGenerator ( ) { } I've always strayed away from generator functions, they are foregin, different and generally confusing. From debugging babel-ified code I've understood that async code gets transpilled into generator code, but I never understood what it meant or how they worked. I found my first use of one and was pretty pleased with myself, so I'm going to share what happened.…
Dev agility is all about getting your code into production as fast as possible and turning the time you invested into product value. The faster you can securely and reliably get your code into the hands of your users, the better. One part of this is packaging up code into containers, ready to be deployed on servers. Containers are great at defining the exact environment to run code in and…
alias d1='docker container run -it --rm' Sometimes you just want to pop into a container to see whats in there, run an arbitrary command or maybe avoid something entering your bash history. I made it nice and short and pass a couple of params, from the --help page: -i, --interactive Keep STDIN open even if not attached -t, --tty Allocate a pseudo-TTY The first gotcha of docker container run is the…
I keep needing these commands when doing pi things, so I thought I'd put them here in one place: # Edit the wifi config file # e.g. to add a new router sudo nano /etc/wpa_supplicant/wpa_supplicant.conf # Reconfigure the wifi on the pi, reloading the config sudo wpa_cli -i wlan0 reconfigure # Check the status of the wifi connection sudo wpa_cli -i wlan0 status
It's surprisingly simple to make a raspberry pi appear as a different mac address on a network. Why you want to spoof it isn't important, all you need to do is modify /boot/cmdline.txt by appending: smsc95xx.macaddr=aa:bb:cc:dd:ee:ff Then reboot your pi ( sudo reboot ) and it will force it to appear as that mac address.
alias bashrc = 'nano ~/.bashrc && source ~/.bashrc' I'm that lazy, but I'm quite happy with this. It simply edits my bashrc and automatically reloads the config into the current terminal. I think I just found it faffy to edit the right file on mac, only to try the thing I changed and realised I forgot to source the file too. It also works for zshrc too, although it does take a bit longer to…
First you'll want to connect your pi either via ethernet, an actual keyboard & monitor or ssh-over-usb if you're fancy. All the wifi config on a pi is setup in /etc/wpa_supplicant/wpa_supplicant.conf . First though, you need to generate a hash of your password, so your password isn't stored in plaintext on the very-hackable pi. # ssh you@yourpi.local read -s -p "Password: " pass && echo -n $pass |…
alias npr = 'npm run -s --' I added a new alias to my . bashrc today. I was fed up with npm's run command, it does two things that were annoying me. Needlessly noisy The first thing is that it's noisy. It spews out lots of information that I've never found useful and distracts from the real error(s). For instance, running npm run lint in this repo spews out all this: > @robb_j/r0b-blog@1.0.0 lint…
When I was making my Smart mirror I made a webapp to run on the Raspberry Pi hidden behind the frame. From all the tutorials I saw, they reccomended using a full instillation of the Raspbian desktop, then installing chrome, then hacking away at it. I didn't like this. I felt this was a waste as all I wanted was to run chrome. I didn't need a window manager, or any of the countless pre-installed…
From my experience, jsx has always been synonomous with React. But jsx can in fact be used without it. Jsx lets you write xml structures in javascript and apply your own meaning to them. You can see Facebook's specification here . Jsx is not meant to be implemented as part of the Ecmascript specification, but rather used by preprocessors (like babel ) to transform jsx code to native javascript…