Skip to content

Instantly share code, notes, and snippets.

Jonathan Neal jonathantneal

Block or report user

Report or block jonathantneal

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@jonathantneal
jonathantneal / README.md
Last active May 21, 2019
JavaScript Array Transduce and FlatMap Alternative
View README.md

transduce

The transduce function creates a new array of elements passing a filter and resulting from a map.

Implementation

function transduce (filterCallbackFn, mapCallbackFn, ...transduceArgs) {
  return Array.prototype.reduce.call(
    this,
@jonathantneal
jonathantneal / README.md
Created May 1, 2019
babel-plugin-transform-globals: How I generate browserGlobals.js
View README.md
  1. In each browser, I get a JSON-stringified array of every property name on window except itself. I place these names into files like name.chrome.json or name.firefox.json.
<!doctype html>
<body>
<script>
(function () {
	const windowNames = Object.getOwnPropertyNames(window).filter(name => name !== 'window');
	const textarea = document.createElement('textarea');
	textarea.value = JSON.stringify(windowNames);
View babel-plugin-utils.js
function getReplacementIdentifiers (globals, types) {
return Object.keys(Object(globals)).reduce(
(object, name) => Object.assign(object, {
[name]: module.exports.createMemberExpressionFromString(globals[name], types)
}),
{}
);
}
function getImportsBySource (globals) {
@jonathantneal
jonathantneal / recovery.sh
Last active Jun 6, 2019
Create or update macOS Mojave Recovery Partition Without Reinstalling
View recovery.sh
#!/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
jonathantneal / css-tree-test.js
Created Oct 4, 2018
CSS Tree Experiment: Write Custom Property Fallbacks
View css-tree-test.js
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
jonathantneal / goto-github-project.sh
Created Sep 18, 2018
Goto GitHub Project: No more cd’ing between multiple user/project directories
View goto-github-project.sh
# 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
jonathantneal / detect-autofill.js
Created Sep 11, 2018
Detect autofill in Chrome, Edge, Firefox, and Safari
View detect-autofill.js
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
jonathantneal / postcss.js
Last active Jun 24, 2018
PostCSS using only the old CSSOM
View postcss.js
/* CSSNode
/* ========================================================================== */
function CSSNode(source) {
this.source = source;
}
Object.defineProperties(CSSNode.prototype, {
index: {
get() {
@jonathantneal
jonathantneal / README.md
Last active May 17, 2018
Declarative HTML Components
View README.md
@jonathantneal
jonathantneal / sanitizeDOM.js
Last active Feb 25, 2019
Sanitize a document or element using a whitelisted selectors and whitelisted attributes
View sanitizeDOM.js
// 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
You can’t perform that action at this time.