Category Archives: JavaScript

The Great Assumption – Javascript

A couple of weeks ago I was sitting down with a Google Frontend Engineer friend of mine, talking about some of the JavaScript best practices we all have come to know and abide by. I found myself in agreement with 90% of everything we were talking about. However, something kept eating at me. Why do we both agree on these things? Is it because we actually sat down and did some test? Or is more because early in our careers we were told it was the correct way and have never gone about challenging our assumptions.

So with this post, I am going to start challenging our assumptions on what’s right, OR validate those assumptions with some documented proof. Thus begins our first in a series of posts about performance, and a “Do this, Not that” series. Some of the posts will focus on jQuery, others on core JavaScript, however all of them should give you some insight on what to do in the future.

Continue reading

JavaScript Performance Testing – An Indispensable Tool

Over the course of the last couple of weeks I have been looking into various tools to test Javascript Pefromance. I needed a way to test various JavaScript code snippets to see the overall latency/run time of each. I started looking for a way to manage the tests and be able to reference them in an easy way. Here are a couple of the performance suites I looked at and afterwards, my decision.

Continue reading

Underscore.js Templates

After the post about why Underscore.js, I think it is best to follow up on one of the best parts of the library. Now, I haven’t had a chance to go through the new templating in jQuery, however what I have found with Underscore.js has allowed me to complete some very complicated tasks in my day to day work.

Lets take a look at the documentation for _.template and then we will dig into it a bit more:

template_.template(templateString, [context])
Compiles JavaScript templates into functions that can be evaluated for rendering. Useful for rendering complicated bits of HTML from JSON data sources. Template functions can both interpolate variables, using

<%= … %>, as well as execute arbitrary JavaScript code, with <% … %>. When you evaluate a template function, pass in a context object that has properties corresponding to the template’s free variables. If you’re writing a one-off, you can pass the context object as the second parameter to template in order to render immediately instead of returning a template function.


var compiled = _.template("hello: < %= name %>");
compiled({name : 'moe'});
=> "hello: moe"
var list = "< % _.each(people, function(name) { %>
<li>< %= name %></li>

< % }); %>";

_.template(list, {people : ['moe', 'curly', 'larry']});
=> "
<li>moe</li>
<li>curly</li>
<li>larry</li>
"

Pasted from <http://documentcloud.github.com/underscore/>

So what can we do with this? Lets take a look at showing some employee data:

Continue reading

Underscore.js

Coming from a more technical backend role, and moving into JavaScript many people tend to look for very common functions to make their life easier. However, since JavaScript is considered a “functional” programming language, most of those little conveniences are currently unsupported. So I went searching a bit. Turns out there is a nice little utility belt library that gives us access to all of those built-in methods we all take for granted and are about to be supported in ECMAScript 5.

As the guys over at Underscore.js put it:

Underscore is a utility-belt library for JavaScript that provides a lot of the functional programming support that you would expect in Prototype.js (or Ruby), but without extending any of the built-in JavaScript objects. It’s the tie to go along with jQuery‘s tux.

Underscore.js uses the built in functions if they exist, and if they don’t falls back to its own version. Since there are only a few browsers that currently support ECMAScript 5, it allows us to use these functions even on older browsers.  Now, not only can we start using those constructs before they are officially supported in the browsers, but as soon as they become available underscore.js will get out of the way.

Continue reading

Finding an Element outside of your current iframe

Sometimes you are working within an iframe and need to be able to check for an element outside of that frame. It sounds simple enough, and you are right. The following bit of code grabs an element outside of your current iframe:


if (typeof window.parent != "undefined"){
window.parent.document.getElementById("SOMEID");
}

Pretty simple!

Now, lets look at a use case where you might actually need to do something like this. We will use jQuery to grab all of the links outside of the iframe and set an onclick event that will stop the link from working:


$("A", window.parent.document).click(function(e, data) {
// "this" is now the A that was clicked
console.log($(this));
e.preventDefault();
});

Continue reading