Blog posts, books, websites, and other documentation I've found useful. Pithy summaries are my own; dates reflect when I read the article or book.
How to create realistic shadow effects.
Attach a hook directly to a component if the hook is already coupled to the component: `Panel.usePanel()`
Design structures and interaction patterns for data tables.
Elixir's comprehension syntax overview.
Interactive 2D transform tutorial with multiple operations and origin shifts.
Initial data populates the cache (often from another query), placeholder data is never stored and lives at the observer level.
Frontend-centric CI workflow with smart caching and job parallelism.
Pre-LiveView introductory text on the Phoenix Framework.
Intermediate text on Elixir & Erlang functional and concurrent programming, and the OTP framework.
Define query keys with the most descriptive parts first and bundle parameters in objects.
Encapsulation is the primary purpose of functions.
Encapsulate most React hook usage into custom hooks.
React Hook encapsulation pattern with React Query.
Standardize on two-element error tuples or consider returning Exception structs for pattern matching.
Conflicts that arise when maker schedules and manager schedules collide.
Paper tape's legacy and its effect on modern programming languages and code editors.
Modern image formats and their browser support, quality and performance tradeoffs, HTML/CSS optimizations and best practices.
Detailed explanations on how SVG drawing, shapes, and filters work.
Exploration of SVG and its use for interactive animations.
How Cowboy's Websocket handler callbacks work.
Browser API for two-way interactive communication between a client and a server.
How to configure Phoenix's `Cowboy2Adapter` to dispatch raw WebSockets to a custom handler.
How the `styled-components` JS-in-CSS library generates and injects classes into a page when a component needs to render.
Elixir library for email creation and email sending.
Background job system built on modern PostgreSQL, with goals of reliability, consistency, and observability.
How Elixir / Erlang supervision trees work: restart strategies, termination, and child specs.
Quadratic and cubic Bézier curves explained with animated visualizations.
Animate SVG-based Bézier curves in React; interactive demos for control point manipulation.
Development library that helps identify React re-renders.
Tutorial on 3D CSS transforms demonstrating how to unfold of an image.
Apply linear transforms in 2D and 3D space to change the shape and position of content.
Create gradual transitions between the values of specific CSS properties.
Animate gradients by using transitions on CSS variables (custom poperties).
Tips and opinions on Elixir code smells: use Access, don't pipe to case statements, avoid with with else, and don't annotate function calls in a with.
Simpified interface for browser sound effect and background music playback.
Spring-physics based animation library and hooks for creating interfaces move naturally.
Build delightful hover animations with spring-physics with a React hook and component.
Docker patterns: multi-staged builds, permissions, layer-caching, health checks, environment variables, docker-compose overrides.
`data`: scheme URLs and how to encode them in base 64 or percent-encoding (RFC 3986).
Get an image preview without uploading, check dimensions, and convert to different formats via `canvas`.
Reference on the HTML image element's properties and methods.
Tutorials covering basic 2D context setup, line and shape drawing, styles, colors, and transformations.
A compact image placeholder based on a discrete cosine transform (DCT) of the image data.
Automated end-to-end testing in Chromium, Firefox, and WebKit.
Elixir 1.12 release notes with Erlang/OTP 24 (JIT) support.
CSS grid layout scheme for blogs that constrains text to a comfortable max width but allows full-bleed images.
Shadow DOM introduces scoped CSS and styles that don't leak out and isolates a component's DOM from the rest of the page.
Using the img and picture tags in modern browsers to preload and serve modern formats.
Comparison of image formats in terms of compression, speed, size and bit-depth limitations, progressive decoding, and animation: JPEG XL FTW.
Optical alignment and adjusting spacing based on human perception, not absolute mathematical distances.
Action-driven animations that tell a story.
The CSS transform property that allows one to rotate, scale, skew, or translate an element.
A layout component that fits into a modern component system instead of adding margin to elements.
CSS transitions / animations, timing functions, and performance considerations.
Warn a user there is unsaved data that will be lost if the page is unloaded or refreshed.
CSS stacking contexts and how they can be created intentionally and unintentionally.
Button-building tutorial that discusses performance, outlines & accessibiliy, hover states with personality, colors, and mobile gotchas.
Josh's blog's tech stack of MDX, Next.js, style-components, Reach UI, and React Spring.
Test at the interface level; follow the Arrange, Act, Assert pattern.
Schema modules are just definitions with no public changeset functions, builder code is tightly coupled and consolidated in the core operation.
Core contains the business logic with specific input types and specs, the interface normalizes and casts to strong types.
Develop through pull requests with CI enforcing styles and testing; humans assess code quality, clarity, bugs, and security issues.