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 https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>Ansi 0 Color</key>
<dict>
<key>Alpha Component</key>
<real>1</real>
<key>Blue Component</key>
<real>0.2549019455909729</real>
@chrisboakes
chrisboakes / atomic-css.md
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
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
/**
* A very basic example of retrieving a feed of Instagram posts and appending it to a container
* @param {String} accessToken - Access token from Instagram <https://www.instagram.com/developer/authentication/>
* @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
chrisboakes / cookie-consent-bar.js
Last active May 23, 2018 12:45
Basic Cookie Consent Bar
@chrisboakes
chrisboakes / custom-google-map.js
Created February 23, 2018 12:46
Custom Google Map Class
/* 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
chrisboakes / object-fit-polyfill.js
Last active January 24, 2018 11:23
Polyfill for browsers that do not support 'object-fit'
/**
* 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';