shannonmoeller

# Module Starter

shannonmoeller

Goodbye Frontend Tooling

I started learning web development around 1999. We got a coupon in the mail for one free day class at a just-opened New Horizons computer training center. I chose "HTML 4.0 for Windows 98" from the brochure at random because I didn't know what any of it meant. When my dad picked me up at the end of the day I told him, "I know what I want to do for a living." The next time we went to Borders I picked up a copy of Sam's Teach Yourself Web Publishing with HTML 4 in 21 days with my paper route money and read it cover to cover in a week. We didn't have a computer with internet access at home, so I'd head to the library or use a spare computer at my dad's office and practice building pages with Notepad and keep my work with me on floppy disks.

The web and how we access it has changed a lot over the past two decades and I've had the pleasure of growing with it; from PHP and table-based layouts to full-stack Jav

shannonmoeller

import React, { createContext, useContext, useMemo, useState } from 'react';

export const NumberContext = createContext();

export function NumberContextProvider(props) {
  const [state, setState] = useState({
    number: 0,
  });
  
  // Using useState instead of useMemo so React doesn't garbage collect it.

shannonmoeller

export function define(name, init) {
  class CustomElement extends HTMLElement {
    #connection = null;
    #initialized = false;
    
    get signal() {
      return this.#connection?.signal;
    }

    connectedCallback() {

shannonmoeller

/* eslint-env node */
module.exports = {
  rules: {
    'import/order': [
      'error',
      {
        groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index'],
        'newlines-between': 'always',
        alphabetize: {
          order: 'asc',

shannonmoeller

#!/usr/bin/env node
console.log('neat');

shannonmoeller

#!/usr/bin/env bash
BRANCH=${BRANCH:main}
git clone --branch $BRANCH --depth 1 --single-branch --no-tags $1

shannonmoeller

import { useAsync } from './use-async.js';
import { useAsyncCallback } from './use-async-callback.js';

export function Cat() {
  const { data, error, loading } = useAsync(
    async (signal) => {
      const cats = await fetch(
        'https://api.thecatapi.com/v1/images/search?size=full',
        { signal }
      );

shannonmoeller

Root-Relative Require with -

Some folks really don't like typing ../../.., etc. There are many ways around this, but one of the simplest is to use npm's file: feature.

Assume a project that looks like this:

my-project/
├── src/
│   ├── some/

shannonmoeller

#!/usr/bin/env bash

JS_FILES="$(git diff --name-only --staged --diff-filter=ACM | grep '.js$')"

if [ -n "$JS_FILES" ]; then
  set -e
  echo 'eslint' && ./node_modules/.bin/eslint --fix $JS_FILES
  echo 'prettier' && ./node_modules/.bin/prettier --write $JS_FILES
  echo 'git add' && git add $JS_FILES
fi