Archive for the ‘JavaScript’ Category

File Under: HTML5, JavaScript

Dropzone.js Adds Drag-and-Drop File Uploads to Any Site

New web technologies tend to travel a trajectory that moves from “amazing demo with fiendishly complex code”, to “very cool product feature” and finally to open source library that takes 10 seconds to add to your page. Today’s cutting edge demo is tomorrow’s jQuery plugin.

Take drag-and-drop file uploads for instance. The HTML5 File API ostensibly solves one of the most common complaints from web app users — why can’t I just drag and drop files like I do everywhere else? Well, then you could, but it wasn’t easy to build.

Then drag-and-drop file uploads became part of Gmail, which meant it was only a matter of time before a jQuery plugin appeared. In fact there are several jQuery plugins that cover this ground, but one particularly nice newcomer is Dropzone.js.

Dropzone.js makes it dead simple to add a drag-and-drop file uploader to any website, complete with previews of uploaded files. Dropzone also supports the traditional file-picker uploading as well; you don’t have to drag and drop.

Dropzone supports most modern web browsers, including Chrome 7+, Firefox 4+, IE 10+ and Safari 5.

If you’re interested, head on over to GitHub and grab the source code (obviously the plugin requires jQuery, but there is a version that will work with RequireJS as well). Also be sure to read through this Hacker News thread for some similar projects and possible alternatives for those who’d like to avoid the jQuery overhead.

File Under: JavaScript

New ‘Registry’ Hopes to Simplify Finding, Sharing jQuery Plugins

JQuery, the crown king of JavaScript. Image: Roberto Verzo/Flickr.

JQuery greatly simplifies working with JavaScript, particularly for newcomers, and that has long made it a favorite with developers — roughly half of all sites on the web are using it. However, while jQuery itself simplifies things, finding plugins on the site has always been a huge pain.

In an effort to clean up and simplify the process of finding the perfect jQuery plugin, the jQuery project is launching a new site, the jQuery Plugin Registry. In a blog post announcing the new registry site, developer Adam Sontag says that the goal is to “reduce the… obstacles for plugin developers and consumers.”

Based on what’s currently available, the jQuery project has done a good job of building better back end tools for developers, but finding a plugin isn’t much easier than it was before.

Most of what’s new about the jQuery Plugin Registry is for plugin developers — namely Git support and very nice integration with GitHub. Developers can now publish their code to GitHub and the jQuery Plugin Registry will automatically be updated.

Unfortunately for those trying to find the perfect plugin to use on their sites the new Registry site has little in the way of new tools.

As with the old, much-neglected plugin site, each plugin gets a basic page that offers a download link as well as a link to past versions, documentation, the issue tracker, and the source code repository. However, actually browse through the site and you’ll discover that much of that info is often missing. Most jQuery plugins offer little in the way of documentation and the site still lacks any kind of preview images (if available there will be a link to a demo page).

The new site also ignores what could be helpful social tools — there are no user ratings, download counts, likes or anything else to indicate whether or not people actually like using a plugin. Of course now that the plugin registry code is on GitHub, it’s easy to see that issues regarding the site search and lack of screenshots have already been filed. When, or even if, they’ll ever make it to the site remains to be seen. For now the new site remains rough around the edges.

File Under: HTML5, JavaScript

Emulator Brings the Bygone Era of Amiga to the Web

Amiga pinball wizard.

Miss your Amiga? Now you can play Prince of Persia, Pinball Dreams and other Amiga hits right in your web browser thanks to the Scripted Amiga Emulator, an Amiga emulator written entirely in JavaScript and HTML5.

To view the emulator, which was written by developer Rupert Hausberger, you’ll need a browser with support for WebGL and WebAudio, as well as a few other HTML5 APIs. I tested the emulator in the latest version of both Chrome and Firefox and it worked just fine.

If you’d like to see the code behind the Scripted Amiga Emulator, head on over to GitHub.

Happy Friday afternoon time wasting.

Find Tweetable Sentences With ‘Save Publishing’

This post with tweetable sentences highlighted by Save Publishing. Image: Screenshot/Webmonkey

Ever wish you could quickly scan an article and find all the 140 character or less sentences so you could figure out which to post to Twitter? The idea had never occurred to me, but now that I’ve used the Save Publishing bookmarklet I have to admit, it actually is pretty darn useful.

Save Publishing is a bookmarklet that highlights any tweetable sentences on a given page. You can grab it from or head over to GitHub if you’d like to see the source (Save Publishing is written in CoffeeScript).

The bookmarklet is the work of former Harper’s editor Paul Ford, perhaps better known as @ftrain. Ford says the project started as a joke, but “now it’s serious and I use it all day.”

I expected the novelty to wear off quickly after I used it a few times, but now it’s been a few days and I still find myself using it. Sometimes the faintly ridiculous manages to become useful. What would make Save Publishing more useful is a way to use it within Twitter clients like Tweetbot, but thus far that’s not possible.

Add an HTML5 Webcam to Your Site With Photobooth.js

WT Monkey is in your photobooth.js, changin’ hues. Image: Screenshot/Webmonkey

The big web development news for 2013 is shaping up to be WebRTC, a set of APIs being developed by Mozilla, Google and others at the W3C that allows web developers to access device hardware — your camera, microphone, accelerometer and so on. Even now hardly a day goes by without a new demo showcasing WebRTC in some way.

The latest WebRTC hotness to catch our eye is developer Wolfram Hempel’s Photobooth.js, a JavaScript library for working with a device’s camera. Photobooth.js allows users to take pictures directly on your website, for example, to add an avatar. It also acts a bit like the OS X Photobooth app, offering real-time adjustments for hue, saturation and brightness (one word of warning, hue can really slow down Firefox).

Want to add a Photobooth-style camera app to your site? Just download Photobooth.js and add this code to your page:

myPhotobooth = new Photobooth( document.getElementById( "container" ) ); 

That’s it. Of course there’s a little more to do if you actually want to do something with your newly instantiated Photobooth — like capture images or resize and save them. But Photobooth.js makes the whole process pretty simple; see the documentation for more details.

Photobooth.js works in current versions of Chrome, Firefox, Opera, and any other browser that supports the WebRTC getUserMedia method. You can see a complete list of browsers that support getUserMedia over on caniuse.

Hempel’s code is available on GitHub (BSD license) and can be used as a standalone app or a JQuery plugin.