ryanve

.DS_Store
*.[gtGT][iI][fF]
*.[jJ][pP][gG]
*.[jJ][pP][eE][gG]
*.[hH][eE][iI][cfCF]
*.[pP][nN][gG]
*.[wW][eE][bB][pP]

ryanve

function pure(like) {
  var fresh = []
  var i = ~~like.length
  while (i-->0) fresh[i] = like[i]
  return fresh
}

ryanve

const facade = Object.freeze({
  "Example": "inline-block p2",
});

const classing = function(name) {
  if (!facade.hasOwnProperty(name)) throw new Error("Unknown classing: " + name);
  return facade[name];
}

ryanve

$(function() {
  function report() {
    $("[data-compute]").each(function() {
      var element = $(this)
      element.text(element.css(this.dataset.compute));
    })
  }

  report()
  $(window).resize(report)

ryanve

IIFE (Immediately Invoked Function Expression)

!function() {
  // Code in here is encapsulated
}();

Note that ! or + is safer than () because () could invoke preceding code.

ryanve

box-shadow composition techniques

• via variables
• via pseudostates
• via implicit pseudo elements
• via explicit pseudo elements

ryanve

!function() {
  var handle = "useColor";
  var storage = window.sessionStorage;
  var href = storage && storage.getItem(handle) || "";
  var control = document.getElementById(handle);
  if (!control) throw new Error("Unused code.");
  var head = document.head;
  var link = document.createElement("link");
  link.rel = "stylesheet";
  control.value = link.href = href;

ryanve

const fs = require("fs")
const validator = require("html-validator")
const validateFile = (file) => {
  fs.readFile(file, "utf-8", (err, content) => {
    if (err) throw err;
    console.log("Validating:", file);
    validator({
     data: content,
     format: "text",
    }, (err, report) => {

ryanve

brad frost let's business core values the culture engine com ubuntu design voice and tone special snowflake syndrone carbon design sys unity glue

ryanve

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version