Enter­tai­ning program­ming lectures

Program­ming is the process of telling the compu­ter how to perform a task. We desc­ribe the task to the compu­ter using a program­ming language (Java, C, C++, Python, JavaSc­ript…). When doing so, program­mers need to unders­tand data struc­tu­res, algo­rithms and software engi­nee­ring tech­niques that are, by nature, abstract and require patience and perse­ve­rance to truly master. Moreo­ver, program­ming langua­ges evolve over time and software deve­lo­pers need to be aware of these changes so that their code is always up to date.

In this article I share a brief study made on one video mate­rial I publis­hed recently (30.8.2020) on my YouTube channel, where I publish program­ming tuto­rials and other, enter­tai­ning compu­ter science related videos as a hobby. The video [1] entit­led JavaSc­ript map, arrow func­tions & ternary opera­tor: JS Code Battle Tuto­rials (see Figure 1) was made as supple­men­tary mate­rial for the Advanced Web Program­ming course going on in the same period. The video teaches three modern JavaSc­ript concepts:

  1. The array map method [2]
  2. Arrow func­tion expres­sions [3]
  3. Condi­tio­nal (ternary) opera­tor [4]

The video is a comical sketch that teaches these concepts in a funny and enter­tai­ning way, by presen­ting two fictio­nal charac­ters: Leonard Istodor and Radu Mariescu compe­ting against each other when solving a program­ming task. Leonard is intro­duced as the expert and Radu as the young aspi­ring program­mer. When the timer starts Radu seems to have the upper hand, however, Leonard, somew­hat surpri­singly over­ta­kes him by using the three afore­men­tio­ned tech­niques which allow him to accomplish the same result with less code. During the compe­ti­tion, a narra­tor explains what Radu is doing. Afterwards, the narra­tor makes a compa­ri­son between the two solu­tions. There­fore, the goal of the video is not only to intro­duce new tech­niques, but also to draw a paral­lel between using them and the tradi­tio­nal way of doing things which is likely to be fami­liar to the target audience.

Thumbnail of a Youtube video.
Figure 1: Video thumb­nail, audience reten­tion graph, typical reten­tion (gray) and image of a hockey stick.

In class, the video was seemingly well recei­ved by the students which were discus­sing it on the Discord group. On YouTube, the video perfor­med mode­ra­tely well in terms of views (currently at 801, which for a channel this size is average). This number is, affec­ted by many exter­nal factors like search engine opti­miza­tion and the YouTube algo­rithm, there­fore, cannot be used to infer the quality of the content. However, YouTube provi­des many other statis­tics to the owner of the channel. For example, the audience reten­tion graph (see Figure 1), which tells if the audience is watc­hing the entire content or clicks away soon after the video starts. This type of graph always begins at 100% because every­one who clicks on the video watches at least a few seconds. It’s typical, however, for the line to drop suddenly, forming what is known in the YouTube creator commu­nity as a ‘hockey stick’ trend. This video has currently the highest audience reten­tion on the channel (over 100 other videos) and over 33% of people watch until the end-screen shows (few seconds before the end).

In conclusion, enter­tai­ning content can play a role in making educa­tio­nal content inte­res­ting and, perhaps more memorable.


Author:

Radu Mariescu-Istodor, lectu­rer, Karelia Univer­sity of Applied Sciences


Refe­rences:

[1] JavaSc­ript map, arrow func­tions & ternary opera­tor: JS Code Battle Tuto­rials -video. Youtube. https://youtu.be/h24ircatoHI

[2] MDN Web Docs. Array.prototype.map() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

[3] MDN Web Docs. Arrow func­tion expres­sions. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

[4] MDN Web Docs. Condi­tio­nal (ternary) opera­tor. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator