jQuery Plugin: CuteTime, C’est Magnifique! (v 1.1) [UPDATE]

jquery-logo-256I am very pleased to announce the latest major update to the CuteTime jQuery plugin.

CuteTime provides the ability to easily…

  • convert timestamps to ‘cuter’ language-styled forms (e.g. yesterday, 2 hours ago, last year, in the future!),
  • customize the time scales and output formatting, and
  • update automatically and/or manually the displayed CuteTime(s).
Un-Cute Cute
2010-1-27 23:14:17 a few days ago
Thu, October 29, 2004 12:14:19 PM 5 years ago

Since CuteTime was released last year, there continues to be a flood of excellent feedback from many of you consisting of suggestions, bug reports (less of these), and feature requests (more of these). Much of that feedback has coalesced into this latest major release.

imageAs you may already have been able to tell, this latest update was, in part, inspired by the French language. Perhaps one of the greatest drivers, to whom I am grateful, of a central new feature within this release has been Bruno Morency, through whose guidance and linguistic support I was able to design a more robust, universal CuteTime for all languages and grammatical styles.

In addition to the inclusion of French CuteTime translations within the translations.txt file, this release, version 1.1, features…

  • ISO8601 date timestamp compliance
  • insertions using the %CT% pattern of computed numbers within the CuteTime cuteness
  • support for all foreign language characters and HTML
  • Spanish CuteTime translations, courtesy of Alex Hernandez
  • richer demos and test
  • improved settings flexibility of the CuteTime function
  • documentation updates (corrections and clarifications)

French, et al

Originally, CuteTime was developed with a less than universal syntactic centricity. Basically, CuteTime originally could handle the cuteness of presenting…

“a few seconds ago”
“last month”

…as well as prepend values resulting in…

” hours ago” becoming “4 hours ago”
” seconds ago” becoming “18 seconds ago”.

Now, in addition to supporting the prepending of the computed CuteTime,

  • the calculation can be inserted within the cuteness string, and
  • both formatted HTML styling and proper character accenting applied,

…resulting in the additional support for…

“il y a %CT% minutes” becoming “il y a 4 minutes”
“l\’année dernière” becoming “l’année dernière”
“<span style=’color: red; font-weight: bold’>in the future<span>” becomingin the future

ISO8601

image Formatting of timestamps is the bane of many a developer. Especially onerous is the handling of “standard” time formatting by the front-end developer. The JavaScript Date Object() supports the IETF standard, defined in RFC 822 Section 5, at least in FireFox, with most backend systems providing and storing (or at least converting to) dates in ISO8601 form.

Now, when converting a normal time into a CuteTime it can be either formatted in a manner compatible with the JavaScript Date() Object …

Thu Oct 15 2009 22:11:19 GMT-0400 (Eastern Daylight Time)
Oct 15 2009 22:11:19

… or ISO8601 …

2009-11-24T19:20:30+01:00
2009-11
2009-11-24T13:15:30Z

Implementation

CuteTime is a customizable jQuery plugin that automatically converts timestamps to formats much cuter. It also has the ability to manually and/or automatically update timestamps on a controlled interval.

  • If used by Selector, it replaces the text of the provided object with a CuteTime.
  • If used as a function, it returns a string containing a CuteTime version of the provided timestamp.
$('.timestamp').cuteTime();
$('.timestamp').cuteTime({ /* OPTIONS * / });

cutetime_object = $('.timestamp').cuteTime();
cutetime_object.update_cuteness();

$.cuteTime('2009/10/12 22:11:19');
$.cuteTime({ /* OPTIONS * / }, '2009/10/12 22:11:19'); // [NEW!]

For more details about the latest CuteTime improvements and their implementation, visit http://tpgblog.com/CuteTime

If you find this useful, or have any questions, ideas, or issues, leave a comment.

Enjoy!

Jeremy Horn
The Product Guy

Add to Social Bookmarks: Stumbleupon Del.ico.us Furl Reddit Google Add to Mixx!
About these ads

ThreeDots: The jQuery Ellipsis Plugin

jquery-logo-256Sometimes the text …

… is too long …
… won’t fit within the number of rows you have available.

Sometimes all you need is … ThreeDots! (a jQuery plugin)

For example —

This: When restricted to 2 lines by ThreeDots, can become:
There was once a brown fox
that liked to eat chocolate
pudding.
There was once a brown fox
that liked to eat …
There was once a brown fox
that liked to eat chocolate
pudding.
There was once a brown fox
that liked to (click for more)

… and most any other permutation you desire.

To Ellipsize

There are many scenarios in the display of online text where shortened, truncated representations are best used. For these scenarios, many products opt for the implementation of ellipses.

el·lip·sis (ĭ-lĭpsĭs)

n., pl., -ses (-sēz).

  1. The omission of a word or phrase necessary for a complete syntactical construction but not necessary for understanding.
  2. An example of such omission.
    • A mark or series of marks ( . . . or * * * , for example) used in writing or printing to indicate an omission, especially of letters or words.

[Latin ellīpsis, from Greek elleipsis, from elleipein, to fall short. See ellipse.]
from <http://www.answers.com/topic/ellipsis>

Many online products employ ellipses within their products to improve various aspects of the User Experience, such as:

allowing for easy summary scanning of page content, and
fitting more diversity of content into a smaller space.

Most often people truncate the text by character count, on both the client- and server-sides, which does not take into account the variable dimensions of the text being truncated. There are also a few CSS hacks out there, albeit with future standardized support currently being called into question, and custom, per-browser efforts required for successful implementation.

I too, on so many projects, have encountered the challenge of wanting to limit text to only a few lines or make sure that, no matter what, the text always fits within the space provided. People, myself included, on similar product feature missions have been forced to make compromises of design and experience, without the existence of a simple script/tool to carry out the task, to accommodate the time constraints and complexity of coding the ideal solution.

So, finally, I sat down, put the time in, and created the ThreeDots jQuery plugin for…

… when text is too long…
… when text doesn’t fit within the available space …
… when you want to employ highly configurable and flexible ellipses within your web product…

… so that never again, would I, or anyone else have to compromise their vision where that vision bumps up against the need for the smart implementation of ellipses in your web product.

Usage

ThreeDots is a customizable jQuery plugin for the smart truncation of text. It shortens identified text to fit specified dimensions and appends the desired ellipsis style if/when truncation occurs.

Sample 1:

<div class='text_here'>
	<span class='ellipsis_text'>
		TEXT
	</span>
</div>
$('.text_here').ThreeDots();  // USE DEFAULTS
$('.text_here2').ThreeDots({ max_rows:3 });

Sample 2:

<div class='text_here'>
	<span class='ellipsis_text'>
		TEXT
	</span>
</div>
threedots_object = $('.text_here').ThreeDots();
threedots_object.update();

Sample 3:

<div class='text here'>
	<span class='something'>
		TEXT
	</span>
</div>
threedots_object2 = $('.text_here').ThreeDots( {text_span_class: 'something'} );
threedots_object2.update( {text_span_class: 'something'} );

As a Method

When initialized, the ThreeDots plugin creates and assigns the full set of identified text to each container element, class=’text_here’, as a publicly accessible attribute, ‘threedots’. The method implementation supports chaining and returns the jQuery object.

<div class='text_here' threedots='original text'>
	<span class='ellipsis_text>
		original text
	</span>
</div>

Note, to implement the text that you wish to ellipsize, it must be wrapped in a span assigned either the default class ‘ellipsis_text’ or other custom class of your preference — customizable via the options/settings.

If the text becomes truncated to fit within the constrained space as defined by the container element that holds the ‘ellipsis_text’ span, then an additional span is appended within the container object, and after the ‘ellipsis_text’ span.

<div class='text_here' threedots='original text'>
	<span class='ellipsis_text>
		original text
	</span>
	<span class'threedots_ellipsis'>
		...
	</span>
</div>

The span class of ‘threedots_ellipsis’ can also be customized via the options/settings and have it’s own CSS/jQuery styles/actions/etc. applied to it as desired. Put another way, the ellipsis is NOT constrained to ‘…’, but can be any text or HTML you desire.

If any of the specified settings are invalid or the ‘ellipsis_text’ span is missing, ThreeDots will abort its processing and the initial text will be left untouched.

IMPORTANT: The horizontal constraints placed upon each row are controlled by the container object. The container object is the object specified in the primary selector.

$('container_object').ThreeDots();

When using ThreeDots, the following additional methods can be used…

ThreeDots.update()

Refreshes the text within the target object inline with the options provided. Note that the current implementation of options/settings are destructive. This means that whenever settings are specified, they are merged with the DEFAULT settings and applied to the current object(s), and destroy/override any previously specified options/settings.

var obj = $('.text_here').ThreeDots();	// uses DEFAULT: max_rows = 2
obj.update({max_rows:3});				// update the text with max_rows = 3

Settings

By default, the three dots ellipsis (““) is used, as shown in the prior examples, and limits text to a maximum of 2 lines. These and many other characteristics are fully customizable, and fully itemized and explained below.

To change these settings, they can either be accessed directly…

$.fn.ThreeDots.settings.max_rows = 4;

… or at the time of initialization or update …

// configuring the initial settings to use
var obj3 = $('.text_here').ThreeDots({ max_rows: 4 });

// changing the applied settings via an update call to the same text region(s)
obj3.ThreeDots.update({ max_rows: 2 });

The default settings data structure is…

$.fn.ThreeDots.settings = {
	valid_delimiters:         [' ', ',', '.'],			// what defines the bounds of a word to you?
	ellipsis_string:         '...',
	max_rows:                        2,
	text_span_class:        'ellipsis_text',
	e_span_class:                'threedots_ellipsis',
	whole_word:                        true,
	allow_dangle:                false,
	alt_text_e:                 false,					// if true, mouse over of ellipsis displays the full text
	alt_text_t:                 false					// if true & if ellipsis displayed, mouse over of text displays the full text
};

The parameters are defined (and all can be overridden) thus…

valid_delimiters

  • a character array of special characters upon which the text string may be broken up
  • defines what characters can be used to express the bounds of a word
  • all elements in this array must be 1 character in length
  • any delimiter less than or greater than 1 character will be ignored
  • if valid_delimiters contains no valid content, then nothing will be processed

ellipsis_string

  • defines what to display at the tail end of the text provided if the text becomes truncated to fit within the space defined by the container object
  • ellipsis_string can be text or HTML (e.g. ‘<a href=’url’>click for more</a>’)

max_rows

  • specifies the upper limit for the number of rows that the object’s text can use
  • if the displayed text is determined to use less than max_rows, then no operations will be performed upon the provided text and no ellipsis displayed
  • max_rows must be greater than 0 (ZERO)

text_span_class

  • by default ThreeDots will look within the specified object(s) for a span of the class ‘ellipsis_text’
  • if the class specified by text_span_class is not found within the selected objects, then no actions will be taken against the incompletely defined objects
  • if a different class name is desired for stylistic or programmatic reasons, a new, valid string can be specified

e_span_class

  • if an ellipsis_string is displayed at the tail end of the selected object’s text due to truncation of that text, then it will be displayed wrapped within a span associated with the class defined by e_span_class and immediately following the text_span_class‘ span
  • just like text_span_class, a different, valid class name can be specified

whole_word

  • when ThreeDots is fitting the provided text to the max_rows within the container object, this boolean setting defines whether or not the last word can be truncated to maximize the fit of the text within max_rows
  • if true, then don’t truncate any words and the ellipsis can ONLY be placed after the last whole word that fits within the provided space

e.g.

one time a duck flew
a frog shaped kite

…could become…

one time a duck flew
a (click for more)

  • if false, then maximize the text within the provided space, allowing the PARTIAL display of words before the ellipsis

e.g.

(continuing from the prior example)

one time a duck flew
a fr (click for more)

allow_dangle

  • a dangling ellipsis is an ellipsis that typically occurs due to words that are longer than a single row of text, resulting, upon text truncation, in the ellipsis being displayed on a row all by itself

e.g.

one time a duck flew floopydoopydoppydoodoodoodoo

… could become with allow_dangle:true …

one time a duck flew

  • if allow_dangle is set to false, whole_words is overridden ONLY in the circumstances where a dangling ellipsis occurs and the displayed text is adjusted to minimize the occurrence of such dangling of the ellipsis

e.g.

(continuing from the prior example)

one time a duck flew
floopydoopydoppyd…

alt_text_e

  • alt_text_e is a shortcut to enabling the user of the product that made use of ThreeDots to see the full text, prior to truncation, on mouse-over of the ellipsis
  • if the value is set to true, then the ellipsis span’s title property is set to the full, original text (pre-truncation) allowing the text to be seen by mousing over the ellipsis, if present
  • if the value is set to false, then the title value is left unaffected
  • this feature can be used in place of, or in conjunction with, additional styles or desired behaviors associated with mouse interactions of the selected object(s)
  • alt_text_e usage is not required to define your own custom interactions

alt_text_t

  • alt_text_t is a shortcut to enabling the user of the product that made use of ThreeDots to see the full text, prior to truncation, on mouse-over of the ellipsized text
  • if the value is set to true AND the ellipsis is displayed, then the text span’s title property is set to the full, original text (pre-truncation) and the text can be seen by mousing over the truncated text, if the ellipsis is present
  • if the value is set to false, then the title value is left unaffected
  • this feature can be used in place of, or in conjunction with, additional styles or desired behaviors associated with mouse interactions of the selected object(s)
  • alt_text_t usage is not required to define your own custom interactions

Get It

You can download ThreeDots, dual licensed under GPL and MIT, from…

jQuery Repository
http://plugins.jquery.com/project/ThreeDots

Git
Public Clone URL: git://github.com/theproductguy/ThreeDots.git
GitHub: http://github.com/theproductguy/ThreeDots

Zip
http://plugins.jquery.com/files/jQuery.ThreeDots_source-bundle_1.0.3_20091030.zip

Demo

http://theproductguy.com/threedots/threedots.demo.html

Status updates can be found here, jQuery ThreeDots.
If you find this useful, or have any questions, ideas, or issues, leave a comment.

Enjoy!

Jeremy Horn
The Product Guy

Add to Social Bookmarks: Stumbleupon Del.ico.us Furl Reddit Google Add to Mixx!

jQuery Plugin: It’s CuteTime! (v 1.0.5) [UPDATE]

jquery-logo-256I am happy to announce the latest version of the CuteTime jQuery plugin.02_facebook-cutetime

CuteTime provides the ability to easily…

  • convert timestamps to ‘cuter’ language-styled forms (e.g. yesterday, 2 hours ago, last year, in the future!),
  • customize the time scales and output formatting, and
  • dynamically update the displayed CuteTime(s) upon request and/or automatically.

There was some excellent feedback from many of you following the initial release of CuteTime. And much of that feedback has been incorporated into this release.

Changes to Version 1.0.5…

  • updated the ‘cutetime’ attribute to use HTML 5 compliant ‘data-timestamp’ custom attribute
  • updates to settings are now non-constructive
  • added translations.txt to the bundle to store all contributed translations of the cuteness translations (special thanks to Vincent Rolfs for providing the first translation, German)
  • minified version now compiled using YUI Compressor

CuteTime is a customizable jQuery plugin that automatically converts timestamps to formats much cuter. Also has the ability to dynamically re-update and/or automatically update timestamps on a controlled interval.

If used by Selector, replaces the text of the provided object with a cuteTime.

If used as a function, returns a string containing a cuteTime version of the provided timestamp.

Implementation

$('.timestamp').cuteTime();
$('.timestamp').cuteTime({ /* OPTIONS * / });

cutetime_object = $('.timestamp').cuteTime();
cutetime_object.update_cuteness();

$.cuteTime('2009/10/12 22:11:19');

For more details about CuteTime and its implementation, visit http://tpgblog.com/CuteTime

Enjoy!

Jeremy Horn
The Product Guy

Add to Social Bookmarks: Stumbleupon Del.ico.us Furl Reddit Google Add to Mixx!

jQuery Plugin: It’s CuteTime!

jquery-logo-256 02_facebook-cutetime Many online social products, and more continue to, avoid a formal timestamp format…

2009-10-10 23:14:17 and Thu, October 29, 2004 12:14:19 PM

… opting for more user friendly, “warm and fuzzy,” human-readable styles…

9 days ago and 5 years ago.

As a result, and also in my quest to always help provide my clients free, cheap and easy to use tools, I have been on the lookout for a jQuery plugin that would provide the ability to easily…01_digg-cutetime

  • convert timestamps to ‘cuter’ language-styled forms (e.g. yesterday, 2 hours ago, last year, in the future!),
  • customize the time scales and output formatting, and
  • dynamically update the displayed CuteTime(s) upon request and/or automatically.

While there are other similar tools out there in JavaScript, PHP, and, I am sure, many other languages, none adequately met my goals. Therefore, I created the jQuery CuteTime plugin.

Usage

CuteTime is a customizable jQuery plugin (jQuery.cuteTime) that automatically converts timestamps to formats much cuter. Also, it has the ability to dynamically re-update and/or automatically update timestamps on a controlled interval.

As a Function

If used as a function, a string containing a cuteTime version of the provided timestamp is returned.

$(document).ready(function () {
	// timestamp MUST be a valid Date().parse 'able' format
	$.cuteTime('2009/10/12 22:11:19');
});
<html>
	<body>
		<div class='predetermined'></div>
	</body>
</html>


As a Method

If used via Selector, CuteTime replaces the text of the provided object with a cuteTime.

$(document).ready(function () {
	$('.timestamp').cuteTime();
});
<html>
	<body>
		<div class="timestamp">
			2009/10/12 22:11:19
		</div>
		<div class="timestamp">
			2008/11/01 07:11:00
		</div>
		<div class="timestamp">
			2018/11/01 07:11:00
		</div>
		<div class="timestamp"></div>
		<div class="timestamp" cutetime="1980/10/12 22:11:19">
			2009/10/12 22:11:19
		</div>
		<div class="timestamp" cutetime="asd">
			10/12/2009 22:11:19
		</div>
		<div class="timestamp" cutetime="asd">
			aoisd
		</div>
		<div class="timestamp" cutetime="asd"></div>
	</body>
</html>

When initialized, the cuteTime() call either updates or assigns the ‘cutetime’ attribute to the provided objects. Method implementation supports chaining, returning the jQuery object.

e.g. <div class=’timestamp’ cutetime=’2009 10 12 22:11:19′>2009 10 12 22:11:19</div>

If the cutetime attribute already exists within the provided object, then the text within the object is ignored in the cutification process. If the cutetime attribute does not exist or an invalid one is provided, then a valid cutetime attribute is assigned to the object.

If the cutetime attribute is missing, then it is calculated from the text of the provided object.

If neither cutetime attribute nor valid object text exist, then the timestamp is assumed to be ‘now’.

When using CuteTime in the form…

<br />
$(document).ready(function () {
	remember_the_cuteness = $('.timestamp').cuteTime();
});

… the following methods can be used …

// stops all automatic updates of refresh-enabled timestamps
remember_the_cuteness.stop_cuteness();

// (re)starts the automatic updating of timestamps
// REMINDER: make sure refresh is set to > 0
remember_the_cuteness.start_cuteness();

// updates timestamps of the provided objects
remember_the_cuteness.update_cuteness();

Settings

By default, automatic updating is disabled and the following CuteTimes can be displayed…

the future!
just now
a few seconds ago
a minute ago
x minutes ago
an hour ago
x hours ago
yesterday
x days ago
last month
x months ago
last year
x years ago

To change these settings, they can either be accessed directly…

$.fn.cuteTime.settings.refresh = 10000;

… or at the time of initialization …

my_cutetime = $('.timestamp_move').cuteTime({ refresh: 60000*10 });

The default settings data structure is…

$.fn.cuteTime.settings = {
	refresh: -1,			// time in milliseconds before next refresh of page data; -1 == no refresh
	time_ranges: [
		{bound: NEG_INF,	// IMPORANT: bounds MUST be in ascending order, from negative infinity to positive infinity
			cuteness: 'the future!',			unit_size: 0},
		{bound: 0,
			cuteness: 'just now',				unit_size: 0},
		{bound: 20 * 1000,
			cuteness: 'a few seconds ago',		unit_size: 0},
		{bound: 60 * 1000,
			cuteness: 'a minute ago',			unit_size: 0},
		{bound: 60 * 1000 * 2,
			cuteness: ' minutes ago',			unit_size: 60 * 1000},
		{bound: 60 * 1000 * 60,
			cuteness: 'an hour ago',			unit_size: 0},
		{bound: 60 * 1000 * 60 * 2,
			cuteness: ' hours ago',				unit_size: 60 * 1000 * 60},
		{bound: 60 * 1000 * 60 * 24,
			cuteness: 'yesterday',				unit_size: 0},
		{bound: 60 * 1000 * 60 * 24 * 2,
			cuteness: ' days ago',				unit_size: 60 * 1000 * 60 * 24},
		{bound: 60 * 1000 * 60 * 24 * 30,
			cuteness: 'last month',				unit_size: 0},
		{bound: 60 * 1000 * 60 * 24 * 30 * 2,
			cuteness: ' months ago',			unit_size: 60 * 1000 * 60 * 24 * 30},
		{bound: 60 * 1000 * 60 * 24 * 30 * 12,
			cuteness: 'last year',				unit_size: 0},
		{bound: 60 * 1000 * 60 * 24 * 30 * 12 * 2,
			cuteness: ' years ago',				unit_size: 60 * 1000 * 60 * 24 * 30 * 12},
		{bound: POS_INF,
			cuteness: 'a blinkle ago',			unit_size: 0}
	]
};

The parameters are defined (and all can be overridden) thus…

  • refresh
    • time in milliseconds before next refresh of page data;
    • a value of -1 disables refreshing
  • time_ranges
    • the array of bound_structures that delineate the cute descriptions associated with time_ranges
    • time_range’s boundary structures consist of the following variables…
  • time_range[x].bound
    • the value is an integer representing the time difference between the provided timestamp and now
    • the lower inclusive bound, or starting point, for using the ‘cuteness’ string that describes the current timestamp
    • the exclusive upper bound is defined by the next boundary structure definition in the time_ranges array [current boundary + 1]
  • time_range[x].cuteness
    • string to use in place of the current timestamp (e.g. ‘yesterday’)
  • time_range[x].unit_size
    • the integer divisor in milliseconds to apply to the calculated time difference
    • if unit_size > 0 then a number value is prepended to the cuteness string as calculated by time_difference / unit_size (e.g. 4 hours ago)
    • if unit_size = 0, then no number is prepended to the cuteness string (e.g. an hour ago)

BTW

Make sure you use timestamps that are fully recognized by the JavaScript Date object’s Parse method in all the IE and FF browser versions you want to support. Otherwise, prepare for a headache. ;-)

Get It

You can download CuteTime, dual licensed under GPL and MIT, from…

jQuery Repository
http://plugins.jquery.com/project/CuteTime

Git
Public Clone URL: git://github.com/theproductguy/CuteTime.git
GitHub: http://github.com/theproductguy/CuteTime

Zip
jQuery.cuteTime_source-bundle_1.0_20091019.zip

Demo

http://theproductguy.com/cutetime/cutetime.demo.html

Status updates can be found here, jQuery CuteTime.
If you find this useful, or have any questions, ideas, or issues, leave a comment.

Enjoy!

Jeremy Horn
The Product Guy

Add to Social Bookmarks: Stumbleupon Del.ico.us Furl Reddit Google Add to Mixx!

The Product Guy’s Weekend Reading (May 15, 2009)

Every week I read tens of thousands of blog posts. Here, for your weekend enjoyment, are some highlights from my recent reading, for you.

01_earlystage

On Starting Up…

http://www.thedeal.com/dealscape/2009/05/new_venture_funds_focus_on_the.php
Venture funds displaying renewed focus on early-stage startups.

 
 

On Design & Product Experience…

http://www.uie.com/articles/experiencedesign
On the invisibility of great designs.

02_not-seen
03_quirksmode

On Modular Innovation…

http://www.quirksmode.org/blog/archives/2009/04/google_presenta.html
Modular Innovation in the mobile web, by way of W3C Widgets.

 

Have a great weekend!

Jeremy Horn
The Product Guy

Add to Social Bookmarks: Stumbleupon Del.ico.us Furl Reddit Magnolia Google Add to Mixx!

OpenSocial: Impediment or Catalyst?

opensocial OpenSocial. There is a great deal of excitement and hype behind the (gradual) release of Google’s OpenSocial. I have spent the last few weeks, since the release of OpenSocial, experimenting with, as well as speaking to the individuals involved with both product sides, widget and Container, and really digging into what is known, what is hypothesized to be, and wrapping myself around OpenSocial’s current and full potential.

What is OpenSocial?

OpenSocial allows websites and social networks (OpenSocial term, ‘Containers‘) to run mini-products (OpenSocial term, applications; aka gadgets, widgets). The mini-products can be shared across multiple social networks and leverage the existing content and data on the social networks (i.e. your existing friends). The Containers can host these mini-products as well as exchange information with other Containers, other social networks.

What does Google say about the Container a.k.a. OpenSocial Service Provider Interface (SPI)?

“To host OpenSocial apps, your website must support the SPI side of the OpenSocial APIs. Usually your SPI will connect to your own social network, so that an OpenSocial app added to your website automatically uses your site’s data. However, it is possible to use data from another social network as well, should you prefer. Soon, we will provide a development kit with documentation and code to better support OpenSocial websites, along with a sample sandbox which implements the OpenSocial SPI using in-memory storage. The SPI implements:

  • Adding and removing friends
  • Adding and removing apps
  • Storing activities
  • Retrieving activity streams for self and friends
  • Storing and retrieving per-app and per-app-per-user data “

Pasted from <http://code.google.com/apis/opensocial/container.html>

The most exciting information can be found in the highlighted statement within the above excerpted quote from Google’s explanation of the OpenSocial SPI. It is the possibility of sharing, exchanging, porting information between DIFFERENT social networks, not tied down to any one social network, where the networks have to provide value-add and truly unique user experiences to keep a user. In an environment where a user can easily move all of their gadgets (apps, widgets, modules) from one network to another, as well as, and most excitingly, port their user created content and friends from one network to another, at will, is tremendous (or should I say, ‘will be’?) for the progression of the Internet environment and user experiences, and the evolution of the Internet towards one of all around Modular Innovation.

———–

A while ago I coined the term Modular Innovation to describe the next phase of the Internet’s evolution; one which includes, but is not limited to the layer of the Internet referred to, by many, as the ‘social Internet’ – highly relevant to this discussion of OpenSocial. The stage of the Internet’s development after ‘Web 2.0′ is the period that I refer to as Modular Innovation.

Modular Innovation. Where users are able to determine the user-facing modules with which they can interact. Where users can determine which location or locations the information that these modules use are stored. Where users are able to customize their total Internet interaction and user experience, without third-party restrictions placed on how they can access, share, or move the content that they, themselves, have created. All this is Modular Innovation — innovation of many parts, or modules, that result in a much larger, cohesive whole for the user.

The components and products that enable this time of Modular Innovation knock down the encumbering walls. They allow for complete control of one’s own content, through the ability to integrate with other Innovative Modules (services & products), incorporating flexibility, portability, and facilitating the total customization, and self-determination of and by users with respect to how they interact with their personal creations and those of other individuals and companies.

OpenSocial is Open & Social. Really?

Just a little bit. I mean, well, that is how much of OpenSocial has actually been released, despite all of the articles and press releases that everyone has been reading. To be fair, right now it is difficult to give OpenSocial a complete and thorough review with 100% clarity, since it is still not completely “out there.” Over the past few weeks I have spoken to people and organizations throughout the OpenSocial product chain from the developers to the companies themselves, and experimented with and studied everything from the widgets to the Containers.

The initial release of OpenSocial was on the widget-side of things. At the time of OpenSocial’s release, if I hadn’t been prudent in my assessment and given Google more time to see if they would be able to paint a clearer picture, I would have maintained, as also has been said by others, that OpenSocial would have been better labeled as the “OpenWidget” platform. The App (Data) and Container API documentation all remain very incomplete, often merely consisting of little more than a few bullet points to guide peoples’ expectations. However, I have of late had the opportunity to study parts of the OpenSocial Container API, albeit a very incomplete and far from concrete API, to build a firmer understanding of the total vision of OpenSocial that I can now more accurately, more confidently, share with you.

Where does Google’s OpenSocial fit in? Does it help or hurt the progress and emerging next phase of the Internet, Modular Innovation?

orkut Now! For the moment the biggest value in OpenSocial lies with its ability to drive new development and user adoption for Google’s social network — orkut. If you want to develop and test apps or widgets you are pointed right to orkut. The Container half of the OpenSocial system, the part where the widgets are actually used and users/friends are created and edited, is clearly the lagging half of the OpenSocial release, with much more support and documentation already out for the widget-side. Trying not to pose too cynical a question… what’s the hurry? The more time that it takes to get the Container support out the door, the more people are (strongly?) encouraged to make use of orkut for development and testing, the more people are curious about new OpenSocial apps they come across, where orkut is the primary place to check them out and experiment with them, the better it is for Google … for orkut.

Other places (Engage.com, Friendster, hi5, Hyves, imeem, LinkedIn, MySpace, Ning, Oracle, orkut, Plaxo, Salesforce.com, Six Apart, Tianji, Viadeo, XING) will be implementing Containers and hosting these widgets, but not yet comprehensively. Full Container support and implementation will be a while in coming. The documentation isn’t there. And there are still plenty of questions on the app hosting and Container sides of the equations. So, for now, the bulk of developers’ focus is on widgets and apps — great news for orkut.

As a matter of fact, if anyone sees this move by Google as a purely altruistic offer to help the developer and the social Internet consumer, don’t lose sight of the fact that orkut’s U.S. market share, as of February of this year is a paltry 0.26%.

I would be remiss to not point out, that while orkut has been very successful internationally, they have yet been able to repeat that success in any meaningful way in the U.S., where the real advertising dollars can be found.

Will orkut, as a result of OpenSocial see a boom in its U.S. market share? You can count on it. This is indeed a very, very smart strategy by Google. I point this out not to slam OpenSocial, its ideas, or its strategy, which I find to be truly impressive, or the fact, that the slower they move on the Container-side, the greater the potential market share grab for orkut, which has been awesomely and intelligently executed, getting orkut competitors to buy-in (very impressive, Google), but to frame the logical, following question…

How much of OpenSocial and Google’s OpenSocial grand vision will come into being? Will it occur quickly? Or drag, and drag, and drag out over many years to come?

I ask these questions which, for now, can only be posed and re-evaluated as OpenSocial becomes more open, because my gamble, my interest, as well as the interest of everyone of the Internet lies in the visible progress of the technology and paradigms of the Internet. If something occurs to impede their progress, then it is best that everyone be on their toes and fully aware to address these issues and needs head-on, and with creative vigor and enthusiasm. It remains too early to draw any final conclusions.

Beyond orkut.

The OpenSocial environment is made up of (1) Applications (or widgets or gadgets) and (2) Containers. The Applications are independent modules that are able to display and perform actions based on the data fed into them — for example, list friends, latest friend activity, share restaurants you liked visiting with your friends, etc. Each module typically performs a specific, finite task, like mini-products, based upon a normalized set of input data. Each module can also communicate back to the parent, Container, what activities or other changes have occurred – e.g. new restaurant visited. Containers host, or run, the modules. orkut is a Container that early developers, and interested consumers, are able to use for testing their new modules to see how they work and how they interact with the data on orkut via the Container interface (aka API).

Creating the OpenSocial applications and modules that can run on every social network (that supports them) is nice – but hardly the exciting part. The part that is far from production ready, albeit starting to become available on places like hi5, Ning, and Plaxo, is the Container piece.

If OpenSocial lives up to the press releases and talking points, then OpenSocial just might be a positive catalyst in the world of Modular Innovation. If the walls of portability, access, sharing, self-determination of one’s own content remain, or if new walls spring up, or new cumbersome hindrances or restrictions emerge, then, what might be a positive influence may become the impeding technology, slowing progress of the clear eventuality where Modular Innovation rules the day.

For now, we shall all wait, continue to play with the pieces that constitute OpenSocial, the pieces that have been released, that eventually, will constitute the full release of OpenSocial — an event that we are all still anticipating.

Until then, myself and others will keep experimenting, observing and discussing Google’s OpenSocial to see just where it ends up; and waiting and watching for more Modular Innovations and noting those companies that facilitate the next phase of the Internet, and those that attempt to impede the inevitability.

Jeremy Horn
The Product Guy

P.S. and a Note to Google: In the future, try to not let the rhetoric get months ahead of the actual full release… starting out with unfulfilled expectations, sets the wrong tone for a product, a platform, that could have a huge impact on the future development of the product and the Internet, for good or worse (‘evil’ perhaps). This is valuable advice that does not apply solely to Google, but can be an educational learning point for all startups and companies releasing their products on the Internet. For Google and OpenSocial, we will have to wait and see.