
Node introduced the `promisify` utilities in back in version 8.

Using `promisify` you can use the node.js file system utilities with `async/await` and `promises.`

There are a couple bits missing from the core node.js filesystem.

Below is the promisified file system calls I use a bunch in projects.

I've added `createDir`, `fileExists`, and `deleteDir` to smooth over some of the core `fs` methods that can be a little awkward to work with.

```js
/* ./utils/fs.js */
const fs = require('fs')
const mkdirp = require('mkdirp')
const rimraf = require('rimraf')
const { promisify } = require('util')

const fileExists = (s) => new Promise(r => fs.access(s, fs.F_OK, e => r(!e)))

// Recursive read dir
async function readDir(dir, allFiles = []) {
  const files = (await fs.readdir(dir)).map((file) => path.join(dir, file))
  allFiles.push(...files)
  await Promise.all(files.map(async (file) => (await fs.stat(file)).isDirectory() && readDir(file, allFiles)))
  return allFiles
}

module.exports = {
  // Check if file exists
  fileExists: fileExists,
  // Read file
  readFile: promisify(fs.readFile),
  // Write file
  writeFile: promisify(fs.writeFile),
  // Copy file
  copyFile: promisify(fs.copyFile),
  // Recursively create directory
  createDir: mkdirp,
  // Read directory file names
  readDir: promisify(fs.readdir),

  readDirResurvsive
  // Recursively delete directory & contents
  deleteDir: promisify(rimraf),
}
```

Install `mkdirp` and `rimraf` npm packages for `deleteDir` & `createDir`

```
npm install mkdirp rimraf
```

Then you can use it in your project

```js
const path = require('path')
const { fileExists, readFile } = require('./utils/fs')

async function doIt(filePath) {
  const exists = await fileExists(filePath)  
  let contents
  if (exists) {
    contents = await readFile(filePath)
  }
  return contents
}

const file = path.resolve('foo-bar.json')
doIt(file).then((contents) => {
  console.log('Yay 🎉', contents)
})
```

Hope this helps!

## Update

Below is an example of using `require('fs').promises` instead of `promisify` from `utils.

```js
/* ./utils/fs.js */
const path = require('path')
const rimraf = require('rimraf')
const { promises, constants } = require('fs')
const { promisify } = require('util')

const fs = promises

const deleteDir = promisify(rimraf)

const deleteFile = (s) => fs.unlink(s).catch((e) => {
  if (e.code === 'ENOENT') return // ignore already deleted files
  throw e
})

const fileExists = (s) => fs.access(s, constants.F_OK).then(() => true).catch(() => false)

// Recursive read dir
async function readDir(dir, recursive = true, allFiles = []) {
  const files = (await fs.readdir(dir)).map((file) => path.join(dir, file))
  if (!recursive) return files
  allFiles.push(...files)
  await Promise.all(files.map(async (file) => {
    return (await fs.stat(file)).isDirectory() && readDir(file, recursive, allFiles)
  }))
  return allFiles
}

async function createDir(directoryPath, recursive = true) {
  // ignore errors - throws if the path already exists
  return fs.mkdir(directoryPath, { recursive: recursive }).catch((e) => {})
}

async function copyDir(src, dest, recursive = true) {
  await createDir(dest, recursive) // Ensure directory exists

  const filePaths = await fs.readdir(src)
  await Promise.all(filePaths.map(async (item) => {
    const srcPath = path.join(src, item)
    const destPath = path.join(dest, item)
    const itemStat = await fs.lstat(srcPath)

    if (itemStat.isFile()) {
      return fs.copyFile(srcPath, destPath)
    }
    // Return early if recursive false
    if (!recursive) return
    // Copy child directory
    return copyDir(srcPath, destPath, recursive)
  }))
}

module.exports = {
  // Check if file exists
  fileExists: fileExists,
  // Write file
  writeFile: fs.writeFile,
  // Read file
  readFile: fs.readFile,
  // Copy file
  copyFile: fs.copyFile,
  // Delete file
  deleteFile: deleteFile,
  // Check if directory exists
  directoryExists: fileExists,
  // Recursively create directory
  createDir: createDir,
  // Recursively get file names in dir
  readDir: readDir,
  // Recursively copy directory
  copyDir: copyDir,
  // Recursively delete directory & contents
  deleteDir: deleteDir,
}
```

Let me know if you have other file system utilities you like to use in the comments below.

Promisified node.js file system utilities


Here are a couple regular expressions for matching quote pairs in a string.

This pattern can be quite handy for attempting to fix malformed JSON.

## Match outer `'` single quotes

Matching all outer **single** quotes in a given string:

```js
/(?:')(?=(?:[^']|'[^]*')*$)/g
```

Given this string:

```bash
echo $Rad;
```

```bash
this is my string 'foo bar 'baz lol hi'
```

The regex will only match `'foo` + `hi'` & ignore the inner quote in `'baz` (minus the words of course)

This is quite handy for trying to fix malformed JSON that contains single `'` vs the required double `"`

```js
const matchSingleQuotesRegex = /(?:')(?=(?:[^']|'[^]*')*$)/g

const malformedJSON = `{'lol': 'wh'atevr'}`

const fixedJSON = malformedJSON.replace(matchSingleQuotesRegex, '"')
console.log(fixedJSON)
/* Yay fixed */
// {"lol": "wh'atevr"}
```

[Try it yourself](https://regex101.com/r/BdU2nF/1)

## Match outer  `"` double quotes

Matching all outer **double** quotes in a given string:

```js
/(?:")(?=(?:[^"]|"[^]*")*$)/g
```

Given this string:

```
this is my string "with stuff " in quotes"
```

The regex will only match `"with` + `quotes"` & ignore the inner quote in `stuff " in`.

Usage in code:

```js
const matchDoubleQuotesRegex = /(?:")(?=(?:[^"]|"[^]*")*$)/g

const original = `
newX {"lol": "whatevr"}
str {"lol": "hey"'there"}
`

const newStringWithSingleQuotes = original.replace(matchDoubleQuotesRegex, "'")
console.log(newStringWithSingleQuotes)
/*
newX {'lol': 'whatevr'}
str {'lol': 'hey"'there'}
*/
```

[Try it yourself](https://regex101.com/r/fpgWmW/1)


## Match everything inside outer quotes

```js
/(')((?:[^\\']*)(?:\\'[^\\']*)*)(')/gm
```

https://regex101.com/r/rqJFrN/1 (old https://regex101.com/r/WWrRQF/1)

Regex Pattern: Match outer single & double quote pairs


Convert a nested object into a flat structure. A.k.a Flatten an object by its keys. This is handy for fast object lookups by value path in certain scenarios.

```js
// Convert a nested object
{
  here: {
    is: 'my',
    object: 'with',
    stuff: 'in it'
  },
  containing: {
    many: ['things', 'inside'],
  }
}

// Into a flat structure
{
  here.is: "my"
  here.object: "with"
  here.stuff: "in it"
  containing.many[0]: "things"
  containing.many[1]: "inside"
}
```

Here is the code:

```js
function flatten(data) {
  const result = {}
  function recurse(cur, prop) {
    if (Object(cur) !== cur) {
      result[prop] = cur
    } else if (Array.isArray(cur)) {
      for (var i = 0, l = cur.length; i < l; i++) { // eslint-disable-line
        recurse(cur[i], `${prop}[${i}]`)
      }
      if (l == 0) { // eslint-disable-line
        result[prop] = []
      }
    } else {
      let isEmpty = true
      for (const p in cur) { // eslint-disable-line
        isEmpty = false
        recurse(cur[p], prop ? `${prop}.${p}` : p)
      }
      if (isEmpty && prop) {
        result[prop] = {}
      }
    }
  }
  recurse(data, '')
  return result
}

function unflatten(data) {
  if (Object(data) !== data || Array.isArray(data)) {
    return data
  }
  let regex = /\.?([^.\[\]]+)|\[(\d+)\]/g
  let resultholder = {}
  for (const p in data) {
    let cur = resultholder
    let prop = ''
    let m
    while (m = regex.exec(p)) { // eslint-disable-line
      // console.log('m[1]', m[1])
      // console.log('m[2]', m[2])
      // cur = cur[prop] || (cur[prop] = ((m[2] || !isNaN(m[1])) ? [] : {}))
      cur = cur[prop] || (cur[prop] = (m[2] ? [] : {}))
      prop = m[2] || m[1]
      // remove placeholder
      prop = prop.replace(/XPERIOD/g, '.')
    }
    cur[prop] = data[p]
  }
  return resultholder[''] || resultholder
}


var object = {
 here: {
   is: 'my',
   object: 'with',
   stuff: 'in it'
 },
 containing: {
  many: ['things', 'inside'],
 }
}

var flat = flatten(object)
console.log('flat', flat)


var returnToObject = unflatten(flat)
console.log('returnToObject', returnToObject)
```

Let me know if you have a better way 😃

Flatten & unflatten javascript objects by path


Deeply calculate the difference between two objects.

This function deeply compares object values and returns the differences between the two objects.

This is quite handy for determining to do something if a value you care about in an object has changed.

```js
const { inspect } = require('util')
const transform = require('lodash.transform')
const isEqual = require('lodash.isequal')
const isArray = require('lodash.isarray')
const isObject = require('lodash.isobject')

/**
 * Find difference between two objects
 * @param  {object} origObj - Source object to compare newObj against
 * @param  {object} newObj  - New object with potential changes
 * @return {object} differences
 */
function difference(origObj, newObj) {
  function changes(newObj, origObj) {
    let arrayIndexCounter = 0
    return transform(newObj, function (result, value, key) {
      if (!isEqual(value, origObj[key])) {
        let resultKey = isArray(origObj) ? arrayIndexCounter++ : key
        result[resultKey] = (isObject(value) && isObject(origObj[key])) ? changes(value, origObj[key]) : value
      }
    })
  }
  return changes(newObj, origObj)
}

/* Usage */

const originalObject = {
  foo: 'bar',
  baz: 'fizz',
  cool: true,
  what: {
    one: 'one',
    two: 'two'
  },
  wow: {
    deep: {
      key: ['a', 'b', 'c'],
      values: '123'
    }
  },
  array: ['lol', 'hi', 'there']
}

const newObject = {
  foo: 'bar',
  baz: 'fizz',
  cool: false, // <-- diff
  what: {
    one: 'one',
    two: 'twox' // <-- diff
  },
  wow: {
    deep: {
      key: ['x', 'y', 'c'], // <-- diff
      values: '098' // <-- diff
    }
  },
  array: ['lol', 'hi', 'difference'] // <-- diff
}

// Get the Diff!
const diff = difference(originalObject, newObject)

console.log(inspect(diff, {showHidden: false, depth: null, colors: true}))
/* result:
{
  cool: false,
  what: { two: 'twox' },
  wow: { deep: { key: [ 'x', 'y' ], values: '098' } },
  array: [ 'difference' ]
}
*/

if (diff.cool) {
  console.log('Coolness changed to', diff.cool)
}
```

Combine with `deepmerge` if you want to merge the changes together.

```js
const merge = require('deepmerge')

const combinedObject = merge(originalObject, newObject)
```

If you are just looking for a deep equals check and don't care about what's different, use something like [fast-deep-equal](https://github.com/epoberezkin/fast-deep-equal).

**Happy coding!**

Get the difference between two objects in JavaScript



```js
const execa = require('execa')

function getChangedFiles() {
  let data
  try {
    data = await execa.command('git diff --name-only')
  } catch (e) {
    console.log(e)
  }
  if (!data.stdout) {
    return
  }
  const changedFiles = data.stdout.split('\n').map((file) => {
    return {
      path: file,
      fullPath: path.resolve(file)
    }
  })
  console.log('changedFiles', changedFiles)
  return changedFiles
}

```


For a more robust module checkout [run-if-diff](https://github.com/jameslnewell/run-if-diff)

Get files changed from Git history

Markdown is awesome. It's a fantastic way to write content quickly without the overhead of formatting with a WYSIWYG editor. If you are unfamiliar with `.md` files checkout the basics [here](https://guides.github.com/features/mastering-markdown/) & [here](https://daringfireball.net/projects/markdown/).

Writing text in markdown is super quick and easy, but **what about aligning images**?

Read on to learn how! The full code can be found in this [github gist](https://gist.github.com/DavidWells/7d2e0e1bc78f4ac59a123ddf8b74932d/)

# Image alignment in markdown

Normal markdown image tags don't allow for any alignment properties and thats a bummer when you are trying to make your `README.md` file pretty on github.

```md

![GitHub Logo](/images/logo.png)
```

Luckily, we can use `html` image tags to make enhance our docs.

```html

<img align="left" width="100" height="100" src="http://www.fillmurray.com/100/100">
```

## Left alignment

This is the code you need to align images to the left:

```html
<img align="left" width="100" height="100" src="http://www.fillmurray.com/100/100">
```

## Right alignment

This is the code you need to align images to the right:

```html
<img align="right" width="100" height="100" src="http://www.fillmurray.com/100/100">
```

## Center alignment example

Wrap images in a `p` or `div` to center.

```html
<p align="center">
  <img width="460" height="300" src="http://www.fillmurray.com/460/300">
</p>
```

## Markdown Formatting on steroids

If you like this, you might enjoy [markdown-magic](https://github.com/davidwells/markdown-magic). I built it to automatically format markdown files and allow folks to sync docs/code/data from external sources.

How to align images in markdown


`Promise.all` is cool but doesn't resolve the promises in exact order. This makes chaining values together impossible with an undetermined amount of promises/array items/plugins.

Using `Array.reduce` we can sequentially run & resolve an array of promises.

Below is an example of resolving a sequential promise chain that loops over an array of data and combines the values together in the correct order.

This is a working plugins system that will resolve values in order, just replace the `/* Business logic here */` section and you have a pluggable call chain. ✌️

> Aside, this is how the [analytics plugin system](https://github.com/davidwells/analytics#analytic-plugins) operates

```js
/**
 * sequentialPromiseChains
 * @param  {Array} arrayOfData - Array of data to loop over
 * @return {Any}
 */
async function sequentialPromiseChain(arrayOfData) {
  const initialValue = {
    foo: 'start'
  }

  const returnData = await arrayOfData.reduce(async (promiseChain, arrayItem) => {
    /* wait for previous promise to finish */
    const currentData = await promiseChain
    /* Business logic here */
    console.log('Do stuff with arrayItem')
    const { run } = arrayItem
    if (run && typeof run === 'function') {
      /* run the sync or async method on the array item */
      const newValue = await run()
      /* combine foo values & return promise to continue the chain */
      return Promise.resolve(Object.assign({}, currentData, {
        foo: `${currentData.foo}${newValue}`
      }))
    }
    /* Return a new promise as the accumulator to continue the promise chain */
    return Promise.resolve(currentData)
  }, Promise.resolve(initialValue))
  return returnData
}


/* Usage */
const dataArray = [
  {
    foo: 'bar',
    cool: true,
    // Sync return value
    run: () => {
      return 'lololo'
    }
  },
  {
    foo: 'baz',
    cool: false,
    // Async return value
    run: async () => {
      return 'woooot'
    }
  }
]

// sequentialPromiseChain a.k.a run plugins in order
sequentialPromiseChain(dataArray).then((d) => {
  console.log('Hooray!', d)
  // Hooray! {foo: "startlololowoooot"}
})
```

Sequentially resolve array of promises using async/await in Javascript


Matching a pattern at the beginning of a string via the `^` regex token is pretty straight forward.

**Example:**

```js
const regex = /^theThing/

const string = "theThing lol hehehe"

string.match(reg)
// > ["theThing", index: 0, input: "theThing lol hehehe", groups: undefined]
```

However, what if we want to match a given string but **only if it isn't at the start of the string**?

The regex below allows matching pattern that is **not** at the start of a string or line via `(?<!^)` regex tokens.

**Example:**

```js
const regex = /(?<!^)> function /

const string = "> function ${merge('x', > function merge('y', 'z'))}"

string.match(regex)
// ["> function ", index: 24, input: "> function ${merge('x', > function merge('y', 'z'))}", groups: undefined]

const stringTwo = "> function ${merge('x', 'x')}"
stringTwo.match(regex)
// null
```

The use case here would be trying to find a nested pattern in a string via regex.

This was handy for implementing recursive function config params in my [configorama](https://github.com/DavidWells/configorama) library.

Regex match pattern NOT at beginning of string via JavaScript


This snippet will check an object against an array of strings and return `true` if one of the keys (strings) is found.

> A.k.a. Does this object have one of these keys?

If a match is found, it will return early because we are using `.some` array method. This makes `.some` superior for lookup vs `.reduce` or other array methods that will loop the entire array.

```js
/* Find the keys! */
const anyKeyExists = (object, keys) => {
  return Object.keys(object).some((key) => {
    return keys.includes(key))
  }
}

const keys = ['track', 'page', 'identify']
const object = {
  hello: 'there',
  track: 'exists'
}

if (anyKeyExists(object, keys) {
  /* One of the keys exists. Do stuff */
}

const findOneOfThese = ['lol', 'hi', 'wow']
const secondObject = {
  hello: 'there',
  cool: true,
  haha: 'wowza'
}

anyKeyExists(secondObject, findOneOfThese)
// false
```

This is useful for verifying objects contain at least one required key.

It came in handy in my [analytics library](https://www.npmjs.com/package/analytics) to detect plugins being passed into the library.

Hope this helps ya! 🎉

Also, it can be a one liner... but I prefer `return`'s... call me old fashioned.

```js
const anyKeyExists = (object, keys) => Object.keys(object).some((key) => keys.includes(key))
```

^ just not as easy to parse IMO.

Check if any key exists in javascript object


This snippet will return user defined properties on the window object.

This is useful for seeing what globals are being exposed to the window.

It works by creating an iframe and comparing the window element of the empty iframe.

```js
function getWindowVars() {
  // create an iframe and append to body to load a clean window object
  const iframe = document.createElement('iframe')
  // hide iframe
  iframe.style.display = 'none'
  // add iframe to page
  document.body.appendChild(iframe)

  // get the current list of properties on window
  const currentWindow = Object.getOwnPropertyNames(window)

  // filter the list against the properties that exist in the clean window
  const results = currentWindow.filter(function(prop) {
    return !iframe.contentWindow.hasOwnProperty(prop);
  })

  // Clean up iframe
  document.body.removeChild(iframe)

  return results
}

// usage:
const userDefinedVars = getWindowVars()
console.log(userDefinedVars)
```

For example you might want to see if browser extensions are polluting the global window or what analytics tools a site has installed.

Get user defined window global variables with javascript


Handy little regular expression to parse links from markdown files.

Links in markdown look like this:

```md
[View the analytics docs](https://getanalytics.io/)
```

To parse `.md` links programmatically with a regular expression use this pattern:

```js
/* Match only links that are fully qualified with https */
const fullLinkOnlyRegex = /^\[([\w\s\d]+)\]$(https?:\/\/[\w\d./?=#]+)$$/

/* Match full links and relative paths */
const regex = /^\[([\w\s\d]+)\]$((?:\/|https?:\/\/)[\w\d./?=#]+)$$/

const string = "[View the analytics docs](https://getanalytics.io/)"

const myMatch = string.match(regex)

console.log(myMatch)
/* ["[View the analytics docs](https://getanalytics.io/)", "View the analytics docs", "https://getanalytics.io/", index: 0, input: "[View the analytics docs](https://getanalytics.io/)", groups: undefined] */

// de-structure the array
const [ full, text, url ] = myMatch

console.log(text)
// 'View the analytics docs'

console.log(url)
// 'https://getanalytics.io/'
```

See the demo on [regex101](https://regex101.com/r/m9dndl/1)

## Parsing all links out of file

To grab all the links of of a file, you can use this:

```js
const regexMdLinks = /\[([^\[]+)\]($.*$)/gm

// Example md file contents
const mdContents = `
Lorem ipsum dolor sit amet, consectetur adipiscing elit..

[hello link](/admin/table_edit/table_edit.cfm?action=edit&table_name=organizationsXcategories)

Lorem ipsum dolor sit amet, consectetur adipiscing elit..

[otherLink](https://google.com)

Lorem ipsum dolor sit amet, consectetur adipiscing elit..

[third link](https://google.com)
`

const matches = mdContents.match(regexMdLinks)
console.log('links', matches)

const singleMatch = /\[([^\[]+)\]$(.*)$/
for (var i = 0; i < matches.length; i++) {
  var text = singleMatch.exec(matches[i])
  console.log(`Match #${i}:`, text)
  console.log(`Word  #${i}: ${text[1]}`)
  console.log(`Link  #${i}: ${text[2]}`)
}
```

Comment below if you have any questions or updates to this snippet!

Regex to match markdown links


Handy snippet for forcing an asynchronous promised based library/function to run synchronously.

This works by spawning a `child_process` using `spawnSync`.

The `sync-rpc` module, will handle this for us in node.

**Note: You shouldn't use this for production server side code**. Forcing sync functions will block the event loop and can result in much slower programs. In some cases, like in a CLI or in a simple script you are writing, this doesn't matter much.

Sometimes, you just need things to work without an entire refactor of a script/library to get it working. This is a quick and easy way to force async to sync.

## 1. Install the module

```bash
npm install sync-rpc
```

## 2. Put your async code into a new file.

```javascript
// async-thing.js file
function asyncFunction() {
  return (paramOne, paramTwo) => {
    // Your async code here
    return delay(2000).then(() => {
      return {
        one: `${paramOne}-value`,
        two: `${paramTwo}-value`,
      }
    })
  }
}

// Simulate a async promise delay
function delay(t, v) {
  return new Promise((resolve) => {
    setTimeout(resolve.bind(null, v), t)
  })
}

module.exports = asyncFunction
```


## 3. Import your async code and wrap it.

Import the `./async-thing` file and wrap with `sync-rpc` module.

This will pause execution and make the async code block and run sync.

```javascript
const forceSync = require('sync-rpc')
const syncFunction = forceSync(require.resolve('./async-thing'))

// inside your thing that needs to be sync (for whatever reason)
const paramOne = 'foo'
const paramTwo = 'bar'
console.log('start')
const syncReturn = syncFunction(paramOne, paramTwo)
console.log('syncReturn', syncReturn)
// result after 2 seconds
// { one: `foo-value`, two: `bar-value` }

// Do the rest of your stuff with `syncReturn` value
```

## Live example

https://repl.it/@DavidWells1/SecondaryUnnaturalArguments

## Alt approach using worker threads

This is an interesting approach using worker threads described by https://samthor.au/2021/block-nodejs-main-thread

```javascript
// main.js
import { Worker, MessageChannel, receiveMessageOnPort } from 'worker_threads'
const { 
  port1: localPort, 
  port2: workerPort 
} = new MessageChannel()

const shared = new SharedArrayBuffer(4)

// send the shared buffer and port to the Worker
const workerData = { 
  shared, 
  port: workerPort 
}
const w = new Worker('./task.js', { 
  workerData, 
  transferList: [workerPort] 
})

const int32 = new Int32Array(shared)
Atomics.wait(int32, 0, 0)  // blocks until notified at int32[0]

const message = receiveMessageOnPort(localPort)
console.warn('got fetch data', message)
```

Tasks.js 

```javascript
import { workerData } from 'worker_threads'
import fetch from 'node-fetch'

const { 
  shared, 
  port 
} = workerData

console.warn('fetching')
const text = await fetch('https://google.com').then((r) => r.text())
console.info('fetched a blog')

port.postMessage(text)

const int32 = new Int32Array(shared)
Atomics.notify(int32, 0)
```

Forcing async functions to run sync in node.js


Handy snippet for manipulating and grabbing data out of a large javascript object

```javascript
function traverse(x) {
  if (isArray(x)) {
    traverseArray(x)
  } else if ((typeof x === 'object') && (x !== null)) {
    traverseObject(x)
  } else {

  }
}

function traverseArray(arr) {
  arr.forEach(function (x) {
    traverse(x)
  })
}

function traverseObject(obj) {
  for (var key in obj) {
    if (obj.hasOwnProperty(key)) {
      traverse(obj[key])
    }
  }
}

function isArray(o) {
  return Object.prototype.toString.call(o) === '[object Array]'
}

// usage:
traverse(largeObject)
```

Recursively Traverse an object of unknown size in Javascript


This will test the contrast of the background color to determine what text color to use.

This is handy for changing text colors for stuff with dynamic background colors so the text will always be readable.

Example: if the background is black, make the text light so it's visible.

Example2: if the background is white, make the text dark so it's visible.

```js
var contrast = require('contrast')
// set correct text color based on background color
function setVisibleTextColor(bgColor) {
  var textColor = '#000' // default
  if (contrast(bgColor) === 'light') {
    textColor = '#000' // make text color black so it's visible on light BG
  } else if (contrast(bgColor) === 'dark') {
    textColor = '#fff' // make text color white so it's visible on dark BG
  }
  return textColor
}

var textColor = setVisibleTextColor('#333') // it's dark, text color will be #fff
```

Set visible text color based on a dynamic background color

Inline SVGs are great for icons in your applications.

They much smaller than font icons and far more accessible.

This snippet will create an SVG sprite from a string.

It will let you avoid dealing with CORS/Browser security issues with SVGs serving from different domains.

It also means you won't need to ajax your sprite into the page after it loads.

```js
function createSVGSprite(svgString){
  // create SVG
  var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
  // set namespaces
  svg.setAttributeNS('http://www.w3.org/2000/xmlns/', 'xmlns:xlink', 'http://www.w3.org/1999/xlink')
  svg.setAttribute('width', '0')
  svg.setAttribute('height', '0')
  svg.setAttribute('style', 'display: none')
  // Create a dummy div
  var div = document.createElement('div');
  // Wrap the svg string to a svg object (string)
  var svgfragment = '<svg>' + svgString + '</svg>'
  // Add fragment to the div
  div.innerHTML = '' + svgfragment
  // Splice the children of the SVG and append into the real SVG
  Array.prototype.slice.call(div.childNodes[0].childNodes).forEach(function (el) {
      svg.appendChild(el)
  });
  return svg
}

/* usage: */
// stringified SVG
var svgPathString = "<svg style=\"position:absolute; width: 0; height: 0\"><symbol viewBox=\"0 0 26 26\" id=\"back\"><path d=\"M23.954 14H5.144l5.6 8h-2.44l-6.302-9 6.301-9h2.442l-5.601 8h18.81a11.121 11.121 0 0 1 0 2z\"></path></symbol></svg>"
// create sprite
var svg = createSVGSprite(svgPathString)
// insert sprite into the DOM
document.body.appendChild(svg)
```

```html

<svg>
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#back"></use>
</svg>
```

# Demo

<p data-height="265" data-theme-id="0" data-slug-hash="gryPYL" data-default-tab="js,result" data-user="DavidWells" data-embed-version="2" class="codepen">See the Pen <a href="http://codepen.io/DavidWells/pen/gryPYL/">Cross Browser SVG Sprites</a> by David Wells (<a href="http://codepen.io/DavidWells">@DavidWells</a>) on <a href="http://codepen.io">CodePen</a>.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

Cross Browser SVG Sprites with JavaScript


Find all javascript files in a project, excluding `node_modules` and output their line number length

Useful for seeing what files might need refactoring.

```bash
# javascript-line-length.sh
find ./ -type f -name "*.js" -not -path "*/node_modules/*" -print0 | xargs -0 wc -l | sort -n >> files.txt | echo 'Done. See files.txt for stats'
```

Find all Javascript files in a project & count line numbers


Sometimes you need to grab a specific DOM node from an event or third party function but are not able to grab the element using it's class or ID because there could be multiple copies of the node on the page.

For example, if you have a variable number of charts on a page, you can't simply look for `document.querySelectorAll('.chart')` because there could be many and you won't know which order they render in.

So we need to loop up through parentNodes to find our exact dom node.

This script will loop up through it's parent nodes until it finds a matching class or it will find nothing and return `null`

```js
function findMatchingParentNode (element) {
  while (element) {
    // if target is DOCUMENT_NODE bail
    if(element.nodeType === 9) {
      return null
    }
    // In this instance I am looking up matching classes but you can check for whatever
    var classes = element && element.getAttribute("class")
    // look for my matching class of 'this-is-my-non-unique-class'
    if (classes && classes.indexOf('this-is-my-non-unique-class') > -1) {
      // Its a match! give me back the element
      return element
    }
    // not found yet, reset element to it's parent and look there
    element = element.parentNode
  }
  return true
}
```

I needed this for some D3 charting stuff I've been working on to reposition a tooltip dynamically and I needed parent chart node's width.

Loop up through DOM node parents and look for a matches


Remove every regular expression match from a string except for the first occurrence.

This is handy for removing or replacing matches in a string after the first one.

```js
function removeDuplicateRegexMatchesExceptFirst (string, regex) {
  var count = 0
  var replaceWith = ''
  return string.replace(regex, function (match) {
    count++
    if (count === 1) {
      return match
    } else {
      return replaceWith
    }
  })
}

var string = 'Button__button___2a549 myprefix-action-button-component Button__action___3EoEX myprefix-button-component'
var regex = /myprefix-[a-zA-Z0-9-]*-component/gm
removeDuplicateRegexMatchesExceptFirst(string, regex)
// "Button__button___2a549 myprefix-action-button-component Button__action___3EoEX "
```

Regex for the win!

Remove every regex match from a string except for the first occurrence with JavaScript


[XT.js](https://gist.github.com/plugnburn/07c383da5f151a54d0b2) is a crazy small script to generate DOM fragments

```js
// XT.js source
(function(d) {
  function nodeRender (tplArr, parent, k, o) {
    for (;(o=tplArr.shift())!=null;) {
      if (''+o === o || +o === o) // scalar
        parent.appendChild(d.createTextNode(o))
      else if (''+o === '[object Object]') // object
        for (k in o) parent.setAttribute(k, o[k])
      else { // array
        nodeRender(o, k = d.createElement(o.shift()))
        parent.appendChild(k)
      }
    }
  }
  // assign function to window
  window.XT = function (tplArr, docFrag) {
    nodeRender(tplArr.slice(), docFrag = d.createDocumentFragment())
    return docFrag
  }
})(document)
```

Usage:

```js
var div = XT([
    ['div', {'data-attr1': 23},
        ['a', {href: 'http://example.com'}, 'Example text',
            ['span', ' (additional span)']
        ]
    ]
])
// append div to body
document.body.appendChild(div);
```

Very cool script when you need some DOM nodes on the fly

Generate DOM Fragments with JavaScript


Handy little regular expression to parse HTML content and return all the tags from the string.

The loop below will run through all the matched HTML tags (or React components) and output an array with the `match` in index0, the `tagname` in index1, and the `attributes` at index2 and the `innerHTML` at index3.

I've modified the regular expression to accept capitalised Elements for usage with React components as well.

```js
  var regexAllTags = /<([a-zA-Z1-6]+)([^<]+)*(?:>(.*)<\/\1>|\s+\/>)/gim
  var html = '<h3 class="any" id="hey">Test</h3> raw text here <a href="http://google.com">hehe</a><Button onClick={this.handleClick}>React Button</Button>'

  var htmlTags = html.match(regexAllTags)
  // ["<h3 class="any" id="hey">Test</h3>", "<a href="http://google.com">hehe</a>"]

  var regexSingleTag = /<([a-zA-Z1-6]+)([^<]+)*(?:>(.*)<\/\1>|\s+\/>)/
  for (var i = 0; i < htmlTags.length; i++) {
    var text = regexSingleTag.exec(htmlTags[i])
    console.log('Tag #' + i, text)
  }
  // Tag #0 ["<h3 class="any" id="hey">Test</h3>", "h3", " class="any" id="hey"", "Test", index: 0, input: "<h3 class="any" id="hey">Test</h3>"]
  // Tag #1 ["<a href="http://google.com">hehe</a>", "a", " href="http://google.com"", "hehe", index: 0, input: "<a href="http://google.com">hehe</a>"]
  // Tag #2 ["<Button onClick={this.handleClick}>React Button</Button>", "Button", " onClick={this.handleClick}", "React Button", index: 0, input: "<Button onClick={this.handleClick}>React Button</Button>"]

```

Works for most cases I have tested.

Comment below if you have any questions or updates to this snippet!

Regex to match HTML elements & React Components including attributes


Sometimes when using custom fonts, they don't quite render correctly in the browser.

Adding these css properties will fix that in chrome and firefox. In the future hopefully [font smooth](https://www.w3.org/TR/css-fonts-3/#font-smooth-prop) will solve this for us

```css
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
```

Pixel Perfect Custom Fonts with CSS


Handy little function to turn large numbers into a more human readable format

```js
function insertCommasInNumber(number) {
  var num = Math.abs(number)
  var prefix = (number < 0) ? '-' : ''
  var output = ''
  var chars = String(num).split('').reverse()
  var commas = Math.floor((chars.length - 1) / 3)

  for (var i = 0; i < commas; i++) {
    output = output + chars.slice(0, 3).join('') + ','
    chars = chars.slice(3)
  }

  output = output + chars.join('')
  return prefix + output.split('').reverse().join('')
}

insertCommasInNumber(10000000); // 10,000,000
```

Convert Number to Comma Separated Thousands String


Handy for modals and other cases where you don't want the user to be able to scroll

```js
function noScroll() {
  window.scrollTo(0, 0);
}

// add listener to disable scroll
window.addEventListener('scroll', noScroll);

// Remove listener to re-enable scroll
window.removeEventListener('scroll', noScroll);

```

Disable Scrolling with JavaScript


This snippet will allow you to alter the style of the output of console.log statements.

Great for recruitment and warning users against copy/pasting malicious javascript into their browsers.

Use with restraint. =)

```js
console.log("%cThis text will be huge!", "font-size:44px")
```

Style console.log statements


The `__filename` constant will print out the current file path in NodeJS

```js
console.log(__filename)
// => /location/on/computer/or/server/filename.js
```

More info on node globals can be found here: [Node Globals](https://nodejs.org/api/globals.html)

Get Current File Path in Node.js


Have an array with duplicated you need to remove?

Array `filter` is your friend.

```js
var arrayWithDuplicates = ['hi', 'yo', 'whatup', 'bye', 'lol', 'yo', 'hi', 'bye'];
var deDupedArray = arrayWithDuplicates.filter(function (arrayItem, index) {
                       return arrayWithDuplicates.indexOf(arrayItem) === index;
                   });
console.log(deDupedArray); // ["hi", "yo", "whatup", "bye", "lol"]
```

Remove Duplicate Items from an Array with JavaScript


Sort items in an array alphabetically with Array `sort`

```js
var nonSortedArray = ['hi', 'yo', 'whatup', 'bye', 'lol'];
var sortedArray = nonSortedArray.sort(function (a, b) {
      if (a < b) return -1;
      else if (a > b) return 1;
      return 0;
    });
console.log(sortedArray); // ["bye", "hi", "lol", "whatup", "yo"]
```

Sort items in reverse alphabetical order like so:

```js
var nonSortedArray = ['hi', 'yo', 'whatup', 'bye', 'lol'];
var reverseSortedArray = nonSortedArray.sort(function (a, b) {
      if (a > b) return -1;
      else if (a < b) return 1;
      return 0;
    });
console.log(reverseSortedArray); // ["yo", "whatup", "lol", "hi", "bye"]
```

Sort an Array Alphabetically in Javascript


This will scan a given directory and return a list of files in that directory.

```js
var fs = require('fs'); // core node file system module
var listOfFilesInDirectory = fs.readdirSync('path/to/directory').filter(function(x) {
  return x !== '.DS_Store' && x !== 'ignore-other-file.js';
});
```

I'm excluding files that match `.DS_Store` and `ignore-other-file.js`.

David Wells

Builder of things

Serverless Architecture
User Experience & Product

Promisified node.js file system utilities

Regex Pattern: Match outer single & double quote pairs

Flatten & unflatten javascript objects by path

Get the difference between two objects in JavaScript

Get files changed from Git history

How to align images in markdown

Sequentially resolve array of promises using async/await in Javascript

Regex match pattern NOT at beginning of string via JavaScript

Check if any key exists in javascript object

Get user defined window global variables with javascript

Regex to match markdown links

Forcing async functions to run sync in node.js

Recursively Traverse an object of unknown size in Javascript

Set visible text color based on a dynamic background color

Cross Browser SVG Sprites with JavaScript

Find all Javascript files in a project & count line numbers

Loop up through DOM node parents and look for a matches

Remove every regex match from a string except for the first occurrence with JavaScript

Generate DOM Fragments with JavaScript

Regex to match HTML elements & React Components including attributes

Pixel Perfect Custom Fonts with CSS

Convert Number to Comma Separated Thousands String

Disable Scrolling with JavaScript

Style console.log statements

Get Current File Path in Node.js

Remove Duplicate Items from an Array with JavaScript

Sort an Array Alphabetically in Javascript

Scan a directory and return the file names in Node

David Wells

Builder of things

Serverless ArchitectureUser Experience & Product

Promisified node.js file system utilities

Regex Pattern: Match outer single & double quote pairs

Flatten & unflatten javascript objects by path

Get the difference between two objects in JavaScript

Get files changed from Git history

How to align images in markdown

Sequentially resolve array of promises using async/await in Javascript

Regex match pattern NOT at beginning of string via JavaScript

Check if any key exists in javascript object

Get user defined window global variables with javascript

Regex to match markdown links

Forcing async functions to run sync in node.js

Recursively Traverse an object of unknown size in Javascript

Set visible text color based on a dynamic background color

Cross Browser SVG Sprites with JavaScript

Find all Javascript files in a project & count line numbers

Loop up through DOM node parents and look for a matches

Remove every regex match from a string except for the first occurrence with JavaScript

Generate DOM Fragments with JavaScript

Regex to match HTML elements & React Components including attributes

Pixel Perfect Custom Fonts with CSS

Convert Number to Comma Separated Thousands String

Disable Scrolling with JavaScript

Style console.log statements

Get Current File Path in Node.js

Remove Duplicate Items from an Array with JavaScript

Sort an Array Alphabetically in Javascript

Scan a directory and return the file names in Node

Serverless Architecture
User Experience & Product