Browser bookmarks can run little bits of javascript on the current page if you use a "javascript:" URL. Folks often refer to these as "bookmarklets". (I wish they worked well in mobile browsers like iOS Safari, but that's a rant...)

Constructing scripts in a URL-safe format can be super frustrating! But today I expanded my "dev tools" for building bookmarklets:

The Firefox dev tools console is a great way to try out your code in-place on the actual page where you want to run it. Press "Ctrl+b" (or "Cmd+b" if you are a Mac person) and the console editor goes into multiline mode! This makes it much easier to edit little scripts! In multiline mode, you "submit" by pressing "Ctrl+Enter" (or "Cmd+Enter" etc).

Duckduckgo has a built-in tool for Javascript beautifying and minifying! It pops up when you search duckduckgo for "javascript minifier". This makes it easy to go from a readable script with newlines and other formatting in your console, to a minimized compact scriptlet suitable for a bookmarklet. Even better, it lets you go back and forth between a minimized script and a readable one so you can tweak your bookmarklets in the future.

Finally, and in some ways most importantly, bookmarklets need to be properly URL-encoded. Enter Marek Gibney's Bookmarklet Editor, which uses a single textarea and lets you convert between a script and its encoded "javascript:..." version.

The minifier/beautifier and bookmarklet editor are web tools, so the usual caveats apply about data privacy. In theory they are running purely in your browser and not sending data anywhere. But they could! So keep that in your threat model.

This post used to be on Posterous. I rescued my posts before Posterous shut down and am now sharing them here.

I played with the mouse coordinate handling a bit to try and compensate for the rotation, but it's still not great. For some reason, up-and-down movements seem to track well, but left-right movement causes the drawing point to move up and down relative to the cursor.

My guess is that I am just being bad at "the maths" and that I'll get it figured out later. :)

This post used to be on Posterous. I rescued my posts before Posterous shut down and am now sharing them here.

Added some scribbling to my little JavaScript app, which also gets saved to the SVG.

It's not great (my insistence on making these things map to the sticky note image means they don't line up right with the mouse), but it works!

This post used to be on Posterous. I rescued my posts before Posterous shut down and am now sharing them here.

I really wanted to get SVG manipulation going in this demo, so I have ported the rendering (once again), this time using the jQuery SVG lib, which is really nice and easy to use: http://keith-wood.name/svg.html

This post used to be on Posterous. I rescued my posts before Posterous shut down and am now sharing them here.

Ok, this is more a kind of clever image arrangement than anything else, but it looks nice, I think.

You can play with it here: http://schmarty.net/hershey_js_demo/index.html

Until I change it again!

This post used to be on Posterous. I rescued my posts before Posterous shut down and am now sharing them here.

Ok, this is kind of fun, even though the code is very naive.

I've added a height-check at the end of my line-breaking code. If there are too many lines of text to fit within the allowed space, the algorithm will rescale everything and try again:

This post used to be on Posterous. I rescued my posts before Posterous shut down and am now sharing them here.

I haven't been making as much progress on my "draw things in the browser so a robot can draw them on the Unicorn" project, so I decided to take a stab at cleaning things up a little to make that easier.

Today I rewrote my little demo to use canvas 2D instead of Raphael.js.  It looks the same, for the most part:

This post used to be on Posterous. I rescued my posts before Posterous shut down and am now sharing them here.

I've decided to slowly expand this drawing-stuff-in-the-browser demo, and added some simple line-wrapping to the code on my demo page:

http://schmarty.net/hershey_js_demo/

Word wrapping is an interesting topic, and I hope to get this cleaned up a bit with features like breaking up words if they are too long, improving the algorithm to make nicer "squared" paragraphs, etc.