Speed round JavaScript

We are currently in the process of teaching my younger sister programming. Our goal is to turn her into a front-end developer by the end of the year.

The journey started out with her learning about basic HTML, CSS and JavaScript. She was diligently reading through a bunch of books and asking Jason and I questions about things she did not understand.

You see, my sister has neither a Computer Science nor an Engineering background, so finding a great book that fits her style of learning is a challenge. Another important thing to know about my sister is that, when learning, she digs deep. I rarely find her simply following instructions. I always expect that she will ask why the instruction is important to do (i.e. “What’s the point?”).

In the early days, Jason and I would reflect on her questions to try and better understand where they were coming from (sometimes, my sister seemed stuck on seemingly unimportant details). We concluded that the books that she read often assumed that the readers have Computer Science fundamentals covered before reading the book (e.g. a programming assignment that assumes 2D Vectors or undirected graphs are common knowledge). Unfortunately, as I mentioned, my sister doesn’t have those.

Back to basics

Since our mission is to turn my sister into a front-end developer by the end of the year, we laid out our plan:

1. Get her to read a decent book about JavaScript
2. Every week, we have a 1-on-1 to discuss the chapter or section(s) she read
3. Before the meeting ends, we commit (mostly her) to what she will accomplish the by next week
4. She is also expected to ask questions any time, and is discouraged from just waiting until the 1-on-1 to ask questions

To learn JavaScript in more structured way, we opted to start with Eloquent JavaScript.

Going fast

My sister often shares her code complete with various informal console tests to explore how code snippets work. We thought it would be a good idea to impart the practice Test Driven Development (TDD) to her, so she could capture those snippets she was already writing and let the robots help a bit. In order to do so, one needs to set up the codebase to be test ready. Simply put, a test tool can auto discover tests in the code base and able to execute them effortlessly.

In Python, this is super easy. Simply do pip install pytest and you are off! It takes less than a minute to write your first test in the code base.

In JavaScript, well…

The (mis)adventure begins

So, JavaScript is going through a phase. It is trying to clean up the ugliness of the past. Part of the reason I have stayed away from JavaScript is that I find there are just so many hacks/shims/workarounds the community does which seemed very unnecessary to me. I hate shims.

While there are still a bunch of shims in JavaScript (babel, polyfills, etc.), I do welcome the more modern changes recently that make JavaScript saner (or more bearable).

Back to my sister. At this stage, she has started to learn about tests and we want to introduce her to TDD and set her up with a good testing framework - Jest (this works well because we plan to get her going on React once she’s confident with the JavaScript).

Confession: I hate bloated code. If I can start with minimal set up, I always will. Jason shares this value. So naturally, we agreed that setting up the most minimal project to get my sister up and running with Jest is the path forward.

Discovery: Jason got so frustrated with setting up a minimal Jest project. You see, Jest works with CommonJS modules out of the box. However, we are teaching my sister the modern JavaScript (ES6), because it is less error prone in our view.

TIP: The path to a happy coding life is poka-yoke.

So one night, he got so frustrated with the various configuration files and StackOverflow answers, and conceded to use the easiest but more bloated way to setting up Jest with ES6:

1. npx create-react-app
2. delete unnecessary files
3. npm test
4. write your code

Later that night, he complained about the unnecessary complexity of JavaScript and how much he disliked copy pasting random commands and configurations from the web that people share without getting good explanation of why they are necessary.

To which I said, “it can’t be that bad.” And to which he replied, “I challenge you to find better way.” And to which I said, “Okay, on the weekend.”

Challenge accepted

I did not want to waste my weekend coding on setting up Jest with ES6, so I told Jason I will time-box it to two hours.

At 2:30pm, I started…

It was actually not too bad. Here are my steps:

1. Initialize the npm project - npm init
2. Install Jest - npm install --save --dev jest
3. Install Babel which takes care of translating ES6 to plain JavaScript - npm install --dev babel-jest @babel/core @babel/preset-env
4. Add the right babel.config.js
5. Set the test command in package.json to jest --watch
6. Write your code

If you want to see the minimal project, check out my speed-round-js GitHub repository.

More adventures ahead

Next week, my sister will be learning about modules. I am very excited with her progress. I am excited for her to also learn React. I am excited for Jason and I to also learn it.

My nerdy husband actually already made a memory game with React. I am looking forward to my sister making a version of the game on her own and making it more aesthetically pleasing than Jason’s (although his version is not at all atrocious).

I actually do very little to mentor my sister. Most of the work is done by my husband. He is really passionate about teaching others how to write good software. I am very grateful for his passion, patience and perseverance!

As for my sister, I can’t wait for you to fly! Jason and I are very delighted to teach you. You bring so much curiosity and focus to the subject. You ask the best questions. Sometimes, we wish some of our colleagues who have a background in Computer Science or Engineering would ask those same questions!

To the three of us and others having similar journey: keep on coding!