Better jQuery Placeholder Plugin

JavaScript // February 19, 2011

A while back I made a post about a simple placeholder script I wrote. The idea was to provide the placeholder functionality that browsers like Chrome and Safari have, to browsers that don’t have it, like Firefox and IE. The script was very simple though and not smart in a few ways, including inability to handle password fields and an incorrect way of checking placeholder support in the browser. Since then I wrote an improved version of the script, in the form of a jQuery plugin. The highlights of this improved script include

  • proper use of jQuery’s plugin framework to create a fully chain-able plugin
  • support for password fields and text areas
  • correct check for placeholder support in browser
  • and just overall a better written piece of code

You can see a demo of the plugin in action and download the commented source file (4.7kb),  or the minified source file (1.7kb), or the clean (not minified but not commented) source file (2.6kb). Below I’ll go over some of the more interesting parts of script. Read more »

Yoast talks about Making Sure Your Content is Found

SEO // February 11, 2011

I recently saw a presentation by Joost de Valk (a.k.a. Yoast) about SEO, or more specifically about how to make sure your content is found (which is also the title of the presentation). It was a very well made presentation — good pace, straightforward, a lot of great tips, and I ended up gaining many new insights into the topic. If you’re interested in the topic and have 40 minutes to spare, I highly recommend watching it.

Joost breaks up the task of getting more people to read your content into four steps. Read more »

jQuery 1.5 is out

JavaScript // January 31, 2011

The jQuery team has released a new version of their awesome framework — jQuery 1.5. While not seemingly as significant as the 1.4 release, they made quite a few major changes under the hood.

On top the various bug fixes and performance enhancements one of the major changes in jQuery 1.5 is a complete rewrite of the Ajax module.

Perhaps the largest change is that a call to jQuery.ajax (or jQuery.get, jQuery.post, etc.) now returns a jXHR object that provides consistency to the XMLHttpRequest object across platforms (and allows you to perform previously-impossible tasks like aborting JSONP requests).

Read more »

Crazy long jQuery animation chains for a slideshow widget

JavaScript // November 4, 2010

So I was recently coding a slideshow widget using jQuery. Nothing fancy — just a box showing one image, you click an arrow, the next/previous image slides in. The code was also very straightforward — get a handle on the “slides” and use index to loop through them. For one of the animations in the transition (there were labels that were animated separately) I used a simple chain, something like $(slide).find(label).animate(). As I was writing it, it hit me, jQuery has pretty robust chains, they allow mixing pretty much every operation you can do on an element — traversal, manipulation, effects, etc. So I decided to see if I could do the entire slideshow functionality as one long chain (well, technically two, one for each arrow). Here is a demo of the slideshow widget in action. Read more »

More Codex icons for Android

Art & Design // October 16, 2010

Codex icons for AndroidI made several more icons in the same style as my previous Codex Icons. There are 30 icons this time, and as before, each comes in two versions — with and without reflections. The ones with reflections work really well with LauncherPro dock. This time around I’ve included icons for Angry Birds, Layar, Evernote, Settings, Doubletwist, Shazam, Firefox Home, Bookmark and more. Check out the full preview below. Read more »

Cool CSS only buttons

CSS // October 13, 2010

I love CSS because it’s like having Photoshop inside a browser. Okay, maybe I’m exaggerating, but with modern browsers there are a lot of very cool things you can do with just CSS, without needing any of those pesky images with their overheads and extra kilobytes to download. In my work though I don’t often get a chance to try anything really interesting with buttons because they’re either simple, or if they’re not then I have to make them IE (worse yet, IE6) compatible so I end up reverting to mostly images anyway. So I decide to “go wild” and see what I can do without having to care about any of that compatibility nonsense.

Sidenote: Can you imagine if first cars had to be made horse-compatible? Yeah, think about that for a second.

So anyway, this is what I came up with.

CSS buttons

Look ma, no images!

Here is a demo of the buttons, pretty much exactly what I used for the screenshot above. I go over the styles after the break.

Read more »

Codex Icons for Android

Art & Design // August 29, 2010

Codex Android IconsI’ve made these to put on my Nexus One, but of course they can be used anywhere, not just on Android. These are minimalistic icons with subtle gradients and shadows; they come in two flavors, one with reflections (what you see in the image above) and a plain style (no reflections and slightly bigger). There is a total of 26 icons and you can see a full preview below. Read more »

Write single-page Ajax web applications with Sammy.js

JavaScript // August 16, 2010

Tutsplus.com has a great intro tutorial to Sammy.js, a small JavaScript framework that allows you to write single page web apps, similar to Gmail for example. Because Sammy.js is built on top of jQuery it’s very small, only about 20kb. With this framework you can keep track of your app’s state via hash (#) in the URL, without the need to refresh the site as you go from page to page, and of course it allows you to use the browser’s back button as well.

Check out the full tutorial at net.tutsplus.com.

Page 3 of 612345...Last »