Archive for the 'CSS' Category

Playing with the toys… Bootstrap, from Twitter

Saturday, December 10th, 2011

BootstrapRecently I discovered Bootstrap from Twitter. As mentioned on the website "Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites. It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more." And it is very nice.

But you never truly know how good a tool will be until you try it. In the last few days I have used Bootstrap for two small projects – one internal project at SiteHost where I work, and then again today when I built a webpage for my mothers shop in a couple of hours:

I have to say I am impressed and will be using Bootstrap again for sure. It does for CSS layouts what jQuery does for JavaScript – streamlined, elegant, and so easy to use. Highly recommended.

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();

Or to tell your application to launch on system startup:


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.

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.

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?

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.

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.

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
<script type="text/javascript">
document.write(['<style type="text/css">',document.getElementById('StyleProxy').innerHTML,'</style>'].join('r'));
<script type="text/javascript" id="ScriptProxy">
// JavaScript loaded inline here
<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"

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

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?

Afraid of CSS and Standards?

Thursday, September 28th, 2006

If you are, then take comfort in the fact that you are not alone. Here is an excellent article covering some of the frustrations of moving from table-based layouts to pure CSS. I could relate to a lot of the article's content – maybe you can too…

Issue One of Visual jQuery Magazine Released

Saturday, September 23rd, 2006

Visual jQuery Mag - Issue OneI have posted a number of times about jQuery – a JavaScript (JS) framework that will revolutionise the way you write JS. The community uptake of this framework has been quite impressive. Now there is even a monthly magazine available, courtesy of Yehuda Katz. The first release of the magazine includes the following topics:

  • an editor's note about the magazine
  • a profile of jQuery's founder, John Resig
  • an introduction to jQuery's basic principles
  • an argument for jQuery's philosophy
  • an interview with the creator of the jqMinMax plugin, Dave Cardwell
  • a roundup of three plugins that are useful for creating rich web applications

Why is this framework worthy of so much attention? You need to be a JavaScript coder to really appreciate it's beauty. Basically jQuery allows web developers to write JS the way we think, the way we see the world within the context of the DOM. Not only is it logical and simple to work with, it will drastically reduce the amount of JS you write. That means smaller files, your code is easier to read and understand, and you spend less time coding. It enables you to easily work with AJAX, animations, forms, CSS, and the list goes on – all for including a file only 16k in size.

On top of that, the jQuery community is rapidly adding new plugins and widgets that work with jQuery. The mailing list is also extremely responsive and helpful.

Once upon a time the developer world went crazy about Prototype and Scriptaculous. For me jQuery and Interface leave such alternatives in the dust. Why? Apart from the fact that jQuery+Interface = 66k (16+50) and Prototype+Scriptaculous = 188k (50+128)? jQuery and Interface are just more intuitive to work with and offer the same core features.

Here are some links to get you excited:

Anyway – it is time for me to stop raving. If I keep posting only about jQuery this blog is going to get fairly monotonous! I will now leave you to form your own impressions…