image

This was made using JavaScript.

Ah programming. You’re a designer who always wanted to start but you never found the courage. Sure, you know how to write a bit of HTML/CSS. But you know deep down this is not the real deal. Fear not my fellow friends. Here I am going to share some resources to help you learn JavaScript—once and for all. 

A couple of months back, I started learning CoffeeScript in order to create Framer prototypes. (CoffeeScript is a simpler way to write JavaScript and is thus a little simpler to learn, check it out on their website.) More recently, I realised I needed to learn JavaScript for WUT Design, the design and development shop I cofounded. 

A million things will be easier when you know JavaScript. Obviously, you’ll be able to write small programs and you’ll feel great about it. But it’ll also be easier for you to learn node.js (to write server-side code) and Swift (to write iOS apps) and Python (to, you know, take things to another level).  

What about design though?

Knowing how to write simple programs makes you a more rounded, better-equipped designer. You will know more precisely what you can do and what you cannot do. You will help developers understand your work. You’ll win time and gratitude.

 It is like feeling the wood that is going to be the base material for your next piece of furniture. Nobody is asking you to open a woodworking shop. Yet, to better understand it, you still need to feel it.

Convinced? Good. 

Alright, for some tips: 

  • Build something. Only building something useful or fun will motivate you enough to withstand the simultaneous feelings of joy and pain that come from learning how to write programs. Don’t count on Codecademy, etc., to learn. Do you have a unique twist on the sempiternal todo list? Did you always dream about creating a Twitter bot? Project-oriented learning will yield far more fruitful result than theoretical learning. The best combination? Read a bit, then work. Rinse, repeat, you’ll get better in no time. 
  • Don’t copy and paste the code, write it. You will obviously use code that was written by other peeps. You’ll be tempted to copy and paste but this will not help. When you write the code, you feel that you’re actually doing something. This will fuel both motivation and understanding.
  • Break your program into small bits with pen and paper. This is not something I read very frequently but it was super useful for me. When you want to write an app, break down the idea in small bits. It’ll help you organise your work and measure progress. 

And now, here are a few resources:

  • The Mozilla Developer Network. Forget about W3Schools. Read anything and everything on MDN. They have awesome introductory sections. The reason MDN is good is because it’s a wiki. Anyone with better knowledge can update the page and give better information.  
  • Eloquent JavaScript. It’s a great introductory book on JavaScript that also lays out some fundamentals of programming. Sometimes, the writing is poetic. Consume it!
  • Google + StackOverflow. Here’s a killer combo for you. Never hesitate to google your way out of your problem. Try to use the most precise vocabulary for your request and you will most probably find a relevant StackOverflow thread. 
  • JSFiddle. Want to quickly write a program and don’t want to upload it to your server? JSFiddle is here for you. Run your program, tidy it up and iterate with this superb service. 
  • The Chrome Dev Tools. Download Chrome and open the dev tools by pressing CTRL+CMD+J. You’ll have a console and everything you need to inspect your code. 

If I’m missing something, tell me @usabbag.