Brian Grinstead

Ever want a textarea to expand based on the size of the input that someone types? I made a jQuery plugin to handle expanding textareas! The basic technique is based off of a cool article called Expanding Text Areas Made Elegant. Check out the Expanding Textareas Demo and play with the Expanding Textareas Source Code.

I think it’s a pretty cool plugin that is a lot nicer than using the standard hacks for keeping textarea heights up to date. And it works really well with proportional widths, custom fonts, and min/max heights!

Here is a screenshot (which also links to the demo):

I put together a screencast explaining the colorpicker functionality recently added into WebKit Web Inspector (aka Chrome DevTools for brevity). For some backstory on how this got implemented, check out my initial colorpicker concept video or the description of the implementation.

Here is a quick screencast showing off the colorpicking functionality (currently running in Chrome Canary):

Oh, and the jQuery plugin I am working with is called unmodal.

I have been working a browser based gradient generator. I’ve never had the best experience using gradient generators, so I decided to see if I could do better.

It is a prototype right now (a weekend project), but I am hoping to do more with it as time permits.

Features

• It outputs to CSS, Canvas, and SVG
• Allows for separate color and alpha stops
• Keyboard support (left, shift+left, right, shift+right, ctrl+c, ctrl+v)
• You can Copy/Paste current stop
• Undo/Redo
• Easily sharable URLs with the hash tag Example gradient or a GET parameter (Example with GET parameter).
• Local Storage Support to keep track of your work

Potential Future Features

• Support for radial gradients
• Cross browser CSS output
• Saving your gradients to server
• Multiple layers for stacked gradients
• More CSS 3 effect generators (box shadows, rounded corners, etc) built into the UI
• Any other ideas? Leave a comment or tweet them to @bgrins!

I haven’t come up with a better name yet, so check it out here: http://briangrinstead.com/gradient!

Gradient Generator Screenshot

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