How I Made It: My Pair Programming App

After finishing my previous JavaScript project, I was ahead of schedule in my Front End JavaScript course so I decided to do what Bloc refers to as a Capstone Project. This is a project of the student’s choosing that will show off their skills as a developer.

Not knowing how hard it would be but seeing how it would benefit students in an online learning situation, I chose to create an app to allow both student and teacher to code together. At my Pair Programming App, they can do exactly that. And, if you’re interested in the code, you can visit my GitHub repo.

The app, as of when this blog post was written, utilizes a few different technologies but in most cases, I didn’t take the easy route. My Bloc mentor wanted me to learn as much about JavaScript and its general environment as possible. So that’s what I did. That includes using NodeJS as the server. My mentor wanted me to avoid using Express so that I could learn more about how a server works. Node still does a lot of the heavy lifting in creating a server but it doesn’t include as many features as Express so I had to code some of those, such as session control and redirecting to the new session URL, myself.

To read the session ID from a URL, I use Node’s `request.url` and I remove the initial `/` by adding `.substr(1)`. Once it has the session ID, the database is queried and any valid entry is loaded. But the function was rerun for all the different JavaScript, CSS, et al, files that were being called when opening the index.html file, and they failed to load. That was unexpected. The files need to bypass the database entry check. This currently occurs in probably the ugliest way possible by essentially whitelisting the files that need to load using a ridiculously long if/then statement. I want to clean this up using RegEx to bypass anything that has a `.` in the file name. It’s on my list of things to do.

Another issue involves having 2 people editing at the same time. It creates strange remnants of the combination. Alden Daniels explains is more eloquently than I would in his guest blog post on David Walsh’s blog. He also explains how to solve the problem correctly. That implementation is also on my to-do list. In the interim, the issue is resolved by limiting only one person to editing at a time and using a timer of 2 seconds. After the user has stopped typing for 2 seconds, the other person is free to start editing.

Preventing the person from editing it is rather simple as `textarea` has a `disabled` feature that prevents any editing. It is easily toggled in the timing.js file.

Because I’m admittedly not as artistic as I’d like to be, the appearance was created using Bootstrap with a Bootswatch theme. Bootstrap and the theme did most of the hard work but to make it look closer to the way I wanted it, I had to modify the theme’s CSS file a bit. The app also utilizes a generic CSS file I created to format the text editor.

The text editor box was created using HTML’s textarea. I didn’t just implement a tool like HighlightSJ, though it would have saved me a lot of work. My mentor originally recommended that I use the contenteditable feature in HTML but I chose not to. In retrospect, I should have obeyed. That choice caused me to have an MVP that is slightly less than it could have been, which means there’s still more work to do down the road. But, at least I can say that using textarea I was able to make it work on my own.

I’m currently not sure whether future versions will use HighlightSJ or PrismJS, but some sort of syntax highlighting will be implemented.

The WebSocket connection necessary to make it a viable pair programming app uses WS. It creates and verifies the connection so data can be sent almost instantaneously when someone types in the box without needing to create a new connection or send a new header with every edit.

A future version will include the ability to use voice communications so that a phone or another won’t be necessary to truly work together.

I’ve enjoyed learning JavaScript and the MEAN stack is relatively popular right now so I chose to go with MongoDB as the database, and MongooseJS to interface with MongoDB. As I have time, among other changes I want to make to the app, it will be converted to use Express because I want to learn it and how to fully develop MEAN Stack apps. Of course, this means it’ll be missing the Angular portion of the stack but I have a side project I’m working on that’s fully MEAN compliant.

You Might Also Like
Leave a Reply