Mario's Video Submission

editor video thumbnail

The Process

I was pleasantly surprised with the JS inheritance topic, as I knew it well. I imported the clip into my editor, keyed out the green screen background, and trimmed the clip into segments while trying to minimize noticeable jump cuts. When reviewing the audio, I noticed two points where the speaker's voice initially broke into a higher pitch, which I tried to correct with a single semi-tone downstep.

I thought of creative ways that I could make JS "weird" while not spending much time on a unimportant detail. The jester hat seemed the easiest way to approach it, while highlighting the ways it's weird through a vertical text carousel, and moving the speaker to the screen bottom right.

At this point, I realized during the timing of the text animation that the provided clip's speech seemed to be slightly delayed. So I moved just the video forward by 5 frames, which helped better sync the a/v.

In the next section when introducing prototype inheritance, I felt it important to simply highlight keywords from the spoken word visually like a teacher would with an overhead projector. The next sentences provided the best opportunity for a visual diagram to explain a simple JS prototype chain. To minimize the amount of overlay cuts within a short time period, it felt best to show an object prototype assignment as an small overlay underneath the speaker, using a pop-culture sci-fi reference to the book/film Dune. The entire process took about exactly 4 hours.

Given More Time

As it stands, I think the edited clip supports the material well. One thing I would reconsider is using the Dune sci-fi reference for the prototype assignment as the word "preacher" is a little loaded and overall not as distracting as a simple example like: "porsche.__proto__ = sportscar".

For a real scenario, I'd have to review additional course footage and concepts to determine whether additional time on this short clip would be warranted. If there was time, I would have suggested to the speaker that perhaps we could further elaborate on the prototype chain through a few additional sentences of narration covering a concrete example, supported by an animated system level diagram that would demonstrate the JS property and method lookup process from the bottom to the top of the chain.

Although I'm not familiar (yet!) with the subsequent material from the presumably JS course, perhaps we could also briefly mention advantages (memory), disadvantages (pseudo-global state), and quirks like the "this" keyword and "instanceof" operator.

Tools Used

DaVinci Resolve, Photoshop

3rd Party Assets

The jester hat for making JS "weird" was sourced from Vecteezy using a screenshot, then removing its background.

The JS prototype chain was adapted from this infographic , and recreated for 4K screen height using a different string text.