Jastor11

@Jastor11·35 public vizzes

Claude

This interactive explainer demonstrates three distinct AI prompting strategies—prompt crafting, financial stock analysis, and research-driven coding—within a single glassmorphism-styled interface. Users trigger scenarios through buttons to compare system-prompt variations and observe real-time behavioral outputs. The visualization combines custom CSS gradient overlays with frosted-glass panel effects, while JavaScript handles scenario switching and dynamic feedback logs. Code snippets are rendered as formatted markdown blocks, showing users practical prompt structures they can adapt for their own AI workflows.

Dec 1, 2025

Loading thumbnail…

Lyra - AI Prompt Optimization Specialist

A visualization of Lyra, an AI prompt optimization specialist, shows a flow diagram of its four-stage methodology and decision paths. The gist renders Lyra’s decision tree using a force-directed network layout via `d3.forceSimulation`, with nodes for modes, techniques, and response formats. Edges highlight the transition from deconstruction to delivery, while the imported `lyra.txt` text provides the content for tooltips and node labels. The interactive graph allows users to explore how different request types map to specific optimization strategies.

Nov 27, 2025

Loading thumbnail…

Useful snippets for Jupyter notebooks

This example shows how to manage notebook output and file operations using Jupyter's `%%capture` cell magic and IPython utilities. It captures noisy stdout and stderr streams, filters tagged error lines, and writes output to files using `%store` and Python's `print()` with a `file` argument. It also demonstrates file retrieval with `os.path.isfile` checks and curl, directory creation via `os.path.isdir`, and cleaning directories with shell commands. The code uses `IPython.utils.io.capture_output` and `shlex.quote` for safe command construction.

Nov 4, 2025

Loading thumbnail…

Claude Code JSON-to-TOON Hook

This visualization demonstrates a Claude Code hook that automatically converts JSON in prompts to TOON format, achieving 30-60% token savings. It shows how the `encode` function from the TOON library transforms repetitive JSON structures like `{"products": [{"sku": "A123", ...}]}` into compact row-based notation `products[2]{sku,name,price}:` followed by value lines. The hook reads prompts from standard input, identifies JSON code blocks and inline objects using regular expressions, applies heuristics to distinguish data from JavaScript code, and outputs the converted prompt. The example includes installation steps, configuration through `settings.json`, and manual testing via command-line echo.

Oct 27, 2025

Loading thumbnail…

Some notes on AI / ML tools that seem interesting/useful (largely aiming to focus on open source tools)

This interactive data-visualization gallery maps the landscape of AI/ML tools, categorizing a curated gist of open-source projects and resources. It shows a network of interconnected nodes representing tools like Ollama, vLLM, and LangChain, grouped by categories such as SDKs, agents, and model hosting. Built with React and WebGL, the visualization uses a graph layout to display relationships and hierarchies, with the plain-text markdown content from the source gist serving as the underlying dataset. The interactive scene allows users to explore the tool ecosystem directly within the browser.

Oct 20, 2025

Loading thumbnail…

Gist 34f3e588a35b33357c08853c2370036b

This visualization catalogs AI tools and resources, organizing hundreds of links to libraries and APIs for foundation models, model development, vector databases, and multimodal systems. The layout groups entries by category—such as OpenAI function calling, Microsoft’s BitNet framework, and Hugging Face collections—using a hierarchical list format. It references tools like LM Studio for local deployment, Pyannote for speaker diarization, and Edge-TTS for text-to-speech, with GitHub repositories and documentation pages as primary sources. The rendering relies on standard Markdown headers and hyperlinks to create a browsable, text-based reference.

Sep 1, 2025

Loading thumbnail…

vibeCoding

This React application demonstrates the power of vibe coding, an approach where developers leverage AI tools to generate and refine code through conversational prompts. The interface presents a three-column layout showcasing key components of this workflow: a collaborative chat interface in the center for issuing commands, a code editor panel on the right displaying live renderings, and a color-coded activity log on the left that visualizes the event stream. Built with React and styled using Tailwind CSS, the application uses useState for managing chat messages and activity entries, demonstrating state management and component-based architecture in a modern single-page application.

Aug 31, 2025

Loading thumbnail…

Anthropic OAuth CLI - Simplified Claude Code spoof demo

This demo shows a simplified Claude Code spoof that impersonates Anthropic's OAuth flow to harvest user authorization codes. The Python script defines an `AnthropicOAuth` class that generates PKCE challenges, constructs an authorization URL pointing to claude.ai, and exchanges returned codes for access and refresh tokens via the console.anthropic.com token endpoint. It uses the `requests` library for HTTP calls and stores credentials in a local JSON file with restricted permissions, mimicking legitimate CLI authentication behavior.

Jun 21, 2025

Loading thumbnail…

python teams_keeper.py

This example shows a Microsoft Teams activity keeper that prevents the user’s status from switching to “away” by simulating small mouse movements at regular intervals. The tool runs a background thread using Python’s `threading` module, and it relies on `pyautogui` to nudge the cursor one pixel and back every four minutes by default. It also optionally registers a Ctrl+Shift+Q hotkey via the `keyboard` library to stop the process, while printing timestamped confirmation messages to the console.

May 28, 2025

Loading thumbnail…

gitlab_events

This example visualizes the activity timeline of a GitLab issue by combining comments, milestone changes, label updates, and state events into a single chronological feed. It uses the `python-gitlab` API client to fetch notes and resource events from a specified project issue, then sorts them by timestamp. The code demonstrates how to collect heterogeneous event types, parse ISO 8601 timestamps into local time with `datetime`, and structure the data for display, showing the full history of an issue's lifecycle.

May 7, 2025

Loading thumbnail…

Manus tools and prompts

This visualization maps the structure of Manus, an AI agent, by displaying its system prompt, tool definitions, and configuration files as interconnected nodes in a network graph. Built with React, it uses a force-directed layout to position elements and color-coding to distinguish between files, message tools, and programming utilities. The interface allows viewers to explore how the agent’s core instructions relate to its available functions, with tooltips revealing the underlying JSON schema for each node.

Mar 29, 2025

Loading thumbnail…

ReadBigCsvFile

This example shows how to process and split a large CSV file into daily chunks by grouping rows based on a datetime column. It uses pandas’ `read_csv` with `chunksize` to load data incrementally, then applies `Grouper` with a daily frequency to partition each chunk. The multiprocessing variant uses `ProcessPoolExecutor` and a dedicated writer `Process` that receives grouped data via a `Queue` for concurrent file output. All writes use `to_csv` with append mode, preserving existing files and headers across runs.

Jan 20, 2025

Loading thumbnail…

https://jsfiddle.net/developit/q435c6mL/

This example implements a live DOM audit logger that intercepts and records modifications to page elements as they occur. It demonstrates real-time logging of property changes (textContent, innerHTML, className) and node insertions/removals, displaying a formatted trail of each operation with previous and current values. The visualization uses the DOMAuditLogger library, which patches native Element and Node prototype methods to capture events, and renders the audit entries in a scrolling view with color-coded message types.

Jan 13, 2025

Loading thumbnail…

Setting up a local only LLM (Qwen/Llama3/etc.) on macOS with Ollama, Continue and VSCode

This example demonstrates a practical setup for running local-only LLMs on macOS, combining Ollama to manage and serve models like Qwen2.5-Coder and Llama3.1, with Continue as a VSCode extension to integrate them into the editor. The configuration file (`config.json`) shows explicit API endpoints at `http://localhost:11434`, model selections, and disablement of anonymous telemetry. The code relies on Ollama’s command-line interface and Continue’s JSON schema to define autocomplete, custom commands, and documentation sources, illustrating a fully offline workflow for coding assistance.

Nov 18, 2024

Loading thumbnail…

Building an offline realtime sync engine

This React-based example compiles a curated reference list for building offline and realtime sync systems for web apps. It opens by framing the problem and then categorizes resources into overview articles, industry case studies from Figma and Linear, and off-the-shelf solutions. The text highlights concrete technologies like CouchDB, PouchDB, RxDB, and Electric SQL, using Markdown files as the data source to present a structured, textual overview of available tools and architectural approaches.

Nov 14, 2024

Loading thumbnail…

monitor threads in python

This example monitors the runtime behavior of threads in a Python application. It periodically displays the number of active threads, along with each thread's name, ID, and current call stack. The visualization uses the `sys._current_frames()` API to capture stack frames and `traceback.extract_stack()` to format them for logging. A daemon thread controls the monitoring loop, printing updates every five seconds using Python's `logging` module.

Oct 3, 2024

Loading thumbnail…

loop profile python

This example profiles Python loop performance over a list of 100,000 Pandas DataFrames. It uses `cProfile` and `pstats` to identify time-consuming functions, and `memory_profiler` plus `psutil` to measure memory usage. A custom `TimedIterator` class logs the execution time of each `__next__` call, while separate scripts compare simple `for` loops against explicit iterators. The visualization shows timing results in milliseconds and memory consumption in kilobytes and megabytes for both iteration techniques.

Oct 2, 2024

Loading thumbnail…

Gist 25342708e9edeb5099b496447772d743

The visualization shows a technique for analyzing log files by measuring time gaps between consecutive timestamped entries. It uses Python’s `datetime.strptime` to parse timestamps from `"YYYY-MM-DD HH:MM:SS.mmm"` formats and calculates differences in milliseconds, flagging intervals exceeding 10 ms. The code filters log lines by keyword using standard file I/O operations and prints matching entries, or reads all lines from a file to identify timing anomalies. This example demonstrates text-based log inspection rather than graphical rendering, relying on Python console output for insights.

Oct 1, 2024

Loading thumbnail…

multiprocessing

This example demonstrates a multiprocessing pipeline where eight producer processes concurrently process one hundred documents from a shared task queue, while the main process consumes and prints the results. The code uses Python's `multiprocessing` module, specifically the `Process`, `Queue`, and `join()` APIs to coordinate work and synchronization. Each producer pulls documents, simulates variable processing time with `time.sleep` and `random.uniform`, and pushes results to a separate result queue. The consumer function tracks completion until all documents are processed, illustrating a classic producer-consumer pattern with sentinel values to terminate workers.

Sep 27, 2024

Loading thumbnail…

Progressive Delivery - Essential Resources

This example visualizes the relationships between videos in Dave Karow’s four-part series on Progressive Delivery, mapping each talk as a node. The graph uses a force-directed layout powered by `d3.forceSimulation`, with links styled via SVG paths. Node labels and hyperlinks connect to the original YouTube sources, and the layout is computed using D3’s `forceSimulation` API with `d3.forceLink` for edges. The data is parsed from the provided markdown file, extracting titles and URLs. The visualization emphasizes the conceptual flow from foundational concepts to shades of delivery.

Jul 5, 2024

Loading thumbnail…

How to integrate into the esbuild wasm file system built into the package. Think esbuild-wasm-fs

This example demonstrates a browser-based file system hack for the esbuild-wasm package, enabling it to read and write files in memory. It implements a virtual filesystem using Node.js `fs` APIs, including file handles, metadata, and directory structures. The code intercepts esbuild's internal `fs.writeSync` and `fs.read` calls to route file operations through a custom `FS` object, allowing the bundler to process input files and analyze their sizes. It uses TypeScript and relies on the `decode` and `encode` utilities to handle file content.

Jun 24, 2024

Loading thumbnail…

Interviewing for Jobs in Tech: a Reading List

This gallery item presents a curated reading list for tech job interviews, sourced from a GitHub gist by Jastor11. It organizes resources into four categories: behavioral questions, negotiation tactics, coding challenges, and system design. The visualization uses a simple HTML list structure, linking to external articles and videos like Neetcode and the STAR method guide, with brief annotations explaining each resource’s value. The layout prioritizes clarity over interactivity, presenting the data as a static, text-based reference.

May 28, 2024

Loading thumbnail…

Research patterns for finding information online

This example maps a decision tree for accessing paywalled or restricted research information. It presents a flowchart with a starting question about plain-text access, branching to external services like the Wayback Machine, archive.is, Library Genesis, Bing’s cached pages, and Sci-Hub, the last requiring a DOI via Crossref search. The visualization is built using Mermaid’s graph syntax with embedded HTML hyperlinks in node labels. The graph clearly shows alternative retrieval routes while the accompanying text warns about legal and ethical considerations for reuse.

Apr 13, 2024

Loading thumbnail…

A multi-purpose alert/confirm/prompt replacement built with shadcn/ui AlertDialog components.

This example demonstrates a reusable dialog system that replaces native alert, confirm, and prompt functions with promise-based APIs. It provides `useAlert`, `useConfirm`, and `usePrompt` hooks that return resolved values—booleans or strings—when the user interacts with the dialog. The implementation uses React’s Context API, `useReducer`, and `useRef` to manage state across an `AlertDialogProvider` component. The UI is built with shadcn/ui’s `AlertDialog`, `Button`, and `Input` components, all rendered inside a form that submits to close the dialog and resolve the pending promise.

Apr 2, 2023

Loading thumbnail…

custom-easing.ts - a set of easing functions that generate arrays of tweens/frames; when placed in an animation framework/library they emulate animations using said easing function. Since, the easing frames can be placed are generated on initial run and almost every conventional animation library/framework supports multiple animation frames, you get great performance together with even better support.

This example shows a suite of customizable easing functions that generate precomputed animation frames, which can be plugged into any animation library for smooth, performant transitions. It implements traditional easings like Quad, Elastic, Spring, and Bounce, alongside a Bézier curve-based easing function adapted from `bezier-easing`. The code precomputes animation frames based on easing parameters, caching optimal durations for spring effects. It also demonstrates cross-environment utilities for server-side rendering, including browser object abstraction and CSS value parsing with unit and color conversion.

Jan 20, 2022

Loading thumbnail…

A seed file for the Rate My Setup application

This seed file for the Rate My Setup application populates a PostgreSQL database with initial user, post, and rating records. It demonstrates structured SQL `INSERT` statements that define three user accounts with hashed passwords, two image posts with Unsplash URLs and captions, and three numeric ratings linking specific users to posts. The example showcases the database schema underlying the application's data model.

May 27, 2021

Loading thumbnail…

Gist 43d5f0151f0331137a2d258ba06dfa0c

This interactive visualization renders the free-programming-books.md index as a three-dimensional WebGL scene using React and Three.js. The list of programming languages and topics is displayed as floating text nodes in a 3D space, allowing users to explore the hierarchical structure of the book collection. The code utilizes the react-three-fiber library to manage the WebGL canvas, with camera controls for navigation and a starfield background to enhance depth perception. The visualization provides an immersive way to browse the extensive index of free programming resources.

Apr 18, 2021

Loading thumbnail…

docker compose for timescaledb and postgresql-adaptor

This example shows a Docker Compose setup that runs TimescaleDB and the Timescale Prometheus adapter as two linked services for time-series data storage and querying. The YAML configuration defines a `timescaledb` service using the `timescale/timescaledb:latest-pg12` image with host path mapping to `/data/timescaledb`, and a `prometheus_postgresql_adapter` service using `timescale/timescale-prometheus:latest` that connects to the database via environment variables. Port mappings expose PostgreSQL on 5432 and the adapter's telemetry endpoint on 9201. The adapter is configured with retry logic and debug logging through `TS_PROM_` prefixed environment variables.

May 6, 2020

Loading thumbnail…

A template to make good README.md

This example presents a markdown template designed for creating standardized project documentation, specifically a README file. It demonstrates the structure and conventional sections that should be included, such as prerequisites, installation instructions, and test-running procedures. The template is a plain text file that serves as a guide, and its rendering in a gallery context would highlight the logical flow and formatting conventions. The code provides a clear, pre-defined framework that users can copy and adapt for their own projects.

May 26, 2018

Loading thumbnail…

fresh block

This example shows a simple bar chart with five blue rectangles arranged horizontally, where each bar’s height corresponds to a value in a small hardcoded array. The chart uses SVG rectangles bound to the data via d3.v4’s selection.data, with x positions computed from an index and y positions derived from a fixed chart height minus each bar’s value. The code sets width, height, fill, and stroke attributes directly on the rect elements, producing a basic static visualization without axes or labels.

Aug 9, 2017

Loading thumbnail…

Gist 6b70052296ccf0ebf338143509429d64

This example simulates a simplified Facebook-like social network in Ruby, using a `User` class to model profiles, friendships, and wall posts. The code defines methods for adding friends and posting content to another user’s wall, checking friendship status before allowing a post, and initializing two user objects with sample data. It uses the `pry` debugging library via `binding.pry` to pause execution and allow interactive inspection of the state, with no graphical output or external visualization library.

Jul 14, 2016

Loading thumbnail…

Gist 384c1abad76524c5baaf3d34988e7bed

This example maps ZIP codes to the congressional districts they overlap, using output from the Sunlight Foundation Congress API. The script `get_multi_state_zips.py` sends HTTP requests via the `requests` library, querying the API for each ZIP code in a hardcoded list. The resulting output shows that many ZIP codes span two states, with each state and district number listed for every ZIP. The visualization highlights how geographic boundaries and congressional districts do not always align, revealing the complex, multi-state nature of these postal regions.

Oct 22, 2015

Loading thumbnail…

Astor's Portfolio

This example presents a personal portfolio website for Jeff Astor, featuring a single-page layout with a navigation header linking to Home, About, Portfolio, and Contact sections. The page currently displays a hero image placeholder and an empty image tag, with no content yet populated in the main sections. The code uses standard HTML5 and CSS3, with a top navigation bar styled using a linear gradient (`background: linear-gradient(white, #19B5FE, white)`) and absolute positioning. The header employs a logo and a horizontal list-based menu, with CSS selectors like `.topnav a` and `.nav-list ul li` controlling link styling and layout.

Aug 18, 2015

Loading thumbnail…

Bret Victor’s Reading List

This visualization presents Bret Victor’s curated reading list as a hierarchical tree, categorizing recommendations into Design, Engineering, and Society. The data is parsed from the plain-text Markdown file, with starred items (including the rare six-star entries) highlighted through visual emphasis. The layout uses a radial tree structure, rendered with SVG paths and circles. The code employs the `d3.forceSimulation` API to position nodes and `d3.hierarchy` for tree layout, with labels shown in a readable font.

Apr 13, 2014

Loading thumbnail…

Hidden classes in JavaScript and Inline Caching

This example illustrates how the V8 JavaScript engine optimizes object property access through hidden classes and inline caching, using a Person constructor with `firstName` and `lastName` properties. The visualization shows the creation of hidden classes (C0, C1, C2) as objects are initialized, and demonstrates how adding an `age` property changes the class chain. It also depicts assembly-level code snippets showing how V8 replaces a call to the Inline Cache with a direct memory address for a ~20x speed improvement, and explains when deoptimizations occur. The source is a Markdown document from a gist by Jastor11.

Mar 12, 2014