Brian Grinstead

My jQuery Colorpicker - Spectrum now has a mode that acts as a polyfill to input type=color.

What this means

Now that the color input is supported in Chrome nightlies, along with Opera, people may want to start using this cool new form element.

While you can still customize the colorpicker and bend it to your will, if you'd like to use this new mode just include the HTML:

<input type='color' value='#4499f0' />

Along with a reference to spectrum.js and spectrum.css:

<link rel='stylesheet' href='spectrum.css' />
<script type='text/javascript' src='spectrum.js'></script>

Demo

See the color input polyfill demo page for more info!

I created a jQuery UI Widget for picking angles.

Demo: JavaScript Angle Picker Demo

Source Code: https://github.com/bgrins/ui.anglepicker

Big thanks to Original JavaScript and CSS based on: https://github.com/mrflix/LayerStyles

Given a parent rectangle and a collection of children rectangles on a 2D plane, how do you find a collection of non-overlapping rectangles that cover the inverse of the original set?

For instance, given the container rectangle along with the set [A, B] -> we want an output similar to [1, 2, 3, 4, 5].

+----------------------------------------------------------------+
         |                                                                |
         |                                                                |
         |       +------------------+        +--------------------+       |
         |       |                  |        |                    |       |
         |       |                  |        |                    |       |
         |       |        A         |        |        B           |       |
         |       |                  |        |                    |       |
         |       |                  |        |                    |       |
         |       |                  |        |                    |       |
         |       +------------------+        +--------------------+       |
         |                                                                |
         |                                                                |
         |                                                                |
         |                                                                |
         |                                                                |
         +----------------------------------------------------------------+


         +----------------------------------------------------------------+
         |                                                                |
         |                               1                                |
         +-------+------------------+--------+--------------------+-------+
         |       |                  |        |                    |       |
         |       |                  |        |                    |       |
         |   2   |                  |   3    |                    |       |
         |       |                  |        |                    |   4   |
         |       |                  |        |                    |       |
         |       |                  |        |                    |       |
         +-------+------------------+--------+--------------------+-------+
         |                                                                |
         |                                                                |
         |                              5                                 |
         |                                                                |
         |                                                                |
         +----------------------------------------------------------------+

Solution

Enter the inverse-intersection JavaScript project. It is a kind of micro library. No dependancies, just the math required to solve this problem!

You can grab the JavaScript file from Github.

The first component that's being released as open source by Foliotek is the AjaxQ jQuery Plugin. The purpose of this plugin is for managing sequential ajax requests.

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);

In this case, each request would only run once the other finished. See the AjaxQ demo to see it in action with multiple queues.

All the source code is available on Github, available under the MIT License. I hope to have more projects to report on in the future!

A few months ago, I posted about my developer tools concept colorpicker implementation. After that, I was contacted on the devtools mailing list and got some initial feedback. I pulled the jQuery dependency out of a branch on my JavaScript colorpicker using jsfiddle plus the mailing list. From there, I submitted a patch to the WebKit project.

From there, I opened a development case, entitled Web Inspector: Add colorpicker functionality to color swatches in Styles Sidebar. 50+ comments and 10 patches later, the case landed in WebKit. This is really exciting, since it will improve the development experience for Chrome and Safari users. Thanks to all the WebKit developers who helped me along the way with getting the code and UI ready for committing (I needed all the help I could get).

I am planning on sharing more of the technical details and hurdles I had as a first time contributor to the WebKit project in a coming post.