A Designer’s Guide to Learning JavaScript

Saturday July 12, 2014 Tagged with: , ,

Is JavaScript a language for designers? I should think most designers would argue it’s a developers tool and I would find it difficult to plainly disagree with them.

As a designer, a few years ago my opinion of JavaScript would have been very different. I saw it as a tool for making small interactions on web pages, interactions which are now being handled better by CSS.

What drove me to revisit JavaScript was animation, I wanted to understand and create HTML5 Canvas animations, just like I studied Adobe Flash before it. I see animation as a skill in the designer’s realm and it was clear to me that JavaScript was fast becoming the language of movement, both 2D and 3D.

This year I started to relearn JavaScript, my existing knowledge was sketchy so it made sense for a fresh start. I now realise not only how wrong my original opinion of JavaScript was, but also the level of creativity and experimentation you can wield with this wonderful tool.

Granted it’s not for everyone, but if you’re a designer who likes to experiment with CSS then I hope I can provide a little inspiration that’ll push you further.

Ready for Prime Time

First I wanted to know what JavaScript can do without getting too deep, but I also wanted an in-depth resource to provide a greater insight into the topics I’m interested in. I needed a primer, an introductory book to the world of JS, and a full-on, no holds barred book about everything.

I can recommend two primers, the book I chose was JavaScript in Easy Steps by Mike McGrath, the book deliberately doesn’t provide much explanation, instead it focuses on providing small, manageable examples that work and which show you the breadth of the language. The book is also fairly small so it makes for a quick reference for future usage.

If you are new to the realm of programming altogether and have no experience in topics like variables and booleans then I recommend Head First JavaScript Programming by Eric T. Freeman and Elisabeth Robson. The book is large yes, but the scale comes from in depth discussion, a steady pace and comical illustrations which help the learning process. The book makes a notable effort to prevent exposure to advanced concepts and techniques early on.

For a full, in-depth reference book I absolutely recommend JavaScript: The Definitive Guide by David Flanagan. You will often see it mentioned on forums and articles as one of the more solid JS resources. The book is thorough and sometimes complex. When I first read the book I found it comforting that it expanded upon the topics I had read in my primer book, however it exposed me to some JavaScript techniques which confused me. I didn’t skip these parts though, even on chapters that had lost me (which happened more than once) I kept reading because I wanted to expose myself to the words and language being used.

It doesn’t sound like fun, reading a chapter that you can’t understand. But making myself read the text proved beneficial, subconsciously I was recording unfamiliar words and topics which I knew I could revisit once my understanding improves. JavaScript: The Definitive Guide is a book you will revisit time after time to solidify your understanding.

javascript-books

Three books that have helped me tackle the meaty subject of JavaScript

You might consider books an old fashioned way of learning, you might have learned your existing HTML and CSS through blogs and online courses which is absolutely fine. A book however, whether physical or electronic, is a package containing the knowledge you wish to have. It will always be there for you to chip away at and you can easily monitor your progress, making notes and adding bookmarks. The book route has always been my first port of call as it’s an investment, I have bought this book and now I intend to get my money’s worth! We will talk about online courses later.

var practical = true;

So you’ve started to tackle your first book, fantastic, but JavaScript is all about seeing results so you need to test examples and experiment with code as you learn. The theory is crucial but equally so is the practical, coming across bugs caused by mistyping words and forgetting to declare variables is all part of the learning process.

For me, what truly made learning JavaScript different this time around was CodePen, CodePen is a free to use, web service which provides an instant HTML/CSS/JS code editor. Sign up, immediately start coding and save your “pens” as you go. Your code is publicly available for users to view and perhaps provide insight, similarly you are also free to view other users work and to learn how they accomplished certain effects and features.

CodePen provides the perfect environment to practice your JavaScript

CodePen provides the perfect environment to practice your JavaScript

I wholeheartedly recommend signing up to CodePen, getting your hands dirty with even the most basic examples will help solidify the topics being discussed in your books.

See the Pen CodePen Example by Octavector (@Octavector) on CodePen.

Having reproduced some coding examples I felt confident enough to start a unique project. Animation was my goal so I begin a ridiculously over-ambitious 2D game project. Of course if failed miserably but it gave me a self-motivated goal which I wanted to achieve, it also forced me to research areas of JavaScript that I had yet to reach in my books like keyboard events. Again this is something I recommend, giving yourself some personal projects will rekindle your enthusiasm so try and tackle something you would actually find useful or fun to attempt, maybe an image slider or a version of Pong. You will learn so much from failure so embrace it and have a go!

Unfortunately CodePen, by its very nature, doesn’t review and help correct your JavaScript. Some of my pens became too frustrating to complete as I often couldn’t see the wood for the trees. This is when I looked into online resources and where I discovered the free JavaScript course at Codecademy. Codecademy not only provides a similar online coding environment like CodePen, but provides a structured series of tasks which are checked and validated.

Codecademy

I found the Codecademy course surprisingly thorough and enjoyable

You may be thinking at this stage that an online course in additional to two books is overkill, to that I say we’re human beings and we generally don’t learn things by doing it once. The course was a lot quicker and easier then the reference books and did a gentler job at demonstrating the more advanced topics like Prototype. Tackling the JavaScript course was also where I experienced for the first time the “Aha! I already know this” moment. A moment that instantly fills you with energy and enthusiasm, knowing that this particular task is aimed at people who know less about JavaScript then you do, you’re no longer at the first rung of the ladder.
Codecademy is free and I certainly found the additional tuition helpful.

A Path Well-Travelled

Reassuringly, I discovered that the topics I found confusing in JavaScript were globally accepted as the more difficult parts of the language. Scary sounding subjects like function recursion, closures and prototype inheritance stumped me for a while. For these specific topics I took to Google and found a wave of great articles solely written to tackle these subjects. On your travels you might be taken to the following established websites:

Sitepoint: www.sitepoint.com/javascript/
Smashing Magazine: www.smashingmagazine.com/tag/javascript/
JavaScript is Sexy: javascriptissexy.com
Mozilla Developer Network: developer.mozilla.org/en/docs/Web/JavaScript

Additionally, Head First JavaScript Programming by Eric T. Freeman and Elisabeth Robson has a terrific explanation of closures and prototype.

The online resource I revisited most frequently was the Mozilla Developer Network. This vast JavaScript reference, though quite technical, provides a thorough breakdown of all the commands, providing quality documentation and insight into their usage. It became my “go to” JavaScript dictionary.

In summary, this is how I have tackled JavaScript as a designer:

  • I purchased two books, a primer and a more in-depth reference book.
  • I used CodePen to practice exercises while reading both books.
  • I complemented my reading and CodePen work by completing the free Codecademy JavaScript course. (courses units don’t have to be completed in order)
  • I tackled specific or advanced subjects with dedicated JavaScript articles found with Google, from respected sources.

I’m still learning and I believe most scripters are, just like I’m still learning CSS as new developments continually emerge. A little knowledge goes a long way though and the more you learn the more you’ll want to learn. JavaScript is not a small subject but if you can focus on specific tasks or a fun project you want to achieve then you’ll have the two greatest learning assets, enthusiasm and determination.

Copyright © 2014 Cirtinion | About