Andres A. Vidal

Patrick Flanagan introduces his band “JAZARI” while giving the Nintendo Wiimote new purpose. Beyond playing games, the wiimote can extend rhythm…

Release and Stability Versioning Explained

Software versions can sometimes be difficult to understand. And, in my experience, it’s even harder to find a clear explanation on how to version your own product releases. So, after searching for clarification, I found some reasonable guidelines to follow. Let me know if they’re helpfull in your projects.

The standard version schema will be as follows: X.Y.Z.P-Stability Status#

X - Major version number - Major version changes, which include adding and removing features and functionality. These releases will provide an upgrade path to allow users to upgrade, and will have minimum backwards compatibility to previous major versions.
Y - Minor version number - Minor version changes, which include the adding of new features and bug fixes. Upgrades should be straight forward. The release should have maximum backwards compatibility to previous minor versions.
Z - Revision version number - Bug fixes and minimal new features. Upgrades should be straight forward. The release should be fully backwards compatible to current minor version.
P - Patch version number - Urgent bug and/or security fixes. Upgrades should be straight forward. The release should be fully backwards compatible to current minor version.
Stability Status# – How stable the release is (e.g. rc, beta, alpha), where # is the stability status number. The higher the number the more mature the release

Stability Status explanation:

Alpha - A suffix of ‘alpha’ means that this is a preview release of the upcoming version. It is not recommended in any way to be used in a production environment and does not guarantee that any of the features, functionality, API or code will be available in the stable release of this version. Business decisions should NOT be made based on this release. It is released as a first look into the upcoming version and might include major bugs and issues. It is intended for the use of developers and testers that want to have insight into the core development.
Beta - A suffix of ‘beta’ means that this is a more mature release than the alpha releases for this version. It is not recommended in any way to be used in a production environment. Since it is a more mature release there is a better chance that features, functionality, API and code will not change in the stable release of this version, but this is not guaranteed and no business decision should be made based on this release. Developers, testers and users are encouraged to test this release in a non-production environment and provide feedback on any issues they might find. Extension maintainers and developers are encouraged to test their extensions for compatibility with this release.
Release Candidate (rc) – A ‘rc’ suffix means that the release is getting closer to being stable. It is not recommended to be used in a production environment but all features and functionality are locked in for this version. Code and API might change slightly to accommodate for bugs or issues that are found in this release. Developers, testers and users are highly encouraged to test this release and provide feedback on any issues they might find. Extension maintainers and developers are highly encouraged to test and update their extensions as needed for compatibility with this release.
No stability level specified – If a release version number is not followed by any suffix from the above this means that this release is production ready and stable. We still highly recommend testing your site on a non-production environment before upgrading your live installation directly. All extensions should be updated to be fully compatible with this release.

Detecting HTML5’s Placeholder

HTML5 WG has implemented an input or textarea attribute feature named “placeholder.” It acts similar to suggestive pre-populated input text that clears on element focus.

While developing jQuery’s Simple Clearfield I discovered a way to test for the browser’s support of the placeholder attribute. Here’s the code:

function placeholder_support (){
     var i = document.createElement('input');
     return 'placeholder' in i; // returns true if supported
}

Inline-Block that works cross-browser

CSS Inline-block is a great CSS property that enables grid-like designs without all the hacks of using tables. This property, however, is not cross-browser friendly. A quick search can provide a ton of information regarding the typical support for this property. For now, here’s a cool workaround that works with most a-grade browsers using descending definitions:

Use a class, like .iblock, to apply the following css styles to the elements you need to be inline-block. Please note, this does not validate because it uses proprietary browser definitions.

<style type="text/css">
.iblock {
	display: -moz-inline-stack; 
	display:inline-block; 
	zoom:1; 
	*display:inline;
	/* Alignment Fix */
	vertical-align:top;
}
a {
	width:50px; 
	margin-right:12px; 
	background:lightblue; 
	margin-bottom:12px;
}
</style>

<a href="#" class="iblock">Inline Block</a>
<a href="#" class="iblock">Inline Block</a>
<a href="#" class="iblock">Inline Block <br />With Two lines</a>
<a href="#" class="iblock">Inline Block</a>
<br />
<a href="#" class="iblock">Inline Block</a>
<a href="#" class="iblock">Inline Block</a>
<a href="#" class="iblock">Inline Block <br />With Two lines</a>
<a href="#" class="iblock">Inline Block</a>

Apple Tablet?

~~Apple Tablet.~~ Apple iPad. I speculate that the tablet will run off something similar to the popularized iPhone platform. It will benefit from app-like software and include cellular/wifi connectivity. iPhone developers will be able to port their application to desktop-like environment with ease.

I see the tablet used “on-the-move.” Therefore, fast finger-swiping actions, not mouse or stylus pointing, will determine the interface. It will be the most “social aware” device on the market. You will be able to share and play with other tablet users. The size of the machine is very important, and Apple knows this! It has to be small enough to compete with netbooks and ebook readers, but slick and beautiful enough to re-captivate those who moved away from the iPhone. Apple understands that everyone will have to replace their new $259 Kindle and $300+ Netbook for this new, and probably pricier, tablet. Or else, can you imagine walking around with a Kindle, Netbook, and tablet while talking on your iPhone? Messenger bags will loose this battle. Welcome backpacks.

It will not be similar to what we know as laptops or netbooks. It will use the touchscreen to its ultimate benefit. What designers couldn’t fit and developers couldn’t build on the iPhone will now work wonders on the tablet.

Mobility is the key goal for the tablet. We have proven our need to carry our digital toys everyday and everywhere. Remember, the iPhone broke the trends of clumsy PDA-like cellphones by introducing a beautifully designed mobile platform that just happened to have a phone app, a banking app, a twitter app, a gps-enabled map app… :-)

Quick thought on the app market model

Apple has certainly shown us the potential of a closed app market. The benefits are clear and simple. The Apple app submission process assures security and some quality. However, the problems start when the approval behavior is determined by subjective reasoning.

A model that could solve skewed approvals would include something like a dual track submission process. The first track would allow a developer to opt-in for a “seal of approval” which would be awarded by the app hosting company after a strict approval process. A bank application, for example, would benefit from this seal since it guarantees security and authenticity.

The second track would allow developers to provide the application “freely” or at the user’s discretion. A less secure application, like a simple game, would benefit from this track since the app can be hosted anywhere.

Both track developers and companies would still benefit from brand awareness and similar selling factors. However, track two benefits from the “free market” theory which can potentially lead to innovative discoveries otherwise hindered from track one’s approval process.

Creating a JavaScript Object with a Dynamic Property Name

After going crazy trying to dynamically push objects into an JavaScript array I hit another wall. Dynamic object property names. For example, how do you dynamically write myObject.dynamicName?

Well, after much googling I remembered that magical function eval(). The best way, so far, to write dynamic property names is to parse,eval(), a string name into the property definition. For example:

myObject = [];
propertyName="crazyHorse";
propertyValue="David"; 
eval("myObject."+propertyName+"='"+propertyValue+"'");
alert(myObject.crazyHorse);
// Alerts "David"

relCopy jQuery Plugin

I just finished uploading a jQuery plugin called relCopy. It spawned from the need to duplicate form fields with specific needs. Try the Demo or Read the Docs. Also visit the the jQuery Plugin page.

Staples.com’s Holiday Face Lift - Site Redesign

Scary Move!

Staples.com launched their new site yesterday. At first glance, it looks great. However, big and drastic changes during the holiday season is a brave move for the nation’s largest office supply retailer.

Most web professionals would hold back on such heavy changes because customers are in critical shopping mode. Consider the typical stress of bargain hunting and time constraints that most customers face around this season. Now, throw a monkey wrench that forces them to learn how a site works. The added benefit of a major site redesign should outweigh the extra-limited patience of a stressed-out customer.

Now What?

What are the possible roadblocks faced by the retail giant and its mid season launch?

Browser Compatibility Issues
Brand and Navigation Aversion or Unfamiliarity
Cart Abandonment
Search Fallacy and Resolution

before < before and after >

Browser Issues can leave a wonderful redesign in the gutter. Whether it’s IE 6 or the latest android browser, the web site must work and sell. A large established site may have several browser related issues weekly. Imagine a brand new redesign. Extensive testing and precautions should be performed if major problems occur during the site’s roll out. A detailed and tested rollback plan is of essence during this sensitive time.

Brand Recognition is of utmost importance when shopping online. Navigation and site aesthetics also play an important role in a shopper’s confidence to shop online. This is especially important in times where online fraud is at its highest and shoppers are at their weariest.

If the site redesign is complex and includes the checkout process, cart abandonment percentages may increase. A carefully crafted checkout process takes time and is usually customized for a particular site’s needs. Consider an international site with complex business logic for foreign customers. Holiday shopping time is scarce and errors are not acceptable; especially in shipping time frames. If the wrong message is portrayed a customer may be too confused and prefer to continue shopping elsewhere.

Allowing customers to easily find the right gift should be an online retailer’s number 1 priority. Everyone is competing for attention when the economy forces lower prices.This is good news for customers and an opportunity for online retailers to fill their home pages with great deals and top sellers. However, when the front page fails to catch a customer’s attention, online stores must rely on their site’s search capabilities. A change in search result pages and technology can cause search fallacies and prevent customer recovery. Incorrect search results without suggestive recovery action words can cause a customer to quickly leave to a more reliable site.

IMOO

Staples.com did a great job at aesthetically improving their site. However, their search results for terms like “paper shredder” and “paper shredders” are returning substantially different results. “Paper shredder” returns 2 items starting at $1,149 and “paper shredders” returns a better result. Although, this could be a previous problem; some customers might find it unworthy to recover from “paper shredder” and continue shopping elsewhere.

All in all, good job guys!!! You showed courage! Just keep an eye on your searches!

Shopping Carts and Solutions

After looking for the best shopping cart solution, I found some interesting candidates. I’ll post them here and, if time permits, come back later to annotate my experience.

Magento www.magentocommerce.com

Free [open source] and Enterprise editions
Very active community
Based on PHP Zend Framework
Better backend UX
Great visual designs and templates
Issues in accessibility. JavaScript dependent
Heavy and resource intensive. Optimal setup demands dedicated servers and database.

OsCommerce www.oscommerce.com