David Hurth's blog

TaffyDB: A Javascript database for your browser

Tagged:  

Have you ever built an Ajax application that has some data that needs to be saved and queried for the current session, but not for multiple sessions. Well, instead of creating a temporary database table Ian Smith has come up with a better solution called Taffy DB.

Taffy DB is like having a SQL database in your browser! The Taffy DB is accessed through JavaScript, so it is great for Ajax applications. The library is under 10KB and plays well with other libraries like jQuery and the Yahoo! User Interface.

Below is how the library is described on the official Taffy DB Website

Taffy DB is a free and opensource JavaScript library that acts as thin data layer inside Web 2.0 and Ajax applications.

What makes it cool:

  • Under 10K!
  • Simple, JavaScript Centric Syntax
  • Fast
  • Easy to include in any web application
  • Compatible with major Ajax libraries: YUI, JQuery, Dojo, Prototype, EXT, etc
  • CRUD Interface (Create, Read, Update, Delete)
  • Sorting
  • Looping
  • Advanced Queries

Think of it as a SQL database in your web browser.

Below are some examples of how you would use the library.

Example #1:

Let's say you have a collection of products and you want to find every product that costs less $10 and is not a book. Simple, just write some JavaScript:

products.find({price:{lessthan:10}, type:{not:"Book"}});



Example #2:

Let's say you want to update every product from XZYDesign and set the status to not available:

products.update({status:"NA"},{manufacturer:"XZYDesign"});



Example #3:

Let's say you want to sort your products based on type, price ascending, and quantity ascending:

products.orderBy(["type",{"price":"asce"},{"quantity":"asce"}]);

Below are the methods that are available from the library.

  • Find Method
  • Update Method
  • Insert Method
  • Remove Method
  • OrderBy Method
  • ForEach Method
  • Get and First Methods

You can find an overview of all of these methods here.

You can read more about the library here.
You can download the library here.

You can see the library in action at Joe's Goals and Quote Wizard. I can see a lot of uses for this in some future applications. If you use this library in any of your applications I would love to hear about it (you can leave a comment about it or write a blog using your free Ajaxonomy account).

Creating Resizeable Buttons in CSS

Tagged:  

Have you ever designed a page for a web application and wanted to make a nice button for the application? You probably opened your photo editor and started working on the button. But, what if your design resizes itself based on the users browser size? You will probably want the button to resize as well. Well, over at CSS Globe they have written a script to do just that using CSS.

Below is an excerpt from the article explaining the concept.

Concept

This concept is probably familiar to you from various navigation tab styling techniques. We have one long background image:

image

This one is 550px wide. I believe that is more than sufficient for buttons :)

So, we apply this image as a background image of a top element (in this case SPAN), place it to top left and add some left padding. Nested element (in this case EM) have the same background image but placed to top right and with right padding. As the content text grows so will the button.

image

Height of the button is fixed in my example but you can use similar technique and some more markup and place the same background image to all 4 corners.

To make sure that the text is vertically centered I use line-height property.

The HTML that is required for applying the CSS to would be the below.

<button><span><em>Button text</em></span></button>

The below is the CSS that is used.

button{
	border:none;
	background:none;
	padding:0;
	margin:0;
	width:auto;
	overflow:visible;					
	text-align:center;	
	white-space:nowrap;	
	height:40px;
	line-height:38px;			
	}
button span, button em{
	display:block;
	height:40px;
	line-height:38px;			
	margin:0;
	color:#954b05;
	}
button span{
	padding-left:20px;
	background:url(bg_button.gif) no-repeat 0 0;
	}	
button em{
	font-style:normal;
	padding-right:20px;
	background:url(bg_button.gif) no-repeat 100% 0;
	}

You can read the full post here.

You can see the demo here and you can download the source code and image here.

This code could be very useful and I will probably use it in my next application. If you have used a technique like this in an application that you've made I'd love to hear about it, you can leave it in the comments.

Wired Comfort - Web Desktop

Tagged:  

Today I stumbled across an interesting web desktop. The idea of a web desktop that you can get to from any location is a good one. I've seen other web desktops and this one looks like it compares very favorably.

The web desktop has many features of a normal desktop such as a full web office suite (word processing, spread sheets and presentations). There are many more applications (such as an FTP application and a Chess game) included with your free account and you get 1 GB of storage space for your documents, videos or whatever you want to store on your account. This Web Desktop implementation is based on eyeOS, so you can develop applications using the eyeOS ToolKit.

Check it out for yourself here. If nothing else it is fun to play with.

I'd love to hear your thoughts on Web Desktops and if you would use one.

Apple's iPhone SDK is Finally Here

Tagged:  

If you have an iPhone and are a developer, you have probably thought about writing a cool application for this phone. Well, today at the iPhone SDK press conference Apple announced that they have released the iPhone SDK.

You can watch the Keynote here.

Or if you prefer to read about it you can read a live blog about it here.

Below is an excerpt from the blog that I thought was particularly interesting.

10:19AM - "Ok, I'm here to tell you about how developers can build great apps on the iPhone. Before I get into the SDK, I want to give an update on web apps. This has been incredibly successful, there are over 1,000 web applications for the iPhone."

He's highlighting some web apps, including Facebook. Yep, great, let's get to the SDK dude.

"Already the iPhone is the most popular mobile device with Bank of America -- it accounts for 20% of ALL mobile banking with them. But today what I really want to tell you about is the native iPhone SDK."

10:21AM - "Starting today... we're opening the same native APIs and tools to build our iPhone apps."

"3rd party developers can build native iPhone apps using the same SDK that WE do. There are a lot of pieces that make up the SDK in a set of APIs -- that suits us well, Apple is a platform company. We have the most advanced platform in the world in the form of OS X. It's comprised of four layers..."

"The core OS, core services, media layer, and Cocoa -- to build the iPhone OS we took the bottom three layers to form the iPhone OS. Cocoa is interesting and it's the best app framework out there, but it's based on a mouse and keyboard. So we took everything we knew.. and built Cocoa Touch."

10:22AM - "This here is the architecture of the iPhone OS -- let me dig a little deeper. We'll start with the kernel. This is the same OS X kernel based on the same project and same source files of OS X; the networking layer we use is the same BSD networking layer we use on OS X. And power management... Apple has more than a decade of experience in advanced power management."

10:25AM - "We started with those advanced power management techniques and went beyond that -- the core OS power manages all of the chips, all the sensors, your application, automatically. Now, core services, I'll just highlight a few. We have a complete set of APIs for your app to talk directly to the contacts DB on the iPhone, and an entire database API with SQLite.

"Core Location - we've taken that and patched it into an API so you can create location-aware applications. The media layer... starting with Core Audio, this is the low-level audio layer; on top of that we've built OpenAL, an industry standard."

10:27AM - "Video playback: seamless video playback, uses our h.264 codec, built right in." So we can add new video codecs right? RIGHT? Sigh. "Core animation... OpenGL ES, the embedded version of OpenGL and a screamer for 3D graphics on the iPhone. In fact, this entire layer is heavily hardware accelerated."

10:29AM - "Cocoa Touch - our advanced touch event system; the accelerometer - what you might not know is that it's a full 3-axis sensor, and you can use that in your apps as well. ... this is the architecture for the iPhone OS, the most advanced mobile platform out there. We think we're years ahead of any other platform. We borrowed heavily from OS X -- we started on the shoulders of a giant."

"We have a comprehensive set of tools to help developers create and debug apps -- let's start with Xcode. We started there and enhanced it to support the iPhone; now we use Xcode to build the OS and apps for the iPhone. What is Xcode? It starts as a great source code editor -- it knows all about the iPhone SDK, will code-complete the APIs for the iPhone SDK."

10:30AM - "... it also integrates directly with source control management system, subversion, cvs... integrates with iPhone SDK documentation, and also has a nice debugger -- it's also a great remote debugger. Plug an iPhone in, run the app live on your iPhone, and be debugging it from your Mac. This is incredibly powerful."

10:32AM - "The next tool I'd like to talk about is Interface-Builder -- this is the tool you'll use to... wait for it... build your application interface. We have the complete library of iPhone interface assets, just drag them onto the canvas." Showing making connections from the view layers to control layers; it's also localizeable. "Next: Instruments..."

"We took those three and enhanced them for the iPhone, but there's a brand new tool: the iPhone Simulator. It runs on a Mac and simulates the entire API stack on your computer."

10:34AM - "So, we have a fantastic set of tools in addition to an amazing set of frameworks." Demo time. iPhone Simulator gets going -- looks identical to using an iPhone. Tiny bit creepy, actually.

Below is the blurb that Apple puts on their site about the SDK.

The iPhone SDK includes the Xcode IDE, Instruments, iPhone simulator, frameworks and samples, compilers, Shark analysis tool, and more.

You can download the free SDK here.
Please note the technical requirements are an Intel processor-based Mac running Mac OS X Leopard

You can get more information about the SDK here.

Unfortunately, I don't have access to a Mac, so I won't be able to make any applications for the iPhone (although, I haven't tested the del.icio.us Spy or Digg Burry Recorder on it yet, so maybe I've already made an iPhone application). However, if you have access to a Mac and want to make iPhone applications you can now go for it. If you do create the next killer iPhone application let us know about it by writing a blog post about it using your free Ajaxonomy account.

Nice Ajax effect for Message Box using Dojo or Mootools

Tagged:  

Both Mootools and Dojo are great libraries for JavaScript effects. I found two posts that are about a nice effect for saving data on a form.

The way that the effect works is:

  1. Submit a form
  2. Display a message box with the message "Saving..."
  3. When the Ajax request is complete display "Saved!" into the box and after some second it disappear with a fade-out effect.

The first post is about using Mootools to create the effect. Below is an excerpt from the post.

Step 1: HTML Code
HTML code is very simple. I added only the essential elements, the message box (with ID "box") and an input element with a button (with ID "save_button"), but you can customze it with a more complex structure:

<div id="box"></div>
<input name="myinput" type="text" /> <input id="save_button" name="save_button" type="button" value="save"/>

step 2: CSS Code
You can coose a style for your message box changing how you want these attributes:

#box {
margin-bottom:10px;
width: auto;
padding: 4px;
border: solid 1px #DEDEDE;
background: #FFFFCC;
display: none;
}

Remember to set the initial display attribute to "none". In this way the message box will appear only when an user submit the form:

Step 3: Javascript Code
Copy this code in the <head> tag of the page:

<script type="text/javascript">
window.addEvent('domready', function(){
var box = $('box');
var fx = box.effects({duration: 1000, transition: Fx.Transitions.Quart.easeOut});

$('save_button').addEvent('click', function() {
box.style.display="block";
box.setHTML('Save in progress...');

/* AJAX Request here... */

fx.start({
}).chain(function() {
box.setHTML('Saved!');
this.start.delay(1000, this, {'opacity' : 0});
}).chain(function() {
box.style.display="none";
this.start.delay(0100, this, {'opacity' : 1});
});

});
});
</script>

f you never used Mootools, but you are familiar with JavaScript, this line of code:

var box = $('box');

... let me say "it's equal" to:

var box = document.getElementById('box');

This line of code enable a delay of 1000 ms (1 second) before to apply fade-out effect:

this.start.delay(1000, this, {'opacity' : 0});

You can read the full post here. You can view the demo here and you can download the tutorial including Mootools here.

The second post is about using Dojo to create the same effect. Below is an excerpt from the post.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
<title>Test save</title>
<script type="text/javascript" src="/js/dojo/1.0.2/dojo/dojo.js" djConfig="parseOnLoad: false,usePlainJson: true"></script>
<script type="text/javascript">
dojo.addOnLoad(function(){
dojo.query("#save_button").onclick(function(){
dojo.fadeIn({
node:"box",
duration:500,
beforeBegin: function() {
dojo.query("#box").style("opacity", 0).style("display","block")[0].innerHTML = "Save in progress...";
},
onEnd: function(){
dojo.xhrGet({
url: "data.txt",
handleAs: "text",
load: function(data){
var node = dojo.byId('box');
node.innerHTML = "Saved !";
dojo.fadeOut({
node:"box",
duration:1000,
onEnd: function(){
dojo.query("#box").style("display", "none");
}
}).play();
},
error: function(data){
console.debug("An error occurred: ", data);
},
timeout: 2000
});
}
}).play();
});
});
</script>
<style type="text/css">
#box {
margin-bottom:10px;
width: auto;
padding: 4px;
border: solid 1px #DEDEDE;
background: #FFFFCC;
display: none;
}
</style>
</head>
<body>
<div id="box"></div>
<input name="myinput" type="text" />
<input id="save_button" name="save_button" type="button" value="save"/>
</body>
</html>

First thing, I connect the onclick event to #save_button button.

dojo.query("#save_button").onclick(function(){

I use the dojo.query method. with #, it return a dom object whom id is matching #save_button. There are lots of possibility, because it supports CSS3 selectors. (see here)

I did a fadeIn effect on div #box. In dojo, the div you fadeIn has to be visible. So I set its opacity to 0 and its display to block. Notice the chain ;)

When effect is ended, I start an ajax request using dojo.xhrGet.

dojo.xhrGet({
url: "col.htm",
handleAs: "text",
load: function(data){
var node = dojo.byId('box');
node.innerHTML = "Saved !";

You have to pass an object to this fonction. It's much more readable than a simple function call with parameters. And of course, you can omit parameters.

The load function is called when ajax request ends. At this time, I set box content to "Saved !" and apply a fadeout effect.

dojo.fadeOut({
node:"box",
duration:1000,
onEnd: function(){
dojo.query("#box").style("display", "none");
}
}).play();

dojo.fadeOut or dojo.fadeIn return an anim object. You play the anim with play() method (Wow !)

At the end, I set box display to none, so that box div returns to its initial state.

You can view the full post here.

The effect could be pretty useful. The nice thing about the tutorials is that you can kind of compare the code required to accomplish the effect in both libraries. I was looking to see if someone wrote the same effect in jQuery so that I could have that code to compare, but I haven't found this in jQuery, so if you know of a post about this in jQuery I would love to see it (you can leave it in the comments or you could write a post about it on this blog with your free Ajaxonomy account).

Internet Explorer 8 to Make Standards Mode Default

Tagged:  

If you haven't heard yet Microsoft has announced that Internet Explorer 8 will ship with standards mode as the default method to interpret web sites, instead of quirks mode. They have also announced that IE 8 will have a better standards mode than IE 7. The move is quite an interesting one for Microsoft who has historically had a thought of we are smarter than you, so we will make your web site render how we think it should.

Below is an excerpt from the announcement:

Microsoft's Interoperability Principles and IE8

We’ve decided that IE8 will, by default, interpret web content in the most standards compliant way it can. This decision is a change from what we’ve posted previously.


Why Change?


Microsoft recently published a set of Interoperability Principles. Thinking about IE8’s behavior with these principles in mind, interpreting web content in the most standards compliant way possible is a better thing to do.

We think that acting in accordance with principles is important, and IE8’s default is a demonstration of the interoperability principles in action. While we do not believe any current legal requirements would dictate which rendering mode a browser must use, this step clearly removes this question as a potential legal and regulatory issue. As stated above, we think it’s the better choice.


The rest of this blog post provides context around the different modes, the technical challenge, and what it means going forward.


Modes


Clear terminology around the different modes in IE8 (as well as other browsers) is crucial for the discussion. Wikipedia, as usual, offers a good starting point. The article about “Quirks mode” describes how modern browsers (like IE, Firefox, Safari, and Opera) all have different modes for interpreting the content of a web page: Quirks and Standards. (The article also covers “Almost Standards;” let’s set that one aside for the purpose of this discussion.)


Basically, all the browsers have a “Quirks” mode, call it “Quirks mode", and use it to offer compatibility with pages that pre-date modern standards. All browsers have a “Standards” mode, call it “Standards mode,” and use it to offer a browser’s best implementation of web standards. Each version of each browser has its own Standards mode, because each version of each browser improves on its web standards support. There’s Safari 3’s Standards mode, Firefox 2’s Standards mode, IE6’s Standards mode, and IE7’s Standards mode, and they’re all different. We want to make IE8’s Standards mode much, much better than IE7’s Standards mode.


The Wikipedia article’s explanation of why browsers have modes to begin with is worth looking at closely in this context:

"...the large body of legacy documents which rely on the quirks of older browsers represents an obstacle for browser developers, who wish to improve their support for standardized HTML and CSS, but also wish to maintain backward compatibility with older, non-standardized pages.… To maintain compatibility with the greatest possible number of web pages, modern web browsers are generally developed with multiple rendering modes: in "standards mode" pages are rendered according to the HTML and CSS specifications, while in "quirks mode" attempts are made to emulate the behavior of older browsers."


We decided to keep IE7’s Standards mode available in IE8. Our thinking was that this facility would be helpful as the web moves gradually from the large quantity of legacy content authored around IE7’s behaviors to a new era of much more interoperable and web standards compliant browsers. We based the decision to have an additional mode in IE8 on our experience with feedback from IE7. Specifically, during the transition from IE6 to IE7, many end-users found pages authored for the previous IE version’s Standards mode didn’t work well with the new version’s Standards mode.


The Technical Challenge


One issue we heard repeatedly during the IE7 beta concerned sites that looked fine in IE6 but looked bad in IE7. The reason was that the sites had worked around IE6 issues with content that – when viewed with IE7’s improved Standards mode – looked bad.


As we started work on IE8, we thought that the same thing would happen in the short term: when a site hands IE8 content and asks for Standards mode, that content would expect IE7’s Standards mode and not appear or function correctly. 


In other words, the technical challenge here is how can IE determine whether a site’s content expects IE8’s Standards mode or IE7’s Standards mode? Given how many sites offer IE very different content today, which should IE8 default to?

Our initial thinking for IE8 involved showing pages requesting “Standards” mode in an IE7’s “Standards” mode, and requiring developers to ask for IE8’s actual “Standards” mode separately. We made this decision, informed by discussions with some leading web experts, with compatibility at the top of mind.


In light of the Interoperability Principles, as well as feedback from the community, we’re choosing differently. Now, IE8 will show pages requesting “Standards” mode in IE8’s Standards mode. Developers who want their pages shown using IE8’s “IE7 Standards mode” will need to request that explicitly (using the http header/meta tag approach described here).

You can read the full anouncement here.

It will be interesting to see how well IE 8 and Firefox 3 compare. Of course if you are like me you remember being promised a lot of things in IE 7, such as better JavaScript error detection, which never materialized. Hopefully this move will help IE 8 become closer to Firefox in how it forces better coding practices (we will see).

Drag and Drop Ajax Applications

Tagged:  

Now that Ajax applications have become a must for most enterprises many companies are looking for ways to make Ajax application development easier. There are a few tools that promise to make it much easier to create Ajax applications.

WaveMaker has released WaveMaker Visual Ajax Studio. The tool boasts an easy to use drag and drop development environment. The studio claims to improve development time by 67% and to reduce code by as much as 98%.
Key features include:

  • Drag & Drop Assembly
  • LiveLayout™
  • Push to Deploy™: One-touch application deployment
  • Visual Data Binding
  • SOAP, REST and RSS web services
  • Leverage existing CSS, HTML and Java
  • Deploys a standard Java .war file
  • Free

The application offers an open source license as well as enterprise licenses.

You can view a screen cast of the product here.

TIBCO also has an easy to use drag an drop Ajax development environment called General Interface. The development tool is used by many large organizations for Ajax application development such as H&R Block. As with WaveMaker General Interface offers both open source and enterprise licensing.

You can take a look at General Interface here. You can view a demo of an application developed with General Interface here.

These tools can be great for some use cases however they tend to be much too heavy weight for public facing sites. Another thing to look out for is that some JavaScript development libraries may not work well with these tools. Both tools run in the browser which is something that I personally think is a bad idea as it can slow down the application due to the browsers own limitations. For me personally I would prefer to use a library like GWT for Ajax application development, but I'm not big into the whole drag and drop programming.

jQuery Tutorials for Designers

jQuery is a great library for animation and Ajax calls. As with any JavaScript library there are different objects and name spaces to learn. Well, over at Web Designer Wall they have put together a good tutorial about using jQuery. The tutorial is written from a designers stand point, but even an experienced hard-core web programmer can find this tutorial useful.

Below is an excerpt from the post:

How jQuery works?

First you need to download a copy of jQuery and insert it in your html page (preferably within the <head> tag). Then you need to write functions to tell jQuery what to do. The diagram below explains the detail how jQuery work:

how jquery works

How to get the element?

Writing jQuery function is relatively easy (thanks to the wonderful documentation). The key point you have to learn is how to get the exact element that you want to apply the effects.

  • $("#header") = get the element with id="header"
  • $("h3") = get all <h3> element
  • $("div#content .photo") = get all element with class="photo" nested in the <div id="content">
  • $("ul li") = get all <li> element nested in all <ul>
  • $("ul li:first") = get only the first <li> element of the <ul>

1. Simple slide panel

Let’s start by doing a simple slide panel. You’ve probably seen a lot of this, where you click on a link and a panel slide up/down. (view demo)

sample

When an elment with class="btn-slide" is clicked, it will slideToggle (up/down) the <div id="panel"> element and then toggle a CSS class="active" to the <a class="btn-slide"> element. The .active class will toggle the background position of the arrow image (by CSS).

$(document).ready(function(){

	$(".btn-slide").click(function(){
	  $("#panel").slideToggle("slow");
	  $(this).toggleClass("active");
	});

});

2. Simple disappearing effect

This sample will show you how to make something disappear when an image button is clicked. (view demo)

sample

When the <img class="delete"> is clicked, it will find its parent element <div class="pane"> and animate its opacity=hide with slow speed.

$(document).ready(function(){

	$(".pane .delete").click(function(){
	  $(this).parents(".pane").animate({ opacity: "hide" }, "slow");
	});

});

3 Chain-able transition effects

Now let’s see the power of jQuery’s chainability. With just several lines of code, I can make the box fly around with scaling and fading transition. (view demo)

sample

Line 1: when the <a class="run"> is clicked

Line 2: animate the <div id="box"> opacity=0.1, left property until it reaches 400px, with speed 1200 (milliseconds)
Line 3: then opacity=0.4, top=160px, height=20, width=20, with speed "slow"
Line 4: then opacity=1, left=0, height=100, width=100, with speed "slow"

Line 5: then opacity=1, left=0, height=100, width=100, with speed "slow"
Line 6: then top=0, with speed "fast"
Line 7: then slideUp (default speed = "normal")
Line 8: then slideDown, with speed "slow"

Line 9: return false will prevent the browser jump to the link anchor

$(document).ready(function(){

	$(".run").click(function(){

	  $("#box").animate({opacity: "0.1", left: "+=400"}, 1200)
	  .animate({opacity: "0.4", top: "+=160", height: "20", width: "20"}, "slow")
	  .animate({opacity: "1", left: "0", height: "100", width: "100"}, "slow")
	  .animate({top: "0"}, "fast")
	  .slideUp()
	  .slideDown("slow")
	  return false;

	});

});

4a. Accordion #1

Here is a sample of accordion. (view demo)

sample

The first line will add a CSS class "active" to the first <H3> element within the <div class="accordion"> (the "active" class will shift the background position of the arrow icon). The second line will hide all the <p> element that is not the first within the <div class="accordion">.

When the <h3> element is clicked, it will slideToggle the next <p> and slideUp all its siblings, then toggle the class="active".

$(document).ready(function(){

	$(".accordion h3:first").addClass("active");
	$(".accordion p:not(:first)").hide();

	$(".accordion h3").click(function(){

	  $(this).next("p").slideToggle("slow")
	  .siblings("p:visible").slideUp("slow");
	  $(this).toggleClass("active");
	  $(this).siblings("h3").removeClass("active");

	});

});

4b. Accordion #2

This example is very similar to accordion#1, but it will let you specify which panel to open as default. (view demo)

In the CSS stylesheet, set .accordion p to display:none. Now suppose you want to open the third panel as default. You can write as $(".accordion2 p").eq(2).show(); (eq = equal). Note that the indexing starts at zero.

$(document).ready(function(){

	$(".accordion2 h3").eq(2).addClass("active");
	$(".accordion2 p").eq(2).show();

	$(".accordion2 h3").click(function(){
	  $(this).next("p").slideToggle("slow")
	  .siblings("p:visible").slideUp("slow");
	  $(this).toggleClass("active");
	  $(this).siblings("h3").removeClass("active");
	});

});

You can read the full post here.
You can also view the demo here or download the demo code here.

jQuery is one library that I really recommend using. The library is very well written and is pretty easy to learn fairly quickly. If you haven't used the library before this is a good tutorial to start with.

Bad Object Detection

Tagged:  

John Resig has written another great post, this time about bad object detection. The article talks about classic bad object detection such as checking if the document.all object exists to test for Internet Explorer (I admit it I've been guilty of this one).

Below is an excerpt from the post.

Fringe Cases From Global Variables

While they don't happen often for those that they do happen to they can be a living hell. Specifically when object detection takes place within the global object (e.g. window.opera) then all bets are off as to its cross-browser applicability. Let's take a look at an example:

<html>
<head>
<script>

window.onload = function(){
  if ( window.opera ) {
    alert("You're using Opera, pick me!");
  }
};
</script>

</head>
<body> 
  <h1>Which browser?</h1>
  <a href="http://mozilla.com/" id="firefox"> Firefox</a><br/>

  <a href="http://apple.com/" id="safari"> Safari</a><br/>
  <a href="http://opera.com/" id="opera"> Opera</a><br/>

  <a href="http://microsoft.com/" id="ie"> Internet Explorer</a>
</body>
</html>

You would expect the alert to pop up when the user visits the page in Opera - and it does - however the alert also comes up in Internet Explorer. This is because all elements with an ID are automatically introduced as global variables (in the above there are four globals: firefox, safari, opera, and ie that all reference their associated elements). This is a fantastically difficult bug to spot and work around - thus you should be very cautious when doing any form of object detection on the global object.

Of course, it almost goes without saying, that there could exist an 'opera' variable elsewhere in the site that could interfere with this detection. Although that would, arguably, be easier to detect as it would make every browser trigger a false positive.

There's two morals here:

  1. Only use object detection to detect exactly what you need to use.
  2. Be wary of detecting properties on the global object - it's capable of lying to you.

You can read the full post here.

This is a great post and something that I hadn't thought much about. I really like John's blog and I find his posts very informative. I have often found information on his blog that I haven't seen anywhere else on the web (I know that I've said it before, but if you don't have John's blog on your feed reader, I would recommend adding it).

OpenSocial Videos

Tagged:  

With all the buzz about OpenSocial (especially with MySpace jumping on board) you probably are interested in using the API. Well if you are anything like me you find it easier to learn by watching a video than reading a boring post. Well the OpenSocial API blog has posted a few videos to help you in your development.

Syndicate content