All posts tagged ‘APIs’

File Under: Web Basics

HTML5 Drag-and-Drop API Is no Panacea for Developers

We’ve all seen it happen: a less web savvy friend wants to upload an image so they grab it from the desktop and drag it over to their web browser where… nothing happens. It’s good for a chuckle every now and then, but really, isn’t that exactly how you should upload a file to the web? After all, it works everywhere else on your PC.

Developers have been pining for drag-and-drop support in webapps pretty much since the first servers came online. But now, with HTML5 nearly here, true drag and drop support is about to become a reality.

Yes, there are JavaScript libraries that allow you to create drag-and-drop interfaces within the browser, but that’s not what we’re talking about. Rather, HTML5 offers the holy grail — drag a file from your desktop straight to a browser window and it will magically upload.

Of course, for developers, nothing is every that easy. The drag-and-drop portion of the HTML5 spec is very new, incomplete and at the moment, really only works in a very limited form in Firefox 3.5 and Safari nightly builds.

But that doesn’t mean people are starting to experiment with it. Leslie Orchard of Mozilla recently posted a very nice tutorial that will walk you through the basics of the HTML5 drag-and-drop API and help you create a little demo app (another nice working demo can be found over at The CSS Ninja).

Orchard concludes that the “first-class drag and drop events in HTML5 and Firefox make supporting this form of UI interaction simple, concise, and powerful.” However, web developer Francisco Tolmasky has a decidedly different take.

Tolmasky recently posted about his experiences implementing a drag-and-drop interface for his slide presentation web app, 280 North (think Keynote in the browser). Tolmasky found that not only are there a number of browser bugs and implementation shortcomings, but the spec itself is flawed in many ways. For example, as Tolmasky discovered, there is no reliable way to determine whether a user wants to drag an object, or simply select several by dragging to highlight them.

Another problem, and one that’s more prominent in the other side of the drag-and-drop experience (i.e. dragging out of or within the browser) is the complexity involved in figuring out where the user plans to drop the selected item and how that effects what the webapp should do with the item:

Take 280 Slides for example: When a user drags the slides out of slides navigator, he may be planning to drop it to any number of locations. If he is dragging it from one instance of 280 Slides to another, then we want to provide a serialized version of these slides so that they can be added to the other presentation. If however, he drags these slides into a program like Photoshop, then we would want to provide image data. If he were to drag them to his desktop, then perhaps we could provide a PDF version. He could even drag them to his text editor and expect the text contents of his slides to be pasted.

Desktop APIs provide hooks to delay the “what do I do with this object” problem until you actually drop the object somewhere, which saves a ton of processing overhead. But the HTML5 spec currently doesn’t have any such delays. And, in the case of dragging a large number of objects, this shortcoming can result in significant lag times.

Luckily the HTML5 drap-and-drop API is still a work in progress. The WHATWG is still gathering developer feedback. As always, if you’ve got ideas or solutions let them know on the official WHATWG mailing list.

See Also:

File Under: Uncategorized

Build an App With Yahoo Pipes

Yahoo PipesYahoo’s data plumbing application, Pipes, lets you turn RSS feeds and output from APIs into data you can use. It’s extremely powerful.

One cool feature I hadn’t noticed is that it has the ability to output to a web service. So, you can set up a page on your own server to accept input from Pipes when the result changes. While I love the RSS output option, if you’re building an app on top of Pipes, you’d need to ping the RSS feed often. The web service feature means always having the latest data available to Pipes.

The Pipes team posted a brief tutorial showing how to use Pipes with AppJet and Google App Engine. In these cases, you don’t even need to have your own server to accept the output–and do something–with Pipes data.

If you’re brand new to Pipes, be sure to check out my Pipes tutorial.

[via Amber Case]

See also:

File Under: Uncategorized

Google Data Visualization Opens a New Web

Google Visualization APIThe Google Visualization API is now open to any data source, as long as it is connected to the web. Previously only Google Spreadsheets could be used as a source. With the announcement, enterprise CRM provider released tools for working with its data.

Given the enterprisey feel of this announcement, it’s easy to miss the big picture for the web. Google is encouraging companies to open up their data. The future of the web is one big mashup, but that requires every service to have an API. It helps to have Google encouraging that behavior.

When the Visualization API was first released, it looked like a replacement for Excel charts. Now it’s bringing these charts, and the data inside them, to the web at large.

See also:

File Under: Uncategorized

Three Great Calendar APIs to Keep You on Schedule

CalendarIf you’re incorporating date and time data into a website, it may not make sense to roll your own calendar system. Using someone else’s service can cut down on development time and may give you more features than you’d have if you did it on your own.

Here are three free APIs to look into if you want to build a calendar or event tool.

30 Boxes – The basics are covered: programmatically add, retrieve, update and delete events on this popular calendaring site. The API also lets you search events by full text or tag. 30 Boxes also has todo data available through the API.

Google Calendar – Does everything that 30 Boxes does, minus the todo stuff. It’s hard to deny the power of ubiquity. If your app needs to access your user’s data elsewhere, you’ll probably use Google Calendar.

Spongecell – This event promotion service also has a surprisingly complete API. If you’re looking to create private calendars, this might not be the one to choose. If you organize events yourself, check out Spongecell. In addition to normal calendar stuff, you can send invitations, check on responses, and more.

See also: