Skip to content

Instantly share code, notes, and snippets.

@goldhand
goldhand / Async - Promise - Callback hell .js
Created November 18, 2016 07:47
Compare Async / Promise / Callback hell javascript code examples of same end
/**
* fsExists promise
* @param {string} fp - filepath to check exists
* @returns {Promise} fsExists
*/
const fsExists = (fp) => new Promise(
resolve => fs.access(fp, err => resolve(!err))
);
const filepath = path.resolve(__dirname, 'tmp/service-worker.js');
@goldhand
goldhand / parseHtmlStyles.js
Last active March 18, 2023 16:28
Parse html style string for a react component
/**
* @function parseStyles
* Parses a string of inline styles into a javascript object with casing for react
*
* @param {string} styles
* @returns {Object}
*/
const parseStyles = styles => styles
.split(';')
.filter(style => style.split(':')[0] && style.split(':')[1])
@goldhand
goldhand / controlled-vs-uncontrolled.jsx
Created December 30, 2016 17:19
Compare controlled and uncontrolled components
/**
* Uncontrolled component
* DOM controls state and is source of truth.
*/
const EditHeader = ({
style,
value,
}) => {
let elem;
@goldhand
goldhand / get-package-dependencies.js
Created February 10, 2017 22:19
Get a bunch of dependencies from multiple package.json formated for npm install command
#!/usr/bin/env node
const fs = require('fs');
const path = require('path');
const args = process.argv.slice(2);
const targetDependencies = args.filter(arg => arg.includes('ependencies')).length
? args.filter(arg => arg.includes('ependencies'))
: ['peerDependencies', 'devDependencies', 'dependencies'];
const packageFiles = args.filter(arg => arg.includes('json')).length
@goldhand
goldhand / array-destructure-assignment.js
Created February 15, 2017 17:32
Examples of es6 array destructure assignments
// Array Destructure Assignment Examples
const myArray = ['a', ['b', ['c']], ['d']];
const oldWayA = myArray[0]; // 'a'
const [newWayA] = myArray; // 'a'
const oldWayB = myArray[1][0][0]; // 'b'
@goldhand
goldhand / withKeys.js
Created February 21, 2017 23:46
Add an object key to a child object
/**
* Assigns object keys to the assigned child object
* @returns {Object} keyed object
*/
const withKeys = (obj, uid = 'uid') => {
return Object.keys(obj).reduce((keyObj, key) => {
let keyed;
if (typeof obj[key] === 'object') {
keyed = {...obj[key], [uid]: key};
} else {
@goldhand
goldhand / immutableMove.js
Created March 8, 2017 00:52
Immutable move item in an array
/**
* Immutable move item
*/
const move = (arr, from, to) => {
const clone = [...arr];
Array.prototype.splice.call(clone, to, 0,
Array.prototype.splice.call(clone, from, 1)[0]
);
return clone;
};
@goldhand
goldhand / pseudoStyles.js
Last active March 23, 2017 19:48
Format pseudo styles for a react component
/**
* Pseudo styles
* @param {Object} pseudoStates - state object with keys matching pseudo attributes
* @returns {Object} use(styles)
*
* @example
* const styles = {color: '#000', hover: {color: 'red'}, active: {color: 'green'}};
* const state = {hover: true, active: true};
* pseudoStyles(state)
* .use(styles.button)
@goldhand
goldhand / addasset.js
Created March 30, 2017 01:13
Webpack - add asset to compilation
apply(compiler) {
compiler.plugin('after-emit', (compilation, callback) => {
const file = 'some data';
compilation.assets['foo.js'] = {
source: () => file,
size: () => Buffer.byteLength(file),
};
});
}
@goldhand
goldhand / renderUpload.js
Created June 27, 2017 15:47
Render upload method on react class
class Upload extends Component {
/**
* Renders one of [renderProgress, renderEnd, renderUnknown] depending on
* the XMLHttpRequest.status
* @returns {Object} Video placeholder with progress bar
*/