johnborges

/* Default span styling - hidden on desktop */
table td span {
    background: #eee;
    color: dimgrey;
    display: none;
    font-size: 10px;
    font-weight: bold;
    padding: 5px;
    position: absolute;
    text-transform: uppercase;

johnborges

// skip items
let [a , , b] = [1, 2, 3];

// quick swap variables
let a = 1;
let b = 3;

[a, b] = [b, a];

// assignment without declaration

johnborges

const js = `console.log('Hello everyone!');`;
const encodedJs = encodeURIComponent(js);
const dataUri = 'data:text/javascript;charset=utf-8,'
  + encodedJs;
import(dataUri);

// Output:
// 'Hello everyone!'

johnborges

10 React Component Commandments

1. Document the Usage If you don't document how your component is supposed to be used, it's by definition useless.

2. Allow for contextual semantics Allow your components to accept an as prop, which will consistently let you override what DOM element is being rendered.

function Grid({ as: Element, ...props }) {
 return 

johnborges

const Animal = ({ id, name, legCount, isFriendly }) => {
  const url = `url/animal/${id}`
  const legCountStr = toString(legCount) || '?'
  const friendliness = { true: 'Friendly', false: 'Unfriendly' }[isFriendly]
  const hasNotEnoughData = legCount === undefined && isFriendly === undefined

  return (
    <li>
      <a href={url}>{name}</a> - {legCountStr} legs
      {friendliness && ` - ${friendliness}`}

johnborges

run().
  catch(function handleError(err) {
    err.message; // Oops!
  }).
  // Handle any errors in `handleError()`. If the error handler
  // throws an error, kill the process.
  catch(err => { process.nextTick(() => { throw err; }) });

async function run() {
  await Promise.reject(new Error('Oops!'));