Today I created a table of all the events being used in my mob coding app, had a nice lunch with my dad, fell down a rabbit hole reading about UML and tools to automatically generate diagrams from a simple application-specific language, went to a great tech talk event hosted at Disney, did some late-night coding with a friend, and generated my first flowchart from plain text using flowchart.js.
8:54am: I feel like I’m starting late today, considering how early I woke up! I think I was up at 6am, even though I didn’t go to sleep until almost 2am. Back to biphasic sleep, I guess! I splurged on one of those sea salt coffee drinks that people keep raving about, and I have to admit it lives up to the hype! I’m really enjoying this right now. Also becase it’s helping me stay awake. I want to get my event documentation and flowchart of the mob coding app done before I meet my dad for lunch at noon. I figure I’ll eat a lot and then take a long nap after that. As for the rest of the day, well, I can’t think that far ahead right now. Oh! But I need to send a couple quick emails first, before I forget.
9:47am: I also posted the next math study group meetup and chatted with a few people online and followed up on some other emails. But that’s it for today – no more emails! OK, where did I leave off last night… Right, time to finish an initial description of all the events in my mob coding app.
List of events in mob coding app
| Event Name | Description | Server Actions | Client Actions |
|---|---|---|---|
| connection | When client connects to SocketIO | Start the whole app! | Not used |
| disconnect | When a client disconnects from SocketIO |
Remove disconnected user from playerList. If no logged-in players are left, reset the game! If the disconnected user was the current player, restart timer and change the turn! Broadcast "updateState" to all other clients. Broadcast "playerListChange" to all other clients. |
Stop the timer view. |
| loggedIn | When server confirms a client is logged in |
Add user info to playerList. Send current state of the text editor to the new client, broadcasting "editorChange", "changeCursor", and "changeScroll" if needed. If first user, initialize the game! Broadcast "updateState" to all clients. Broadcast "playerListChange" to all clients. |
Upon successful GitHub authentication, send "loggedIn" event and user data to the server. |
| playerListChange | When server confirms a player has joined or left | Broadcast player list to clients, triggered by "loggedIn" and "disconnect" events. | Update UI for player list, current turn, and next turn. |
| updateState | When game state changes and clients need to be synced up | Broadcast game state to all clients, triggered by "loggedIn" and "disconnect" events. |
Update local state. Update UI for Gist link, highlighted player names, timer, current turn, and next turn. |
| turnChange | When the server's timer is up, pass control to the next player. | Broadcast turn data to all clients when the timer is up. |
Add user info to playerList. Fork/edit the Gist, which may broadcast "newGistLink" and update Gist UI if needed. Update local state. Toggle editor read-only mode. Update UI for highlighted player names, timer, current turn, and next turn. |
| createNewGist | When the game begins, create a new Gist on behalf of the first player. | Broadcast event to first player once logged in, if starting a new game. |
Create a Gist for the current user. Broadcast "newGistLink" to server. Update Gist UI. |
| newGistLink | When a new Gist is created or forked, sync up clients to display the new link. | Update game state and broadcast "newGistLink" to all other clients. | Update local state and update Gist UI. |
| Ace Editor: change | When a user types in the editor | Not used |
Update editor view with new content. Call "handleUserTyping" and send "editorChange" event with data to server. |
| Ace Editor: changeCursor | When a user moves the editor cursor | Not used |
Update cursor in editor view. Send "changeCursor" event with data to server. |
| Ace Editor: changeScrollLeft and changeScrollTop | When a user scrolls in the editor | Not used |
Update scroll position in editor view. Send "changeScroll" event with data to server. |
| editorChange | When a user types in the editor, sync the content across all clients. |
Update local state. Verify that the data was sent from the current user -- to prevent cheating! Broadcast "editorChange" with updated content to all other clients. |
Update editor view with new content. |
| changeCursor | When a user moves the editor cursor, sync across all clients. |
Update local state. Verify that the data was sent from the current user -- to prevent cheating! Broadcast "changeCursor" with updated content to all other clients. |
Update cursor in editor view. |
| changeScroll | When a user scrolls in the editor, sync across all clients. |
Update local state. Verify that the data was sent from the current user -- to prevent cheating! Broadcast "changeScroll" with updated content to all other clients. |
Update scroll position in editor view. |
11:32am: Working slowly, but I finally finished my list of events! Now I’m just fixing the HTML table formatting. There’s a weird bug I can’t find, so I’m going to run it through an HTML linter.
11:45am: Fixed it! The linter didn’t help, because I guess leaving out a <td> tag doesn’t necessarily make for invalid HTML. I wish I knew of a better way to catch bugs like this! Oh well. I need to leave for lunch soon, but first, I printed out a copy of the table above for quick reference. Now, time to run!
…
1:27pm: Back from a really nice lunch and conversation with my dad, plus we splurged (today is full of splurges!) on dessert. I had an amazing flourless chocolate walnut cookie with salted caramel gelato, which I felt compelled to share on Twitter just now:
I'm gonna be one of *those* people today and post a photo of my food. Flourless chocolate walnut cookie with salted caramel gelato! pic.twitter.com/Kcc9tkn1ZZ
— Liz Krane (@LearningNerd) June 22, 2017
1:45pm: Back again after a quick break to read my friend’s press release. I’m still not sure if it’s a secret or not but just in case, I’m going to wait before I mention any details! Anyway, somehow I need to get back to focusing on what I was working on but I don’t feel like I can focus, and I’m not sure when I should just give in and try to take a nap. There are lots of distractions here right now though. Putting on headphones, listening to some more electronic music. OK, how about I just try to focus for say 15 minutes and then see if I think I’m ready for a nap. What was I going to do next? Oh yeah, I wanted to sketch out what’s happening in my app! But I feel like I need to be in a more quiet place to do that. Should I move downstairs then? Hmm. I feel stuck. And a bit anxious too. I find my thoughts wandering to tonight’s event, which I sort of don’t want to go to, but I really shouldn’t cancel at the last minute. I guess I should check how long it’ll take to get there and decide if I’m going to drive there and what time I’ll need to leave. OK, driving makes no sense. I’ll take the Metro. Hmm, and if I take the Metro, maybe I’ll go a bit early and stop at that Peet’s Coffee and use one of my coupons for a free coffee! (With this biphasic sleep schedule, I can totally have a late afternoon coffee! Yay!) OK, that’s settled. I feel better. I need to leave at say 5:30pm and taking the Metro will probably take even less time than driving (and certainly less time than walking home to get my car and then driving). Back to looking at my code now.
2:07pm: This is proving difficult on paper. Paper is good for scribbling, but for the more permanent flowchart that I’d like to keep for reference (or possibly publish somewhere), I don’t think I want to spend the time required to make an art project out of it! My handwritten is terrible, I couldn’t draw a straight line if my life depended on it, and I know there are tools that already exist to solve this problem for me. I may as well start using them. Time for a little research!
Free flowchart and diagramming tools:
- Draw.io - Free online diagramming tool that saves everything to Dropbox (I couldn’t get it to work though!)
- LucidChart for education - Apparently it’s free with a university email address, and I already have an account associated with my school email!
- LibreOffice is free and open-source, and it has a nice program for drawing diagrams!
- I already have Microsoft PowerPoint, so that could work too.
- There are plenty of free trials for paid software, bleh!
2:26pm: I shouldn’t be surprised, but somehow I’m still amazed at how deep of a rabbit hole this is! I stumbled across UML again, which stands for Unified Modeling Language. The idea of writing plain text that can be instantly converted into a diagram that could be styled in different ways sounds downright sexy to me! I may as well have some fun digging into this for a bit.
Notes on UML
-
The Wikipedia page on UML has a very sexy definition: “a general-purpose, developmental, modeling language in the field of software engineering, that is intended to provide a standard way to visualize the design of a system.”
-
There’s an official UML.org website for the Object Management Group® (OMG®), which aside from having a hilarious and awesome acronym, is “an international, open membership, not-for-profit technology standards consortium.” I had no clue this existed!
-
There are two main types of diagrams: structural and behavioral. Structural diagrams include class diagrams, component diagrams, package diagrams and more. Behavioral diagrams are more familiar to me; they include sequence diagrams, state diagrams, use case diagrams, and more.
-
My heart skipped a beat when I discovered Wikipedia’s List of Unified Modeling Language Tools!
-
Looks like a sequence diagram would be perfect for representing my app, at least to some degree!
-
The logic of my app could be represented with an activity diagram, but a state diagram – more specifically a UML state machine diagram – would be even better because it’s specifically designed to visualize event-driven systems and state transitions!
-
I just remembered how enamored I am with finite state machines, ever since that first introductory electrical engineering class I took in college! Fun stuff!
-
ThingML is a cool modeling language for “distributed reactive systems”!
-
GraphViz is an open-source software tool for graph visualization!
-
yUML is an online tool for creating and publishing simple UML diagrams with a nice semi-hand-drawn look to them! (But they only support class and use case diagrams right now.)
-
WebSequenceDiagrams is a free online tool that converts plain text into nice sequence diagrams, also with that hand-drawn look!
-
flowchart.js and js-sequence-diagrams are two open-source JavaScript libraries that generate SVG diagrams from plain text. I especially love how the second one has that hand-drawn look, too!
-
Fun tangent: that js-sequence-diagrams library uses Jison, a “JavaScript parser generator”! I really want to play with parsers sometime soonish!
-
Another fun tangent: Vivus is a JavaScript library for animating SVGs to make them look like they’re being drawn!
I couldn’t help myself. I had to share a bit of this on Twitter right away:
Down a @Wikipedia rabbit hole. AWESOME: https://t.co/lTTH3jQX7A
— Liz Krane (@LearningNerd) June 22, 2017
And #TIL that UML is managed by OMG (the @ObjectMgmtGroup).
OMG UML, LOL!
3:20pm: After experimenting with some of those tools for a while, I think I’ve realized that a sequence diagram won’t really help me here. But I’m curious about using flowchart.js, especially if I can make the SVGs look hand-drawn – maybe I can use another tool like this RaphaelJS plugin called Handdrawn.js. I could’ve sworn there was another thing like that, but I can’t find it! Oh well. Since I’ve already fallen down this rabbit hole, I may as well have fun looking through the source code of js-sequence-diagrams to see if I can find out how they implement the hand-drawn theme.
3:33pm: Found it! They have just a little bit of code for both Raphaël (see source code here and Snap.svg (see source code here, so it shouldn’t be too hard to take some of that code and make it work with flowchart.js as a theme.
3:38pm: OK, I think it’s finally time for a nap. There’s a chance that all this exploration has just been a huge waste of time, haha. I dunno. I’m having fun and learning some new stuff though, so I guess that’s OK. My next step: test out flowchart.js locally, then try to add the hand-drawn theme to it, and learn how to use their syntax! That’s the one huge missing piece in all these tools I found recently: none of them do a good job of documenting their syntax! I guess it must be pretty limited. In any case, I can figure it out for myself.
…
6:30pm: That nap was amazing! Usually I wake up before my alarm (I’ve been giving myself 90 minutes), but this time I slept the entire time and passed out the minute I sat down. I woke up a lot of course, but I woke up feeling pretty refreshed. Right now I’m sitting in an Uber on the way to Disney for tonight’s event (a tech talk about coding and animation), because I got off the Metro at an earlier stop in the hopes of stopping at that Peet’s Coffee, but it was closed! Since I’m running a bit late, I figured I better take an Uber the rest of the way instead of waiting for the bus. While we’re stuck in traffic, I’m on my mobile hotspot and figured I could at least download and start testing out flowchart.js!
…
10:38pm: Back at my usual coworking space, hanging out with a friend who also attended the Disney meetup tonight and shared an Uber back here with me. We got caught up in talking about programming and linguistics, one of my favorite academic intersections. Oh yeah, the Disney event was great! I didn’t really learn anything new, but I appreciated all the effort that went into the presentations, and seeing some behind-the-scenes graphics and animations from some of my favorite animated films was a real treat! Plus there was some very tasty free food. (Today really was a day of spluring!) Anyway, I’m not sure if I’ll get any more work done tonight, but I’m having fun. I came up with a bunch of other project ideas while at the Disney talk, which I’ll hopefully remember to include in these notes sometime so they aren’t lost in my email or on scraps of paper.
11:54pm: My friend left and I’m still awake, so I’m just going to do a bit more work before I walk back home and call it a night. Time to finally test flowchart.js with their sample code!
12:17am: Well, I got the demo working locally, but I don’t understand why it didn’t work when I tried to set it up myself. Oh well, not important right now. Next, how can I add that plugin to make it look hand-drawn? I can’t make heads or tails of the code for js-sequence-diagrams so first I’ll try that raphael.handdrawn.js plugin] and see if it’ll work plug-and-play style.
12:26am: Yeah, wishful thinking! I don’t know what I was thinking. Of course that wouldn’t work! Plus that plugin is four years old and probably no longer compatible with the newer version of Raphael. Even if it were, I’d still have to locate all the Raphael functions within flowchart.js and replace them with function calls to the hand-drawn functions. It might be easier to use code from js-sequence-diagrams after all. But overall, it’s still not worth the effort right now! I already solved my main problem: I can now make flowcharts without drawing them by hand! Time to make a test based on my last paper sketch and see if I can export it and post it in this blog post. Then I’ll go home.
First diagram generated with flowchart.js
12:45am: OK, here’s the code for the beginning of my flowchart and the actual flowchart it generated, pasted in here as a giant blob of SVG code:
st=>start: User connects to home page
accessToken=>condition: Access token?
handleUserLogin=>operation: handleUserLogin
getClientId=>operation: Get client ID
st->accessToken
accessToken(yes, right)->handleUserLogin
accessToken(no, left)->getClientId
12:51am: The code for the SVG is a huge mess, but I can save it as a separate file and include it as an image. It works! Well, time to walk home. Today was full of tangents and splurges, but I had fun and learned some new stuff and met some new people, so that’s never a waste. But tomorrow I definitely hope to finally find my focus and make some real progress with fixing up my mob coding app!