jpablobr

Kinect + Javascript hack for web interfaces

November 30th, 2010 § 1 Comment

After the following tweet from a friend of mine, I got curious and decided to check what all the fuss was about.

Check out the video it’s really amazing:

Developed by MIT Media Lab – Fluid Interfaces Group, Basically DepthJS is a web browser extension that allows any any web page to interact with Microsoft Kinect via Javascript. The video shows the potential that DepthJS has for developers and is open source, and available to download at GitHub. DepthJS has a huge amount of possibilities for online interfaces. With no need for any pointer device to navigate around an interface, it may even evolve into a multitouch remote control plugin for our home theater PCs.

Let’s hope that the hacking community picks up the work and continues to evolve what could be an everyday part of the way we interact with web applications in the future.

DepthJS is open source under the AGPL license. github.com/doug/depthjs

Created by (in alphabetical order)
Aaron Zinman - web.media.mit.edu/~azinman
Doug Fritz - dougfritz.com
Greg Elliott - gregtelliott.com
Roy Shilkrot - morethantechnical.com/

Some JavaScript Good Parts

November 21st, 2010 § Leave a Comment

Many people don’t think of JavaScript as being a powerful language beyond image roll-overs and flashy effects. Therefore, in this post, I just want to mention some JavaScript object oriented features that makes it just as powerful as many the other OOP languages. For example:

Encapsulation – Support for method calls on a JavaScript object as a member of a Class.
Polymorphism – The ability for two classes to respond to the same (collection of) methods.
Inheritance – The ability to define the behaviour of one object in terms of another by sub-classing.

These are some of the most important features that help OOP languages to build big/modular/robust applications.

But first, is important to make a clear distinction, JavaScript is not a full-blown OOP (Object-Oriented Programming) language, such as Java. JavaScript is a object-based (or prototype-based) language which is quite different. Everything you create in JavaScript inherits from the built-in Object class. It is that class that contains the prototype method that opens up the world of prototype-based programming (and therefore flexibility).

This isn’t the standard behaviour of an object-oriented language where objects should be statically typed, as should strings and other data-types. However, whether it’s object-based OR object-oriented, the object functionality in JavaScript is powerful and under-appreciated (mainly because JavaScript misunderstanding/ignorance).

Pointing out all the reasons that makes JavaScript a powerful language and explaining them is obviously out of the scope of this post. That’s a topic for a whole book, and actually that’s what I will like to point you at! some good resources!

Some videos:

The YUI Theatre is really awesome!

Finally, this simple JavaScript “class” I find it useful for reminding me how to program in an “object-oriented” way:

var MyClass = (function () {
  // private static
  var fooBar = 1;

  // constructor
  var cls = function () {
    // private
    var id = fooBar++;
    var name = 'baz';

    // public (this instance only)
    this.get_id = function () { return id; };
    this.get_name = function () { return name; };
    this.set_name = function (value) {
      if (typeof value != 'qux')
        throw 'Name must be a string';
      if (value.length < 2 || value.length > 20)
        throw 'Name must be 2-20 characters long.';
      name = value;
    };
  };

  // public static
  cls.get_nextId = function () {
    return nextId;
  };

  // public (shared across instances)
  cls.prototype = {
    announce: function () {
      console.log('Hi there! My id is ' +
            this.get_id() +
            ' and my name is "' +
            this.get_name() +
            '"!\r\n' +
            'The next fellow\'s id will be ' +
            MyClass.get_nextId() +
            '!');
    }
  };

  return cls;
})();

The previous code can also be found on my github gists.

One final thing I believe makes JavaScript extremely powerful is that besides its object model features, it also permits functional programming through its higher-order function programming capabilities, allowing closures and so forth (Which most OOP languages do not support).

I hope you guys find this useful as a resource in case any of you eventually would like to become a JavaScript ninja!

The game layer on top of the world

November 14th, 2010 § Leave a Comment

I just want to mention this interesting presentation on TED talks where the presenter explains why he believes that the last decade was the decade of “Social” and the next decade would be about “Games”.

Seth Priebatsch: The game layer on top of the w…, posted with vodpod

At first I was confused about what he meant by a gaming layer on top of the world. He’s really talking about sets of motivational systems commonly employed (with great success) in games.

The RPG concept of ‘leveling up’ and gaining new skills is already an idealized analogy to the life of an individual. In a sense, life is already a ‘role playing game’. It’s just that games can make it so much more fun because there are unambiguous metrics and awards showing our progress and none of the bad or boring parts of real life.

Regardless, he has some powerful points. Games use very specific methods of motivating us that we might be able to take back into real-world contexts. Marketing is already quite good at manipulating some these systems as it was clear from some of the examples in the talk.

I also agree that education could probably do better at its motivating game: grades.

Finally, I would like to share this other TED presentation form Jesse Schello which actually was labeled as one of the most disturbing presentation ever: Our Tech Nightmare (“Skinner Box”) DICE 2010. There he talks about how he imagines the future and also mentions very interesting facts about the gaming industry in general.

DICE 2010: “Design Outside the Box” Presentation – Carnegie Mellon University Professor, Jesse Schell, dives into a world of game development which will emerge from the popular “Facebook Games” era.

DICE 2010: “Design Outside the Box” Presentatio…, posted with vodpod

JSONP: JSON With Padding

November 8th, 2010 § Leave a Comment

JSONP allows you to make an HTTP request outside your own domain, which enables consuming Web Services from JavaScript code. It relies on a JS fluke (some may call it exploit): while XMLHttpRequest is blocked from making external requests, there’s no such limit on <script> elements. What JSONP does is add a <script src=> element to the DOM, with the external URL as the SRC target.

To serve JSONP simply return the JSON data inside a function. e.g., this JSON:

{ "name" : "value"}

Becomes:

jsonp_function({ "name" : "value"})

The reason is that wrapping JSON in a function means that it is actually code that will run inside the created by the JSONP client, so it needs to be executable code rather than plain JSON data.

jsonp_function is provided by the calling client, usually in the ‘callback’ parameter. So, a query like this:

get_jsonp?callback=requestedjsonp

Should return:

requestedjsonp({ "name" : "value"})

This is actually what JSONP (JSON with Padding) is: JSON data wrapped in a function call.

It seems like an Exploit

Basically, it seems to be exploiting what seems to be a security hole in the browser… Plus another security concern is that you’re basically fully trusting the remote site with a permission to execute arbitrary JavaScript on your page. There’s absolutely zero validation you can do. That’s fine if you’re talking to Flickr, but a definite no-go in many mash-up scenarios.

To resume, – despite the security concerns – now with JSONP you have a mechanism similar to the XMLHttpRequest method that allows you to request data from a remote server and it is not restricted to the origin domain. If you are planning on using JSONP remember that the service that you want to communicate with also must understand the protocol and properly handle the callback wrapping of the data.

Resources:

Mapping and Reducing

November 1st, 2010 § 1 Comment

Now days with all these document oriented databases meant to solve scaling issues and to provide new solutions to many problems the web is currently facing. This term “Map/Reduce” for querying “key/value” stores – which the title pretty much already explains – is becoming much more popular…

However, this concept is actually not all that new;

From the abstract of Google’s MapReduce research publication page:

MapReduce is a programming model and an associated implementation for processing and generating large data sets. Users specify a map function that processes a key/value pair to generate a set of intermediate key/value pairs, and a reduce function that merges all intermediate values associated with the same intermediate key.

One of the main advantage of MapReduce is that since it’s based from the functional programming model, the map and reduce steps each do not have any side-effects (the state and results from each subsection of a map process does not depend on another), so the data set being mapped and reduced can each be separated over multiple processing nodes.

In order to understand it much better, I will use the following examples from the CouchDB Introduction guide;

http://wiki.apache.org/couchdb/Introduction_to_CouchDB_views

Map Functions

Here is the simplest example of a map function:

function(doc) {
  emit(null, doc);
}

Here is a slightly more complex example of a function that defines a CouchDB view on values computed from customer documents:

function(doc) {
  if (doc.Type == "customer") {
    emit(doc.LastName, {FirstName: doc.FirstName, Address: doc.Address});
    emit(doc.FirstName, {LastName: doc.LastName, Address: doc.Address});
  }
}

Here is an example of the results of such a view:

{
   "total_rows":4,
   "offset":0,
   "rows":
   [
     {
       "id":"64ACF01B05F53ACFEC48C062A5D01D89",
       "key":"Katz",
       "value":{"FirstName":"Damien", "Address":"2407 Sawyer drive, Charlotte NC"}
     },
     {
       "id":"64ACF01B05F53ACFEC48C062A5D01D89",
       "key":"Damien",
       "value":{"LastName":"Katz", "Address":"2407 Sawyer drive, Charlotte NC"}
     },
     {
       "id":"5D01D8964ACF01B05F53ACFEC48C062A",
       "key":"Kerr",
       "value":{"FirstName":"Wayne", "Address":"123 Fake st., such and such"}
     },
     {
       "id":"5D01D8964ACF01B05F53ACFEC48C062A",
       "key":"Wayne",
       "value":{"LastName":"Kerr", "Address":"123 Fake st., such and such"}
     },
   ]
}

Reduce Functions

Here is an example of a reduce function:

function (key, values, rereduce) {
    return sum(values);
}

Reduce functions are passed three arguments in the order key, values and rereduce

Reduce functions must handle two cases:

1. When rereduce is false:

key will be an array whose elements are arrays of the form [key,id], where key is a key emitted by the map function and id is that of the document from which the key was generated.
values will be an array of the values emitted for the respective elements in keys
i.e. reduce([ [key1,id1], [key2,id2], [key3,id3] ], [value1,value2,value3], false)
2. When rereduce is true:

key will be null
values will be an array of values returned by previous calls to the reduce function
i.e. reduce(null, [intermediate1,intermediate2,intermediate3], true)
Reduce functions should return a single value, suitable for both the value field of the final view and as a member of the values array passed to the reduce function.

Often, reduce functions can be written to handle rereduce calls without any extra code, like the summation function above. In that case, the rereduce argument can be ignored and in JavaScript, it can be omitted from the function definition entirely.

These are just the basics, but as you can tell pretty much is just first “map/filter” your data, then you “reduce/consolidate” it.

Resources:

Practical Map-Reduce: Forwarding and Collecting (The comic is very good!)

Can Your Programming Language Do This?

Introduction to CouchDB Views

Amazon Web Services Free Usage Tier

October 24th, 2010 § Leave a Comment

This is great news for web developers!
To help new AWS customers get started in the cloud, AWS is introducing a new free usage tier. Beginning November 1, new AWS customers will be able to run a free Amazon EC2 Micro Instance for a year, while also leveraging a new free usage tier for Amazon S3, Amazon Elastic Block Store, Amazon Elastic Load Balancing, and AWS data transfer. AWS’s free usage tier can be used for anything you want to run in the cloud: launch new applications, test existing applications in the cloud, or simply gain hands-on experience with AWS.

This link has some of the highlights of AWS’s new free usage tiers. All are available for one year (except Amazon SimpleDB, SQS, and SNS which are free indefinite

BUT WHAT ARE THIS AMAZON WEB SERVICES (AWS) ANYWAY?

Amazon Web Services provides IT infrastructure services including Elastic Compute Cloud (EC2), Simple Storage (S3), and Elastic MapReduce.

Amazon Elastic Compute Cloud (EC2)

Amazon Elastic Compute Cloud (Amazon EC2) is a Web service that enables you to launch and manage Linux/UNIX and Windows server instances in Amazon’s data centers. Amazon Elastic Compute Cloud (Amazon EC2) is a Web service that provides resizable compute capacity in the cloud. It is designed to make Web-scale computing easier for developers. For a more in-depth introduction to EC2, see Introduction to Amazon Elastic Compute Cloud.

Amazon Elastic Block Store (EBS)

Amazon Elastic Block Store (Amazon EBS) provides block level storage volumes for use with Amazon EC2 instances. Amazon EBS volumes are off-instance storage that persists independently from the life of an instance. Amazon Elastic Block Store provides highly available, highly reliable storage volumes that can be attached to a running Amazon EC2 instance and exposed as a device within the instance. Click here for more information on EBS.

Amazon Simple Storage Service (S3))

Amazon Simple Storage Service (Amazon S3) is storage for the internet. You can use Amazon S3 to store and retrieve any amount of data at any time, from anywhere on the web. You can accomplish these tasks using the AWS Management Console. For a more in-depth introduction to S3, see Introduction to Simple Storage Service.

SETTING UP AN AMAZON WEB SERVICE (AWS) ACCOUNT

You will use the same Amazon account username and password that you use to shop for books, electronics, etc.

Accessing an AWS account
Open the following link in a new window or tab: http://aws.amazon.com
Sign up for an AWS account using the yellow button on the upper right.
Click Security Credentials
For “My e-mail address is”, enter the the email address you use to access your Amazon account.
Select “I am an returning user and my password is:”
Enter your “Amazon password.”
Click Sign in using our secure server. You are now logged into the Security Credentials Page.

FIREFOX S3 ORGANIZER PLUGIN

The Firefox S3 Organizer Extension is great in order to help organize/manage/store your files on Amazon S3.

INSTALL S3 FIREFOX ORGANIZER PLUGIN

Follow the link to the website.
Click Add to Firefox.
Click Accept and Install.
Click Install.
Restart Firefox.
Verify installation by clicking Tools and selecting S3 Organizer.

Entering your credentials into the S3 Organizer

Click Tools and select S3 Organizer
At the top left, click Manage Accounts.
For the “Account Name”, enter “eScience Test Account”. The “Account Name” can be anything you want – it’s just an identifier to S3 Organizer if you use it to access more than one S3 account.
The “Access key” and “Secret key” are available on the AWS “Security Credentials” page discussed previously.
Verify that you can now see the bucket you created in the Amazon S3 guide under “Remote View.”

You can now drag files to and from your S3 buckets just like dragging files between folders on your computer.

Create a unique S3 bucket using S3 Organizer

In S3 Organizer:

At the upper right, click the blue folder. The tooltip will say “Create Bucket/Directory”
Enter a name of the form escience.washington.edu.<keypair_name>

Now, you will copy your private key file into your newly created S3 bucket.

Transfer Files between S3 and your local workstation

Your private key file is located in your default download directory. (You should hace created and downloaded your Key Pair while going through the Amazon EC2 Getting Started Guide). The file will be named <keypair_name>.pem
Drag your private key file ending in “.pem” from you local workstation into your S3 bucket. The transfer should take a very short amount of time. You have now copied data into S3.

This is really just a pain brush review of it basic features… But at least it would get you started

Resources:

http://aws.amazon.com/free/

http://www.escience.washington.edu/content/getting-started-amazon-web-services

General Amazon Web Services (AWS) information:

Amazon Elastic Compute Cloud (EC2) information:

Amazon Simple Storage Service (S3) information:

Favorite web application design/UI

October 19th, 2010 § Leave a Comment

More and more applications these days are migrating to the Web. Application interface design is, at its core, Web design; however, its focus is mainly on function. Web apps must offer simple, intuitive and responsive user interfaces that let their users get things done with less effort and time.

But some times is hard to find good inspiration. That is why I just want to mention some of the apps that usually inspire me. I even have a directory on my bookmarks just for this purpose. (this are just some of them….)

And these sites are good for searching other sites!

http://alpha.patterntap.com/collections/Tabs (this one let you search by patterns)

http://spacecollective.org/projects/The-Total-Library (nice collection of cool projects)

http://cloudomatic.com/ (collection of cloud apps)

After looking at these websites, hopefully, you’ve found a few new techniques that will be useful for you as a web developer.

Effective web design doesn’t have to be colorful and pretty — it needs to be clear and intuitive. Make sure you help your visitors to understand the benefits of your web-site and offer them an easy way to explore and use your site.

Cheers\nPablo

Web apps made by hackers

October 12th, 2010 § Leave a Comment

From the Hacker Dictionary

hacker: [originally, someone who makes furniture with an axe] n. 1. A person who enjoys exploring the details of programmable systems and how to stretch their capabilities, as opposed to most users, who prefer to learn only the minimum necessary. 2. One who programs enthusiastically (even obsessively) or who enjoys programming rather than just theorizing about programming. 3. A person capable of appreciating hack value. 4. A person who is good at programming quickly. 5. An expert at a particular program, or one who frequently does work using it or on it; as in `a UNIX hacker’. (Definitions 1 through 5 are correlated, and people who fit them congregate.) 6. An expert or enthusiast of any kind. One might be an astronomy hacker, for example. 7. One who enjoys the intellectual challenge of creatively overcoming or circumventing limitations. 8. [deprecated] A malicious meddler who tries to discover sensitive information by poking around. Hence `password hacker’, `network hacker’. See cracker.

I personally like definition # 7:
One who enjoys the intellectual challenge of creatively overcoming or circumventing limitations.

One of the things that excites me the most about web development, is how easy (if you have the knowledge) is to make and deploy web applications… To me, it just feels like a lot of power in there! However, being able to profit out of our applications is not that simple, and usually requires much more work and knowledge.

It is not just about the good idea!

That’s why I really admire when these guys (or gals) are able to make money out of their effort… therefore, I want to mention some of the profitable web apps I know were done and owned by hackers!

http://37signals.com/
https://github.com/
http://dabbledb.com/
http://www.weebly.com/
http://www.shelfluv.com/
http://xpenser.com/
http://mmo-mumble.com/
http://www.sproutvideo.com/
http://www.boostcam.com/
http://www.physicalfix.com/
http://www.w3counter.com/
http://www.w3roi.com/
http://letsfreckle.com/
http://lighthouseapp.com/
http://tenderapp.com/
http://nicetranslator.com/
http://builtwith.com/
http://codeboff.in/
http://www.shopify.com/
http://improffice.com/
https://www.mailfinch.com/
http://www.seeyourhotel.com/
http://trackjumper.com/
http://www.scriblink.com/
http://vendder.com/
http://www.leadnuke.com/
http://www.ratemystudentrental.com/

These are also companies that offer some type of service rather than just web development in general! Obviously there are much more, but I tried to mention the more web 2.0 ones!

Actually, I believe that many of the web 2.0 ideas have come from such companies. Companies that are always pushing harder to new ideas which many times end up revolutionizing whole industries!

Like:

Youtube
Facebook
Twitter
Digg
and most of the social media driven websites!

If you know about more, and would like to share it, please post it on a comment!

Cheers\nPablo

ExtJS/Rails CRUD Application in 7 Minutes

October 5th, 2010 § Leave a Comment

I’ve been interested in the ExtJS framework for a while, and after a bit of research found the following simple tutorial:

ExtJS/Rails CRUD Application in 7 Minutes

It is very straight forward if you do have some Ruby on Rails experience. But it may not be so intuitive for the people new to both technologies. Therefore, I uploaded the app I did from following the instructions.

I uploaded it to my Github account to the following branch:

http://github.com/jpablobr/jpablobr-dot-com-notes/tree/Netzke-hello-world

Also, here are more demos and some source code as well:

http://demo.netzke.org/

I believe ExtJS has many advance features that make working with databases (or different type of resources) much simple and cleaner.

Hope someone finds this useful!

Cheers\nPablo

JavaScript frameworks, design patterns, organization, or ?

October 3rd, 2010 § Leave a Comment

jQuery is definitely (at least for now) basically a front-end framework… it’s like, it was all nice and pretty for the apps we all start working on, but when we start to develop more advance applications it starts to get messy.

I mean, for what it is meant to be, it’s great! But what can we do when we need a more robust framework? When you have an application with many different pages with different type of JavaScript logic? How do you keep all this organised? How to prevent the famous – hard to debug – spaghetti code?

I mentioned jQuery, but it’s really any js code in general. We will start finding that as lines upon lines begin to pile up, it gets harder to manage the script files or find what we are looking for.

Here are some suggestions:

Patterns
Namespacing your JavaScript (file organization)
Avoid including any javascript with the HTML:
Learn about more scalable frameworks such as:
- ExtJS
- JavascriptMVC
- Mootools
- YUI
- Dojo
- Sprockets
- etc…
Follow conventions (don’t be an outsider!)

These are just some suggestions, and I don’t claim to be an expert on all of them. However, I do feel that having at least some basic knowledge of the tools we have available as a developers is extremely useful in order to make our applications much more robust, modular, semantic, etc…

I only gloss – pretty much only mentioned – what are some of the options out there… Obviously to cover all this topics in greater detail you can even write a book.

Which actually there are plenty!, and I will actually recommend this one: