Daily Learning Notes for June 26th, 2017

Goal for today: Finish creating all the flowcharts for my mob coding app!

Real-time notes

1:14pm: I finished the flowchart for the login process last Friday, so I’m picking up where I left off. And just like last Friday, today I’m off to a late start, feeling groggy after sleeping in late and fighting some anxiety. I also feel like I might be fighting a cold, but it’s too early to tell. All I want right now is to be able to focus, to lose track of time and get into the zone so I can get a break from all the other thoughts racing through my mind today. I know I’ll be taking a lunch break soon, so it’ll be hard to gain any momentum right now. Somehow I spent the whole morning just catching up on a few emails and meetup event updates and messages. It’s definitely another slow Monday for me, but at least I know from previous Mondays that things might pick up by tomorrow. All I have to do is start, and then just keep trying.

Anyway, let’s see where I left off… Right, that handleUserLogin method! What does that do, again?

1:43pm: Not sure how it’s been 30 minutes already! Well, I’m still struggling to put aside some anxious thoughts right now, but I did append some more steps to my previous flowchart: that handleUserLogin method updates the UI and then notifies the server, which does a bunch of stuff like updating the list of players, starting the turn timer if this is the start of a new turn, and sending some events to some clients and other events to all the clients. I’m not quite sure how to tame this code, but I know it could be organized better! I’ll just move on. It also seems like I might be skipping my lunch break today or taking a very late lunch break, since I’m not hungry anyway.

Ideas for code refactoring so far:

• Create a function for the server to handle updating the list of players.

• Create a function called startGame or similar!

• Question: Is it better to send multiple events, one for each small update or action, or is it better to send one event containing all the relevent updates and iterate through them to update each piece accordingly?

• Consolidate the “udpateState” and “playerListChange” events if possible!

• Also look into consolidating the “editorChange”, “changeScroll”, and “changeCursor” events if possible, maybe combining them with “updateState” and “playerListChange” into one function/event to intialize each new client.

• Rename “editorChange” or “changeScroll” and “changeCursor” for a consistent naming scheme!

• Maybe checking the state of the player list is a better condition for starting a new game, instead of checking if the turn timer exists. (It’s more intuitive that way!)

1:58pm: I just realized that I should be creating another condition in this flowchart, because there are conditional statements in my code here! Hmm. There is definitely an art to creating useful flowcharts, mostly because it’s hard to decide how much information to include in each step. What’s the right level of abstraction? If I automatically generated this chart from my code, it might be too detailed to be useful. Anyway, back to the task at hand. I’ll split up this next step into a condition leading to a couple different scenarios.

…

2:35pm: Back from a break to find out about some big news for my partner-in-crime, which I’m both very excited about but also super anxious about right now because of how it affects me! But I won’t dwell on that, because like I’ve said before, I want these notes to stay focused on learning. I’m only mentioning it because these big emotions are definitely affecting my ability to focus, and on very anxious days, I usually don’t manage to learn very much. I’m making a note of that because I hope to find a “cure” or at least better ways to work through it in the future. Anyway, I took a break to get a bite to eat because even though I’m not hungry, my whole body is shaking a little bit from the combination of anxiety, extra caffeine, and lack of food. I recognize this strong fight-or-flight response that I’m feeling right now; many times in the past, this feeling has led me to leave and stop working. I might still go for a long walk or meditate or something if the feeling lingers, but I want to try to push through it by just returning to what I was doing. Maybe I can find my focus again. (Although this little writing break might itself be a form of running away. Actually, no, it isn’t. I shouldn’t be too hard on myself. This is just for a few minutes. Taking a step back is not the same thing as running away.) OK, back to where I left off.

2:51pm: I just noticed an important limitation of this flowchart.js tool: except for conditions, each node can only point to one other node in the flowchart! It’s a one-to-many relationship. And it looks like conditions can only have two branches. So that definitely limits how I can structure these flowcharts. Maybe that’s by design? I wonder if that’s a formal rule for UML flowcharts.

3:27pm: I think I’m finally stuck, or I’ve finally reached the limits of what this flowchart can do! So I did some more digging for alternative solutions and found some more links that I may or may not come back to. Now I wish I had done more research on flowchart.js before I started using it, because I found some notes of its limitations in other places like this StackOverflow thread. Well, I may as well throw all my links in here while I’m at it!

More JavaScript diagramming libraries and tools

• mxGraph - This is the open-source JavaScript diagramming library that powers Draw.io, which I’ve yet to actually try!

• Mermaid - A Markdown-like lanugage for generating diagrams! It looks like it’s still being maintained, and there’s some documentation of the syntax, which is still better than flowchart.js!

• JointJS - “JavaScript diagramming library” that looks like it’s open-source, but with a commercial version built on top of it.

• jsPlumb - A library for creating interactive, visual web apps with a commercial toolkit that has some cool demos.

• Cytoscape.js - “Graph theory / network library for analysis and visualisation”

• node-plantuml - A Node package for running PlantUML, which is “an open-source tool allowing users to create UML diagrams from a plain text language”.

4:01pm: I spent a few minutes playing around with Draw.io and it works pretty well! It supports many-to-many relationships between nodes, drag-and-drop interaction, style formatting, and it exports to SVG! Maybe I should have just used that from the beginning? I’ll have to test it out a bit more to see if I want to actually use it, but this looks promising. Why did I let myself fall down that rabbit hole of generating my own flowchart diagrams, when all I wanted to do was sketch out the flow of my mob coding app? My real goal was to fix up the app and get it working! Instead, my goal shifted to yet another side project, just because I thought it was interesting, and I guess I wanted to procrastinate on my main goal for some reason. I think it’s just another symptom of anxiety. Anyway, I’m going to take a little break now I guess.

Next steps:

• Spend like 15 minutes testing out Draw.io, recreating my login flowchart, testing its import/export features, and see what the exported SVG looks like

• Finish the flowchart representing my mob coding app, maybe borrowing some ideas from UML activity diagrams

• Outline every piece of my app’s state and how/where the state changes, maybe borrowing from state diagrams (though I’m not sure how hard it would be to represent this app as an actual state machine!)

…

4:53pm: I took a long walk outside and talked to my dad for a while, catching up but also venting about my anxiety a bit. Sometimes that helps, so I figured I’d try it. Not sure if it helped or not, but I’m back now, so I’ll try to pick up where I left off again. I’ll listen to some electronic music and try out Draw.io for a little while, then see how I feel in another 15 or 20 minutes.

6:38pm: I finally got into the zone for a while and got a break from my thoughts. It only took all day long! Maybe all I needed was a walk and some more calories. I did spend way too much time playing with the formatting inside Draw.io, but it was very relaxing, like nerdy art therapy! I tested the SVG exporting and that seems to work just fine.

Updated flowchart for mob coding app login flow

I noticed another issue while recreating this flowchart, so I made some more changes:

More issues to look at when refactoring:

• I need to sort out the order of events that happen on the server after a user logs in! For example, updating the list of players should happen before the server initializes the turn timer, which should happen before the server sends the updated game state to all the players.

• I really need to take a closer look at the game state.

6:58pm: I’m feeling stuck and a bit overwhelmed again. I think I spent the last 20 minutes mostly just trying to catch my thoughts or slow them down while I feel all the physical symptoms of anxiety surging all over again. I made that list of next steps, so that should help me now. I finished the first step. Time to work on the next step: finishing this flowchart! Well, this is clearly taking a lot longer than I thought. I think I’ll try just sketching more pieces on paper to see just how much there is (and to try to fight my perfectionism).

7:35pm: Made a little progress and identified more issues:

• The client-side handleTurnChange function has some messy nested conditional statements, and I’m having trouble simplifying them! Looks like I need to check four things: is this client’s turn about to end? Does a Gist exist yet? Is the current player about to change? Has the gist been edited at lease once before?

• The forkAndEditGist function calls the editGist function because I’m relying on promises to chain them together, but maybe I can just call each function separately as needed, using async/await functions?

• Right now I’m using a global variable called gistNewlyCreated to track if the Gist has been edited at least once, but do I really need this? There must be a better solution!

• Change the names for handleNewCursorData, handleNewScrollData, handleEditorChange, as well as handleChangeCursor, handleChangeScroll, and handleUserTyping functions! They should be symmetrical! Maybe something like handleUser[EVENT] for local user input and handleServer[EVENT] for receiving the related SocketIO events.

• The server never emits the playerListChange and updateState events separately; they are only broadcasted together, and only in two places: when new users log in, and when users disconnect from the server. So I better consolidate these two events, along with the corresponding client-side functions that they trigger!

7:59pm: After digging into more branches of my code and adding to my flowchart both on paper and in Draw.io, I noticed another interesting new issue: starting the game sets off a chain of events that seems to lead to two duplicates of newGistLink being sent back to the server! Oh wait, never mind! One of those events will only fire once the turn timer goes off, which by definition only happens after a certain delay. So that’s probably OK. Interesting how flowcharts can potentially be misleading. It’s a bit difficult to show event-driven code that’s also dependent on previous events firing!

8:35pm: Almost done with the entire flowchart! I think I’ve covered every event and important branch of my code except for diagramming what happens when users disconnect from the server. (I purposefully didn’t include the little conditions that allow only the current player to type and broadcast from Ace Editor, because that section is simple and self-contained.) Time for a quick break.

9:36pm: I think I finally finished the flowchart! Now I’m just playing with the formatting to make it look nice, trying to strike a balance between using up all available space and avoiding overlapping lines. There must be an algorithm for this! (Another project idea for later.)

Complete flowchart for mob coding app

10:26pm: Got into the zone again, turning this into an art project now. It was relaxing. I think I may have hurt my right hand a bit, though! Too much mousing. Anyway, I saved a new copy of this version, exported it, ran it through the online SVGO optimizer tool (because SVGO messes up the custom fonts for some reason), and here’s my finished art project:

When I pick this up again tomorrow, I’ll check again to see if I covered all the important events and conditions, and then I’ll move on to outlining the game state and maybe making a state diagram to see how I can tame and consolidate this spaghetti code!

Gathering String

• Project idea: A web app that uses the GitHub API to teach people how to use Git and GitHub by simulating a collaborative project with a team of bots (using GitHub apps/integrations?) that make commits, issues, pull requests, etc!

• Project idea: (Just in case I forgot to write this down before) Using GitHub as a Learning Management System (LMS), creating issues dynamically, based on the users’ progress.

• Project idea: Play with creating algorithms for maximizing use of space for graphic design elements, lining things up, and making things look evenly spaced out and visually balanced.

---