Reverse Nerd

Notes: Artificial Emotion

2010-09-23T16:29:00.000-07:00

Once, me and my friend Joey were drinking at Mogwai Bar, and at some point in the night, some guy introduced himself to Joey. Then on that spot, something about the guy struck me, like a distant memory, but not so much. Almost instantly, I asked him if he was from Elbi (Our slang for our alma mater, UP Los Banos). Because I was so sure that he studied there. There was this familiarity, almost like home feeling to his face that I have related him to Los Banos. Or was it because I was in Mogwai, and Mogwai reminds me of IC’s and that told my brain that everyone that was in Mogwai was from UP, or just from UPLB.

Now the guy, I forgot his name, kept evading the question. He said almost inaudibly that he’s from UP Diliman, which I did not buy because I swear we were in the same dormitory. I was so sure that even though he has told me countless of times that he was from Diliman, I just shrugged it off, and by the end of the night I was happy because I have met someone who apparently lived in the same dorm as me 7 years ago.

I was wrong of course. The day after, I saw that same guy walking around my street. Then it all came back to me, 15/18 years ago, age six to nine, we were playmates - he is a childhood friend. I think he was my bestfriend when I was a kid.

I swear I know you from somewhere

Now what struck me was how raw the emotions and how I correlated these three seemingly mutually exclusive entities. The bar, my college alma mater, and my childhood.These three, at some area or at some fortuitous time coincided in order for me to draw out a wrong conclusion - a false positive, if you may - but at that time was seemingly right.

If one is going to look at it in a black and white perspective, that is text book search. The idea of searching, in artificial intelligence, dictates that one ought to look for something if one does not have knowledge of it. The previous statement could be begging the question but it is true. One searches because one does not know. In the most simplistic sense, we go to Google for the most mundane of answers, some of which are near stupid but is still being searched because some just doesn’t know.

But with the case at hand, how the brain conducted its search is something that should be explored further. Because, all in all, the search was driven by a sequence of emotional patterns. The similarities between the three seemingly incoherent objects was summed up into one word: “home”.

The word “home”, if one looks at it in a blog-type perspective can be considered a “tag”. Something to index things with. If that is the case, is our brain just a huge database of tags? Memories indexed according to the emotion that one has perceived in a certain situation or episode?

See how I desensitized emotion? I used perceived instead of felt. Because it is true (for me, at least), emotion, I think, is the sixth sense. How one sees something is the same way how one perceives an emotion. Through a life long exposure to an object, a perceived object, that one has formulated a box of belief system, or an experience database. Our brain is basically a brainsized blog.

And that, ladies and gentlemen, will be my thesis, I think. I wager there is an artificial model in which we can perceive emotion. What it is or how it can be done, I don’t know yet. But I think I have a hunch. :)

Flickr Lithe - Flickr Instant Search with Whimsy

2010-09-20T01:51:00.001-07:00

[Link to FlickrLithe]

I've got to be honest, when YoutubeInstant creator Ferros A. got offered a job by Youtube CEO Chad Hurley himself, I instantly wanted to milk the proverbial employment cow of web-apps. I have realized that I can juggle post-grad and actual work, and these projects are good for flexing the practicing programmer muscle + entice jobs.

The moment I saw TagGalaxy some months ago was the moment that I fell in love with web APIs. And the moment I saw YoutubeInstant is the moment I wanted to make one myself. So it got me to some thinking and finally a "Hey I'd like to make an instant flickr but without the flash but still have the drama" epiphany. Thus, FlickrLithe.

Tag Galaxy. Such a wonderful concept

In a nutshell, FlickrLithe is just a simple Flickr skimmer with an image effect inspired by the Google Image Search which I mimicked and made a js bundle of. Three main points roamed around my head while conceptualizing the site: One, it has to have the instant sensibilities; Two, it has to be efficient; Lastly, it has to be whimsical, fun, and give the user a sense of discovery.

For the last point, I really wanted people to discover things and not point out what to do, so FlickrLithe has no texts what so ever to instruct the user. This I think is a risk that I took because according to Drawar on their article "Why I hate your webapp", a user has got to have a clear sense of what your site doing. But I really wanted to put the feeling of whimsy and discovery, make the user feel a kid again, that I did away with the instructions. Furthermore, for it to be fun, it should be easy to use, hopefully I have achieved it (once they've figured out what to do). I got inspired to create a bundle for the side tools I used, so perhaps after sometime release one.

Tell me that ain't whimsical and I will do a somersault

The instant feel was inspired by Feross A.'s YoutubeInstant. But while reading the JS source codes, I realized that there was no timeouts upon typing. I could not apply it on my app because even though flickr response fast, the idea of grabbing and loading 100 images per request is just too risky to process every type so I had to put a timeout.

what was I lookin for?

For the efficiency part, I had to use two images from Flickr, the square thumbnail and small version of the photo. The former is for faster load, the latter version is for the mouse over. A challenge becomes apparent when it mid-loading of images, the user decides that it wants to through another keyword, the new images load with the same time as the old keyword's images. Good thing I found a snippet at StackOverflow that can cancel the images:



//stop all image downloads

if(window.stop !== undefined) { window.stop(); }

else if(document.execCommand !== undefined) { document.execCommand("Stop", false); }

It's a really cool code but it also stops the background-image from loading upon search, so I opted to create a loader, which I later realized gave the sense of a flash application. Ehehe. I'm inspired to post a bundle on it as well.

So that's about it. Oh and I was supposed to do it in three hours, but the images used for the background took me three days. It made me feel like a kid again, drawing the BGs. :) Hopefully, users will like the site, and hopefully I get a job out of it. Ehehe.

Here's the git btw, feel free to check it out. [link]

Share

Sugata Mitra: The child-driven education

2010-09-16T04:27:00.000-07:00

How I wish I could go to one of these TED Talks. Really amazing thing about the Internet: a vehicle for change.

From ted.com:

Education scientist Sugata Mitra tackles one of the greatest problems of education -- the best teachers and schools don't exist where they're needed most. In a series of real-life experiments from New Delhi to South Africa to Italy, he gave kids self-supervised access to the web and saw results that could revolutionize how we think about teaching.

Sugata Mitra: The child-driven education | Video on TED.com

Google Image Search Effect

2010-09-15T13:50:00.000-07:00

Today I'm going to mimic the Google Image search result effect. Google has been sporting a new look on their image search results for quite some time now. Notice that when you hover over an image, it zooms, making it stand out from a blob of image search results. The texts are cut to the minimum as well, showing only the hovered image's info.

A lot of people noticed the change, they even think that Google was threatened because Bing was the first to implement the image-only results. And I think that the rumors are true. Bing has a very simple yet really sophisticated user-experience. Image-> Hover -> Info. Google thought it was a good idea, why not make it better. Competition -> innovation.

Now, the image effect might be too simple to warrant even the slightest of attention, but that is the beauty of a great design. However, I find it weird how easily stunned I was when I first experienced this effect.

Before I begin, here's the bundle with the corresponding demo:

Javascript (Complete) [link]
Javascript (Minified) [link]
Compressed [link]
Demo

I'll quickly go about the machinations behind the image zoom, then create one that can be used for other web sites (most of which are in the demo). Now, Google is currently running this feature within a <canvas> tag, a feature of HTML5, which, I am sad to say, I know little about. But, as all deconstructions go, we strip down the image search to the bare essentials, and appreciate the beaty of its simplicity. And even though I am bereft with HTML5 experience, div and span is staying in HTML5 (so I've heard), so we are still good to go.

The Search?

As we can see here, there are a few components to execute the effect: the timeout for checking if the user is hovering over an image long enough to warrant a zoom; the expansion of the image, scaling depending on the image's original size (if it's big, expand. Keep the original size if it is too risky to expand, like pixelation or the width-height diff is too high); and the addition of information for the image.

Furthermore, the effect is sensitive to offset. Position is key, because there are a lot of things happening if the image is partly hidden under the scroll, or the image is at the edge of the page.

Usage

For a demo with example, kindly checkout the example page I've prepared.

There are a few things that were very important in mimicking the google image search result effect, one is the scaling, another is the offset of the image. For the flickr images, the results were retrieved via the Flickr API.

Relevant Methods
popper.initialize(settings);
Settings refers to a js object containing the attributes needed. For example:

settings = {"padding" : 3,
      "maxDim" : 250,
      "infoHeight" : 100 }

The above example initializes all containers with the popphoto class. Refer to the demo for more info.

popper.grabFromFlickr(flickrcont, keywords, count)

Emo Much

This method accesses Flickr API [link] in a minute manner. I simply refer to a tag, get the needed information, and present it onto the page. The flickrcont refers to the ID of the container upon which we are to put the flickr grabs. keyword is an Array refering to the tags that are going to be used. count refers to the number of results to be shown. Kindly look at the demo for more information.

Below is a sample, as used in the Demo:

popper.grabFromFlickr('flickrload', ['love'], 20);

The container here has an id "flickrload", the tag used in the demo is "love", so we go about with ["love"], furthermore, the tag array is inclusive of one another (logic AND). Lastly, the "count" represents the number of items to be retrieved.

I actually did this partly because I'm going to make a Flickr Instant application tomorrow. And this is a module of it. Ehehe. Two birds, one stone, yes?

Conclusion
All in all we attempted to destroy a piece, take what is essential, and put it into the simplest atom possible. I believe we have achieved it here.

Lately, I'm starting to think that programming, or at least the programming sphere that I am moving towards, is a work of art. No, not with the design, but with the code. How the binaries and booleans go about a certain flow, the composition of methods and classes, as if to create a seemless organic exhibit. A great example would be the effect in Google's Image search result. As if in a museum, one would easily pass through this canvas, because you are not really in Google's area to marvel how an image zooms, but - as with museums - browse the inventory of static works.

But if one would care to look closely, as with everything, one would actually see that there is a mutually exclusive beauty.

---
The things written in this article are approximates on the application discussed above. I did not refer or read the code in the site, perhaps because of a deep respect for the developer, and maybe because the script is now completely minified and could be seizure inducing. I am reading the site through my own machinations of analyzing the components, and slowly studying the functionalities as they come along.

PS. If you find any bugs, please do tell me. Thanks!

Youtube Instant

2010-09-13T09:30:00.000-07:00

I am completely blown away by the simplicity of Youtube Instant. Completely. It is so simple, yet whimsy and really mindblowingly innovative.

In a nutshell, YTInstant.com is a website that automatically searches for a video without you pressing enter, like an intuitive video search.

This app is reminiscent, if not influenced, by Google Instant, Google's "realer"-time search. I call it "realer" time because the search happens as you type, not through a confirmation. (Though Google's already been searching on type-time, they (Google) essentially removed the "press enter element" from the equation).

Fun fact, the site was a bet between Feross Aboukhadijeh, the developer of www.ytinstant.com, and his roomate. He wagered that he can do this in an hour. Feross lost, because he did it in three. A good thing as well, because one hour development of the site would constitute alien lifeform on earth. Another fun fact, three hours is the average lab time for a college student here in the Philippines. Yes, I am implying that while a freshman would learn how to write "Hello World" in Turbo Pascal in three hours, Feross A. has developed an app that gave him a job offer in Youtube.

When you think about it, it is purely the perfect combination of the following components:

Ingredients:

Youtube API
Javascript Timeout
Perhaps a pinch of JQuery
CSS3
A pinch of Facebook & Twitter API

The best thing about the app is the youtube API, it offers a lot into the table. I'd wager that the developer, Feross Aboukhadijeh (@freethefeross) need only to connect to the API, without any DB Setup or what not, splash a script here and there and voila: a quaint application that impressed Youtube CEO Chad Hurley enough to offer him a job even when he's still studying.

Components:
Youtube API [link]
The youtube API is an ingenious web API that let's you in Youtube's massive servers for the delight of your very own webapp. Most of the information is in the link above, but for discussion's sake, the site could have accessed this URL via the jquery $.get() method for Youtube's search API [link]:

$.get("http://gdata.youtube.com/feeds/api/videos" 
  {q : query,
  "orderby" : published,
  "start-index" : 1,
  "max-results" : 5,
  "v" : 2}, "xml");

On this code, query represents the text input by the user; orderby denotes the datetime, start-index is the start of the search (eg. start-index would be equal to 21 if you are to search for results 21-25), max-results is the max number of items to show, and v refers to the version of the API.

This will return an XML response that is too long for viewing here, but you can see the response here. The site might have opted to use a JSON format aswell, opting for the ease of use of $.getJSON, for one to activate this, add the attribute

"format": 5

Feross has experienced the tightness of Google with the frequency of the API use. With that, a word of caution: if you are testing a Google Subsidiary API, do be mindful on how often you test the application. I myself am a test-trigger-happy developer, so I was not mindful of how many times I connect to Google. The consequence was my total cut-off from google, making me halt most of my API connectivity tests. Google does this to, according to them, prevent abuse. So at least widen the intervals in which you test.

Another component used in the would be the JS playback APIs, but I'll let you discover it on your own. :)

Javascript Timeout

Yes I searched for Jewel's Who Will Save Your Soul. I am a sucker for the 90s. Such a raw era for music!

This feature has been around for a long time, only now that AJAX is predominant in the web has it become more important than ever. What timeout does is basically to setup a gap between tasks, to make time if ever a user changes mind or overrides an upcoming activity.

For example, in the case of Youtube Instant, the timeout is ever present in the typing of the youtube search query. Perhaps it could have gone something like:

var timeout = null;
$tf.keydown(function(){
  if (timeout) clearTimeout(timeout)
  timeout = setTimeout("showvideo()", 500);
});

function showvideo() {
  var query = $tf.val();
 searchYoutube(query);
}

With the tf referencing the textfield where the user typed the search, and timeout as the handler of the timeout object. the searchYoutube function is the function containing the $.get() method earlier.

JQuery + CSS3
The JQuery & CSS3 is more or less the icing on the YTInstant cake. The effects such as the smooth slidedown ($.slideDown()) and the passives ($.addClass(), etc) are all in play in the app.

Design
Design-wise, the cleanliness of the site is marvelous in itself. The developer really let the application speak for itself. The web is a huge compilation of websites that are essentially doing the same things, so they need to standout in their design, just like advertising: a make-up is just some goo with fish scales until Halle Berry holds it on a commercial. Translate it to a website: the more pimped up a facade, the more generic the functionalities.

What I marvelled more about the site are the little things. The fact that Feross used a textualized version of the Youtube logo for (proprietory reasons? j/k) loading speed reasons perhaps (I heard the site initially had a Slashdot effect episode due to the deluge of hits). Also, the whimsy Feross added that I particularly liked was the custom font. It added more humanity to the site, more personal.

Yes I was listening to Eddie Izzard while writing this. I love him.

Recommendations
Given that the site is only 3 days old (with an 1M+ hits already!), there are still parts of the site that are with line guides. For example the one on the upper left part of the pause and play button.

Also, it would be great if there is a more social function to the YTInstant. Like a share button of somesort. I'm not sure about the legalities around it though.

Conclusion
All in all, Youtube Instant is a testament that, indeed, simplicity is key. K.I.S.S. could not have been summed up by any other site than this. I am smelling a lot of clones of this one in the coming days. I, myself, am tempted to do it.

But, a word of challenge to those who are tempted as I. Please post your completion time. Wager that you (and I) can do a similar app in an hour.

Let the cloning begin!

---
The things written in this article are approximates on the application discussed above. I did not refer or read the code in the site, perhaps because of a deep respect for the developer, and maybe because the script is now completely minified and could be seizure inducing. I am reading the site through my own machinations of analyzing the components, and slowly studying the functionalities as they come along.

Share

Hello World

2010-09-12T08:46:00.000-07:00

Hi! I'm Rapi and after taking a Jung Personality Test 5 years ago, I was told by an arbitrary and impersonal computer program that I was of the "Architect" archetype. It said that I analyze things and plan on making them better. Apparently, it's true. And I am always mesmerized by what these nerds in the internet are cooking.

This fascination always makes me want to create a new concept for the web, but whenever I get to think about what new thing a Filipino like me could do, something I would initially think as mindblowing and completely innovative, it's always already done by the west (or Australia). Not that I loath the west(or Australia), it's just that it's hard competing with giants if you're but a mid20 web enthusiast. Hehe. I'm not bitter at all, I keep trying. :)

Luckily, my other love is analyzing these widgets/systems, so that's what I am here to do. Deconstructing/reversing what these giants do and in the process, I hope I could create a new concept on my own. Cheers!

Share