everdimension

<!--
  A tabindex="-1" allows an element to receive programmatic focus.
  This is useful a modal dialog window: when opened, focus should be set to the dialog so a screen reader
  will begin reading and the keyboard will be able to navigate within the dialog.
  Because the dialog (probably a <div> element) is not focusable by default, assigning it tabindex="-1"
  allows scripting to set focus to it when it is presented

  Resources:
  https://www.w3.org/WAI/GL/wiki/Using_ARIA_role%3Ddialog_to_implement_a_modal_dialog_box#Note_on_focus_management
  https://webaim.org/techniques/keyboard/tabindex

everdimension

function isBrowserIE() {
  const ie11Re = /Trident.*rv:11/;
  const edgeRe = /Edge\//;
  const ua = navigator.userAgent;
  return ie11Re.test(ua) || edgeRe.test(ua);
}

everdimension

/**
 * see redux-actions lib to see how `createAction` works
 * https://redux-actions.js.org/docs/api/createAction.html
 */
import { createAction } from 'redux-act(ions)';

class ResponseError extends Error { /* add a `this.request` prop */ }

/** add a `meta` field when payload in an Error */
const receiveEntity = createAction('SOME_TYPE', identity, payload => {

everdimension

import * as React from 'react';

interface Props {
  value: string | number;
  name?: string;
  onChange(name: string, value: number): void;
}

interface State {
  value: string;

everdimension

function arraySum(arr) {
  return arr.reduce((sum, next) => sum + next, 0);
}

function padLeft(string, size) {
  let res = string;
  while (res.length < size) {
    res = `0${res}`;
  }
  return res;

everdimension

// Say we need to display list of posts showing *only* their titles
// and name of the post author

// without graphql
const data = {
  posts: null,
  usersById: {},
};

get('/api/posts')

everdimension

const ActuallyUsedComponent = () => (
  <div>
    /* some layout and markup that doesn't depend on global state */
    <Connect mapStateToProps={mapStateToProps} mapPropsToActions={actions}>
      /* some markup where the props from connect are actually needed */
    </Connect>
    <Route
      path="..."
      component={() => (
        <div>

everdimension

function isNumericValue(n) {
  return !isNaN(Number(n) - parseFloat(n));
}

everdimension

Keybase proof

I hereby claim:

• I am everdimension on github.
• I am everdimension (https://keybase.io/everdimension) on keybase.
• I have a public key ASDZ-VkHtJ_900M-VqWOsuxU_ZJPPpICcOXL6n6qnecOhQo

To claim this, I am signing this object:

everdimension

body {
  font-family:
    /* Safari for OS X and iOS (San Francisco) */
    -apple-system,
    /* Chrome >= 56 for OS X (San Francisco), Windows, Linux and Android */
    system-ui,
    /* Chrome < 56 for OS X (San Francisco) */
    BlinkMacSystemFont,
    /* Windows */
    "Segoe UI",