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.