james-jlo-long

CSS Calisthenics

Introduction

A series of exercises designed to help you improve your CSS. This are not rules that should be applied to all style sheets and this is not a measure of CSS quality, merely tools to help you learn some of CSS's strengths.

Pre-processors and styled components

These exercises assume that you have 1 style sheet. We're talking about the CSS that is generated after the pre-processors have run. For styled components, extract all styles (even if the component isn't being used on the current view) and put them into a single style sheet. If you have an inline <style> tag for performance, those styles should be in the single style sheet.

james-jlo-long

/**
 * @file     A class that listens for breakpoints. This is far more efficient
 *           and accurate than relying on the window resize event.
 * @license  MIT
 * @author   James "JLo" Long <jameslong@xigen.co.uk>
 * @requires Observer
 */

var BreakPoints = (function () {

james-jlo-long

const times = (i, handler, context) => {

    let count = 0;
    let max = Math.floor(Math.abs(i)) || 0;

    while (count < max) {

        handler.call(context, count);
        count += 1;
        

james-jlo-long

/**
 * Polyfills a property on the given object. If the object already has the
 * property, no action is taken.
 *
 * @param {?} object
 *        Object whose property should be polyfilled.
 * @param {String} name
 *        Name of the property to polyfill.
 * @param {?} value
 *        Value for the property.

james-jlo-long

function post(url, data) {

    return new Promise(function (resolve, reject) {

        var xhr = new XMLHttpRequest();
        var params = new URLSearchParams();

        Object.entries(data).forEach(function (pair) {
            params.set(pair[0], pair[1]);
        });

james-jlo-long

// Creating a module
// 
// Here's a simple module that is created. The function isn't executed until
// another module tries to use it and it's only executed once.

myNamespace.define("one", function () {
    return 1;
});

// Here's a module that requires another module. This doesn't execute the

james-jlo-long

function SemVer(version) {

    var parsed = String(version).match(/^(\d+)\.(\d+)\.(\d+)$/) || [];

    this.string = version;
    this.version = [
        Number(parsed[1]) || 0,
        Number(parsed[2]) || 0,
        Number(parsed[3]) || 0
    ];

james-jlo-long

// Interface

ARIA.normalise = function (attribute) {}; // memoise
ARIA.getById = document.getElementById.bind(document);
ARIA.identify = function (element, prefix = "", getById = ARIA.getById) {};

ARIA.set(element, {
    hidden: true,
    controls: document.querySelector(".element"),
    labelledby: document.querySelectorAll(".reference"), // can have multiple references

james-jlo-long

# Git bash completion
# https://gist.github.com/JuggoPop/10706934
if [ -f ~/.git-completion.bash ]; then
  . ~/.git-completion.bash
  __git_complete gch _git_checkout
  __git_complete gf _git_fetch
  __git_complete gp _git_push
  __git_complete gm _git_merge
  __git_complete gr _git_rebase
fi

james-jlo-long

/**
 * A helper function for looping over all elements that match the given
 * selector. This function returns the results of the function being called on
 * all elements.
 * 
 * @param  {String} selector
 *         CSS selector to identify elements.
 * @param  {Function} handler
 *         Function to execute on all elements.
 * @param  {?} [context]