Siv Scripts

Solving Problems Using Code

Fri 16 October 2020

My Week of JavaScript

Posted by Aly Sivji in Thoughts   

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.


 
    
 
 

Comments