nickytonline

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

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

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>

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

function getActiveTab() {
  return new Promise((resolve, reject) => {
    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
      const activeTab = tabs.find(t => t.active);

      resolve(activeTab);
    });
  });
}

nickytonline

// Just having fun creating some polyfills.

/**
 * A polyfill for Object.prototype.entries.
 *
 * @returns {[string, any][]} An array of tuples where each tuple is a key/value pair.
 */
Object.prototype.entries = Object.prototype.entries || function() {
  const obj = this;

nickytonline

function expect(actual) {
  function prettyJSON(objectToSerialize) {
    return JSON.stringify(objectToSerialize, null, '\t')
  }

  return {
    toBe(expected) {
      if (actual === expected) {
        console.log('✅ Pass')
      } else {

nickytonline

module.exports = {
  entry: {
    acme_co_es5: [
      "@babel/polyfill",
      "./public/javascripts/webpack_entry_points/acme_co.js"
    ]
  },
  resolve: {
    extensions: [".js", ".jsx"]
  },

nickytonline

/**
 * Hook for drag attaching drag and drop functionality to a DOM element
 *
 * @param {object} props
 * @param {Function} props.onDragOver The handler that runs when the dragover event is fired.
 * @param {Function} props.onDragExit The handler that runs when the dragexit/dragleave events are fired.
 * @param {Function} props.onDrop The handler that runs when the drop event is fired.
 */
export function useDragAndDrop({ onDragOver, onDragExit, onDrop }) {
  const [element, setElement] = useState(null);

nickytonline

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