a-laughlin

node_modules
package-lock.json

a-laughlin

/**
  @name constructTree
  @description Creates vertex and in-edge hashmaps given a topology

  @example 
  assert.deepStrictEqual(
    constructTree([ { breadth: 2 }, { breadth: 1 } ]),
    {
      vertices: { 
        '0': { id: '0', depth: 1 }, 

a-laughlin

A collapsible section containing markdown

Click to expand!

Heading

1. A numbered
2. list
   • With some
   • Sub bullets

a-laughlin

// purpose: tools to make replacements from deeply nested objects to imports for large codebase migrations
// usage:
// https://astexplorer.net/#/gist/b8ff1963328449b8063253147c04a462/111b0113648c8f800e8fac56d54e49006c3c2c2b
const isObjectPath = p =>
  p.type === 'MemberExpression' ||
  p.parentPath.type === 'MemberExpression' ||
  (p.parentPath.type === 'CallExpression' && p.parentPath.parentPath.type === 'MemberExpression');

// loops over a path, starting at base object, up to the first function call
const eachPath = fn => p => {

a-laughlin

Component Driven Design Notes
Basic concepts?
  Bottom up from small components
Benefits?
  Efficiency (Faster development)
  Testability (More)
  Enables component library/explorers
  One separation of concerns (Separation of concerns)
Different Separations of Concerns?
  . Page-Based (Before MVC)

a-laughlin

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions

a-laughlin

Testing Notes
  Tradeoffs (high-level):
    ref? https://kentcdodds.com/blog/unit-vs-integration-vs-e2e-tests#cost-%EF%BF%A0-heap--
    . Cost: Time to write/maintain/fix/run tests in Dev/Dev
    . Feedback Speed: Longer time to get feedback.
    . Confidence: How confident do we feel that passing tests mean users will actually experience the same behavior in production.
    . Confidence vs Cost/Feedback Speed
  Accessibility concerns to test?
    . Flows, like multiple keyboard navigation steps
    . Screen reader testing

a-laughlin

sender chooses whether to communicate
  (noise|barriers)
sender chooses intended receivers (experience graph for each)
  (noise|barriers) barrier: architecture prevents
for each intended receiver:
  sender chooses concepts to communicate (noise|barriers) (experience graph for each)
  sender maps own concepts to receiver concepts (noise|barriers)
  sender encodes receiver concepts to language
    syntax: (noise|barriers)
    semantics: (noise|barriers)

a-laughlin

different kinds of modules through JS history
  name              year  sync  async   encapsulatable  immutable     dependency defs       dep resolution  code example
  -------
  namespaces        2000: yes   no      no              no            none                  manual          var App = {};
  revealing module  2005: yes   no      yes             no            global variables      manual          var myModule = (function($){return {fetch:$.get}})(jQuery)
  CommonJS          2009: yes   no      yes             yes           file names            graph           module.exports={foo:'bar'} const foo = require('foo').foo
  AMD               2009: no    yes     yes             no            file names            graph           define(['jQuery','Application'],($,App)=>{}), require('foo',(foo)=>{...use foo...})
  ES modules        2016: yes   yes     yes             yes           sub-file parts        graph           import {foo} from 'foo', export const foo='bar'; import('foo').then((module)=>module.foo)
  

a-laughlin

var mufasa = {
  name: "Mufasa",
  sing() {
    var inner = function() {
        console.log("inner:this", this);
    };
    var innerStrict = function() {
        'use strict';
        console.log("innerStrict:this", this);
    };