Usecase #1: Color Search

This script could be useful for sites that sort and search by color. But you should probably save your user’s computer some work and handle the color processing on the server. A couple of color search site examples:

• Etsy Color Search
• Dribbble Color Explorer

Usecase #2: Color Adapting UI

With this script you can build a UI that adapts to the colors of an image. For example, you could add color accents to the UI by changing the font or border color depending on what image is currently being displayed in your portfolio. To get a bit fancier you could darken the dominant color and use it as a background color or invert the dominant color and use it as the text color. Fancy indeed!

A recent example of a color adapting UI is seen on Google Chrome’s new home tab. The dominant color of the favicon is used as the bottom border color on the screenshot:

Usage

Grab the code from Github. Include jquery, quantize.js, and color-thief.js on your page. Then add something similar to the following:

myImage = $('#myImage');
dominantColor = getDominantColor(myImage);
paletteArray = createPalette(myImage, 10); // 2nd argument sets the # of colors in palette

That’s the gist of it. For more information, your best bet is to dig through the code.

Next Steps

In the short term I’m not planning on doing any more work on the script. But if you’d like to make improvements or just clean up the code, please go for it! The dominant color algorithm has room for improvement.

Demo Page | Github

Inspired by the login page and a wanting to tinker with canvas and particles I set out to recreate the wispy particle effect. You can see the progress I made at the following page:
mobileme-particles

I’m happy with how it turned out but there are a few things that could be improved. For one, the movement in the original is less rigid with more twists and turns. Is a flocking algorithm being used? Also, the mouse interaction with the particles in the original is livelier and has a nice bounce back effect when the mouse moves away from the particles.

If you’d like to look at or use the code you can grab it on GitHub.

Learning About Particle Systems

There are quite a few places on the web to learn about simple particle systems. If you want to go a little further and add forces, I found the following two posts useful:

• Andrew Hoyer | Particle System
• Creating a Particle System in Processing: Applying Forces

Inspired by the Apps for Democracy contest which encouraged developers to build useful applications from DC’s Data Catalog, I built a Google Maps mashup which displays bike lanes and signed bike routes. Use the map as a starting to point to plan your ride through the city.

Tech Notes

The ‘Bicycle Lane‘ and ‘Signed Bike Route‘ KMZ files from the DC Data Catalog are used. Data is pulled daily. Before displaying, the files are filtered to display only existing bike lanes.

After much delay comes the new update. I’m not extending the functionality at this point but making some tweaks and fixing some of the small bugs. You can grab it from the main page: Lightbox JS v2.03

• Object and Embed elements hidden on Lightbox activation, prevents Flash movies and other media from appearing through Lightbox image
• extended keyboard support (arrow keys, esc key)
• added toggle in Javascript file to turn off animations
• imagemap support
• valid CSS
• clicking anywhere in ‘shadow’ closes Lightbox
• removeDuplicates function works with incontiguous items
• a bit of code cleanup

Like I said, minor stuff.

Better late then never? The forum is run with Vanilla, a web forum created by the team over at Lussumo.

Use the comments on this entry to post and discuss bugs, questions, and troubleshoot the script. I’ll be in and out of here.

3/31/06: I’ve Released a minor update v2.01 that fixes IE6 centering and smooths out the kinks in the resize transition. If you’re looking for multi-line captions or keyboard navigation, expect another minor update this weekend.

4/4/06: New update v2.02 that keeps the layout in check when captions extend to multiple lines. Keyboard navigation has also been enabled. Lastly, the addition of a variable in the lightbox.js configuration section to control the speed of the resize transitions.

Grouping Your Styles

Group your styles into categories (ex. layout, typography, forms, so on) and visually seperate them in your css file. A title and table of contents doesn’t hurt either:

/*
	HuddleTogether.com Screen Styles

	Table of Contents:
		layout
		typography
		forms
*/

/* layout
----------------------------------------------- */

/* typography
----------------------------------------------- */

/* forms
----------------------------------------------- */

Choosing Your Categories

Even though I do have some common practices, I don’t have a ‘template’ for how to breakdown styles into categories.

For starters, I almost always have layout and typography categories. With typography defining the sitewide look and feel. Depending on the complexity, I may break out the table and form styles into their own categories.

Next, I address the physical sections of the page with their own categories: header, sidebar, content, and footer for example. Lastly, I collect the page and content section specific styles and place them in their own category (and sometimes subcategories).

Importing Stylesheets

Another method is to categorize the styles and place them in seperate CSS files which are all imported by one main CSS file. I find this method good in theory but it can lead to overlapping styles, specification issues, and general confusion if you’re not very careful:

@import url("layout.css");
@import url("typography.css");
@import url("forms.css");

Linebreaks and Indenting

When styling multiple tags, ids, or classes with common attributes, display each on its own line. Also, indent closing braces. Both these actions keep the left column clean so you can quickly skim your stylesheet:

h2,
h3,
h4 {
	font-weight: bold;
	padding-bottom: 1.5em;
	}
h5 {
	font-weight: normal;
	font-size: 1.5em;
	padding-bottom: 0;
	}

Descendant Selectors

Use descendant selectors generously and consistently to keep your styles grouped neatly and CSS specificity in check:

#header {}
#header .logo {}
#header .logo img {}

Quick Disable

A trick I use all the time to temporarily disable a style attribute involves simply adding an ‘x’ in front of the attribute name. It’s safer then cutting and quicker then commenting out:

#footer{
	border-top: 1px solid #e5e5e5;
	xborder-bottom: 1px solid #e5e5e5;
	}

Keeping Track of Divs

Quick HTML pointer. For div tags that stay open for a number of lines, add a small comment after the closing tag about the opening div’s id or class:

<div id="content">
	<h2></h2>
	<p></p>
	<p></p>
	<p></p>
	<p></p>
</div><!-- end #content-->

Question: Anyone have an idea why my RSS feed appears ‘broken’ at the moment? I’m using WordPress 1.5. hmm…

Grab the latest files here: Lightbox JS

Just a teaser, but per many requests for extended functionality, I am working on a complimentary ‘photo-gallery’ script. It will include forward/back navigation, preloading, and much more. Check back next week.