jonathantneal

#!/bin/sh

# Set the macOS installer path as a variable
MACOS_INSTALLER="/Applications/$(ls /Applications | grep "Install macOS")"
MOUNT_POINT="$MACOS_INSTALLER/Contents/SharedSupport"
echo "macOS installer is \"$MACOS_INSTALLER\""

# Set the target disk as a variable
TARGET=$(diskutil info "$(bless --info --getBoot)" | awk -F':' '/Volume Name/ { print $2 }' | sed -e 's/^[[:space:]]*//')
echo "Target disk is \"$TARGET\""

jonathantneal

var csstree = require('css-tree');
var ast = csstree.parse(':root { --color: blue; color: var(--color); }');

// match custom properties `--foo`
const customPropertyRegExp = /^--[A-z][\w-]*$/;

// match var functions `var(--foo)`
const varFunctionRegExp = /^var$/i;

// return whether a node is a custom property declaration `--foo: bar`

jonathantneal

# USAGE: `goto some-project-dirname`
goto () {
  # where `~/GitHub` is the directory where you put all of your projects
  DIR=$(find ~/GitHub -type d -name "node_modules" -prune -o -type d -name "$1" -print)
  cd -P -- "$DIR"
}

jonathantneal

export default scope => {
	// match the filter on autofilled elements in Firefox
	const mozFilterMatch = /^grayscale\(.+\) brightness\((1)?.*\) contrast\(.+\) invert\(.+\) sepia\(.+\) saturate\(.+\)$/

	scope.addEventListener('animationstart', onAnimationStart)
	scope.addEventListener('input', onInput)
	scope.addEventListener('transitionstart', onTransitionStart)

	function onAnimationStart(event) {
		// detect autofills in Chrome and Safari by:

jonathantneal

/* CSSNode
/* ========================================================================== */

function CSSNode(source) {
	this.source = source;
}

Object.defineProperties(CSSNode.prototype, {
	index: {
		get() {

jonathantneal

Declarative HTML Components

Based on the examples at https://github.com/w3c/webcomponents/issues/645

Examples

Declarative HTML Component using data attributes

<!-- components.html -->

jonathantneal

// sanitize an element using a whitelisted selector string
function sanitizeDOM(ELEMENT, WHITELISTED_SELECTORS, WHITELISTED_ATTRIBUTES) {
  // get all elements within an ELEMENT
  Array.prototype.forEach.call(ELEMENT.querySelectorAll('*'), node => {
    // if the element does not match a WHITELIST_SELECTOR_STRING
    if (!node.matches(WHITELISTED_SELECTORS)) {
      // create a new document fragment
      const fragment = document.createDocumentFragment();

      // append all the children of the invalid node into the new fragment 

jonathantneal

javascript: (function () {
    function c() {
        var e = document.createElement("link");
        e.setAttribute("type", "text/css");
        e.setAttribute("rel", "stylesheet");
        e.setAttribute("href", f);
        e.setAttribute("class", l);
        document.body.appendChild(e)
    }
    function h() {

jonathantneal

(function (win, doc) {
	//
	var
	_defined = function(valA, valB) {
		return valA != undefined ? valA : valB;
	};
	hasTouch = 'ontouchstart' in win;
	startEvent = hasTouch ? 'touchstart' : 'mousedown',
	moveEvent = hasTouch ? 'touchmove' : 'mousemove',
	endEvent = hasTouch ? 'touchend' : 'mouseup',

jonathantneal

Calcite Font Sizes

Font Class	Natural	Medium	Narrow
font-size--3	13.8125px	-	-
font-size--2	14.875px	-	-
font-size--1	15.9375px	-	-
font-size-0	17px	-	-
font-size-1	20.4323px	19.2185px	18.0625px
font-size-2	24.038px	22.61px	21.25px