Posts Tagged: Javascript

The trouble with learning Javascript

So, I’ve been trying to actually learn Javascript this year. I say actually in italics like that because I’ve actually been trying to learn Javascript for years. Maybe I’ll actually get there this year—who knows.

Anyway, Tom MacWright recently tweeted a link to these fantastic slides from Max Ogden (you can watch the video too). You know, Max Ogden the Javascript for Cats guy. He brings up dozens of well thought out points, but I want to pull out just a few of the first ones:

  1. We need better introductory materials [for teaching JS]
  2. the better you get, the worse you get at teaching
  3. people are going nuts over programming education

Let’s start at the end—that one is very hard to refute. The world (that I live in) is basically going nuts over programming education. There are dozens of very good sites to go learn about programming specifically, and Computer Science in general. Codecademy, Codeschool, Hacker School, The Starter League, open courses from Stanford and MIT, Udacity, and many, many more. Here’s 25 brand new options for you. The choice is paralyzing.

That dilemma of choice, leads us to item #2 above: “the better you get…the worse you get” idea. I couldn’t agree more with this one. Just go have a look at jQuery in Action for a perfect example of this. The authors certainly mean well, but the book is so needlessly dense and technical (at least for me) that I found myself quickly turned off. This problem isn’t pervasive or all that limiting, however. There are still lots of amazing teachers out there—Jeffrey Way for example, is as good a teacher as you’ll find anywhere.

So far then, our greatest issues are the overabundant choice of resources, and teachers who have lost touch with their beginner roots. But again, given the variety out there, these are fairly minor issues. What about #1? Do we need better introductory materials? I certainly don’t think so. JS for Cats is superb, jQuery Fundamentals is excellent, as is 30 Days to jQuery, Lynda.com has great stuff, Codecademy and Codeschool are both great, and then there’s the mountain of good books out there. There are many, many, many fantastic places for beginners to learn the basics of both Javascript and jQuery. Within a few weeks of moderate effort, you can learn all kinds about the basics of Javascript and move your way up to doing pretty cool interaction-y things with jQuery. The main things you’ll cover in all the basic Javscript courses are right here (pretty much):


// Basic stuff
var myStringVariable = "I am a string!";
var myNumberVariable = 5;
var combined = "Strings and numbers like " + myNumberVariable + " can coexist! "

// Arrays
var animals = [ 'cat', 'dog', 'sheep', 'cow' ];
console.log(animals[0]);

// Loops
for ( i=0; i < animals.length; i++ ){
	console.log("I love my pet " + animals[i]);
}

// Objects
var cat = {
	name: "Harold",
	favouriteFood: "bacon",
	favouriteSleepSpot: 'couch'
};

console.log("The name of my cat is " + cat.name)

// Logic

if( cat.name === "Harold" ){
	console.log("That sure is a great name for a cat!")
}

// Functions
var area = function(length, width){
	return length * width;
}

// And last, the holy grail for basics: mixing objects and functions
var cat = {
	name: "Harold",
	favouriteFood: "bacon",
	favouriteSleepSpot: 'couch',
	weight: function(pounds){
		console.log("Your cat is called " + name + ". And he weighs " + weight + )
	}
};

This isn’t everything—by a long shot— but there’s a lot of basics in there. And once you’ve gotten all of these, you’re well on your way to Javascript zen (right?). Not so fast.

So what is the problem with learning Javascript then?

The trouble I keep running into, is moving from all this basic stuff to that “next level.” I feel like I’ve come a good ways with the basics—though it’s all fairly unimpressive stuff, I wrote all that sample code above, without any examples to go by, and I definitely could not have done that last month. But I’m finding that I just can’t make that next step. It feels like all the gold these days is in ajax, JSON, and APIs, but I just find much of that stuff to be over my head right now. I’ve spent a fair amount of time studying the fundamentals, and I think that with practice, things like arrays and objects and loops will all become second nature. But at this stage, I really don’t know how I’m going to get from here to where I want to be.

A bridge too far

The trouble with progressing with your Javascript knowledge is that there’s no bridge between the fundamentals and the gold. The internet that I live on is certifiably obsessed with this gold—APIs, open data, Node.js, Backbone, and the 75,000 Backbone alternatives—but I’ve found it almost impossible to sort out how to get started with any of them. I still dont’ actually know what Node is/does, I can’t figure out why/when/where you’d need something like Backbone, and every single API I’ve looked at has its own domain-specific quirks. To top off the issues with APIs, they change so fast. A Twitter API tutorial from 2 or 3 years ago is almost useless now, for example.

As for Backbone, I came across a fantastic piece of evidence to support my theories the other day.  This tutorial from Ramakrishna Nadella wants go step by step from jQuery to Backbone—it seemed perfect for me! Let’s just say that it wasn’t. I was lost from the very first code example—well before he began talking about “separating DOM and Ajax (whatever that means).

Where next?

Speaking of Tom MacWright, I was looking at his dc-government repo the other day, and was really interested in what I saw on first glance. It looked like he was connecting some simple json data with an equally simple html page. I thought, “Hey! This is a perfect place to start!”  I thought I’d be able to figure out how to gather up some of my own data, do some of my fancy Javascripting on it, and append it to my own magical web page somehow. Spoiler: I couldn’t.

But I think something like this is a perfect place to start on what I’ll call Generation II Javascript Learning. A course centered around this kind of project would be absolutely perfect for me at this stage. I’ve been playing with jQuery for a few years (and know it reasonably well), and now I have a fairly good grasp of Javascript basics.  Basically, something in the middle of jQuery and Node/Backbone is what I’m looking for, and I’ve found very little. I’d love it if I could come across a site or program that looked something like this:

Generation II Javascript Learning (for Intermediates)

  1. Basics — what you should know (Javascript and  jQuery basics)
  2. $.ajax — Ajax is always an add-on chapter in jQuery books. It shouldn’t be.
  3. $.each — Loops are covered in great detail in beginners guides, but $.each is never covered. It’s very important when dealing with #4 below.
  4. JSON — creating it, accessing it, looping through it, filtering what you find
  5. APIs — Just focus on GET requests from one single API. Pick Facebook or Twitter or Flickr or something, and focus on it. No POSTs, just GET. POST involves a whole pile of other stuff that you don’t need at this stage. Just focus on the easier part (GET) and build from there.
  6. Project A — Build a tweet-fetcher or a Flickr picture getter, or something like that using a well-established API. STEP BY STEP.
  7. Project B — Build an interface that does something with an actual json data source. IE: Read from a json file into variables, do calculations and fancy things with those variables, and append the results to a web page.  Perhaps a Dashboard of some kind that reads static json data, does some calculations, builds some charts, etc

In conclusion

This has been long enough. Let’s quickly summarize:

  1. There’s an enormous wealth of materials out there for beginners. Enormous. Choice is both a blessing and a curse here, but if you’re just starting out, it’s a blessing. If one site isn’t keeping you interested, try another. 
  2. There’s little out there to help bridge people from Beginner to Intermediate level. I’m not saying that it isn’t hard work, I’m suggesting that there’s way more material out there for beginners than for people who know the basics.
  3. Learning Ajax is more difficult than it should be, and learning about JSON and APIs is still completely wild-west. The info that currently exists is mostly for people who already know this stuff, not for beginners.
  4. It would help if learning materials defined this new audience and marketed to them. Learning about Ajax and JSON in the same detail as in beginner courses would be amazing.

I’d love to other beginners’ thoughts on this, as well as from more seasoned Javascript developers  How did you get over the hump? Maybe I’m the only one finding myself stuck in these predictable ruts with learning Javascript. Maybe. But I doubt it.I don’t have comments here because…well…you know…but please send me a reply on Twitter.

Functions in Javascript (are objects too!)

I meant to post this great piece from John Resig last year when I came across it, but forgot. Better late than never! If you’re still in the beginning stages with Javascript, like me, you’ve read countless times that “everything is an object.” That’s pretty cool, I guess. But what does that actually mean? Is everything, everything an object? What encompasses everything anyway? Are variables objects? Strings? Numbers? Arrays?

Though it all sounds pretty cool, the problem with the “everything is an object” for beginners is that it’s still fairly abstract. You still don’t know what you can even do with objects—you just know that everything is one.  Seeing that functions were objects was a ground-breaking moment for me. It came when I read these few lines:

// Don’t do this: function getData() { }

// Do this instead: var getData = function() { };

There it is. Plain as day. That function you’re creating can be used just like any old variable. Though there’s no real difference between the two, it’s a fantastic way for beginners (like me!) to think about functions.

Functions are one of the biggest stumbling block for beginners, imo. Getting to the point where you can pass the return value(s) from one function to another is really a holy grail and indicates that you’re actually “getting it.” Hopefully this will help with that.