How to create a 3D space using CSS. How to use the CSS perspective property. How to translate & rotate an element in 3D space using CSS. Use cases for the CSS perspective property.

How to create global state in Next.js using XState

How to create a dynamic header on a website. How to use the Intersection Observer.

What is a Web Worker. How to use a Web Worker. How to use a Web Worker in React.

How to create a Table of Contents UI (User Interface) widget for a web page.

How to create a infinite scroll page using the Intersection Observer.

Tools & techniques for UI (User Interface) state management.

What is the Intersection Observer. How to use the Intersection Observer. Use cases for the Intersection Observer.

What are JavaScript classes. How to create & extend a class. How to create private fields.

What is CORS. How does CORS work. What is a website's origin. What is a perflight request. How to improve website performance.

What is Big O notation. How to calculate Big O. Examples of algorithms with different time & space complexity.

Why debounce & throttle events. How to debounce & throttle events in JavaScript. What is requestAnimationFrame & how to use it.

Alignment is a powerful force in design. Accessibility requires touchable elements to be of a certain minimum size. Implementing these sizes using common CSS approaches can throw off a layout's alignment. There is a different approach that allows click targets of any size without affecting alignment.

What is web accessibility. The size requirements for accessible touch targets. Color contrast requirements. How to hide elements from the DOM tree & accessibility tree.

What is 'this' in JavaScript. How to calculate what 'this' is.

A list of web creatives news sources. Design & development.

What are the types in JavaScript. How are values created. How to inspect types.

What are objects in JavaScript. What is the prototype chain. How to create, edit, clone, freeze & inspect objects.

Setting up CSS font styles in a Next.js app using vanilla-extract & Capsize.

What is coercion in JavaScript. How to coerce a value. What is loose & strict equality.

Variables in JavaScript. What are they & how they work.

What are JavaScript scopes. What is the global scope. What is an IIFE.

What is referential equality in JavaScript.

An introduction to Layout components. Components whose function is to position their children.

When & how to use React's built-in higher order component & hooks; memo, useMemo & useCallback.

Notes on the computer science optimization technique memoization.

Notes on the software development cycle from the perspective of a software engineer.

A summary of the Git commit message convention Conventional Commits.

How to use SVG filters. Explanations, examples, generators & tools.

XState is a library for using finite-state machines in apps. XState & XState + React examples & tools.

How to create a hologram effect using SVG.

How to create an SVG mask & opacity mask.

Notes on the JavaScript package manager npm. How to update packages. How to audit packages.

Notes on sharing a web page on platforms like Facebook, Twitter & LinkedIn.

How to create & read data in SQL (Postgres), with interactive examples.

How to update & delete data in SQL (Postgres), with interactive examples.

Notes on working in a team as an engineer.

Brad Woods' digital garden

notes

notes

Brad Woods' Digital Garden

Latest:

Latest

JavaScript

Performance

Misc

State Management

React

Web API

HTML

CSS

SVG

SQL

Web Development

Web

Benchmarking

Git

Creative

Communication

Game