Prior art for See It

image

Cellpond

“i can See It”

image

https://www.youtube.com/live/cBYudbaqHAk?si=MjZEz_TREL6DWtzX&t=7631

image

image

Chrome step debugger

https://developer.chrome.com/docs/devtools/javascript

image

image

we can do better!

^ this is a controversial opinion

Flowistry

https://github.com/willcrichton/flowistry

In focus mode, Flowistry will automatically compute the information flow within a given function once you put your cursor there.

image

Video scrubber

image

Replay

https://www.replay.io/

image

image

Seymour: Live Programming for the Classroom

https://harc.github.io/seymour-live2017/

image

image

Visualising Sorting Algorithms

https://corte.si/posts/code/visualisingsorting/

image

image

Bubble Sort - An explorable explanation & introduction to algorithms

http://glench.com/BubbleSort/

image

image

Sorting algorithm visualisations moodboard

by Marcel Goethals

image

image

https://corte.si/posts/code/visualisingsorting/

tldraw

https://www.tldraw.com/

image

image

Visual overview of a custom malloc() implementation

https://silent-tower.net/projects/visual-overview-malloc

image

image

Silly Seet

https://futureofcoding.slack.com/archives/C03RR0W5DGC/p1707432918721889

image

image

image

image

image

image

Hand-made contraptions

https://www.youtube.com/watch?v=vo8izCKHiF0

https://www.youtube.com/watch?v=E3keLeMwfHY

image

image

image

Defragmenting

image

image

Visualizing the Java heap to detect memory problems

The default display has the tree rooted at the left to growing toward the right, as shown in Figure 1. This figure shows the memory usage of a multi-body simulation program using Barnes-Hut. Each block in the diagram contains information as detailed in Figure 2. Vertical size is used to represent the amount of memory owned by the class. The children of a node are displayed to its right starting at the top, and are ordered from top to bottom by the amount of memory they own. This make it easy for the user to see where memory is being used in the application and to follow the ownership relation for a particular class. Moreover, each class has a gap on the right at the bottom of its display that represents the storage used just for theobjects of that class. For simple classes like String, this shows the overhead inherent in the String object as opposed to its char array contents. Next, we color the nodes based on the fraction of memory that the objects of that class actually occupy disregarding ownership. Here we use a scale that goes from green to red where red represents the class with the largest local memory usage. We also vary the intensity of the color of a node based on the fraction of the memory that it represents. This means that nodes that are replicated due to the conversion from a graph to a tree are shown in a lighter shade, with the actual shade being dependent on the amount of duplication

https://www.researchgate.net/publication/221193019_Visualizing_the_Java_heap_to_detect_memory_problems

image

image

Hard drive noises

https://discord.com/channels/721409715602587698/1187501380999581757/1197975927003562136

image

image

image

Self-hosted Dynamicland

https://discord.com/channels/721409715602587698/1187501380999581757/1198052132402778273

image

image

Playable Quotes for Game Boy Games

https://www.youtube.com/watch?v=z9JYOZWLMlo

image

image

Observable

https://observablehq.com/

image

image

Lambdu

https://www.lamdu.org/

image

image

Flowsheets

https://www.youtube.com/watch?v=y1Ca5czOY7Q

image

image

Tangible Functional Programming

http://conal.net/papers/Eros/

image

Subtext

https://www.subtext-lang.org/

image

PANE

https://joshuahhh.com/projects/pane/

image

image

This class that Joshua Horowitz was in

https://discord.com/channels/721409715602587698/1187501380999581757/1199064849745981440

image

image

Core war

https://en.wikipedia.org/wiki/Core_War

At the beginning of a game, each battle program is loaded into memory at a random location, after which each program executes one instruction in turn. The goal of the game is to cause the processes of opposing programs to terminate (which happens if they execute an invalid instruction), leaving the victorious program in sole possession of the machine.

image

image

Python Tutor

https://pythontutor.com/

image

image

Bluefish

https://bluefishjs.org/

image

image

ML debugging example

https://twitter.com/kipperrii/status/1750317027057893697

image

image

Untitled Comic Book Coding Environment

Marcel Goethals

https://elk.zone/mas.to/@wolkenmachine@mastodon.social/111795681494646518

image

image

Inventing on Principle

Bret Victor

https://vimeo.com/906418692

image

image

ZStep 95

https://web.media.mit.edu/~lieber/Lieberary/ZStep/ZStep-SoftViz/ZStep-SoftViz.html

image image

Memory Allocation

https://samwho.dev/memory-allocation/

image

image

image

Binary interactive explorable exploration

https://futureofcoding.slack.com/archives/C03RR0W5DGC/p1708448999666629

image

image


Back to the wikiblogarden.