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.

Fixing IE8 mystery error KB927917

While testing some updates to one of our Facebook applications today, I ran into an odd error message on IE8.  The error message mentioned KB927917, and is caused by trying to modify the DOM before it is built.  At first, I was confused, because the app is not modifying the DOM at all, its a redirect that is part of the authentication step.  The culprit code was something like:

{syntaxhighlighter brush:js;}<script type=”text/javascript”>
top.location.href = ‘http://example.com/foo/’;
</script>

This was working, without warnings, in Chrome, Firefox, and IE7.  To prevent IE8 from complaining, the redirect should happen after the page is done loading.

{syntaxhighlighter brush:js;}<script type=”text/javascript”>
window.onload = function() {
top.location.href = ‘http://example.com/foo/’;
};

</script>

Chrome extension helps you debug Goggle Analytics configuration

If you use Google Analytics to measure traffic and activity on your website, once you start customizing the tracker code, use the asynchronous tracker, or do more complicated tracking it can be hard to verify that your changes have worked.  The asynchronous tracker won’t necessarily emit any js errors and you can’t always waitio see any effect in the analytics dashboard.  

Anyway, wouldn’t you like to see exactly what data the beacon is sending to the mothership?  If you use Chrome, you’re in luck as Google has released an extension to do just that.  Grab the Google Analytics Tracking Code Debugger – Chrome Web Store, then enable the button it places to the right of the location bar.  Open up the javascript console and you should see a stream of the data the tracker sends.

A List Apart: Articles: Apps vs. the Web

Another viable option for mobile development is to use a framework like Titanium or Phonegap to quickly build out an app using Javascript.  I’ve been looking at Titanium a lot lately and digging into its API.  Seems like you can build anything short of a game using its API and there’s a real buzz when you compile the same (or nearly the same) codebase to run on both Android and iPhone devices.

With this article, I’d like to share my experiences with both mobile web and software development to guide your future developments on the iPhone platform.

A List Apart: Articles: Apps vs. the Web

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).

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.

OOP in Javascript examples

Andres at Web 2.0 Technologies has a very informative post about how to use object oriented techniques to implement a robust event broadcasting and listening in javascript.  Follow his advise an dmake your code more reusable.

 What do you want to invoke when the checkbox object changes state? If you’re programming it
in a non-reusable way, you can hard-code the action directly into the onclick event:
if (state==checked) do X; if (state==grayed_out) do y; etc. If you’re programming it
as a reusable component, you need a more flexible solution.