Daily Learning Notes for June 23rd, 2017

Today I built a tool to more easily generate flowchart SVGs from plain text using flowchart.js, practiced a little salsa dancing at the first Dance Downtown event of the summer, and did some late night rock climbing! (It was a slow day, since my biphasic sleep experiment finally backfired.) I also started a new section of my notes called “gathering string” to collect all my random tangents.

Real-time notes

1:37pm: Today is not going according to plan. Taking such a late nap yesterday and staying up so late last night definitely backfired, because I was so delirious this morning that I decided it would be best to take a nap as soon as I arrived at my coworking space. Three hours later, I woke up in a daze, almost forgetting how I got there! Then I took care of some emails and other stuff, and next thing I know, it was time for lunch! I just got back from lunch and made myself some more tea, but I have a headache and a sniffly nose. I’m looking forward to tonight’s first Dance Downtown event, and I think a couple friends may even join me! Then I was hoping to go rock climbing afterwards. I just hope I’m awake enough by then.

Anyway, picking up where I left off yesterday, I discovered SVG Optimizer (SVGO), a NodeJS package for optimizing SVGs via command line. It works like a charm! My first test diagram is totally optimized. Sometime I should set up a script to run SVGO on my entire images folder whenever I rebuild my Jekyll site.

1:46pm: Before I get back to the mob coding app (which I’ve barely worked on at all this week, aside from organizing my notes and reviewing my code!), one of the UnBootcamp students had a bug that I meant to fix last night. He made a pull request to share his code with me more easily, so I’m going to test it out right now.

2:02pm: Done, that was quick! Just some missing brackets. I really should have spent more time reviewing tools for debugging. We’ll have to look at that some more tomorrow. OK, now to help another friend with some website stuff real quick.

2:08pm: Time to finish this flowchart! I’m super tempted to dive down another rabbit hole on the topic of code coverage and auto-generated documentation… OK, maybe one quick Google search… Oh dear lord! There are so many documentation generators! I’ll bookmark just a couple.

JavaScript documentation generators:

But at a glance, I don’t see a simple way to just spit out a list of all the functions defined in my code. I was hoping I could do that really quickly and link it up with that flowchart.js tool to automatically generate flowcharts for my code! That might be a cool project for later. So I’ll add that to my list of loose ends, which I’m thinking should be an actual list at the bottom of each of these daily notes pages.

2:27pm: I already spent more time than I wanted to on that, but I’m done now! At least I realized that generating a list of functions used in my code isn’t super easy after all. But when I learn more about parsers, I’ll definitely return to this project idea! For now, I guess I’ll just continue to review my code manually and add onto my flowchart. First I’ll finish diagramming the login process.

2:36pm: This language is really bugging me! I can’t even add more whitespace to make it more readable. I think I need to create my own helper function to remove extra white space so I can write it more clearly. Or maybe I should write a little helper function that lets me define a list of elements more easily – maybe in JSON format – and spits them out in the right format! That sounds fun. (Once again, I found a way to avoid actually working on my code, but this sounds even more fun! Plus it might be useful for future projects.)

3:06pm: Yay, that was fun and easy enough! I even got to play with reducing arrays. Here’s the code I used to test it:

function generateFlowchartSymbols (symbolsObjectsArray) {
  var output = "";

  // Format every key/value pair in a symbolObject (except its type)!
    // Inputs: a symbolsObject, a string for the type, and the output string
  function appendSymbols(symbolsObject, symbolType, output) {
    for (key in symbolsObject) {
      if (key !== "type") {
        output += key + "=>" + symbolType + ": " + symbolsObject[key] + "\n";
      }
    }    
    return output;
  }
  
  // Format each symbolsObject in the array passed in:
  return symbolsObjectsArray.reduce(function(output, symbolsObject){
    return appendSymbols(symbolsObject, symbolsObject.type, output)
  }, "");
  
}

var start = {  
  type: "start",
  connection: "User connects to home page"
};

var conditions = {
  type: "condition",
  accessToken: "Access token?",
  accessToken2: "Access token 2?",
};

var operations = {
  type: "operation",
  handleUserLogin: "handleUserLogin()",
  getClientId: "Get Client ID",
};


console.log(  generateFlowchartSymbols([start, conditions, operations])  );

3:40pm: Back from a break. I was tinkering with the code some more and realized I need to change it to parse input as JSON, because I’m going to be typing this stuff into a text box so it’ll all be one giant string! Now I have a question: does JSON data always need to be wrapped inside an object, or can it be an array? According to JSON.org and some other sources online, it can indeed be an array! Yay!

JSON array test string:

var testString = '[{"type": "start","connection": "User connects to home page"}, {"type": "condition", "accessToken": "Access token?",     "accessToken2": "Access token 2?" }, {"type": "operation", "handleUserLogin": "handleUserLogin()", "getClientId": "Get Client ID"}]';

Now I just need to modify my code a little bit…

3:58pm: Yay, it works! But it won’t let me use any extra whitespace in my string. How annoying. I’ll just fix that with a quick regular expression like /\s\s+/ to match every instance of a whitespace character followed by one or more additional whitespace characters and replace those matches with a single space.

4:34pm: All better! I was busy tinkering around with the interface, so now I have separate text boxes for listing the symbols and for deciding how to connect them to each other. It also shows a handy list of symbols as an HTML list. Now I can define my symbols in JSON like this:

[
  {
    "type": "start",
    "connection": "User connects to home page"
  },
  {
    "type": "condition",
    "accessToken": "Access token?",
    "accessToken2": "Access token 2?"
  },
  {
    "type": "operation",
    "handleUserLogin": "handleUserLogin()",
    "getClientId": "Get Client ID"
  }
]

I still find that to be much easier to read than the default (and mostly undocumented!) syntax used by flowchart.js. So that was fun! But I’m still frustrated with myself today, wondering why I can’t make myself focus more on my original goals. Oh well. I’m just going with the flow. (Flowchart pun intended!)

5:30pm: Took a little break and then finished the flowchart for the login process. Here’s the code for the symbols, followed by the flowchart connections (after tweaking some left/right alignments which seem to be a bit buggy):

[{
"type": "start",
"st": "Start"
},
{
"type": "condition",
"accessToken": "Access token exists?",
"authorizeGH": "User authorized app on GitHub?"
},
{
"type": "operation",
"handleUserLogin": "handleUserLogin()",
"getClientId": "Get Client ID from server and add to login button link (Later: use a templating engine instead!)",
"redirectToAuth": "User redirected to '/github-auth' route, server exchanges temp code for access token, server redirects user to homepage with the access token"
},
{
"type": "inputoutput",
"connection": "User connects to home page, connects to SocketIO",
"loginClick": "User clicks login, redirected to GitHub",
"unknown": "Not sure, haven't tested this yet!"
}]

st(right)->connection->accessToken
accessToken(yes, right)->handleUserLogin
accessToken(no)->getClientId->loginClick->authorizeGH
authorizeGH(yes, left)->redirectToAuth(left)->connection(left)
authorizeGH(no)->unknown

There are definitely a few problems with this system:

  • It isn’t easy to change how things are aligned or arranged! I guess I could use the generated diagram as a starting point and then import it into a vector image editing program like Adobe Illustrator to fix it up afterwards. (Ideally, I’d love to write my own diagram generator that works better!)

  • If I want to tweak the options that affect how the diagram looks, I need to edit the JavaScript source code. I should either make those options editable in yet another text box, or at least save my other inputs using the local storage API so I don’t need to keep copy-pasting them out of the browser, changing the options in the source code, refreshing the page, and pasting my inputs back into the text boxes.

5:44pm: OK, I fixed it so that the options are now in another text box on the page. I also played with the layout a bit, just for fun. Now I’m going to change it so the diagram re-renders whenever the user changes any inputs, instead of requiring a button click.

Finished flowchart for mob coding app login flow

6:11pm: Finished! Much better now. I was playing with how to change the way the flowchart renders by adding newline characters to the text and messing with those left/right parameters. I think I’m happy with the result from this code:

[{
"type": "start",
"st": "Start"
},
{
"type": "condition",
"accessToken": "Access token \nexists?",
"authorizeGH": "User authorized\n app on GitHub?"
},
{
"type": "operation",
"handleUserLogin": "handleUserLogin()",
"getClientId": "Get Client ID from server and add to login button link",
"redirectToAuth": "User redirected to '/github-auth' route, server exchanges temp code for access token, server redirects user to homepage with the access token"
},
{
"type": "inputoutput",
"connection": "User connects to home page, \nconnects to SocketIO",
"loginClick": "User clicks login, \nredirected to GitHub",
"unknown": "Not sure, haven't \ntested this yet!"
}]

st->connection->accessToken
accessToken(yes, right)->handleUserLogin
accessToken(no, left)->getClientId->loginClick->authorizeGH
authorizeGH(yes, left)->redirectToAuth(right)->connection
authorizeGH(no)->unknown

Mob coding login flowchart

I think I’ll call it a night now. Time for that Dance Downtown event!

Gathering String

Originally I thought I’d call this section “loose ends”, for a list of tangents and unfinished ideas. But then I remembered a phrase I really loved: “gathering string”, a phrase often used by journalists to refer to “the process of “looking for something that you can’t yet name.”” (see the page for String (journalism) on Wikipedia). The “string” in that phrase refers to “the stuff that accumulates in a journalist’s pocket.”

I think I first discovered this phrase from this article published in The New York Times last year: “How to Culviate the Art of Serendipity”(https://www.nytimes.com/2016/01/03/opinion/how-to-cultivate-the-art-of-serendipity.html) by Pagan Kennedy. I’m going to use the term very loosely though to also include any loose ends or tangents or threads that might lead me down an interesting path later on.

Today’s string: