The Client: Thomson Reuters’ clients are savvy and busy. They knew that if the site was going to reach them, it had to be fast, solid and engaging.

My Role: Developer in small, focused group to create the prototype and an on-site advisor during integration with their existing systems.

The Technology: The client needed to integrate the site into their CMS but they had asked us to create and test a prototype site before handing it over. We built the original with very limited PHP since we knew TR would be using .NET in the end but PHP allowed our team to quickly build the prototype. The site uses a custom Flash video player and also has a limited but useful mobile version. This mobile version was very important to the client as the majority of their customers regularly use BlackBerrys and other mobile devices. During integration a few technical hurdles appeared from use of their legacy systems but because I was on-site at the time, launch was not affected.

The Highlights: Multiple video players used in conjunction with jQuery UI tabs. Animated main navigation.

What’s happening: While animating, jQuery needs to add a few style definitions if they are not already declared. Among these is the ‘overflow’ property. jQuery sets this to ‘hidden’ in order to show the animation and then removes this declaration upon completion of the animation. When the declaration is removed, Flash gets the signal to re-render the movie (because, possibly, the layout of the page has changed).

How to fix it: declare ‘overflow:hidden’ in the CSS for the element. Voilá, the flickering is gone.

The Site:

The Client: Chinet wanted to revamp its site to drive sales of a product line that was deeper than most people knew. As part of a full campaign, OLSON designed, developed and promoted their new website.

My Role: Development lead of concentrated development group. Development planning and production.

The Technology: The client had an existing CMS which they wished to keep. The system had been hand-rolled by another agency. We were asked to work with the CMS, improve it where needed and rebuild the public-facing side using CodeIgniter PHP framework. The end product included an implementation of the Zend Lucene search library and smart data caching to reduce server load and speed load times.  The team developed inviting Flash features for the home page and Moments Calendar on the site. Also, the site used MooTools for JavaScript interactions. Finally, the site was built for progressive enhancement where the content is available without Flash or JavaScript and present for SEO.

The Highlights: Club Chinet where visitors can save recipes and tips and sign up for the Chinet newsletter, Moments Calendar where visitors can find a reason to celebrate any day.

All external links from the site should open in a new window. Do not want to write this on a link-by-link basis. Should be light and unobtrusive. Using MooTools.

Dx

We can easily know what domain the script lives on. Other domains are easily distinguished. Links come and go and are loaded in, sometimes, by other links. We will use one of my favorite patterns, which I am calling the Passive Click Pattern (got a better or more widely-used name?) to listen to all clicks anywhere on the document.body. In this case, if the click is on a link and the link is external, then we will set the target of the link to ‘_blank’.  Paramount to using the PCP (OMG, I did not realize that was the acronym) is the pattern of not stopping clicks in other patterns but just using preventDefault. That way, the click can flow through the DOM and be heard by multiple listeners.

This solution requires only the most core of MooTools and is built against version 1.2.3.

Tx

window.addEvent('domready', function(){
	var currentDomain = window.location.host;
	$(document.body).addEvent('click', function(evt) {
		$trgt = $(evt.target);
		if ($trgt.get('tag') !== 'a') {
			$trgt = $trgt.getParent();
		}
		// if the target is a link AND the link is absolute AND the link goes to a different domain,
		// then set the target to _blank to open in new page
		if ($trgt &&
				$trgt.get('tag') === 'a' &&
				$trgt.get('href').test('http') &&
				!$trgt.get('href').test(currentDomain)) {
			$trgt.set('target', '_blank');
		}
	});
});

EDIT:

A more fitting name for this pattern is “Passive EVENT Pattern” since it can be applied to more than just clicks. Form submissions, for instance, or key entry.

Plus, then you can say your application is PEPpy. #amirightfolks

The Site:

The Client: OLSON is dedicated to building social circles around their clients. OLSON designed the new site to show off the ability and results of our work.

My Role: Development lead of concentrated development group. Development planning and production.

The Technology: We wanted to make our site fun, intuitive and easy and the data long-lasting and reusable. The CMS behind the site holds a lot of data about our work and client relationships (more than we could show on the site) and we wanted that data to be reusable for presentations and other communications. We loaded the information into the Daisy CMS and stored it in logical ways that would allow us to easily retrieve whatever we were looking for. On the front end, the site uses Java Faces and a custom caching system to quickly present the data as pulled from our custom Java services. The site uses jQuery for JavaScript interactions.

The Highlights: JavaScript-backed animation of features and features card stack on home page, New and Featured Work, Interactive Client List.

Since I couldn’t find out how to do it, I’ll post the secret here. To make the horizontal accordion work in Mootools 1.2 you have to specify a fixed width. The API docs say it is a Boolean, but it ain’t. It is what the plugin uses to determine the size of open panels.

Markup:

<ul id="get-started-steps">
	<li class="get-started-step"> <a class="trigger left" href="#">Step 1</a>
		<div class="get-started-content left">step 1 content</div>
	</li>
	<li class="get-started-step"> <a class="trigger left" href="#">Step 2</a>
		<div class="get-started-content left">step 2 content</div>
	</li>
	<li class="get-started-step"> <a class="trigger left" href="#">Step 3</a>
		<div class="get-started-content left">step 3 content</div>
	</li>
</ul>

JS:

<br />
new Accordion(<br />
$$(’.get-started-step .trigger’),<br />
$$(’.get-started-content’),<br />
{<br />
height: false,<br />
width: true,<br />
fixedWidth: 200<br />
});<br />

CSS:

<br />
#get-started-steps { width: 100%; }<br />
#get-started-steps li { float: left; }<br />
.get-started-content { width: 200px; height: 200px; }<br />
.left { float: left; }<br />

The Site:

The Client: Lee is one of the top Jeans brands in the world. The new site was designed by OLSON for ease of use and style.

My Role: HTML and JavaScript development during principal development in small group. PHP programming of prototype site for proof of concept which was handed over to third-party back-end developers. After launch, development lead for follow up and enhancements.

The Technology: Dojo Toolkit for JavaScript, complete with custom builds and minification. Our team also provided Flash elements for featured messaging. Deep progressive enhancement; the site is completely usable and friendly with or without JavaScript, Flash or images.

The Highlights: Fit Finder, asynchronous results filtering and pagination built to work with IBM’s WebSphere technology.

However, the HOW is here. But, okay, yeah, maybe some specific WHY.

We had been using a generic namespacing function that required plugging in the base name three times. Not really that much work, but kind of a pain if you want to redistribute it. So, it is now reworked to be changed only in one place. It requires three variables in the default global namespace but that ain’t bad, right?

var APPLICATION_NAMESPACE = "MYPROJECT";
var _global = this;
var _global[APPLICATION_NAMESPACE] = {};

_global[APPLICATION_NAMESPACE].namespace = function() {
    var a=arguments, o=null, i, j, d;
    for (i=0; i<a.length; i=i+1) {
        d=a[i].split(".");
        o=_global[APPLICATION_NAMESPACE];

        for (j=(d[0] == APPLICATION_NAMESPACE) ? 1 : 0; j<d.length; j=j+1) {
            o[d[j]]=o[d[j]] || {};
            o=o[d[j]];
        }
    }

    return o;
}

So, _global here refers to window most of the time (but sometimes not so we need a reference to it).  MYPROJECT can be whatever you want it to be.

When we use the namespacing stuff we refer to the specific namespace directly using JS dot-deliminated object syntax. This function goes soft on existing objects; it will not destroy a previously created object with the same name.

The function will ignore the name of the namespace if it is the first part in there. I’m not saying that well, but these calls are functionally identical and both namespace MYPROJECT.SomeOtherPart.

MYPROJECT.namespace("SomeOtherPart");
MYPROJECT.namespace("MYPROJECT.SomeOtherPart");

It took me a while to find how to write the build script to omit duplicate dependencies included in the global but required by the page-specific scripts. For instance, we have a custom form handler called MyProject.form and is extended by page-specific classes. So, with the original build this class was included in the Global layer and the page-specific layer resulting in the MyProject.form class being in both .js files in the built page.

The answer is: layerDependencies in the build script.

dependencies = {
    resourceName: "MyProject",
    layers: [
    {
        name: "../../MyProject/Global.js",
        dependencies: ["MyProject", "MyProject.Global"]
    },
    {
        name: "../../MyProject/CategoryPage.js",
        dependencies: ["MyProject.CategoryPage"],
        layerDependencies: ["../../MyProject/Global.js"]
    }
    ]
};

So,  if a class in dojo.required (and therefore included) in Global.js it will be not be copied into CategoryPage.js if it is required there, also.

The Client: Hearst Broadcasting is a part of the powerful and historic Hearst Corporation. They needed a friendly and useful interface for the weather section of the stations’ sites.

My Role: Part of the small, dedicated development group.

The Technology: The site is built for progressive enhancement and semantics but at the top level the interface is JavaScript driven with AJAX-loaded content and smooth animations. The JavaScript uses the Yahoo User Interface library and build system to provide a consistent experience across browsers and platforms.

The Highlights: Home page tiles are arrangeable by user and saved in a cookie to persist across visits. The tiles and their associated content are built abstractly to allow content owners tight control over presentation and interaction.