Archive for the 'Browsers' Category

Ext.air – Blurring the line between Adobe AIR and Ext JS

Wednesday, December 3rd, 2008

By now you should be very aware of Adobe AIR which allows Web Developers to use their existing skill-set to develop desktop applications for Windows, OS X and Linux. This means that anybody who knows HTML, JavaScript and CSS can easily start developing desktop applications. And if you add Ext JS to the equation then you get an impressive JavaScript library and whole set of interface widgets that work tightly with Adobe AIR out of the box. Ext JS and Adobe AIR are made for other, and it is good news to hear that Adobe and Ext are officially working together to take things to the next level.

As a result of collaberation between Ext JS and Adobe, several impressive enhancements to the Ext.air package were just released. These enhancements allow even better control of AIR and the desktop via easy to use JavaScript calls.

For example to play a music file:

var mp = new Ext.air.MusicPlayer();
mp.adjustVolume(0.5);
mp.play(url);

Or to tell your application to launch on system startup:

Ext.air.App.launchOnStartup(true);

Additional enhancements allow you to easily control desktop windowing, video, system notifications and alerts and even the clipboard.

You can learn more about Ext JS here.
You can learn more about Adobe AIR here.

Controlling the IE7 “Shrink to Fit” print setting using JavaScript

Friday, November 30th, 2007

You may have noticed that printing in Internet Explorer 7 has a new feature – "Shrink to Fit". In some situations, such as when pages are in an iFrame, "Shrink to Fit" is always applied by default. For general web pages this feature may be appreciated, but in a web application where developers want to control the layout of the page, and perhaps generate reports, we do not appreciate IE7′s changing the print layout at all.

If you have not been challenged by this behaviour yet, don't worry – you will! And when you do, here is the solution.

Instead of the typical "print()" command in JavaScript, use:


document.execCommand('print', false, null);

Or if you are wanting to print a document inside an iFrame you can use something like:


window.frames(0).focus();
window.frames(0).document.execCommand('print', false, null);

Note: This solution is for Internet Explorer 7 only – I leave it up to you to do the browser detection.

Google Gears Enables Disconnected Web-Apps

Thursday, May 31st, 2007

Google Gears is an open source browser extension, less than 1Mb in size, that lets developers create web applications that can run offline. There are two main ways the extension can be used – by embedding the API or runtime software in an application you distribute to end users, or by writing a web application which makes use of installations of Gears on end-users' computers.

What problem does it solve?

Web developers write software for … the web. For applications that run via a browser that is connected to the Internet. Google Gears will take web applications to the desktop – enabling Web applications to work offline. A user will not be required to be connected to the Internet to use the application.

How does it work?

First of all web applications will need to detect whether or not Google Gears is installed on a user's machine. If Gears is installed, then the application will be able to access the Google Gears APIs from JavaScript code. If Gears isn't installed, the user can be directed to a customized installation page.

The APIs can then be used to access Google Gears three core features:

  • A local server, to cache and serve application resources (HTML, JavaScript, images, etc.) without needing to contact a server.
  • A SQLite database, to store and access data from within the browser.The Database module is used to persistently store an application user's data on the user's computer. Data is stored using the same-origin security policy, meaning that a web application cannot access data outside of its domain. Standard SQL can be used to access the data, and full-text indexing is supported using SQLite's fts2 extension.
  • A worker thread pool, to make web applications more responsive by performing expensive operations in the background. In web browsers a single time-intensive operation, such as I/O or heavy computation, can make the UI unresponsive. The WorkerPool module runs operations in the background, without blocking the UI.

What browsers are supported?

The final release will run on the following browsers:

  • Apple Mac OS X (10.2 or higher)
    • Firefox 1.5 or higher
    • Safari
  • Linux
    • Firefox 1.5 or higher
  • Microsoft Windows (XP or higher)
    • Firefox 1.5 or higher
    • Internet Explorer 6 or higher

What next?

To find out more about this project you can visit the Google Gears website. From there you can download Gears and then install some of the sample applications available.

Some developers are already playing with Google Gears and sharing their experience and their plans. For example you can listen to a podcast about Dojo Offline being ported to Google Gears, or take a look at RSS Bling moving to Google Gears.

This is definitely a project to watch. With Google obviously coordinating with the efforts of popular projects such as Dojo, as well as supporting all the major browsers, there are some interesting possibilities opening up for web applications.

Linus Upson, the engineering director at Google, stated that the goal of Google Gears is to "create a single, standardized way to add offline capabilities to Web applications." Google is certainly on the right track … I'm off to have a play!

Injecting JavaScript and CSS into Iframes

Sunday, April 15th, 2007

Introducing a new technique to allow efficient reuse of JavaScript and CSS – effectively allowing you to download the code once and then inject it into Iframes. This solution is targeted at Web Applications which commonly use Iframes for complex layouts and to control memory usage in larger apps without moving to the complexity of a Single Page Interface (SPI). Along the way we summarise and explain other methods available to developers for minimising their code and speeding up the loading time of their application.

With the next generation of Web Applications upon us the challenges faced by the average web developer have broadened. Understanding and confronting issues like memory leaks, bandwidth, load times and JavaScript processing time is becoming more of an everyday focus for web developers than ever before.

Fortunately we now have the tools available to help. On the developers machine the Web Developer Toolbar and Firebug for example are essential. And within the applications themselves we find increased usage of JavaScript libraries such as Dojo, jQuery, Prototype, YUI and widget frameworks like Ext, which provide a layer of abstraction and freedom for developers from some of these issues.

The increased usage of JavaScript however brings other challenges. Particularly in the world of Web Applications where the use of Widgets (tabs, grids, menus etc) is more likely, it is not uncommon for the volume of JavaScript and CSS to quickly accumulate from tens to a few hundred kb of code. This is a far cry from ideal, but is also to a certain extent unavoidable if that is the type of application you are supporting.

What can a developer do to minimise this issue? There are several very effective methods that can be explored:

Compacting Your Code
This is acheived by stripping out comments and unneccesary white-space which can drastically reduce the size of your files – sometimes cutting them in half. Recommended tools: Dean Edwards Packer or Douglas Crockford's JSMin. You could apply the same theory to your CSS as well.

File Compression
Using GZIP or Deflate can drastically reduce the downloaded file size (but should be used wisely). You can read more on this here.

Combining Multiple Files
In general browsers download only two or four files in parallel per hostname, depending on the HTTP version of the response and the user’s browser. On top of that it seems that JavaScript files are loaded synchronously and sequentially as they appear in your code. This means that only one JavaScript file can be downloaded at a time – and each file must be completely downloaded and then interpreted before the next download can begin. Reducing the number of HTTP requests by combining your JavaScript and CSS files into single files will definitely help improve your applications response times. Using CSS Sprites to combine your images into a single file and re-use with CSS is also an extension of this principle and is a very effective technique.

Caching
Server-side caching can help speed the up the delivery of page content. Also understanding browser caching and how to control this using file headers can make a difference – but again should be used wisely.

These techniques have been around for quite a while now. But this leads me to the real point of this post!

"Injection" Introduced

When it comes to the world of Web Applications (as opposed to a "website") where the use of Iframes is more likely, there is another technique that can be explored – "Code Injection".

I became aware of this technique while trying to interpret some very lengthy posts from Choleriker on the Ext forums. I thank Choleriker for taking the time to explain the concepts. I thought I would share my interpretation of this technique, as well as provide some examples to see it in action as requested by other developers in the forums.

First of all – what is this "code injection" that I am referring to?

Explained
In breif, the technique basically involves loading your JavaScript and CSS only once and then re-using it inside any iframes without downloading it again. This is acheived by loading your code "inline" inside the top level page of the application. The top page then makes the JavaScript and CSS available as two variables that can be called from the iframes directly. So the code is passed or "injected" from the top level page into any iframes using JavaScript.

Benefits?
There are several benefits to this technique – the most obvious being that you only download your JavaScript and CSS once, no additional downloads required. If you normally compress your JavaScript files using GZIP you likely know that there is a performance hit in the client browser to decompress the code before it can be used. This is no longer an issue for the reused code. And there is no longer any concerns with browser caching issues. Another big plus is that the CSS and JavaScript is being loaded as part of your actual page – i.e. there are no other additional files to download, which will improve the response times as described above.

Downsides?
I guess that the technique requires iframes. In time I guess/hope the principles of the technique may be able to be used in other perhaps more elegant ways that I haven't thought of yet. Another downside is the need to load your JavaScript and CSS inline. This was initially repugnant to me, mainly due to my background in website development. But in an Application is it really a big deal? I have decided it does not outweight the benefits.

Another perceived downside is that you have to get all of your JavaScript and CSS into a format that is loaded inline – but of course you still want to work with your separate "clean" files as you are used to. This should be viewed as an opportunity! It is likely time to implement a number of techniques as discussed above. My recommended technique is to have a server-side script that does the following:

  • Combines the required JavaScript and CSS files
  • Compacts the code by stripped white-space, comments etc
  • Caches the output code to a file on the server
  • Include the code inline using PHP or some other scripting language

I may provide some code for doing this in PHP in the future. In the meantime you might want to look at the "Combine" script from Niels Leenheer to get started.

Sample Application
So – how about an example? Click on the image below to see this technique in action. The example is built using Ext 1.0 Beta 2. It is a top level page which generates an Ext Layout with panels. The right-hand panel contains an iframe which receives the JavaScript and CSS from the top level page – it has not downloaded any files except the required images.

Launch Demo

The secret to this working is the following code in the Top Page:

<textarea id="StyleProxy" style="display:none;visibility:hidden;">
// CSS loaded inline here
</textarea>
<script type="text/javascript">
document.write(['<style type="text/css">',document.getElementById('StyleProxy').innerHTML,'</style>'].join('r'));
</script>
 
<script type="text/javascript" id="ScriptProxy">
// JavaScript loaded inline here
</script>
 
<script type="text/javascript">
// define the variables for storing the JavaScript and CSS
var _SCRIPTS = null;
var _STYLES = null;
 
// use jQuery to run the JS once HTML is loaded
$(document).ready( function()
{
    // place the JavaScript and CSS into the variables for reuse
    top.window._SCRIPTS = Ext.get("ScriptProxy").dom.innerHTML.toString();
    top.window._STYLES = Ext.get("StyleProxy").dom.innerHTML.toString();
 
    // create an iframe and add to the DOM
    // this should be always be done after the variables 
    // for the JS and CSS are filled 
    $main_container = Ext.get("iframe_main_container");
    var $iframe_nav = Ext.DomHelper.append (
        $main_container, {
         tag:         "iframe",
         id:          "iframeMain",
         name:        "iframeMain",
         width:       "100%",
         height:      "100%",
         frameborder: "no",
         scrolling:   "no",
         src:         "ext_demo_iframe1.htm"
        }
    );
})
</script>

A look at the files downloaded reveals the benefits – the iframe had nothing to download but the basic page itself. The JavaScript and CSS were downloaded only once as part of the top page. This top page was a reasonable size – but Ext is not small, and we can see the GZIP compression kicking in:

File Usage

Conclusion
So – should you use this technique? That depends on your application and your preference. The objective of this post was to simply introduce a concept that was new to me, and I am sure is new to many others. It is simply another technique to add to a developers toolbox.

PS: I am very interested what other developers think of this technique and what they perceive as the advantages and disadvantages. I also have a question – does this technique expose any security holes I should be aware of?

Firebug 1.0 – A “Must Have”

Tuesday, December 5th, 2006

It's been over 10 months since I first started advocating Firebug, especially for developers working with AJAX. Since that time the tool has been rewritten from scratch and been given a lot more focus by the developer Joe Hewitt. The result is Firebug 1.0.

The core features of 1.0 include CSS editing, network load timing, box model visualization, JavaScript profiling, command line autocomplete, HTML change highlighting, debugger watch lists, DOM editing, separate window support, and per-site blacklists.

Firebug is now one of the most used and appreciated tools in my developer toolbox. If you have not downloaded the 1.0 beta then here are some compelling reasons why you should…

Just the way you like it

Firebug is always just a keystroke away, but it never gets in your way. You can open Firebug in a separate window, or as a bar at the bottom of your browser. Firebug also gives you fine-grained control over which websites you want to enable it for.

Learn more

Inspect and edit HTML

Firebug makes it simple to find HTML elements buried deep in the page. Once you've found what you're looking for, Firebug gives you a wealth of information, and lets you edit the HTML live.

Learn more

Tweak CSS to perfection

Firebug's CSS tabs tell you everything you need to know about the styles in your web pages, and if you don't like what it's telling you, you can make changes and see them take effect instantly.

Learn more

Visualize CSS metrics

When your CSS boxes aren't lining up correctly it can be difficult to understand why. Let Firebug be your eyes and it will measure and illustrate all the offsets, margins, borders, padding, and sizes for you.

Learn more

Monitor network activity

Your pages are taking a long time to load, but why? Did you go crazy and write too much JavaScript? Did you forget to compress your images? Are your ad partner's servers taking a siesta? Firebug breaks it all down for you file-by-file.

Learn more

Debug and profile JavaScript

Firebug includes a powerful JavaScript debugger that lets you pause execution at any time and have look at the state of the world. If your code is a little sluggish, use the JavaScript profiler to measure performance and find bottlenecks fast.

Learn more

Quickly find errors

When things go wrong, Firebug lets you know immediately and gives you detailed and useful information about errors in JavaScript, CSS, and XML.

Learn more

Explore the DOM

The Document Object Model is a great big hierarchy of objects and functions just waiting to be tickled by JavaScript. Firebug helps you find DOM objects quickly and then edit them on the fly.

Learn more

Execute JavaScript on the fly

The command line is one of the oldest tools in the programming toolbox. Firebug gives you a good ol' fashioned command line for JavaScript complete with very modern amenities.

Learn more

Logging for JavaScript

Having a fancy JavaScript debugger is great, but sometimes the fastest way to find bugs is just to dump as much information to the console as you can. Firebug gives you a set of powerful logging functions that help you get answers fast.

Learn more

Click here to download the Firebug 1.0 beta…

It’s here: Internet Explorer 7 Beta 2

Wednesday, February 1st, 2006

Internet Explorer 7 Logo

Microsoft has released Beta 2 of the next version of Internet Explorer. This release is really aimed at developers/designers who want to test their current websites and web applications with the new software. Microsoft has posted checklists that can be used when testing the browser:

The browser is available for download right now. There is a list of FAQ's for the new release on the IEBlog website that you may want to read. Oh yes … and you need to have SP2 installed on Windows XP if you want to use IE7.

Go and have a play if you dare…

Sage: The Firefox Atom & RSS Feed Reader

Saturday, January 28th, 2006

Sage Screenshot

If you are like me you are still figuring out the best way to manage your favorite RSS feeds. Today I discovered Sage, a Firefox extension that lets you read your RSS and Atom feeds inside your browser – which makes sense to me. It is very simple to use and is not cluttered with features I don't need. Here are some of the features I like about it:

  • Press "Alt-S" to toggle Sage on/off in the Sidebar.
  • Press the magnifying glass icon to auto-discover feeds on the current page.
  • Manage your list of feeds exactly like managing your bookmarks – you can sort them any way you like, rename them and place a seperator between them.
  • This is probably my favorite feature – Sage very quickly renders a column formatted list of the posts to read. See the image posted above for an example. The look and feel of this layout can be customised via CSS – in fact there are additional styles already created for you to download.

Catching up on the latest via RSS is now a logical extension of my browsing experience thanks to Sage

FireBug: The Ultimate JavaScript, DHTML, AJAX Debugger

Tuesday, January 24th, 2006

I only just wrote an article on Console² and I found something better – FireBug. FireBug is a new tool for Firefox that aids with debugging Javascript, DHTML, and Ajax. It is like a combination of the Javascript Console, DOM Inspector, and a command line Javascript interpreter.

FireBug is fairly simple – it adds a console to the bottom of every web page in Firefox. It enables the following features:

  • Mouse-over DOM Elements on the page
  • Type in JS expressions into the command line for execution
  • Inspect AJAX (XMLHttpRequest) responses as text or XML
  • Only show errors for the current page – previous data is cleared
  • Display JavaScript, CSS or XML Errors
  • Show a red dot in the Status Bar to indicate errors on the current page
  • Set preferences on what errors you want to see

If you are a developer you can even get your page to write directly to Firebug – instead of using "alert()" or other methods for debugging. There is even a tutorial on how to do this.

Yup, you have to install this one

Handy Extensions for Firefox

Tuesday, January 24th, 2006

Every now and again you come across a little tool that becomes a part of your everyday life. Here are two recently discovered extensions for Firefox that definitely fall into that category:

ViewMyCurrency
ViewMyCurrency allows you to view a web page with any dollar amounts automatically converted to your chosen currency – and using live exchange rates. For example a page might show $99 in USD – ViewMyCurrency will make the page display $145 ($99) for NZD. What's more you can toggle it on and off while looking at the page.

foXpose
Apple Expose for Firefox. foXpose lets you view all the open tabs in the browser by clicking F8 or the little icon in the bottom left of your status bar. It only runs in Firefox 1.5.

If you use Firefox then take a look at these great extensions – and if you have others to share then please leave a comment with a link…

Firefox Tip: How to view the Cache easily

Tuesday, January 10th, 2006

Here is a quick tip that I found very handy today when I needed to view the files in my Firefox Cache. To do this simply type about:cache in the URL bar and hit enter – you can then search though your cache and retrieve images and files easily.