Just wanted to show y’all (Oh no, living in Montana is changing me – I said y’all) some of the new work that I have done. I really wanted an online business card that reflected my personality, aesthetically tight, narrow (I love narrow sites) and to the point. I didn’t want any extra twitter streams, tumblr, posterous, last.fm or any of that other social mumbo jumbo – A few links would suffice.

When building this site, I kept thinking “Audi” or a car with smooth wood and metal inside. Also, I wanted it to tie into the Komodo Media version 4 style with wood and dark colors. I love the Apple profile icon (as does everyone and their dogs apparently), so I wanted to use that, but give it a twist to make it my own. I modified the Apple profile icon to have a backwards/sideways hat, which as some have pointed out to my deficit, I wear all the time.

Custom icons were and have always been very important to me, none of that mainstream stuff. So, I made me a few sweet icons. The best icons, I believe, are in the contact section, so go check them out! I have a few more social network icons to do in the networks area, so be watching for those.

Next, being XHTML Strict and usable was extremely important to me. You may have noticed that when JavaScript is turned off, the site becomes readable as a very tall card and when sections are clicked they moved to a named anchor, thus repositioning the browser to that area. That’s rad. When JavaScript is detected, my favorite library, jQuery takes over and rocks a myriad of animations (hopefully not too many) and makes it all the more smooth. I added some cool nick-knacks such as anchor-section loading, which is a fancy way to say that the JavaScript detects the anchor loaded and loads the appropriate section. Also check out the hover effect on the profile dude – it’s fun ;)

Last, I’ve used CSS tricks from CSS3 to add text shadows to give that inset/letterpress look and a ton of PNG transparent images. Enough already, check it out online or read more over in the portfolio.

• TextFlow Online Word Processing

  Pretty interesting looking online flash-based word processor.

• RegExhibit OSX Regular Expression Editor

  The OSX Regular Expression editor and debugger I’ve been looking for.

• Housing Works Beautiful design

  The design for this website is stunning. I love large background websites.

• s3slider jQuery Sliding Image Captions

  A very cool solution for image captions that lay over an image and animate in.

• Ronald Jenkees Electronic music

  One of the most original sounding solo electronic artists out there. Check out “Stay Crunchy”. I can’t wait for his new album!

• Inovat Sweet Looking Portfolio

  Incredibly simple, yet sweet looking portfolio web design.

• Enable path view in OSX Finder

  Haven’t you always wanted to display the full path to the current folder in your Finder window? In terminal, enter the following command:

  defaults write com.apple.finder _FXShowPosixPathInTitle -bool YES

  Next, enter the following code to restart your Finder:

  killall Finder

• Creative and Live Tight Minimal Design

  Really clean and tight minimal design. I love the logo and subtlety.

• Space Collective Dark Simple Design

  Beautiful dark website design. I love the typography, color scheme and the block-like grid.

• Carbonica Stunning hand-drawn style

  This site has taken hand-drawn to a new level, complete with hand-drawn icons, headings, navigation and a cool illustrative style.

• Weightbot Website Dark, smooth and metallic

  Weightbot for the iPhone/iPod was cool and so is it’s site. I love the dark, metallic, apple-like style. Gorgeous work by Mark Jardine.

• I AM SECOND Amazing, heart-felt stories

  I absolutely love real stories about what God has done in people’s lives. This site is awesome.

• jQuery Fling Subscribe/Publish event model

  Collin Allen has written a sweet jQuery plug-in that makes it easy to code JavaScript events using a publisher/subscriber model very similar to Flash.

• jCrop jQuery Image Cropping

  Very smooth jQuery image cropping plugin.

• Smooth CSS Image Resizing in IE

  I can’t believe that I’ve never seen this until now. Finally, bicubic interpolation for Internet Explorer with only one CSS rule:

  img {
-ms-interpolation-mode:bicubic;
}

  Preview:

  

• Dropbox/Leap Scrapbooking Killer online scrapbooking

  Jon Hicks has come up with a very sweet way of scrapbooking all of those screenshots that you’ve been compiling over the times. I think I’ll actually use this one.

When feeds became popular, it worked to have one icon on your site to point your readers to your RSS or Atom feeds. As feeds are more prevalent in blogs and websites abroad, the presence of multiple feeds abound. I have a feed for my blog, the nerdlab, my bookmarks, my friend feed as well as my twitter updates. That’s a butt-ton of feeds.

Browsers have come up with a smart way of offering this content to users and it is usually place somewhere by the location bar as shown below:

Firefox 3 Feed Menu

Safari 3 Feed Menu

With the click of a button, you can view all of the feeds available in the <head> of the document.

But still, it’s nice to offer users an alternate way to get at your feeds, so typically you will see a feed icon lurking around a site somewhere. At times, you will see a list of two, three or more links to different feeds offered on a site. Why not have an easy and standard way of offering your feeds via a nice, compact menu, just like in the location bar, but on your site? Why I ask? Why?

It’d be awesome to allow users to click your feed icon and be presented with a list of feeds to choose from. Hmmm, I want your twitter feed in Atom format or I’d like to subscribe to your blog feed in RSS format. Done.

The jQuery Feed Menu

Here’s how easy it is. I am going to plop one right here: . Go ahead click it. You know you want to. This feed menu was created easily by the following snippet of code:

var fm = new FeedMenu();
fm.write('#jquery_feed_menu_example_1');

Cool huh? That piece of code finds all of your feeds in the <head> of your HTML document and makes them into a handy menu you can plop anywhere. Here are some more examples:

Atom Feeds

Atom Feeds:

Code:

var fm = new FeedMenu('link[type*=atom]');
fm.write('#jquery_feed_menu_example_2');

RSS Feeds

RSS Feeds:

Code:

var fm = new FeedMenu('link[type*=rss]');
fm.write('#jquery_feed_menu_example_3');

Different Theme Classes:

Classic Orange
Komodo Media v.4 Woodgrain
Komodo Media Azure

Transparent on Dark (for dark backgrounds)

Transparent on Light (for light backgrounds)

Code:

/*
* @param 1: CSS link selector or array of JSON objects
* @param 2: Class Name: null, wood, azure, trans_on_dark, trans_on_light
/*
var fm = new FeedMenu(null,'wood'); //2nd param is class
fm.write('#jquery_feed_menu_example');

Last, something custom

Let’s say you don’t want the feed menu to find links for you. You want to provide them in code. Check this out:

And, here’s the custom code:

var oCustomLinks = [
{
title:'RSS Feed',
href:"http://feeds.feedburner.com/komodomedia"
},
{
title:'Subscribe with Bloglines',
href:"http://www.bloglines.com/sub/http://feeds.feedburner.com/komodomedia"
},
{
title:'Subscribe with Google Reader',
href:"http://www.google.com/reader/view/feed/http://feeds.feedburner.com/komodomedia"
}
];
var fm = new FeedMenu(oCustomLinks);
fm.write('#jquery_feed_menu_example_6');

You can download all of the files used here to use on your site. Feel free to modify and use this code how you see fit and if you use it, please drop a comment here to show me how you’ve used it.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States License.

First, an example

Let’s create a text input that we want to be remembered. I’ll give the the every-so-appropriate name of fav_starbucks_drink Here it is:

Fav Starbucks drink o’ choice:

For all you n00bs out there, the XHTML code is:

<input name="fav_starbucks_drink" type="text" />

Test this jQuery code out by entering in a value in the input and then refreshing the page.

jQuery Code:

Realize two things. You’ll need the jQuery cookie plugin as well as a link to jQuery itself. We are going to be using the cookie plugin to cookie or save the user’s data.

function remember( selector ){
$(selector).each(
function(){
//if this item has been cookied, restore it
var name = $(this).attr('name');
if( $.cookie( name ) ){
$(this).val( $.cookie(name) );
}
//assign a change function to the item to cookie it
$(this).change(
function(){
$.cookie(name, $(this).val(), { path: '/', expires: 365 });
}
);
}
);
}

Restoring saved field values

Aight. Let’s just dive into explaining this hunk of code. First, you will notice the function declaration:
function remember( selector ){

The function parameter selector is a jQuery selector, which happens to be either a CSS3 selector that targets the desired inputs or a collection of jQuery objects.

Next:

$(selector).each( function{...

$.each is a sweet function that executes the function passed in as it’s argument for every object within the jQuery collection as created by the selector parameter. If you are lost at this point, let it suffice to say that we are going to loop through all of the input items as identified by their selectors.

Now, lets digest a bigger chunk. This next segment of code will perform the function of restoring any saved values. Now, hopefully this script is being ran on page load, so this restore segment will restore the field values on page load. Here’s that jazzy code now:

var name = $(this).attr('name');
if( $.cookie( name ) ){
$(this).val( $.cookie(name) );
}

First, a variable name is created and set to the attribute of name on the input item. What does that mean you ask? Well, basically we don’t know the selector that targeted this input, but we want to store the name of the form item as we aren’t guaranteed we will have an id. Cool now the name attribute of the input is stored in the var of name, so fittingly named.

Next, the code is if( $.cookie( name ) ). What’s that mean? Think of it like this: “Is there a cookie with this name”? Okay, so if we have cookied the value for this input, it’ll be in that cookie. Radness. Okay, if there is a cookie, set this input item’s value attribute to that value. Simple eh? By using the $.val() function, I can set the value if I pass a parameter or I can get a value by leaving params emtpy. Eazy peezy – set the value to the cookie with that name:

$(this).val( $.cookie(name) );

Ok, now we have code for all input items of type text and textareas to be set. We won’t cover checkboxes, radio’s and select lists on this post.

Creating functions to save field values on change

This block of code is uber simple. Check it:

$(this).change(
function(){
$.cookie(name, $(this).val(), { path: '/', expires: 365 });
}
);

Guess what $(this).change() does? That’s right, it creates an onchange function handler for the targeted input item. So whatever function we pass the change function will be ran when input item’s value is changed. Word.

Wow, this one is easy. Guess what, when this input item gets changed, cookie it. That’s it. In plain english, we are naming the cookie the name of the input item, we are assigning it the value of the input, it’s path is the root of the site and it expires 1 year from now. Rocking.

Last, lets run the code. Do that by calling the function, passing it the selector to target the item. Something like this will suffice:

remember( '[name=fav_starbucks_drink]' );

Ooh, check that out, I used an attribute selector, which since jQuery supports up to CSS3 selectors, will actually work on IE6. ;)

You could also run the code as soon as the document is ready by doing something like this:

$(document).ready(
function(){
remember( '[name=fav_starbucks_drink]' );
}
);

That’s it. This code could obviously be improved no doubt, including handlers for select, checkboxes, radios and more, but you get the gist. This script was uber easy to bust out. I heart jQuery. Do you?

I’ll post more on what I learned in the designing process as well as releasing some freebies, so stay tuned. As for now, I’m a tired boy and I’m gonna take a rest. Please leave a comment and let me know what you think!