Web Info & Tutorials

April 17th, 2008

ADOBE AIR FOR JAVASCRIPT DEVELOPERS POCKETGUIDE

AIR for JavaScript Developers Book Cover

Adobe AIR for JavaScript developers provides an introduction to Adobe AIR for developers using interested in building AIR applications using JavaScript, HTML and CSS. The book has been updated for the latest and greatest, and is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 License. Yup, the book is free.

You can download it first on Ajaxian here, or you can order on Amazon for a dead-tree version.

The book has several pieces:

  • Introduction to Adobe AIR
  • Getting started with Adobe AIR
  • Working with JavaScript and HTML Within Adobe AIR
  • Adobe AIR Mini-Cookbook

It is written by members of the AIR team itself, so you know that the information will be correct. Very smart of them to release it to the public like this. Congrats on finishing it guys!

April 17th, 2008

ARE YOU SURE YOUR UNLOAD HANDLER IS FIRING IN IE?

Johan Sörlin found that sometimes his unload event never fired in IE:

We recently found a serious bug in IE where the unload event wouldn’t fire on a specific page we had on a site. After some bug tracking we found out that the unload event never fired since all the contents of the page hadn’t finished loading before we navigated to another page.

This is a major problem since the unload event is commonly used to clear circular references etc in IE to prevent memory leaks. So this bug makes all Ajax libraries/frameworks out there that depend on the unload event on IE to fail if the page is unloaded before the contents of the page finished loading.

Here is an example of the bug, run the page in IE and follow the instructions on the page.

He then produced a work around:

JAVASCRIPT:
  1.  
  2. function fixUnload() {
  3.         // Is there things still loading, then fake the unload event
  4.         if (document.readyState == 'interactive') {
  5.                 function stop() {
  6.                         // Prevent memory leak
  7.                         document.detachEvent('onstop', stop);
  8.  
  9.                         // Call unload handler
  10.                         unload();
  11.                 };
  12.  
  13.                 // Fire unload when the currently loading page is stopped
  14.                 document.attachEvent('onstop', stop);
  15.  
  16.                 // Remove onstop listener after a while to prevent the unload function
  17.                 // to execute if the user presses cancel in an onbeforeunload
  18.                 // confirm dialog and then presses the stop button in the browser
  19.                 window.setTimeout(function() {
  20.                         document.detachEvent('onstop', stop);
  21.                 }, 0);
  22.         }
  23. };
  24.  
  25. function unload() {
  26.         alert('Unload event occured.');
  27. };
  28.  
  29. window.attachEvent('onunload', unload);
  30. window.attachEvent('onbeforeunload', fixUnload);
  31.  

In other IE news, remember not to have a CSS class that uses the (valid) _ character as IE 6 won't be happy.

April 17th, 2008

SPOILER BLOCKER WHEN JS ISN’T AVAILABLE

Ever gone to a site to read up on your favorite show or get the lowdown on a new movie only to have the whole plot spoiled because you weren't forewarned that the "whole freakin' script" was injected into the article?!?! Yeah, I've been there and it ain't fun!

Chris Coyier of CSS-Tricks came up with a solution called Fade-in Spoiler Revealer which used jQuery to allow the user to click on a div that blocked view of the spoiler and see the contents. This was a very cool technique and caught the attention of Brian Dillard. Brian wondered how this script could be adapted to work with RSS readers and mobile browsers:

My only reservation about Coyier's technique was its reliance on JavaScript, and only JavaScript, to hide spoiler-laden content. With RSS and mobile browsing on the rise, lots of people read content in user-agents without JavaScript support. Shouldn't we try to protect them, too? I commented to this effect on the original article, then realized that I should just write the code myself as proof of concept.

Brian Dillard came up with his own version of a spoiler blocker which, through a little progressive enhancement, accommodates for situations where JS is not enabled (eg: a RSS reader). His code consists of two parts; the jQuery code which hides the spoiler and binds the click event to a fade effect and the HTML which is progressive enhanced.

JAVASCRIPT:
  1.  
  2. $(document).ready(function() {
  3.        
  4.         $(".spoiler")
  5.                 //hide the spoiler
  6.                 .children("span.hidden").hide()
  7.                 //hide the whitespace inside it
  8.                 .children("br").hide()
  9.                 //step back up a level
  10.                 .end()
  11.                 //find the sibling
  12.                 .prev("span.message")
  13.                 //add the click handler to show the spoiler
  14.                 .click(function() {
  15.                         //use a callback So FX execute non-simultaneously;
  16.                         $(this).fadeOut(600, function() {
  17.                                 $(this).next().fadeIn(600);
  18.                         })
  19.                 })
  20.         ;
  21.        
  22. });
  23.  
HTML:
  1.  
  2. <p class="spoiler">
  3.         In the movie "Citizen Kane," Charles Foster Kane's last
  4.         word, "Rosebud," turns out to be ...
  5.         <span class="message">
  6.                 (<a href="#answer">Click here if you'd like to be spoiled.</a>)
  7.         </span>
  8.         <span class="hidden">
  9.                 <br /><br /><br /><br /><br /><br /><br />
  10.                 <br /><br /><br /><br /><br /><br /><br />
  11.                 <br /><br /><br /><br /><br /><br /><br />
  12.                 <br /><br /><br /><br /><br /><br /><br />
  13.                 <br /><br /><br /><br /><br /><br /><br />
  14.                 <br /><br /><br /><br /><br /><br /><br />
  15.                 <br /><br /><br /><br /><br /><br /><br />
  16.                 <br /><br /><br /><br /><br /><br /><br />
  17.                 <br /><br /><br /><br /><br /><br /><br />
  18.                 <br /><br /><br /><br /><br /><br /><br />
  19.                 <br /><br /><br /><br /><br /><br /><br />
  20.                 <br /><br /><br /><br /><br /><br /><br />
  21.                 <br /><br /><br /><br /><br /><br /><br />
  22.                 <br /><br /><br /><br /><br /><br /><br />
  23.                 <br /><br /><br /><br /><br /><br /><br />
  24.                 <br /><br /><br /><br /><br /><br /><br />
  25.                 <a name="answer"></a>a sled.
  26.         </span>
  27. </p>
  28.  

You can see the demo here. You'll need to turn off JavaScript in order to see it.

This is one way of managing the user experience in user-agents without JavaScript support but I'm sure that the Ajaxian crowd has developed other ways of tackling this same problem. We'd like to hear about it so comment away.

April 17th, 2008

FINGERPRINT: A PRINT FOR YOUR TYPING

Do you type the same way consistently? Say, if you put in your username and password?

Marcus Westin has created a little jQuery plugin that measures a finger print based on your typing style, Fingerprint.

Easy to use:

JAVASCRIPT:
  1.  
  2. $('#form').fingerprint();
  3.  

This automatically injects hidden fields with names 'timestamp-down' and 'timestamp-up' for the respective timestamps. On submit, these values get sent to the server, separated by commas.

If you want the value arrays instead, you can just pass in a function to receive the timestamps - this function automatically gets called when the form is submitted.

JAVASCRIPT:
  1.  
  2. $('#form').fingerprint(function(timeStamps){
  3. // .. process the timespamps here
  4. });
  5.  

The is a proof of concept library. I would love to see the analysis on how close the fingerprints are for people, especially on various keyboards (e.g. if they are on their laptop versus desktop).

Cool idea Marcus!

Fingerprint

April 17th, 2008

NSFW BLOCKER USING MOOTOOLS

I like reading David Walsh's blog. Not only does he write good technical articles but he always injects some humor into it to liven up the topic. This time around is no different as David's guilty pleasure of scoping out the latest celebrity gossip led him to an idea which would make it easier for these sites to post NSFW pictures without their readers having to end up in HR.

Since most of the time it’s just a portion of a given picture that could be considered in appropriate, I asked myself if there was a way to get the gist of an article’s graphic without having to hide the entire image. For that reason, I’ve created a NSFW blocker using CSS and MooTools.

The premise of the extension is to give the reader an idea of what is going on without actually landing him/her in trouble due to inappropriate content. The script is very easy to implement as it loops through all divs that have a class of "nsfw-wrapper" and adjusts the mouseenter & mouseleave events to fade in or out using MooTools fade() method.

It's a very simple extension but definitely useful. You can see the demo here.

April 17th, 2008

MAD MIMI: WYSIWYG EMAIL MARKETING

When I center “email marketing” I can’t hold but conceive spam, but it is a legit agency too, and the stylish agency in the arrange is Mad Mimi.

Mad Mimi launched this hebdomad and consists of “state-of-the-art UI organisation makes for layouts that are easier to
create -– and easier to feature – than emails generated by Constant Contact, Emma and others, who rely on unadaptable templates and cluttered,
dated layouts.”

Mad Mimi’s “modules-based” programme allows users to add equal and book fields, inspire them around and add captions, course and dividers. Embedded constraints gently pass the layout, ownership the “designer” from effort into trouble, but providing more plasticity than templates.

The result: a fluid, pliant individual interface, and clean, dapper “Mimi-generated” promotions that equal a firm move to telecommunicate marketing – at a subscription toll that trumps the competition.

When I saw that Tobie Langel was on the team, I had to analyse it out. When you provide it a aerobatics you module be healthy to add images, and then ingest them to physique discover your email. There are whatever rattling pleasant impalpable features much as the change support.

Mad Mimi