June 6th, 2011 Posted by Don Albrecht
As a follow up to my last post, I thought I’d put out an instruction on actually creating a Google Chrome retreat.
Step 1: Add a Chrome Frame header to your site.
Add this to the head of the Chrome Frame dependent pages:
<meta http-equiv="X-UA-Compatible" content="chrome=1">.
If this isn’t practical, You can also configure your server to send an HTTP header of
X-UA-Compatible: chrome=1
I advise against this approach, however because server configs won’t be immediately available to other users on a site. By its nature, a Chrome Frame retreat should be considered a reasonably unique event. It’s good to clearly document this dependency for anyone else who may need to debug things later. Once you’ve started to retreat, make sure you’re applying the header to every page of the site. The two engines render things differently and you may create an inconsistent experience for your users if they are transitioning between Chrome Frame and Trident environments frequently. In my experience, border-radius and drop shadow toggling on and off is a pretty strong “It’s Broken” signal for end users.
Step 2: Identify your Dependency Wall.
- Identify the range of pages / screens in your web app that you can’t support in IE.
- Identify the navigation routes to those pages.
- Leverage the routes to find natural locations for gatekeepers.
-
- Login Screens (the perfect location)
- Tutorial Screens (A natural context fit for users)
- An Advanced Mode (Similar to the “enriched mode” Microsoft uses for ActiveX requiring cloud apps).
- If you’re lucky, this will be a screen somewhere beyond your conversion pipeline.
- Create an interception event for IE users. You can bake this into your app, but the easy way is with conditional comments.
- Identify the Dom Nodes in your layout that must be presented to the user for them to progress.
- <div id=’loginbox’>…</div>
- Create a conditional comment to hide the nodes and prompt the user to install Chrome Frame.
- Be careful of z-index. The chrome install iframe doesn’t work well if IE is floating some other content node on top of the install button.
- UN-INSTALL chrome frame once you’ve tested your retreat perimeter. This is a big deal for ongoing development as you won’t be testing in IE otherwise.
- Becareful about your conversion pipeline. Your key selling points may be behind the perimeter, but the act of demanding Chrome Frame is a pretty severe barrier to forward movement.
<html>
<body> <div id='prompt'></div> <!--[if IE]>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>
<style>
#loginBox{
display:none;
}
</style>
<script>
window.attachEvent("onload", function() {
CFInstall.check({
mode: "inline",
}); });
</script> <![endif]-->
</body>
</html>
Other Lessons Learned
Here’s a few lessons learned from deploying this.
December 24th, 2007 Posted by Don Albrecht
Ok, so you probably know that Javascript like most other programming languages treats “0″ as false and any other numerical value as true in logic statements. Usually, this is sufficient, unfortunately, sometimes, you need a bit more consistent behavior. For example, ( 2 && 3 && true ) = 2.
Luckily there is a simple fix. Since, ! only operates on boolean data. !(0) is true and !( any other non-null value is false). Therefore, !! returns the boolean value of the original expression.
Another way of coding it, would be “Boolean ( expression );” and directly casting the expression to a Boolean. All things being equal, this would honestly be my preferred way of doing it. After all, legibility in code is one of the utmost considerations for most development, but since bandwidth is also a major consideration in javascript and !! is reasonably intuitive, I personally use it wherever necessary.
October 16th, 2007 Posted by Don Albrecht
Organizational standards are wonderful things. They enforce consistency, help insure institutional competence and can dramatically reduce the learning curve to get additional staff up to speed on a project. At the same time, in the world of AJAX standards can be too slow to adapt to a constantly changing landscape. How do you strike a balance between flexibility and consistency?
Keep reading →
Filed under Uncategorized
Comments Off
October 14th, 2007 Posted by Don Albrecht
Here’s a great resource for load balancing AJAX applications. Unlike most load balancing strategies. This one outsources some of the responsibility for balancing to an AJAX client to reduce costs and increase availability.
http://www.digital-web.com/articles/client_side_load_balancing/
Filed under Uncategorized
Comments Off
October 11th, 2007 Posted by Don Albrecht
Prototype 1.6 is fast approaching and we’re already seeing loads of developers adopting the update in projects. As this tutorial shows, The improvements to Class & inheritance in are truly compelling reasons to jump.
Prototype 1.6 Inheritance tutorial via Ajaxian
October 8th, 2007 Posted by Don Albrecht
Menu widgets: Every toolkit’s got one or more and they sure are easy to use & impressive so the temptation is there to just slap them everywhere. After all, you’re already pushing the toolkit to the client anyway, why not make the most of it.
Before you do, tho I encourage you to consider the following & ask yourself if the javascript solution is really appropriate.
Keep reading →
Filed under Uncategorized
Comments Off
October 4th, 2007 Posted by Don Albrecht
This has been out there for quite a while now, but I thought it should be included in the bestiary out of completeness.
http://clientside.cnet.com
September 19th, 2007 Posted by Don Albrecht
Building a Modal Filtering List with YUI
In this tutorial we will build a simple form and embed it in a modal panel.
Building the form
There are two approaches we could take towards building the form : dynamic or static. A dynamically loaded interface is built by the javascript executed on page load, a static interface lurks hidden inside the html source and is displayed when needed. For the sake of simplicity, we will be using a static interface in this tutorial.
Our form is quite simple. It consists of 3 tiers of options and a submit button:
<div id="filterpanelform" style="display:none">
<fieldset><legend>Type</legend>
<input name="type" value="berry" type="checkbox">Berry
<input name="type" value="citrus" type="checkbox">Citrus
<input name="type"value="drupe" type="checkbox">Drupe
<input name="type" value="Melon" type="checkbox">Melon
</fieldset>
<fieldset><legend> Size </legend>
<input name="size" value="small" type="checkbox">Small
<input name="size" value="medium" type="checkbox">Medium
<input name="size" value="large" type="checkbox">Large
</fieldset>
<fieldset><legend> Color </legend>
<input name="color" value="red" type="checkbox">Red
<input name="color" value="orange" type="checkbox">Orange
<input name="color" value="yellow" type="checkbox">Yellow
<input name="color" value="green" type="checkbox">Green
<input name="color" value="purple" type="checkbox">Purple
<input name="color" value="pink" type="checkbox">Pink
</fieldset>
<button value="Filter" name="doFilter" type="button"id="doFilter">Filter</button>
</div>
Notice the style=”display:none;” on the containing div? This is to hide the contents from view until our user calls the modal dialog.
Building the Modal Interface
Now we need to build a YUI panel to contain the filtering interface. Unlike the form elements, the panel we will build dynamically. The panel will be created on page load, but will remain hidden until called for.
// Instantiate a Panel from script
YAHOO.example.container.FormPanel = new YAHOO.widget.Panel("formPanel", { width:"320px", visible:false, draggable:true, close:true} );
YAHOO.example.container.FormPanel.setHeader("Form Panel");
//populate the panel with the form we've hidden in the HTML
YAHOO.example.container.FormPanel.setBody( document.getElementById("filterpanelform").innerHTML );
YAHOO.example.container.FormPanel.render("container");
September 17th, 2007 Posted by Don Albrecht
Here’s a tip for all you Blueprint CSS users. If you want to extend a background into the margin beyond a column, apply the first & last classes to the column. Even if it’s not the first column in a row, it will extend the div 10 px into the gutter between columns.
Filed under Uncategorized
Comments Off
Latest Posts