McNull

@McNull·18 public vizzes

Pico Compact Pro — Component Preview

Pico Compact Pro is a dark-themed component preview that showcases the Pico CSS framework's compact design tokens, reducing spacing, font size, and border radius for a denser UI layout. The page renders a full set of Pico components—buttons, forms, cards, tables, progress bars, and accordions—in both light and dark themes. It maps CSS custom properties like `--pico-form-element-spacing-vertical` and `--pico-card-background-color` to override Pico's default styles, with theme switching handled by the `data-theme` attribute. The preview uses plain HTML and CSS, relying on the Pico CDN stylesheet.

Aug 29, 2026

Loading thumbnail…

A no-bullshit-stupid-simple-test-runner for node

This example presents a minimal test runner for Node.js, implemented as a single JavaScript file. It defines `describe`, `it`, `run`, and `assert` functions to structure and execute asynchronous tests, using `async`/`await` and the native `fetch` API for a network call. Test results are printed to the console with ASCII line separators, and failures are tracked hierarchically across nested contexts. The code demonstrates a simple recursive traversal and error-handling pattern for organizing and reporting test outcomes.

Jul 21, 2024

Loading thumbnail…

three.js utils

This example showcases a collection of utility classes for building interactive Three.js applications. It includes an `ArrayPool` for efficient object management, a `Timer` class that tracks `deltaTime`, `elapsedTime`, and `fps`, and a `Random` number generator with a Park-Miller algorithm. An `OrbitControls` class extends Three.js's controls, persisting camera state to `localStorage` and loading it on initialization. The code also defines a `Vec2` vector class for 2D math operations. The rendering uses WebGL, leveraging Three.js, with utilities designed to manage camera manipulation, timing, and data structures.

Jan 4, 2024

Loading thumbnail…

${e}

A WebGL-based animation renders a dynamic, interactive data visualization. The scene uses a force-directed graph layout, with nodes and edges presumably computed by a physics simulation. The rendering is handled through the WebGL API, with the code showing shader compilation and buffer management for drawing points or lines. The animation updates the visualization over time via requestAnimationFrame, creating motion as the force simulation runs. The example is written in JavaScript as part of a custom extension, indicating a self-contained implementation rather than relying on external charting libraries for the core rendering.

Feb 11, 2023

Loading thumbnail…

Blender: assign a unique vertex color for each material to the mesh (id map)

This example shows a Blender Python script that assigns a unique vertex color to every face based on the material assigned to that face, creating an ID map for meshes. It iterates through selected mesh objects, generates a color palette (either random or procedurally spaced via HSV), and writes these colors into a vertex color layer named `_IDMAP_`. The code uses Blender’s `bpy` API to access polygons, material slots, and vertex color data, directly manipulating `vertex_colors.data[i].color` per loop index.

Mar 20, 2022

Loading thumbnail…

Proton script to run non-Steam Apps on Linux. Supposedly you have to install Steam first (requires Steam account). Then put this to `/usr/bin/proton.sh` and add required file permissions.

This example shows a bash script named `proton.sh` that runs a non-Steam application on Linux through Steam’s Proton compatibility layer. The script takes a file path as its first argument, checks that both the Proton 5.0 installation and the target file exist, then executes the Proton binary with `run $RUNNING`. It uses environment variables `STEAM_COMPAT_DATA_PATH` and `MOUNT_PATH` to set compatibility data and mount locations, along with `PROTON_USE_WINED3D11=1` and `PROTON_NO_ESYNC=1` to configure rendering and synchronization. The script outputs colored status messages via `printf` before redirecting Proton’s output to `/dev/null` and exiting with status 0.

Nov 1, 2020

Loading thumbnail…

Unity component that keeps the editor scene view active when entering play mode.

This example demonstrates a small Unity editor utility component that refocuses the Scene view when entering Play Mode. The `KeepSceneViewActive` MonoBehaviour, placed on any game object, checks a public boolean `KeepActive` and, during `Start`, calls `UnityEditor.EditorWindow.FocusWindowIfItsOpen` with `UnityEditor.SceneView` as the target type. It relies on the `UNITY_EDITOR` preprocessor directive to ensure the editor-only code is compiled only in the Unity Editor. The behavior is immediate and automatic, requiring no user interaction beyond attaching the component.

Aug 7, 2018

Loading thumbnail…

Blender keymap for busy Maya / Unity / Substance Designer users

This example presents a Blender keymap configuration tailored for users familiar with Maya, Unity, and Substance Designer. The visualization encodes key bindings as data, mapping keyboard shortcuts to Blender operator functions using the `bpy` API. It shows new entries added without altering existing defaults, with disabled conflicts clearly marked. The code defines keymap items through `keymap_items.new()`, specifying key, modifier, and operator properties, and includes context-specific mappings for different editor types.

Jul 24, 2018

Loading thumbnail…

Unity 3d key bindings for Blender

This visualization maps a custom Unity 3D key-binding preset onto Blender’s pose-editing workflow. The Python script, executed via Blender’s `bpy` API, programmatically creates a new key configuration and populates it with keymap items for operations like pose manipulation, selection, and constraint management. It assigns shortcuts for actions such as `pose.copy`, `object.parent_set`, and `wm.call_menu` calls, with modifiers like `ctrl`, `shift`, and `alt`. The data originates from the `unity-preset.py` gist by McNull, showcasing how to automate Blender keymap configuration through its scripting interface.

Oct 21, 2016

Loading thumbnail…

Aurelia

This example demonstrates interactive SVG manipulation within an Aurelia application, using an embedded heart-shaped path drawn with Inkscape. It shows mouseover and mouseout events changing the SVG fill color from green to blue while the surrounding object’s background shifts, and a click triggering an alert. The code relies on Aurelia’s event delegation (`mouseover.delegate`, `click.delegate`) and accesses the SVG document via `getSVGDocument()` to modify style properties.

Sep 21, 2016

Loading thumbnail…

SVG ring 4

An interactive radial menu displays numbered, color-coded squares around a ring. Users spin the ring by dragging, and the active square is determined by its angular position. Built with AngularJS and SVG, the visualization updates the ring's rotation and active index based on mouse events, with a transition animation on release.

Sep 14, 2016

Loading thumbnail…

Gist e1458497b7415589b8b144e03e5f918d

This example demonstrates a JavaScript module that generates deterministic lorem ipsum text using a seeded pseudo-random number generator, with the ability to customize word counts, sentence lengths, and paragraph structure. It is implemented as an Angular factory service named `lorem`, built on top of the `angular.module` API. The code adapts the `loremIpsum` function from the knicklabs/lorem-ipsum.js library, replacing the default `Math.random` with a custom sinusoidal seed-based generator, and supports plain or HTML output formats for generating placeholder content.

Jun 11, 2016

Loading thumbnail…

appify — create the simplest possible Mac app from a shell script

This example creates a minimal Mac app from a shell script. It shows how a user-provided script (my-script.sh) is packaged into an .app bundle with a generic icon and plist configuration. The implementation uses Bash and macOS command-line tools like `mkdir`, `cp`, and `cat` to construct the app’s directory structure and write the Info.plist file. It relies on the system’s GenericApplicationIcon.icns for the icon and outputs the resulting app tree for inspection.

Jun 4, 2016

Loading thumbnail…

Simple babel livereload

This example demonstrates a live-reloading development workflow for transpiling JavaScript and serving a web page. The gulpfile defines tasks to convert ES6 source files with Babel, bundle the resulting JavaScript with Browserify, and automatically refresh the browser via `gulp-livereload` whenever source files change. It also sets up a local HTTP server using the `st` library to serve static files on port 8080, integrating all these steps into a single default Gulp task. The visualization shows how build tools can be orchestrated for rapid iteration, but no actual data or graphical output is involved—the code is purely a build configuration.

Mar 29, 2015

Loading thumbnail…

Hack to enable source maps in with gulp-sourcemaps and autoprefixer.

This example demonstrates a custom Gulp plugin that enables source maps when using Autoprefixer with gulp-sourcemaps. The code defines a module that processes CSS files through the `autoprefixer` library, updates the file contents with prefixed CSS, and applies the resulting map via `vinyl-sourcemaps-apply`. It integrates with `through2` for stream handling and is designed for use within a Gulp task where sourcemaps are initialized and written. The gist shows the complete function, including error handling for streams and null files.

Aug 12, 2014

Loading thumbnail…

Disable the Mac Boot Chime

This example presents a shell script that disables a Mac’s startup chime by using the `nvram` command-line utility to set the `SystemAudioVolume` variable to `%00`. The script shows the direct system configuration change, with a comment explaining that the setting can be reversed with `sudo nvram -d SystemAudioVolume`. No external libraries or JavaScript APIs appear in the code; the visualization relies solely on the script text and its embedded instructions to convey the operation.

Apr 9, 2014

Loading thumbnail…

Open current directory in forklift

This example shows a shell script that opens the current directory in ForkLift, a macOS file manager, either in a new tab or window. It first resolves the target path via `pwd`, optionally accepting a custom path argument, then forwards it to an AppleScript block. The AppleScript uses `System Events` to inspect ForkLift’s File menu for the enabled state of the new-tab command, sends keyboard shortcuts for tab/window creation and “Go to Folder”, and types the path using `keystroke`. The script is adapted from a Gist by McNull, adding an optional path argument and removing clipboard reliance.

Mar 26, 2014

Loading thumbnail…

Json Model Binding with Knockout and ASP.NET MVC

This example shows how Knockout.js binds a customer form in an ASP.NET MVC view to a client-side view model, using a custom `JsonModelBinder` to deserialize submitted JSON into a `CustomerViewModel` server-side. The `Edit.cshtml` view uses `ko.applyBindings` to connect `ko.observable` properties like `Name` and `Id` to HTML inputs via `data_bind` attributes, while `toJson` in `HtmlHelperExtensions` serializes the server model for initial client data. The `viewModels.js` file defines a `Save` method that posts JSON to the controller’s `[HttpPost] Edit` action using `ko.utils.postJson`, with jQuery unobtrusive validation wired through `$.validator.unobtrusive.parse` and a custom `submitHandler`.

Nov 27, 2012