Foliotek Development Blog

Spectrum Colorpicker In Foliotek Presentation

Monday, April 2nd, 2012

Spectrum, my JavaScript colorpicker project, has gotten some good news lately!

It was adopted by the WebKit project for use in the Web Inspector, which was on a few people’s wishlists, including my own.

Foliotek Getting Involved

We decided to add (and expand on) functionality and improve the design for use in Foliotek Presentation.

Geoff Leigh and I worked together, thinking about the color picking process from scratch and came up with a good workflow, I think.

Common Palettes

The palettes on the top are commonly used colors that are ‘sticky’. These are easy ways to grab a color that looks about right, and makes it easy to reuse colors. Clicking on any element from a palette instantly chooses the color and closes the colorpicker.

Template Palette

Part of what makes Foliotek Presentation cool is that we know so much about the designs that people use by analyzing the CSS and color changes that they do in our template editor. With this information, we bind a list of colors that are being used in their template. This opens up possibilities like reusing a heading color to accent a certain word in their portfolio.

User Colors

This is a list that remembers which colors you have chosen. It uses the localStorage object. It will automatically add any color you select that isn’t in the above palettes.

Since it is automatic, users do not need to add/remove/edit the custom palette. Right now, we think this is better than presenting the user with an interface for setting custom colors. We originally had some designs that handled this management, but we decided to go with the simpler solution for now.

Going Forward

I hope to continue development and make this the best JavaScript colorpicker available, keeping these goals in mind:

  • Good UX
  • Cross Browser Compatible (IE6 and up)
  • Doesn’t use any images
  • Easy to skin via CSS
  • Simple interface / easy to integrate with app

I am very happy with the changes and excited to be working on projects like these! You can follow development of the plugin, suggest features, or report bugs here: https://github.com/bgrins/spectrum.

Foliotek Open Sources AjaxQ jQuery Plugin

Wednesday, February 29th, 2012

We have a lot of components we have built (and are in the process of building) for our presentation portfolio and assessment products.

We have decided to contribute some of this work to the open source community. The first one is a jQuery plugin for managing sequential ajax requests, called AjaxQ.

See the AjaxQ documentation or jump straight to the demonstration.

It is designed to follow the $.ajax, $.get, and $.post interfaces and return values, only taking one extra parameter (the queue name). Here is a brief sample of the functionality:


$.ajaxq ("MyQueue", {
        url: 'http://jsfiddle.net/echo/jsonp/',
        type: 'post',
        dataType: "jsonp"
});
 
$.postq ("MyQueue", 'path/to/your/resource', onsuccess);
 
$.getq ("MyQueue", 'path/to/another/resource', onsuccess);

Each request will only run once the other finished.

All of the source code is available on Github, available under the MIT License.

Color Scheme Generator in JavaScript

Friday, September 23rd, 2011

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. This is a tight limit, but luckily you can include jQuery and not have it count against your size quota.

The main goal is to provide an easy way for to choose a nice color or scheme, and output those colors in a variety of formats. It supports hex, css names, rgb, hsv, and hsl as input and output formats. You don’t really need to know anything about these formats to use the colorpicker or built in image eyedropper.

I started learning about color when working on the template editor and color schemes

You can read more http://www.briangrinstead.com/blog/colorstash, check out the 10K entry, or see the more permanent (and possibly bigger than 10K as I make updates) app here: http://briangrinstead.com/colorstash/.

Setting ‘Enable 32-Bit Applications’ To Fix Microsoft.Jet.OLEDB Error

Friday, August 5th, 2011

We were running into an error on one of the development machines today when processing excel files: Microsoft.Jet.OLEDB.4.0 provider is not registered on the local machine.

After doing a little searching, I realized that the particular DLL was 32 bit only.

We had run into this problem before on the 64 bit installs, and I vaguely remembered how to fix it: From the IIS Manager, select the Application Pool your site is running in. Choose ‘Advanced Settings’ and turn Enable 32-Bit Applications to True. Restart the App Pool, and hopefully everything will work.

Here is a screenshot of the option:

Windows Batch Files: ‘@echo is not recognized’

Monday, November 29th, 2010

Today, after loading up a publish script and running it, I got a strange error: ?'*** @echo' is not recognized as an internal or external command, operable program or batch file. It then continued to run each line individually, throwing errors on basically every line.

After playing around with creating a brand new empty file, and getting the same error – I realized the problem. The encoding was set to UTF-8, which the Windows command line failing on.

To fix it, just set your encoding to ANSI. Here is a screenshot of how to do that with Notepad++:

And now, everything works wonderfully and I can get back to work: