Daily Learning Notes for July 7th, 2017

Today I fixed up some more bugs in the mob coding app, reviewed the basics of React some more with a friend, and stayed up late playing board games!

Real-time notes

10:05am: I spent the first hour or so of the day posting meetups, replying to messages, and planning for tonight and the weekend. (I might attend an entertainment tech hackathon, or I might do a small hack day with a couple friends instead. Either way, should be fun!) Then I got caught up in brainstorming project ideas and looking into submitting a talk proposal for the GitHub Universe conference! (This could be the perfect deadline to push me to decide on my next project to focus on – maybe the idea of using GitHub as a learning management system?)

10:40am: Still caught up in chatting with people online and reading stuff and brainstorming. I’m super hungry now though, so I think I’ll get a snack first. Then hopefully I can concentrate on programming for at least a little while!

…

11:22am: Back after talking to more people (in person this time) and getting a snack and a bite of a couple free donuts as a nice bonus! OK, time to try to focus again. I left off on that bug… the reason it only happens when the current player disconnects after the first turn ends is because then the turn index is 1 (after the first turn ended), which points to a previous player that no longer exists! Hypothesis: with three players in the game, this bug would only occur after two turns have completed. (And more generally, with n players in the game, the bug would occur only after n - 1 turns have completed.)

So how do I fix this? The best solution I can think of is to send the previous player’s ID along with the turnChange event, because the Gist forking/editing logic depends on being able to access the previous player! It doesn’t make sense to split up the events any other way; they’re very intuitive and well-defined right now. The only weird part is the Gist stuff. Ideally, the server would handle that part anyway if a player disconnected, but even so, the clients will still need to know when not to fork or edit the Gist! OK, time to fix it!

11:45am: I know what needs to change in the client-side code, but I don’t know exactly how to fix this in the server-side code. Maybe I should change the turn before removing the disconnected player, but then again, wouldn’t that cause another bug? Or I need some way to get the disconnected user’s ID over to the client, but into the turnChange event, which currently is entirely separate! I guess I could pass it as an optional variable into the changeTurn() function. Yeah, that seems like the easiest fix…

11:59am: Still feeling stuck, but I realized that first I should probably refactor that togglePlayerHighlight() function more so that it doesn’t require information about the previous player!

12:12pm: I fixed that, but then I got distracted again. I’m also feeling pretty sleepy now and somewhat anxious for whatever reason. Hoping it will quiet down soon, and then I’ll go take a little nap and walk over to meet my friends for their coworking day at The HQ. OK, back to looking at code.

12:23pm: Testing it… oh, one more error generated by my last refactor of the togglePlayerHighlight() function! I need to add another check to make sure I’m not trying to access an element that might no longer exist.

12:31pm: Fixed! I think this is finally right! But I need to do some more testing to check other edge cases.

12:43pm: I couldn’t find any other bugs, so that’s promising! Saved the changes into a couple of commits. Next step: creating the Gist! I must have forgotten to tell the clients to create a Gist if the game is starting. Fingers crossed that this doesn’t trigger a whole new set of bugs. Oh, silly me! My condition was checking if the current Gist isn’t null instead of checking if it is null. This should work, then! Testing now… OK, the first player does create the Gist, but the next player doesn’t show the Gist link, and even worse, when the second player forked and edited the Gist, it crashed the server! The previous player is undefined on the server when it tries to verify if this user is indeed allowed to broadcast a new Gist. Hmm.

1:05pm: Oh, the turn index was 0 and my code to grab the previous player was subtracting 1, so my math is bad! I think I just need to take the absolute value… oh wait, nope, that won’t work either. Here we go: (gameState.turnIndex + gameState.players.length - 1) % gameState.players.length as described in this StackOverflow thread. I’m disappointed that I didn’t figure that out on my own. I should really do some review of modular arithmetic sometime! Anyway, this should now work. Yay, problem solved! Time for a quick break.

1:15pm: Next bug: the other players aren’t displaying the new Gist link for some reason! Oh, I must have forgotten to call the function that updates that part of the UI when new clients are initialized with the game state. OK, problem solved! Easy!

1:23pm: Next bug: the first player never edits or forks their own Gist! They’re supposed to edit their own Gist at the end of the first turn. I wonder why that isn’t happening…

1:35pm: Oh, I found it! The first player isn’t saving the new Gist data after creating it, only broadcasting it to the server! Easy fix!

1:41pm: Woohoo, it works! I’ll commit these changes and go take my nap now.

…

4:10pm: That was a long nap! From about 2pm until 3:20pm (with interruptions though). Seems to be the right amount of time and hopefully the right time of day, too! Anyway, I’m spending the next two hours reviewing the basics of React with my friend. This should be fun! Then I’ll stop by this happy hour thing and then go to that board game place for the rest of the night.

Notes on React

  • The official React documentation is great! We finished all the basic guides.

  • React uses “controlled components” to handle forms itself, instead of letting the browser and the DOM do its thing. But there are also “uncontrolled components” that let the DOM take care of everything and simply get a reference to retrieve form values. (My friend and I spent a good chunk of time experimenting with and reading about how React handles forms!)

  • I want to read the “Thinking in React” section again, especially the part about identifying the minimal representation of UI state! (That was a big problem with my mob coding app)

  • Remember to install the React Developer Tools extension in Chrome before I build any more stuff with React!

Gathering string