We need visual programming. No, not like that

1. gtoolkit

   1 41 1,524 9.7 Smalltalk

   Glamorous Toolkit is the Moldable Development Environment. It empowers you to make systems explainable through contextual micro tools.

   

   I find it quite interesting that every single one of the comments so far is addressing the title, not the article. (Even though the title explicitly warns against doing so!)

   The kinds of visualisation discussed by the article remind me very strongly of Glamorous Toolkit [0], most recently posted to HN at [1]. It’s something I’ve never really felt a need for, mostly because the software I work on is mostly very small in terms of code size (for physics research etc.). The idea is certainly fascinating, however… there are a lot of possibilities for a codebase which can introspect itself.

   [0] https://gtoolkit.com/

   [1] https://news.ycombinator.com/item?id=33267518

2. SaaSHub

   www.saashub.com featured

   SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives

   

3. nodezator

   2 26 2,770 3.9 Python

   A generalist Python node editor

   

   (this is something of a re-hash of a post I've made in various forms in the past)

   https://news.ycombinator.com/item?id=40905276

   The first problem here is that there doesn't seem to be an agreed-upon answer to the question:

   >What does an algorithm look like?

   The other issue is one of scale and representation --- this can work well for a problem which can be described in a single screen --- but it breaks down when a problem is more complex than what can be easily shown at a single showing.

   If one then tries to modularize the code and use it be reference you wind up with the sort of wall-of-text which presumably one was trying to get away from --- only wrapped up in pretty boxes, possibly with lines.

   Two pages with cautionary images which bear consideration:

   https://blueprintsfromhell.tumblr.com/

   and

   https://scriptsofanotherdimension.tumblr.com/

   That said, I've been dreaming of tools like this since reading Herman Hesse's _The Glass Bead Game_, and find that their discoverability and the shielding from syntax errors are a big help, to me at least.

   I've been funding one promising tool for a while now: https://nodezator.com/ and would be very glad to know of more tools in this space.

4. cursorless

   3 27 1,325 9.5 TypeScript

   Don't let the cursor slow you down

   

   Give cursorless a try. Although they mostly show off the voice recognition, it has a keyboard interface too.

   It lets you edit with high-level commands like "swap argument a with b", or "move function x before function y".

   https://www.cursorless.org/

5. callstacking-rails

   4 6 39 7.7 Ruby

   Rails client for Call Stacking - your insurance policy for tracking down those hard-to-find production bugs.

   

   We need to see the code paths that were executed for a certain request/feature/transaction.

   I created Call Stacking for this visualization.

   https://callstacking.com/

6. visual-programming-codex

   5 8 1,483 4.9

   Waypoints to the past and future of visual programming.

   

   The Whole Code Catalog [1] and Ivan Reese's Visual Programming Codex [2] are great resources in the area.

   I also have to mention, despite the awful name, Flowgorithm is an EXCELLENT tool for teaching the fundamentals of procedural thinking. [3] One neat thing is you can switch between the flow chart view and the script code view in something like 35 different languages natively (or make your own plugin to convert it to your language of choice!)

   p.s. If you are used to regular coding, Grasshopper will drive you absolutely freaking bonkers at first, but once you square that it is looping but you have to let the whole program complete before seeing the result, you'll get used to it.

   [0] https://global.discourse-cdn.com/mcneel/uploads/default/orig...

   [1] https://futureofcoding.org/catalog/

   [2] https://github.com/ivanreese/visual-programming-codex

   [3] http://flowgorithm.org/

7. dot-and-box

   6 4 7 7.2 TypeScript

   allows drawing dots and boxes and do simple step based animations

   

   I've done my own "try to animate things with mermaid like lang" https://github.com/dot-and-box/dot-and-box

   and got one conclusion similar to article's author as I understand it:

8. tlsd

   7 4 74 0.0 Python

   Generate (message) sequence diagrams from TLA+ state traces

   

   Sequence diagrames (that seems not much different swimlane diagrams) are great, so much so that I created a tool that generates them from appropriately built TLA+ specs representing message exchange scenarios: https://github.com/eras/tlsd

   However, while they are good for representing scenarios, they are not that good for specifying functionality. You can easily represent the one golden path in the system, but if you need to start representing errors or diverging paths, you probably end up needing multiple diagrams, and if you need multiple diagrams, then how do you know if you have enough diagrams to fully specify the functionality?

   > The protocol is complicated enough for me to think that the diagrams are the source of truth of the protocol. In other words, I'd venture to say that if an implementation of the Double Rachet algorithm ever does something that doesn't match the diagrams, it is more likely it is the code that is wrong than vice-versa.

   I would believe the latter statement, but I wouldn't say the first statement is that said in other words, so I don't believe this is the correct conclusion.

   My conclusion would be that diagrams are great way to visualize the truth of the protocol, but they are not a good way to be the source of truth: they should be generated from a more versatile (and formal) source truth.

9. vite

   8 946 81,131 9.9 TypeScript

   Next generation frontend tooling. It's fast!

   

   TypeScript compiler is too slow for instant reloads so it’s used only for IDEs. During development, all transformation happens via esbuild/swc and is abstracted away with Vite https://vitejs.dev/

   Our front end is ~200k LOC if typescript and all changes are instant (<1s).

10. raycasting

    9 1 13 4.1 HTML

    You are looking for https://github.com/tsoding/koil (by tsoding)

    

11. Sourcetrail

    10 1 226 7.5 C++

    Sourcetrail - free and open-source interactive source explorer (by OpenSourceSourceTrail)

    

    This appears to be the only fork that's at least somewhat active: https://github.com/OpenSourceSourceTrail/Sourcetrail

    But overall, there is little activity in any of the forks, without anyone necessarily spearheading the effort: https://github.com/CoatiSoftware/Sourcetrail/forks?include=a...

12. Sourcetrail

    11 48 12,302 7.0 C++

    Discontinued Sourcetrail - free and open-source interactive source explorer

    

    This appears to be the only fork that's at least somewhat active: https://github.com/OpenSourceSourceTrail/Sourcetrail

    But overall, there is little activity in any of the forks, without anyone necessarily spearheading the effort: https://github.com/CoatiSoftware/Sourcetrail/forks?include=a...

13. openscad-graph-editor

    12 49 292 8.1 C#

    OpenSCAD Graph Editor

    

    I'd give a lot to have a graphical development environment which:

    - allowed drawing a user interface as naturally as I used to use Altsys Virtuoso (or Macromedia Freehand which I moved to when my Cube stopped working)

    - allowed programming the UI as naturally as HyperCard (and to a lesser extent Lisp) "clicked" for me

    - was as visual as Google's Blockly (which as BlockSCAD: https://www.blockscad3d.com/editor/ I've used a fair bit)

    - exposed variables in a mechanism like to OpenSCAD's Customizer: https://en.wikibooks.org/wiki/OpenSCAD_User_Manual/Customize...

    Currently plugging away with OpenSCAD Graph Editor: https://github.com/derkork/openscad-graph-editor but hoping that: http://nodezator.com/ will become a viable option (still a bit bummed that I rolled and crashed w/ https://ryven.org/ though in retrospect, maybe I should try to tie that latter in to: https://pythonscad.org/ )

14. Ryven

    13 17 4,088 4.8 Python

    Flow-based visual scripting for Python

    

    I'd give a lot to have a graphical development environment which:

    - allowed drawing a user interface as naturally as I used to use Altsys Virtuoso (or Macromedia Freehand which I moved to when my Cube stopped working)

    - allowed programming the UI as naturally as HyperCard (and to a lesser extent Lisp) "clicked" for me

    - was as visual as Google's Blockly (which as BlockSCAD: https://www.blockscad3d.com/editor/ I've used a fair bit)

    - exposed variables in a mechanism like to OpenSCAD's Customizer: https://en.wikibooks.org/wiki/OpenSCAD_User_Manual/Customize...

    Currently plugging away with OpenSCAD Graph Editor: https://github.com/derkork/openscad-graph-editor but hoping that: http://nodezator.com/ will become a viable option (still a bit bummed that I rolled and crashed w/ https://ryven.org/ though in retrospect, maybe I should try to tie that latter in to: https://pythonscad.org/ )

15. mljar-supervised

    14 56 3,265 7.0 Python

    Python package for AutoML on Tabular Data with Feature Engineering, Hyper-Parameters Tuning, Explanations and Automatic Documentation

    

    I'm working on visual programming for Python. I created an Python editor, that is notebook based (similar to Jupyter) but each cell code in the notebook has graphical user interface. In this GUI you can select your code recipe, a simple code step, for example here is a recipe to list files in the directory https://mljar.com/docs/python-list-files-in-directory/ - you fill the UI and the code is generated. You can execute code cells in the top to bottom manner. In this approach you can click Python code. If you can't find UI with recipe, then you can ask AI assistant (running Llama3 with Ollama) or write custom python code. The app is called MLJAR Studio and it is a desktop based application, so all computations are running on your machine. You can read more on my website https://mljar.com

16. code-charter

    15 2 32 8.6 TypeScript

    Visual summaries for code repositories

    

    This article really hits home for me. I've been working on a tool called Code Charter, which aims to do exactly what you're advocating for: provide visual representations of code that make it easier to understand.

    I'm taking a slightly different approach than some of the tools mentioned here. Code Charter focuses on distilling key patterns in code, creating a semantic map for call graphs in a codebase. This is useful for understanding the architecture of a project and, during development, for moving between the high level and the implementation code.

    It is still in development and will be released soon as an extension for VSCode.

    Check it out if you're interested: https://github.com/CRJFisher/code-charter

17. rivet

    16 11 4,599 8.1 TypeScript

    The open-source visual AI programming environment and TypeScript library (by Ironclad)

    

    I've fallen in absolute love with the visual programming of Rivet, which compiles to JavaScript and can be run with Node. It's absolutely amazing, and it incorporates AI logic directly into it. I highly recommend it.

    https://rivet.ironcladapp.com/

Suggest a related project