Skip to content

Instantly share code, notes, and snippets.


Oh My Zsh

My favourite iTerm2 profile configured to perfection

💾 Install Oh My Zsh

Follow the basic installation:

sh -c "$(curl -fsSL"
View colours.itermcolors
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "">
<plist version="1.0">
<key>Ansi 0 Color</key>
<key>Alpha Component</key>
<key>Blue Component</key>
chrisboakes /
Last active May 14, 2019 15:08
A new approach to our CSS

Atomic CSS

There are many different variations to 'Atomic' CSS. While we could consider the programmatic approach, it's not good for readablity (e.g. Pos(a) Bgc(brandColor) W(columnWidth) H(90px)).

I suggest the following approach because of its readability and scalablity:

  1. Atoms
  2. Molecules
  3. Organisms
  4. Templates
chrisboakes / instagram-feed.js
Last active October 4, 2018 09:45
A very basic example of retrieving a feed of Instagram posts and appending it to a DOM Element
View instagram-feed.js
* A very basic example of retrieving a feed of Instagram posts and appending it to a container
* @param {String} accessToken - Access token from Instagram <>
* @param {String} containerSelector - The id or classs of the DOM Element we're append our feed into
* @param {String} rootClass - The class we'll use for each Instagram DOM Element
* @param {String} totalImages - How many images we're fetching from the API
* @version 0.1
* @author Chris Boakes
export default class InstagramFeed {
chrisboakes / cookie-consent-bar.js
Last active May 23, 2018 12:45
Basic Cookie Consent Bar
View cookie-consent-bar.js
chrisboakes / custom-google-map.js
Created February 23, 2018 12:46
Custom Google Map Class
View custom-google-map.js
/* global google */
* Custom Google Maps class with custom colours
* @param String container - the selector for the map to appear in
* @param Object center - the lat/lng of the center of the map
* @param INT zoom - how zoomed in do we want the map to be
* @param Object markerLocation - the lat/lng of the marker
* @param String markerSVG - optimised SVG of marker
* @param INT markerSVGWidth - the height of our custom marker
* @param INT markerSVGHeight - the height of our custom marker
chrisboakes / object-fit-polyfill.js
Last active January 24, 2018 11:23
Polyfill for browsers that do not support 'object-fit'
View object-fit-polyfill.js
* Polyfill for browsers that do not support 'object-fit'
* Replaces any image with a 'data-object-fit' attribute with a div with a background-image
* @author Chris Boakes & Gemma Black
export class ObjectFitPolyfill {
constructor() {
this.dataSelector = '[data-object-fit]';
this.backgroundSize = 'cover';
this.cssClass = 'u-fill-image';