Fixing IE8 font aliasing when using fade effects

One of the joys of testing with IE8 is the added google time that I get to spend hunting down bugs and solutions. If you find something mesbehaving in Redmond’s browser, then the Internet knows about it and has a fix somewhere.

Todays culprit was caused by using jQuery’s fadeIn effect on a div containing text. The way that jQuery has to animate the opacity transition causes the font’s to not be anti-aliased, appearing all rough and blocky during the animation. It’s due to the use of the filter property to affect the opacity, There are a couple of fixes, including hooking into jQuery to alter how the fadeIn/fadeOut/fadeTo effects work, but the simplest solution is to give the element containing the text a background-color.

Although littering your CSS with redundant background-colors will be a pain when you redesign your site, I think its preferable to relying on a javascript solution.

Lightweight UI Plugins for jQuery

One of my newest and persistent obsessions is constantly looking for ways to make dcunited.com load faster.  It’s a challenge because we want to have a content-rich site, with lots of photos, videos, and interactive elements.  There are a lot of techniques you can try, from optimizing images, using subdomains to trick browsers into downloading in parallel, combining images into sprites, and so on.  Of course, none of these techniques can help you if you choose or are forced to use something that has a big payload.

In this case, I was looking at the javascript libraries we use to do tabs, table sorting, and fancy tooltips.  jQuery itself is 31kb minified, which is a little chunky but not a horrible tradeoff.  Most plugins are svelt, except qTip which weighs in at comparatively hefty YUI-compressed 38kb.  For 38kb you get a ton of features with the plugin, but if you aren’t using most of them, its just bloat.

I need a compact UI library for websites

I started looking for a replacement plugin, and quickly found jQuery TOOLS, which states :

Websites are not desktop applications. They are different. What you really need is high usability, striking visual effects and all those “web 2.0” goodies that you have seen on your favourite websites.

Replacing qTip with the jQuery TOOLS tooltip plugin didn’t take a lot of time, by mid-morning I was already testing it across our supported browsers to roll it out to the live site. You can still get pretty fancy with this plugin.  However, you can customize your download to only include the tooltip plugin, which clocks in at just over 3kb minified javascript.  

This is a big difference, although 35kB may not sound like much, that’s 35kb less data that visitors have to download. More importantly, that is less javascript code that a browser has to parse when rendering a page. Javascript parsing can block other downloads and slow page loading.

A jQuery plugin to increase a link’s target area

I’m working on a mobile web site and one of the things that can be done to make it more usable is to make targets larger, so that user’s don’t have to be as accurate to trigger an event.  It is an application of Fitt’s Law. In this case, I was trying to make the target for a link (a html tag) as large as possible and came up with the following plugin. It will look within an element, and if it finds an a tag, it will make the whole element click to go to the destination found. It will also apply a class to the element when users click on it, so that you can visually indicate its been triggered.

Usage

{syntaxhighlighter brush:jscript}
$(‘.big-list’).linkifyContainer({‘hover_class’ : ‘item-hover’});

Source

{syntaxhighlighter brush:jscript}
/**
* Linkify’s a containing div with the first link it finds.
*/
(function( $ ) {
$.fn.linkifyContainer = function(options) {
var settings = {
‘hover_class’ : ‘link-hover’
}

return this.each(function() {
if (options) {
$.extend(settings, options);
}
if ($(‘a:first’, this).length > 0) {
$(this).click(function() {
window.location = $(‘a:first’, this).attr(‘href’);
}).mousedown(function() {
$(this).addClass(settings.hover_class);
}).mouseup(function() {
$(this).removeClass(settings.hover_class);
})
}
});
}
})( jQuery );

jQuery 1.3 released – I heart jquery.

Just when you thought jquery couldn’t get better, the 1.3 release shows drastic performance improvements across a number of benchmarks. That, and the new live event framework, which will make your life easier if you’ve ever dealth with binding and rebinding events (F1 Timetracker & Workload I’m looking at you), are valuable improvements to the core. Has it only been out for three years? How did I ever do any javascripting without it? Release:jQuery 1.3 – jQuery JavaScript Library

One thing that became very obvious during the development of the new engine: We wanted to be able to collaborate on it with other libraries and developers. We saw an opportunity for some solid collaboration with some of the best JavaScript developers – the result of which will help users of all libraries. For this reason we made sure that Sizzle was able to work completely standalone (no dependencies).

Tips for working with jquery

I’m a fan of jQuery because it promotes unobtrusive markup and functionality and has a wealth of plugins to take care of common web development/ajax functionality. Marc Grabanski offers some tips for working with it effectively. I’ll need to look at livequery in some apps I’ve put together. If you need to attach events to elements, and re-attach the same events when parts of the page are updated, it should make keeping track of it all a lot easier. My tip for working with jQuery? Use Firefox with Firebug to inspect the page and debug ajax requests.

5 Tips for Better jQuery Code: jQuery, Tutorial

I’ve been coding using jQuery since shortly after it came out, and well — I’ve been using it almost every work day. Here is a few tips that have saved me time.

Quick tip: tracking link clicks with javascript

You learn something new everyday.  On SoccerBlogs.net, I’ve always tracked click thrus to gauge which posts represent active stories.  Previously, I used to redirect clicks through my own url and then redirect to the final destination.  This was a little slower for users, and I think its not super kosher from google’s point of view.  Using Jquery, it was trivial to send a request to my clickthru listener url via XHttpRequest.  First, I added the class "clicktrack" to any a tag to record. The first version of my javascript listener was bound to the click event of each link.

$(document).ready(function(){
$(‘a.clicktrack’).click(function() {
// tell big brother – ‘this’ is our url to spy on
$.get(‘/clicktrack/’ + this + ‘/’);
return true;
}); });

I’ve simplified a bit, since in my real listener I don’t use the url but something more specific. The return true is important to make the browser actually go to the clicked link. Today, I noticed a curious behavior. In Firefox, when I used my middle-click button to open a link in a new tab, the XHttpRequest was never made. Turns out, and it makes sense, that middle-clicking on a link does not trigger the link’s Click event. I hypothesize that Firefox must copy the url and open a new tab with it. But there is a solution, because middle clicking does trigger the MouseUp event. Changing one line in our Jquery code makes it all work again:

$(document).ready(function(){
$(‘a.clicktrack’).mouseup(function() {
// tell big brother – ‘this’ is our url to spy on
$.get(‘/clicktrack/’ + this + ‘/’);
return true;
});
});

jQuery 1.1 – Slimmer and faster

Version 1.1 of my my preferred javascript library, jQuery, was released today.  They have a great motto – “write less, do more” and as far as I can tell, they live up to it.  The release notes claim speed improvements of 10-20x for selectors over those in 1.0.4.  The release includes some interesting new features – such as passing functions for an attribute or a css property.  The flexibility of that is mind-boggling, but it could also lead to some hard to maintain code in the wrong hands.

Why do I like jQuery over say prototype/Scriptaculous?  At a very basic level, it probably comes down to personal preference, jQuery was easier for me to grok.  But what first got me hooked was its straightforward use of selectors to work on DOM elements.

jQuery selectors are a combination of CSS 1-3, XPath, plus some custom code to glue it together. Essentially, the best parts from both of these query languages were taken, combined, and used to create the final jQuery expression language. If you already know CSS (which most web developers do) then you’re going to be fine.