Drawing graphs: live session by tangentstream

@tangentstream recorded a new live session. This time the focus was about drawing graphs. This session follows a recent stream about getting reacquainted with Glamorous Toolkit, and a conversation with me about reading the Glamorous Toolkit interface as a language.

Here are some notes about the 3h stream:

11:29: Starts with brainstorming about a class to hold the overall board. The considered names are BexDrawing and BexCanvas. These are related to the visual part. The alternative is to start from a domain concept and add the visual to it.

14:37: Creating the class inline works well. There is quite a bit of time spent on figuring out the state upfront. The alternative is to create the state as the logic requires it either from the inspector or from a debugger.

15:54: Aims to inspect a whole statement, but the class name is selected and when inspecting we see an inspector over the class object, instead of the instance. This leads to a bit of a confusion.

When in doubt, start by reading the UI from top to bottom.

17:42: Creates a method in a static class coder.

Instead: Aim to work in the inspector.

20:10: Eventually, unselecting the class name and inspecting again shows the instance of BexCanvas.

21:28: To edit the method name, he writes the name of the method in a snippet and expands it in place. Better alternatives would be to either use the Meta view, or to Alt+click on the view.

45:48: Tries to edit the superclass when the dialog is collapsed and this leads to spawning the superclass which appears confusing. Eventually figures out that expanding allows one to edit.

1:10:30: Restarts the image but the changes are missing. Does not know how to recover changes.

Use the Code changes tool instead.

1:38:21: Debugs the view by looking at the children tree of the element. Great!

1:39:47: Decides to use Mondrian.

1:42:07: Tries to commit, but the repository is detached (meaning that the version on the disk is newer than the version in the image).

1:45:40: Searches for "detached working".

Note: Add an explanation in the book for Detached Working Copy.

1:50:26: Eventually decides to create a new local repository and commits to that repository.

2:04:24: Discovers the Repair action, but even though it worked, it is still not clear what happens.

2:19:17: After a bit more work, the attention finally moves to drawing graphs. Starts with searching for examples. Great!

2:34:26: Tries to find his way through setting the background on a Mondrian drawing. The environment offers exceptions. He continues to learn from examples.

Instead: try to follow up with the debugger to learn about the types of objects involved and learn from their API.

2:40:58: After building an initial Mondrian view, the question is how to use the element.

Note: Write an explanation about views vs elements.

2:41:12: Decides to embed the visualization as an example snippet in the Lepiter page. Finds examples of how to add examples. Great!

2:45:49: Decides to replace the example snippet with an example annotation in a text snippet. Interesting.

2:48:13: "I do not know if this [stream] was kind of useful to anybody". It is certainly useful for us to learn what works and what does not work in the user experience.

Glamorous Toolkit covers a reasonably large space and it's a real challenge to help newcomers form a mental model of what is possible and how the environment should be exploited. Of course, the learning goes both ways. As Glamorous Toolkit is so open-ended, it is always educative to observe what people want to do with it.