DrewML

Empty Destructuring Patterns in JavaScript

@RyanCavanaugh posted a fun quiz on Twitter:

DrewML

module.exports = function transformer(file, api) {
  const j = api.jscodeshift;

  const ast = j(file.source);
  ast.find(j.CallExpression, {
    callee: {
       name: 'require' 
    }
  }).forEach(path => {
	const args = path.node.arguments;

DrewML

module.exports = function transformer(file, api) {
  const j = api.jscodeshift;

  const ast = j(file.source);
  ast.find(j.CallExpression, {
    callee: {
       name: 'define' 
    }
  }).forEach(path => {
    const args = path.node.arguments;

DrewML

const path = require('path');

module.exports = class EmitAllPlugin {
    constructor(opts = {}) {
        this.ignorePattern = opts.ignorePattern || /node_modules/;
    }

    shouldIgnore(path) {
        return this.ignorePattern.test(path);
    }

DrewML

webpack Build Performance Tips

• Limit the number of extensions passed to the resolver
  • Suggestion
• Be careful with usage of resolve.modules

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.

Suggestion

DrewML

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;
	}

DrewML

const window = {
    a: 1
};

global = new Proxy(global, {
    get(target, prop, receiver) {
        if (target[prop] !== undefined) {
            return target[prop];
        }
        return window[prop];

DrewML

// 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' } 

DrewML

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)

DrewML

"Secret" Slack Slash Commands

Enable Web Inspector

/macgap.app.enabledevelopertools()

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

/color andrew #000000

Change Status (Doesn't seem to work)

/status