A mob programming web app for real-time collaboration at in-person events. The goal is to make the most of meetups/classes where a group of people with laptops are all sitting together in a room!
Table of Contents:
- What is mob programming? by the Agile Alliance
- Video: "Mob Programming, A Whole Team Approach" by Woody Zuill
- Article: "Introducing Mob programming: The best team technique you've (probably) never heard of" by Daniel P. Dern
- MobProgramming.org and the Mob Programming Conference
- (Done) Simple login system using GitHub authentication
- (Done) Display players' GitHub usernames and profile photos
- (Done) Use a nice code editor for features like line numbers, syntax highlighting, etc (Using Ace for this)
- (Done) Save code from each session in a Gist using GitHub API and give credit to each contributor accordingly!
- Run code within the app and display the output, similar to repl.it or CodePen or kodeWeave or Dabblet
- Add moderator controls (ideas include kicking out players, pausing the game, choosing whose turn it is, changing the timer duration, etc)
- (Maybe) Reintroduce anonymous user feature (just that they don't get credit for their commits, or they can only observe?)
- Add support for multiple game rooms
- Reintroduce non-turn-based collaborative text editor mode
- (Crazy idea for later) Add support for multiplexed/tabbed invididual code editors that users or moderators can watch all at once, like a control room at a TV production studio! Maybe users can set permissions to make their "room" open to collaborators or just to viewers.
- Just a turn-based, collaborative plain text box!
- Countdown timer displays the remaining time for each player and resets after each turn
- Players can enter their name or stay anonymous
- Active player list displays names and highlights whose turn it is
- App displays who has the current turn and who has the next turn
- App gets the user's attention somehow when it's their turn
- Tools: NodeJS, Express, SocketIO, plain vanilla JavaScript and HTML/CSS
High-level, simplified state chart:
Note: As of 2017-07-10, client-side game state currently handles the editor content differently, using a separate Ace Editor object instead.
{
timeRemaining,
turnIndex,
currentGist: {id, url, owner},
players:
[
{id, login,avatar_url}, { ... }, { ... }, ...
],
editor:
{
content,
cursorAndSelection: { cursor: {column, row}, range: { end: {column, row}, start: {column, row} },
scroll: {scrollLeft, scrollTop}
}
}
| Event Name | Sent By | Sent To | Data | Description |
|---|---|---|---|---|
playerJoined |
Client | Server | {login, avatar_url} |
When new player completes login process |
playerJoined |
Server | All other clients | {id, login, avatar_url} |
Update other clients with new player data |
gameState |
Server | One client | See game state model in section above! | Initialize game state for new player that just logged in, and trigger new gist creation if game is just starting! |
playerLeft |
Server | All other clients | id |
Update other clients to remove disconnected player |
turnChange |
Server | All clients | onDisconnect (Boolean) |
Trigger clients to change the turn |
newGist |
Client | Server | {id, url, owner} |
Broadcast new Gist data |
editorTextChange |
Client | Server | "current content, just a string!" |
Broadcast changes to code editor content |
editorCursorChange |
Client | Server | { cursor: {column, row}, range: { end: {column, row}, start: {column, row} } |
Broadcast cursor moves or selection changes |
editorScrollChange |
Client | Server | {scrollLeft, scrollTop} |
Broadcast changes to code editor content |
disconnect |
Client | Server | ... | When clients disconnect from server (SocketIO function) |
connection |
Client | Server | ... | When clients connect to server (SocketIO function) |
Today's notes: https://learningnerd.com/2017/03/28/
Milestones:
- Started this project! Created the repo, created HTML mockup for the UI, wrote the first set of project goals.
Today's notes: https://learningnerd.com/2017/03/39/
Milestones:
- Version 0 (branch
v0-shared-editor): collaborative real-time text-editing now works, yay! Just a simple shared text editor.
Today's notes: https://learningnerd.com/2017/03/31/
Milestones:
-
Finished and cleaned up version 0 (
branch v0-shared-editor) with collaborative real-time text-editing (no turn-based system). -
Version 1 (branch
v1-turnbased-simple) with turn-based system now works!
Milestones:
- New feature: added Ace (an open source embeddable code editor) to replace the plain text box, and it works great!
Milestones:
- Ace editor now syncs scroll, cursor, and selection changes between all clients!
Milestones:
-
Finished the GitHub login for static websites tutorial that I had started last week and now I think I finally understand promises, the point of environment variables, and the basics of GitHub authentication and API requests in general!
-
Started new branch (
github-auth) to require users to log in via GitHub before starting the game -
Finished the user login and GitHub authentication features! Users now have to log in with GitHub before they can play, and the game displays their GitHub username and avatar.
-
Did my first live user test at my weekly web dev study group! Got some great feedback on the app and identified a couple bugs (which I think I already fixed in my dev branch).
Today's notes: https://learningnerd.com/2017/04/06/
Milestones:
-
Finally started using the Dotenv package to manage local environment variables.
-
Switched to handling GitHub authentication with my own server and learned how to make a new route that makes a POST request from Node and redirects the user back to the homepage with their GitHub access token. Woohoo!
-
Set up production version with Heroku environment variables, no more hard-coded URLs or client ID (for now, just using an AJAX request to get the client ID from the server).
-
Did a second user test, this time virtually, with this fun practice problem from r/DailyProgrammer! Got some good feedback and identified some more bugs.
Today's notes: https://learningnerd.com/2017/04/07/
Milestones:
-
Made my first commit using just the GitHub API (via command line testing it out with cURL)!
-
Researched GitHub's features and API more to identify how I could structure this app.
Today's daily learning blog post: https://learningnerd.com/2017/04/10/
Milestones:
-
Started keeping learning notes in my blog, instead of just dumping them all in here. (Better to reserve this doc just for short summaries.)
-
After a lot of wasted time because of a couple typos, I successfully created a new GitHub gist from within my app using a client-side AJAX POST request to the GitHub API!
Today's daily learning blog post: https://learningnerd.com/2017/04/11/
Milestones:
- Successfully created, forked, and edited a gist using the GitHub API!
- Integrated new events and logic flow into the app for saving version history using GitHub gists!
- The app can now create and edit gists on each user's turn, but not working for forks yet.
Today's daily learning blog post: https://learningnerd.com/2017/04/12/
Milestones:
- Fixed the turn change logic to work properly with saving version history using the GitHub Gists API.
Today's daily learning blog post: https://learningnerd.com/2017/04/13/
Milestones:
- Fixed the bug where any code written in the delay between forking and editing a gist gets attributed to the wrong player.
Today's daily learning blog post: https://learningnerd.com/2017/04/13/
Milestones:
- Fixed the bug where any code written in the delay between forking and editing a gist gets attributed to the wrong player.
Today's daily learning blog post: https://learningnerd.com/2017/06/21/
Milestones:
- Moved some notes from this README into separate blog posts, added Table of Contents to README.
- Fixed setup script so that it no longer overwrites the
.envfile if it already exists.
Today's daily learning blog post: https://learningnerd.com/2017/06/27/
Milestones:
- Finally posted a bunch of issues for next refactoring tasks, bugs, and feature ideas.
- Started refactoring and closed issue #1.
Today's daily learning blog post: https://learningnerd.com/2017/06/28/
Milestones:
-
Finally got the app working again!!! Successful live user test at tonight's web dev study meetup! (The server never crashed!)
-
Added updated flowchart and events list to this README for version 1.0.0 documentation.
-
Fixed the main (most obvious) bug, closing issue #8 ("Error thrown when client calls updateCurrentGistView the first time to create initial Gist")!
-
Closed issue #3 ("Simplify client-side code for determining when to fork/edit Gist"), which lead to opening issue #20 ("Game state should track previous and current player for Gist forking/editing logic"), which I closed with pull request #25, which then led to opening issue #24 ("If current player disconnects, next turn can trigger unwanted Gist fork").
Today's daily learning blog post: https://learningnerd.com/2017/06/29/
Milestones:
-
Realized most of yesterday's work was based on an incorrect assumption, so threw out pull request #25 and replaced issue #20 and issue #24 with issue #26 ("Game state should track Gist owner for forking/editing logic") -- a much better solution!
-
Closed issue #26, solving that bug once and for all! Updated the flowchart accordingly.
Today's daily learning blog post: https://learningnerd.com/2017/06/30/
Milestones:
- Created high-level UML state machine diagram, added to this README for version 1.0.0 documentation.
Today's daily learning blog post: https://learningnerd.com/2017/07/03/
Milestones:
-
Closed #issue #4 ("Change game start condition to check state of the player list")
-
Opened issue #29 ("Sometimes when last user disconnects (maybe while turn is changing?), server crashes")
-
Merged issue #5 ("Consolidate the playerListChange and updateState events") into issue #16 ("Simplify the game state data model and events on client and server") and updated issue #16.
-
Finished initial rewrite of events list and game state data model, started the major refactoring task for issue #16, stripping out all the guts of this app and replacing them all!
Today's daily learning blog post: https://learningnerd.com/2017/07/10/
Milestones:
-
Main refactoring task completed! Finally closed issue #16 ("Simplify the game state data model and events on client and server"), also closing issue #18 and issue #14 in the process!
-
Added game state and updated events list for version 1.0.0 documentation in this README.
-
Closed [issue #15 ("Send GitHub access token as a header, not as a URL parameter")(#15)! Not sure if this is the best solution, but I can't think of a better way to handle client-side authentication without sessions.