Reference Guides

Short, focused guides on a bunch of things I’ve learned or care about.

My digital garden is tended regularly. Content will grow, relocate, and get pruned over time. Items with a 🌱 are in early development.

My guides, code snippets, and more are free and open to everyone thanks to the generous support of my Go Make Things members.

A

• Accessibility

  • Accessible Components
  • Accessible Images
  • Buttons vs. Links
  • Focus Management
  • HTML Semantics
  • Screen Readers & Keyboards
  • Visually Hidden
  • [aria-hidden]
  • [aria-label]
  • [aria-live]
  • [aria-pressed] and buttons state
• ADHD

  • ADHD Subtypes
  • Accommodations
  • Being Blunt
  • Diagnosis
  • Dopamine
  • Easily Distracted
  • Executive Functioning
  • Fidgeting
  • Hereditary
  • Hyperactivity
  • Hyperfocus
  • Impulse Control
  • Limited Working Memory
  • Masking & ADHD
  • Medication
  • Motivation
  • Rejection Sensitive Dysphoria
  • Rejection of Authority
  • Time Blindness
  • Time Tracking
  • Work with your brain
• Anarchy & Socialism

  • Anarchy & Socialism 🌱
  • Digital Safety
  • Dirt in a Cog
  • Mutual Aid
  • Solarpunk
• API Security

  • SSL Certificates
  • Storing Credentials
  • Storing Tokens
  • JWTs
  • Anti-Forgery Tokens
• Arrays

  • Array Indexes
  • Array.from()
  • Array.prototype.concat()
  • Array.prototype.every()
  • Array.prototype.filter()
  • Array.prototype.find()
  • Array.prototype.findIndex()
  • Array.prototype.includes()
  • Array.prototype.indexOf()
  • Array.prototype.join()
  • Array.prototype.map()
  • Array.prototype.pop()
  • Array.prototype.push()
  • Array.prototype.reduce()
  • Array.prototype.reverse()
  • Array.prototype.shift()
  • Array.prototype.slice()
  • Array.prototype.some()
  • Array.prototype.sort()
  • Array.prototype.splice()
  • Array Destructuring
  • Convert Arrays to HTML
  • Shuffling Arrays
• Authentication

  • Token-Based Authentication
  • Session-Based Authentication
  • Authentication Flows
  • Password Flow
  • Implicit Flow
  • Authorization Code Flow
  • PKCE Flow
  • Terminology
  • JWTs
  • Services & Standards

C

• Career

  • Career Planning
  • Coffee Chats
  • Finding Jobs
  • Interviews
  • Resumes
  • Salary
• Class Pattern

  • new Class {}
  • Static Properties
  • Private Class Features
• Constructor Pattern

  • The Constructor Pattern
  • new Constructor()
  • Methods
  • Static Methods
  • Chaining
  • Options & Settings
• Content Creation

  • Content Creation Tools
  • Creating a Course
  • Creating a Podcast
  • RSS Syndication
• Cookies

  • Cookies
  • document.cookie
  • getCookie()
  • max-age
  • Timestamp Math
• Cross-Site Scripting (XSS)

  • Intro to XSS
  • Text Instead of HTML
  • Sanitize URLs
  • Encoding Content
  • Sanitize Content
• CSS Animations

  • scroll-behavior: smooth
• CSS Architecture

  • HUG CSS
  • HTML
  • Group Classes
  • Utility Classes
  • State Styles
  • Modular CSS
• CSS Grid

  • What is CSS Grid?
  • Fractional Units
  • display: grid
  • The repeat() function
  • Adding a Gap
  • Varying Sizes
  • Alignment
  • Positioning
• CSS Layout 🌱
• CSS Selectors

  • Basic Selectors
  • Advanced Attribute Selectors
  • Combining Selectors
  • Nesting & Sibling Selectors
  • State Selectors
  • :not()
  • :is() & :where()
  • Cascade & Specificity
• Custom Events

  • new CustomEvent()
  • Helper Function
  • Naming Conventions

D

• Dates & Times

  • new Date()
  • Unix Timestamps
  • Date Details
  • Date.prototype.toString()
  • Date.prototype.toLocaleString()
  • UTC Time
  • Modify Date Details
  • Add & Remove Time
  • Dates & Immutability
  • Date.now()
  • Date.parse()
  • Date Pain Points
  • Date Libraries
• Disney World

  • The Number One Rule
  • Booking Your Trip
  • Accommodations
  • When To Go
  • Trip Length
  • Getting Around
  • The Parks
  • Avoiding Lines
  • Magic Bands
  • Dining
  • Dressing for Disney
  • Covid-Safe
  • Crowd Calendar
• Ditching Cable for Streaming
• Documentation

  • DocBlock
  • Good Comments

E

• Elements (HTML)

  • <details> disclosure
  • <datalist> autocomplete
• Elements (JavaScript)

  • Element.innerHTML
  • Element.parentNode
  • Element.querySelectorAll()
  • document.createElement()
  • Element.before()
  • Element.closest()
  • Element.outerHTML
  • Element.querySelector()
  • Element.after()
  • Element.children
  • Element.matches()
  • Node.textContent
  • Element.append()
  • Element.childNodes
  • Element.innerText
  • Element.firstChild & Element.lastChild
  • Element.prepend()
  • Element.firstElementChild & Element.lastElementChild
  • Element.remove()
  • Element.nextSibling & Element.previousSibling
  • Element.replaceWith()
  • Element.nextElementSibling & Element.previousElementSibling
  • Node.cloneNode()
  • Attributes & Properties
  • Element.classList
  • Element.className
  • Element.getBoundingClientRect()
  • window.getComputedStyle()
  • window.innerHeight & window.innerWidth
• ES Modules

  • Overview
  • In the Browser
  • export
  • import
  • default exports
  • Renaming Things
  • Side Effects
  • Nested Modules
  • Scope
  • Bundling & Tree-Shaking
• Event Listeners

  • Element.addEventListener()
  • Event delegation
  • useCapture
  • Named Callback Functions
  • Debouncing

F

• fetch()

  • What's an API?
  • fetch()
  • Response.ok
  • HTTP Methods
  • Sending Data
  • Including Cookies
  • Query Parameters
  • Basic Auth
  • Bearer Tokens
• Finding Jobs

  • Job Boards
  • Recruiters
  • Networking
  • Friends
• Fitness 🌱
• Flexbox

  • What is Flexbox?
  • display: flex
  • Automatic Flex
  • Adding a Gap
  • Rows & Columns
  • Alignment
  • Wrapping
  • Advanced Features
• Fonts

  • Font Loading Performance
  • Font Self-Hosting
  • Web-Safe Fonts
• for... loops

  • for
  • for...of
  • for...in
  • break and continue
  • forEach()
• FormData

  • new FormData()
  • Loop FormData
  • FormData.get() & FormData.getAll()
  • FormData.set()
  • FormData.append()
  • FormData.delete()
  • FormData.has()
  • FormData.keys()
  • FormData.values()
  • Serializing FormData
• Functions

  • Writing a Function
  • Hoisting
  • Parameters & Arguments
  • Returning a Value
  • Default Parameters
  • The arguments keyword
  • Rest Parameters
  • Arrow Functions

G

• Gardening 🌱
• Getting Shit Done

H

• Hugo

  • PHP Islands in Hugo
  • Date-Based Snippets

I

• Immutability

  • Immutability
  • Immutable Arrays
  • Immutable Objects
  • Nested Arrays & Objects
  • structuredClone()
• IndexedDB

  • indexedDB
  • indexedDB.open()
  • indexedDB.close()
  • DB.createObjectStore()
  • DB.transaction()
  • DBStore.add()
  • DBStore.put()
  • DBStore.delete()
  • Database Upgrades
  • Getting Data
  • DBStore.get()
  • DBStore.getAll()
  • DBStore.count()
  • Combining Stores
  • Indexes
  • Cursors
  • Deleting
• Internationalization API

  • The Intl Object
  • Locales
  • The Internationalization API and performance
  • Intl.DateTimeFormat
  • Intl.ListFormat
  • Intl.NumberFormat
  • Intl.RelativeTimeFormat
• IntersectionObserver

  • new IntersectionObserver()
  • The IntersectionObserverEntry Array
  • IntersectionObserverEntry.target
  • IntersectionObserverEntry.isIntersecting
  • IntersectionObserverEntry.boundingClientRect
  • IntersectionObserverEntry.rootBounds
  • IntersectionObserverEntry.intersectionRatio
  • IntersectionObserverEntry.intersectionRect
  • IntersectionObserverEntry.time
  • IntersectionObserver.unobserve()
  • IntersectionObserver.disconnect()
  • IntersectionObserver Options
  • IntersectionObserver Instance Properties

J

• JavaScript Patterns 🌱
• JSON

  • JSON.stringify()
  • JSON.parse()

L

• localStorage & sessionStorage

  • localStorage
  • sessionStorage
  • Storage Limits
  • Browser Storage & Dev Tools
  • Strategy

N

• Numbers & Math

  • parseInt()
  • parseFloat()
  • Number()
  • Number.prototype.toFixed()
  • Number.prototype.toString()
  • Basic math
  • Increment & Decrement
  • Math.abs()
  • Math.floor()
  • Math.ceil()
  • Math.max()
  • Math.min()
  • Math.random()

O

• Objects

  • Dot & Bracket Notation
  • Multidimensional Objects
  • Object Function Shorthand
  • Object Property Shorthand
  • Object.assign()
  • Object.entries()
  • Object.freeze()
  • Object.keys()
  • Optional Chaining Operator
  • Object Destructuring
  • delete
• Obsidian

  • What is Obsidian?
  • Obsidian Boilerplate
  • Installing Obsidian
  • Plugins
  • File Structure
  • Tags
  • Tasks
  • Apple Shortcut

P

• Planning Code on Paper
• Promises

  • Ajax
  • Promises
  • Promise.prototype.then()
  • Promise.prototype.catch()
  • Promise.prototype.finally()
  • Promise.all()
  • async and await
  • async and Promises
  • Structuring async code
  • try...catch
• Proxies

  • new Proxy()
  • The handler object and traps
  • handler.get()
  • handler.set()
  • handler.deleteProperty()
  • handler.apply()
  • handler.has()
  • handler.construct()
  • handler.defineProperty()
  • handler.getOwnPropertyDescriptor()
  • handler.getPrototypeOf()
  • handler.isExtensible()
  • handler.preventExtensions()
  • Proxies & Nesting
  • Proxy Use Cases

R

• Revealing Module Pattern

  • Overview
  • IIFE Wrapper
  • Private Features

S

• Salary

  • A Fair Salary
  • Variable vs. Fixed
  • Perks
  • Employer Differences
  • Location-Hacking
  • Asking for Money
  • Getting an Offer
• Scope in JavaScript

  • Overview
  • Global Scope
  • Lexical Scope
  • Updating Variables & Scope
  • Block Scope
  • Creating Scope
• Service Workers

  • Overview
  • Security
  • The Basics
  • Updates
  • event.request
  • Developer Tools
  • Cache Management
  • Worker.postMessage()
  • Cleanup
  • Network-First
  • Offline-First
  • Mix-and-Match
  • Pre-Cache
  • Cache as you browse
  • Fallback content
  • An Offline Page
  • Cache API Responses
  • Expiring a Cache
• Spirituality

  • Daoism 🌱
  • Druidy & Atheism 🌱
• Spread Syntax
• State-Based UI

  • What's State-Based UI
  • State-Based UI
  • DOM Diffing
  • Reactivity
  • Components
  • Batching Renders
  • Memoization
  • Virtual DOM
  • Libraries
  • The problem with SPAs
• Static Site Generators

  • What is an SSG?
  • Front Matter
  • SSG Options
  • CMS Options
  • Migrating from WordPress
  • Automating Deployment
  • Scheduling Posts
  • Dynamic Content
  • PHP Islands
• Status Messages
• Strings

  • String.prototype.includes()
  • String.prototype.indexOf()
  • String.prototype.padEnd()
  • String.prototype.padStart()
  • String.prototype.replace()
  • String.prototype.replaceAll()
  • String.prototype.slice()
  • String.prototype.split()
  • String.prototype.toLowerCase()
  • String.prototype.toUpperCase()
  • String.prototype.trim()
  • Escaping Strings
  • String Concatenation
  • Template Literals

T

• Terminal

  • Bash Scripts
  • Terminal Cheat Sheet
• Tree Watering Device
• TTRPGs

  • How to play D&D
  • Running a TTRPG
  • TTRPG Systems

U

• URL & URLSearchParams

  • new URL()
  • URL Object Properties
  • URL.toString()
  • new URLSearchParams()
  • Looping URLSearchParams
  • URLSearchParams.get() & URLSearchParams.getAll()
  • URLSearchParams.set()
  • URLSearchParams.append()
  • URLSearchParams.delete()
  • URLSearchParams.has()
  • URLSearchParams.keys()
  • URLSearchParams.values()
  • URLSearchParams.toString()
  • URLSearchParams.sort()

V

• Variables (JavaScript)

  • Defining a variable
  • Updating a variable
  • let
  • const
  • var, let, & const
  • Ternary Operator