Brad Woods Digital Garden

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 and perspectiveOrigin properties. How to translate, scale and rotate an element in 3D space.

How to create a line drawing effect on scroll using SVG clip-path.

How to calculate how far the user has scrolled on the page or page section.

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.

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 CSS font styles in a Next.js app using vanilla-extract and Capsize.

react-spring examples.

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

How to create global state in Next.js using XState.

A list of web creative coder news sources.

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

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

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.