HerbCaudill

@HerbCaudill·30 public vizzes

effect/schema walkthrough

This example demonstrates how to declare and use a schema with the Effect Schema library, showing the conversion between encoded and decoded data shapes. The code defines a `Person` struct with a string `name` and an `age` field that arrives as a string but is decoded into a number. It uses `S.Struct`, `S.String`, and `S.NumberFromString` from `@effect/schema`, along with the `decodeSync` method to transform an encoded object into its typed counterpart. The test, written with Vitest, verifies the decoded result matches the expected `Person` type.

Jun 10, 2024

Loading thumbnail…

automerge-auth strawman

This example outlines a strawman architecture for **automerge-auth**, a proposed successor to the `localfirst/auth` library, by defining key TypeScript classes and workflows in a markdown document. It shows how a `Group` class unifies users, devices, and subgroups into a single transitive membership model, while a `Connection` class provides point-to-point encrypted channels and an `AuthProvider` integrates with `automerge-repo` via network and storage adapters. The sketch maps desirable features like untrusted sync servers and flexible sharing against existing lf/auth patterns, using diagrams and pseudocode from the gist.

May 24, 2024

Loading thumbnail…

auth@next notes

This visualization maps the hierarchical and membership structure of an authentication system, showing how entities like teams, roles, users, and devices nest and connect. It uses a force-directed graph layout, likely via D3's `forceSimulation`, to position nodes by their relationships, with links drawn as curved paths. The data comes from TypeScript type definitions that model each entity with an `id`, `name`, keyset, and optional `members` array, revealing the recursive, tree-like organization of permissions. The rendering emphasizes the flow of access rights from high-level groups down to leaf agents and devices.

May 2, 2024

Loading thumbnail…

lf-auth-notes

This interactive visualization demonstrates how cryptographic keys and team membership are managed in a decentralized graph, where each node is an encrypted lockbox containing keys accessible only to designated devices or roles. It shows the flow of authority from the group’s founder through admin roles to individual members, with mutual removals resolved by seniority. Built on the CRDX library, the graph uses asymmetric encryption for each node, and the visualization renders the key graph and lockbox relationships using custom SVG rendering. The code highlights the concrete APIs for graph traversal and cryptographic operations, such as key derivation and signature verification, as seen in the invitation and lockbox logic. Data is sourced from the embedded gist’s markdown and assets.

May 1, 2024

Loading thumbnail…

Resources for getting started with local-first software development

This visualization presents a curated resource guide for local-first software development, sourced from a GitHub gist. It shows a linear reading flow, beginning with foundational background material and progressing to hands-on tutorials. The React-based layout uses Automerge and Automerge Repo as the core libraries, with descriptions that highlight CRDT merge scenarios and a browser-synced counter app. The guide’s structure and linked resources are presented as a static, annotated list, emphasizing the path from conceptual videos to practical code examples.

Jan 30, 2024

Loading thumbnail…

Flaky test tooling

This example demonstrates a custom tool for debugging flaky end-to-end tests by automating the tedious process of comparing good and bad test runs. The script repeatedly runs a Playwright test until it captures both a passing and failing log, then cleans both outputs by stripping ANSI codes, timestamps, and hashes while replacing identifiers with readable tokens. Finally, it commits both cleaned logs to git so they can be diffed side by side, making visual pattern-matching in the logs much easier. Built with React and Node.js, this tooling exemplifies a practical, programmatic approach to diagnosing intermittent failures in concurrent multi-browser test environments.

Dec 21, 2023

Loading thumbnail…

Generated by XState Viz: https://xstate.js.org/viz

This example shows a finite-state machine for fetching data, with four states—idle, loading, success, and failure—and transitions triggered by FETCH, RESOLVE, REJECT, and RETRY events. The machine uses XState’s `Machine`, `assign`, and `interpret` APIs, with a `context` object tracking retry attempts. It demonstrates how statecharts handle asynchronous flows, incrementing a retry counter on each failed attempt before returning to loading. The visualization is generated by XState Viz, which renders the machine’s structure and event-driven transitions from the provided machine definition.

Oct 4, 2023

Loading thumbnail…

automerge-repo message types

This visualization maps the evolving message-type definitions of the `automerge-repo` library, contrasting proposed types like `SyncMessage`, `EphemeralMessage`, and `AuthMessage` with existing adapter-specific payloads. It shows how fields such as `peerId`, `channelId`, and `broadcast` are repurposed inconsistently across `NetworkAdapter`, `DocSynchronizer`, and `EphemeralData` classes. The diagram highlights the `channelId` encoding scheme (`m/` for ephemeral, `a/` for auth) and flags redundant or unused patterns like `DocHandleMessagePayload`. The source is a single TypeScript gist by HerbCaudill, presented as raw code excerpts.

Jun 10, 2023

Loading thumbnail…

automerge-repo auth spec

This example shows the authentication and sharing workflow for Automerge Repo, a local-first collaboration framework, using the `@localfirst/auth` library. It demonstrates how to configure a `LocalFirstAuthProvider` with user and device credentials, create and join shares, invite members and devices, and manage document permissions. The code uses TypeScript APIs like `createUser`, `createDevice`, `inviteMember`, and `addDocuments`, with invitations relying on seeds, usage limits, and expiration timestamps. The documentation is rendered as a pseudocode specification, not a live visualization, but it concretely maps each method call to its parameters and return values.

Mar 31, 2023

Loading thumbnail…

Cleaned-up transcript of Rich Hickey's talk "Deconstructing the Database"

This example shows a cleaned-up transcript of Rich Hickey's talk, formatted as a single scrolling document. The React app renders the transcript text in a monospaced font, with speaker annotations and paragraph breaks preserved. It uses React's `useState` and `useEffect` hooks to handle text selection and scrolling, while the content itself is imported from a local Markdown file. The visualization highlights key phrases in bold and displays the source link, making the talk's structure and arguments easy to follow.

Jan 11, 2023

Loading thumbnail…

draft readme for automerge repo

This example visualizes the architecture of a proposed Automerge repository API through a plain-text code listing. It shows the core data flow and plugin interfaces for storage, networking, and middleware, using TypeScript and Automerge’s CRDT library. The rendering relies on the raw code blocks themselves, highlighting API method signatures like `AutomergeRepo.createRepo`, `wrappedDoc.addListener`, and `storage.appendChange`. The visualization maps the conceptual layers of the API, from public document operations to internal plugin contracts, without any graphical charts.

May 1, 2022

Loading thumbnail…

rename master to main

This example shows a step-by-step command-line sequence for renaming a Git repository’s default branch from `master` to `main` and updating the remote. The visualization presents the two-line `rename.bat` script, followed by comments explaining the need to change the default branch in GitHub’s settings before the final delete command can succeed. It uses the Git command-line interface (via `git branch`, `git push`, and `git push origin --delete`) to illustrate the workflow. The data source is the script itself, rendered as plain text without any graphical or programmatic visualization libraries.

May 20, 2021

Loading thumbnail…

Self-optimizing Bloom filter

This example shows how to configure a Bloom filter to minimize its false positive rate for a given number of elements. The code calculates the optimal bit-array size and number of hash functions using the standard formulas from the di-mgt.com guide, then rounds the array size up to a power of two. It uses the `BloomFilter` constructor from the `bloomfilter` JavaScript library, along with `Math.log` and `Math.ceil` for the calculations. The description logs the intermediate values `n`, `m`, `m_round`, `k`, and `p` to the console, but does not visualize or render any data.

Nov 18, 2020

Loading thumbnail…

css-article-8.jsx

This example shows how to apply theme-aware styling to a simple button component in a React application. The code uses the `sx` prop from the Theme UI library to define styles inline, pulling color values like `primary` and spacing tokens like `m: 10` directly from the theme object. The button renders with white text, a large box shadow, and padding derived from the theme’s spacing scale. The rendering approach relies on React’s JSX syntax, with no external data sources or interactive behavior shown beyond the static button element.

Oct 7, 2020

Loading thumbnail…

css-article-07.jsx

This example shows a single interactive button rendered with React and styled using Tailwind CSS classes. The button includes padding, a primary background color, white text, a small font size, and a shadow, demonstrating a common UI pattern. The code uses JSX to define the button element and applies utility classes directly, showcasing how React components can integrate Tailwind for rapid styling. No additional logic or event handlers are present, focusing solely on static visual presentation.

Oct 7, 2020

Loading thumbnail…

css-article-6.jsx

This example demonstrates how a styled button can be created using plain HTML and CSS within a React component, without any additional styling libraries or complex JavaScript. It shows a simple interactive element—a red button with white text and a subtle shadow—as a standalone snippet. The code relies on standard React JSX syntax and Tailwind CSS utility classes (such as `ma4`, `bg-red`, `white`, `ph4`, `pv2`, `f6`, `shadow`) to define the button’s appearance and spacing. The rendering approach is straightforward: a single JSX element returns the button, highlighting how React handles presentational components with minimal setup.

Oct 7, 2020

Loading thumbnail…

css-article-5.jsx

This example demonstrates how inline styles in React can be used to create a simple, visually styled HTML element. It shows a single `<div>` with a light blue background, a blue border, and rounded corners, all defined through a JavaScript `styles` object. The code relies on React’s `style` prop to apply the object’s properties directly to the element, showcasing a declarative approach to CSS-in-JS. No external libraries or data sources are involved; the rendering is purely client-side, with the styles hardcoded in the component.

Oct 7, 2020

Loading thumbnail…

css-article-4.jsx

This example demonstrates how CSS-in-JS styling can be applied directly to a React component using the `css` prop. It shows a styled `<div>` with a light blue background and a blue border, which turns dark blue on hover. The code defines a `styles` object with nested pseudo-selector syntax (`'&:hover'`) and passes it to the `css` attribute, relying on a styling library that supports object-based CSS. The data source is static, as the styles are hardcoded, and no external data or rendering framework beyond React is used.

Oct 7, 2020

Loading thumbnail…

css-article-3.jsx

This example shows how to apply dynamic CSS styling to a React component using the `css` prop and the `styles` tag from the `@emotion/react` library. It defines a style object that sets a light blue background, a blue border, and rounded corners, and includes a hover state that darkens the background. The component renders a single `<div>` element that receives the styles via the `css` prop, demonstrating a straightforward way to manage scoped, inline styles in a React application. The code uses Emotion’s `css` template literal syntax, with no external data sources or complex rendering logic.

Oct 7, 2020

Loading thumbnail…

css-article-1.css

This example demonstrates the visual hierarchy of a tabbed interface by styling active and inactive tabs with distinct background colors, using a light blue for default tabs and a dark blue for the active state. The code defines CSS classes—`.tabstrip__tab` and `.tabstrip__tab--active`—to apply these colors, showing how class-based styling controls component state. It relies solely on CSS for the presentation, with no JavaScript or data binding, and the source is a single gist authored by HerbCaudill. The rendering approach is static CSS styling, not a data-driven visualization.

Oct 7, 2020

Loading thumbnail…

Coding Adelante: Challenges

This example shows a progression of coding challenges for learning JavaScript, starting with basic functions and building up to object-oriented programming. The gist presents a series of exercises that ask the reader to implement functions like `hello`, `multiply`, `sum`, `isEven`, and `isDivisible`, each with sample inputs and expected outputs shown in commented code. The visible API is plain JavaScript, using console output via `console.log` and standard function declarations. The examples gradually introduce arrays, conditional logic, and higher-order patterns, with the source being a single Markdown file from a gist. The rendering approach is purely text-based, with code blocks and comments that illustrate function behavior without any graphical or external library dependencies.

Jun 11, 2020

Loading thumbnail…

Black_Crow.xml

This visualization renders the musical score of Joni Mitchell's "Black Crow," arranged by Herb Caudill, as a MusicXML file parsed into a visual score display. It shows the melody and harmony of the piece, including the first measure's treble and bass clefs, key of C major, 4/4 time, tempo marking, and an A minor ninth chord, with note durations, beams, and ties. The work uses the MusicXML format to encode musical notation, which is then displayed through the visualization interface.

Jun 7, 2020

Loading thumbnail…

Gist 1a826885eacfebb60a6ff421d57a9e37

This example shows a Keybase proof file, which cryptographically links a GitHub account to a Keybase identity. It demonstrates how the raw JSON payload and its signature are structured for public verification, including the nested key, Merkle root, and service binding fields. The gist itself contains no visualization code; instead, it serves as a static text-based proof, relying on Keybase’s cryptographic signing (Ed25519) and hashing (SHA-256) rather than any charting or rendering library. The rendering approach is purely textual, presenting the signed object and signature for manual or programmatic validation.

Apr 20, 2020

Loading thumbnail…

Gist 4e2713779a93371b2ba61c7cf3c0841b

This example shows a custom stylesheet for the note-taking and knowledge-management app Roam Research, which uses the app’s CSS variables and element selectors to alter the interface’s typography, spacing, and visual hierarchy. It sets the main font to Roboto, then applies the monospaced Fira Code font to headings and page titles, adjusts the weight and letter-spacing of different heading levels, and reduces spacing below the page title. The code also lightens bullets, vertical guides, and sidebar backgrounds, hides the “SHORTCUTS” heading, and truncates breadcrumb text with ellipses, using selectors like `.roam-block-container h1` and `.rm-reference-main button` to target specific components. The styles rely on standard CSS, including pseudo-elements and attribute selectors, and do not use any JavaScript libraries or data APIs.

Mar 1, 2020

Loading thumbnail…

DevResults Logo

This example uses D3.js to recreate the DevResults logo mathematically, transforming a 6x6 grid of dots and a bar chart into a circular composition. The visualization demonstrates two key techniques: approximating circular dots with four Bézier curves (using the constant 0.551915024494 for control-point placement), and projecting points from a square grid onto a circle using a mathematical mapping. The result is an animated SVG logo where dots and bars warp to fit a circular envelope, with subtle color transitions, mimicking Illustrator's envelope distort effect in code.

Dec 2, 2019

Loading thumbnail…

My PowerShell profile. To edit yours type `code $profile`

This example visualizes a developer’s PowerShell profile, showing how aliases and functions streamline common workflows. It renders the profile’s source code as text, highlighting the use of posh-git for prompt customization and the `Set-Alias` and `function` keywords to map commands like `yarn build` to `b`. The code also references `$GitPromptSettings` to adjust the prompt’s prefix and suffix, and sets environment variables like `$HOME`. The visualization is a static code snippet, with no external libraries or data sources beyond the profile’s own content.

Aug 12, 2019

Loading thumbnail…

Gist ea8710410afc9bb88a65f846e46d04da

This example demonstrates how to automate opening a Google Sheets tab in Chrome at user logon and session unlock, using a PowerShell script to register a Windows scheduled task. The task triggers on logon and session unlock events, launching Chrome with an app-mode URL pointing directly to the spreadsheet. The code constructs an XML task definition with the `Register-ScheduledTask` cmdlet, embedding the Chrome executable path and the spreadsheet URL as arguments. It highlights the use of PowerShell’s scheduled task API and XML trigger configuration, showing a practical workflow automation for persistent access to a specific data source without manual intervention.

Jun 22, 2019

Loading thumbnail…

Custom CSS for Dynalist

This example shows how to customize the appearance and typography of Dynalist, a hierarchical note-taking app, through custom CSS. It demonstrates how to style tags, notes, code blocks, the current line highlight, page headers, heading levels (H1, H2, H3), and bullet points, while also resizing the CSS textarea and setting its font to a monospace stack. The code relies on plain CSS, including pseudo-classes like `:hover` and structural selectors such as `.Node-noteContainer > [class*='Node']` and `.Node-self.is-collapsed.is-parent > .Node-bullet`, without external libraries. It uses font families like 'Fira Code' and 'Menlo', with opacity, border-radius, and padding for visual refinement.

Jun 3, 2019

Loading thumbnail…

Gist 71712428fc3cd50085079d14e385bc42

This example shows a Duolingo skill tree where icons for learned skills with less than full strength are visually faded, using opacity scaled to the skill’s remaining strength. A userscript first retrieves the username and language data from the page, then queries the Duolingo API for skill strength values. Using jQuery selectors, it iterates over the skill-tree links, matches each skill’s short name, and applies a CSS opacity of `0.5 * strength` to the icon’s parent element. The visualization relies on the `customjsReady` utility and `$.get` to fetch live user data, fading only skills that are learned but not yet at full strength.

Jul 24, 2018

Loading thumbnail…

Extending the d3 Axis function

This example shows how to extend D3’s built-in axis component to customize tick styling—specifically, highlighting January ticks as bold, black year labels while other months remain gray. The custom `timeAxis` function wraps `d3.svg.axis`, reuses its scale and tick configuration, then reapplies a class to tick elements based on whether the date falls in January. It uses D3 v3 with SVG rendering, and the code includes a custom multi-format date formatter for month and year labels. The axis is drawn on a time scale spanning from July 2010 to April 2012.

Apr 2, 2015