I’ve found I almost always retain what I’m learning far better if I have to figure something out as fast as I can because the project’s deadline is a few days away. You can do all the tutorials you want, but you’ll never have something etched into your brain as deeply as when you spend 3 hours trying to figure out why something isn’t working. I don’t know how many tutorials didn’t work for me and after about a half an hour to an hour of trying to figure out why, I’d get frustrated and give up. But when its client work, then you have to figure out what’s wrong, whether you’ve just made a simple mistake or the entire approach you took was wrong. And trust me, when you figure it out, chances are pretty good you have a thorough understanding of what you did and how you did it and next time, it’ll take you thirty seconds to write the same code.

Do tutorials, read books and experiment. But you won’t learn faster than when you have to learn something. There’s something about when you’re searching the web, trying to figure out why your code isn’t doing what you want it to do and then suddenly you come across a little bit of information that makes everything click in your head. I learned some much about making a custom WordPress theme the first time I built one for a client, especially when they asked for some custom functionality. Not only did I learn a ton about WordPress, but I also learned a bit about PHP. Now, a custom WordPress theme takes me no time at all and I actually have few problems writing sites that use PHP.

Everyone learns differently but I’m sure that one of the best ways for almost everyone is to be tossed into the deep end. Give yourself a challenge that you can’t walk away from if it gets too hard and you’ll always be stronger for it in the end.

Christian Heilmann pretty much sums up my view of the current state of front end development. He has some great points about JavaScript library’s, like jQuery, and shows how to create an effect most devs think you need jQuery for using CSS and vanilla JavaScript. This video is a perfect example about why Mozilla is genius for employing him.

Now some code:

I’ve based this off an example by John Resig, but he used ninjas instead of pizza. We have a function called Pizza. Inside PIzza, we declare a variable called slices and set it to zero. Next, we create a method and assign it to this.cutSlices which is like saying Pizza.slices. cutSlices allows us to increase slices by one. And then we create method called getSlices that returns slices. Why do we need that? Well, if you take a look at the next four lines of code, you’ll be able to see what’s happening here. We create a variable called pizza and use it to create a new instance of Pizza. Next we called pizza.cutSlice which increase slices by one. When we console.log pizza.getSlices(), we get one. But if we log pizza.slices, we get undefined. Why? Because we declared slices as a variable, we don’t have access to it unless we create methods like getSlices using the this keyword to give us access to it.

Ok, that’s kinda cool but what’s the point of it? Well, let’s look at another example that I think will help make it clearer.

Now we have a function called Pie, which is pretty much the same thing as our Pizza function, except for one difference, instead of var pieces = 0, we have this.pieces = 0. If you look at the lines of code that come after our function, you’ll see the real difference. When we logged pizza.slices, we got undefined, but if we log pie.slices, we get 1 because we have access to that variable. And if you take a look at the last two lines, you’ll see why that can be an issue. We set pie.slices equal to ‘I like pie!’ and when we log it out, we see that it worked. Now if this was a real program, it would be broken because ‘I like pie!’ is unfortunately not a number and we can’t increase it by 1.

So there we go, if you don’t want the variable to be accessible from outside of the function you write your function like the first example. We can also make private methods this way, but that’s another blog post, I think.

And next we need to update our template

And this will work exactly like it did in the previous example, except we’ll have one problem. Nicolas Cage doesn’t use a weapon, so he’ll just have a blank spot and that will look pretty awful. Lucky for us, we can use a conditional statement to check if something exists and only add that part if it does. So we’ll modify the template to look like this:

Since not everyone has a weapon, we can wrap that p tag in an if statement like this {{#if weapon}}. This is like saying if (weapon) in regular JavaScript. If weapon exists, then add this, if it doesn’t, don’t. Really simple and really useful, this can be used if you want to create templates with content that really varies. We can also take advantage of paths in Handlebars.js, which can be used to make more complicated content more organized.

I’ve split name into two parts, first and last, which we’re using as an example of how we can use objects to organize our content even more. But if you loaded the page now, it would should something like [object Object]. The content is in there, how do we get to it?

Now if you run the code, it looks exactly like it was before. This doesn’t really make that much sense to do in a simple example like this but it’s a great option to have if you’re working with a more complicated layout and content. But the point of using these templates it to have less code in our HTML and do all the work in our JS file. This is where Handlebars.js helpers come in. Add this code to your JS file:

We call the registerHelper method and give it a name of ‘fullname’ then we create function where we combine the first and last name. The person variable can be anything, we’re just passing an object to this function. It’ll make more sense when we look at the HTML:

Instead of {{name.first}} {{name.last}}, we have {{fullname name}}. We’re passing name to our helper and getting Handlebars,js to do all the work of combining the names for us. Helpers are another one of those features that will make your like a lot easier when you’re using far more complex and varied content than we are here, it will keep your template simple and easier to use and put all the heavy lifting in the JavaScript.

You can check out the demo.

That’s all I have about JavaScript templates. Use them any time you can because they will make your coding easier and allow you to work a lot faster.

We’re using the same HTML as before, so all we need to do is alter our JavaScript file (I’ve added CSS to style the example, but none of it is necessary for our example to work). What we’ll build is a page with three links at the top for each rating, then we’ll swap out the content based on which link was clicked. Here’s the starting point for our JS (where we left off last time):

Just as a refresher, we use Handlerbars.js to grab and compile the template we have in our HTML and then we use jQuery’s append method to insert that template into the page after we pass the people array to the template. But we aren’t doing anything special, just passing an array to our template, we can use this to set up our different categories. First, we need to add the category navigation to our HTML:

We have three choices, “Awesome”, “Badass” and “Crazy”. And each has a hash of 0 to 2. We’ll use this when the link is clicked to show that content on our page. Now on to the JavaScript, first we need to grab our nav. Add this right under the container variable:

Now we have access to all the anchor tags inside our nav. If this content was being updated and added to frequently, then you’d probably want to create the category choices dynamically too, but we don’t really need that in this example. Next we need to change our array so this will work the way we want. Currently, we have objects in our people array and Handlebars.js runs through them and creates our HTML. Since we can nest arrays, which you should know unless you’re brand new to JavaScript, we can set up our people array in a way to make it easy to swap our categories. Change the people array to this:

Other than the fact that I’ve added a few people to our array, the main change is that we’ve nested an array for each category. And each of those arrays are exactly the same as our original array, it’s an array of objects. Now you might have figured out what we’re going to do. Each category in our nav has a hash that’s a number and that number corresponds with the position of that category in our array. In our original JS, we had this line:

Now we need to change it to this:

Now we’re passing the first item in our people array which is our Awesome category. So if we left it here, then the only change would that Mario shows up and Batman and Nic Cage don’t. And if you clicked on the links, nothing would happen. Let’s add some functionality:

If you’ve used jQuery even once, you should be able to guess what’s basically going on here. We’re using the on method to listen for when one of anchor tags is clicked and then we use preventDefault() so that the page doesn’t reload. Next we create a variable called hash but what’s going on with what we’re assigning it? The word this is equal to which anchor tag we’ve clicked on, and we then have access to that anchor tag’s hash. There’s a problem though, if we just had var hash = this.hash, hash would equal ‘#0’ and we can’t pass that as the position in our array. So we use JavaScript’s replace method and use a tiny regular expression to remove the ‘#’ so when end up with just the number. So var hash = this.hash.replace(/^#/, ‘’) will give us ‘0’ instead of ‘#0’.

In the HTML, I added a class of current to the ‘Awesome’ link, so we remove that and then we clear the HTML inside the container div with by calling jQuery’s html() method and passing an empty string to it. Next we run the same line of code as we did before to append our template to the page but this time, instead of passing 0, we pass whatever link was clicked using our hash variable. And, finally, we add the class of current to the link that was clicked.

And here’s a demo of what we get.

The final effect is nothing that you haven’t seen before, but usually we’ve had to reload the page and use server side code, use big, hard to edit strings of HTML in our JavaScript or use a something like the jQuery tabs plug-in that still requires us to write out all the HTML. Now look at how little code we had to write to get it to work.

I’m going to do another post showing how to use Handlebars.js’ features such as conditionals and helpers.

Let’s say we had some HTML like this:

There is nothing special here, just a couple of divs that list a couple of people, what they do and their rating. This is simple and would take 30 seconds to write. But let’s say that we might have to update the site a fair amount. Not enough that we need to set up a CMS but we’ll update it enough and with enough content that copy and pasting that code will be more work than it needs to be.

I like to use Handlebars.js. It’s super simple to use and it’s amazing how little code you need to set it up. First, just save this JS file, I’ve saved it as Handlebars.js. And then at the bottom of your HTML file you’ll need to link to it and jQuery:

Next we need to create the actual template. Handlebars.js uses curly braces {{ }} for the content in its templates. So what we need to replace in our template is the name, job and rating because we can leave the labels for those in the template because they’ll always be the same. The template will be inside a script tag with a special type attribute:

The type=”text/x-handlebars-template” tells our code that this is a template and to use it to create our HTML.

Wow, what is going on here? First off the {{#each this}}. This is just like a for loop in JavaScript. It’s just saying, for each of our items, use this HTML and add the content. Next we have {{name}}, {{job}} and {{rating}}. This is our content and we’ll set what goes there in the JavaScript we’ll write next. Finally we have {{/each}} which is the closing tag for our each loop. Simply put, for each item we have in our JS code, this will run and add the HTML to our page. If we have 20 items, our HTML will just have these nine lines instead of 180 lines of HTML. Now let’s write some JavaScript and make this work. We’ll create a JS file and link to it, I called my template-script.js. So you should have something that looks like this at the bottom of your HTML file.

Now our JS:

If you’ve used JavaScript at all, you should be able to figure out what’s going on here. First, we get the div with the id of container because that’s where we’re going to stick our generated HTML. Next, we create an array called people that contains all the content for our template. Inside the array, we have objects and each object has name, job and rating just like our template. Handlebars.js will insert the corresponding string into the template when it creates the HTML. Finally, we have a variable called template where we called Handlebars.js’ compile method on our template and we use jQuery’s html() method to get the HTML inside the script tags. Finally, we use jQuery’s append to add the template to the container and at the same time, we pass the people array to the template.

Now if we want to add or remove content from the page, we just edit this JavaScript file. In this example, which you can view here, it wouldn’t be that big of a deal to edit that HTML file, but in one with 500 lines of code, it would be a pain to hunt down the code you want to change. This way, you can just go into your 30 line JS file and add or remove 4 lines of code. I’m going to do another post showing some more complicated examples that really show the power of JavaScript templates.

The important CSS is this:

Crazy simple stuff here, normally the input with the class search has a width of 75 pixels but when the user clicks in it, the focus pseudo-class is activated, just like the :hover pseudo-class and then the width is set to 200 pixels. And with the transition set on the search class, the effect is animated. Plus, in my example, I’ve floated the input to the right, so it expands to the left, which would require some extra jQuery code to pull off.

One thing, this won’t animate in any version of IE (it’s coming in IE10) but the box will expand to the larger width when the input is clicked in.

Here’s the SVG code, just put this in the body of a regular HTML file.

This will draw two rectangles on our page. Let’s make the first one rotate:

This code finds the rectangle with the id rect1 and then we use the setAttribute method to set the transform attribute. To make it rotate, we use rotate(). If you were to write it out, if would look like this:

But that code would just rotate the rectangle 90 degrees and that’s it. We want a rotating rectangle. So we set a variable deg to zero and then use setTimeout to call a function called rotate sixty times a second. Then we check if deg is less than 360 and if it is, we increase deg by one. If it’s over 360, we set deg back to 0. This rotates our rectangle. You might have noticed inside our rotate transformation we have two numbers beside deg. That’s how we set the point that we want to rotate around, the first number is x and the second is y. If we don’t set this, it rotates at 0 0 and we can get some funky effects. Since the x and y on our rect is set to 50 and the width and height is 100, setting the rotate point to 100 100 gets us the center of the rectangle. Now, let’s make the other rectangle move back and forth. Update the JavaScript to this:

We find rect2, set a variable x to 0 and a variable dir to 1. dir is the direction our rectangle is travelling. We use an if statement and see if x is greater than 250 or less than 0, if it is then we set dir to equal -dir, which means, if dir is 1, it becomes -1, if it’s -1, it becomes 1. And then x has dir added to it, so if dir is positive, it gets bigger, it dir is negative, it get smaller. Finally, we use setAttribute like earlier but instead of rotate, we use translate. Translate takes two numbers, the first is x and the second is y. Since we only want it to move back and for, we can just set the y value to 0.

You can check out a demo of this here.

But this isn’t the only way to animate an SVG object, they also have build in methods you can use. Let’s look at another way you can animate a rectangle to move back and forth.

Whoa, what is going on here? The first difference is instead of our rect tag being self closing, we are now using a closing rect tag. This allows us to put some new tags inside that rect tag. The animateTransform tag is what powers this animation. The parts you need to know to understand how this works are these, the type is set to translate, this is just like setting the translate attribute in our previous example. Next we set the from and to attributes, these should be pretty easy to understand, from is where we start and to is where we want to end up. The begin attribute is when we want the animation to start. In the first tag we have 0s and an2.end. This means start at zero seconds or when an2 ends. dur is the duration and it’s set to 3 seconds and fill=”freeze” means when the animation ends, stay here, don’t go back to the beginning. If this wasn’t set, the rectangle would just snap back to its start position. Lastly, we have an id, the first one is an1 and the second an2. Both are set to run when the other animation ends and this will give us a rectangle that moves back and forth like the JavaScript one we made earlier.

That’s interesting, but we can use SVG animations to make something easily that would be a lot harder if we were using JS.

What’s happening here is actually pretty simple. First we’re using the path tag to create a path, you can find out more about the path tag here. We’re setting the fill of the path tag to none so that it’s invisible and giving it an id of path1. Next we’re creating circle and inside the circle we’re using the animateMotion tag.The animateMotion tag is kind of like the animateTransform tag but you set it differently. We set the duration with dur. repeatCount is like the animation-interation-count in CSS animations. Ours is set to indefinite, which is the same as infinite for CSS animations. Lastly, we use a tag called mpath to link to our path that has the id of path1. This will cause the circle to move along the curved path we’ve created.

You can check out a working demo here.

I think the fact that we can animate items along a path we’ve created means that there could be some pretty sweet SVG animation tools built in the future (are you listening Adobe?). And I do think we need tools because the code for creating animations isn’t very intuitive which is a reason why I think SVG animations haven’t really taken off. Well, that and that the last two examples won’t work in any version Internet Explorer, including 9.

I’m just going to show you how to make a simple HTML page with an SVG graphic for the banner image, which you can view here. The easiest way to make an SVG graphic is to use Adobe Illustrator or Inkscape, which is free. I used Illustrator and just saved as SVG. Then all you have to do is used the embed tag and set the SVG file as the source. Here’s the HTML:

And some CSS to make it look nice:

That’s it, we just have to link to our SVG file using the embed tag and it will show up in all the major modern browsers. If you view the source of the svg-robot.svg file, you’ll see it’s just an XML file and it’s far smaller than it would be if our graphic was a jpeg which means quicker load times. But we still have one problem, if you view this in IE8 or earlier, you’ll just get a blank little square. But this can be easily fixed using Modernizr. We just check for SVG support and if it’s not supported then Modernizr will give the HTML tag a class of “no-svg”. And we can use this class to set some CSS:

Now, if the page is viewed in IE8, it looks the same as the SVG version. Now if you’re using something like media queries to change the size of elements on your page, you don’t have to load different images for each screen size, you can just resize the SVG graphic and not worry about anything happening to it when the size is changed.WIth SVG support in IE9 and the new iPad and it’s crazy resolution, I think it’s finally time for SVG to get regular use.

There is nothing wrong with the code here but if you’re going to add multiple methods to the same object, you don’t need to refer to the objects prototype separately for each custom object you want to add. You can do it like this:

This does the exact same thing, saves you some lines of code and it helps to organize your code.