Trashpanda Home

Reading 🌈

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.

September 2021

Compound Components with a Hook

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

React

August 2021

CSS accent-color

Form inputs with brand coloring.

CSS

Design Better Data Tables

Design structures and interaction patterns for data tables.

UI/UX

The World of CSS Transforms

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

CSS

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.

React

Building the perfect GitHub CI workflow

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

DevOps

Phoenix in Action

Pre-LiveView introductory text on the Phoenix Framework.

BookElixir

Elixir in Action

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

BookElixir

Effective Query Keys in React Query

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

React

Encapsulation

Encapsulation is the primary purpose of functions.

JavaScript

useEncapsultation

Encapsulate most React hook usage into custom hooks.

React

Hide useQuery

React Hook encapsulation pattern with React Query.

React

Elixir: Best Practices for Error Values

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

Elixir

The Shapes of CSS

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

CSS

July 2021

Maker's Schedule, Manager's Schedule

Conflicts that arise when maker schedules and manager schedules collide.

People

Weird Programming Facts #1

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

People

Image Optimization

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

BookCSSHTML

Using SVG with CSS3 and HTML5

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

BookCSSHTMLSVG

SVG Animations

Exploration of SVG and its use for interactive animations.

BookCSSSVG

XState

JavaScript finite state machine and statecharts library.

JavaScriptLibrary

June 2021

Cowboy Websocket Handlers

How Cowboy's Websocket handler callbacks work.

ElixirErlangLibrary

The WebSocket API

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

JavaScriptMDN

Raw Websockets in Phoenix

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

Elixir

Demystifying styled-components

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

CSSJavaScript

Bamboo

Elixir library for email creation and email sending.

ElixirLibrary

Oban

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

ElixirLibrary

How To Build A Self-Healing System

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

Elixir

Bézier Curves From The Ground Up

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

CSSSVG

Dynamic Bézier Curves

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

CSSReactSVG

Why Did You Render

Development library that helps identify React re-renders.

LibraryReact

Folding the DOM

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

CSSReact

CSS Transforms

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

CSSMDN

CSS Transitions

Create gradual transitions between the values of specific CSS properties.

CSSMDN

Magical Rainbow Gradients

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

CSSReact

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.

Elixir

Howler

Simpified interface for browser sound effect and background music playback.

JavaScriptLibrary

React Spring

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

LibraryReact

Boop!

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

CSSReact

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.

DevOps

Data URLs

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

CSSHTMLMDN

On Blobs, Files and Data URIs in Javascript

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

JavaScript

HTMLImageElement

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

HTMLJavaScriptMDN

Canvas API

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

HTMLJavaScriptMDN

BlurHash

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

ElixirJavaScriptLibrary

May 2021

Jest

JavaScript Testing Framework focused on simplicity.

JavaScript

Playwright

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

JavaScriptLibrary

Elixir v1.12 released

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

Elixir

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.

CSSHTML

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.

CSS

The Humble <img> Element And Core Web Vitals

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

HTML

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.

HTML

Chasing the Pixel-Perfect Dream

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

CSSReact

transform

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

CSSMDN

Let's Bring Spacer GIFs Back!

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

React

An Interactive Guide to CSS Transitions

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

CSS

Window: beforeunload event

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

JavaScriptMDN

What the Heck, Z-index??

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

CSSHTML

Building a Magical 3D Button

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

CSSReact

How I Built My Blog

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

CSSHTMLJavaScriptReact

Towards Maintainable Elixir: Testing

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

Elixir

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.

Elixir

Towards Maintainable Elixir: Boundaries

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

ElixirLibrary

April 2021

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.

Elixir

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.

DevOpsElixirPeople