Source: Techcrunch

1. Get your domain and e-mail working: “When you register your name, you should register the misspellings as a .com, you should register the primary and the .net or .org or it will be sold back to you for thousands of dollars later…”
Approximate cost: $160

2. Produce some mock-ups: “You want to show the key functionality that you’re trying to bring to the marketplace…You just need three sort of pivotal experience screens that will demonstrate your core idea or three…mock-ups of the physical product…you’re trying to capture how it will be done.”
Approximate cost: Free

3. Logo and materials: “Get a good looking logo so at least you look legitimate…” says Ressi who recommends 99designs. After you pick the winning design, “you contact him [the designer] offline, you say I want you to do my business cards, I want you to do my Power Point backup and I want you to do my mock-ups. Now for not so much money you’re getting everything you need to appear somewhat legitimate to the world.”
Approximate cost: $750

4. Pitch deck: “You always want to have a pitch deck, even if it’s bad…you need something to start with to go on that refining path.”
Approximate cost: Free

5. Create a landing page: Ressi recommends Unbounce.com, which is a drag and drop landing page.
Approximate cost: $60/year after free trial

6. Create a company blog: “I recommend doing blog.yourcompany.com…it keeps it in a consistent place as your company scales…You want to be posting on your blog, at this phase, one or two times a week.”
Approximate cost: Free

7. Test marketing: “First thing I strongly recommend is immediately test marketing using Facebook and Google ads. Not so much for the value of driving people to your bullsh*t website, but to understand what messages resonate with your target audience and then so you can then refine your marketing messages.”
Approximate cost: $250

8. Survey customers: “So now you’ve got these leads coming in, survey them… you want to understand, the demographics, who are they. You want to clarify what the pain points, like why did they sign up, were they just stupid and duped into it or did they really feel that something was valuable and what was it that they find most valuable.”
Approximate cost: $200

9. Create a sticky note roadmap: Write all of your company’s features on separate sticky notes and then group them in logical buckets. “What I do, is I put on the left side I put the most important group and then at the top, the most important features. So on the top left is the most important thing I have to do…When you have that roadmap in front of you, you can sort of visualize the one thing that flows through everything and usually there’s an unknown around that.”
Approximate cost: $100

10. Ghetto launch. Test the unknown. “Whatever you can find that can test out your core stuff that’s free…Identify the metrics, collect the data and validate…”
Approximate cost: $250

Below are two more Founder Institute videos, the first one is on establishing your startup’s vision and the second explores the challenge of researching your idea. If you would like to officially enroll in the Ressi academy (aka his startup accelerator, Founder Institute) you can apply for one of eight locations online.

Keeping up with Game Dynamics!!!

Appointment Dynamic
is a dynamic in which to succeed, one must return at a predefined time to take a predetermined action.
For example: Happy hour at a local bar or Farmville’s crops will wilt if not attended on time.

Influence and Status
is the dynamic of the ability of one player to modify the behavior of another’s actions through social pressure.
For example: A school’s report card has “A” vs “F” that is intended to cause competitive behaviors.

Progression Dynamic
is a dynamic in which success is granularly displayed and measured through the process of completing itemized tasks.
For example: In LinkedIn the “85% complete” progress bar in profiles causes the users to strive for that perfect 100% completed task.

Communal Discovery
is the dynamic wherein an entire community is rallied to work together to solve a challenge.
For example: Digg.com uses the community to bubble up the best stories.

With the absence of table-less designs, creating equally proportionate “boxes” in HTML can be daunting. So, with the help of a couple of CSS tricks and jQuery, I’ll demostrate a cross-browser method of creating equally tall and wide boxes.

before:

after:

The new jQuery $.equalHeights([widths]) Plugin

$.fn.equalHeights = function(widths) {
   $(this).each(function(){
      var tallest = 0;
      var widest = 0;
      $(this).children().each(function(i){
         if ($(this).height() > tallest) { tallest = $(this).height(); }
         if (widths) if ($(this).width() > widest) { widest = $(this).width(); }
      });
   
   // for ie6, set height since min-height isn't supported
   if ($.browser.msie && $.browser.version == 6.0) {
      $(this).children().css({'height': tallest}); 
      if (widths) $(this).children().css({'width': widest}); 
   }
   
      $(this).children().css({'min-height': tallest});
      if (widths) $(this).children().css({'min-width': widest});
   });
   return this;
};

This plugin has been changed from the original to include the optional [widths] paramter instead of the previous [px]. You can now pass true if you need the plugin to apply the largest width across all children.

The JavaScript

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js">
</script>
<script type="text/javascript">
   $(document).ready(function(){
      $(".boxes").equalHeights(true);
});
</script>

Here I pass true as an argument to ensure the plugin sets the widest min-width across all boxes.

The CSS

<style type="text/css">
.box {background:#39F; margin:0.5em;}
.boxes {background:#eee;}
.iblock{
   display: -moz-inline-stack;
   display: inline-block;
   vertical-align: top;
   zoom: 1;
   *display: inline;
}
</style>

Using the .iblock class is a great trick for getting boxes to look and behave properly throughout the most popular browsers- IE6 to the latest Firefox. I discuss it further here.

The Markup

<div class="boxes">
   <div class="box iblock">Hello</div>
   <div class="box iblock"><p>Hello</p><p>World. How are you?</p></div>
   <div class="box iblock">Hello</div>
   <div class="box iblock">Hello</div>
</div>

This chunk of HTML shows the basic markup for the boxes in this demo.

The Full HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Boxes and Grids</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js">
</script>
<script type="text/javascript">
   $(document).ready(function(){
      $(".boxes").equalHeights(true);
});

$.fn.equalHeights = function(widths) {
   $(this).each(function(){
      var tallest = 0;
      var widest = 0;
      $(this).children().each(function(i){
         if ($(this).height() > tallest) { tallest = $(this).height(); }
         if (widths) if ($(this).width() > widest) { widest = $(this).width(); }
      });
   
   // for ie6, set height since min-height isn't supported
   if ($.browser.msie && $.browser.version == 6.0) {
      $(this).children().css({'height': tallest}); 
      if (widths) $(this).children().css({'width': widest}); 
   }
   
      $(this).children().css({'min-height': tallest});
      if (widths) $(this).children().css({'min-width': widest});
   });
   return this;
};
</script>
<style type="text/css">
   .box {background:#39F; margin:0.5em;}
   .boxes {background:#eee;}
   .iblock{
      display: -moz-inline-stack;
      display: inline-block;
      vertical-align: top;
      zoom: 1;
      *display: inline;
   }
</style>
</head>
<body>
<div class="boxes">
   <div class="box iblock">Hello</div>
   <div class="box iblock"><p>Hello</p><p>World. How are you?</p></div>
   <div class="box iblock">Hello</div>
   <div class="box iblock">Hello</div>
</div>
</body>
</html>

Here’s a simple method to iterate over an object for its attribute names. To get 1st level keys in an JSON object:

for(var key in json){
     /* useful code here */     
     console.log(key);
}

or you can use hasOwnProperty like

for (var key in json) {
     if (json.hasOwnProperty(key)) {
          /* useful code here */
          console.log(key);
      }
}

Declared Arguments

Usually, we provide an argument list when declaring a JavaScript function. Therefore, creating a function that checks for the existence of an argument is pretty simple. For example:

function popup (url, framename, attr) {
    if (!url) url = '';
    if (!framename) framename = 'MyPopup';   
    if (!attr) attr = "width=800px,height=600px";
   
    window.open(url, framename, attr);   
    return false;
};

Unlimited Arguments

However, in some cases you might want to accept an unknown number of arguments. For this case, JavaScript provides an array-like object corresponding to the arguments passed to the function called arguments. For Example:

function unlimited (){
    for( var i = 0; i < arguments.length; i++ ) {
        alert("Argument [" + i + "]: " + arguments[i]);
    }    
}

This is really inspiring.

Creating a successful multi-player, community-driven, game requires that at least four typical player archetypes have a place or role in the game. These four types of players need to feel comfortable in order for the natural evolution of community to continue within the game.

Think of your favorite MMO or MMORPG games and see if you can play as any of these four archetypes:

The “Alpha Male/Female”
Typically controls the action by either winning every challenge or leading the “team”

The “Socializer”
Typically acts like the glue in groups and organizes events within the game play.

The “Collector”
Typically likes to collect “things” within the game environment. Could also strive for most points or wealth.

The “Observer”
Typically plays the explorer role. Will usually observe others play while keeping a distant, safe, position.

World Population

Interesting perspective on how to manage the ever-growing human population. I too remember when my teacher told me the world’s population had reached the 3 billion mark. I can only imagine the strain our world will face if those numbers are meant to double every couple years.

What stands out in Rosling’s presentation is that “child survival” is the key to throttling the population growth.

See an example on using media queries to style content for different screen sizes.

Oldy but goodie…

Just finished working on the new release of JSL (JavaScript Loader). Please take a look and send me any bugs :-)

Happy Mommy’s Day!!! Love Andres and Kristina

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

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.