Experimenting with TypeKit I found the flicker really annoying.

It dose feature loading events that add .wf-loading, .wf-active and .wf-inactive classes to the HTML tag but there still is at least a one second delay before they get appended so you still see the page with the flicker if you want to hide the content based on these classes.

The solution

First of I hidden the Typekit content with css directly from style.css and show a loading icon on the body.

body{ background:url(images/ajax-loader.gif) 50% 380px no-repeat; }
#wrapper { visibility:hidden }

Next Step was to include the TypeKit scripts in the header:

<script type="text/javascript" src="http://use.typekit.com/this_is_your_TypeKit_url.js"></script>
<script type="text/javascript">
try{Typekit.load({
active: function(){
	jQuery('body').css({backgroundImage: 'none'});
	jQuery("#wrapper").css({visibility: 'visible'});
},
 
inactive: function() {
	jQuery('body').css({backgroundImage: 'none'});
	jQuery("#wrapper").css({visibility: 'visible'});
}
 
 
});
}catch(e){}</script>

So now we’re showing the content after TypeKit finished loading or failed to load with javascript, thus the TypeKit flickr is no more.

The problem is when the user doesn’t have javascript activated nothing is shown. While most of the times users without js represent less then 1% is still bad practice to ignore them completely. The solution is a bit of javascript and php to resolve this issue.

function js_detection(){
if (isset($_POST['jstest']) || $_SESSION['nojs'] == FALSE) {
	$nojs = FALSE;
  } else {
  // create a hidden form and submit it with javascript
  echo '<form name="jsform" id="jsform" method="post" style="display:none">';
  echo '<input name="jstest" type="text" value="true" />';
  echo '<script language="javascript">';
  echo 'document.jsform.submit();';
  echo '</script>';
  echo '</form>';
  // the variable below would be set only if the form wasn't submitted, hence JS is disabled
  $nojs = TRUE;
  $_SESSION['nojs'] = TRUE;
  }
 
  if ($nojs){
	echo '<style type="text/css">body{background:none !important;}  #wrapper{visibility:visible !important;} </style>';
  } else {
	$_SESSION['nojs'] = FALSE;
  }
} // end js_detect()
 
// and in your php app stat the php session before any content is generated or you'll get the Headers Sent issue
session_start();

We’re using a form that’s submitted with javascript. If jstest POST variable is set we initialize our $_SESSION['nojs'] session variable that tells us that the user doesn’t or dose have javascript activated. This way we don’t have to submit the form only the first time the user visits the site.

Conclusions

It’s up to the developer to chose between removing the TykeKit flicker and reloading the page from time to time to check if the user has javascript enabled. Also we could be using a cookie instead of the php session and set an expiration date of one day (the session expires after 24 minutes by default) so the user will only get that form submission once a day.

Also there’s the possibility the user disables javascript within those 24 minutes, in which case he won’t see the site. I think this is an unrealistic case and chances are this will never happen in real life. Also since some people start treating javascript as a requirement I wouldn’t worry to much about this.

Related posts:

1. Adobe Air resources for HTML and JavaScript developers
2. Remove Google Buzz from Gmail

I’ve just finished my first adobe air project. It was a simple Daily Incomes-Expenses desktop application with monthly reports (simple enough to build in a few hours using PHP and MySql). It took me however something like 12 hours of work mostly because of lack of documentation, certain JavaScript functions are banned in Adobe Air because of security concerns ( functions like eval() that are used in JavaScript Frameworks ) and bugs in Aptana IDE and it’s Adobe Air plugin.

To sum it all up I’ve put together a list of resources that might help you shave a few hours on you ADOBE AIR project if you are developing it using HTML and JavaScript.

Tutorials & How To’s

Site Point – Learn Adobe AIR, Part I: Build A Note Storage App

This is a step-by-step well written tutorial that will guide you from installing your Aptana IDE and Plugin for Adobe Air, to developing your Sqlite local database application to deploying and packing it as a .air file.

Site Point – Learn Adobe AIR, Part II: Build a Customer Management App

This one builds on top of what you’ve learned in part 1 and guides you throught building a more complex AIR application. You will learn how to explore the user interface possibilities that AIR provides, implement drag-and-drop functionality, work with native windows, communicate between windows, construct menus, and more.

Adobe AIR Developer Center for HTML and Ajax

Adobe Air’s official page for resources related to developing application using HTML and Javascript. There are many good tutorials, articles and tips here to keep you busy for a wile. It also has a Get started with Adobe AIR section that I wished I found before I started work on my application

Adobe AIR for JavaScript Developers Pocketguide – Free Book

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 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.

Adobe AIR resources For HTML and Ajax

Here you get to see some of the most important or popular aspects of specific Adobe AIR features, step-by-step instructions for creating Adobe AIR applications using HTML and Ajax and Language Reference for HTML Developers. This is and official Adobe page so the information here should be kept up to date.

Include existing SQLite database in an AIR application

I had a small problem with the database for my adobe air application and this page helped me find the cause. Again it’s an official Adobe page so it can be used as reference for developing solid applications.

Developing Adobe AIR 1.1 Applications with HTML and Ajax

You could say this is the help file for Adobe Air, but it’s more like a complete online reference for the SDK and framework. You can probably find all the information you need here if you want to invest the time and effort needed into it .

Application Lists and Reviews – If you need to know what others have built with Adobe Air

RefreshingApps.com – Showcase for Adobe AIR Applications and Resources

“The premier showcase, resource website for Adobe AIR applications. Find the best Adobe AIR apps, get the best knowledge here”… or so they say! The bottom line is that this is a directory for Adobe Air application, it has reviews, previews, news from Adobe Air world, interviews with developers and A LOT of resources for developers from tutorials to icons for your applications.

27 Adobe AIR Applications – Handy For Web Designers

That’s right… 27… I doubt anyone would use all 27 of them (I personally tryed Google Analytics Reporting Suite ) but you might find something useful.

Adobe AIR Showcase applications

Best of the best… This is the official Adobe Air Showcase. You can find applications from big names like AOL, NASDAQ, eBay, Yahoo!, The New York Times and the list goes on and on… These are Air Applications that probably are used by thousands of people around the world!

Adobe AIR Marketplace

Adobe has created an official Adobe AIR Marketplace (beta) which aims to enlist all of the Adobe AIR applications and widgets. This is a great place to search for inspiration or something that you would actually use!

Editors for Adobe Air to use with HTML and JavaScript

Aptana Studio + Adobe AIR

“We are delighted with Aptana Studio’s support for Adobe AIR. Ajax developers using Aptana Studio 1.1 and Adobe AIR can now build advanced rich Internet applications that deploy on the desktop and run consistently across operating systems. In addition, Ajax developers will save time building applications on Adobe AIR with Aptana’s many productivity features including the AIR application export wizard and advanced Ajax code hinting. Aptana is making it easy to build Ajax-based applications for Adobe AIR.” -Rob Christensen, Senior Product Manager of Adobe AIR

Tools for AIR and Ajax – Adobe Dreamweaver CS3

The Adobe AIR extension for Dreamweaver will allow you to package and preview AIR application files directly within Adobe Dreamweaver CS3, so you can leverage your existing web development skills to build rich Internet applications on the desktop.

Javascript Libarys

You can use pretty much any javascript library, be it jQuery, Prototype, MooTools as long as you take into consideration security-related JavaScript errors that could apear if you aren’t careful. I personally used jQuery because there are a lot of plugins for it. Also because of thouse security-related JavaScript errors parts of jQuery UI don’t work (the calendar part for example makes use of eval() function and that is not allowed in AIR).

Another alternative is the Spry framework for Ajax that comes with Dreamweaver CS3. The Spry prerelease was updated to support the shipping version of Adobe AIR.

This is what I thought relevant related to Adobe Air for Javascript developers. The web is a big place so if you are really serious about developing Air Applications don’t limit yourself to this list.

Don’t forget to have fun while developing your Air App!

Related posts:

1. Detect if javascript is enabled in php and remove the TypeKit flicker