14 days of jQuery – We had 14 days of great links videos and info leading up and after the release of jQuery 1.4.

jQuery API – the jQuery API doc’s got a much needed overhall and are now running on Wordpress.  Some very slick searching and the ability to comment on the documentation has brought live back in to the docs.

jQuery 1.4 was released in to the wild with tons of bug fixes, lots of speed enhancements and a few nice new features sprinkled on top to make it the prefect candy for all jQuery users to quickly flock to.

jQuery Forums packed up and moved from Google to Zoho which has produced a spam free forum again for the jQuery community

jQuery UI 1.8 rc1 has been released with a final release soon to come, bringing us 2 new widgets, button and autocomplete, along with a lot of bug fixes and improvements including an overhauled widget factory.

jQAIP an alternative viewer of the jQuery Doc’s was released for those who don’t like the design or workings of api.jquery.com.  Has its own nice search features and keyboard navigation.

jQuery Source Viewer – a quick and easy way to search through the jQuery source code.  Something that every jQuery developer should start doing after they learn the basics of jQuery.

I am looking forward to updating my projects to jQuery 1.4 and jQuery UI 1.8.  Will be interesting to see what the jQuery community can produce next.

Example of what I am seeing:

var doclick = function(){
    $(this).animate({'left':200},function(){
        $(this).bind('click',doclick);
    }).unbind('click');
};
$('li').bind('click',doclick);

You have duplicated code and will get very messy very quickly as more functionality gets added.

It would be much better to check if the thing is animated and if so just exit:

var doclick = function(){
    if ($(this).is(':animated')) return false;
    $(this).animate({'left':200});
};
$('li').bind('click',doclick);

No adding and removing the event listeners just decide if you really care if was clicked.
It doesn’t event need to be if its animated you can just use a flag to decide:

var flag = false;
var doclick = function(){
    if (flag) return false;
    $(this).animate({'left':200});
};
$('li').bind('click',doclick);
$('div.stopclicks').bind('click',function(){
    flag = true;
});

On the news section of the site the page has a list of the different news articles that have been published. When you click on an article to read it a “lightbox” type popup will open up with the article content. Having the article open up in a lightbox type of popup in the page is new and different but I don’t know if I would call it bad. It does let make it very quick and easy to get back to the list but it I don’t know if its that much better then loading new content in the page and then clicking the back button rather then a close button.

If that news article is longer then the defined height of the “lightbox” the designers wanted the article to be split up in to pages and to add the slick looking page buttons at the bottom. Wait, you want the user to click a button and have what they are currently reading removed and replaced with the next “page” of content, making it so they can’t look back at the rest of the article.  How many people are just going to decide that the rest of the article isn’t worth it and just close the “lightbox”?

The user is going to get to the bottom of the first “page” of the article and spin the mouse wheel a few times, when that doesn’t work he is going to look for a scroll bar. After he finds that there isn’t a scroll bar he is going to re-read that last sentence and make sure he really was right in thinking that there is more content. Then he is going to finally see those slick looking page buttons and click on the next arrow.

The design makes the user have to think multiple time just to read the content that we are trying so hard to get him to read.  Yes there are times when making a user learn something new makes the usability better, but it has to be worth the users time to spend learning.  When you are trying to get a user to read your content you want it to be as simple and easy for him to do that, not make him think about why he just spend 30 seconds trying to figure out how to get more content.

What I found was a comment on a MacOSXHints hint.
All you need to do is throw this in your ~/.bash_profile file.

_complete_ssh_hosts ()
{
        COMPREPLY=()
        cur="${COMP_WORDS[COMP_CWORD]}"
        comp_ssh_hosts=`cat ~/.ssh/known_hosts | \
                        cut -f 1 -d ' ' | \
                        sed -e s/,.*//g | \
                        grep -v ^# | \
                        uniq | \
                        grep -v "\[" ;
                if [ -f ~/.ssh/config ]; then
                        cat ~/.ssh/config | \
                                grep "^Host " | \
                                awk '{print $2}'
                fi
                `
        COMPREPLY=( $(compgen -W "${comp_ssh_hosts}" -- $cur))
        return 0
}
complete -F _complete_ssh_hosts ssh

This will read in your .ssh/known_hosts file and your .ssh/config file and create a list of host names that you can now tab complete with the ssh command. Comes in very handy.

Below is an example of a plugin created with the jQuery UI widget factory.

$.widget('namespace.pluginName', {
	_init: function() {
		// stuff that is called on initialization of the plugin

		//this.options a combination of the defualt options and the ones passed in during the plugin initialization
		if (this.options.foo) {
			//this.element is the element that the plugin was called on
			this.element.fadeOut();
		}
	},
	_privatemethod: function() {
		//private internal function
		//private functions should be named with a leading underscore
		//will only be able to be called from inside the plugin
	},
	publicmethod: function() {
		//this is a public fuction that can be called outside of the plugin

		//calling the private method from inside the public method
		this._privatemethod();
	},
	value: function() {
		//this is a public function that is defined as a getter
		//meaning it returns a value not a jquery object
		return this.options.foo;
	},
	destory: function() {
		$.widget.prototype.apply(this, arguments); // default destroy
		// this is where you would want to undo anything you do on init to reset the page to before the plugin was initialized.
	}

}));

$.extend($.namespace.pluginName, {
	getter: 'value',
	defaults: {
		option1: 'bar',
		foo: true
	}
});

With this you can call the following to initialize the plugin

$('#myelement').pluginName();

To call the publicmethod function you can now do this after initializing the plugin:

$('#myelement').pluginName();
$('#myelement').pluginName('publicmethod');

This makes it very easy to create a stateful jQuery plugins very quickly. All you need is the core of jQuery UI, but most people already have the whole jQuery UI package on their page.

http://mailplaneapp.com/download/google_gears/

Looks like I wasn’t the only one with this problem because the great guys over at Mac OS X Hints just posted a hint that will fix this problem.  Sounds like there is a bug in Snow Leopard that turns off the font smoothing for some external monitors.  Of course none of the Apple monitors have this problem but if you didn’t shell out the extra cash for one of their beautiful monitors you might have this problem.  The fix is very simple,  just open up Terminal and then paste in:

defaults -currentHost write -globalDomain AppleFontSmoothing -int 2

You can try out using 1 or 3 as the value you are setting to have less or more font smoothing. You will need to restart the app you are having problems with and may even need to unplug and replug in your monitor.

if you decide you just want to get rid of the change just open up terminal and paste in:

defaults -currentHost delete -globalDomain AppleFontSmoothing

This will remove the key/value pair that you added and you will be back to the default Snow Leopard way of font smoothing.

MacOSXHints – Re-enable LCD font smoothing for some monitors

EDIT (9/11/2009)
Looks like you can also set the value back to the default value by going in to System Preferences and selecting the “Automatic Font Smoothing” checkbox, this is found at the bottom of the “Appearance” section.

If you go to http://gears.google.com where you normally would get a install button you get this message:

“Your browser is not currently supported.”

Searching around I found a ticket in the gears code.google.com for the issue.  This morning someone from google updated it with some helpful information.

Snow Leopard and Safari 4 introduced some changes which are incompatible with Gears.
Apple made these changes to improve the security of their OS and of Safari. While we
continue to talk to Apple about the issue there is no workaround for us at this time.

Gears continues to work with Firefox on Mac OS X.

You can watch the ticket yourself by staring the conversation.

http://code.google.com/p/gears/issues/detail?id=847#c6

Follow up post:  Work around for Google Gears and Snow Leopard

Check out his article about it here:
http://hivelogic.com/articles/backing-up-flickr/
or you can just grab the latest version of the script from github:
http://github.com/dan/hivelogic-flickrtouchr/tree/master

Not something I currently am going to do as I keep a all of my images on a portable external drive which gets backed up weekly to a terabyte network drive and also gets backed up to Backblaze. I only upload to flickr the images I think are worth people spending there time to look at. The rest go up on my personal photo site hosted by dreamhost.

If you check out the documentation you will find a option for a “helper”.  This option can either be set to a string (‘clone’ or ‘original’) or you can provide a function which returns the helper object.  So I wrote up some code to create a div with the selected row in a new table.

helper: function(event){
	return $('<div class="drag-cart-item"><table></table></div>')
	.find('table').append($(event.target).closest('tr').clone()).end();
},

Then all you need to do is set up a dropable area that knows how to handle that helper.

('#cart').droppable({
	drop: function(event, ui) {
		var classid = ui.helper.find('tr').log().attr('id');
		var name = ui.helper.find('.name').html();
		$('#cart .selected').append('<li id="'+classid+'">'+name+'</li>');
	}
});

Check out the working demo