Brian Grinstead

It can be annoying that when you drag out images of a browser window, they are named png.png (or something equally useless). I was playing around with fixing this - it is a little inconvenience in my CSS Sprite Generator that would be nice to have working (naming the file based on their input). Here is what I came up with (no library dependancies):

function dragoutImages() {
  if (!document.addEventListener) {
    return;
  }

  document.addEventListener("dragstart", function(e) {
    var element = e.target;
    var src;

    if (element.tagName === "IMG" && element.src.indexOf("data:") === ) {
      src = element.src;
    }

    if (element.tagName === "CANVAS") {
      try {
          src = element.toDataURL();
      }
      catch(e) {  }
    }

    if (src) {
      var name = element.getAttribute("alt") || "download";
      var mime = src.split(";")[].split("data:")[1];
      var ext = mime.split("/")[1] || "png";
      var download = mime + ":" + name + "." + ext + ":" + src;

      e.dataTransfer.setData("DownloadURL", download);
    }
  }, false);
}

You just need to specify the alt attribute on the image or canvas to specify your name (along with the draggable attribute on canvas elements) and the script should handle the rest.

Browser Support

I am not 100% sure on browser support. This used to be Chrome only according to this HTML5rocks article, but maybe other browsers have picked it up by now. It is a neat little addition when available though.

Demos

See the full demo: drag out images with custom file name. This shows the ability to drag out both image and canvas tags.

On this page, you should be able to drag out the following colorpicker screenshot, which will be called spectrum.png.

I've been working on updating my A* Graph Search Algorithm (A* on Github) and toying with the idea of adding variable costs to the grid, also known as weighted paths.

I opened an issue to add weighting to graph nodes a while ago, but was a little stuck on the implementation details. My initial thought was to change the semantics of the graph. Right now, here is a sample graph:

var GraphNodeType = {
    OPEN: ,
    WALL: 1
};

// 0 represents an open node, 1 represents a wall
var graph = new Graph([
    [,,,],
    [1,,,1],
    [1,1,,]
]);

My initial plan for adding weighting was something like this:

var GraphNodeType = {
    WALL: ,
};

// Anything > 0 represents the cost to travel to that node, 0 represents a wall
var graph = new Graph([
    [2,1,3,4],
    [,1,1,],
    [,,3,10]
]);

One major issue with that is that it breaks backwards compatibility with the plugin. A user, spellfork, on the Github issue came up with a neat solution, basically passing in two separate arrays to the graph function, where one represents the "obstacle map" (walls), and the second represents the "terrain map" (costs).

// First array: 0 represents an open node, 1 represents a wall
// Second array: movement costs are represented by numeric value
var graph = new Graph([
    [,,,],
    [1,,,1],
    [1,1,,]
],[
    [2,1,3,4],
    [,1,1,],
    [,,3,10]
]);

This is nice because the terrain map is optional, but not as nice if you need to do a lot of work to generate the two separate maps.

Maybe there is a better solution that I am not thinking of? Any ideas about the best way to implement this? Drop a comment here or over in the Github issue to help get this implemented!

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