Brian Grinstead

Use ColorStash now – generate color schemes and convert colors

ColorStash is a tiny web app I built for the 10K Apart contest. The goal of the contest is to build an application in under 10 Kilobytes. This includes all HTML, JavaScript, CSS, and images.

From my description in the 10K Apart entry:

ColorStash lets you pick, convert, save, and share colors and schemes. Use the custom built colorpicker, permissive text parsing, and color scheme generators. Stash colors in localStorage or share them from the URL.

Responsive: Different layouts for widths < 600px and > 1200px to maximize available space.

You'll be amazed at how much this does in under 10k!

Read more at http://www.briangrinstead.com/blog/colorstash. I explain the responsive design decisions and components I built for this project.

Responsive

One of the main goals of the contest this year was that the app had to be “responsive”. It was a cool way to learn about this new trend in web development. I had to spend extra time thinking about how it should work at different resolutions, but I think the outcome was better for not only those different resolutions, but even the normal one.

• Less than 600px: and everything is moved into a vertical line. Additionally, schemes get vertical layout – otherwise they would be too small (since they are a percentage width).
• Greater than 1200px: everything is moved into one row. This is to make better use of available horizontal space, and because of a unique problem that the colorpicker presents. It must keep a 1:1 aspect ratio for the middle area (where you drag around to control saturation and value). By moving the schemes into the row, the picker only takes up 33% of the width, which helps keep it from becoming way too tall to fit on a widescreen monitor.
  • On iPhone / iPad: The colorpicker hue slider gets wider to make sliding easier with touch events. Also, the ‘pallet' options at the top become wider. I think it is just harder to tap on a small area than click. Also, you probably don't need as many saved colors visible in a mobile environment. Open up the site in an iPhone, and also inside a normal browser scaled down to 480px to see the difference between the two!
  • Other mobile environments: Unfortunately, I don't have the resources to test other mobile phones, so I'm not sure if it works… If anyone knows of a good way to test this, please let me know!

Colors

I am no color expert, but I have been learning! I wrote a JavaScript color parsing and conversion library and a JavaScript colorpicker for this contest. I found a lot of hsv/rgb/hsl/hex conversion algorithms on wikipedia. The scheme generation functions were mostly from looking at a colorwheel, other parsing libraries, and this Opera Color Theory article. After the contest, I hope to expand these and support other color formats.

File Size

Compressed, crunched, and zipped ColorStash weighs in at 10,210 bytes. Obviously, this is cutting it close to the 10K limit!

I wrote the first version without worrying about size. It came it at maybe 20k. Once I minified the resources, it got down to about 15. Now it was time to start optimizing code (the fun part)!

I wrote a build task using Rake that would use Closure compiler on the JavaScript, YUI Compressor on the CSS, and pngcrush on the image, send them all to an output directory, zip it up, and tell me the size. Since I was cutting it so close on the limit, this made size optimizations at the end much easier!

Browser Support

I built the spectrum colorpicker just for this contest. One of the cool parts about it is that it uses CSS gradients / IE filters instead of images or canvas. This makes it supported in a wide range of browsers, and very small!

• Full Support: IE8+, Firefox 3.5+, Chrome, Safari, Opera, works on iPhone
• Limited: IE6/7 (no localStorage)

Yes, That Is A Fancy Way Of Saying Rainbows

For most browsers, you can use the linear gradient vendor property with multiple color stops. In IE, the filter property does not support color stops, so we have to fake it with 6 divs, each with a single color stop gradient. It works in Internet Explorer, back to version 5.5.

I made this while working on my JavaScript colorpicker, Spectrum. Check out the hue slider gradient demo on jsfiddle, where you can play with the source.

#hue {
    height:200px;
    width: 40px;

    background: -moz-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
    background: -ms-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
    background: -o-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), color-stop(0.17, #ffff00), color-stop(0.33, #00ff00), color-stop(0.5, #00ffff), color-stop(0.67, #0000ff), color-stop(0.83, #ff00ff), to(#ff0000));
    background: -webkit-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
    background: linear-gradient(to bottom, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
}

#ie-1 {
    height:17%;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#ffff00');
}
#ie-2 {
    height:16%;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff00', endColorstr='#00ff00');
}
#ie-3 {
    height:17%;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ff00', endColorstr='#00ffff');
}
#ie-4 {
    height:17%;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffff', endColorstr='#0000ff');
}
#ie-5 {
    height:16%;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000ff', endColorstr='#ff00ff');
}
#ie-6 {
    height:17%;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff00ff', endColorstr='#ff0000');
}

Not exactly pretty, but it is one way to get multiple color stops in Internet Explorer working.

I have been wanting to add colorpickers in a couple of projects recently, and was not happy with the options. Just search JavaScript Colorpicker and you'll see what I mean. It got me thinking about what I wanted out of a colorpicker.

No Images!

It is pretty well known that you should limit the number of images that your web page requests for performance reasons. Some of these, including the eyecon.ro picker, which is the first that shows up when searching 'jQuery colorpicker', require a ton of images (27, in fact). This is overkill. Why can't it be skinned with HTML/CSS?

Reasonable defaults

I found myself having to dig through the source code of various colorpickers in order to get them to act how I wanted. Maybe my experience on this is unique, but once I wanted to actually script behavior to go along with the picker (think - a template editor for an online portfolio), it became painful quickly.

Browser Support

It needs to support all major browsers (even IE). Ideally it could also support mobile devices.

Drop in

Didn't want to have to download zip folders, place a bunch of images in my project and modify css files to point to the correct image path, etc. I just want to include a single JavaScript file, and a single CSS file, and be done.

Anything Like This?

I did find the nifty FlexiColorPicker, which accomplishes the no images goal with SVG and VML. It seems very nice, but didn't have some of the features I wanted (dragging around the hue slider and picker didn't actually work). I'm glad I found it, as I did use some of the gradients as a starting point with my CSS gradients.

Spectrum - My JavaScript Colorpicker

I have done a fair amount of color manipulation work while building a color scheme generator in a theme editor. I also have made a JavaScript color micro framework for parsing and conversion, called TinyColor. This is designed to allow a wide range of input and output (named colors, hex, rgb, hsl, hsv).

So, I decided to try my hand at this, and made the spectrum JavaScript colorpicker.

It works in all major browsers (tested in Safari, Chrome, Firefox, IE 7+, iOS, Opera). It uses IE's propriety gradient filter (with some hacks for the hue slider - see .spectrum-ie-1 through 8 in spectrum.css. It should even work in iPhone and iPad - let me know if you have one and can double check that for me over on the demo page :). It is still in early stages, but I would love if I could get some feedback on the UI and desired functionality.

Demo

Head over to the current project page to try out the demo and see the docs.

It currently requires jQuery, but I have been trying to write the code to make it possible to remove that dependancy.

Instant Sprite is a CSS Sprite Generator I built to learn some of the new (at the time) JavaScript APIs and to make it easier to follow the good practice of using CSS Sprites. I found it annoying to make sprites, especially if it required opening up an image editor and calculating offsets manually. I wanted to make the tool as easy as possible to fit my workflow. I use it now when doing any design work.

Instant Sprite uses HTML Canvas and the FileReader interface to read images from your hard drive - this prevents you from having to zip up all the images before passing them off to the sprite generator. You can also preview your changes to CSS tweaks in real time, so you don't have to resubmit if the file match regex isn't doing what you want.

All the code is available online here: https://github.com/bgrins/InstantSprite

Note: this is a cross posting from my article at the foliotek devblog. This improves some of the code formatting.

Have you ever wondered why the box to change the name or “Alias” on an application or virtual directory is greyed out (see screenshot below)? I found a way to change the name without recreating all your settings. It uses the built in administration commands in IIS7, called appcmd.

Renaming Applications In IIS7

Open a command prompt to see all of your applications.

C:> %systemroot%\system32\inetsrv\appcmd list app

APP "Default Web Site/OldApplicationName"
APP "Default Web Site/AnotherApplication"

Run a command like this to change your “OldApplicationName” path to “NewApplicationName”. Now you can use http://localhost/newapplicationname

C:> %systemroot\%system32\inetsrv\appcmd set app "Default Web Site/OldApplicationName" -path:/NewApplicationName;

APP object "Default Web Site/OldApplicationName" changed

Renaming Virtual Directories In IIS7

Open a command prompt to see all of your virtual directories.

C:> %systemroot%\system32\inetsrv\appcmd list vdir

VDIR "Default Web Site/OldApplicationName/Images" (physicalPath:\serverimages)
VDIR "Default Web Site/OldApplicationName/Data/Config" (physicalPath:\serverconfig)

We want to rename /Images to /Images2 and /Data/Config to /Data/Config2. Here are the example commands:

C:> %systemroot%\system32\inetsrv\appcmd set vdir "Default Web Site/OldApplicationName/Images" -path:/Images2

VDIR object "Default Web Site/OldApplicationName/Images" changed

C:> %systemroot%\system32\inetsrv\appcmd set vdir "Default Web Site/OldApplicationName/Data/Config" -path:/Data/Config2

VDIR object "Default Web Site/OldApplicationName/Data/Config" changed