Donahue is a web app co-designed and built by Arc90 and Behavior Design. The original idea for Donahue was born out of frustration with the state of (in)attention paid to presenters at conferences. As the project evolved, the tool shifted to one that attempts to break down the wall between the presenter and the audience. By creating a frictionless environment for the audience to react, respond, reject or share the presenter’s ideas, Donahue shifts the standard presentation from a broadcast / consumer approach into a that of a conversation. And this is precisely the reason that people attend conferences – to engage in conversations.

Donahue – a new and unique presentation tool powered by Twitter – was unveiled at SXSW 2011, in a talk co-presented by Arc90′s Tim Meaney and Behavior Design’s Chris Fahey. Tim and Chris delivered the talk, titled “Toss the Projector: Redefining the Audience / Presenter Dynamic“, via Donahue. The ideas explored in this talk were reinforced by Donahue, including:

• Conference talks, like all media, have been transformed from broadcast to conversation.
• The technology of the conference presentation is broken.
• The audience insists upon having a conversation in real-time about the presenter’s ideas, and the presenter should embrace this.
• A presenter’s goal for a talk should be to start a meme.
• Our collective concept of attention is changing.

Donahue uses Twitter as its conversation medium. Each “slide” unveiled in Donahue is actually a tweet sent out in real-time by the presenter. The audience reaction (i.e. the “back channel”) is collected and displayed by Donahue in a unique presentation console that participants – whether present at the talk or anywhere in the world – can enjoy and use to directly engage. The result is a uniquely intimate and engaging experience that is markedly different from the typically passive experience of sitting through an exposition accompanied by a slide deck.

Another premise behind Donahue is that while presentations have a beginning and end point, the chatter lingers on long after. Donahue leaves behind a permanent record of the speaker’s ideas, and the audience’s reaction to their points. This eliminates the abstraction of uploading the slides for later review by the audience, as the speaker’s ideas are immediately and always available online.

As a real-time platform for having a conversation around a conference presentation, Donahue had to be extremely scalable and performant. The possibility for a huge amount of curious participants was very real, as Donahue reaches out immediately into Twitter (what we internally called The O’Reilly Effect, where one retweet from Tim O’Reilly could bring in tens of thousand viewers to the presentation). Donahue achieved this level of performance with an architecture built upon real-time consumption of the Twitter API, dedicated node.js servers for the presenter and projector views of the content, a replicated farm of node servers for serving content to participants and directly connected clients using WebSockets instead of aggressive polling. The kick-ass development team behind Donahue will be sharing the architecture and technical thinking behind Donahue in future blog posts.

Arc90 and Behavior are exploring options for moving this project forward, follow @donahueapp on Twitter to stay informed of any news.

On the server side, projects like Google’s V8 show off Javascript’s prowess and power beyond the browser. Building on top of V8, Node.js leverages sever-side Javascript to allow for incredibly powerful, scalable software. Unfortunately, what isn’t included in the box with Node.js is the ability to leverage the powerful DOM capabilities built into nearly every browser that exists today. Enter our latest Arc90 Lab tool, JSDOM.

Jsdom is a CommonJS implementation of the W3C Document Object Model (DOM) designed to work with Node.js. It is intended to be platform independent and as minimal/light as possible while adhering to the W3C DOM specifications.

• Why build this?
• How does it work?
• Installation
• License
• Acknowledgement
• Discuss

Why build this?

One of the first things that a front-end developer coming to a server-side Javascript platform notices is the lack of a window and/or document object.  Without a browser environment it is impossible to run the frameworks and libraries that we have all come to know and love.  JSDOM provides such a browser environment making it easy load external scripts and execute them in the context of a browser Window on the server.

By allowing both the server and the browser to interpret and manipulate the DOM, a host of new possibilities arise. For example, graceful degradation from rich AJAX-style experiences to simpler page-driven experiences is now much easier with JSDOM. In addition, powerful server-side DOM manipulation (e.g. to extract or replace certain elements depending on certain conditions) is now possible.

How does it work?

Getting started with JSDOM is quite simple. You will need node.js and the JSDOM library, and of course, a basic understanding of Javascript.

The following example shows how to create a DOM Window, load the jQuery framework, and run some code – right on the server:

    var html = '
    <html>\
      <head>\
      </head>\
        <body>\
        <h1>Hello World</h1>\
        <p>This is a <em>stupid simple</em> example</p>\
        </body>\
    </html>\
    ';

    // create a new window, with the above markup
    var window = require('jsdom').jsdom(html).createWindow(),

        // create a new script tag to load up jQuery
        script = window.document.createElement('script');

    script.src = 'http://code.jquery.com/jquery-1.4.2.js';

    // when jQuery finishes loading
    script.onload = function() {

      // Since this is not a browser we need to specify the window that jQuery has
      // been added to

      // Output: 'H1 Contents: Hello World'
      console.log("H1 Contents:", window.jQuery('h1').text());

      // do a simple replace on the `em` text above
      window.jQuery('p em').text('silly');

      // Output: 'P Contents: This is a silly example'
      console.log("P Contents:", window.jQuery('p').text());
    };

    // Append the element to the head element of the document
    window.document.head.appendChild(script);

Installation

JSDOM’s source code is hosted on github along with examples, use cases, and other useful information. You may also use NPM to install JSDOM by typing the following in your terminal `npm install jsdom`

License

This library is licensed under the MIT Open Source license.

Acknowledgement

This ambitious project is the brainchild of Arc90 lead engineer Elijah Insua.

Discuss

If you have questions about JSDOM or would just like to share your thoughts, you can do so at the Arc90 blog.

The XPath specification is pretty simple, allowing for the searching (and limiting of those searches) within an XML document that is provided as context. I’m not going to go into how to write XPath, but I’ll point you to the spec for 1.0. I’m a firm believer in not reinventing the wheel, so the first thing I did was look for an XPath library written in ActionScript’s close cousin, JavaScript. It didn’t take much searching to find Form Faces. The project appears to be defunct, but it provided the basis for my implementation. I have optimized the library where possible, but it is still not as fast as the native E4X implementation. The full feature set of the XPath 1.0 specification has been implemented.

One note on how to improve performance: position predicates in the form of /document/element[1] are much faster than boolean predicates in the form of /document/element[@name = 'temp'].

How to use it

The entry point for the library is the com.watchthosecorners.xpath.XPath class. It has two static methods and two instance methods that allow either the evaluation of an XPath query or the selection of a single node. Imagine we have the following XML document for use in our XPath queries (bear in mind that XPath uses 1 as its start index, not 0):

<document>
   <element>Some Value</element>
   <element>Some Other Value</element>
</document>

The following snippet would retrieve the text value of an element. The evaluate method can return a string, a boolean, a number, or a node-set (an array of values):

var string1:* = XPath.evaluate("/document/element[1]/text()", document);
var string2:* = new XPath("/document/element[2]/text()").evaluate(document);
trace(string1) // Output: Some Value
trace(string2) // Output: Some Other Value

var nodeSet:NodeSet = XPath.evaluate("/document/element", document);
trace(nodeSet) // Output: <element>Some Value</element>,<element>Some Other Value</element>

var boolean:Boolean = XPath.evaluate("1 = 1");
trace(boolean) // Output: true
boolean = XPath.evaluate("/document/element[1]/text() = 'Some Other Value'", document);
trace(boolean) // Output: false

var number:Number = XPath.evaluate("count(/document/element)", document);
trace(number) // Output: 2

The snippet below would select a single XML element (the value is returned as the native XML type):

var result1:* = XPath.selectSingleNode("/document/element[1]", document);
var result2:* = new XPath("/document/element[2]").selectSingleNode(document);

trace(result1) // Output: <element>Some Value</element>
trace(result2) // Output: <element>Some Other Value</element>

While the use cases above are simplistic, the XPath library allows for powerful searching of an XML document at runtime. One possible used could be to extend the DataGrid and DataGridColumn classes to support XPath as a value for the dataField property, thereby allowing more complex lookups of values.

Get it

The AS3 XPath Library is hosted on googlecode. It is built with Maven and consists of two modules.

1. as3xpath-core: This is the core functionality and is all that’s required in a project. (API Docs)
2. as3xpath-ext-functions: This library contains a small set of functions that can be used in XPath queries, it is not required. (API Docs)

For those who use Maven to manage dependencies, there is a maven repository here and the source for all releases and current development can be viewed here.

Issues

Please report any bugs in the issues section of the googlecode project.

License

AS3 XPath Library is released under the Apache 2.0 license.

Discuss

Please offer feedback in the comments, or email me, Andy Lewisohn, at andrewl@arc90.com.

Demo

Why?

My original experiment, HalfMask, produced lots of good discussion, which is exactly what I had hoped for. As security expert Bruce Schneier said recently, password masking is not a panacea. Finding a solution that provides both security and usability is the goal.

As with HalfMask, HashMask is purely an experiment. I’m not suggesting that this is the best middle ground between clear and masked passwords. I am just hoping to get the community thinking about different approaches.

How does it work?

HashMask is a jQuery plugin that will produce a unique and non reversible visualization of a users password. The hope being that they would be able to confirm that they entered their password correctly, but no one else would. It also degrades gracefully so that users without javascript or a poor browser (IE6) will just see a password field.

Technically speaking, it uses a subset of the sha1 hash of the password as the seed for the sparkline’s shape and color. It should be relatively safe from reverse engineering as a result. There is the potential to estimate a possible range of characters of the first section of the hash, but overall this should be a extremely low risk.

Can I use it?

HashMask is still alpha-level software, but it should be relatively safe to use on an experimental basis if you are interested. It should work on Firefox 3, Safari 4 and IE6+. It’s available here, as well as on google code.

Download

Click on the icon to go to the download directory at google code:

Additionally, you may view the source directly in google code.

License

HashMask is released under the BSD license.

Room for Improvement

I personally like this approach much better than HalfMask. It’s more secure at the loss of slight usability. That said, there is room for improvement, specifically with regard to more memorable and elegant visualizations. A colored sparkline works, but it’s not ideal. If you have suggestions, please let me know or feel free to fork and implement!

Discuss

Any feedback on the concept is welcome – feel free to post it on the Arc90 Blog, or Follow me on Twitter.

Update: If you find HalfMask interesting, you may want to check out our newer experiment, HashMask.

Demo

Why?

There’s been a lot of buzz in the tubes lately about password masking being A Bad Thing, specifically brought on by Jakob Nielsen’s AlertBox article, Stop Password Masking. To be frank, I couldn’t disagree more with this. I think showing clear passwords would be a huge mistake, despite the obvious usability gains. But I’m all about compromise, so HalfMask is an attempt to meet Jakob halfway.

I’m not suggesting that this is the best way to mask passwords. I am just hoping to get the community thinking about different approaches by exploring one approach.

How does it work?

HalfMask is a jQuery plugin that will obscure a password field with random characters. The intent is that to a casual observer the field will be unreadable at a glance, but the user inputting the text will be able to read it relatively clearly as they only need to confirm what they input, not read it fresh.

In this way, it is usable enough, by being visible to the author, but not too usable, in that shoulder surfers shouldn’t be able to read it. It also degrades gracefully so that users without javascript or with a poor browser (IE6) will still see a password field.

Can I use it?

Well sure, but I can’t recommend using this in any critical software. It should work in Firefox 3, Safari 3 and IE7. It’s available here, as well as on google code.

Download

Click on the icon to go to the download directory at google code:

Additionally, you may view the source directly in google code.

License

HalfMask is released under the BSD license.

Known Issues

There are a few known issues with this approach:

• Text becomes nearly impossible to read at small fonts.
• Password fields are still vulnerable to cameras/recording.
• Colorblind people may have a harder time reading the correct text.

These are issues which readers are welcome to solve with their own approach or with modifications to this one!

Discuss

Please offer feedback on the Arc90 Blog, or email me, Chris Dary, at chrisd@arc90.com.

Enter TBUZZ:

You can install TBUZZ in just a few seconds by visiting:

http://tbuzz.arc90.com

If you’ve got thoughts, feedback or suggestions regarding TBUZZ, feel free to leave a comment on the Arc90 blog.

Update: On February 1, 2011, Readability was re-launched into a full-fledged reading platform that includes mobile support, queuing articles for reading later and a greatly improved reading view. In addition, the platform provides a unique model for supporting publishers and writers through your reading activity. Visit http://www.readability.com to learn more.

Reading anything on the Internet has become a full-on nightmare. As media outlets attempt to eke out as much advertising revenue as possible, we’re left trying to put blinders on to mask away all the insanity that surrounds the content we’re trying to read.

It’s almost like listening to talk radio, except the commercials play during the program in the background. It’s a pretty awful experience. Our friend to date has been the trusty “Print View” button. Click it and all the junk goes away. I click it all the time and rarely print. It’s really become the “Peace & Quiet” button for many.

Recently, Mandy Brown wrote a wonderful article for A List Apart called In Defense Of Readers. It’s an attempt to awaken designers responsibility to those who read on the Web:

Despite the ubiquity of reading on the web, readers remain a neglected audience. Much of our talk about web design revolves around a sense of movement: users are thought to be finding, searching, skimming, looking. We measure how frequently they click but not how long they stay on the page. We concern ourselves with their travel and participation–how they move from page to page, who they talk to when they get there–but forget the needs of those whose purpose is to be still. Readers flourish when they have space–some distance from the hubbub of the crowds–and as web designers, there is yet much we can do to help them carve out that space.

Mandy is spot on – and her concerns are even more salient in today’s cram-all-the-ads-on-one-page Web.

In response to all this madness, we’d like to introduce Readability:

Readability : An Arc90 Lab Experiment from Arc90 on Vimeo.

Readability is a browser bookmarklet (sort of like a bookmark on steroids). You can install Readability by visiting the Readability setup page:

http://lab.arc90.com/experiments/readability/

Readability works with most major modern browsers and has been tested on many news sites and blogs. It isn’t 100% effective but works surprisingly well.

Our latest experiment was partly inspired by Marco Arment’s awesome Instapaper application (and equally awesome Instapaper iPhone app). We hope you enjoy this little tool. If you find any issues, feel free to comment on our blog.

If you’d like to keep track of Readability and other experiments that may escape out of our lab, be sure to subscribe to our RSS feeds for the lab and blog or follow us on Twitter for announcements.

The Readability code (including setup pages and supporting assets) is available on Google Code.

Readability is licensed under the Apache License, Version 2.0.

ASXB is a concrete implementation of XML binding that used custom metadata as the means of annotation. This is the 0.1 release of ASXB and so it’s fairly rough around the edges and is intended to test the waters, so to speak, of the ActionScript developer community. If the ASXB project seems like it might be of use in your development, please comment on it over in the arc90 blog.

• What is this?
• How do I use it?
• Documentation
• Licensing
• Discuss ActionScript XML Binding

What is this?

The ActionScript XML Binding (ASXB) project is intended to make the marshalling/unmarshalling of XML/ActionScript objects a much easier task. It’s a small library that allows a developer to use custom metadata to annotate his/her ActionScript objects for seamless marshalling and unmarshalling.

How Do I Use It?

To use ASXB in your Flex project, just follow these simple steps:

Download The Code

Add the code to your Flex or AIR project

Add compiler settings

Annotate your ActionScript objects

	[XmlRootElement(name="book")] 	public class Book 	{ 		[XmlAttribute(name="authorFullName")] 		public var author:String; 		 		[XmlAttribute] 		public var dateOfPublication:Date; 		 		[XmlAttribute(name="pageCount")]  		public var pages:int; 		 		[XmlElement] 		public var title:String; 		 		... 	} 

	<book authorFullName="Alastair Reynolds" dateOfPublication="2003-5-27" pageCount="704"> 		<title>Chasm City</title> 	</book> 

Create an instance of XMLService using either MXML or ActionScript.

	<arc90:XMLService id="service" url="http://example.url/service/" fault="faultHandler(event)" result="resultHandler(event)"/>   

	import org.orpheus.xml.bind.XMLService; 	 	var service:XMLService = new XMLService(); 	service.url = "http://example.url/service/" 	service.addEventListener(FaultEvent.FAULT, faultHandler); 	service.addEventListener(ResultEvent.RESULT, resultHandler);   

XMLService functions exactly like mx.rpc.http.HTTPService

	var book:Book = new Book(); 	book.author = "Alastair Reynolds"; 	book.title = "Chasm City"; 	 	service.send(book); 	 	// or 	 	service.request = book; 	service.send(); 

	private function resultHandler(event:ResultEvent):void 	{ 		var book:Book = event.result as Book; 		 		trace("You have retrieved " + book.title + " by " + book.author + "."); 		// OUTPUT: You have retrieved Chasm City by Alastair Reynolds.	 	} 

Documentation

Review the complete documentation for a full list of all properties, methods, and annotations of the ActionScript XML Binding project.

Licensing

This arc90 tool is licensed under the BSD license

Discuss ActionScript XML Binding

You can offer feedback on ActionScript XML Binding at the arc90 blog.

Interested? Apply for an API key, download the PHP client library and get started!

• What is this?
• How do I use it?
• Documentation
• Licensing
• Discuss Best Buy Remix API Client

What is this?

BestBuy_Service_Remix is a PHP library for placing HTTP calls to the Best Buy Remix API.

How Do I Use It?

To use BestBuy_Service_Remix in your PHP project, just follow these simple steps:

Download The Code From Google Code

Add the code to your PHP project

Create a BestBuy_Service_Remix API client with a valid API key

<?php
require_once('BestBuy/Service/Remix.php');
$remix = new BestBuy_Service_Remix('YourApiKey');

BestBuy_Service_Remix returns a response object containing API response data and HTTP metadata recorded by cURL

<?php
require_once('BestBuy/Service/Remix.php');
$remix = new BestBuy_Service_Remix('YourApiKey');
// Retrieve a list of Movies containing the text "Bat"
$result = $remix->products(array('name=bat*','type=Movie'))->query();
if(!$result->isError())
{
echo $result;
}
else if(403 != $result->http_code)
{
// API errors result in an error document with detailed info
echo $result->toSimpleXml()->message;
}
else
{
// 403 errors do not contain a full document, only an h1 message
echo $result->toSimpleXml()->h1;
}

Documentation

Complete documentation is included with each download in the ‘docs’ folder.

Licensing

This library is licensed under a BSD license.

Discuss

Share your thoughts, or just let us know what you’re up to over at the Arc90 blog.

But you didn’t.

Your app has no logging at all, and you have no ability to see what’s happening in real-time other than firing up ol’ SQL Server Management Studio and attempting to run queries before and after every action in your app. Now there is a better way.

• What is this?
• How do I use it?
• Documentation
• Download the code
• Licensing
• Discuss

What is this?

SqlWatcher lets you use your web browser to query a SQL Server 2005/2008 database. Big deal so far. But after returning your results to you, SqlWatcher watches the database and notifies you instantly when your query results change, re-running your query and appending the latest results to your web browser as needed.

SqlWatcher does not poll for changes, nor does it leave a database connection open, both of which could hammer your database performance. It uses the power of SQL Server’s Query Notifications to let the database engine itself track data changes that would impact your query results. Whether data was added, deleted, or modified, if it touches data that was in your results, or adds new data to it, Query Notifications sees it and pushes a notification out to a SqlDependency object in SqlWatcher. When SqlWatcher receives a notification, it re-runs your query and appends the latest results to your web browser, allowing you to see your query’s results before and after every database change.

Query Notifications relies on SQL Server’s Service Broker for reliable asynchronous delivery of these notifications to clients such as SqlWatcher. As a result, Service Broker must be enabled on the database you are trying to watch. If it’s not, SqlWatcher will attempt to run

ALTER DATABASE yourdatabase SET ENABLE_BROKER

beforehand, and

ALTER DATABASE yourdatabase SET DISABLE_BROKER

afterwards, but you will need to provide administrator-level credentials in the connection string for this to work.

How do I use it?

1. Download SqlWatcher
2. Unzip the /distribution folder to a new folder named /SqlWatcher on your web server and create a new application in IIS MMC
3. Point your browser to http://(your server)/SqlWatcher
4. Enter the server, database, login, and password to connect to your database
5. Enter a SELECT query, or a stored procedure call that performs a SELECT. See Special Considerations Using Query Notifications (ADO.NET) for the fine print, but wildcards are forbidden and table names must use two-part names. In other words,

   SELECT * FROM customers WHERE last_name LIKE 'Pot%'

   will fail, but

   SELECT id, first_name, last_name FROM dbo.customers WHERE last_name LIKE 'Pot%'

   will work.

6. Enter the number of updates you wish to see, or 0 for unlimited. Your browser will automatically append each database update as it occurs until Max Notifications is received or you hit ESC in your browser, at which point SqlWatcher will automatically clean up.
7. Run your application. As you make changes, SqlWatcher will add more data snapshots to your browser. For clarity my example client code is extremely bare-bones, so feel free to fancy it up with some AJAX.

Documentation

Source code is fully documented. CodeProject: Using SqlDependency for data change events provides an excellent introduction to, and concrete examples of, working with the SqlDependency class, and was instrumental in getting SqlWatcher operational. SqlWatcher was written in C# in Visual Studio 2008 and requires ASP.NET 2.0. It has no database of its own but can watch any SQL Server 2005/2008 database with Service Broker enabled, or can enable it automatically with an admin-level connection string.

Download the code

Click on the icon to go to the download directory then select the latest version:

Licensing

This arc90 tool is licensed under the BSD license.

Discuss

Feel free to offer feedback on the blog, or feature requests/bugs on Google Code.