oliverjam

import { useReducer, useRef, useEffect } from "react";

function reducer(state, action) {
  switch (action.type) {
    // When the hook is first called
    case "LOAD": {
      return { ...state, status: "loading" };
    }
    // When LOAD finishes fetching initial remote data
    case "RESOLVE_LOAD": {

oliverjam

Twitter people to follow

• Lea Verou
  CSS sorceress

• Sara Soueidan
  Frontend/SVG expert

• Andy Bell
  Teaching frontend basics

oliverjam

// Wrap around a video you want to autoplay.
// Don't set the autoplay attribute,
// since that can't respect user preferences.
// e.g. <safer-autoplay><video src="vid.mp4"></video></safer-autoplay>

// Sidenote: motion should _really_ be opt-in,
// since lots of users won't know they can set a preference
// "no motion" is the safest default,
// but good luck getting that past your PO/designer ¯\_(ツ)_/¯

oliverjam

function html(strings, ...interpolations) {
  return strings
    .map((string, i) => {
      let value = interpolations[i];
      // 0 is falsy but a valid value in HTML
      if (value === undefined || value === null || value === false) {
        value = "";
      }
      // join arrays so they aren't stringified with commas
      if (Array.isArray(value)) {

oliverjam

<style>
  body {
    margin: 0;
    min-height: 100vh;
    display: grid;
    grid: none / 1fr 1fr;
    gap: 1rem;
  }
  %23i {
    outline: 0;

oliverjam

// pipe takes an arbitrary number of functions as arguments
// It returns a new function waiting for a value to be passed in
function pipe(...fns) {
  return function(val) {
    let finalResult;
    for (fn of fns) {
      // Call each function in turn with val (the first time) or the previous result
      finalResult = fn(finalResult || val);
    }
    return finalResult;

oliverjam

const get = prop => object => object[prop];

const objects = [
  { id: 1 },
  { id: 2 },
  { id: 3 },
];

objects.map(get('id'));

oliverjam

// inc :: Number -> (Number,String)
const inc = x => y => [y + x, `${inc.name}${x} was called.`];
const inc1 = inc(1);

// dec :: Number -> (Number,String)
const dec = x => y => [y - x, `${dec.name}${x} was called.`];
const dec1 = dec(1);

// unit :: Number -> (Number,String)
const unit = x => [x, ''];

oliverjam

function loop(start, end, increment) {
  console.log(start);
  if (start === end) return;
  loop(start + increment, end, increment);
}

loop(0, 10, 1);

oliverjam

const bel = require('bel');

function li(items) {
  return bel`<ul>${items.map(item => bel`<li>${item}</li>`)}</ul>`
}

document.body.appendChild(li(['1', '2']));