temp.blogname

Repaints and Reflows: Manipulating the DOM responsibly

This started with a conversation I had with Hong at our friend’s dinner party in July.  I tried making small-talk with some new (non-engineer) peeps, but Hong started expounding JavaScript to me and at first I felt bad for being antisocial, but his ideas are always so fascinating that I get sucked in, and soon the other guests have cleared us a wide berth.

One of Hong’s favourite JS topics is about how he prefers not to use jQuery.  I tease him for complaining that it’s “it’s too powerful”, but he has a point –– programmers shouldn’t be allowed to easily modify the entire DOM from any part of your program.  (In fact, he wrote a JavaScript mini-framework* to render his entire DOM using a single recursive function so that his client-side code hierarchy follows the DOM hierarchy.)

This renders markup swiftly because he keeps the entire node tree in memory while he populates it, then appends it to the DOM just once at the end.  When he explained how expensive reflows and repaints were for the browser, I was ashamed that I hadn’t even heard of this concept before, having worked for a year as a Javascript engineer.  So I’m documenting it here for beginners like myself.

A repaint, or redraw, goes through all the elements and determines their visibility, colour, outline and other visual style properties, then it updates the relevant parts of the screen.

Read More

A Useful application of Closures in JavaScript

It’s hard to believe that at this time last year, I knew little to nothing about JavaScript.  Like any good neophyte, I started off reading Douglas Crockford’s “The Good Parts”, which is an excellent book except for the section on Closures.  Closures are famously tricky to understand, so I tried extra hard.  Even after slogging my way through every technical detail, I still wasn’t sure if I was “getting it”.  Like, okay there’s functional scoping, but so what?

So now I present to you a useful application of closures (inspired by this great article on Closures in Python):

Attaching data to a function

Let’s pretend I’m the owner of a website called DaBomb.com.  We sell headphones and snowboards.

1. To fetch a list of all the headphones on our site, I call:

params = {
    color: "all",
    maxPrice: null,
    inCartOnly: false
};
$.get('www.dabomb.com/items/headphones', params, renderListView);

2. When a user changes their search criteria, I make another call:

params = {
    color: "black",
    maxPrice: 150,
    inCartOnly: false
};
$.get('www.dabomb.com/items/headphones', params, renderListView);

3.  When a user goes to their shopping cart, I make yet another call with the new callback:

params = {
    color: "black",
    maxPrice: 150,
    inCartOnly: true
};
$.get('www.dabomb.com/items/headphones', params, renderShoppingcartView );

I am tired of seeing my API url clutter up my code.  What can I do?  I can use a closure to make a new function that knows my API url:

Read More

Why you should use jQuery .on() instead of .bind()

In a previous post, I used the following functions interchangeably:

$('#bubble button').click(callbackFunction)

and

$('#bubble').on('click', 'button', callbackFunction)

I’m now going to give you 2 arguments for using the second, the .on() method instead of the first, the .bind() method.

Read More

jQuery Bugs: When I hover over a second movie, it thinks I’m still on the first movie!

On this poster wall, I’m using a single hover bubble that will position itself correctly when you hover over a movie poster.  When you click the “View Details” button in the bubble, it shows you the movie title.

See what happens though, when you click “View Details” on a second movie.

View scenario code in JSFiddle

Think about it.  To see if you were right, hit the jump for the solution.

Read More

4 Common jQuery Bugs

Last night I was preparing a presentation for my team after watching Elijah Manor’s presentation on this at jQuery 2012.  Thought I would document it here for future reference.

1. Why is my view not updating after an animation?  (Topic: Asynchronous code)
2. Why does $(‘.yellow’) return true even though there are 0 elements with class=”yellow” on my page?  (Topic: $ selectors)
3. Why am I still triggering unwanted events even after I used event.preventDefault()?  (Topic: return false; )
4. When I hover over a second movie, the hover bubble still thinks I’m hovering over the first movie!  (My next post on binding event handlers)

I might add to this list if I discover more.