The
Palm
Civet

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.

the brainiacs over at viget labs created jmapping, a handy jquery plugin for automatically generating google maps, based on a simple html template and adding a hash to the data attribute to an element =>

<div id="map"></div>

<div id="map-side-bar">
  <div class="map-location" data="{id: 5, 
          point: {lat: 35.925, lng: -79.053}, category: 'Gas'}">
    <a href="#" class="map-link">Some Place</a>
    <div class="info-box">
      <p>Some thing for the info box.</p>
    </div>
  </div>
  <div class="map-location" data="{id: 8,
          point: {lat: 35.935, lng: -79.024}, category: 'Food'}">
    <a href="#" class="map-link">Another Place</a>
    <div class="info-box">
      <p>Example Text.</p>
    </div>
  </div>
</div>

there are plenty of output and functional options available too. seems like a great tool for any web application dealing with locations.

timeago is a lightweight jquery plugin for taking ISO 8601 or mircoformat-ed timestamps and turning them into human readable fuzzy timestamps, i.e. ‘4 minutes ago’.

some benefits of calculating these with jquery instead of server-side:
1. it will automatically update as time passes if the page is not refreshed
2. you can take full advantage of page caching in your web applications, because the timestamps aren’t calculated on the server.

i also dig that ryan’s example use the underused <abbr> html element for the fuzzy timestamp.

in case you are one those user interface perfectionists that would prefer to decide what your form controls looked liked rather than the user’s browser, uniform is an interesting new jquery plugin for creating style-able <select>’s, <input type=”radio” />’s and <input type=”checkbox” />’s.