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

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

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.

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.

Features

• Easy command line interface for setup.
• "Signs" messages by the person who sent them.
• Individual Twitter @ usernames can be displayed in signatures.
• Public tag and signature format can be customized.

Yeller uses Arc90’s PHP Twitter and Yammer API Libraries by Matt Williams.

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

What is this?

It’s a PHP script. PHP 5 or greater is required. It has only been tested on Mac and Linux.

How do I use it?

Download and extract the latest version.

Request Yammer OAuth credentials here (you will need the app key and secret during setup): https://www.yammer.com/client_applications/new

On the command line switch to the Yeller directory and run ‘php Yeller.php setup’. This will ask you for the necessary information, such as your Twitter username and password and your Yammer OAuth credentials.

Initialize the script by running php Yeller.php run.

Use crontab -e to edit your cron file. Add this line to run the script every 5 minutes: */5 * * * * cd [YELLER_DIR]; php Yeller.php run. Replace [YELLER_DIRECTORY] with the full path to your Yeller directory.

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

To provide feedback or report bugs please use the issue tracker on Google Code.

In short, CSS is great at the basics, but there is a lot of opportunity for improvement by adding a few simple programmatic concepts like variables, inheritance, syntactical cascading, and browser detection. We’re demonstrating that.

To be fair, this is a topic that is hotly contested, but a seeing the benefits in action may be useful.

• What is this?
• What does it look like?
• Why?
• Demos
• How do I use it?
• Download
• Documentation
• Licensing
• Discuss JSON CSS

What is this?

JSON CSS is a proof of concept meant to demonstrate what could be accomplished with a more powerful syntax within CSS.

What does it look like?

A simple JSON CSS stylesheet might look like this:

{
    "@variables": {
        "demoBgColor": "#FBFAF4"
    },
    "#demoContainer": {
        "background-color": "@{demoBgColor}",
        "border": "1px dotted #CCC",
        "padding": "0.5em",
        "width": "40em",
        "@browser[msie-6]": {
            "width": "400px"
        },
        "h3.header": {
            "text-decoration": "underline"
        },
        "div:first": {
            "font-weight": "bold"
        }
    }
}

Why?

Because there’s a lot of potential power that could be harnessed within CSS! Some examples of the benefits that we display with JSON CSS:

• Crazy awesome selectors – “a[href^=http]” for absolute links! Sweet!
• Variables support – You’ll never have to look up that weird hex color code for cornflower blue again.
• In-style browser detection – Just put your IE6 browser-specific styles under an “@browser[msie-6]” rule and you’re set.
• Syntactical cascading – No need to write “#content .header a”, just put “a” underneath the “.header” class rules.
• Inheritance – @inherit any previously defined selector into another class. Useful for semantic classnames with underlying un-semantic ones (like from a CSS framework).

Demos

• CSS Variables
• Powerful Selectors
• Inheritance
• Browser Detection
• Syntactical Cascading

How Do I Use It?

Download the jQuery plugin.

JSON CSS is available for download at Google Code.

Include it and jQuery within your HTML’s <head> element.

Create a sample JSON stylesheet file.

You’ll need a simple JSON CSS file to begin with. Something like this will get you started:

{
    "@variables": {
        "demoBgColor": "#FBFAF4"
    },
    "#demoContainer": {
        "background-color": "@{demoBgColor}",
        "border": "1px dotted #CCC",
        "padding": "0.5em",
        "h3.header": {
            "text-decoration": "underline"
        }
    }
}

This JSON would result in style that looks something like this:

Full documentation will be available on the google code wiki.

Include your JSON stylesheet into your HTML page.

Your <head> element should include something like the following:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript" src="jquery.jsoncss.js"></script>
<script type="text/javascript">
//<![CDATA[
	$(function() {
		$.jscss('style.json');
	});
//]]>
</script>

Download

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

Documentation

Full documentation will be available on the wiki at Google Code

Licensing

This arc90 tool is licensed under a BSD license.

Discuss

Feel free to offer feedback on the blog, or feature requests/bugs on google code.

• What is this?
• How do I use it?
• Licensing
• Discuss "Centered inline elements with a drop shadow"

What is this?

This is a tutorial on how to add a CSS-only drop shadow to an element (which requires floating) and then center it.

How Do I Use It?

First, let’s add a drop shadow to a link or button.

Here’s our basic HTML code. To make this work, the only unconventional (and arguably non-semantic) code we need to add is a wrapping span around our element. If you require the cleanest code, you could add this with Javascript.

<p class="center">
<span>
<a href="#" class="button">link</a>
</span>
</p>
<p class="center">
<span>
<input type="button" value="button" />
</span>
</p>

To add a drop shadow, the CSS will look like this:

span {
float: left;
background-color: #CCC;
}
p.buttons input,
p.buttons a {
position: relative;
display: block;
top: -5px;
left: -5px;
}
p.buttons a {
background: #FFF;
border: 1px solid;
padding: 5px;
}

The span tag is our shadow. We float it so it becomes a block level element, and we give it a gray background. Next we make the button or link a block level element. The real trick is adding "position: relative" to the button or link which allows us to offset them. The last code here is just to add some style to the link so it stands out from the drop shadow.

Test this code and you should see something like this (slight variations depending on your browser):

Home

Okay, now we want them centered. Because our items are floated, "text-align: center" and "margin: 0 auto" won’t work. Or will it?

The solution is a combination of things, and of course a hack for IE. What can you do? Here we go:

p.center {
clear: both;
margin: 10px auto;
display: table;
}
*+html p.center {width: 1px;}
* html p.center {width: 1px;}

The first line adds "display: table" to the containing paragraph. This will make Firefox, Safari and all the other browsers we love center the contents, when combined with "margin: 0 auto;" –our usual way of centering block elements in CSS.

The second part of the code is a hack for IE7 and IE6. As IE does not recognize "display: table", the trick is to give the paragraph a width of 1px. IE will center the paragraph, and subsequently the contents. It works! Note: these hacks have to be on separate lines.

Here’s all the code together in a page.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Centered drop shadow example</title>
<style type="text/css">
/* Code for centering the containg paragraphs */
p.center {
clear: both;
display: table;
margin: 10px auto;
}
/* IE hacks for centering the containing paragraphs - must be on separate lines / *
+html p.center {width: 1px;}
* html p.center {width: 1px;}
/* Turn the spans in shadows */
p.center span {
background-color: #CCC;
float: left;
}
/* offset the element to have the shadow */
p.center input,
p.center a {
display: block;
left: -5px;
position: relative;
top: -5px;
}
/* some simple styling to make the link stand out */
p.center a {
background: #FFF;
border: 1px solid;
padding: 5px;
}
</style>
</head>
<body>
<p class="center">
<span>
<a href="#" class="button">Home</a>
</span>
</p>
<p class="center">
<span>
<input type="submit" value="Home" />
</span>
</p>
</body>
</html>

Tested on the Mac and PC in Firefox, IE 6 and 7, Opera, Safari, Chrome and Camino.

Licensing

This arc90 experiment is licensed under a BSD license.

Discuss

Feel free to offer feedback over on the blog.