Coding Cheatsheet

coding-cheatsheet.md

Javascript Tricks

Arrays

Easily convert NodeList/HTMLCollection to Array with ES6 spread operator

const arr = [...document.querySelectorAll('div')];

Vue

Unique ID generator for keys. Reuse uid if already exist on object.

function uuid (el) {
  if (el.uid) return e.uid;

  const key = Math.random().toString(16).slice(2);
  
  Vue.set(el, 'uid', key);

  return el.uid;
}

CSS Tricks

Fluid Layouts

Fluid dimensions function

// Calculates fluid dimensions
// $elementWidth = The default width of the element. E.g. If an image, the regular image dimensions
// $containerWidth (defaults to 375) = The width of the container. E.g. The viewport on mobile, usually calculate from 375
@function fluid($elementWidth, $containerWidth: 375) {
  @return (100/$containerWidth * $elementWidth) * 1vw
}

Git Tricks

Discard unstaged changes git checkout -- .