Archive for April, 2009

FancyUpload 3.0 Released

April 30th, 2009 by Aaron N.

Harald Kirshner (a.k.a. digitarald) released the latest incarnation of his (awesome) flash / js based file uploader, FancyUpload.

Despite the delay, the completely rewritten version ofFancyUpload, version 3.0, got pushed to github today. This new version is more stable, has betterdocumentation and more showcases than ever. I even added two download packages with runnable installations, like many developers requested. This article introduces the new features and showcases, impatient readers can jump directly to the comprehensive project page or fork on github.

New Features

There are a lot of new features and fixed bugs in this new release, so let me distill the most important ones for you:

  • The API with, separated uploader and file classes, allows an easy implementation in all kind of interfaces
  • Events are dispatched for every step of the uploading process, to keep the interface as responsive as possible
  • Progress tracks the loaded size, upload-rate, estimated time and other values for every file and for the batch as a whole
  • File uploads can be stopped, restarted or removed anytime
  • New Iframe-based class for multiple, asynchronous uploads without dependency on Flash
  • Compatible with Flash 9 and 10 with the browse button as a transparent overlay or as an interactive image sprite
  • Ability to change the upload URL and add POST/GET data on runtime, customized for every file or the whole process

Link »

A MooTools File Manager

April 29th, 2009 by Aaron N.

Chris Pojer, one of the MooTools developers, just released his FileManager plugin and it’s worth checking out.

  • Browse through Files and Folders on your Server
  • Rename, Delete, Move (Drag&Drop), Copy (Drag + hold CTRL) and Download Files
  • View detailed Previews of Images, Text-Files, Compressed-Files or Audio Content
  • Nice User Interface
  • Upload Files via FancyUpload (integrated Feature)
  • Option to automatically resize big Images when uploading
  • Use it to select a File anywhere you need to specify one inside your Application’s Backend
  • Use as a FileManager in TinyMCE
  • Provides your Client with the most possible convenience

Be sure to check out the demos:

Clientcide 2.0.2: Event Delegation Updated for MooTools 2.0 Compatibility

April 27th, 2009 by Aaron N.

I’ve just made an update to the Clientcide libs. Aside from a few minor tweaks and fixes, the big change is that I’ve updated my Event.Delegation.js beta plugin.

MooTools 2.0 features built in event delegation (among many, many other enhancements) but the syntax is a little different than the previous version of my beta plugin. While my previous version had the syntax like this:

element.addEvent('click(a)', function(){...});

MooTools 2.0 currently has the syntax as:

element.addEvent('click:relay(a)', function(){...});

I’ve updated my version to use this new syntax which should make it a little safer to use. For starters, assuming the syntax doesn’t change in 2.0 (which it totally could), you won’t have to do anything when you upgrade. But the other benefit is that, if the syntax changes, it’ll be easier to find them. My previous version is basically impossible to search for in your code, which means that if you’ve been using it in your work and need to update the syntax, it’s going to be hard to find them all.

Warning!

To help with this migration I’ve added a little logic to the code so that if it sees you trying to add an event with the old syntax (‘click(a)’) it’ll post a console warning that the selector is no longer valid. This should make it possible for you to browse around your application(s) and see if there are any warnings.

Still Not Perfect

It’s also worth noting that my plugin still suffers from the same problems it had before. Namely, you can’t monitor the blur and focus events and some custom events might not work for you (I haven’t tested them all, but I suspect some won’t work).

Other than that, I’m going to upgrade this from “academic exercise” to “totally usable but might mean some work to upgrade later.”

Exporting Files From Git (similar to SVN export)

April 25th, 2009 by Aaron N.

I use git for just about all my code now. For some of my work, I need to export portions of or all of a git repo into some other location without picking up all the git files themselves. This is the way svn export works. There are two ways I do this. One is using git archive. This command always returns a zipped up copy of the repository, so you have to pipe it over to tar if you want to export files (either that or save the tar file and then in a second command extract it). Here’s my one-line command for taking the archive and sending it to a different location:

git archive HEAD | (cd ~/path/where/I/want/it/ && tar -xvf -)

This will extract the ENTIRE library to the specified path (without the .git files and whatnot).

Sometimes, however, I want to pull out just a portion of the library. git archive always gives you the whole enchilada which kinda sucks, and in this case I use rsync, like this:

rsync path/I/want/to/export/ -ri --del -m --exclude ".*" ~/path/where/I/want/it/ |grep sT

That last bit – the grep sT will limit the output of what I see so that I only see the files that are updated. I use that just to sanity check my export. If I see a TON of stuff go to update a path that already has the library and I know I only changed one file, then I know I got the path wrong.

MooTools 1.2.2, More 1.0 and Clientcide

April 25th, 2009 by Aaron N.

Today after many months of work, the latest version of MooTools Core and the shiny new MooTools More have launched. If you haven’t read up on that, you best get on it. But, you ask, what about all the goodies on Clientcide? Obviously you’ll want to upgrade to the latest MooTools (it’s pretty painless – no big breaking changes). Looking at the new MooTools More you’ll see a lot of familiar classes – FormValidator, OverText, Class.Binds, etc. Well, while the changes to Core don’t require you to do anything to upgrade, the changes from Clientcide to More aren’t so simple.

Core and More

There aren’t a ton of new features in 1.2.2; mostly bug fixes and whatnot, but I will say that Class.js got an overhaul and has a whole new kind of awesome that most people probably won’t notice. It’s a humble awesomeness, if that’s possible.

And then there’s MooTools More. As I wrote back in the beginning of February, the new MooTools More features a ton of new functionality, much of it from the Clientcide libraries run through the meat grinder of the MooTools dev team making it much cleaner and more consistent than I ever did. This also lead to a lot of changes.

The Clientcide Libs

A lot of things have changed, actually. Here’s the high-level list:

  • MultipleOpenAccordion
    • now only takes options
    • openAll defaults to false
  • CiUI (iPhone code)
  • Browser.Extras
    • methods now either part of URI class or stand alone string methods
    • Browser.qs deprecated entirely; use new URI().getData()
  • Class.Binds
    • mutator is now upper case (Binds instead of binds)
  • Class.Refactor
    • no longer an instance method (you can’d to Foo.refactor({props}) – you must do Foo = Class.refactor(Foo, props))
  • Element.Forms
    • deprecated Element property inputValue; too confusing!
  • Element.Position
    • Element.setPosition is now Element.position and vice versa. I.e. Element.position (which in MooTools 1.2.1 took an object with x/y coords for top/left) is now Element.setPosition. Element.setPosition (which in the previous Clientcide libs took options for relative positioning) is now Element.position.
  • Element.Shortcuts
    • Element.isVisible is Element.isDisplayed
  • IframeShim
    • options:zindex renamed to zIndex
  • OverText
    • no longer takes a collection of inputs.
    • .showTxt > .show, .hideTxt > .hide
    • .hide and .show no longer take the element and ‘focus’ arguments.
    • .repositionAll is gone; .repositionOverTxt is now just .reposition; it does not take an argument
  • String.Extras
    • findAllEmails gone, too specific
  • Date
    • deprecated String.zeroise
  • JsonP
    • renamed to Request.JSONP
    • constructor/send/prepareUrl take options hash, no longer an url directly (like Request)
    • user can change options on the fly when calling send() with a new hash, reusing the object
    • added check method. support for link: ignore, cancel, chain (like Request)
    • added success, request and cancel events
    • data can be a hash or string now (like Request)
    • queryString option gone
    • makeUrl logic now moved to new getScript(), which directly returns the script
    • changed how it essentially works. instead of storing the object reference, we store a new function every time a request is made, that keeps a reference of the script element and the object instance.
    • abortAfter and timeout gone. there’s now a single timeout for retries and for when retries run out.
    • globalFunction gone, deemed useless
  • Request.Queue
    • event names all renamed; onRequestStart >> onRequest, onRequestSuccess >> onSuccess, etc
  • StickyWin
    • StickyWin.Fx is now just StickyWin.
  • MultipleOpenAccordion
    • Now only takes an options argument; container argument is deprecated.

Don’t Freak Out

The good news is that I’ve authored compatibility for all of these things. In theory you should be able to download the 1.2.2 core, the new More, the latest Clientcide and include the compatibility scripts and go about your business. At some point you’re going to want to refactor things with the changes above in mind so that you can remove the compat files of course, but in theory you should be ok (and if not, file a bug).

There’s three changes that I can’t really write a compatibility file for

  • FormValidator
    • The base FormValidator class no longer injects advice into the document. You must use FormValidator.Inline for this behavior.
  • Class.refactor
    • this.parent is no longer useful; you must use this.previous
  • String.cleanQueryString
    • if you specify a custom message its arguments are now key, value (before it was set where set was “key=value”).

FormValidator now has been split into FormValidator and FormValidator.Inline. FormValidator just validates forms but doesn’t really do anything; it just fires events when inputs and forms are validated. FormValidator.Inline is what the Clientcide FormValidator used to be with the advice injected into the document after each input. So if you’re using FormValidator, you’ll need to do a quick search and replace for “new FormValidator” and replace it with “new FormValidator.Inline” and you should be fine.

Class.refactor no longer has access to this.parent, only this.previous. You’ll need to find these references and change them.

String.cleanQueryString, which accepts an optional function, now passes different arguments to that function.

Hopefully these 3 changes won’t represent a huge burden for you.

Clientcide Organizational Changes

I’m moving the libs here over to github. This should make it easier for others to get involved and fix bugs and now that MooTools is on git I want to consolidate my workflow. This means that, as of today, the google code svn is basically no longer in use. I’ll be updating it shortly to reflect this.

I’m also moving the ticketing for Clientcide. I was going to move it to lighthouse but now I’m thinking I’ll use the new issues system that’s on github. It’s not very robust, but it should do for my purposes. I’ll leave the open tickets that are on google there for now and close them out as I can.

Feedback on all this stuff is, as always, greatly appreciated.

MooTools 1.2.2 and MooTools More

April 23rd, 2009 by Aaron N.

In case you didn’t notice, MooTools 1.2.2 just launched along with MooTools More (1.2.2.1; were the last digit is the version of -more).

I’m working on a big update to Clientcide which I might get out tonight but it might take me a day or two to get it all together, so stay tuned.

I Can Illustrate?

April 15th, 2009 by Aaron N.

I’m working on some UI foo for my job. Some of the activities that users can do involve clicking on things (strange, I know) and sometimes I have icons for those things. Cloudera uses a technology called Hadoop. Two of the items users can click on are a job tracker and a product called hive (both are part of Hadoop). Hadoop has a cute little yellow elephant logo, but Hive and the Hadoop jobtracker don’t have anything. So I rolled up my sleaves and made some. I know this isn’t JavaScript related, but I was happy with how these turned out and thought I’d share.

Clientside Image Compression

April 1st, 2009 by Aaron N.

Over the last year of consulting I’ve done several jobs where I didn’t have access to the images used by the site. In one case it was 3rd party software and I was just enhancing the user experience through JavaScript, in another case the images were created dynamically by the server. In yet another case I worked on a site that had editors uploading photos all the time.

In each of these cases it became apparent that the images were never optimized by the people creating them (or, in the case of the machine, by it). I got inspired by smush.it which was demo-ed at the Ajax Experience last year in Boston and spent some time picking apart PNGCrush (an open source image cruncher) and have put together a rather robust solution in JavaScript.

Introducing the JavaScript PNG Resizing Image Library

The JavaScript PNG Resizing Image Library (a.k.a. JPRIL) is easy to use. Just include the library in your document and it will find all the PNG files on your page and compress them for you. You can also call JPRIL directly on a PNG file (for images loaded by JavaScript after the page loads) like so:

JPRIL('myPngElementId')

It’s that easy.

The Output

JPRIL automatically replaces any PNGs in the document with it’s compressed version, garbage collecting the older, larger version. The images look about the same, but how compressed they are is up to you. You can pass in a second argument which is treated as a percentage for compression. Here are two examples:

jprilfools

Download

The code is of course open for anyone to use. Just click here to download it. Compressed and gzipped it’s only 62K.

Update

Yes, this is an April fool’s joke.

Update Update

…someone actually made it: http://ajaxian.com/archives/javascript-jpeg-encoding