Skip to content

Instantly share code, notes, and snippets.

DrewML /
Last active Oct 8, 2015
A high-level overview of React DevTools new cross-browser extension

React DevTools Research


  • Shell - A view layer for the inspector
    • Shells included: Chrome, Firefox, and plain (iframe)
  • Front End - A react application that mimics the typical DevTools element panel (node tree)
    • Is always displayed inside a shell
    • Receives data from bridge
    • Fires the following events
      • setState
View protractor-mocha-tags.js
// Note: ES6 syntax requires a version of Node.js >= 4.0.0
'use strict';
// Can use any lib (or none, if you choose) to parse args.
// "npm install yargs --save" to use this example as-is
let argv = require('yargs').argv;
const DELIMITER = ',';
const TAG_IDENT = '#';
let tagsOpt = typeof argv.tags === 'string' && argv.tags;
View hipchat-titlebar.css
// Application title bar
body.dark .aui-header {
background: #000;
// "New Chat" button
body.dark .aui-header .aui-button {
background: #3C4444;
DrewML /
Created May 1, 2016
"Secret" Slack slash commands

"Secret" Slack Slash Commands

Enable Web Inspector


Assign a color (using hex code) to any users name

/color andrew #000000

Change Status (Doesn't seem to work)


DrewML /
Last active Jul 3, 2021
Theming Slack for OSX

Theming Slack for OSX

So, you love Slack, but you hate applications with large white backgrounds? Why not use Dark Mode!

Unfortunately, Slack does not have a Dark Mode, although it's on their list of possibilities.

But, don't fret - there is a solution! Because the slack native desktop apps are just wrappers around a web app, we can inject our own CSS to customize the application to our liking.

How to (OSX Only)

View assertion-methods.js
// Determine which `assert.x` methods are used in a codebase
// Run with jscodeshift using the --dry option
export default function transformer(file, api) {
const { jscodeshift: j, stats} = api;
const root = j(file.source);
root.find(j.CallExpression, {
callee: {
object: { name: 'assert' }
View this-doesnt-work.js
const window = {
a: 1
global = new Proxy(global, {
get(target, prop, receiver) {
if (target[prop] !== undefined) {
return target[prop];
return window[prop];
View jsdom-global.js
const jsdom = require("jsdom").jsdom;
const doc = jsdom(undefined, { url: "http://localhost" });
const jsdomWindow = doc.defaultView;
global.document = doc;
global.window = new Proxy(jsdomWindow, {
set(target, property, value) {
global[property] = value;
return value;

webpack Build Performance Tips

Limit the number of extensions passed to the resolver

When the resolver is working through its version of the node module resolution algorithm, it has to perform a large number of file system operations to determine what an ambiguous require/import string is. This means, every extension webpack needs to look for can drastically increase the number of disk hits necessary when enhanced-resolve is attempting to locate an import.


DrewML / emit-all-plugin.js
Last active Aug 5, 2018
Output every file in a webpack build to the specified dist directory in the webpack config. Each file is output after having each loader run against it, but before the webpack module wrapper is added.
View emit-all-plugin.js
const path = require('path');
module.exports = class EmitAllPlugin {
constructor(opts = {}) {
this.ignorePattern = opts.ignorePattern || /node_modules/;
shouldIgnore(path) {
return this.ignorePattern.test(path);