Fri 16 October 2020

My Week of JavaScript

I had two weeks of vacation planned around PyCon, but canceled it since it didn't make sense to take time off when I couldn't go anywhere because of COVID-19.

I was feeling pretty down when the conference start date passed. I had spent the past few months looking forward to connecting with all my friends in the Python community. It was hard to get work done and I found myself working longer hours to accomplish the same task.

I needed a break; decided to take a week off to learn a new language.

I choose JavaScript.

Why JavaScript

JavaScript was the first language I started with when got serious about learning how to code. While I could hack together a solution, my underlying mental model of how things fit together wasn't that strong.

This is because I first learned JavaScript through the lens of a framework: first Angular and then React. It's a testament to framework creators that users are able to create functioning applications without having a firm grasp of the underlying language.

I appreciate the value of a framework once I understand the underlying principles they are trying to abstract. But when you're first starting out... learning a framework forces you to solve all problems using the framework's way of doing things. When I had to leave the comforts of Angular, I was lost. I didn't know the first thing about manipulating DOM objects without importing a library.

After spending the last few years diving deep into Python and Software Design, I wanted to relearn JavaScript for the ground up.

How I Learned JavaScript

I found a copy of Eloquent JavaScript. Started on Page 1 and started working my way through the book. Read a chapter, did most of the exercises. Rinse. Repeat.

By the time I was done reading the book, I had written a fair amount of JavaScript.

Next I decided to work on focused projects where my goal was to reimplement games I already knew how to make. Once each MVP was done, I forced myself to do something I had not done before.

For example, when making pong, I decided to implement a multiplayer version using WebSockets. It wasn't hard to do, but figuring out all the components required forced me to research and learn more about the node ecosystem.

I also implemented a mostly-functioning Chess engine. My original solution used HTML and Chess piece emojis to make the game interactive in the browser. To stretch my skills, I added chessboard.js as my front-end. This helped me understand how I can plug in 3rd party tools into JavaScript. Also helped me get better at writing Object-Oriented JavaScript.

Retrospective

The only way to improve is to take a step back and assess your progress; retrospectives help me fine-tune my problem-solving skills.

What went well

there are a lot of resources to help you learn JavaScript
YouTube is an incredible education platform
tools like Parcel reduce complexity
no more having to dig into WebPack

What did not go well

not having a firm grasp of which type of JavaScript code I can use
ES5, ES6, ES7, node, TypeSrcipt. Lots of different types of JavaScript
Parcel handled a lot of this complexity for me
not knowing what errors to search due to unfamiliarity of the ecosystem
the infamous unknown unknowns
have to deal with this every time we learn a new language or tool

What can I do better next time

ask people what books they would recommend if they had a week to learn
did poll friends for advice and got a helpful hint about setting up a minimal development environment

Takeaways

Sandbox Development Environment

A minimal development environment makes it easy to quickly iterate and debug. This recommendation is from my buddy Ian.

Folder Structure

.
├── Makefile
├── index.css
├── index.html
└── index.js

File Contents

Both index.js and index.css are empty.

# Makefile
run:
    parcel index.html

<!-- index.html -->
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="index.css">
  </head>

  <body>
    <div id="main"></div>
    <script src="./index.js"></script>
  </body>

</html>

Learning Your Second Language

It's a lot easier to learn a new language when you've already mastered a language.

Python looks like pseudocode. It makes code easy to write and easier to read. It's a fantastic first language. It's also a great language to learn new concepts in. I spent the past 3-4 years diving deep into Python and Software Design concepts.

When I was learning JavaScript, my brain was connecting dots. I was able to connect what I was learning into a concept I already knew.

Fast Feedback Cycle

I can see why JavaScript is one of the most popular languages. It's awesome to see the result of your work every time you refresh a page. It's the same feeling I get when I use the principles of Test-Driven Development.

Vanilla JavaScript Can Only Take You So Far

I spend the last day of my JS week relearning React. It was eyeopening to see all the ways a framework made front-end development easy. While vanilla JavaScript is great and can get the job done, it doesn't scale to large front-end projects.

Next Steps

One of my goals in the next year is to complete freecodecamp's Responsive Web Design Certification.

Conclusion

Learning a language is a great way to stretch your skills. It makes you a better programmer by helping you connect dots in your head.

Siv Scripts