The Product Guy: Astonishin’ in 2010!

Snowman

Wow! Another year of The Product Guy is now coming to a close… an awesomely astonishin’ 2010! Together we explored many exciting products and enjoyed the perspectives from very smart guest bloggers, from startups to user experience to modular innovation and more — all while getting to meat and speak with many of The Product Guy’s steadily growing readership.

And, once again, let’s take a brief look at the top posts that made this year on The Product Guy so awesomely astonishin’…

#10 Stribe to be Instantly More Social

Recently, The Product Guy had the opportunity to interview Kamel Zeroual, CEO of Stribe — Gold prize winner at Le Web ‘09. And he covered topics ranging from this Paris-based startup’s origins to where it is going and how it is planning to get there.

00_stribe_homepage

#9 brainmates Interview with The Product Guy

Two weeks ago I was interviewed by Janey Wong over at brainmates for their brainrants blog. We touched on some really good Product Management topics in which I think you would be interested.

So, here it is, reblogged straight from Australia…

image

#8 Why Startups are Agile and Opportunistic – Pivoting the Business Model

Startups are inherently chaotic. The rapid shifts in the business model is what differentiates a startup from an established company. Pivots are the essence of entrepreneurship and the key to startup success. If you can’t pivot or pivot quickly, chances are you will fail.

steve_blank

#7 Quick-MI Worksheet: Spreadsheet to Sustained Online Success

Over the past few years I’ve been discussing Quick-MI. Now, through the help of Google Docs, I’m sharing the Quick MI Worksheet to make it even easier for you to apply Quick-MI to your products, track progress, and share the results with your team. The Quick-MI Worksheet automatically performs all the necessary calculations and summarizes the product for you.

#6 Modular Innovation 201

The products and concepts that constitute Modular Innovation are those that connect, enable, produce, enhance, extend, and make use of these relationships and, in turn, users’ online experiences with them. Let’s get to understand them better.

image

#5 Facebook PDQ

In answering the question of Usability, "Can I use it?" the sub-category of Page Load plays an instrumental part. Facebook is one such excellent example of a web product with Prompt Page Load Time.

00_facebook-homepage

#4 Automating the Path to a Better User Experience

Quick-UX evaluates the degree to which a product successfully addresses the following 3 questions: Can I use it? (Usability), Should I use it? (Usefulness), and Do I want to use it? (Desirability). Now, through the help of Google Docs, as I did the other week with the release of the Quick-MI Worksheet, I’m sharing the Quick-UX Worksheet to make it even easier and faster …

clip_image001

#3 jQuery ThreeDots: yayQuery Plugin of the Week!

I’ve been a fan of yayQuery since shortly after their initial podcast episode. Therefore, you can imagine my surprise and elation when I heard them announce that my ThreeDots plugin was this week’s jQuery Plugin of the Week… almost falling down the stairs as I listened this past Friday while entering the subway here in NYC.

yayquery-plugin-of-the-week

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

I 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).

In addition to the inclusion of French CuteTime in this latest 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).

jquerylogo256_thumb[1]

#1 jQuery Plugin: Give Your Characters a NobleCount

In my quest I have been on the lookout for a jQuery plugin that would provide the ability to: (1) provide real-time character counts, (2) enable easy to customize visual behaviors, and … While there are other similar tools out there, none adequately met these goals. Therefore, I created the jQuery NobleCount plugin.

twitter

 

clip_image011

This year The Product Group grew beyond all possible expectations! Now with 600+ active members in NYC we Product People of all sorts and levels of experience to meet, interact, and network, in a laid-back, conversational environment on first Thursday of each month. Thank you to our sponsors, Balsamiq Studios, RYMA Technology, and Sunshine Suites, and to every one of you who attend, engage and help make The Product Group the astonishin’ success it has become!

IMG_0700 IMG_0705 IMG_0713

Happy New Year!

Jeremy Horn 
The Product Guy

About these ads

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!

The Product Guy: Superfine in 09

Snowman&Bell The Product Guy had another superfine year in 2009, sharing and exploring products, their experiences, and many innovative startups and the founders behind them, while getting to meet and speak with many of The Product Guy’s steadily growing readership.

And, as 2009 comes to a close, as I did last year, let’s take a brief look at the top posts that made this year on The Product Guy so totally superfine….

 

#9 Quick-UX Credibility from Likexo to Etsy

Quick-UX Credibility is a measure of the starting point, the foundation of a product’s Credibility. A look at the popular (and not so popular) examples of web product Credibility online.

image

#8 World’s Best Programmer is… [w/ Respect]

The World’s Best Programmer wants respect.

And, respect is just one of those conditions prevalent within the environment of the World’s Best Programmer. In this last post in the series The Product Guy reveals just who exactly is World’s Best Programmer, and where/how they thrive!!

image

#7 Converted by an Android. A short story of Gmail, in parts.

Part 1 in a series exploring the eventual adoption of Gmail in one’s daily life, by one once thoroughly addicted to, dependent on, the primarily client-based solution of Microsoft’s Outlook, what brought about this conversion, why it took so long, and what should be done to encourage greater Gmail adoption.

image 

#6 jQuery Plugin: It’s 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, the time has come for the jQuery CuteTime plugin. CuteTime goes beyond similar tools and lets you 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.

image 

#5 The Future: Gmail, Social Media, and You

Over the past many weeks I have explored, elaborated, and exhausted the extent of the then existent exercising of resistance. Now, with such resistance eroded, drawn out through my conversion by an Android, an exploration into the Future of Gmail and the ‘Should Do’ … Readability, Simplify, Organize, Integration and Consistency.

image 

 

#4 Google: True Colors Shine Through

In answering the question of Desirability, "Do I want it?" the sub-category of Color Scheme plays an important role. Google Search is an outstanding example of a Good Color Scheme demonstrating alignment of both colors and messaging. Learn from it.

image

#3 Stardoll: Lost and Naked

When you look at a web page, the various elements of the page can often be seen coalescing into distinguishable regions and groups. Intentionally structured, or otherwise, these groups that constitute the page Layout play an important role in the web product’s Desirability. Stardoll is a great example of a web product with Poor Sequential Flow.

image 

#2 ThreeDots: The jQuery Ellipsis Plugin

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.

As a result, the time has come for the jQuery ThreeDots plugin. ThreeDots goes beyond similar tools and lets you easily and smartly truncate text for when: text is too long, text doesn’t fit within the available space, you want to employ highly configurable and flexible ellipses within your web product.

image 

#1 Quick-UX. Quick Heuristics for User eXperience.

Quick-UX provides for the rapid, simple and quantifiable assessment of a product’s User Experience (UX), consisting of the core components of Usability (‘Can I use it?’), Usefulness (‘Should I use it?’), and Desirability (‘Do I want to use it?’). 

Quick-UX provides a sure-fire, rapid way to obtain concrete and comparable means by which to assess a single product or compare its strengths and weaknesses to other products.

Growing in popularity by leaps and bounds since its original posting in 2008, this posting has earned prime placement amongst other, more recent, articles that made this year, 2009, SUPERFINE.

image

 

theproductgroup_logo_200909_thumb75
balsamiq_logo2_thumb26

This year also saw the launch of The Product Group (sponsored by Balsamiq Studios) in NYC as an opportunity for Product People of all sorts and levels of experience to meet, interact, and network, in a laid-back, conversational environment.  I am certain 2010 will bring many more exciting gatherings, discoveries, and opportunities; and for those reasons, this too, also helped make 2009 for both Product People and The Product Guy, superfine!

Group_Pic_1_20091001 DSC05663 DSC05662 DSC05661

Happy Holidays!

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!