The
Palm
Civet

cloud zoom is a snazzy image zoom jquery plugin. a bunch of options are available and the animations are very smooth. works all the way down to ie6 and minified its only 6kb.

{via}

i’m pleased to announce the launch of hifiving.com, a web application for making lists of things. those things can be videos, audio, links, images, or just plain words. it has been my pet project for quite some time, so i’m glad to get it up and running. please try it out and help spread the word!

in terms of development, the back-end is made with ruby on rails and a handful of other rubygems. i also did the design and front-end development. sprockets and less were heroes here. this is also my first experience using heroku for hosting, which has been great so far.

if dave kaneda’s jquery-based mobile development framework jqtouch didn’t already blow your mind, jqtouch ical should kill any remaining braincells. see the demo video to see how convincingly it looks like iphone os’s ical app.

the example implementation is written in php, but it could be written to fit any server-side scheme.

yesterday i updated swoosh, my jquery plugin for lightweight css-based color animations.

the three big new additions are:
* now you can bind the color animations to events other than just hovering!
* better support for animating rgba colors! 
* animation of css3’s text-shadow property, including x/y coordinates and size of the shadow!

check out the github page for more info.

very slick jquery plugin for reordering and filtering a list of items with a nice shuffle animation. 

plug-in for jquery to create flash-less animations by manipulating the background-image css properties of elements. works from ie6 all the way up to the iphone/ipad.

videoize is a simple jQuery plugin that i wrote for easily creating html 5 video tags for capable browsers, with a fallback option for either flash or quicktime. videoize is a stand alone plugin that includes a minified version of the excellent jQuery SWFObject plugin for embedding flash objects.

to call videoize, simply include the jQuery file and in your $(document).ready function call. videoize comes with the following options and override-able defaults =>

$("#videoize").videoize({
	// location of the mp4 video file
	mp4: "", 
	// location of the ogv file for firefox
	ogg: "",
	// location of the flash video player
	flashplayer: "player.swf",
	// location of video poster image
	poster: "",
	// video height
	height: "480",
	// video width
	width: 	"720",
	// autoplay video
	autoplay: false,
	// show video controls
	controls: true,
	// if set to true, the fallback player will be quicktime, not flash
	quicktime: false
});

the belgian dudes at mr. henry put together a package called head start, which is a front-end framework that they start with at the beginning of a new project. lots of good practice and ideas in here: loading jquery from the google-hosted ajax libraries, dd_belatedpng, a crossdomain.xml file, a hearty list of <meta /> tags, image directory logic, reset and other stylesheets, and more.

i’m pleased to introduce swoosh, my first jquery plugin. as someone who finds color animations to be cooler than basic the on/off effect of defining css :hover states, i wanted a faster and cleaner way to define hover-triggered color animations. swoosh is very lightweight (~4kb half-minified) and is a stand alone plugin that includes a slightly modified version of john resig’s color plugin for readying colors for animation. all colors are defined within css, with the overwritable default of the hover class being ‘hover’. with swish, you can animate the following css attributes =>

color, background-color, border-color, outline-color, 
border-bottom-color, border-left-color, border-top-color, border-right-color

to call swish, simply include the jquery plugin file and in your $(document).ready function call =>

$("a").swoosh();

you can also overwrite the defaults settings with the following options =>

$("#nav a").swoosh({
	// speed of the hover over animation
	speedin : 150,
	// speed of the hover out animation
	speedout : 300,
	// the name of the css class with your hover state color attributes
	hoverclass : 'swoosh',
	// easing in animation
	easingin : 'swing',
	// easing out animation
	easingout : 'swing'
});

then, just define your colors in your css. any type of color definition will work =>

#nav a { color: #333; border-bottom: 1px dotted; border-color: white; }
#nav a:active, .swoosh { color: rgb(22,27,80); border-color: #e1242a; }

you can see the effect in use on the site right now. enjoy, and if you see any room for improvement, email me or fork it on github.

a brilliant idea: porting the ruby on rails and jquery api’s to osx dictionaries, so you can do all sorts of system-wide things with them. you can search the api’s with spotlight, or if you use launchbar you can highlight a function name and trigger the ‘instant send’ action for opening with dictionary.app. you can also use the ⌘+control+d system-wide shortcut when hovering over a function name to get a small pop-up reference window.