Toluu

Ajaxian

Cleaning up the web with Ajax

Beautiful Code DocumentationToday

Atul Varma (who I have the absolute pleasure to work with now) has created code documentation that actually looks beautiful. Typography matters.

You can check it out via his Ubiquity documentation example that shows you side by side documentation with the actual source code itself. This context is terrific. He does this all dynamically, and uses border padding to align the documentation with the code itself.

Here is what he has to say about how it is done:

The raw source code for the file being documented above just has chunks of comments that are marked-up in WikiCreole; when the parser runs into such a chunk, it renders it alongside the code it annotates using Ivan Fomichev and Chris Purcell’s JavaScript Creole 1.0 Parser.

The idea of using the documentation to annotate the code—or the code to annotate the documentation, depending on how you look at it—was inspired in part by some of the typography presented in Ellen Lupton’s excellent

State of the Web 2008Today

John Allsopp has put together the data from his extensive State of the Web 2008 survey. In it you will find details on who was surveyed to set context, the browser / os usage claimed, and answers on the use of technology such as:

• Markup usage
• CSS and other presentation technology
• JavaScript, Ajax, and the DOM
• Flash, Silverlight and embedded content
• Backend systems

John and Scroll Magazine have a nice conclusion:

In this first of its kind study, over 1200 web professionals from across the globe, in a broad range of indu

defaultValueActsAsHintToday

Thomas Fuchs has created defaultValueActsAsHint, an implementation of the Input Prompt pattern:

An often occuring UI pattern is “use the value of a textfield as hint what to input”. These fields all auto-clear when the user first focuses it (by clicking or tabbing it), and if nothing it entered, the hint will be shown once again once the user leaves it.

Because we decided to go this path for the “Quick entry” box we’re using for freckle time tracking, I dug out an older script I wrote and refreshed it a bit, and I present you defaultValueActsAsHint.

PLAIN TEXT

JAVASCRIPT:

1.  
2. $('element_id').defaultValueActsAsHint();
3.  

This is all there’s to it, and the file to include is merely 18 lines of code. It works with textareas, too. Just specify whatever should be displayed as hint in the value attribute of the input (or as text within the textarea tag) and off you go. Define a ‘hint’ style if you like to show the text in gray, italics or whatever you fancy.

Chec

Palm gets it’s Mojo back?Today

“The need is obvious for a cross-device mobile javascript library supporting iphone, palm, and android. blackberry browser still blows” -- Joe Hewitt

Joe of course created the popular iUI framework that mimics the native iPhone look and feel and gives you nice simple iPhone features via JavaScript.

Palm is on his list, because it is back in the game with their CES announcement of the Palm Pre, an offering that has an SDK that makes me happy. No Objective-C, no Java, just a Web stack!

Announcing Palm WebOS, Palm Mojo Application Framework, and Palm Mojo SDK

Palm WebOS, Palm's next generation operating system, integrates the power of a window-based operating system with the simplicity of a browser. The user experience is designed around multitasking, and makes it easy to run background applications, switch between applications in a single step, and handle interruptions and events without losing context. Using WebOS, you’ll be able to develop fast (and beautiful) applications.

The Palm Mojo Application Framework

Palm WebOS applications are easy to write using Mojo, a new application framework based on the HTML5, CSS, and JavaScript standards that

jQuery pageSlide: throwing content aroundYesterday

Scott Robbin (Songza co-founder) has created a very cool jQuery plugin for pageSlide, an interaction based off of Aza's prototypes for Firefox Mobile and Ubiquity mouse gestures. The plugin wraps body content into a container and shifts it off of the page whenever a click event is fired, revealing a secondary interaction pane.

This plugin allows any developer to recreate a similar interaction on their own website using a few simple lines of Javascript. By attaching the method to an anchor tag, pageSlide wraps the original body content into a wrapper and creates an additional block for the secondary content load. The slide is animated whenever the click event is invoked.

PLAIN TEXT

HTML:

1.  
2. <script type="text/javascript">
3.     $(document).ready(function() {
4.         $('a.pageslide').pageSlide({
5.             width: "300px"
6.         });
7.     });
8. </script>