Think Vitamin » jQuery

Scrolling Made Fun

Mat Helme — Wed, 25 Jan 2012 20:00:31 +0000

Just when you thought scrolling your web page was getting boring. Scrollorama has stepped the scroll game up with this remarkable jQuery Plugin. Scrollorama allows you to manipulate text when you scroll the page. You can do everything from Transitions to Zoom to Parallax. Check out the Scrollorama site to view some great examples and the plugin’s documentation.

This Plugin is great for landing pages and highly interactive web applications. Like CSS3 transitions, use your animations sparingly.

Responsive Video Embeds with FitVids.js

Nick Pettit — Mon, 12 Sep 2011 13:00:24 +0000

My buddy Chris Coyer got together with a few of his friends from Paravel and created a wonderous new jQuery plugin called FitVids.js

FitVids.js allows for Flash video embeds to work in a responsive layout. Typically, this is pretty difficult to achieve; often the video will get cut off, or it will have the incorrect aspect ratio. With FitVids.js, all of those problems fade away! Check out the video below to see FitVids.js in action.

Free Video: jQuery Custom Animations

Jim Hoskins — Tue, 16 Aug 2011 16:06:40 +0000

In this 6 minute video, we look at how to create your own custom animations using the .animate() method.

This video is from Think Vitamin Membership, a high-quality video training site, curated by us at Carsonified and Think Vitamin, with hundreds of short videos on topics like …

New videos are added every week, so it’s a great way to stay up-to-date on all the latest technology and methods. Browse the entire library of videos.

Quick Tips: Easy jQuery Documentation and Responsive Scalable Headlines

Ryan Carson — Fri, 10 Jun 2011 00:31:47 +0000

Scalable Headlines for your responsive layout

by @allison_house

If you want scalable headlines on your fluid or responsive layout, look no further than FitText. It’s a jQuery plugin that makes big type flexible, forcing it to fill the width of the containing parent element.

Easy jQuery documentation

by @commondream

It’s impossible to remember every available method in jQuery, so when I’m working on front end code using jQuery I’m usually digging through their documentation as well. Instead of using the jQuery site, though, I browse jQuery’s documentation on jqapi.com. It’s a site that format’s jQuery’s documentation much more cleanly and provides a search that’s really easy to use.

Handlebars.js Part 3: Tips and Tricks

Alan Johnson — Wed, 13 Apr 2011 12:54:58 +0000

So we’re about done learning about Handlebars.js, but I’ve got a few examples of tricks I’ve found while using Handlebars that I figured I would share. If you haven’t read them yet, I’d highly recommend reading Part 1 and Part 2 of the series on Handlebars before you dive into this post.

The `debug` Helper

It can be easy at times to get confused about where you are in the stack in a Handlebars.js template. I usually keep a debug helper around to help me figure that out.

Handlebars.registerHelper("debug", function(optionalValue) {
  console.log("Current Context");
  console.log("====================");
  console.log(this);
 
  if (optionalValue) {
    console.log("Value");
    console.log("====================");
    console.log(optionalValue);
  }
});

You could then use that helper in any template like:

{{debug}}

or like:

1	{{debug someValue}}

and you’ll see output in the JavaScript console letting you know what’s going on:

Current Context
====================
email: "alan@test.com"
first_name: "Alan"
last_name: "Johnson"
member_since: "Mar 25, 2011"
phone: "1234567890"
stripeClass: "even"
__proto__: Object
Value
====================
Alan

A jQuery Plugin

It tends to be a pretty regular pattern with Handlebars to compile a template, process it with some data, and then fill a DOM element with the results. Here’s a quick jQuery plugin that does all of that for you:


  
    What's Up?
  
  
    
      This is where the content goes!

Updating More Than Just The Template Area

A lot of dynamic applications tend to have a layout that generally stays the same regardless of the template you’re displaying, and then a content area that shows the template that you’re looking at. Maybe there’s a sidebar with some navigation in it that generally stays the same, but each time you update the main content area you also need to update the title on the page. It’s pretty easy to cheat a bit with Handlebars to make that work. Handlebars helpers are allowed to not return anything, in which case they won’t add anything to the template output. You can use a helper that doesn’t return anything to update other parts of the page!

Imagine a site that has a structure something like this:

And maybe the markup looks like this:


  Title
  
    
      Links
      Go
      Here
    
  
  
  	Content goes here!

Here’s a quick helper that will let you update the h1 for the title each time you apply content to the main content area:

Handlebars.registerHelper("title", function(fn) {
  $('h1').html(fn(this));
 
  return "";
});

And finally, a template that uses the helper:

  {{#title}}Details for {{name}}{{/title}}
 
  
    ...user details template stuff goes here...

When the template above is run, it will call the title helper, but since the title helper just returns an empty string, it won’t add anything to the template output. It will, though, use jQuery to update the h1 element for the page’s title.

Wrapping Up

I think this about wraps up the series on Handlebars.js. It’s been fun to share Handlebars.js with everyone, and to hear about the apps you’re writing with Handlebars.js. Please let me know in the comments if there’s anything else relating to Handlebars.js that you’d be interested in hearing about, or if you have any questions.

Yahoo Query Language jQuery Tutorial

Keir Whitaker — Fri, 25 Feb 2011 09:28:28 +0000

In this 9 minute video we look at how to use YQL’s JSONP capabilities to make web service calls directly from the browser, with no need to use your web server as a proxy. We look at how to use the most basic JSONP techniques, and how to write your own convenience methods for jQuery to make executing YQL queries a snap.

This video is from Think Vitamin Membership, a high-quality video training site, curated by us at Carsonified and Think Vitamin, with hundreds of short videos on topics like …

10 new videos are added every week, so it’s a great way to stay up-to-date on all the latest technology and methods. Browse the entire library of videos.

jQuery Animation Tutorial

Keir Whitaker — Wed, 19 Jan 2011 16:00:40 +0000

In this 6 minute video we look at how to create your own custom animations using the jQuery .animate() method.

This video is from Think Vitamin Membership, a high-quality video training site, curated by us at Carsonified and Think Vitamin, with hundreds of short videos on topics like …

10 new videos are added every week, so it’s a great way to stay up-to-date on all the latest technology and methods. Browse the entire library of videos.

jQuery Events Tutorial

Ryan Carson — Sat, 15 Jan 2011 08:35:10 +0000

In this 5-minute jQuery Events video tutorial, we take a look at how jQuery makes handling events a breeze.

This video is from Think Vitamin Membership, a high-quality video training site, curated by us at Carsonified and Think Vitamin, with hundreds of short videos on topics like …

10 new videos are added every week, so it’s a great way to stay up-to-date on all the latest technology and methods. Browse the entire library of videos.

Slides.js – New jQuery Slideshow

Keir Whitaker — Mon, 29 Nov 2010 14:51:15 +0000

Slides is a new simple slideshow plugin for jQuery including features like looping, auto play, fade or slide transition effects, crossfading, image preloading, auto generated pagination and more.

If you have any other slideshow recommendations please let us know in the comments.

jQuery: Custom Animation Part 1 [Video Tutorial]

Keir Whitaker — Tue, 02 Nov 2010 14:34:11 +0000

jQuery Animation Part 1 [Video Tutorial]

Keir Whitaker — Wed, 21 Jul 2010 15:26:46 +0000

Today our free helping from the Think Vitamin Membership video library looks at jQuery Animation.

In part 1 of this series Jim will show you how to get started with “show and hide” animations and lead you on to more advanced techniques.

Around the Web: Design is History, jQuery, & Experience

Chrissie Brodigan — Mon, 19 Jul 2010 18:00:02 +0000

Hey there! It’s Monday, so this roundup is devoted to all things web design (ux, photo, illustration, art, graphics, CSS, jQuery, tutorials, and more). Some links are newsworthy, some retweeted across Twitter, and others just meet our “awesomeness” requirement, and regardless we hope you’ll enjoy them. Without further delay:

Design the Experience (via Drawar)
jQuery, A Designer’s Perspective (via Script Junkie & @emilylewis)
Super shareworthy! Design Is History, a teaching tool for young designers, part of Dominic Flask’s graduate thesis “
“Tweet” by Oyl Miller (via McSweeny’s)
A Better Way to Ask People to be Creative (via Lifehacker)

Wildcard: Paul Graham’s latest essay, How to Lose Time & Money

Best, Chrissie (@tenaciouscb)

Getting Started with jQuery [Video Tutorial]

Keir Whitaker — Wed, 07 Jul 2010 13:15:15 +0000

Today’s free helping from the Think Vitamin Membership video library looks at how to use jQuery.

In this 6 and a half minute video, Jim looks at what jQuery is and how to get it running in your page, explores the different types of source files available, and runs some simple code to test jQuery out.

How to Use jQuery Selectors [Tutorial Video]

Ryan Carson — Thu, 03 Jun 2010 07:10:47 +0000

We’ve decided to release one more video from the Think Vitamin Membership Training Library for you guys :) It’s launching next week, so get ready!

If you missed the Advanced CSS3 Box-Shadow video, feel free to check it out as well (the feedback has been amazing – everyone seems to love them).

Here is a seven minute video that will teach you how to use jQuery Selectors on your site. We will be adding 70+ videos like this per month to the Think Vitamin Membership Training Course Library. You can get access to all the videos for less than $1 per day.

The next 10 people to signup at membership.thinkvitamin.com will receive 50% off their first month. Yippee! :)

View in HD
View on iPhone or Android
View on iPad

John Resig on Advanced Javascript to Improve your Web App

Keir Whitaker — Tue, 06 Apr 2010 10:54:29 +0000

In February 2010 John Resig, the creator and lead developer of the jQuery JavaScript library, spoke at the annual Future of Web Apps Miami conference. During this 25 minute talk John outlines many of the new features and ideas behind jQuery 1.4. A full transcript is available below.

Watch this and other videos directly on our Vimeo Channel

Transcript

Thanks. I want to thank everyone for having me here today. I really appreciate it. I wanted to talk about a couple of things today, mostly around jQuery itself, but hopefully generic enough that in case you’re not using jQuery at least it will still be applicable to your web apps.

There are a couple of techniques I want to look at that hopefully all of you encounter when developing web applications. You always want to improve the performance of your JavaScript code. You always want to improve the accessibility, and you want to make your code simpler. Finally, you want to make the design process much easier.

When it comes to performance, there are a number of things in JavaScript, three of which are fairly easy, but especially so in jQuery. One is event delegation. Event delegation is a technique that routes around the traditional method of binding events. What I mean by that is typically when you attach a click handler to an element, you’re attaching a click to every single element that you want to attach to. This can be really costly. If you have a table with a couple of thousand table cells in it, that is going to be a lot of click handlers to attach.

Event delegation is whenever you attach a handler to some parent element up the tree, for example you attach it to the table itself rather than each individual table cell, and this takes advantage of the browser’s native event bubbling. What that means is when the user clicks on the table cell, the event will bubble up the tree, up to the table, and you can now handle the even there. That’s event delegation.

In this way, you only have to attach one event to the document, instead of a couple of thousand. It’s much faster and scales much better. jQuery provides a couple of methods for handling this; one is called [“dotlive”]. Another one is one that we just added the other day called “the delegate” method. What I think is really interesting about delegation is, in addition to it being much faster, it works in all current and all future elements as well. Even though there are only a thousand table cells to the document at the moment, if you add another thousand, it will continue to work on those as well. You don’t have to attach new handlers to handle them.

The delegate method is one that we just added the other day. This one embodies delegation at its very core. This is the exact example I was talking about. You’re attaching a click event to a core element, a root element such as the table. Then you’re watching for any (in this case) hovers over any table cell. It’s a very simple piece of code, and it gets you exactly what you want in the end.

Live events is a slightly different way of writing and doing delegation, but the nice thing is it works and appears to work in the same exact way as event binding does. You get to use the same syntax. You can use a selector, and then you can attach events directly to it, or seemingly directly to it. In the background, jQuery routes around and makes sure that it goes in all the right places.

For example, here we have these menus that when you mouse over, it does a little animation to toggle out the sub menu. The nice thing is if we add new menu, the animation will also work on the new one we just added. In this way, it’s live. It will continue to work with both current and future elements on the page.

Another technique is something you don’t necessarily have to do yourself, but it’s something that jQuery internalizes. It’s the ability of storing HTML fragments in DOM fragments. What this means is if you’re generating a piece of HTML on jQuery, an HTML string, we’re taking that and converting it to a number of DOM nodes, and sticking that in a DOM fragment.

What I mean by that is the DOM has this concept of, amongst other things, a document fragment. This fragment is sort of a very lightweight container for holding DOM nodes. You can put them in; it acts as a sort of collection. In this case, it’s a very simplified version of what we’re doing in jQuery core, which is if you want to take that HTML snippet and turn it into something held in a document fragment, we take it and enter HTML to generate some nodes. We extract those nodes back out and stick it in a fragment.

What’s interesting about a fragment is that you can perform operations using a fragment and they’re incredibly fast. What I mean by that is you can insert in an entire fragment into a document, but when you insert it, you’re not inserting the fragment itself but the nodes contained within the fragment. In this way, it’s very fast. We got some big speed ups by switching our code to this.

Also, we can now cache those fragments. If we have an HTML string that is coming in, and we’re generating a fragment out at the end, we can cache that result; we can cache the string to the fragment. We can use that and save having to regenerate that entire fragment again, and again. In this way, jQuery internalizes this and handles all that immediately.

Another technique that is good for performance, and is much larger than jQuery itself, is loading your JavaScript library from a CDN. A CDN is short for Content Delivery Network and what that effectively translates into is a bunch of geo-position datacenters around the globe. Not all of us have the finances to build a whole bunch of datacenters all around, but there are a number of great services that handle this. Amazon CloudFront is one of them. We use EdgeCast in jQuery, and MediaTemple is hosting EdgeCast. Additionally, many of the popular JavaScript libraries are also hosted by Google and Microsoft. They host them on their private CDNs as well.

What is really nice about the CDNs, in addition to being geo-positioned, is that the files are automatically minified and gzipped. Minifying and gzipping your JavaScript is the best way to serve your JavaScript code, absolutely. The very first step you should do when pushing JavaScript code into production is to run it through a minifier first. A typical minifier is like the recently released Google Closure or [0:49:21?], or tools like that. Those strip out all the white space, all the comments, all that stuff, and reduce your code down to the smallest possible code you can send to the browser.

Additionally, gzipping is something you can configure in your web server and this will compress your code even further. In the case of jQuery, we started out at just over 150K with raw script, but when we actually transmitted down, we were only sending about 20K with the code, since it’s been minified and gzipped along the way. This is a huge speed up and obviously, this is a big difference in the amount of data that we have to transmit. It saves us bandwidth and it loads faster for the users.

For improving accessibility, a lot of what can be done is working in a very unobtrusive manner. In this way, this is a generic technique that works in all of your JavaScripting, which is that when you override the way that a browser typically does something, for example submitting a form or clicking a link, you can then go through and implement your own functionality. This is effectively unobtrusive scripting. You’re taking something that works already, in a browser, and you layer on your own functionality.

jQuery makes this really easy in addition to providing techniques for handling that, but all your JavaScripts in jQuery code can be encapsulated in the “document ready event”. This event fires the instant your document is ready to be manipulated and traversed. This is very useful because, almost always, this event will fire before the page is visible to the user. You can get in there and make changes to the page, and change how it’s going to display. Then the user will see that modified result.

Probably the most basic example of doing unobtrusive scripting is overriding all links that are going to be clicked, and when they’re clicked we’re going to load the URL into the page itself. The central line here is “return false”, and in jQuery that is telling the browser to prevent the normal click action and we’re going to override it and do something else instead. In this case, clicking this link would normally take us to a different page, but now we click it instead and we load in that page and inject it into our document. In this case, loading and injecting is done with the jQuery load method.

One technique that can serve really well here is that jQuery provides an additional header in every single Ajax request that occurs. It’s called the “x requested with header”, so if you see in your code – this is a PHP snippet here, but it will be similar in any other language it uses. If you see that this header exists, you can then adapt your content to be displayed in a different manner. Maybe you’ll display in an XML or JSON or what have you. A better technique might be, if you want to load in an HTML fragment, is to strip off the header and footer of your page. That way you can dynamically request your page and only grab the inner contents. You can grab that and then inject it into your page.

One alternative to that is this additional trick in jQuery, which is a load method that I showed before; you can load in a file that you specify and grab the HTML contents from that file and inject it into a page. If you’ll note there, on the end, just after the file there is an H2. That is requesting the HTML file, serializing it into a DOM structure, and then searching and looking for all the H2 elements. This is really useful because you can then grab and load in chunks of a remote HTML document, and inject it into your site, without ever doing any server-side manipulation. In this way, as a front-end developer, you have an incredible amount of control over the content that you can grab and load to your page. I love this trick because I don’t ever have to touch the server in this case. It’s great.

Reducing complexity, at least in jQuery land, all relates to enhancing that relationship around the DOM element. jQuery provides a number of tools for making it easier to communicate through a DOM element. I’ll show you what I mean.

jQuery provide an API called the Data API. It provides this data method that you can use, to both access and set values on a DOM element. What’s interesting about this and what makes this different from accessing and getting DOM attributes, is that when you access and set DOM attributes, they’re visible; they’re permanently attached to the element itself, but what we’re doing in jQuery is we actually create a separate data store and store that separately, away from the element. Any time you set or get data on that element, you’re actually setting it in our data store. It’s very fast.

There are a lot of advantages to that. In jQuery, we use this central data store to store all the events that we bind to an element. Instead of attaching the handlers directly to the element itself, we store it in our separate data store. The nice thing about this is we can manage all the garbage collection issues surrounding Internet Explorer. What’s good about this is we have all our data in this separate store, and when the element is removed, we can handle that and clean up all the data we have there. In that way, you will be recapturing all the memory that is being used, every single time, instead of there being nasty memory leaks shooting all around, as want to happen in Internet Explorer.

Another cool thing we have implemented is if you set or get a data value, we trigger an event. You can override this event and implement new functionality. If you’re writing a plug-in where you’re looking for a specific value to be set or get, you can override that and implement your own values that should be set or get. This could be really cool. Then you use the Data API of setting and getting values for your plug-in.

This comes up to custom events. Custom events – what’s interesting in jQuery is we have the typical way of binding and triggering events, and it’s 100% identical to doing your own custom events, so if you have an event that is the name of your plug-in, or in this case my plug-in, it doesn’t matter; jQuery handles that identically and it works identically everywhere.

What’s nice about this is you can create and trigger your own events and use it as a way of communicating around the document. This is a bit different from the typical way in which you would see it triggered in a document, in that it’s not going to be triggered by a click; this is something you have to trigger manually. One thing that we have that is layered on top of this is the concept of event name spaces. Event name spaces allow you to, for example, attach a click or focus, but scoped within a particular name. In this case, we have a click that is within the scope within the name of a particular plug-in. What’s cool about this is you can then unbind all of the events that were bounded by a particular plug-in.

This is important because otherwise, the plug-in would have to maintain a list of all the handlers that is bound to any given element at any given time. That is very costly and something that we don’t want plug-in authors to have to worry about. This is something that you can handle completely just by giving all your handlers names.

In the end, what’s great is you can create these custom events as a way of communicating. The really nice thing about custom events in general is that it is a way of communicating from one-to-many, meaning that if you want to send a message, for example “remove”, you want to tell these DOM elements to remove, whenever that may occur; there could be any number of actions on the other end waiting to occur, based upon that trigger.

For example, here we have two different plug-ins that are both watching for a “remove” event to occur. They’ll both be triggered when the trigger runs. But, when you run the trigger, you don’t have to know that there are events actually bound. There could be zero events bound. There could be ten events bound. There could be any number and in that way it provides a very graceful way of coding. You can just trigger these events to occur, and it will just gracefully happen in your document.

jQuery also provides a way of doing what are called “special” events. These work at a more core, fundamental level compared to custom events. Special events are actually a complete way of implementing an event at a very core level. For example, if you want to simulate – at least in jQuery core, we use it to simulate the “submit” and “change” events in Internet Explorer. In Internet Explorer, those events are rather broken. We also use it to implement “mouse hunter”, “mouse leave”, “focus in” and “focus out” in all the other browsers.

Just to show you an example of what it takes, this is the total code to implement the focus in and focus out events in all browsers, except for IE. It’s actually very little code and it’s overriding the normal behavior so instead of attaching the handler to the document, we do it in a slightly different way.

One plug-in, for example, that makes use of this is a plug-in I wrote last night called “Hot Keys” where you can bind a key down, or a key up, or key press, and you can give a key combination. For example, when the key down one occurs on Ctrl A, do something. In this case, we’re returning false and that will prevent you from doing Ctrl A on the document, selecting everything presumably. You could also say Ctrl A and space Meta A to prevent on an Apple keyboard. This is the sort of thing you can do with special events.

A nice thing is being able to go in and simplify your design. What we provide in the jQuery project for that is jQuery UI. jQuery UI is a set of components and set of widgets that you can use, you can drop into your application, and they will just work. We designed them in a way that they’re not only easy to use but they have a really good API.

On top of that, they’re all themeable and customizable. I’ll show you an example here. You can completely customize them to the style of your website. This is the jQuery UI ThemeRoller. We can sort of see a selection here of jQuery UI components. For example, we have an accordion, a tabs widget, slider, date picker, dialog, progress bar, etc. These are all in jQuery UI core.

You can go in and you can actually start to customize that and load in other themes. We have a number of prebuilt themes. You can load in this orange-ish style. We can try this grayish style. There are different ones we have prebuilt, but what’s nice about this is you can go in and you can customize each of these things completely to your own desires.

If we didn’t like this particular header background and we wanted something different, we could go in and adapt the color to exactly what we wanted to see. Instead of this dark gray or something, maybe we want something much brighter. It will take that color, and actually generate all the CSS and all the images needed to view this theme, and give it to you in a single, nice, compressed CSS file right to the image file. And, it will work in all browsers, including IE6. We have all the alpha transparencies and everything already done.

I love this personally, because dealing with CSS cross-browser issues is absolutely the last thing I want to do. This is some way to route around that, that we’ve already taken care of all those problems and we’ve implemented in a very slick way. One cool thing about this is, for example, there is a number of jQuery plug-ins out there that are already themeable using the ThemeRoller, ones beyond jQuery UI.

For example, this is a jQuery plug-in called jqGrid. Since jqGrid is themeable with ThemeRoller, you can then load this tool called the ThemeRoller bookmarklet. I don’t remember the full name of it. You get this little panel, the same as what you would see in the ThemeRoller page. You can layer it on top of any page just using ThemeRoller. They’re using this bluish theme but let’s say we wanted a grid but we didn’t want that bluish theme; we wanted one that is more orange-ish. You can click it, load that theme dynamically and you can see how it will look, right inside the website. You can get there, tweak it to your heart’s content; you can tweak the header, colors, and everything. That will just work. That is something I find to be really cool.

What are we working on? In the jQuery project there are a few things we’re working on at the moment. We’re working on a better dynamic script loader that will do all sorts of dependency management. We’re working on a new templating engine so hopefully both of those will be coming up in new releases. We’re also working on a rewrite of the Ajax module, to become more extensible. And, perhaps the largest is that we’re working on good mobile support.

We want to make sure that not only is jQuery the best library for doing desktop web applications, but we want to make sure that same code base is the best library for doing mobile applications. To get there, we’re going to be testing against a whole bunch of mobile browsers on a number of different devices. I have a bunch of devices at home that I have set up and I’m already starting to go through them. We’re going to make sure that jQuery is going to work, not only in normal IE6, IE7, IE8, Opera, all the browsers, but it’s going to work in mobile IE, mobile Safari, Opera, all those mobile browsers, at least the ones that are feasible to implement jQuery on. This is something that we’re working on and we hope to make some very good progress here, very soon. There is some more information about the jQuery project if you have any questions, and I think I’m out of time but thank you all for having me today.

Q + A

Ryan: Thank you very much. While we do the switchover we probably have about a minute for a question. Are there any questions for John?

Q: Will jQuery support internationalization?

John: jQuery core probably won’t but we already do some of that for jQuery UI. I think we’ve been talking about moving the validation plug-in, for example, into jQuery UI. The validation plug-in handles a lot of that stuff, especially number formatting. That is something, that and the addition of something like get text replacement that you can use for translating chunks of strings is another thing I’ve seen requested. Again, I don’t think either of those would be in jQuery core so much as probably jQuery UI. Most of those things typically relate to building a UI component, not a jQuery UI component, but a UI component in general.

Ryan: We probably have time for another one.

Q: The need to support Internet Explorer 6 and some of those older browsers, how much of that is holding back jQuery, and one day when you can get away from that, how much more capability do you think it will bring to jQuery?

John: If we dropped support for IE6 today, absolutely nothing would change, at least for jQuery core. jQuery UI might be able to benefit more. The JavaScript engine and the DOM engine in their export did not change between 6 and 7. That is a bit of a lie. They did change. They introduced two bugs in IE7. It’s really frustrating. In our case, it would be better to drop IE7 support than IE6. The reality is that from my perspective, IE6 is the same as IE7. IE7 is shipping in IE8. IE8 is going to be around for a very long time. There is no reason to drop any of these.

You asked how much is this holding us back? At least for jQuery core, not – obviously we have to deal around all these browser issues, but it’s not degrading the performance of the code. We make sure, at the very least, that the code that we’re shipping is going to perform the best it can, regardless. You don’t have to worry about that. I think that’s the primary concern, does it affect my performance, if so, kill it with fire. The other one is can I save some bandwidth by extracting that. Obviously, we could save some file size by removal of that code, not a massive amount, but maybe a couple K. Again, I don’t think it’s holding us back.

Karl Swedberg on jQuery

Keir Whitaker — Thu, 29 Oct 2009 10:31:57 +0000

Next up in our series of short interviews is Karl Swedberg. Karl is the principal author at Learning jQuery and regularly presents and blogs about JavaScript and jQuery.

Editor’s Note: Karl will be hosting a workshop on “jQuery for Designers” at The Future of Web Design New York on November 16-17 2009. You can buy your ticket online now.

For designers that might not of heard of it, what is JQuery?

jQuery is a tool to help designers and developers add interactive elements to their web pages. At the risk of oversimplifying, jQuery’s core feature is a set of commands that enable you to (a) find, or create, elements on a page and (b) do something with them. It’s JavaScript that lets designers and developers avoid the hassles of JavaScript. And since it’s JavaScript, it can do all sorts of stuff without forcing a page refresh.

In your opinion why is JQuery relevant to designers?

JavaScript in general adds another dimension to design, and jQuery makes that other dimension easier to achieve. For designers who are familiar with CSS, writing simple jQuery scripts will feel quite familiar. For designers with Flash experience, jQuery provides a standards-based, non-proprietary, open-source alternative for creating some of the same kinds of effects and interactions as is often done with Flash.

For those considering your workshop at The Future of Web Deisgn New York, what kind of things will you be covering?

I’ll give a quick overview of the jQuery library, and then we’ll look at some practical ways to progressively enhance web sites for better user experiences. I’ll show some techniques for using jQuery to fill in the gaps where CSS, or at least some browsers’ handling of CSS, falls short. We’ll discuss how to put animations to good use and how to avoid their abuse. And we’ll examine a few cool plugins and see how to take advantage of their power and flexibility.

There are a number of really useful plugins available for JQuery. What are the must haves for every designer?

It depends on the needs of the site and often the demands of the client as well. One that I find myself using quite a bit is the Cycle Plugin by Mike Alsup. At its most basic, it’s a slideshow widget that shows images one at a time with a nice transition effect between them. But the plugin is incredibly powerful and gives you the ability to do all sorts of things not just with images but with written content too. It’s particularly nice where a lot of information needs to fit in a small space.

I’ve also begun using the jQuery UI plugin suite quite a bit lately. It makes creating rich user interaction such as drag and drop really easy. Its components are great, too; I’ve used the dialog, tabs, and datepicker in a number of projects.

What do you think is the Future of Web Design?

You mean other than a really cool conference, right? I’m afraid I’d end up looking like an idiot if I tried to predict the future of any technology. In some ways I suppose the future is going to look all too familiar until we can get rid of the albatross of certain legacy browsers. Still, it’s exciting to see what’s going on right now with the newer, better browsers, and I’m hopeful that some of the cutting edge stuff will take root and see more widespread adoption.

The Webkit team is doing amazing things with CSS animations and tapping into hardware graphics to make stunning visual effects. Firefox, Safari, and Chrome have been leapfrogging each other with better and better JavaScript engines — and JavaScript libraries have been tapping into the increased power and performance. We’re seeing more and more use of HTML5 elements such as canvas, audio, and video. Typography on the web is poised to get a whole lot better as progress is being made with font embedding, both on the technical side and the legal side. One thing I can be sure of is that the future of web design is going to surprise me.

Think Vitamin » jQuery

Scrolling Made Fun

Responsive Video Embeds with FitVids.js

Free Video: jQuery Custom Animations

Quick Tips: Easy jQuery Documentation and Responsive Scalable Headlines

Scalable Headlines for your responsive layout

Easy jQuery documentation

Handlebars.js Part 3: Tips and Tricks

The debug Helper

A jQuery Plugin

Updating More Than Just The Template Area

Title

Wrapping Up

Yahoo Query Language jQuery Tutorial

jQuery Animation Tutorial

jQuery Events Tutorial

Slides.js – New jQuery Slideshow

jQuery: Custom Animation Part 1 [Video Tutorial]

jQuery Animation Part 1 [Video Tutorial]

Around the Web: Design is History, jQuery, & Experience

Getting Started with jQuery [Video Tutorial]

How to Use jQuery Selectors [Tutorial Video]

John Resig on Advanced Javascript to Improve your Web App

Transcript

Q + A

Karl Swedberg on jQuery

The `debug` Helper