I had a fairly specific manual task that involved documenting some design tokens that i created into a table for a design system. It was tedious and even though there were some plugins that would get me half way there, i still had to do a lot of manual work.

Token Table Generator takes a figma colour style in the format of <Light/Dark>/<Colour Role>/<Colour State>/<Modifier> and puts it into a table with labels. The token structure uses the Shopify Polaris, with a couple of modifications.

Code for the plugin here if you have a similar use case.

Figma Token Table Generator ↗

After the release of the mini NES and SNES i looked into the RetroPie OS for Raspberry Pi. A visit to ebay and a few more to Bunnings later i built a two-player top down Arcade Table.

The bits:

• IKEA second hand tabletop
• Bunnings this and that
• Recycled LCD monitor
• Raspberry Pi 3
• 3D printed screen mounts and Pi case
• RetroPie OS ↗

Relevant Domains ↗ scrapes the last year or so of Urban Dictionary words and definitions, turns them into dot coms, checks those against the Domainr API for availability and churns out a static website to flick through them all.

Relevant Bot ↗ (thanks to Chloe for the idea) sits alongside Relevant Domains. Every day it selects a random available Relevant Domain, find someone on Twitter who has used that relevant jargon recently, and @'s them the URL of the associated Relevant Domain. Goal is to give the site more exposure and hopefully they click through to purchase on Namecheap.

The bits:

• X-Ray
• Domainr API
• Metalsmith
• Airtable
• Netlify
• Ziet Now

Wouldn't it be handy if your computer could sense when you made a mistake?

Whoopsy Extension uses a machine learning model trained with Teachable Machine ↗ to listen for when you make "whoops" or an "oops" and hits Undo for you.

Used Tensorflow's Chrome Extension example ↗ and Netlify Dark Mode Extension ↗

At a previous workplace we had one downstairs toilet. I noticed that staff would often walk to the toilet only to be disappointed that it was occupied.

To fix this i grabbed our dusty Rasbperry Pi, a lot of blutack and a reed switch to update a number stored in Firebase indicating the occupancy of the toilet. Staff could then visit a website or use the /peesee command within slack to check whether they were good to go.

The bits:

• Firebase ↗
• Raspberry Pi
• Resin.io (now Balena.io) ↗
• Express ↗

This website, like many other designer's/developer's website, is a test bed for ideas and experimentation. It has been plaintext, HTML and CSS only, Wordpress, DatoCMS backend, Airtable backend, Middleman built in the past which have all had their pros and cons.

Now the setup is one which I have been using for some time on my own and client projects. It's simple, low cost, maintainable and fast.

Let's go back to front:

• Netlify CMS is the CMS. It is open source, git-based and has just enough features to build the majority of sites I need.
• Gridsome is the Vue version of Gatsby, an open source framework to build static websites/apps.
• Styling is always manual no frameworks or themes. JS is plain old javascript.
• All the hosting, CDN, DNS etc is on Netlify which I squeeze every last feature out of their free tier. The CMS is in the repo on Github.

Using this setup I can build and host this site, and most of my client websites for $0 ongoing costs (excluding the domain name).

Finding somewhere to quickly test your lottie JSON export from AE was weirdly difficult. So I made this little tool.

lottie-json-player.netlify.app ↗

Takes a random wikihow article title and another random wikihow article image and puts them together. This was my first project trying out Github Copilot and for a part-time developer like me, it's super handy.

wikihow-remixer.netlify.app ↗

Found Around is an app to guide people to learn about their local flora and fauna (animals and plants), by giving them Collections based on geographic locations. For each animal or plant, a series of Tips are given to help you identify, then a photo is saved into the app to mark it as found.

It's built with using the Expo SDK, on my Windows PC via WSL2 (a tricky configuration) and lots of help from Copilot which for a once-every-now-and-again dev like me is a lifesaver.

I'm hoping to launch for free for just Android and release additional Collections in the future.

I'm constantly looking at multiple sites for references, I was collecting them using an old Mac App called Ember. It's great at what it did but was no longer under development.

Good Internet Online started as a place to upload the 1500 screenshots i had taken of websites over the years, but i decided to keep it a bit more niche.

A cron job scrapes Designer News Site Design category everyday, if a new one is found it takes screenshots using the headless browser PhantomJS, grabs a bit of metadata and uploads to DatoCMS. This triggers Netlify to build and deploy the site.

More recently i've become a fan of are.na

The bits:

• Netlify CI ↗
• Heroku ↗ Daily Schedular with a Node script
• Metalsmith ↗
• Pageres ↗ (uses PhantomJS)
• DatoCMS ↗

I use are.na daily for bookmarking and discovery of things that i wouldn't find anywhere else. Navigating to my individual channels to grab a reference currently involves navigating to are.na to search or browse the index of my profile. I wanted a direct route.

Typing arena <channel name> into the firefox omnibox will list up to six results. Currently it is only doing a public search.

Future enhancement could for a lot of interaction with the API, not necessarily just for search, similar to what you might achieve with a raycast or alfred plugin.

Get the extension for Firefox desktop ↗

Are.na is a platform for connecting ideas and building knowledge.

I'm a huge fan of the are.na platform, community and approach to web in general. It's built by a small, considered team and often involves users in designing and developing new features.

I use are.na as a bit of a bookmarking, collection tool. Constantly adding URLs and screenshots to a growing list of categories.

are.na cli tools ↗ is something i built to cater to some of my workflows.

Uses:

• xo
• meow
• my own fork of arena-js
• cli-meow-help

I'm continuing to build on it and add new functions as i need them.