jQuery Color & Body Background-Color WebKit Bug

jQuery Color is a nice jQuery plugin that allows you to animate color changes and much more. When testing a project that I was working on in Chrome (on Windows and Mac), I stumbled on a weird graphics glitch that occurs when animating a background color change for the entire page.

(Screenshot taken from latest Chrome for Windows)
See the light grey stripe at the bottom? It's supposed to be the same color as the rest of the page.

As far as I know, this is not a jQuery Color bug but rather a WebKit issue because it also affects Safari on Mac.

There are quite a few workarounds.

Fix #1 - Force redraw in animation done handler

Obligatory Stack Overflow link: http://stackoverflow.com/questions/3485365/how-can-i-force-webkit-to-redraw-repaint-to-propagate-style-changes

The accepted answer is very simple; it's just three lines of JavaScript and doesn't require jQuery.

Using this fix with the entire body presented a problem with my project. These rapid changes to display make the page behave like it's scrolling back to the top.

Fix #2 - Apply two-thirds of clearfix to empty div/footer

My instincts told me to add an empty <footer /> to the bottom of the screen and give it clearfix styling. Clearfix corrects this bug. You can actually use two-thirds of a certain recommended clearfix:

footer:after {
    content:"";
    display: table;
}

(It's missing clear:both;)

<footer /> can be changed to <div /> or any number of other elements.

Fix #3 - Apply two-thirds of clearfix to body

Adding an empty HTML element seems like a bad idea to me. HTML5 is supposed to be about content, and here I am adding an element just to fix a browser-specific presentation bug.

As it turns out, you can use this bit of CSS and skip the empty footer:

body:after {

    content: "";

    display: table;

}

I don't know why this works

Maybe I'll update this post later when I figure it out.

Freezing jQuery NuGet Package Version

jQuery v2.0.0 was released last month, and it does not support Internet Explorer 6/7/8. If you use NuGet to include jQuery in your .NET projects, your jQuery files might be updated to this latest version without old IE compatibility. You can force NuGet to keep v1.9.1 when you update your solution's packages, but you have to manually edit the package file for each project with jQuery.

A project's packages.config file can be found in the root directory of that project (where the .proj file is). Open each packages.config file and look for a line similar to this one:

<package id="jQuery"
            version="1.9.1" 
            targetFramework="net40" />

(The targetFramework attribute may be different)

Adding an allowedVersions attribute allows you to control what version will be used by NuGet during updates. Here's an example:

<package id="jQuery"
            version="1.9.1"
            allowedVersions="[1,2)"
            targetFramework="net40" />

allowedVersions="[1,2)" tells NuGet to grab the newest version that falls between v1.0 and v2.0 (excluding v2). This will likely be v1.9.1, the most current version before v2.0.0.

For more information on NuGet versioning, please go to NuGet versioning documentation.

I Like AngularJS (So Far)

I am building a commercial web app using AngularJS that is currently around 3000 lines of JavaScript code (including comments and spacing). I like AngularJS and I'll tell you why.

ServiceStack and jQuery Problems

I'm currently working on a website that uses ServiceStack, and I ran into a problem where complex request objects were not properly created when making requests in-browser using jQuery. Simple (flat) requests worked as expected, but complex requests (with nested objects) led to various null-related errors coming from the service implementation. My unit tests worked fine, but I could not access the 'complex' service within a web browser.

My problem seemed to be with my client-side JavaScript code. I was writing code similar to the following:

// Bad example - DO NOT FOLLOW
$.ajax({
    url: '/url/',
    data: { 'Data': properties },
    type: 'PUT'
}).fail(function() { alert('Oh no'); });

I changed a few lines of code, and everything began working as expected.

// Better example - could probably do better
$.ajax({
    url: '/url/',
    data: JSON.stringify({ 'Data': properties }),
    contentType: 'application/json',
    type: 'PUT'
}).fail(function() { alert('Oh no'); });

This version of the AJAX call specifies content type and uses a JSON string for the data.

According to the jQuery documentation for the ajax function, the default content type is ''application/x-www-form-urlencoded; charset=UTF-8". This default is inappropriate for this particular use case.

The call to JSON.stringify is also important because jQuery's .ajax() function does not convert the data for you.