Skip to main content
Log in
R

Restuta

@Restuta·92 public vizzes

Loading thumbnail…

Mint Solana SPL token + Metadata

This example demonstrates the process of creating and minting a fungible SPL token with metadata on the Solana blockchain. It creates a new token with a configurable name, symbol, and metadata URI, setting a supply of 100 million tokens with 8 decimal places. The code uses the `@metaplex-foundation/umi` library for blockchain interaction and `@metaplex-foundation/mpl-token-metadata` for the `createAndMint` function, alongside `@solana/web3.js` for Solana-specific utilities like `LAMPORTS_PER_SOL`. It also integrates `mplToolbox` for setting a compute unit price and `mplCandyMachine` for additional functionality. The minting process is initiated via a transaction builder that sends and confirms the transaction, logging the resulting mint public key.

Apr 8, 2024
Loading thumbnail…

run promises sequentially or not using observables

This example demonstrates how to execute arrays of promises sequentially or in controlled batches using RxJS observables. It shows a stream of numeric values piped through operators like `map`, `defer`, and `mergeAll` with a concurrency limit of 1, ensuring each promise resolves before the next starts. A second variant uses `bufferCount(3)` to group the input into batches of three, still processing them one batch at a time. The `delay` helper creates promises that log their resolved values to the console, with a final `console.log('done')` indicating stream completion.

Dec 28, 2022
Loading thumbnail…

Gist d979149932bed51371f3a33349a4981d

This example shows a Keybase proof document that cryptographically links a GitHub account to a Keybase identity. The text lays out the user’s public key, a signed JSON object containing account details and a Merkle root, and the resulting signature. It also explains the verification workflow, including the `keybase id` command-line query. The presentation relies on plain Markdown code blocks for the JSON payload, signature, and bash command, with inline hyperlinks to the Keybase profile and public key.

May 16, 2022
Loading thumbnail…

map/reduce/pipe in 3m

This example demonstrates the functional programming concepts of `map`, `reduce`, and `pipe` in under three minutes using JavaScript. The code defines custom `reduce` and `map` functions, where `map` is built on top of `reduce` to transform array elements, and a `pipe` function that chains multiple functions together by sequentially passing an input through each one. The implementation uses iterable `for...of` loops and arrow functions, showing how these higher-order utilities operate on arrays and function compositions without relying on external libraries.

Oct 8, 2021
Loading thumbnail…

what is this omg (https://codingcompetitions.withgoogle.com/codejam/round/000000000019ff31/00000000003b4f31)

This visualization animates the execution of tourist’s C++ solution for Google Code Jam’s “what is this omg” problem. It shows the code’s built-in graph, forest, DFS, LCA, and heavy-light decomposition classes processing a tree, with the code flow traced line by line. The view uses a custom renderer to draw the tree nodes and edges, highlighting visited vertices and their traversal order. The source gist by Restuta provides the code, which relies on standard C++ templates for graph algorithms rather than any external visualization library.

Jun 17, 2021
Loading thumbnail…

Outliers: z-score and modified z-score method in JavaScript

This example demonstrates two statistical methods for identifying outliers in a dataset: the classic z-score and the modified z-score using median absolute deviation. The JavaScript code computes z-scores for each data point via `d3-array`'s `mean` and `deviation`, flagging values beyond ±3, while the modified approach uses Ramda’s `median` function and a constant threshold of ±3.5. The output maps every input item to its corresponding score, showing how each method differs in robustness to skewed distributions.

Nov 22, 2020
Loading thumbnail…

GitHub Badges test via Shields

This visualization uses GitHub badges to display a chain of pull requests, showing their review status and stacking order. Each badge is rendered as a hyperlink-bearing image via Shields.io, with text color-coded by state: green for approved, yellow for needs review, and purple for merged. The readme describes a base PR and two stacked PRs, with each badge embedding the PR number and title in its label. The example highlights how static SVG badges can encode relational metadata, relying solely on shields.io’s image API and Markdown image syntax without custom JavaScript.

Sep 25, 2020
Loading thumbnail…

null or undefined

This visualization compares JavaScript’s `null` and `undefined` through code examples, highlighting how destructuring defaults behave differently for each. It shows ES5 and ES6+ patterns where `undefined` triggers default values but `null` does not, and where null causes runtime exceptions without extra guards. The examples reference Douglas Crockford, TypeScript guidelines, and Lodash’s `_.find` to support choosing `undefined` over `null`. The dataset is the code snippets themselves, presented as a markdown document.

Sep 24, 2020
Loading thumbnail…

Tranducers and mergeWith experiments

This example demonstrates how to combine data from multiple sources by merging objects with duplicate keys, using Ramda’s `mergeWith` to sum `count` values while preserving `name` fields. It also explores transducers with `R.compose`, `R.filter`, and `R.map`, logging each transformation step to trace how data flows through the pipeline. The `R.reduce` and `R.equals` functions verify the merged result against expected output, showcasing functional composition for data aggregation.

Aug 13, 2020
Loading thumbnail…

neat-stack.js

This example shows a function that cleans and colorizes JavaScript stack traces, dimming non-useful log lines to make errors easier to read. It uses the `clean-stack` library to remove noise, then applies a regular expression to identify internal frames from `node_modules`, timers, promises, and webpack imports. Stack lines are split, with the title kept intact and remaining lines passed through a `R.pipe` from Ramda to map each line, using `chalk.dim` for ignored lines and `colorize` for others. The rendered output is a single string combining the title and processed lines, with a special check for “From previous event” lines.

Mar 12, 2020
Loading thumbnail…

Ip Ranges

This example visualizes the IP address ranges used by Amazon Web Services (AWS) in the `us-east-1` region for the EC2 service, based on the official `ip-ranges.json` file. It first fetches data from AWS and the Heroku API to confirm the region, then uses `jq` to filter the JSON for matching prefixes. The resulting list displays each IP block in CIDR notation, such as `18.208.0.0/13`, along with the number of available addresses. The visualization makes it easy to see the distribution and size of the ranges at a glance, without requiring manual parsing of the raw JSON. The code relies on command-line tools like `httpie` and `jq` for data retrieval and filtering.

Jan 21, 2020
Loading thumbnail…

Logger

This logger module provides color-coded, type-prefixed console output for Node.js applications. It shows how different log levels (error, info, success, debug, etc.) are mapped to distinct chalk colors and console methods, with optional global and module-specific prefixes. The code uses `chalk` for styling, `ramda` for argument processing, and `jsondiffpatch` to display object differences. In non-production environments it enables colored output and uses `util.inspect` for pretty-printed JSON, while production mode uses plain JSON serialization via `toJson`.

Nov 5, 2019
Loading thumbnail…

Sizes of JS frameworks, just minified + minified and gzipped, (React, Angular 2, Vue, Ember)

This example compares the minified and gzipped file sizes of popular JavaScript frameworks, including React, Angular 2, Vue, Ember, Preact, Inferno, and Aurelia, using data sourced from a gist by Restuta and downloaded from cdnjs. A horizontal bar chart visualizes the sizes for both compression states, with frameworks listed along the y-axis and file sizes (in kilobytes) along the x-axis. The visualization uses d3.scaleBand and d3.scaleLinear to map categories and values, while d3.axisBottom renders the tick marks. Two bars per framework, one for minified and one for gzipped, are drawn with distinct colors, allowing direct comparison of compression efficiency across libraries.

Oct 13, 2019
Loading thumbnail…

Ora based progress bar

This example demonstrates a terminal-based progress bar that tracks task completion with live performance metrics. The bar displays current and total counts, elapsed time, estimated time remaining, throughput in ticks per second, and memory usage. It builds on the `ora` spinner, `chalk` for colored output, and `pretty-ms` for human-readable time formatting. The bar updates by mutating the spinner’s text property, appending status lines, and uses `process.hrtime` for precise timing and `process.memoryUsage` for heap data.

Oct 9, 2019
Loading thumbnail…

Audit Log Collection Design Problem

This example presents a design problem for collecting audit logs alongside object updates while keeping business logic agnostic. The code defines a `foo` function that calls `applyUpdatesWithAudit` multiple times, while `updateWithAuditLog` returns both the updated object and an audit record. Abstracting the audit collection into a `createFoo` wrapper ensures that `foo` performs only updates, while delegated functions like `saveAuditRecordsToDb` and `saveUpdatesToDb` handle database writes. The solution runs entirely in JavaScript with async/await, demonstrating a pattern for batching in-memory updates and audit records for a two-call persistence flow.

Jan 25, 2019
Loading thumbnail…

With Audit Log (proto)

This example demonstrates a functional programming pattern in JavaScript for separating audit logging from core object-update logic. It builds a chain of higher-order functions, including `createAuditLogCollector`, `withAuditLog`, and `saveAuditLogAfterExecution`, to wrap an update function so that it transparently collects audit records during execution and persists them afterward. The solution leverages the Ramda library’s `R.pipe` to compose these wrappers, ensuring the `update` function remains unaware of the audit trail. The code shows how to inject a wrapper that intercepts results, logs side effects, and coordinates asynchronous database writes.

Jan 15, 2019
Loading thumbnail…

App Flow Proto 2

This example shows a JavaScript application module that coordinates step updates through database transactions and post-commit effects. The code demonstrates dependency injection with factory functions like `createStep` and `stepFactory`, alongside utility containers for managing operations. It uses Sequelize’s `startTransaction` for database writes, while an `effectsContainer` pattern collects and executes deferred operations. The `applyUpdates` helper and `createHistoryRecord` suggest data transformation and logging, though no specific visualization library or rendering API appears in the provided source.

Jan 15, 2019
Loading thumbnail…

With Audit Log prototype

This example shows a JavaScript module that wraps step updates to collect and persist audit log records within a transaction. It defines factory functions, such as `stepFactory` and `withAuditLogCollector`, to intercept update operations, accumulate audit log records in a container, and execute them after the main update succeeds. The code uses a closure-based container with `getAll` and `add` methods, and async/await for handling promises. It demonstrates a composable pattern for injecting audit logging into existing command functions without altering their core logic.

Jan 15, 2019
Loading thumbnail…

Collect Audit Log Updates

This example demonstrates a JavaScript pattern for collecting audit log updates during function execution. The code defines a `createContainer` factory that manages a list of items, with methods to retrieve all entries and append new ones. An `applyUpdates` function accepts a callback, `onNewAuditLogRecord`, which is invoked with each input value, causing the updates to be appended to a shared container instance. Three calls with values 9, 99, and 990 are made, and the final `getAll()` call returns the array `[9, 99, 990]`, showing the collected records without any external libraries or rendering.

Jan 12, 2019
Loading thumbnail…

Effect Functor / Reader Monad

This example demonstrates functional programming patterns—an Effect functor and Reader monad—as JavaScript objects with methods like `map`, `chain`, `join`, and `ap`. The Effect wraps an impure function like `fZero`, while `Effect.of` creates a pure initial value. The Reader monad, using `Reader.ask`, threads a shared environment (a database and logger) through a composed `updateTask` pipeline. The code simulates a database update and logging by explicitly invoking `run` with those dependencies, showing how side effects are deferred and composed without direct state mutation.

Jan 9, 2019
Loading thumbnail…

Base64 encode N times

This example visualizes the process of repeatedly encoding a text string using Base64 sixteen times. The code defines a text variable and uses the `encode` function, which pipes data through the `utf8.encode` and `base64.encode` functions from the `utf8` and `base-64` libraries, respectively. It then constructs `encodeN` by applying the `encode` function repeatedly using Ramda’s `R.pipe` and `R.times`. The program logs the final encoded output for the input 'hello', demonstrating how iterative encoding transforms the original string.

Feb 8, 2018
Loading thumbnail…

RxJS buffer function calls

This example demonstrates how RxJS can batch function calls into buffered groups using the `Subject` API. The code creates a `bufferTime` operator that collects invocations over 500 milliseconds, up to a maximum of three items, before emitting them as an array. A custom `batchify` helper subscribes to the buffered observable and logs each batch of arguments before passing them to the target function. The main loop asynchronously invokes the batched function with increasing numbers, then quickly fires three more calls to trigger a final buffered output.

Feb 6, 2018
Loading thumbnail…

Gist 97d75332d2b298eab79a8849008bce9c

This example demonstrates how a closure in JavaScript can capture a mutable variable, causing a seemingly pure function to change behavior over time. The code defines `fn1`, which returns an object with `get` and `set` methods that share access to the parameter `a`. Initially, `get()` returns the string `"hello"`, but after calling `set()`, the same `get()` returns `"Good bye!"`, and the outer variable `a` is also updated. The visualization shows this state change through console output, using plain JavaScript without external libraries.

Oct 24, 2017
Loading thumbnail…

Gist 89193bd17e57c1339fdc4888b072d7ed

This example visualizes the caching behavior of a JavaScript `memoize` function. It shows how repeated calls with the same argument return a cached result, while new arguments trigger a fresh computation and expand the internal cache object. The code implements the memoization pattern manually, using a plain object as a cache and the spread operator to merge new entries. It does not rely on external libraries or rendering APIs; the visualization likely depicts the function’s execution flow and cache state changes, though the specific display mechanism is not defined in the provided source. The data originates from the `memoize.js` file, demonstrating the logic in isolation.

Oct 24, 2017
Loading thumbnail…

mapValuesDeep with circular references detection

This example demonstrates a recursive utility that applies a mapping function to every non-object value in a nested data structure, while preserving circular references instead of falling into infinite recursion. The code uses lodash’s `_.mapValues` and `_.isPlainObject` to traverse plain objects, and a JavaScript `Set` to track already-visited objects. When a circular reference is detected, the original value is returned unchanged rather than being re-processed. This approach is useful for safely transforming deep, potentially cyclic JSON-like data without stack overflows.

Aug 30, 2017
Loading thumbnail…

RxJS Switch Map

This example demonstrates the behavior of RxJS’s `switchMap` operator when combined with a custom sorter function that merges values from two observable streams. The code creates two observables emitting numbers (1,2,3 and 40,50,60) and passes them through `switchMap` with a `createSorter` callback that accumulates, sorts, and pops values from an internal list. Each emitted value is logged to the console, showing how `switchMap` switches between the source observables while the sorter maintains state across emissions. The gist uses RxJS’s `Observable.of` and `subscribe` methods.

Jun 28, 2017
Loading thumbnail…

Babel Interop Defaults might lead to confusion with ES6 Modules and imports/exports

This example shows how Babel’s default interop behavior can make ES6 module imports behave unexpectedly, producing a value where the spec would yield `undefined`. The code defines `export.js` with a default export object, then in `module-b.js` imports a named `x` via `import {x} from './module-a'`. With default Babel settings, `console.log(x)` outputs `8`, because Babel sets both `module.exports` and `exports["default"]`. The example contrasts this with vanilla ES6, where the import would fail, and shows the explicit double export needed for spec-compliant behavior.

Jun 9, 2017
Loading thumbnail…

P.coroutine and _.curry issue

This example shows a failed integration between Bluebird's `P.coroutine` and Lodash's `_.curry` in an asynchronous function composition. The code defines `asyncSum` and `asyncSquare` as Promise-returning functions and attempts to curry a generator-based `asyncSumAndSquare` with `_.curry`. While manual currying works, `P.coroutine` returns a function accepting only one argument, so the curried call `parialAsyncSumAndSquare(2)(2)` fails, whereas a vanilla curried function using `_.curry` succeeds. The animation rendering and use of `setInterval` for promise resolution are visible.

May 18, 2017
Loading thumbnail…

Simple Progress Reporter for JavaScript

This example demonstrates a JavaScript utility for tracking and reporting progress as a percentage of a total item count. It monitors progress changes and triggers callbacks when significant increments occur, passing the current percentage and elapsed time between updates. The implementation uses `Date.now()` through a custom `msNow()` helper to measure timing, with functions like `createProgress` and `report` managing state. It relies on plain JavaScript object methods and callbacks, with no external visualization libraries, making it suitable for command-line or server-side progress reporting.

May 5, 2017
Loading thumbnail…

Gamblers Fallacy

This example simulates the gambler’s fallacy by modeling a coin-flip betting game where the payout ratio adjusts the true probability of heads versus tails. It shows how waiting for a fixed streak of tails before betting on heads leads to average money outcomes, computed over many repeated games using plain JavaScript random number generation and console-based statistics. The code uses no external libraries, relying instead on custom classes and functions within the browser console to track player balance and bet counts.

Feb 3, 2017
Loading thumbnail…

V4 simple network graph

A simple network graph displays ten labeled nodes arranged into groups, with sparse links forming a cycle among several nodes. The force-directed layout uses d3.forceSimulation with a link force and a many-body charge force that has a maximum distance constraint. Nodes render as gray circles with dark strokes, and each node displays its numeric ID as a text label. The graph supports dragging via d3.drag, allowing repositioning while the simulation continues. Data is embedded inline as a JSON object in the script, and output is drawn to an SVG element.

Dec 26, 2016
Loading thumbnail…

Find Circles in Permutations of Unique Numbers (for 100 prisoners problem)

This example visualizes the decomposition of a random permutation of numbers 1–100 into cycles, as used in the 100 prisoners problem. It shuffles an array with a custom Fisher–Yates algorithm, then recursively traces each number to its mapped successor to identify circular chains. The code outputs each cycle as a separate array via `console.log`, with no graphical rendering library; all logic is plain JavaScript. The visualization highlights how permutations break into closed loops, and it verifies that the sum of all cycle lengths equals the original array length.

Dec 26, 2016
Loading thumbnail…

Force-Directed Graph

This force-directed graph visualizes character co-occurrence in Victor Hugo’s *Les Misérables* using data compiled by Donald Knuth. It shows how related characters cluster together through a physical simulation of charged particles and springs, while unrelated characters remain distant. Rendered in SVG, the visualization uses D3 v4’s `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to compute layout positions, with `d3.drag` enabling interactive node movement. Link thickness encodes co-occurrence frequency, and node colors distinguish character groups via `d3.scaleOrdinal` with `d3.schemeCategory20`.

Dec 26, 2016
Loading thumbnail…

Force-Directed Graph

This force-directed graph visualizes character co-occurrence in Victor Hugo’s *Les Misérables*, using a physical simulation to place related characters closer together and unrelated ones farther apart. The code employs D3 v4’s `d3.forceSimulation` with link, charge, and centering forces, rendering nodes as SVG circles colored by group via `d3.scaleOrdinal` and edges as lines. Data comes from a JSON file (initially compiled by Donald Knuth), and the graph is interactive, allowing nodes to be dragged and repositioned.

Dec 26, 2016
Loading thumbnail…

Directional Force Layout Diagram with node colouring

This interactive force-directed graph displays directional relationships from a CSV dataset, with nodes colored by a categorical scale and link opacity encoded by link value. Users can click nodes to enlarge them and their labels, or double-click to restore them. The visualization uses D3 v3’s `d3.layout.force` for the physics simulation and SVG rendering for the nodes, curved paths with arrow markers, and transitions on click events to animate the size changes.

Dec 26, 2016
Loading thumbnail…

Gist fbc43b81ae8e60b047b153af61d1f7d0

This example demonstrates a modular robot architecture in C#, where different processing chips can be installed to alter the robot’s behavior. It shows how the `IRobot` interface supports installing `IChip` implementations, such as `Sum` and `Sort`, and then executing them on integer arrays. The code uses LINQ methods like `Sum()` and `OrderBy()` for data processing, and basic console output to display results. The example illustrates interface-based design with runtime chip swapping, though it does not include any data visualization or graphical rendering.

Dec 8, 2016
Loading thumbnail…

Cat is alive

This example highlights the importance of caching an expensive API call by storing the result of `catOnMars.isAlive()` in a variable. The code declares `catIsAlive` once, then passes it to `reportCatStatus` and reuses it in an `if` condition, avoiding a second invocation. It contrasts this pattern with a duplicate approach that assigns the result to `alive`. The logic demonstrates JavaScript’s variable assignment and conditional execution, with the source being a gist by Restuta, showing a straightforward coding practice rather than a visual rendering.

Nov 12, 2016
Loading thumbnail…

wget commands to get static sites

This example demonstrates a single-line shell command for downloading a static website. The visualization shows how `wget` flags combine to fetch a complete, browsable local copy of a page. The code uses `--recursive` and `--level=1` to limit depth, `--convert-links` to rewrite HTML references, and `--page-requisites` to pull in CSS, images, and scripts. The command also applies `--no-cookies`, `--timestamping`, `--adjust-extension`, `--no-parent`, and `--max-redirect=0` to control caching, file naming, and redirect behavior. The data source is the URL provided as an argument to the script.

Nov 1, 2016
Loading thumbnail…

Gist d62d0b1c5cf167139aed46447843ef36

This example illustrates the logical contradiction of Schrödinger’s cat through a unit test. The code uses the Microsoft Visual Studio TestTools `[TestMethod]` attribute and `Assert.IsTrue` to assert that the same cat object is simultaneously alive and dead after being placed in a sealed box with a poison flask and a radioactive source. The test demonstrates the superposition principle by evaluating both mutually exclusive states as true, directly mirroring the quantum thought experiment within a deterministic testing framework. No visualization library is used; the paradox is expressed purely through C# assertions.

Oct 24, 2016
Loading thumbnail…

NCNCA Total Events vs Canceled 2011-2016

This chart visualizes the ratio of canceled to total NCNCA cycling events from 2011 through 2016, with each year’s cancellation percentage overlaid on a stacked bar that also shows absolute event and cancellation counts. The data, sourced from a gist by Restuta, is rendered using D3.js, drawing SVG bars and labels with d3.scaleBand and d3.scaleLinear. Each year displays its percentage as a number above the bar, while the underlying arrays for totalEvents and totalCanceled drive the bar heights, making both proportional trends and raw figures directly comparable.

Aug 28, 2016
Loading thumbnail…

Redux + localStorage

This example shows how to persist a Redux store in the browser’s localStorage by syncing state changes through a custom module. The code defines a reducer that handles `SET` and `REMOVE` actions, calling `serialize` to write the updated Immutable.js collection to localStorage after each mutation. On initialization, `deserialize` reads the stored JSON and hydrates the state via `Immutable.Map`. Access to stored values uses memoized `reselect` selectors, while action creators `set` and `remove` trigger updates. The implementation relies on Redux’s reducer/action pattern and the browser’s `localStorage` API.

Aug 18, 2016
Loading thumbnail…

2016 race plan for Rob

This sample visualizes the 2016 race season for an individual cyclist, plotting events such as Circuit Races, Road Races, Time Trials, and Criteriums on a timeline. The data, sourced from a plain-text Markdown file, is parsed to extract event dates, names, and attributes like priority and duration. The visualization uses a custom-built calendar-grid layout to display each month, with individual race markers color-coded by event category and labeled with their specific discipline. The code relies on a custom JavaScript parser and DOM manipulation for rendering, without external charting libraries.

Jan 26, 2016
Loading thumbnail…

React, removeEventListener and bind(this) gotcha

This example demonstrates a common memory-leak pitfall in React ES6 components: using `bind(this)` directly inside `addEventListener` and `removeEventListener` calls. The code shows a `resize` listener attached to `window` in `componentDidMount` and removed in `componentWillUnmount`, but because each `bind()` creates a new function reference, the removal fails. It then illustrates three fixes: binding once in the constructor, reassigning the method to its bound version, or using a class-level arrow function, highlighting how context binding affects cleanup in lifecycle methods.

Jan 13, 2016
Loading thumbnail…

Half as Russian http://cmx.io/#1b7f32cd476d819bc8ae

Two stick figures discuss the ambiguity of the Russian phrase "half as Russian"—meaning both "half as much" and "half as tall"—using a series of speech bubbles. The static comic strip, defined in a single HTML file, is rendered by the cmx.io library (loads `cmx.css` and `cmx.js`), which interprets handwritten `scene`, `actor`, and `bubble` elements with pose and translation attributes to draw the characters and text.

Dec 24, 2015
Loading thumbnail…

Teleportations feedback

This example critiques the marketing language of a science event description by juxtaposing it against a technical debunking. It visualizes the event’s promotional text alongside a corrective analysis, showing how sensational claims compare to factual details. The rendering uses plain HTML/CSS for layout and text styling, with no interactive charts, relying instead on static content to highlight discrepancies between the advertisement and the actual presentation.

Dec 16, 2015
Loading thumbnail…

Gist 1754332391eb199e5b29

This example shows three versions of a privacy policy for rcn.io as a side-by-side comparison of text documents. The visualization uses D3.js to render the text, with a focus on how the policy changes across versions, from a brief survey statement to a comprehensive legal document. The code applies D3’s layout and selection methods to position and style the text blocks, highlighting differences in length and content structure. The data is derived directly from the provided markdown files, displayed as raw text without additional transformation.

Dec 3, 2015
Loading thumbnail…

React HOC (Higher Order Component) Example

This example demonstrates three progressively concise implementations of a React Higher Order Component (HOC), a pattern where a function accepts a component and returns a new wrapped component. The code shows both class-based and functional HOCs that render a passed component inside a `<div className="debug">` for debugging purposes. The functional versions use React component syntax with implicit returns, showing how the helper function `DebugComponent` can be defined with arrow functions. The examples highlight how React components can be composed programmatically, with the final invocation `DebugComponent(MyComponent)` applying the wrapper to any target component.

Nov 30, 2015
Loading thumbnail…

Redux without the sanity checks in a single file. Don't use this, use normal Redux. :-)

This example presents a single-file implementation of Redux, stripped of its typical validation and sanity checks. It defines core Redux APIs, including `createStore`, `combineReducers`, `bindActionCreators`, `compose`, and `applyMiddleware`, using helper functions like `mapValues` and `pick`. The code demonstrates a minimal store with `dispatch`, `subscribe`, `getState`, and `replaceReducer` methods, initializing state with an `@@redux/INIT` action. It shows a functional, albeit simplified, version of Redux’s state management pattern, intended for educational purposes rather than production use.

Sep 22, 2015
Loading thumbnail…

Bootstrap Grid Visualized

This visualization demonstrates how Bootstrap’s 12-column grid system lays out nested and stacked rows. Using jQuery, it clones a hidden label element and appends each column’s numeric span (e.g., “4” or “8”) onto matching `col-sm-*` classes, highlighting the grid structure. Columns with nested children receive a faded pink background, while leaf columns get solid pink; a light gray container and spacers frame the layout. It relies on Bootstrap 3.3.5’s CSS and jQuery’s `each()` and `clone()` methods for annotation.

Sep 10, 2015
Loading thumbnail…

Arrow functions and "this"

This example demonstrates how arrow functions bind `this` to their enclosing lexical scope, unlike regular functions. The JavaScript code defines `Foo` and `Bar`, each with a `setTimeout` callback that logs `this` to the console. A regular function in `Foo` causes `this` to refer to the global `window` object, while the arrow function inside `Bar` preserves the constructor instance, printing `Bar`. The example uses native JavaScript `setTimeout` and `console.log` to illustrate the difference in behavior.

Sep 8, 2015
Loading thumbnail…

activate-deactivate for header

This example demonstrates how to manage a dynamic application header in a single-page application by toggling between header states during route activation and deactivation. The code defines `activate()` and `deactivate()` hooks that update a shared `application` model through its `get` and `set` methods, storing the current header before a route change and restoring it upon exit. It uses an application-level model to hold `currentHeader` and a route-local `prevHeader` to track the prior state. The logic relies on the framework’s model API to read and mutate the header value, with `_super(...arguments)` ensuring the parent class methods are invoked.

Aug 17, 2015
Loading thumbnail…

Ids of Marvel characters without Image

This example visualizes the IDs of 512 Marvel characters who lack images in the Marvel Comics API, showing their distribution across the total 1,485-character dataset. It plots the IDs as a chronological strip, highlighting the 34.5% missing-image rate. The visualization uses D3.js, fetching data from the Marvel API endpoint and rendering the ID list as a structured array for display.

Aug 5, 2015
Loading thumbnail…

Scroll Highlighting (as seen at http://geojson.org/geojson-spec.html)

This example shows a navigation menu that automatically highlights the section currently visible in the viewport as the user scrolls. The code uses jQuery to listen for window scroll and resize events, then checks each heading’s offset position against the viewport bounds to determine which one is active. It applies “active” and “first” CSS classes to corresponding navigation links via `$('#nav a')`, and it runs once on page load. The data comes from the headings’ `id` attributes in the document, as seen in the GeoJSON specification page.

Aug 4, 2015
Loading thumbnail…

Find MARVEL characters without images

This example queries the Marvel Comics API to identify characters that lack a usable thumbnail image. It sends one request per character, iterating through all 1,485 entries, and checks each response’s `thumbnail.path` for the substring `image_not_available`. Characters matching that condition are collected into an array and logged to the console after all requests finish, using jQuery’s `$.get` and `Promise.all` to manage the asynchronous calls. The final output shows the total count and IDs of those characters without images.

Jul 20, 2015
Loading thumbnail…

Get random Marvel character

This example fetches a random Marvel character from the Marvel Comics API and displays that character’s thumbnail in a pop-up window. It first selects a random offset between 1 and 1,485, then queries the API’s character endpoint with a limit of one. After retrieving the initial result, the code makes a second request to the character’s resource URI to get the full name and image path. Using jQuery’s `$.get` promises, it constructs the image URL at the `standard_fantastic` size and opens it via `window.open`. The data source is the live Marvel API.

Jul 20, 2015
Loading thumbnail…

momentjs countdown

This animation demonstrates a countdown timer that displays the remaining time in a compact, human-readable format, such as `1M 1d 1h 1m 10s`. It uses the Moment.js library to manage time durations and updates the displayed text every 10 milliseconds via `setInterval`. The `format` function iterates through time components (`y`, `M`, `d`, `h`, `m`, `s`) to conditionally include zero-padded values only when a higher-order component is non-zero, revealing a bug where minutes are omitted when hours exist but days are zero. The countdown stops when the duration reaches zero.

Jun 12, 2015
Loading thumbnail…

How to make git repo to be another's repo subfolder preserving history

This example shows a multi-step Git workflow for relocating an existing repository (`Proto`) into a subfolder of another repository (`Main`) while preserving full commit history. It demonstrates the use of `git checkout --orphan`, `git rebase`, and the history-rewriting command `git filter-branch --tree-filter` to move all files into `SRC/proto` across every prior commit. The process also addresses hidden files (like `.editorconfig`) and explains how to merge the two repositories via `git remote add` and a final `git rebase`. The source is a plain-text markdown guide with shell commands.

Jan 8, 2015
Loading thumbnail…

JS local scope definition

This example illustrates the distinction between global and local scope in JavaScript, showing how function declarations behave differently depending on their context. The first script defines a `bla()` function in the global scope, making it accessible via `window.bla()`, while the second script wraps a `foo()` function inside an immediately invoked function expression (IIFE) with `(function() { ... })()`, preventing external access. The code uses the browser's `console.log` to demonstrate execution order and visibility. No external libraries or data sources are involved; the example relies solely on native JavaScript scope rules within a plain HTML document.

Sep 4, 2014
Loading thumbnail…

Helen's poor attempt with Python

This example shows a Python function that reverses a string by swapping characters from both ends toward the middle, then prints the reversed result along with two indexed substrings from the original string. The code defines `reverse_string(list)` to mutate the input list in place using a temporary variable and integer division (`//`) for the loop range. It uses no external libraries, relying only on built-in Python functions like `len()` and `range()`. The author then calls the function with a hardcoded string, prints the reversed output, and demonstrates indexing with a variable `i` set to 3.

May 5, 2014
Loading thumbnail…

For Helen

This example visualizes class performance by computing the average score for each student and then the overall class average. The Python functions `get_class_average`, `get_average`, and `average` process a list of student dictionaries, iterating through each student to accumulate individual results in a buffer before reducing them to a final numeric summary. The code accesses per-student score data via a list and calls `results.append()` to build the dataset, ultimately returning a single aggregate value through `average()`. The visualization would plot these calculated averages, with the data source being the hardcoded student list and the rendering dependent on an external plotting library.

Apr 10, 2014
Loading thumbnail…

Facebook Hacker Cup, qualification, "Square finder"

The example shows a line-by-line solution to the Facebook Hacker Cup "Square finder" problem, reading a grid from a text file and printing either 'YES' or 'NO' for each test case. It uses Python’s built-in `open`, `readline`, and `read` functions to parse input, then iterates through nested loops to detect a contiguous square of `#` characters. The logic tracks the first sharp and its length, validating each cell against the expected square bounds with a helper function. No visualization or plotting library is used; output is plain text to the console.

Nov 24, 2013
Loading thumbnail…

Gist 7306870

This example shows a short comic-style argument between two stick figures, each accusing the other of being mafia, with the first speaker’s line rendered in orange via a CSS override. It uses the CMX library (cmx.js and cmx.css) to define scenes, actors, bubbles, and drawings through declarative SVG-like markup, with `pose` attributes specifying limb and bubble shapes. A green slanted line and the text “Strongest argument ever” add a punchline, while transform attributes position and rotate elements. No external data or dynamic computation is involved; the visualization is fully static and defined inline.

Nov 3, 2013
Loading thumbnail…

charts for flexicharts from http://www.cyclinganalytics.com/

This example uses FlexiCharts to compare average power and heart rate across cycling rides, separating workouts without GPS from those with power data and a specific heart-rate range. The code chains `.filter()` and `.line()` calls on ride aggregates, drawing purple and teal lines for power and heart rate, while `.on(-1)` places the heart-rate series on a secondary axis. A final `.group_by(week).aggregate(average).line()` renders weekly trends of power at a 150-watt threshold (pwc150). Data comes from cycling analytics ride summaries, rendered as lightweight SVG-like line charts.

Oct 29, 2013
Loading thumbnail…

count of unique emails from several tables

This example counts unique email addresses across three monthly developer tables by combining them with UNION and applying SELECT DISTINCT COUNT(*). The SQL query nests three SELECT statements inside a UNION, each pulling the email column from a separate table (active_developers_april2013, february2013, and march2013), before counting the deduplicated results. It demonstrates a straightforward approach to aggregating overlapping datasets, with the gist’s code showing only the SQL logic and no visualization library or rendering API.

Oct 16, 2013
Loading thumbnail…

Sencha 'Single tap' example

This Sencha Touch example demonstrates a full-screen list of four items that responds to a single-tap gesture. The application defines an `Ext.List` component with an inline data array containing titles like 'Item 1' through 'Item 4'. The code registers a listener for the `itemsingletap` event, which logs a random number to the console whenever a user taps an item. The configuration uses `Ext.Loader.setConfig` and the `Ext.application` launcher to initialize the Sencha UI framework.

Oct 15, 2013
Loading thumbnail…

https://www.bloc.io/ruby-warrior

This example shows a Ruby Warrior bot making tactical decisions each turn based on its current health and surroundings. The code tracks health changes between turns, retreating when under attack and low on health, resting when safe, and otherwise walking, attacking, rescuing captives, or turning around at walls. The implementation relies on the warrior’s API methods—`health`, `feel`, `walk!`, `rest!`, `attack!`, `rescue!`—to interact with the game state. The logic is a series of nested conditionals that prioritize survival, with the previous health stored in an instance variable to detect incoming damage.

Jul 30, 2013
Loading thumbnail…

R# custom exception file template

This example shows a C# template for creating custom exception classes in a SaaS application. The code defines a class that inherits from `ExceptionBase` and includes four constructors, allowing for empty, message-only, message-with-inner-exception, and serialization-friendly initialization. The template uses `System.Runtime.Serialization` and `SerializationInfo` with `StreamingContext` to support object serialization. The class is marked as `[Serializable]` and uses namespace and exception name placeholders for direct code generation.

Jul 25, 2013
Loading thumbnail…

Gist 5872291

This example shows how a custom C# log layout distinguishes exception types by formatting each error message with a consistent prefix and predefined descriptions for common .NET exceptions. The code defines constants for messages like `DescriptionException`, `DescriptionArgumentNullException`, and `DescriptionFileNotFoundException`, mapping specific exception types to human-readable text. It uses the `CustomPatternLayout` class, presumably integrating with a logging framework, to produce these formatted outputs. The visualization highlights the structured, code-driven approach to error reporting, where each exception type gets a tailored explanation, though no rendering library or data source is used.

Jun 26, 2013
Loading thumbnail…

Gist 5578815

A comic-strip conversation between animated characters, built with the CMX library, uses a `scene` and `actor` elements with `pose` attributes to create a sequence of panels. The scene shows one happy day with a character telling teammates about a present, while a later scene reacts to a build server’s report of 187 compilation errors. Speech bubbles are defined via `bubble` elements containing `tspan` text. The data is hardcoded within the `index.html` file, using CMX’s scene and actor APIs to drive the animation.

May 14, 2013
Loading thumbnail…

Cyclone Record data structure

This example visualizes the nested structure of a Cyclone activity record, showing how heart rate, speed, cadence, temperature, and GPS coordinates are organized within a single JSON object. It uses d3.hierarchy and d3.tree to render the data as an interactive collapsible tree diagram. The JSON data comes from a gist by Restuta, with each node representing a key-value pair, including the nested GpsData object containing latitude and longitude. The visualization highlights the parent-child relationships between the main record fields and the GPS sub-object.

Apr 23, 2013
Loading thumbnail…

powershell wtf

This example illustrates a PowerShell script that extracts a changeset ID from a Git commit message using two different approaches. It first demonstrates a successful method using a `Where-Object` pipeline with a regular expression, followed by a direct `-Match` operator, both printing the captured group to the console. The script then shows a commented-out version where the `-Match` operator fails, producing a "Cannot index into a null array" error, highlighting the difference in handling matched results. The code relies on PowerShell's built-in regex matching and `Write-Host`, drawing data from `git log`.

Mar 28, 2013
Loading thumbnail…

Gist 5001434

This example shows a debugging scenario for event sourcing, where two events with identical timestamps are replayed and returned in unpredictable order. The code displays two event objects—`UserCreatedEvent` and `UserCredentialsCreatedEvent`—with their UUIDs and aggregate root IDs, using JavaScript object literals. It illustrates the problem of sorting by `DateTime.Utc.Now` when fast-sequenced commands produce equal dates, leading to logical ordering failures. The example renders the raw event data and aggregates as plain text, relying on standard JavaScript syntax rather than any visualization library, focusing on the conceptual issue of timestamp collisions in EventStore queries.

Feb 21, 2013
Loading thumbnail…

prototype for easy and declarative definition of Events that should be present in the EventStore during testing of something

This example shows a fluent C# API for declaratively defining expected events in an EventStore during testing. It uses a builder pattern with `InsertEventsTo(EventStore)` and chained `.AggregateId(...)` calls, mapping aggregate IDs to arrays of `FakeEvent` objects like `ContactCreated` and `TaskCreated`. The code highlights a readable, intention-revealing syntax for setting up test fixtures without explicit event construction logic.

Feb 6, 2013
Loading thumbnail…

Sublime Plugin that does auto-save of the current document when you stop typing. Can be used with LiveReload to remove the need to press Ctrl+S all the time.

This example demonstrates a Sublime Text plugin that automatically saves the active document after the user pauses typing for 800 milliseconds. Using the `sublime_plugin.EventListener` API, it tracks modifications via `on_modified` and schedules a timeout through `sublime.set_timeout` with `functools.partial`. The idle detection decrements a pending counter, and when it reaches zero, the `save` command runs, reducing the need for manual Ctrl+S. The code is sourced from a Python gist by Restuta.

Dec 14, 2012
Loading thumbnail…

## Being the worst #3 - Commanding your words

This visualization shows how messaging and domain modeling shape software architecture through an episode transcript from a gist. It is a text-based document rendered as Markdown, presenting a conversation about commands versus events, using examples like product baskets and factories. The content references DDD concepts and highlights the importance of ubiquitous language, though it does not implement any charts or interactive graphics. The data source is the gistfile1.md file, which contains the episode notes and discussion points.

Dec 14, 2012
Loading thumbnail…

Being The Worst #2 transcript

This transcript-based data visualization explores messaging fundamentals, showing how message definitions, queues, and serialization enable decoupled communication between systems. The content references classes like `ProductBasket` with an `AddProductToBasket` message, and discusses persistent queues for temporal decoupling. It also covers serialization formats and streams for passing message instances across machines. No rendering libraries or code APIs appear; the visualization relies solely on the transcript text and gist metadata, presenting concepts through the author’s spoken explanation rather than graphical output.

Nov 26, 2012
Loading thumbnail…

"New" test helper

This example demonstrates a test helper class named `New` that centralizes the creation of realistic `ContactDetails` objects for unit tests. The usage shows a test instantiating a `ContactCreatedEvent` with a fresh `Guid` and calling `New.ContactDetails()` to supply the required data. The `New` class is a static factory method that populates a `ContactDetails` instance with hardcoded values—including a birthday timestamp from `DateTime`, email, phone number, and a list of `StreetAddress` objects—using standard .NET collections and `List<T>`. The code relies on C# language features like the `var` keyword and inline object initializers, with no external libraries beyond the .NET framework.

Nov 20, 2012
Loading thumbnail…

BDD sintax example

This example demonstrates a Behavior-Driven Development (BDD) testing pattern in C#, showing how a tool's lifecycle is specified through a fluent, human-readable syntax. The code defines a `Feature` class with a `Scenario` method that uses the `_(...)` lambda operator to chain Given/When/Then steps, where each step executes a code block against a `Tool` object. The test asserts that after creation and use, the tool's `Look` property equals "used" via the `ShouldEqual` method. The visualization maps the relationship between the textual BDD steps and their corresponding executable actions, highlighting the structure of the specification.

Nov 19, 2012
Loading thumbnail…

Command to Event specification

This example demonstrates a command-to-event specification using the GoldMine CQRS framework, showing how a `CreateTaskCommand` sent through a `CommandBus` results in a single `TaskCreatedEvent`. The code relies on `Machine.Specifications` (MSpec) to define the behavioral test, using `Because` to trigger the command and `It` to assert that the `EventStore` contains exactly one matching event. It pairs `GoldMine.Core.Commands` and `GoldMine.Core.CommandHandlers` with an in-memory CQRS runtime, highlighting a test-driven verification of domain event generation. The rendering approach is purely code-based, with no visual output shown.

Oct 23, 2012
Loading thumbnail…

Various useful System.String extensions

This example demonstrates two C# string extension methods: `StartsWithAny`, which checks whether a string begins with any character from a supplied collection, and `Remove`, which removes a specified substring from a source string. The code uses the `System`, `System.Collections.Generic`, and `System.Linq` namespaces, including LINQ’s `Any()` method for character matching and `Replace()` for string removal. The implementation validates arguments by throwing `ArgumentNullException` and `ArgumentException`. The source is a gist by Restuta, showing practical utility methods for common string operations in a .NET context.

Aug 24, 2012
Loading thumbnail…

Reveiw #1

This example shows a PowerShell script that syncs a Perforce workspace to Git, converting individual Perforce changelists into Git commits on a dedicated branch. It queries `p4 changes` and `p4 users` to gather changelist metadata and author information, then iterates through each changelist, updating the workspace with `p4 sync` and committing changes via `git add` and `git commit` on behalf of the original Perforce users. A preview mode optionally prints changelist details without executing the commits. The script relies on command-line tools rather than a visualization library, performing no graphical rendering.

Jun 21, 2012
Loading thumbnail…

Adds GitExtensions support to the git bash

This example demonstrates a PowerShell script that configures the Git Bash environment to integrate with GitExtensions. The script first detects the operating system architecture using `Get-WMIObject` to determine the appropriate Git installation path, then modifies the system `PATH` variable by appending the Git directory. It subsequently creates a `git-ex` file in the Git `bin` folder, writing a shell script content that launches `GitExtensions.exe` with any passed arguments. The code uses PowerShell's `Write-Host` for user feedback and `Test-Path` and `New-Item` for file operations.

Apr 27, 2012
Loading thumbnail…

Sublime Build to compile and run C# program

This example shows a Sublime Text build system that compiles and runs a C# program from within the editor. The configuration defines a command chain that first deletes any existing .exe, then invokes the C# compiler `csc` to build the current .cs file, and finally executes the resulting executable. It uses the `file_regex` pattern to parse compiler error locations into Sublime’s error navigation, and sets `"shell": true` to allow chaining commands with `&`. A commented-out `"path"` option provides a fallback for locating `csc` when it is not on the system PATH.

Mar 18, 2012
Loading thumbnail…

Measure.Performance (Simplifies work with Stopwatch class)

This example shows a simplified C# utility for measuring code execution time using the `System.Diagnostics.Stopwatch` class. The `Measure.Performance` method runs a given `Action` code block, records the elapsed milliseconds, and invokes a customizable `WhenDone` callback that defaults to printing the result to the console. The included `Program.Main` demonstrates usage by timing a loop that repeatedly creates and populates a `Dictionary<string, object>`, with the output formatted as `Execution time: {0}ms`. The code highlights how to set a custom reporting action and wrap performance measurement into a concise one-line API.

Mar 1, 2012
Loading thumbnail…

ReSharper template for MSpec tests of Equals method and == operator

This example provides a ReSharper live template that generates a suite of MSpec tests for the `Equals` method and `==` operator on a specified entity class. The template uses macros like `$Entity$` and `$initial_data$` to inject user-defined values into the generated test contexts, covering cases such as null comparisons, identical and different instances, and `GetHashCode` consistency. The code relies on MSpec’s `Establish`, `Because`, and `It` syntax with `ShouldEqual` and `ShouldBeFalse` assertions, and is intended for use within the ReSharper template editor.

Feb 29, 2012
Loading thumbnail…

31337 Book

A radial network diagram maps the planned chapters of a book titled "31337 Book," using a force-directed layout to arrange topics like Perfectionism and Security around a central node. The visualization loads data from a Markdown file via `d3.json` and renders interactive nodes and links with `d3.forceSimulation` and `d3.forceCollide`, allowing users to drag nodes and see the author’s proposed structure. Hovering highlights connections, while static text labels persist for clarity. The layout emphasizes the non-linear, collaborative nature of the book’s outline.

Feb 15, 2012
Loading thumbnail…

Gist 4e224719a58f232f8f26

This example demonstrates how to build a Jekyll blog post layout that displays article metadata alongside author information. The template uses Liquid templating to pull author details from a `_config.yml` file, showing how to associate blog posts with specific authors via YAML front matter. It renders the post title, publication date, and author name using the `site.authors` data structure and `page.author` variable. The code highlights Jekyll's built-in templating system for managing multi-author blogs without external JavaScript libraries.

Feb 15, 2012
Loading thumbnail…

find a thread safety bug

This example demonstrates a subtle thread-safety bug in a C# .NET console application. Two `ThreadUnsafe` instances execute a `Go()` method concurrently across 10,000 iterations, with a shared static `_val2` flag reset after each attempt. The code uses the `lock` keyword on a `syncObj` to guard the division `_val1/_val2`, but the assignment `_val2 = 0` occurs outside the lock. The visualization—rendered via console output—shows the iteration index and an `AggregateException` when a race condition triggers an arithmetic error, revealing the unprotected write that breaks the intended synchronization.

Feb 8, 2012
Loading thumbnail…

Tanahas first programm =)

This example displays the current date and a short greeting in Russian, written directly into the page via `document.write()`. It uses the native JavaScript `Date` object, calling `getMonth()`, `getDate()`, and `getFullYear()` to construct a formatted string with slashes as separators. The output is styled with a green font color. The code consists solely of inline HTML and JavaScript, with no external libraries or data sources, serving as a simple introductory script demonstration.

Feb 5, 2011
Loading thumbnail…

Gist 740340

This example demonstrates a parallelized aggregate operation that sums the integers from zero to one million using Language-Integrated Query (LINQ). The code uses the `Enumerable.Range` method to generate the data sequence and calls `AsParallel()` to enable parallel execution across multiple threads. The `Aggregate` function then combines each element with an accumulator, applying the addition lambda `(x, y) => x + y` to produce the total. The visualization likely maps the resulting sum or the execution process, though the rendering method is not specified in the provided source code.

Dec 14, 2010
Loading thumbnail…

Gist 593506

This example demonstrates a Visual Basic script that repeatedly checks for the existence of two PDF files on the filesystem, using a loop with the condition `while not inFSO.FileExists(pdfFileName1) and not inFSO.FileExists(pdfFileName2)`. It shows a polling mechanism where the code pauses execution via the `ExecuteSQL("waitfor DELAY '00:00:02'")` command, which introduces a two-second delay between checks. The visualization tracks the file-state transitions over time, illustrating the wait-and-retry logic. The rendering relies on the base Visual Basic runtime’s file system object (`inFSO`) and SQL delay function, with no external charting libraries.

Sep 23, 2010
Loading thumbnail…

CsvFieldsSaver + Tests

This example demonstrates a C# class, CsvFieldsSaver, that formats form data into CSV output through a TextWriter, handling edge cases like commas, double quotes, leading/trailing spaces, and embedded line breaks by enclosing values per CSV standards. It uses NUnit for testing and Rhino Mocks to mock writers, with a FileWriter wrapping a StreamWriter around a MemoryStream to verify the resulting CSV strings. The code shows how to quote embedded double quotes by doubling them, and focuses on unit-testing the serialization logic.

Sep 22, 2010