Methods
I began my data collection process by gathering information on a video of a professional programmer whose project goal was to build a web app. More specifically, this was an hour and a half long YouTube video of a professional programmer working through the creation of a web app using Node.js. The programmer in the video I was analyzing goes by the channel name Coder Coder and the particular video was titled “Building a Node.js app (as a JavaScript noob) | 🔴 LIVE CODING” (link to the YouTube video: https://www.youtube.com/watch?v=wYALykLb5oY ). Although Coder Coder is a professional programmer, they self-identified as a newcomer to the language and process they were using in this particular video. Thus, for the purposes of analysis and comparison, Coder Coder will be referred to as a “learner programmer” given the content and context of the particular video.
Before starting to collect data, I had to set up my environment. This included cloning a GitHub repository that allowed me to access the server-side interface, installing the GoFullPage Chrome plugin, and installing SQLite. The server-side interface is what allows the input of information that is put into the database. This interface is what I used to watch the professional programmer’s YouTube video, take notes, and gather data. The GoFullPage Chrome plugin allowed me to easily take screenshots of the YouTube coding video at the moments when the programmer completes a particular action. The plugin automatically saves each screenshot as a PNG to a designated local folder on my computer. SQLite is a database engine that stores large amounts of data divided into a table format. For my purposes, the SQLite database was a table whose rows contained all the information of every programmer action entry I made. Each time I added a new note about a particular programmer action, that information was added as a new row to the database table.
Data Collected
First Pass
The data collection process involved watching the entirety of the YouTube video and noting every moment where the programmer completed a particular type of activity. This process is referred to as the first pass. The activities to note were web search activities, coding activities, and goals. Web search activities included searching terms on the web, visiting a web page, and revisiting a web page. Coding activities included changes in code context, when significant lines of code were added or deleted, and when the programmer ran their code. Goals were noted when the programmer started a goal, which was identified when they gave a verbal cue that they were starting a new task or working on a particular objective. Every time an activity was noted, a screenshot of the YouTube video was taken at that moment in time, and both the activity note and its accompanying screenshot were stored in the SQLite database.
Second Pass
After the first pass was finished, the next step was to perform post-processing on the data in order to recreate the codebase made by the programmer in the live coding video. This meant that each time I came across a “code” activity note in the SQLite database, I would use its associated screenshot and recreate the code script at that point in time. This part of the process was referred to as the second pass.
To complete the second pass, I first performed Optical Character Recognition (OCR) – the process of converting text in an image into typed text – on each screenshot. I used two Python character recognition libraries, pytesseract and the Python Imaging Library (PIL), in order to conduct OCR on the screenshots. Each screenshot collected during the first pass was displayed one by one within a server-side interface; if the screenshot contained code, I would run the OCR algorithm on the screenshot. The result of the algorithm was the code from the screenshot outputted as text, which was stored in the SQLite database in the row corresponding to its screenshot.
Manual Rebuilding Process
Unfortunately, the text outputted by the OCR algorithm is not extremely accurate, and thus there were quite a few mistakes in the code text that need to be corrected. In order to correct the text, I checked the OCR-generated text against the code from the video screenshot and then made any corrections needed. This was done within the server interface seen in the figure below. I then clicked the “Update Code Text” button, which updated the code text to the manually corrected code text in the SQLite database. I corrected the code text for all OCR-generated texts. The entire correction process is referred to as the manual rebuilding process.
Once I finished the manual rebuilding process, the entire data collection process for the YouTube video was complete, and the SQLite database was also filled with all pertinent columns and information.