Huge AHA moments #100DaysOfCode #RD1D20

Today marks day 20 of the #100DaysOfCode challenge, and I had a really good chunk of the day set aside without interruptions and a solid sense of determination to really make headway into Gordon’s most excellent Watch And CodePractical JavaScript‘ course.

Scribbles of Commitment

The first one came as a method (pardon the pun) of visualisation when creating Objects. This came about as an example of two Objects that look the same in terms of the written word, and yet they do not equal each other programmatically.

Objects

That’s a really bad explanation, let me try that again.  We were learning about Data types of which there are primarily two kinds: Objects and Primitives. Examples of Objects are our todoList, arrays and functions and are always surrounded by curly braces like so: { }

Primitives are the building blocks of code and consist of:

  • Strings – ‘a thing, another thing, more things’
  • Numbers  – 1, 2, 3
  • Booleans – true or false
  • Undefined – yet to have a definition
  • NULL – nothing

For the me primitives were pretty straight forward, but the bit that got me was to do with the concept of Objects.

So for example, this outputs as False in JS: { } === { }

That literally makes no sense, right? They look the same but they are not the same in JS because when you create an Object, they get committed to a Memory Address so in the example above both objects (curly braces) may look the same, but they have in fact been committed to entirely different ‘memory addresses’.

The aha! moment came when Gordon had us write them down as per my terrible hand written notes above where MyHouse1 and MyHouse2 are the same Objects, but with different Memory Addresses, and by changing the value of one, you can change the value of both, or not. It was a light-bulb moment because suddenly I just ‘got it’.

The combination of using code in the editor, and also visualising it by drawing a representation of it with good ole pen and paper pulled it all together.

The Debugger

The next was even an even bigger moment because for some unknown reason, no-one has ever shown me how to use the debugger built into Dev Tools inside the Chrome Browser.

And what a difference it makes knowing how to use that little beauty! Gordon walks you through how to use it, how to read it, and look at your code line by line. This little pearl of information means I now know how to go through my code piece by piece when their is an issue and pinpoint exactly where it is.

And it’s usually a typo.

Refactoring Code

Refactoring. I’d heard it so many times but until now it has always been a mystery. So we wrote out code out the long hand way the first time around and it was familiar, I had used document.getElementById before.

But only because that was all I knew. What Gordon did on the section on refactoring was explain how the code we had written was perfectly ok and it worked exactly as planned, but it was also repetitive and if we wanted to extend the functionality at some point in the future it was just going to get worse.

So we wrote new code with identical functionality, but by creating a variable, we simplified and made it much more usable, easy to understand and totally simplified. We refactored it!

Smashing it altogether

Up until this point we had only been learning about JS, so when we started putting HTML together to house the actual front end inside of Plunker, I started to see the ‘why’ behind the ‘what’ we were doing. I am pretty familiar with HTML but even then, Gordon still has this incredibly way of breaking things down into simplified terms that are just really too good to be true.

One of those things was his explanation of the DOM. Something again I had heard of but didn’t really know about. Ok, so I am not going to try and explain it because it is kinda tricky but the DOM is the Document Object Model and the way Gordon explained it was via the Console in Dev Tools using an explanation of how HTML, CSS and JavaScript all output ‘stuff’ onto the browser  and that the break down of all those files into parents and children in a tree like stucture, kind of makes up the DOM. Ok so that might not be completely accurate but I got it more than ever before.

Finally – the joys of Code that works

And then pulling it all together and hitting run, and it works.

There is no way to describe the satisfaction of being able to do this and hitting the run button and seeing it work. It is quite simply, unbelievably satisfying.

You can check out what I am working on in Plunker here. For the most part it is pretty self explanatory, just visit the latest version (currently V8) and hit the Play Button … you may or may not need to open the Inspector to see the output depending on where the code is at or what parts interest you.

Summary

  • Learn how to use the debugger as a matter of utmost importance
  • Check your code, typos are so obvious
  • Learn how to ask great questions, even better, become an excellent investigator.
  • Visualise your code by writing it down on paper
  • Read everything you code and understand it, don’t just copy and paste from tutorials or Stack Overflow
  • Be persistent
  • Don’t panic

Leave a Reply

Your email address will not be published. Required fields are marked *