Tuesday, January 26, 2010

Lorem ipsum for images in French Maid

Just yesterday, I saw a post on HN about the lorem ipsum for images, and I thought, "Hey kinda neat, but it shouldn't really require a server. All you really need is a place holder." So I decided to add it to French Maid, and it didn't take long...considering I was watching TV at the same time.

French Maid is just a small little javascript wrapper library that injects common behaviors into web pages using unobtrusive javascript, based on jQuery. All you ever need to do is set the attributes of html to standard html5 or microformats, and it'll give you some behavior that makes sense. I started this because while working in Sinatra and Django, there wasn't built in javascript behaviors for templates like in Rails. Turns out that was a good thing, but a bit annoying, so I wrote something to help me out.

Lorem ipsum for images is the only non-standard in there right now. When you're laying out a page, put:

And you'll get an image placeholder 200 px wide by 100 px height. There's only a few options:

This is pretty useful for having placeholder icons. I usually spend lots of time picking icons when I'm laying out a page, when I really shouldn't be.

I haven't yet made a homepage for French Maid. Figured I would when it's more mature, but hey, if you're not embarrassed when you release something, it's too late, right? So while I haven't gotten around to implementing all the microformat and html5 specifications, it's been useful so far, especially for standard pattern AJAX calls. The screenshot is from the test/example/documentation page in the project. You need Sinatra gem to run it. Then just fire up the server by running the test file, then navigate to localhost:4567 and start clicking around.

Have fun, and if you find it useful, lemme know. It'll be motivation to get a homepage up for it.

No comments:

Post a Comment