Get the currently playing song on Triple J via the Command Line

I made a tiny npm library that gets the currently playing song on the radio station Triple J. This tool works on the  command line. If you have npx installed, you can use it like so.

npx triplej

If you want to open the song in Spotify, you can use this command:

npx triplej --spotify

See for details.

D3EDsSxVAAAvqRIA small feature that I’ve added to the library is a rarity system for the line separator.

I’ve also added a small feature that adds a rarity value to the song line separator. So everytime you use the tool, you may get a rare line.

Slack Beer Bot

I created a simple slack beer bot. It allows you to search for beer. In slack type /beer then any beer you want to look up. Here are a few examples:

/beer corona
/beer newtowner
/beer Hop Sauce
/beer Wayward Brewing
/beer westvleteren 12
/beer anything really

Visit for installation.

Add to Slack


A part of the purpose of this build was to road test multiple server solutions. These were: AWS Lambda, Heroku, @zeit/now. A full write up and blog post will be coming soon.

What would a Immediately Invoked Class Expression look like in JavaScript?

What would a Immediately Invoked Class Expression in JavaScript look like. This is the question I asked myself. I couldn’t find anything online, so I created one.

Below we have a Immediately Invoked Class Expression. This could also be called a Self-Executing Anonymous Class.

We have all heard of the Immediately Invoked Function Expression (IIFE) it is also known as a Self-Executing Anonymous Function. I was curious how this would look with Classes. There are two parts of a IIFE. The first is the anonymous function with lexical scope enclosed within the Grouping Operator (). This prevents accessing variables within the IIFE idiom as well as polluting the global scope. The second part creates the immediately executing function expression () through which the JavaScript engine will directly interpret the function.

To replicate this, our Immediately Invoked Class Expression would need at least these two features.

Above is what a Immediately Invoked Class Expression looks like. There are a few parts to this design pattern. Let me take you through them.

The void operator evaluates the given expression and then returns undefined. This will prevent our class polluting the global scope by always returning undefined.

The new operator interprets the defined anonymous class immediately. This then calls the classes constructor function as per the ECMAscript spec. So there you have it.

NPM Module classList-helper version 1.1.

classList update

I’ve just updated the npm module  to 1.1. It now has full unit testing.


A Element.classList method helper function that can be curried for functional programing.


Task: Add the class active to all list elements.

  <li class="item">item</li>
  <li class="item">item</li>
  <li class="item">item</li>
  <li class="item">item</li>


// import various libs
import { map, curry } from 'lodash';
let classListHelper = require('classlist-helper');

// Get the list of elements that you want to change
let nodeList = document.querySelectorAll('.item'); // 4 html elements


// Create Active method with classListHelper.
let setActive = curry(classlistHelper)('active')('add');

// Set all elements to Active.
map(nodeList, setActive);

After running this, the html will look like:

  <li class="item active">item</li>
  <li class="item active">item</li>
  <li class="item active">item</li>
  <li class="item active">item</li>

Other example methods

// Remove a Class
let setInActive = curry(classlistHelper)('active')('remove');

// Add a Class
let setActive = curry(classlistHelper)('active')('add');

// Toggle a class 
let toggleActive = curry(classlistHelper)('active')('toggle');

// Add multiple classes / Pass an Array
let setMultiple = curry(classlistHelper)(['active','updated'])('add');

// Test all elements in an Array for a class
let anyActive = curry(classlistHelper)('active')('contains');

// Replace a class with another.
let setInactive = curry(classlistHelper)(['active', 'inactive'])('replace');

Note: For more examples please check the unit tests.

npm browser-classes

I’ve just released version 1.0.1 of a new npm module browser-classes.


Adds browser classes to document body. For better cross-browser SCSS styling.

This library adds the current browser and version to the <body> tag as a class to the site.

Once you run the class, your <body> tag will have the following class added.

<body class="browser-firefox-65">
<body class="browser-ie-10">


npm i --save browser-classes


import BrowserClasses from 'browser-classes';
new BrowserClasses();

SCSS Usage

Use the @at-root method when using with SCSS

.myClass {
    color: red;
    @at-root .browser-ie-10 {
        color: blue

This will target Internet Explorer 10 with browser-ie-10 added to the body tag.

<body class="browser-ie-10">

Javascript usage

The below method can test for Internet Explorer 9

if (document.body.classList.contains('browser-ie-9')) {
    // fix

Browser only targeting

To target only a certain browser not by version use the following syntax.

body[class^="browser-firefox"] {
    color: red;

Browser Support

Currently, this library identifies the following browsers:

  • Chrome
  • Internet Explorer
  • Edge
  • Safari
  • Firefox

Example class names for browsers

Below are some examples of the classes that will be generated for the browsers.

Browser Class
Internet Explorer 10 <body class="browser-ie-10">
Edge 12 <body class="browser-edge-12">
Google Chrome 50 <body class="browser-chrome-50">
Firefox 60 <body class="browser-firefox-60">
Safari 11 <body class="browser-safari-1">

GIT Cheat Sheet

As a front end developer tools like source tree and Webstorm’s GIT GUI are life savers. But sometimes you need to open up the terminal to work with your GIT repo. Over the years I’ve saved a few commands that I use frequently. There are a few commands that will save your bacon on the odd occasion. Below is the GIST that I use and update.

Desktop Keyboard Input for Android Chrome via Chrome Developer Tools(OSX)

As a web developer or a QA Tester there will come a time when you need to run a web form on mobile multiple times. This becomes quite laborious as mobile keyboards are not the most efficient bits of software.

Below i’ll show you the steps to use your desktop keyboard via Chrome Developer Tools on your mobile/tablet while also having full developer access to the webpage on the Android device.


  • A usb cable
  • Chrome 32 or later
  • An android device with Android 4.0+

Note: A small note. Remote debugging requires your desktop Version of Chrome to be a newer version Android Chrome. To resolve this just ensure you run Chrome Canary.

Step 1. Enable remote debugging on your Android Device.

On your Android phone goto: Settings > Developer Options and Tap the “Build Number” Seven times. Then check the “USB debugging” option in the menu (Developer Options).
(An in depth guide from Google)

Step 2. Connect your Android Device to your computer via USB cable.

Step 3. Open “Inspect devices” in Chrome Canary.

Screenshot 2015-01-13 10.13.34

Step 3. Open Chrome on your Android device

A notification will appear on your Android device asking to “Allow USB debugging?” Tap OK. If this is your Developer machine check “Always allow from this computer”

Step 4. Inspect a website.

In the below image you will see that I am opening a web page on the android device without needing to use the Android Keyboard.

You can simply enter your ultra long developer url in here. Some developer urls are by no means nice urls so this is a extremely handy feature.

After that Click “Inspect”


Tip: If you have a single server that you hit quite a bit maybe you should place a NFC tag on your screen so you can open the url on any number of NFC enabled android devices.

Step 5. hit the Screencast Icon.

Once in Developer tools, click the screencast Icon. This will mirror the Android website to your desktop. Kinda like Remote Desktop. The transparent sections are the Android user interface.

You will now be able to fill in forms with your desktop keyboard hopefully saving you many hours in development.


The Back, Forward and Refresh icons are now available on your desktop as well as a url box. This will hopefully allow you to perform hands free mobile development.

This will also allow you to test situations where the devices keyboard will cover half your web page, something that cannot be emulated right now with desktop chrome.

Screenshot 2015-01-13 10.10.22


Tip: Instead of selling your old phones or giving them away, create your own personal device testing station. You can build your own or buy one. I use the Vanamco Device Lab which is pretty neat. I bought an 8 port USB dongle and connect that to my computer.

I also have a few NFC tags for websites I am currently developing.

Screenshot 2015-01-13 14.18.33 – Static site generator built with node.js.

Screenshot 2014-12-22 20.20.39

Static site generators seem to be all the rage at the moment. is built on top of node.js. It’s flexible too. Allowing various templating engines like jade, liquid, handlebars and many others.

It uses markdown for its content. It also allows you to bundle JavaScript with Browserify and compile CSS with any popular CSS pre compiler.


First install wintersmith using npm:

$ npm install wintersmith -g

This will install wintersmith globally on your system so that you can access the wintersmithcommand from anywhere. Once that is complete run:

$ wintersmith new <path>

Where <path> is the location you want the site to be generated. This creates a skeleton site with a basic set of templates and some articles, while not strictly needed it’s a good starting point.

Now enter the directory and start the preview server:

$ cd <path>
$ wintersmith preview

At this point you are ready to start customizing your site. Point your browser tohttp://localhost:8080 and start editing templates and articles.

When done run:

$ wintersmith build

This generates your site and places it in the build/ directory – all ready to be copied to your web server!


Being Smart with Colours in CSS/SCSS/LESS

I saw a question on reddit the other day about how professionals use colors in CSS. Having built a website or two for some of the top global brands I decided to detail what i believe as a good standard for professional color systems in CSS.

Use SCSS… No really.

The days of using CSS are gone. SCSS and LESS offer so much more. The techniques I use will all relate to SCSS but these can easily be adopted with any CSS pre processor.

RGBa, HSLa or HEX?

Regardless of what color system you use in SCSS or LESS all solid color’s get converted to hexadecimal colors. Also all color systems that have an alpha/transparency will convert to RGBa.

I personally like HSLa because of it’s no nonsense approach to naming and properties: Hue, Saturation, Lightness, Alpha. If you need to lighten a color all you need to do is increase or lower the percentage. I highly recommend visiting 

If using HSLa or RGBa when you define a non transparent color like: rgba(50, 50, 50, 1.0) sass will convert this to a HEX value. Sweet.

If you need to support Internet Explorer or below sadly you can’t use RGBa or HSLa. But on the upside because SASS and LESS converts HSL to HEX you can in fact use HSL with IE6. Bonus!

One last thing. In a professional environment when working with global brands, you will almost always be handed a style guide which you will have to adhere to. In this case you pretty much use what ever color system they suggest.

Variables, VARIABLES!

One of the great things that CSS pre processors introduced was variables in CSS. Finally. With colors I like to define only the main colors outlined in the style guide.

A style guide would normally give you 5 to 10 different colors. Naming should be memorable so developers can code without stoppage. Here is an example of the main variables for a fictitious brand. These would sit in the varibles.scss file in your project.

$navy: rgb(17, 47, 65);
$teal: rgb(6, 133, 135);
$saltWater: rgb(79, 185, 159);
$mustard: rgb(242, 177, 52);
$tangerine: rgb(237, 85, 59);


Note: Sass has a base set of pre-defined color variables. These can be seen here.

Now you have your base colors you will want variations of these transparent and solid. The best way is to use new variables that call the base color variables and apply one of the many SCSS functions:

This returns the Red component of a colour as a number. there is also a green() and blue()
example: red(#efffef); returns 239.

mix($color1, $color2, [$weight])
If you want to mix two colours together this is the function to use.
example: mix(red, yellow, 50%) returns #FF7F00

lighten($color, $amount)
This will darken a color by a percentage.
example: darken(white, 50%) will return gray

darken($color, $amount)
Like lighten() this does the opposite and lightens the colour.
example: lighten(black, 10%) returns #1a1a1a

This will return the complement color. It’s actual function is: adjust-hue(color, 180deg)
example: complement(green) returns purple

adjust-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha])
This will adjust a colour by property.
example: adjust-color(blue, $blue: -100, $alpha: -0.5) will return rgba(0, 0, 155, 0.5)

This converts colors that can be understood by IE filters
example: ie-hex-str(green) will return #FF008000

There are many other functions that I have left out. They can be found here:

Example Brand Color Set

Below is what a color brand set would look like. With this setup if the company or yourself decide to change the main colors you only need to change the base colors and the rest will inherit from these variables. This really is a godsend for CSS.

// base colors
$navy: rgb(17, 47, 65);
$teal: rgb(6, 133, 135);
$saltWater: rgb(79, 185, 159);
$mustard: rgb(242, 177, 52);
$tangerine: rgb(237, 85, 59);

// darker base colors
$mustard-dark: darken($mustard, 15%);
$navy-dark: darken($navy, 15%);
$mustard-darker: darken($mustard, 20%);
$navy-darker: darken($navy, 20%);

// lighter base colors
$mustard-light: lighten($mustard, 25%);
$navy-light: darken($navy, 25%);
$mustard-lighter: lighten($mustard, 50%);
$navy-lighter: darken($navy, 50%);

// complementary colors
$navy-complementary: complement($navy);
$teal-complementary: complement($teal);
$saltWater-complementary: complement($saltWater);
$mustard-complementary: complement($mustard);
$tangerine-complementary: complement($tangerine);

Alternate colours are created with sass functions like Lighten or Darken to create shades and complementary colors sets.

When styling the site you can just use these color variables knowing that a color change is no hassle at all.

My suggestion be creative with your colours and embrace the functions that sass provides to change and manipulate the colors.