chrisboakes

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)"

chrisboakes

<?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

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

/**
 * 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

/**
 * Creates the markup and functionality for a cookie consent bar
 * Deliberately uses no modern JS so doesn't require Babel
 * @author Chris Boakes <chris@chrisboakes.com>
 */
var barClassName = 'c-cookie-consent';
var policyText = 'We use cookies to make your experience of our website better. To comply with the E-Privacy Regulations, we need to ask for your consent to set these cookies.';
// If not using additionalLink or additionalLinkText, set them to null
var additionalLink = '#';
var additionalLinkText = 'Find out more';

chrisboakes

/* 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

/**
 * 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';