Archive for the ‘Web Development’ Category

Calculate page size and view port position in JavaScript

April 25th, 2010 – Web Development (, ) 8 Comments »

Have you ever had to try to figure out the dimensions of a page or browser in JavaScript? This task seems very simple at first glace, every browser has simple properties that will give you this information. Unfortunately, not every browser agrees what object these properties belong to, or even what the names are.

I’ve built a couple nifty tools in JavaScript that need to know the exact dimensions of the document as well as the exact dimensions of the browser view port. Since these scripts are uses on very high traffic sites with a very wide audience I have had to make sure they work in a multitude of browsers.

In this article I will show you how I support all modern (and not so modern) browsers with one function and I will explain a little about exactly what techniques I’m using to accomplish this.

Read more…

MS Ajax 4.0 DataView Templates vs. jTemplates and PURE

March 26th, 2010 – Web Development (, , , , ) 3 Comments »

There are many occasions where you’ll want a JavaScript template system to handle the rendering of data. If you’re building any kind of JavaScript widget or user interface that will consume JSON data, then build presentation with that data, you really should consider using a JavaScript template engine. It can save a lot of future headaches and make updates a much easier task.

Up until now there has really been only two good option for doing maintainable presentation templates in JavaScript, jTemplates, and PURE. These two template engines allow you to build layout with data.

  • jTemplates is a plugin for jQuery, and of course jQuery is by far my favorite JavaScript library, the only one I’ll ever recommend. jTemplates is an abstraction for data and presentation. It even has its own pseudo-language syntax for the template engine.
  • PURE (Pure Unobtrusive Rendering Engine) is a template engine that works with several JavaScript libraries, including jQuery. This system is designed from the ground up to use valid, unobtrusive techniques to build out it’s templates. PURE templates are normal in-page markup that the JavaScript replaces data in to. A very elegant system indeed.

Now there is a new option coming out along with the new Microsoft .NET Framework release.

  • Version 4.0 of the Microsoft Ajax Library (aka ASP.NET AJAX) includes a new client side template system using the DataView control which is actually quite good. Frankly, it feels like it was inspired by taking the best of jTemplates and PURE but it is enhanced for ASP.NET developers.

I’ve been playing around with this new system and have been pleasantly surprised. Templates are relatively easy to construct, implementation is straight forward, and it works quite well. There are some pros, and some cons when compared to the other template systems.

Read more…

Comparison of popular social bookmarking widgets

March 13th, 2010 – Web Development (, ) 30 Comments »
Social Bookmarking Service Logos

Social bookmarking widgets are absolutely everywhere, you see them on blogs, news, online retailers and even on government web sites. They have become one of the defining features of Web 2.0 design.

There are three major players in the social bookmarking widget world, AddThis, ShareThis and AddToAny. These three services together are seen by almost everyone on the internet every single day.

This begs the question, which one is best? As usual it depends on what your needs are and how you will be using it. However I’ll try to take away the dartboard selection process that you’re using now by providing some reviews and a performance comparison for these different services.

Read more…

Custom link click tracking using Omniture

March 7th, 2010 – Web Development (, , ) 21 Comments »
Omniture Logo

Omniture is the de facto standard tracking and analytics system that most online retailers use. It has a suite of reporting metrics and allows for custom reporting variables. It is primarily designed for online stores to track usage, conversions and sales.

Admittedly, I am not that big a fan of Omniture. Their SiteCatalyst reporting application is slower than Google Analytics and not as flexible as it could be. My biggest gripe is their tracking JavaScript code, it’s just plain terrible. It’s slow, obfuscated (really? why do this?), bloated, impossible to debug and not built using modern practices. Oh, and they’re also insanely expensive if you want to get at all fancy.

This article is simply a straight how-to for building a custom link tracking JavaScript in the hopes that I can save some other JavaScript developer out there the headaches and tears usually associated with learning advanced Omniture implementations.

Read more…

JavaScript regex trick: Parse a query string into an object

March 3rd, 2010 – Web Development (, ) 24 Comments »

Have you ever needed to get query string values using JavaScript? This task is usually a painful split, split, split, iterate, indexOf hack that is really slow and terribly ugly to look at. It also tends to pile up lines of code really fast.

Here is a really sweet way to parse the query string into a JavaScript object with two lines of code using regular expressions to populate an object. I discovered this trick a few years ago and filed it away in my code snippets folder.

Read more…