I would like to start this article by thanking the editorial team of JavaScript in Plain English for featuring my previous article on setting up a LLM chatbot as my editor. Within the article I mentioned turning the final draft into a script for video production, and I am in the process of finally taking the plunge. Now that I have the script done, what else is needed? Let’s start by building a short intro animation.
From Node to Bun, Open-Source Python Projects & AI Storytelling
A cute illustration from Copilot on the topic
My Unexpected Journey: Why a Video Intro?
Despite hearing the suggestion numerous times, I never really considered going the video production route. The main reason was stated in the featured article — I am not ready to commit to a periodic release. Fast-forward to last weekend, I decided to publish my study notes on the book titled Dao of Functional Programming. Due to the complexity, I could only do it on an irregular basis. After publishing the first chapter, the implication became a big “Why not?” hovering in my mind.
Dao of Functional Programming (Chapter 1: Clean State)
Most of my recent articles are structured as a story writing project, including the one published last week. After publishing the article, I had the LLM chatbot assemble a video script out of the final draft. The proposed script, just as my previous attempts, appeared very actionable. After giving it a thought, I decided to bite the bullet.
The Unchaining: My Personal Journey Graduating from jQuery to Modern JavaScript
As a sidenote, I definitely can see the appeal of the LLM especially for people working solo.
Though I may not be able to finish the video in time, I read through the script to figure out the needed components for a video. First thing I noticed is a short intro sequence. Shouldn’t be too difficult, I figured, there should be a generator somewhere over the Internet. Let’s quickly make one and be done with it. However, after some failed attempts with the LLM video generator, I decided to just make a simple animated sequence myself.
A code raining effect inspired by The Matrix, how hard can it be, right?
After checking through my weekly TODO, I only had one take-home assignment for a job application. Considering I did not have much idea on how to do it, I allocated a day for that. The point was getting a usable version out anyway. Fortunately, it was not that difficult, I managed to whip out a version with jQuery, lodash and Chance.js within a day.
Yes, it is a simple web application.
On the other hand, I find the project more interesting than the coding take-home assignment I did the next day. Most of these assignments are about creating a prototype website involving a variation of CRUD (Create, Retrieve, Update, Delete) operations from scratch. Usually that would take 2–3 days end-to-end but I often allocate at most a day and a half for them.
On the other end of the spectrum, we have overly extensive assignments that even the hiring company would expect more than a day of work. Job applicants are often not being paid for the work (hence my 1 day allocation), but in this climate many would still submit their work without compensation. Alongside other problems shared by many fellow engineers when applying jobs, it prompted me to rethink my strategy.
This blog was started as my part of a longer-term plan, exploring options outside software engineering. Recently it turned into an instrument I use to improve my visibility in the job market, showcasing my ability to hopefully avoid take-home assignment in future applications. Being featured in a well-established article is a very unexpected confidence boost, and I can’t express my gratitude enough for that.
Beyond the Code: A Lunar New Year Reflection on Career, Recovery, and New Beginnings
Though it is equally important to acknowledge oneself internally.
While I still send out applications and meet folks for the possibility of collaboration, publishing content regularly is becoming a complement to my job hunting strategy. Producing video, in a way can be seen as an extension to all the technical writing I am doing here in this blog. A friend calls this “signalling”, but to me it is more an attempt to adapt.
The “Good Enough” Code Rain: Starting the Build
One common problem I often observe in life is that people often ask the wrong question “is it good?”, when there is nothing to improve on. This could be an oversimplification of life problems, but in my point of view, most things in life often boils down to either “does it exist” or “is it good?”. Both these questions are distinct from each other, but apparently enough people have a problem differentiating the two.
If there is one thing I learn, after meeting all the people approaching for project collaboration, that would be that ideas are worthless unless executed. There is never a shortage of brilliant ideas, the thing that is lacking is the will to bring them to reality. A conceived idea will inevitably grow over time and gets so ambitious such that it is close to impossible to begin working on it.
We do have a different name for this phenomenon — daydreaming.
The right question to start asking, in my humble opinion, is always “does it exist?”. In the case we are discussing today, it would be about the components of a video. There is none at the moment, so let’s start the collection and building. If the generator is not giving me the intro animation I wanted, then just build one myself, answer the existential question first.
And I did.
The crude initial version
It was a fairly simple animation featuring the code rain, ending with a display of the name of the channel. As mentioned earlier, it worked right away, which was good enough as a quick and dirty hack. Next the clip was uploaded t̶o̶ ̶s̶h̶o̶w̶ ̶o̶f̶f̶ ̶m̶y̶ ̶1̶3̶3̶7̶ ̶h̶a̶c̶k̶i̶n̶g̶ ̶s̶k̶i̶l̶l̶ to collect feedback from peers.
“Is it good enough?” should usually be asked, after answering the first “does it exist?” question. I fully expected to revisit the animation, addressing this question much later. In spite of that, Meta threw me a curveball after it ate my clips, returning an error saying I violate some rules. The linked help topic was a generic document on how to post videos.
Typical Meta, surprise surprise.
That prompted an immediate revision to the animation. If Meta doesn’t like the short clip, it means any uploaded videos containing the clip would be banned as well. To a certain extent, this is a blessing in disguise, I did receive feedback, though in the most unexpected way. Imagine how devastating this could be if I spent my whole life planning for it, only to find the work banned right away.
There are indeed rare occasions where these two should be considered in parallel. Yet, for most cases, where time and resources are limited, the two questions should be addressed separately, in the right order. We can spend our lifetime pondering how things can be perfected, but it changes nothing if no work is being laid out.
Existence != Perfection
Crafting the Rain: Modules, Events, and Iteration
This is the meta-approved (for now) version.
Meta-approved revision
Still based on the same code rain animation, but I am turning the channel name display into an ASCII art, and including the display of a video title. An outro is also added so it doesn’t end abruptly. Let’s discuss the implementation a little bit.
Coders writing for Node.js should be familiar with the module syntax,,) shown below:
import defaultExport from './someModule';
import { otherExport } from './someModule';
const bar = 'bar';
export function foo() {
...
}
export default bar
Frontend development gets increasingly more complex over time. Gone are the days where all the frontend logic is expressed within one script alone. As the complexity grows, the amount of code also increases. Separating them into smaller parts eventually becomes a necessity.
So the module syntax is a welcome change, though I only knew the support was ported to the browser while I was porting grid-maker last week. All it needs is to change the tag’s type attribute to module.<br> </p> <div class="highlight"><pre class="highlight plaintext"><code><script type="module" src="./someModule.js"></script> </code></pre></div> <p></p> <p>Alternatively, you can just put the code inline<br> </p> <div class="highlight"><pre class="highlight plaintext"><code><script type="module"> import defaultExport from './someModule`; import { otherExport } from './someModule'; const bar = 'bar'; export function foo() { ... } export default bar </script> </code></pre></div> <p></p> <p>No more multiple <script> tags just to import different libaries, we now do it with the import statements, as it also supports importing from a URL. For example, to import functions from lodash, we write:<br> </p> <div class="highlight"><pre class="highlight plaintext"><code>import { range, reverse, } from "https://cdn.jsdelivr.net/npm/lodash-es@4.17.21/lodash.min.js"; </code></pre></div> <p></p> <p>The intro animation script was largely <a href="https://kitfucoda.medium.com/the-unchaining-my-personal-journey-graduating-from-jquery-to-modern-javascript-ca74a93a7b33">inspired by the</a><a href="https://kitfucoda.medium.com/the-unchaining-my-personal-journey-graduating-from-jquery-to-modern-javascript-ca74a93a7b33">grid-maker remake</a>. Any changes to the DOM would be initiated by event triggerings. So we are making a rather simple code rain animation in a 2D grid of monospaced characters. A “raindrop” effect is just a column of characters in the grid “activated” (fading in and out) one after another. We could chain all these activations together in a sequence of nested recursive function calls, risking blowing the stack if the number of rows increases.<br> </p> <div class="highlight"><pre class="highlight plaintext"><code>function activate_rain(char_in_grid) { const downstair_char = find_downstair_char(char_in_grid) do_the_animation(char_in_grid) if (downstair_char) { activate(downstair_char) } } </code></pre></div> <p></p> <p>Alternatively, we could let each activation trigger another activation below it by dispatching an event.<br> </p> <div class="highlight"><pre class="highlight plaintext"><code>function activate_rain(event) { const elem = $(event.target); do_the_animation(elem); find_downstair_char(elem).trigger("block:activate:rain"); } </code></pre></div> <p></p> <p>I did this in jQuery despite last week’s article, mainly because this is not meant to be deployed in a production environment. The function activate_rain was registered as a listener to the block:activate:rain, therefore firing the same event (after a delay) for the neighbour. The function exits after the dispatching of event, removing the risk of stack overflow. In the actual implementation, I also added a delay through setTimeout to the event dispatching to adjust the downward speed of a raindrop.<br> </p> <div class="highlight"><pre class="highlight plaintext"><code>setTimeout(() => find_downstair_char(elem).trigger("block:activate:rain"), 100); </code></pre></div> <p></p> <p>The full implementation can be <a href="https://github.com/Jeffrey04/kitfucoda-intro">reviewed at my GitHub repository</a><a href="https://github.com/Jeffrey04/kitfucoda-intro">.</a>.) Feel free to adapt and play with it. You may want to find a way to start a web server to serve the page to test it in your browser.</p> <h3> <a name="the-code-rains-enduring-lesson-execute-first-then-refine" href="#the-code-rains-enduring-lesson-execute-first-then-refine" class="anchor"> </a> The Code Rain’s Enduring Lesson: Execute First, Then Refine </h3> <p><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9xau70vzs3ya6htns4za.gif"/><br> <em>My editor insisted this is needed again here.</em></p> <p>Initially I intended this to be a quick article on the making of the animation for the video production side-project. However the scope of the article grew when I was organizing my thoughts. For some reason it reminded me of a quick exchange on the two questions “does it exist?” and “is it good?” with my mentor not too long ago.</p> <p>We live in a very short-tempered world, where we expect things out fast and good. Sometimes it gets really easy to forget the difference between the two, especially when deadlines are approaching. Mixing the two up in such cases would inevitably generate a huge amount of stress. Even I find myself caught in situations like this before.</p> <p>The unexpected connection between my simplistic problem-solving view and the animation-making process was a surprising discovery. If the banning accident did not happen, I wouldn’t be able to make the connection, and we would read a very different article this week. Despite a round of revision, there are still numerous improvements I hope to achieve with it. Still, having it done checks an item of my TODO for a final video.</p> <p>I will pick an older article, and produce a video out of it with the help of LLM drafting the script. As it is going to be irregular, the review will come a little bit later, perhaps until I am more comfortable with the workflow. For now stay tuned, and thanks for reading this far. I shall meet you in my writing again, next week.</p> <p>While an AI editorial assistant helped refine this article’s language and structure, please know that my voice, ideas, and all code are entirely my own work. If <a href="https://kitfucoda.medium.com/">KitFu Coda</a> sparks your interest, feel free to reach out for job opportunities or project collaborations directly on <a href="https://kitfucoda.medium.com/">Medium</a> or via <a href="https://www.linkedin.com/in/jeffrey04/">LinkedIn</a>.</p> <hr>