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
| 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. |
| userLogin | 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 "editorTextChange", "editorCursorChange", and "editorScrollChange" if needed. If first user, initialize the game! Broadcast "updateState" to all clients. Broadcast "playerListChange" to all clients. |
Upon successful GitHub authentication, send "userLogin" event and user data to the server. |
| playerListChange | When server confirms a player has joined or left | Broadcast player list to clients, triggered by "userLogin" 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 "userLogin" 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. Send "editorTextChange" event with data to server. |
| Ace Editor: changeCursor | When a user moves the editor cursor | Not used |
Update cursor in editor view. Send "editorCursorChange" 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 "editorScrollChange" event with data to server. |
| editorTextChange | 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 "editorTextChange" with updated content to all other clients. |
Update editor view with new content. |
| editorCursorChange | 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 "editorCursorChange" with updated content to all other clients. |
Update cursor in editor view. |
| editorScrollChange | 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 "editorScrollChange" with updated content to all other clients. |
Update scroll position in editor view. |
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.