oliverjam

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

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

// 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

Twitter people to follow

• Lea Verou
  CSS sorceress

• Sara Soueidan
  Frontend/SVG expert

• Andy Bell
  Teaching frontend basics

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": {