What is Juice in software development. What is Game Feel & 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 global state in Next.js using XState

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 the JavaScript V8 engine works. Experiment delivering content using scroll.

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

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

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

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.

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.

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

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

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

Brad Woods' digital garden

Notes

Notes

Brad Woods' Digital Garden

Latest:

Latest:

Latest:

Latest:

Popular:

Popular:

Juice

3D in CSS

V8 Engine

Global State in Next.js using XState

Git Tower

JavaScript

Performance

Misc

State Management

React

Web API

HTML

CSS

SVG

SQL

Web Development

Web

Security

Benchmarking

Git

Creative

Communication

Design

Game