How I Grew As A JavaScript Developer

Posted on February 13, 2017

Learning JavaScript today can seem like a difficult and daunting experience due to the abundance of JS frameworks available. This is causing a lot of new-comers to web development to take the wrong learning route. It's all well and good being able to spin up a Node.js application, minify and compile your files using Gulp but understanding what's actually going on behind the hood is far more beneficial. 

When I started learning JavaScript I took the wrong route too! I jumped straight into jQuery because it provided 'shortcuts' and easily applied cool effects but when my boss asked me to develop our next project using vanilla JavaScript, I was in trouble. 

How I grew

From that day forward, I made the effort to try and code in vanilla JS every time I loaded up my text editor. The following is a list of hand on tasks, methods and ideas I used that I believe contributed to my growth as a JavaScript developer. 

Time

Understand that learning a programming language takes time. I was impatient and wanted to take shortcuts. I was bored and frustrated that I couldn't write great performing JavaScript but eventually I realised that that was ok. Just like John Heywood's famous quote,

'Rome wasn’t built in a day, but they were laying bricks every hour.'

it was the the importance of laying another brick over time that contributed to my growth as a developer.  

Ideas that benefit you

I tried to make things that benefit me. I built a to-do list, budget tracker and bill organiser. They taught me valuable lessons about manipulating the DOM, selecting elements, creating nodes, click events and dealing with input values. The basics, but a great start! 

From this, I went about finding sites and apps that were fun and appealing to me and tried to replicate their build. If I succeed or not, it was still time spent researching and using the language. 'Laying another brick.'

Using frameworks as a road map

Some of my most in-depth learning was from looking at simple plugins built in jQuery. As I had been using the library for a while I could use the pre-existing code as a road map to duplicate the plugin using vanilla JS. For example, I could see that the plugin cycled through an array but was that possible using JS? Of course it was! In my time researching online, I came across You might not need jQuery, a great site that provides the vanilla JS equivalent of what jQuery is doing. 

Master the console

The developer tools console is one of the most powerful tools available to you when it comes to debugging your JavaScript. Start of learning how to use console logs, then using Google's fantastic documentation and tutorials slowly become more comfortable accesing & manipulating the DOM. The console allows you to write your own JavaScript and was a great help to me when trying to visualise objects and arrays.

Codepen.io

I'm a huge fan of Codepen, the popular playground for the front end web. It works by allowing you to create “pens”, which are sets of HTML, CSS, and JavaScript directly in the browser. This is fantastic for spinning up quick tests, with instant previews, without having to set up a development environment. 

On the site there is also a wealth of inspiration and examples to learn from. Some incredibly talented developers use Codepen and it's a pleasure to be able to look through their code and decipher exactly what's going. Creating your own pens is a fun and exciting experience which I couldn't recommend enough. 

Stackoverflow.com

Stackoverflow.com is an invaluable source of knowledge for any programming language and the bulk of your research will lead you to this site. However, it is important to write out the code provided in answers when using them in your own code. This can be time consuming and tedious but doing so will allow you to familiarise yourself with JavaScripts syntax.

Recommended Learning & Reading

A side note

I am in no way, nor do I claim to be a JavasScript guru, over the past 5 years I have surprised myself at how beneficial it is to learn smart and have guidance. As JavaScript evolves so should your learning. If you yourself have found an interesting technique that work for you, please leave a comment below and i'll be sure to check it out.