nickytonline

Katas

• ES6 Katas
• Flexbox Froggy
• Haven’t used this one yet, but it’s TypeScript katas, https://mycodekatas.github.io/typescript.html
• Not a Kata per se, but still good, Flexbox Zombies

React

• WTF is JSX
• All About React Router 4

nickytonline

// async/await"able" DOM event handlers

async function getMeSomeData() {
  // ...
  
  return data
}

document.addEventListener('DOMContentLoaded', async () => {
  const someContainer = document.getElementById('someContainer');

nickytonline

• Homebrew, run /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" from the command line to install it.
• Homebrew Cask, run brew tap caskroom/cask from the command line to install it.
• Alfred, buy the powerpack to get the full use of it.
• Spectacle
• Fish shell
• VLC
• Unarchiver
• f.lux
• n, run brew install n from the command line to install it.
• Fisherman, run curl -Lo ~/.config/fish/functions/fisher.fish --create-dirs https://git.io/fisher from the command line to install it.

nickytonline

import React, { Component } from 'react';
import Sentry from '../services/sentry';
import DevError from '../components/DevError';

const DEV_ENV = 'development';

const CaptureError = ({
  ComponentToWrap,
  ErrorComponent,
  environment = process.env.NODE_ENV,

nickytonline

import test from 'ava';
import React from 'react';
import { shallow } from 'enzyme';
import CaptureError from '../CaptureError';

const render = ({
  ComponentToWrap,
  ErrorComponent,
  environment = 'development',
}) => {

nickytonline

// In response to https://twitter.com/housecor/status/930108010558640128
function doubleAfter2Seconds(x) {
  return new Promise(resolve => {
    resolve(x * 2);
  }, 2000);
}

async function addAsync(x) {
  const { a, b, c } = await Promise.all([
    doubleAfter2Seconds(10),

nickytonline

interface Association<TKey, TValue> {
  key: TKey;
  info: TValue;
}

interface StringKeyInfo {
  keyIndexes: Array<Association<string, number>>;
  keyIsSet: Array<Association<string, boolean>>;
}

nickytonline

Customizing VS Code

I followed the instructions in this blog post Multiple Fonts: Alternative to Operator Mono in VSCode, but did not see any changes made to VS Code. After digging a bit, I discovered that all the CSS class names had changed. They’re now e.g. .mtk13, .mtk16 { … }.

Gotchas

• Ensure it’s a file URL e.g. { "vscode_custom_css.imports": [ "file:///Users/Brian/Desktop/vscode-style.css" ] }
• If you move the location of your file and update your user settings with the new location, you will need to disable and enable custom CSS cmd+shift+p.
• Also, anytime you change the style in your custom CSS file, you need to disable, then re-enable the extension.

For reference

• vscode-styles for operator mono, fira code ligatures, and oceanic next italic · GitHub

nickytonline

#!/bin/sh

# More Mac setup at https://mac.iamdeveloper.com

# Log file
timestamp=$(date +%s)
logFile="./my-mac-setup-$timestamp.log"

# if true is passed in, things will reinstall
reinstall=$1

nickytonline

<style>
  body {
    background-image: linear-gradient(transparent 0px, transparent 1px, rgb(255, 255, 255) 1px, rgb(255, 255, 255) 20px), linear-gradient(to right, rgb(54, 69, 79) 0px, rgb(54, 69, 79) 1px, rgb(255, 255, 255) 1px, rgb(255, 255, 255) 20px);
    background-position: 1.1875rem;
    background-size: 1.25rem 1.25rem;
    background-attachment: fixed;
  }
</style>