1. 32

These images bear witness to the passionate work of so many people striving to improve programming.

An impressive collection of user interfaces for programming.

  1.  

  2. 5

    Slide 42 figure 6’s Representation of a break statement (Greenfoot, 2006) is really intriguing as an example of use of color and graphics to make it much easier to spot potential problems cleanly. Has anyone seen a plugin for Vim which can do something like this, either for C or for any langserver backend? While C macros might make it awkward, there’s some codebases (and a few security-critical bugs) which would benefit from being able to have this sort of view while looking at them.

    1. 5

      Seriously? Where is emacs?

      1. 1

        It’s still recovering from Kyle Machulis’s loving.

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

        1. 1

          Hold up! This is a gallery of IDEs, not OSs :)

        2. 4

          Lacking oberon and plan9.

          1. 3

            Yes I also noticed that.

            As of Plan9 one should distinguish Acme, Sam and the rest of the operating system which is a ide in itself, though.

          2. 3

            How could they leave out Interface Builder? Perhaps one of the longest lived UI builders still in wide usage.

            1. 3

              I developed this visual PostScript programming interface for the NeWS window system:

              The Shape of PSIBER Space: PostScript Interactive Bug Eradication Routines — October 1989 Written by Don Hopkins, October 1989.

              The PSIBER Space Deck is an interactive visual user interface to a graphical programming environment, the NeWS window system. It lets you display, manipulate, and navigate the data structures, programs, and processes living in the virtual memory space of NeWS. It is useful as a debugging tool, and as a hands on way to learn about programming in PostScript and NeWS.

              https://medium.com/@donhopkins/the-shape-of-psiber-space-october-1989-19e2dfa4d91e

              I also had a great time working with Bounce aka Body Electric (developed at VPL for VR/Dataglove/MIDI/device control real time data flow programming.

              Bounce Stuff: Bounce is a real time visual data flow programming language, designed to create interactive graphical simulations, and to filter and control midi, serial, ethernet, and other devices.

              https://medium.com/@donhopkins/bounce-stuff-8310551a96e3

              Definitely check out “Snap!”, which is a wonderful visual block programming language like Scratch, implemented in JavaScript so it runs in the browser, with everything that’s important about Scheme, including first class functions, visual lexical closures, user defined blocks and control structures, special forms and macros, and even continuation!

              https://snap.berkeley.edu

              Also, Alan Kay just sent me the Fabrik paper which I had never seen before, and also pointed out some influential work was a precursor to drag and drop programming:

              http://donhopkins.com/home/Fabrik%20PE%20paper.pdf

              Thank you! I remember hearing the name Fabrik mentioned somewhere, but never found much to read about it so I don’t know much about it.

              I’ll read up on it and integrate it into my articles!

              Pie Menus: A 30 Year Retrospective

              https://medium.com/@donhopkins/pie-menus-936fed383ff1

              SimCity, Cellular Automata, and Happy Tool for HyperLook (nee HyperNeWS (nee GoodNeWS)): HyperLook was like HyperCard for NeWS, with PostScript graphics and scripting plus networking. Here are three unique and wacky examples that plug together to show what HyperNeWS was all about, and where we could go in the future!

              https://medium.com/@donhopkins/hyperlook-nee-hypernews-nee-goodnews-99f411e58ce4

              I really enjoyed this paper “A Taxonomy of Simulation Software: A work in progress” from Learning Technology Review by Kurt Schmucker at Apple. It covered many of my favorite systems.

              http://donhopkins.com/home/documents/taxonomy.pdf

              It reminds me of the much more modern an comprehensive “Gadget Background Survey” that Chaim did at HARC, which includes your favorites Rockey’s Boots and Robot Odyssey, and his amazing SimCity Reverse Diagrams and lots of great stuff I’d never seen before:

              http://chaim.io/download/Gingold%20(2017)%20Gadget%20(1)%20Survey.pdf

              I’ve also been greatly inspired by the systems described in the classic books “Visual Programming” by Nan C Shu, and “Watch What I Do: Programming by Demonstration” edited by Alan Cypher.

              Brad Myers wrote several articles in that about his stuff, like Peridot and Garnet (which I briefly worked on with him at CMU, and was very cool, but needed a bit more right brain graphic design if you know what I mean ;). To paraphrase Rumsfeld, “As you know, you go to screen with the graphics API you have, not the graphics API you might want or wish to have at a later time.”

              https://medium.com/@donhopkins/constraints-and-prototypes-in-garnet-and-laszlo-84533c49c548

              Here is another great comprehensive collection from 2014 by Eric Hosick of visual programming language screen shots and links:

              http://blog.interfacevision.com/design/design-visual-progarmming-languages-snapshots/

              And Alan Kay mentioned that this cool “Let’s Build a Halftime Show” parade programming scene from Thinkin’ Things was a precursor for drag and drop programming:

              “Two precursors for DnD programming were in my grad student’s – Mike Travers – MIT thesis (not quite the same idea), and in the “Thinking Things” parade programming system (again, just individual symbol blocks rather than expressions).”

              There’s a great demo of Thinkin’ Things on youtube!

              Thinkin’ Things Collection 3 Gameplay

              https://youtu.be/gCFNUc10Vu8?t=24m58s

              Here’s info about Mike Travers’ thesis:

              http://alumni.media.mit.edu/~mt/

              http://worrydream.com/refs/Travers%20-%20Recursive%20Interfaces%20for%20Reactive%20Objects.pdf

              Oh my, I popped up a level and discovered that there’s a whole lot of cool stuff in Brett Victor’s worrydream refs directory!

              http://worrydream.com/refs/

              That directory is a treasure trove! Lots of amazing historical stuff I’ve never seen before, like this:

              Interaction at Lincoln Laboratory in the 1960’s: Looking Forward – Looking Back

              http://worrydream.com/refs/Buxton%20-%20Interaction%20at%20Lincoln%20Laboratory%20in%20the%201960.pdf

              Down the rabbit hole!

              1. 2

                missing (and own horn tooting): https://github.com/letoram/senseye/wiki

                1. 2

                  I am amazed at how many there are.

                  1. 2

                    With all those visual languages I’d never heard of, I guess I shouldn’t be surprised that they missed Clarity and Marten… and who knows how many others.

                    1. 2

                      Does anyone else think that the very first and very last frames seem like the same thing? We started with connecting cables into sockets and now we have IDEs that have 3d rendering capabilities and they are rendering cables… being put into sockets…

                      Progress is weird.

                      It makes me wonder what would happen if we took the block based ones and 3d printed them all, and then physically built programs with our hands in a large warehouse with ladders and scaffolding. Compilation would be hard.

                      I also feel like coding is a dynamic thing that is constantly in motion, and a graphically rendered IDE that simply tries to represent a static snapshot like a normal programming language is wasting the potential of graphical rendering. I would go for a 3d rendered debugger that tries to represent the running program in space and shows flow with brightly coloured moving lights.

                      1. 1

                        Feeling nostalgic for Yahoo! Pipes. :,-)

                        1. 1

                          There was decent discussion on this from jonathan edward’s initial tweet for this last year: https://twitter.com/jonathoda/status/859106006504177664

                          Swear there was also a related HN discussion but can’t find it.