What is a user driven UI. What is the Zone of Proximal Development. How to teach users how to use an app. The pros and cons of different app teaching approaches. An argument for complex instead of simple tools.

What are CSS blend modes. How to use background-blend-mode and mix-blend-mode. Interactive examples.

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

What is Juice in software development. What is Game Feel and how it can it be used in non-game software. How software can fulfil emotional requirements. How to create software with soul. Examples of Juice on the web.

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

How to wrap text around an image using CSS. How to use the float, shape-outside and shape-margin property. How to create an animated drop cap using CSS.

How to create global state in Next.js using XState

How the JavaScript V8 engine works. Experiment delivering content using scroll.

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

A tool for creating the CSS & HTML for layout components. External site.

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

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.

TodoMVC App Written in Vanilla JavaScript. An example of what the latest JavaScript features are capable of. External site.

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.

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.

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.

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.

7GUIs (7 Graphical User Interfaces) benchmarking tasks using vanilla HTML, CSS & JavaScript. External site.

Learning reference using a 3D scene as a metaphor for Apollo GraphQL. Experiment.

Notes

Notes

Brad Woods' Digital Garden

Latest:

Latest:

Latest:

Latest:

Popular:

Popular:

Juice

User Driven UI

3D in CSS

CSS Blend Modes

Floating Image

Global State in Next.js using XState

V8 Engine

Setting up typography in Next.js using vanilla-extract & Capsize

Layout Generator

Git Tower

JavaScript

Misc

Performance

React

State Management

Web API

HTML

CSS

SVG

SQL

Web Development

Benchmarking

Git

Security

Web

Creative

Communication

Design

Game