Reading

Designing Beautiful Shadows in CSS

How to create realistic shadow effects.

Compound Components with a Hook

Attach a hook directly to a component if the hook is already coupled to the component: `Panel.usePanel()`

Elixir’s Hidden Potions

Elixir tips & tricks.

CSS accent-color

Form inputs with brand coloring.

Design Better Data Tables

Design structures and interaction patterns for data tables.

Elixir's For-Loops Go Beyond "Comprehension"

Elixir's comprehension syntax overview.

The World of CSS Transforms

Interactive 2D transform tutorial with multiple operations and origin shifts.

Placeholder and Initial Data in React Query

Initial data populates the cache (often from another query), placeholder data is never stored and lives at the observer level.

Building the perfect GitHub CI workflow

Frontend-centric CI workflow with smart caching and job parallelism.

Phoenix in Action

Pre-LiveView introductory text on the Phoenix Framework.

Elixir in Action

Intermediate text on Elixir & Erlang functional and concurrent programming, and the OTP framework.

Effective Query Keys in React Query

Define query keys with the most descriptive parts first and bundle parameters in objects.

Encapsulation

Encapsulation is the primary purpose of functions.

useEncapsultation

Encapsulate most React hook usage into custom hooks.

Hide useQuery

React Hook encapsulation pattern with React Query.

Elixir: Best Practices for Error Values

Standardize on two-element error tuples or consider returning Exception structs for pattern matching.

The Shapes of CSS

Shape tricks in pure CSS, when you don't want to use SVG or `clip-path`.

Maker's Schedule, Manager's Schedule

Conflicts that arise when maker schedules and manager schedules collide.

Weird Programming Facts #1

Paper tape's legacy and its effect on modern programming languages and code editors.

Image Optimization

Modern image formats and their browser support, quality and performance tradeoffs, HTML/CSS optimizations and best practices.

Using SVG with CSS3 and HTML5

Detailed explanations on how SVG drawing, shapes, and filters work.

SVG Animations

Exploration of SVG and its use for interactive animations.

XState

JavaScript finite state machine and statecharts library.

Cowboy Websocket Handlers

How Cowboy's Websocket handler callbacks work.

The WebSocket API

Browser API for two-way interactive communication between a client and a server.

Raw Websockets in Phoenix

How to configure Phoenix's `Cowboy2Adapter` to dispatch raw WebSockets to a custom handler.

Demystifying styled-components

How the `styled-components` JS-in-CSS library generates and injects classes into a page when a component needs to render.

Bamboo

Elixir library for email creation and email sending.

Oban

Background job system built on modern PostgreSQL, with goals of reliability, consistency, and observability.

How To Build A Self-Healing System

How Elixir / Erlang supervision trees work: restart strategies, termination, and child specs.

Bézier Curves From The Ground Up

Quadratic and cubic Bézier curves explained with animated visualizations.

Dynamic Bézier Curves

Animate SVG-based Bézier curves in React; interactive demos for control point manipulation.

Why Did You Render

Development library that helps identify React re-renders.

Folding the DOM

Tutorial on 3D CSS transforms demonstrating how to unfold of an image.

CSS Transforms

Apply linear transforms in 2D and 3D space to change the shape and position of content.

CSS Transitions

Create gradual transitions between the values of specific CSS properties.

Magical Rainbow Gradients

Animate gradients by using transitions on CSS variables (custom poperties).

Good and Bad Elixir

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.

Howler

Simpified interface for browser sound effect and background music playback.

React Spring

Spring-physics based animation library and hooks for creating interfaces move naturally.

Boop!

Build delightful hover animations with spring-physics with a React hook and component.

Best Practices Around Production Ready Web Apps with Docker Compose

Docker patterns: multi-staged builds, permissions, layer-caching, health checks, environment variables, docker-compose overrides.

Data URLs

`data`: scheme URLs and how to encode them in base 64 or percent-encoding (RFC 3986).

On Blobs, Files and Data URIs in Javascript

Get an image preview without uploading, check dimensions, and convert to different formats via `canvas`.

HTMLImageElement

Reference on the HTML image element's properties and methods.

Canvas API

Tutorials covering basic 2D context setup, line and shape drawing, styles, colors, and transformations.

BlurHash

A compact image placeholder based on a discrete cosine transform (DCT) of the image data.

Jest

JavaScript Testing Framework focused on simplicity.

Playwright

Automated end-to-end testing in Chromium, Firefox, and WebKit.

Elixir v1.12 released

Elixir 1.12 release notes with Erlang/OTP 24 (JIT) support.

Full-Bleed Layout Using CSS Grid

CSS grid layout scheme for blogs that constrains text to a comfortable max width but allows full-bleed images.

Shadow DOM v1: Self-Contained Web Components

Shadow DOM introduces scoped CSS and styles that don't leak out and isolates a component's DOM from the rest of the page.

The Humble <img> Element And Core Web Vitals

Using the img and picture tags in modern browsers to preload and serve modern formats.

Time for Next-Gen Codecs to Dethrone JPEG

Comparison of image formats in terms of compression, speed, size and bit-depth limitations, progressive decoding, and animation: JPEG XL FTW.

The Rules of Margin Collapse

How margins work in CSS, in depth.

Chasing the Pixel-Perfect Dream

Optical alignment and adjusting spacing based on human perception, not absolute mathematical distances.

Meaningful Motion with Action-Driven Animation

Action-driven animations that tell a story.

transform

The CSS transform property that allows one to rotate, scale, skew, or translate an element.

Let's Bring Spacer GIFs Back!

A layout component that fits into a modern component system instead of adding margin to elements.

An Interactive Guide to CSS Transitions

CSS transitions / animations, timing functions, and performance considerations.

Window: beforeunload event

Warn a user there is unsaved data that will be lost if the page is unloaded or refreshed.

What the Heck, Z-index??

CSS stacking contexts and how they can be created intentionally and unintentionally.

Building a Magical 3D Button

Button-building tutorial that discusses performance, outlines & accessibiliy, hover states with personality, colors, and mobile gotchas.

How I Built My Blog

Josh's blog's tech stack of MDX, Next.js, style-components, Reach UI, and React Spring.

Towards Maintainable Elixir: Testing

Test at the interface level; follow the Arrange, Act, Assert pattern.

Towards Maintainable Elixir: The Anatomy of a Core Module

Schema modules are just definitions with no public changeset functions, builder code is tightly coupled and consolidated in the core operation.

Towards Maintainable Elixir: Boundaries

Elixir library/compiler to enforce boundaries on: Mix tasks, OTP app, interface, core, Ecto schemas, and configuration.

Towards Maintainable Elixir: The Core and the Interface

Core contains the business logic with specific input types and specs, the interface normalizes and casts to strong types.

Towards Maintainable Elixir: The Development Process

Develop through pull requests with CI enforcing styles and testing; humans assess code quality, clarity, bugs, and security issues.