My Response to Responsive Design & Why You Should Be Besties with The Devs

Posted on by
Reply

I recently began to redesign my personal website which is just a place for me to show off all the different kinds of work I do (illustration, design, photography). I like to consider myself a pretty qualified front-end developer, so I am always interested in new practices and technologies.

I’ve been hearing and seeing the term “Responsive Design” everywhere. From the amount of screentime its getting all over the interwebs, its definitely only becoming more and more prominent. The reason it is so huge right now, is because everyone has a smart phone and tablets are on the rise. Everyone can get a google result or a webpage up in seconds with the little computer in their pocket or purse. The thing is, the layout of a phone’s screen is completely different from a computer screen, and people are viewing the web in so many different environments. What responsive design does is create a fluid transition between different site layouts, by determining what screen size the viewer is looking at.

So, instead of making three different websites, like one for a desktop, one for a tablet, and one for a phone, you make one website. Within the CSS, you just write different attributes for classes that will change and assign them to a specific screen size media query. Anything that is global, is written once in the global CSS and will apply to each layout.

For example, let’s say I want a different font size on the desktop version as I do for a mobile version. So, I’d go about my way for the desktop version, write the simple class like so:

.leftColumn {font-size: 12px;}

Cool, now on my computer’s browser the font is 12px. But on the phone I find that a little bit hard to read so I want to make it a bit bigger. I create a new section in my css and write this:

@media handheld, only screen and (max-width: 767px) {

.leftColumn {font-size: 14px;}

}

And voila! When it is detected that I’m viewing the site on a browser smaller than 767 pixels, it will change the font to 14px.

SIDE NOTE *** I should also note at this point, that a few of these attributes do not play nice with IE (surprise, surprise). This will like total doodie on IE6 (www.responsiveie6.com), and so far I’ve only tested in IE9 and 8. Looks pretty okay in 9 but 8 gets a little wonky. ***

A lot of the changing layouts rely on percentages and a columned grid. On my site, I have three columns for my content each at about 30% width (taking into consideration margins and padding). I also put a max-width on the columns, so if the screen is enormous, the layout is controlled.

I ended up using a template called the 1140 css grid (cssgrid.net) and it couldn’t have been easier. I often get completely intimidated by new coding styles and technology I’m unfamiliar with, so I was very hesitant to get immersed in this for fear of severe self-humiliation and potential pillow-punching… but it ended up feeling like I’d done it a million times before. This is why people should absolutely start implementing this. Its SO DARN EASY PEOPLE! This is coming from someone who didn’t really know what floats were and what they did until about a year ago. Just do it. There are so many templates out there (just google ‘Responsive web design template’).

This brings me to a topic that has also been popping up a lot, and that is the thinning line that divides designers and developers. There has been such a distinct separation in the past where its two completely different steps. The designer figures out the architecture of the site and then makes the pretty PSD files. Then those get handed off to the developer who just builds off of that psd. There is hardly any collaboration. With responsive design, the functionality and working parts  are now the designers’ concern, as is what the site will look like in three or more different ways is the developers concern. Both parties need to be conscious of the deliberate decisions the other is making.

I read an article recently that discussed working together and how important it is to involve the designer in the development process, and vice versa. I know from personal experience that sometimes some developers end up needing to create a new, minor functionality. Usually, they’ll just make it work and make their own decisions on how it should look because they think it is so minor, and then months later I just happen to see it and it looks terrible!!! (No offense devs… but its my job to pick out colors :) and emphasis on some.. some devs do know good design) and at that point, the project will be too far along to fix or change it. I’ve experienced handing off designs, and then feeling like I’m no longer a part of the project.

Especially with the current state of programming, its not all about being pixel perfect anymore. Its about making the site display correctly across many different browsers and operating systems. But, just because the designs are guidelines, doesn’t mean that the designer shouldn’t be questioned when there isn’t a deliberate design available to reference. A really important step is to assess any and all interactive functionality with the designer. I’ve seen a few hover effects appear out of nowhere after development that I did not design that way. Any page transitions, or changes in appearance, however slight the function may be, should be intentionally designed. One bad gradient, and the site can go from super classy to mismatched and funky.

So, designers, become besties with the developers and communicate with project managers that, yes, it is okay to come to me for a minor thing like a popup modal. And developers, you are amazing at what you do, thats why you do it, and same goes for me… I was hired to make the aesthetic decisions, but I want your input. Its hard to keep track of every little thing that should occur on a site, along with bajillions of potential use cases. So, its really important that if there is a certain function that was not designed, it should be just as important as every other designed element. This is all reliant on communication, and usually there is a middle man and/or woman, like a Project Manager, that needs to be a liaison between the two. If there is any uncertainty about something, everyone should discuss with each other to figure out the best course of action.

Viva responsive design!!

I would love to hear what you think about this… is responsive design the way to go? Do you actually think designers and devs should be separated in their work?

Bootstrap Bowling 2012

Posted on by
Reply

The NYC crew recently enjoyed a fun evening of bowling at Bowlmor with some intense competition between all the equally amazing teams. Tons of pizza and beer were ingested and strikes and spares were exploding all over the place!Frame after frame was bowled and as the end drew near, victories were declared!

With best score overall were The Resolvers with the top scoring teammate being Jade Rothman!

Snagging Best Team Spirit were the Incredibowls!

Another great team was the Alley Gators with super fierce hats!

And bringing all the swag to the alley were the Bootstrap Ballers… fre$h

And the whole gang being wacky… to see more pics, click here!

 

Should you base64 encode a large image sprite?

Posted on by
1

At the end of my last post on base64 encoding I wanted to see how numbers changed when using a large image sprite and also how page speed was affected.

To do this I decided to work with one Google’s larger image sprites nav_logo107.png

And to focus the test I removed 2 of the previous test cases (the individual binary images and split base64 encodes) as it was clear from the first post that they would not be small enough to compete.

So that leaves a pure binary sprite and a sprite encoded as base64 for which I created 2 test pages:

First: File Size

The good news is that results from my previous post were still true.

If we set the baseline that the delivered css for both cases is minified and gzipped then both end up being almost exactly the same overall byte size.

Byte Size Comparison

Second: Page Speed

To check page speed I ran 3 sets of tests using webpagetest.org:

Each test was run 5 times for both First View (no cache) and Repeat View (cache)

My initial thought was that the base64 encoded sprite would be faster (as it would be 1 less request)… and it is when looking at total page load time.

In most tests b64-sprite.html total page load time was around 200ms faster without the additional image request.

So if we were only looking at total load time then we have a clear winner.

But take a moment and look at start render times in those same tests.

On “First View” tests sprite.html has start render times that are around 200ms to 300ms faster in each comparison.

You can see what this translates to visually in this video:http://www.webpagetest.org/video/view.php?id=120412_5129cebbfde1452b10358afa3a1f5dacd106366d

Have you ever heard a user say the phrase “this page feels slow”?

I find that in most cases when questioned further the feeling of slowness was due to the time they were waiting for something (anything) to render to the screen.

This is important to keep in mind when deciding if base64 encoding sprites will make sense for your site.

Yes you are saving a request (which will reduce total load time) but you are also making your css files larger (which could increase start render time).

Even in “Repeat View” where resources are cached locally the start render times for sprite.html are faster.  Yes I know we are talking about 10s of milliseconds but try to think of this on a full production site with lots of other resources.  Remember even though the css is cached locally the browser still needs to pull it from local cache and render it.  So if the cached file is larger in size it will take longer to render.

As an aside: IE8 throws a nice wrench into the gears on this as well. IE8 only supports data URIs up to 32k in size. So if you plan to base64 encode large image sprites you will run into issues with IE8 (basically they won’t render at all in that version).

Conclusion:

I hate to say this but when choosing which option is best it will depend mostly on the project.

I would ask the following questions if you are using a large image sprite:

1) Are start render times more important than overall load time for your users? If yes then based on the above findings it would make sense to try the image in pure binary first and run speed tests.

2) Do you still support IE8? If yes then go with a pure binary sprite.

3) Do you plan to set expires headers the same on css and images? If no then consider a pure binary sprite. That way when a user’s local cache is cleared on your css they won’t have to download a larger file each time.

Thank you for reading and please let me know your thoughts in the comments below

What’s Cooking at Bootstrap?

Posted on by
Reply

Bootstrap recently held its quarterly potluck lunch! Like previous potlucks, the competition was FIERCE! Sixteen employees vied for prizes in the categories of Best Entrée, Best Side Dish, Best Dessert and Best Overall and the entries did not disappoint!

After sampling all the choices, it was time to vote! All of the races were very close, but the ultimate winners were:

Kate Baldwin’s BLT Bites won Best Appetizer/Side Dish

David Bebawy’s Konafa (aka “hairy dessert”) won Best Dessert:

The big winner of the day was Martin Constantine whose Curried Beef won him the title of Best Entrée AND Best Overall.

Click here for more mouth watering photos! Can’t wait for the next potluck!

 

 

Remedies for Writer’s Block and Other Mental Constipations

Posted on by
Reply

Writers’ Block. Everyone gets it whether they’re a writer or not. Its that part of your process where you hit a brick wall and your brain cannot process any new thoughts. I tend to get this when I’ve been staring at a design or wireframes for a few hours and my eyes start crossing. It usually hits in the afternoon, and sometimes just getting up to get a snack or glass of water remedies my predicament, but other times its a bit more serious.

All I need is some serious inspiration… and with the internet at my fingertips, its not hard to find some.

Designers (and non-designers!) can be influenced by so much. Everything in the world can somehow be interpreted into something creatively plausible by anyone with the ability to see. Color, light, movement, and shapes are everywhere, its impossible not to notice.

Here are some blogs and websites that I immediately go to to gain some creative input.

tympanus.net/codrops/

I always go here, even when I’m not stuck, just to check out the new stuff they’re doing. There are constantly new write-ups and demos with all the fancy new trends. I tend to do keyword searches like, typography or design and browse multiple articles within one theme to get in a certain mindset. Originally shown to me by Jeff Chew, I quickly became enamored with this group for their vast skill-set and wide arrange of knowledge across design, the web and usability.

www.thenewgraphic.com

I love coming to this site to clear my design hang-ups. This group of illustrators, designers, writers, photographers and thinkers compile a wonderfully simple, continuously scrolling blog. I find that their design aesthetics reference a lot of vintage and traditional graphic design, which is, appropriately, very graphic. The bold use of color with minimalist type is seen often, along with nostalgic photography and tons of patterns. This blog always brings me back to the basics and reminds me why I love to create.

www.ffffound.com

ffffound is a great site that just has tons of images. What I love doing is scanning through until I see something that catches my eye, and then losing myself in an infinite cycle of clicking related images. There’s a lot of content on here, but with proper determination, you can find tons of inspirational posters, illustrations, designs and photos.

www.jjjjound.com

Clearly, the name is referencing ffffound, but this is a blog created by one guy who has a love for all things menswear, women and sleek design. Warning: There are nude images intermingled amongst so most definitely NSFW. He only posts occasionally but he posts so much its fairly easy to lose track of time scrolling through. This brings out the minimalist in me… his taste and aesthetic are beautifully simple.

www.cdryan.com

Christopher David Ryan is a designer that I keep coming back to. He is incredibly talented with iconography and imagery. He invokes so much thought and feeling through his charismatically simple and joyful images. I usually keep up with his blog, but its always refreshing to just go back and look at his portfolio. A lot of his designs end up being my desktop!

www.designsponge.com

Design Sponge is one of the most renowned design blogs out there, for good reason. Mostly directed towards interior design and decorating, Grace Bonney overflows her blog with tons of design-driven posts that are sure to inspire anybody. She has a ton of different writers from all walks of the earth that keep the content fresh and ever-changing. The DIY and Before-and-After posts are huge for getting you motivated to use your hands and get those creative juices flowing.

www.pinterest.com

This is an invite only site, but once you’re in, it is incredibly addicting. You follow people who like the same kind of things you do, and the homepage pushes other users that are similar to you as well. This is honestly just a huge burst of inspiration… you can search any kind of keyword and just pour over images upon images.

www.forrst.com

Forrst is also an invite only site, but specifically for designers and developers. It is a social network directed towards those who design sites and those who code sites. They encourage critique, feedback and sharing your knowledge with others who ask. I spend a lot of time checking out other people’s designs and reading all the feedback to keep up with what audiences are seeing and feeling. Its like a virtual classroom, and its very rewarding for users who are active in the community.

At this point, I’ve probably lost you to at least one of the above websites, but I hope that if any readers are ever in a pickle, they can find solace and get revived from one of my suggestions.

Would love to hear other people’s suggestions for sites that spur creative thinking, so please share in the comments!

Experimenting with WebGL

Posted on by
Reply

One of the features I’ve been excited to experiment with in HTML5 is WebGL, as I’ve been continually amazed with the various Chrome Experiments pushing the limits of our browsers. A very popular JavaScript 3D library is THREE.js, so I decided to give it a whirl.

View demo >>

As you probably would guess, you can only view this in the latest and greatest browsers (IE is again sent to the back of the class). I personally would recommend viewing this in Chrome.

I started out the experiment using the THREE.JS Boilerplate, just to get a good starting point. I originally was thinking of using an image to render the 3D object, but decided that when zoomed it would get too pixelated. Instead, I used a very useful Ai to Canvas plugin that converted a vector image of our logo to the canvas equivalent.

To get that 3D effect, I ended up stacking a number of planes with the same canvas object.

Though a simple experiment, it shows how far browsers have come with rendering more complex animations/interactions without Flash. Have any favorite WebGL examples to share? Post it in comments!

Jeffrey Chew
Director of UI Design & Development

Create Your Own URL-Shortening Service in 15 Minutes

Posted on by
Reply

URL shortening is widely used and there are a number of sites, such as tinyurl, that offer the service for free. So, why roll your own?

  • Because it’s easy. Using PHP, MySQL, and Apache , it can be done in 3 steps that can take only 15 minutes.
  • You reduce your dependency on external services. If a site like tinyurl was to go out of business, any links published through them would be dead.
  • You can use any short names you want .

Step 1: Create the schema in MySQL

Login to MySQL and run these queries:

CREATE DATABASE my_tinyurl ;
USE my_tinyurl;
 -- Create a table to hold the mapping from short URL to real URL
 CREATE TABLE links (
 id INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
 link VARCHAR(255),
 short_link VARCHAR(100)
 );
 -- Add a user and grant privileges for the database: :
 CREATE USER ‘tinyurl_user'@'localhost' IDENTIFIED BY 'password';
 GRANT SELECT,INSERT,UPDATE,DELETE ON my_tinyurl.* TO ‘tinyurl_user'@'localhost';
-- Add one record for testing
 INSERT INTO links (link,slink) VALUES ('http://bootstrapsoftware.com','b');

Step 2: Script the translation service

Create a file called index.php and place this code inside

<?php
# connect to the database
$db = mysql_connect('127.0.0.1','tinyurl_user','password') or die("Database error");
mysql_select_db('my_tinyurl', $db);

# get the real link
$domain_name = mysql_escape_string($_GET[domain]);
$result = mysql_query("SELECT link FROM links where short_link = ‘$domain_name’");
$array = mysql_fetch_assoc($result);
$redirect = (is_null($array['link'])) ? "http://google.com" : = $array['link'];
header(“Location: $redirect”);
?>

Step 3: Rewrite the short link as a GET parameter

In the same directory as index.php, create a .htaccess file and place the following rewrite rules inside:

 RewriteEngine On
 RewriteBase /
 RewriteCond %{REQUEST_FILENAME} !-f
 RewriteCond %{REQUEST_FILENAME} !-d
 RewriteRule (.*) /link/index.php?domain=$1 [L]

New links can be added by manually inserting them into the database. Or, an html GUI and PHP script can be created to add them.

How might you use a service such as this as part of your application or business?

Client Side Optimization: Pseudo Granular Beginings

Posted on by
Reply

On Why.

We spend time trying to find ways to optimize web pages.  Client side optimizations can take place in many areas, and perhaps the most basic is the number of DOM elements.

Any page speed testing suite will provide a list of places one can look to increase performance.  We like page performance because…

  1. SEO boost :: 1st time visitors
  2. Snappier rendering time for the user :: repeat traffic
  3. Bragging rights :: Clients
  4. More page views and conversions
  5. etc…

Always on that list are those pesky DOM elements.  We can all remember a time ( showing my age? ) when table layouts were the standard, and you can bet those html costs where high.  With more refined uses of HTML and CSS the web has settled into some common layout structures.  Grid systems, boilerplates, templates etc.. all have similar beginnings and for the most part are sound foundations.  No-one can code the pages for us however(nor should they) and it’s the meat of the docs where things can get out of hand.  Complex designs, unreasonable requirements, and time constraints often lead to developers just “making it work”.  There is something to be said about getting it done, but if we can get it done a bit cleaner each time … don’t forget your platonic forms.

Let’s say there are 2 html elements for every icon/text; 1 for the icon, 1 for the text.  I will discuss how to use pseudo elements to remove 1 of those elements.  I know it does’t sound like a lot; but it means less coding, less maintenance, less rendering, more speed, happier browsers, and you on that edge between madness and genius.

On How.

A previous post by one Anthony C. discusses base64 encoding of images, spriting and some interesting combinations of the two.  I will be using individual base64 encoded pngs as background images to illustrate the use of pseudo classes for iconography. So let’s jump right in!

.icon:before {
    content:" ";
    display:inline-block;
    vertical-align:middle;
    padding: 0 3px;
    background-repeat:no-repeat;
    background-position:center center;
}

I am going to use this .icon class as a base for all of my icons. Let’s examine each declaration, because we don’t want to have extra code.

  1. content: ” “; :: This is so we have “something” with which to work, think of it as the a canvas of sorts. Literally it tells the pseudo element to contain a “space” character.
  2. display: inline-block; :: Inline elements won’t take height / width, and Block elements will break inline layout so we use inline-block.
  3. vertical-align: middle; :: Really a matter of preference, but I like my icons to be centered vertically against the text, if it’s there
  4. padding: 0 3px :: Also a bit of preference, giving some breathing room to the icon.
  5. background-repeat: no-repeat; We only want to see the image once, avoid ugly “clipped” repeats in padding.
  6. background-position: center center; If we’re using padding, let’s keep that image in the center;

At this point, if your asking “what’s a pseudo element?” you may want to take an obligatory visit to w3schools or hit that google for quick derp.

Next we have an image specific icon declaration in our css, this one is for a “save” icon.

.icon-save:before {
height:16px;
width:16px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABR0RVh0Q3JlYXRpb24gVGltZQAzLzQvMTIovRTHAAAAHnRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M1LjGrH0jrAAAB+ElEQVQ4jZXTPWgUQRjG8f/ezulekRiJJKmCGqOWwaAIJx6IlUoQiV+VtQh2IqKFYGdhESxsFCEWh7HwinBYSAxiGpEDiWiRpNjz1JgjHvFyLnvzzlis97EXSPCBhXkH5sc7MzvY/8ydJ6/sVH62WTvWWpt99JKfSxX6jnazVZ75/ZiqSzpZ5PbN8yiAHwu/ODU6zv5zXdiOBffyX/m8HDTrrh7IXNjHi4c1hqdnIsAaQxiGaGsRkRjwYbHMybMjfFmD3zqamyvDyJUTPM3mGoDFGEMoQr1ejwG7exxyk2+bteM4VI8fY34iy42xXREgYtBaE4oQdAC3xvbE6vH7c+jJaUaDVS6PXYoAIwYRITRmA9CZob7tHEh24TpFgDiw/j1kW7+3KXD3zCGW8xVmvpkW0NjCwvPiposbSaVSiLQBjQ4KhQLWdl5kFMdxmuNMJoNpB0RHHbiuS/r60IabSCaTvJtYZHBwkFKphNYa0TFAEBGUUlSrAbMPPgFw5OreZstKKQA8z0NEEC0tQNc1iUQCpRS1WsjAwAAAtVoIgLVuDDDGoOvRX5UAOH0tTe71FOXVFcLQopRCKYW10deYawfW1/5EHfi+z47ebg5fHObN44/U3i/Bzn+bL7TOYWU+fqi9Bz1838epVCo2CIINb2CruK6L53n8BdiVNWjQvqNqAAAAAElFTkSuQmCC);
}

…and the a touch of reasoning

  1. height/width :: The literal size of the icon
  2. background-image :: Telling the browser we’re using a base64 png, and image data.

That’s the nitty gritty, all you need now some html to hook into.

<a class="icon icon-email">Email</a>

You can add helpers to your icon class later, for example perhaps you don’t want to display the text, but you still want the page to contain it.

.icon-notext { font-size:0; text-index:-9999em; }

Caveats:

You knew it was coming… What browsers support pseudo elements?  Most do, all but our favorite two class clowns; IE6 and IE7.  IE6 we can put to rest, but IE7 is still in that market % for some folks where it commands attention.  The silver lining there is that a fail of this doesn’t result in something ugly, just no icon.  So if you’re cool with that, so am I ;) .

And So On…

If you’re looking to push things further, check out this bit about pure HTML/CSS GUI icons.

The goal is flexible code but not alot of it, and hopefully this is a step in that direction.

Happy Coding!

Byte size difference between Image Sprites and base64 encoding

Posted on by
2

A good friend introduced me to the concept base64 encoding and I have gone down the road to research what scenarios it is best suited for.

On that road I found a great post by David Calhoun testing byte sizes by comparing binary images to their base64 counterparts. After reading it I thought it would be interesting to extend his UI icon test one step further and include an image sprite to see how that compares in byte size.

Note: I understand the drawbacks David has mentioned regarding sprites however I believe those drawbacks are manageable considering the potential gains to be had from a file size standpoint. Especially if you are managing more than just icons in your sprite files.

How I setup the test:

So lets see how the numbers work out…

What I thought I would see:

  1. Test Case#2 (icon-sprite.png + combined-binary.css) would be the smallest in total filesize when compared to Test Case #1 (split-binaries.css plus its images) and Test Case #3 (split-b64.css)
  2. Test Case#4 (combined-b64.css – which replaces the image sprite with its base64 counterpart) would be the smallest total file size after Gzipping was done
  3. Gzipping Binary Images would sometimes lead to larger filesizes as those binaries would typically be compressed fairly well to begin with (or at least should be if you care about responsiveness)

The Results:

  • View on Google Docs
  • assumption #1 turned out true.  The creation of a sprite from the 5 icon images was smaller in file size than both separate images and separate base64 encodes.
  • assumption #2 did not turn out to be true.  However it was by such a small amount that you could pretty much say it is equal to Test Case #2 (we are talking about 23 bytes here)
  • assumption #3 was interesting as gzipping of the binary spite resulted in a slightly larger filesize but gzipping the images individually ended up being smaller in total size.  The differences are pretty tiny anyway and because of potential overhead in the gzip process this would probably not be needed if you are good about optimizing your source images.

So what does this really mean?

I think the numbers above depend on what you prefer to use and how you like to work.  To be transparent I have always preferred image sprites.  My opinion is managing them becomes easier the more you use them and there are a lot of good techniques today to get around some of their earlier drawbacks (such as using pseudo selectors to help get over clipping issues).  So considering the findings above I personally would probably continue to stick with sprites.

However… you could possibly get benefit by making a sprite, converting to it base64 and then gziping it.  The gain here would be 1 less request (and that could mean a lot on a larger site).  To really test this idea I am going to build a case using a larger sprite file that has more than just icons in it to see how it scales.

In the future I am going to try to run performance testing to see baseline speed for each case from different locations (I’ll use webpagetest.org).  Number of requests can sometimes make a huge difference in those tests so that might help put some additional clarity around this topic as well.

Further reading on base64:

  • Wikipedia entry
  • ftp://ftp.rfc-editor.org/in-notes/rfc3548.txt
  • Understanding Base64 Encoding
  • http://calebogden.com/base64-encoded-fonts-images/
  • http://www.nczonline.net/blog/2010/07/06/data-uris-make-css-sprites-obsolete/

jQuery live()

Posted on by
Reply

Recently, a fellow developer at Bootstrap gave a couple of talks about JavaScript and jQuery. In particular, he discussed how jQuery’s live() and delegate() methods can improve performance and reduce repetition in your code.

Normally, when using jQuery to add functionality to an element (for example, binding a delegate function to the click event of an anchor element), we’d have to write something like:

function initializeAnchors() {
	$("a").click(function() {
		functionToCall();
	});
}

However, in this example, every time a user clicks on any link on the page, all of the anchor elements on that page get processed. One way to optimize this is to call this function for an explicitly-passed anchor:

function initializeAnchor(anchor) {
	$(anchor).click(function() {
		functionToCall();
	});
}

The downside of this approach is that whenever we add a new anchor element, we would have to specifically call this function to bind that anchor’s click event to the delegate.

As a result, we would have to call initializeAnchor(thisAnchor); and initializeAnchor(thatAnchor); over and over in our code, leading to bulky code that is difficult to maintain and error-prone.

As of version 1.4, jQuery introduced the live() and delegate() functionality.
This means that you no longer need to bind a delegate to an event after creating an element.

Instead, every time an element is created that would have been selected by jQuery, the specified event is automatically bound.

Let’s try it:

$("a").live("click", functionToCall());

Now, all anchor elements that are ever created will call functionToCall() when they’re clicked. We’ve solved the problem of having repetitive code, but we haven’t solved the performance problem.

The issue is that the selection process that jQuery runs is a very expensive operation, because it must parse the entire DOM before returning its wrapped result set. The live() method runs this selection process every time it gets called (which, in this case, is every time a new anchor element is added to the DOM.)

This is where delegate() comes in.  If, for example, we know all of our anchor elements will reside within a div element with a class of dynamicAnchorsDiv, then we can use delegate() to improve the performance of our JavaScript substantially. That’s because delegate() lets you bind a target function to the events of specific DOM elements, rather than the entire tree.

This gives us:

$("div.dynamicAnchorsDiv").delegate("a", "click", functionToCall());

This code will execute functionToCall() whenever an anchor element in our div is clicked, without requiring us to bind that event ourselves and without jQuery running through the entire DOM each time. The final bonus of using deletegate() is that it’s methods are chainable, one of the greatest benefits of jQuery in general.

What does that mean? It means that we have to write less code, which lowers the risk of introducing bugs, makes updates and enhancements easier to write, and brings lots of happiness to developers like us.