
Brad Woods Digital Garden
Notes about creative coding on the Web

Juice
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.
Draw on Scroll
How to create a line drawing effect on scroll using SVG clip-path.

User Driven UI
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.
3D in CSS
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.

CSS Blend Modes
What are CSS blend modes. How to use background-blend-mode and mix-blend-mode. Interactive examples.
Floating Image
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.
Setting up typography in Next.js using vanilla-extract and Capsize
Setting up CSS font styles in a Next.js app using vanilla-extract and Capsize.
react-spring
react-spring examples.
Table of Contents
How to create a Table of Contents UI (User Interface) widget for a web page.
Global State in Next.js using XState
How to create global state in Next.js using XState.
Creative Coder News
A list of web creative coder news sources.
Debounce and Throttle
Why debounce and throttle events. How to debounce and throttle events in JavaScript. What is requestAnimationFrame and how to use it.
The Layout Component
An introduction to Layout components. Components whose function is to position their children.
Alignment + Click Target
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.

Personalization
Personalization in softare. Examples of personalized UI. The benefits of personalization.
JavaScript
Misc
Performance
React
State Management
Web API
HTML
CSS
SVG
Web Development
Git
Security
Web
Creative
Communication
Design



