DrewML

React DevTools Research

Concepts

• 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

DrewML

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

DrewML

// Application title bar
body.dark .aui-header {
    background: #000;
}

// "New Chat" button
body.dark .aui-header .aui-button {
    background: #3C4444;
}

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

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

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

const window = {
    a: 1
};

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

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

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 path = require('path');

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

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