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.
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.