amcdnl

class Foo {

  do(name: string, userObj: object);

  do(name: string, age: string | object, birthday: string) {
    if (typeof age !== 'string') {
      // do thing
    } else {
      // do other thing
    }

amcdnl

    /*
    ctx.beginPath();

    ctx.moveTo(topLeft, 0);
    ctx.lineTo(geom.width - topRight, 0);
    ctx.lineTo(geom.width, geom.height - bottomRight);
    ctx.lineTo(geom.width - bottomRight, geom.height);
    ctx.lineTo(bottomLeft, geom.height);
    ctx.lineTo(0, geom.height - bottomLeft);
    ctx.lineTo(topLeft, 0);

amcdnl

{
  "extends": [
    "standard",
    "plugin:react/recommended",
    "prettier",
    "prettier/react",
    "prettier/standard",
    "plugin:jest/recommended"
  ],
  "plugins": ["typescript", "react", "prettier", "standard", "jest", "graphql"],

amcdnl

// Problem: Create a UI that will display a list of fields
// that will have nesting based on dot notation...

// Example fields
const exampleFields = [
  'name',
  'description',
  'entity.hostname',
  'entity.url',
  'entity.ipaddress.name',

amcdnl

Building your own data visualization framework with D3.js and React

D3.js is a great framework for creating unique and complex visualizations but the API reminds me of jQuery. It lacks a good structure and doesn't offer a declarative syntax we've all come to love with frameworks like React and Angular. We will dive into harnessing the power of D3 with the super hero powers of React to create composable declarative visualizations.

amcdnl

Bio

Austin is a JavaScript veteran with over 10 years building web applications with client-side technologies including being a contributor and team member on projects like Angular. Austin enjoys sharing his experience with other through speaking around the world, podcasts about web technology and creating and contributing to open-source projects.

Checkout Austin online at:

• Github
• Twitter

amcdnl

const SpringRange = (p) => {
  const { items, children, keys, from, enter, exit, update, ...rest } = p;
  let map = new Map();

  const renderChild = ({ delta }, item, index) => {
    const range = [index / items.length, 1]
    const itemKey = keys(item, index);
    let prevItem = map.get(index);

    console.log(prevItem)

amcdnl

<Router>
  <div>
    <ul>
      <li>
        <Link to="/">Home</Link>
      </li>
      <li>
        <Link to="/about">About</Link>
      </li>
      <li>

amcdnl

/*
  This will hide the focus indicator if the element receives focus via the mouse,
  but it will still show up on keyboard focus.
*/
button:focus:not(:focus-visible) {
  outline: none;
}

amcdnl

nativeElement.addEventListener('focus', focusListener, true);
nativeElement.addEventListener('blur', blurListener, true);

document.addEventListener('keydown', documentKeydownListener, true);
document.addEventListener('mousedown', documentMousedownListener, true);
document.addEventListener('touchstart', documentTouchstartListener, true);
window.addEventListener('focus', windowFocusListener);

let documentKeydownListener = () => {
  this._lastTouchTarget = null;