If you don’t already know about Namespaces, Here’s a quick primer.

A namespace is a unique identifier for a particular library or collection of objects.  Namespaces are used to prevent conflicts between various libraries and to simplify debugging.

Traditionally Namespaces are defined using the unique name of a given project or library followed by a subsequent functional grouping i.e. (Yahoo.Util).  There is also a tradition from the Java community of defining namespaces & packages using reverse URL notation i.e. (com.ajaxbestiary.libraryname)  I’ve found this notation to be too cumbersome for most Ajax projects.

Abbreviating Namespaces 

Some developers prefer to abbreviate namespaces using a shorthand variable notation ie (var yu = Yahoo.Util).  This technique should be used quite carefully as it can lead to conflicts and confusion in multi-library & multi-person development.  My recommendation is that any abbreviations be standardized upon across all development within an organization.

Over the next few days I will be exploring the use of namespaces in common Ajax toolkits.

Today we conclude our series of posts on space & dimension with an exploration of YUI’s Spacial capabilities. Many of YUI’s capabilities aren’t readily apparent from the component level documentation. One exception are the setXY & getXY functions.

• setXY & getXY operate on the top left corner of an Element relative to the top left corner of the document.
• A companion getXY is provided with the YUI event object to determine the location of clicks.

A look at YUI’s API’s reveals a second, powerful class for dealing with 2d space. The YUI region class is a representation of an object on a grid. Region provides the top, left, right & bottom locations in a rectangular shape. Region is not a tool for manipulating the dom, rather it is a utility class for determining the union, intersection, area and other properties of a defined rectangular area.

YUI lacks many of the capabilities for handling scrolls, widths & heights we’ve encountered in other toolkits but still provides a reasonably capable set of tools with which to handle locations within a document.

Today we continue our series exploring the way spacial data is handled in Javascript toolkits with a look at mootools.  (Read Previous Installments on jQuery and prototype).   Similar to prototype, mootools includes dimensioning information in the Element Object.  Unlike prototype, mootools includes positioning information there as well.  Window & Document level information is contained separately in Window.size.js

Element Dimension & Position Properties (Element.Dimensions.js):

•  scrollTo(): Scrolls an element to a specified position (in some toolkits, scroll to scrolls the container to the specified element).
• getSize(): Returns an Object representing all size & scroll values of the elemen.
• getPosition(): Returns the real offsets of the element (relative to document).
• getTop: Returns the top position of the element (relative to the window).
• getLeft: Returns the left position of the element (relative to the window).

The Window dimensions (Window.Size.js):

• getWidth: Returns width Window
• getScrollWidth: Returns width of Document
• getHeight: Returns height of Window
• getScrollHeight: Returns height of Document
• getScrollLeft: Determine current left offset of viewport relative to document.
• getScrollTop: Determine current vertical offset of viewport relative to document.
• getSize: Same as Element.getSize.

Next time, we’ll look at YUI.

If you haven’t heard already, OpenSocial is a multi-vendor Social networking API similar to the Facebook API’s.  It is also, a very different environment from the Facebook API’s you may already be using.

If you’re not already familiar with Facebook development, It’s pretty much a one way street.
You deliver a page marked up in FBML (A facebook specific markup language) to facebook in response to requests from facebook. More importantly, Your application lives solely in the Facebook realm  you can really only push data to it.  Put simply, what happens in Facebook, stays in Facebook.

The new Open Social standard is a significantly friendlier place to deploy applications for several reasons.

• No need to use FBML, HTML & Javascript work just fine.
• You can use whatever Javascript Library you want, OpenSocial uses it’s own namespace to prevent conflicts.
• Persistent storage, You don’t need to handle everything on your server and an application can be written exclusively in javascript + html without any need for a server backend.  All data can be stored to the social network.
• Universal Feed.  All OpenSocial apps can write to a shared Activities feed.
• Universal Friends.  Friends can transfer seamlessly between Open Social applications
• You can brand & Host yourself.  Unlike Facebook, you can pull data into your application instead of solely pushing it into the Facebook world.

You can find the OpenSocial API’s at http://code.google.com/apis/opensocial/

D’bug has published a wonderful list of techniques for abbreviating Javascript and improving performance.

You can find the article here:

http://blog.reindel.com/2007/11/01/javascript-shorthand-tips-and-tricks/

Yesterday, We explored the jQuery Dimensions plugin and how it can be used to get a handle on the Physical location of elements on the page. Today we explore achieving the same effect with the native Prototype Element & Position Objects.

Element provides three methods to get a handle on the dimensions of an element

• getWidth( element ) Returns the width of an element
• getHeight() Returns the height of an element
• getDimensions() Returns the height & width of an element as an associative array.

For more advanced and capable access to the spacial properties of an Element we turn to the Position object.

• page()  Returns the x, y position of an element relative to the viewport
• cumulativeOffset() Returns the x, y position of an element relative to the entire document
• positionedOffset() Returns the position of an element relative to its parent.

As you can see, the prototype tools are a bit more powerful out of the box than jQuery Dimension (None of these require a plugin.)  Prototype, however, doesn’t handle scrolls as well as jQuery Dimension.

Read more about these APIs at

http://www.prototypejs.org/api 

Mozilla has just released a prototype application called Prism.  It streamlines the creation of a Webrunner app through a simple wizard.  Great for getting your feet wet with Webrunner development or exploring the concept of offline use.  You’ll still need to write a custom webapp to deploy however.

Prism is currently Windows only, but a mac version seems to be in the works.

Find More Information

http://labs.mozilla.com/2007/10/prism/ 

Lightbox & CodaSlider aren’t compatible.  A situation that was brought to my attention while participating in the comments on a blog post at http://www.ndoherty.com/.  Conflicts like this are a common experience for many of us and I thought this was a good opportunity to explore the cause of one such conflict.

In the case of Lightbox & CodaSlider, the fundamental frameworks were at odds with each other.  Lightbox is built with the Prototype / Scriptaculous framework stack, CodaSlider uses the jQuery framework.  Superficially, this doesn’t seem like a big deal.  While it’s usually bad form to load down a web page with multiple frameworks, I know it’s a crime many of us have been guilty of in the name of expediency or through multiple vendor integrations.  Usually this works, but in this case, the developer was attempting to integrate two widgets that were instantiated at different times and by different methods.

Luckily, there’s a simple solution to the problem.  I directed her towards the popular “ThickBox” widget instead.  In fact, that’s the greatest strength of the Ajax Bestiary we all have at our disposal.  There’s usually another tool available for us to use and in the case of popular frameworks like jQuery, a native solution is out there.  So if you ever find yourself in this situation, try to find the native solution.

Let me start by saying that I love CSS frameworks.  From Tripoli to Blueprint, YUI to YAML, I’ve embraced them fully into my design and development process over the past 9 months.  Unfortunately, throughout that time I’ve had to deal with a nagging issue: The Semantic Web.

CSS exists to shed the shackles of inline formatting and truly separate content from display.  While It’s rarely possible to achieve all of a project goals in a semantic way, CSS frameworks really fly in the face of a semantic approach. Don’t get me wrong, I still think CSS is the way to go and that frameworks provide powerful scaffolding, but I think we all need to be aware that using CSS grid & layout frameworks isn’t exactly a true separation of content & styling.

Take for example, blueprint.  Blueprint contains a powerful set of tools for building a layout.  Unfortunately, these tools require that columns be explicitly defined in the page source <div class=”column span-2″>.  This makes it impossible for a change in stylesheet to completely alter a page layout for mobile devices without discarding the column & span classes and relying on an independent set of markup e.g. <div class=”column span-2 mobile-column mobile-span-5″>.  This is a rather cumbersome noose to have to carry for some projects.  Especially when the infrastructure isn’t in place to deliver two distinct versions of the site from the server.

I’m wondering how you have addressed these problems in past projects?

Here are 5 open source WYSIWYG editors you might consider for your upcoming development projects. Rich Text Editors are one of the workhorses of modern web applications. Providing simplified wysiwyg formating of content for forms, RTEs have become a favorite among users.

Tiny MCE

Tiny MCE stands out as the most popular of the modern editors. The high flexibility, simplified theming and extreme ease of use the editor provides are highly regarded and well praised. Some key features:

• Microsoft Word Cleanup Filter
• Ability to fine tune available buttons
• Ability to restrict html to certain css styles
• Excellent Media import tools
• Simple API for custom features
• Skinable

Xinha

A venerable successor to HTMLArea, Xinha combines flexibility with a slick interface. Although once relegated primarily to the Zope / Plone universe. Xinha has lately emerged as a powerful stand alone editor. Many developers prefer its media & css tools to those of Tiny MCE

• Microsoft Word Cleanup Filter
• Highly Configurable
• Ability to restrict html to certain css styles
• Powerful Media import tools
• Skinable

FCK Editor

Although still popular, FCK editor doesn’t compete as well against the top tier wysiwyg editors as it once did. The interface seems clunky, especially compared to Xinha or Tiny MCE. And there’s always the issue of the name, I’ve had it shot down from a project spec because of it. The software is included here out of completeness and the fact that it is still widely used and adopted.

• Extensive capabilities
• Established & heavily deployed

Dojo Editor Widget

The Dojo Editor Widget is an integral part of the Dojo Ajax Toolkit. It is included here because of the compelling features that make it unique. Chief among these features is the ability to share one toolbar across multiple editor instances. It is this ability to provide a traditional application toolbar feel when multiple editors are in use that sets the Dojo Editor apart and inspired me to include it here today.

• Skinable
• Shared Toolbar Support
• Powerful API

YUI Rich Text Editor

Finally, an editor that works in Safari. Built on the YUI toolkit, the beta form of the Yahoo Rich Text Editor was designed from the ground up to work in Safari. By coding for Safari first and then modifying the code to create something that worked in Opera, Firefox & Internet Explorer. Dav Glass created a cross platform editor that surpasses every other editor in this list for browser support. The other unique feature of the YUI editor is web 2.0 / Mashup support and integration. By integrating a unique Flickr photo picker & useful insert link tools the YUI RTE has emerged as a force to be reckoned with in the WYSIWYG world.

• Flickr Photo Picker
• Link Picker Tools
• Powerful API
• Skinable
• Safari Support