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 / getUnsupportedBrowsersByCaniuseId.js
Last active Jun 20, 2019
Return a list (`[]`) of all unsupported browsers (`"${browser} ${version}"`) by a caniuse id (`"${id}"`)
View getUnsupportedBrowsersByCaniuseId.js
const caniuse = require('caniuse-lite');
// return a list of all unsupported browsers by a caniuse id
function getUnsupportedBrowsersByCaniuseId (caniuseId) {
// get compressed feature details from caniuse-lite by a caniuse id
const featureDetails = caniuse.features[caniuseId];
// if the feature exists
if (featureDetails) {
// get browsers stats for the feature
@jonathantneal
jonathantneal / getPropertyDescriptor.js
Created Jun 19, 2019
The getPropertyDescriptor method returns a property descriptor of a given object
View getPropertyDescriptor.js
/**
* Return the property descriptor of a given object
* @param {Object} obj - The object for which to access property descriptors
* @param {String|Symbol} key - The name or Symbol of the property whose descriptor is to be retrieved
* @return {Object} The property descriptor of the given object
*/
function getPropertyDescriptor (obj, key) {
if (obj === undefined || obj === null) {
throw new TypeError('Cannot convert undefined or null to object');
@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 Aug 20, 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() {
You can’t perform that action at this time.