My Blog

55444 Search for Chrome

Got a week’s break, and at least one night had to be some night of hacking. I was going through the 55444 Developers group on Facebook and saw that a Chrome extension emulator could help some developers in testing of applications. So I gave myself the job of developing my first Chrome extension plugin.

These extensions, of course, cannot run any sort of server side scripts, and need to be built entirely upon JavaScript. With this plugin using a third-party server application, cross-domain AJAX requests had to be made. Testing on the browser first never seemed to be working, and I found out from the console logs that Chrome blocks all cross-domain AJAX requests for security reasons. Took me a while to realize that I unless I package it into a plugin with appropriate domain permissions, testing would never work.

After that and creating icons, and arranging some CSS, it looked good to be published. So I logged into the Chrome Store Developer Dashboard and went through the whole process and at the end of it realized that there was $5 registration fee for publishing the app! Ah, why. I just left it at that. Not like I plan to develop any more Chrome extensions.

This, however, won’t go of waste. You can install the search plugin by downloading the packaged .crx file from this link here. Then go to chrome://extensions on your browser, and drag and drop the downloaded crx file into the Chrome browser.

I’ve open-sourced it on GitHub with a GPLv2 License. I’m no expert with these Open Source licenses, but I care about sharing improvements. :D

Comment

Yet Another WordPress Hack

I do not very well remember how much I’ve screwed around with WordPress and its plugins, but here is one of my latest mods to an existing plugin that I believe will be very useful for users wanting to import all photos from their photo albums of a particular Facebook page. I had been searching around for plugins, and could never find one that could actually do the job. Either if a plugin could display all photos from all albums it didn’t have the feature to read from a Facebook page and was rather limited to just Facebook users, like the Fotobook plugin. Or if it could read from pages, then I had to specify each and every album ID separately in the shortcode, and add as many shortcodes as there are albums in that Facebook page. And moreover, updates in the gallery page to include the new shortcodes for newly added albums on Facebook had to be done manually. It fit in only if I wanted to display selected albums. But then I had to just display all of them, and there were more than ten albums that could possibly keep increasing every month or sooner.

And fetching the album IDs of each of those ten albums was trouble again. Say you open an album and read the URL on the address bar. You would see something like this: https://www.facebook.com/media/set/?set=a.10151028573106217.485132.286244581216&type=3. The number in between the first dot after ‘a’ and in between second dot becomes your album ID. And would I like to manually read each of those album IDs, and that too every time a new album is added? And then manually add it to the page in the website? No!

So I found this plugin Facebook Page Photo Gallery, but which like I said could only display based on the album ID in specific, and it required me to add each album ID manually as a shortcode:

[fbphotos id=albumid]

I liked the overall feel of the plugin, and the thumbnail style and the jQuery effects that the developer had used in his plugin. And then it was time for me to start digging into the code. I narrowed down to this function, where in he generates a string containing the HTML to be printed, which again is generated by calling the fppg_get_photos() function by passing the album ID. Here is the original piece of code from facebook-page-photo-gallery.php, starting from line 34.

/*Function to hook to an embedding shortcode 
 * @param $album array passed through shortcode
 * 
 */

function fppg_embed_photos($album) {

static $count=0;
$count++;
extract( shortcode_atts( array(
		'id' => '',
		'limit' => 300,
                'rand'=>false
	), $album ) );
$div='
'.fppg_get_photos($id,$limit,$rand).'
'; return($div); }

Great. What I needed to change was to loop over the piece of code generating the HTML for each and every album rather than just the one album. So here is what I did. This was the page of my interest: https://www.facebook.com/pages/Sunshine-Foundation/286244581216, and its ID was 286244581216. And then I went to https://graph.facebook.com/286244581216/albums to get the details of all albums of that particular page in JSON format.

Just a small note here, if suppose a page has a registered username and does not have its ID in the page URL, say like https://www.facebook.com/CocaCola, then go to https://graph.facebook.com/CocaCola to retrieve its ID as one of the JSON objects.

Now that I had details of all the albums of a particular page in JSON format, the next thing that I needed to do was parse the JSON and retrieve the IDs of all the albums from the JSON, and run these album IDs in a loop through the previous code. The modified code is here, with the function fppg_embed_photos() replaced by mine.

function fppg_embed_photos($album) {

static $count=0;
$count++;
extract( shortcode_atts( array(
		'id' => '',
		'limit' => 300,
                'rand'=>false
	), $album ) );

/* Fetching the JSON Data from the graph.facebook.com/pageid/albums URL */
$fbAlbums=file_get_contents('http://graph.facebook.com/'.$id.'/albums');

/* Decoding the JSON Data and storing it in $fbData */
$fbData=json_decode($fbAlbums,true);

$div=" ";

/* Looping each $fbData['data'] */
foreach ($fbData['data'] as $fbPhotoAlbum)
{
/* Fetching 'id' of each album by $fbPhotoAlbum['id'], and passing that to fppg_get_photos(), and concatenating each of the generated HTML with itself and assigning it back to $div */
/* Also printing the album name by fetching it from the JSON data using $fbPhotoAlbum['name'] - Optional */
/* You can replace   as however you would like to, like for example 
  • for each album name to be in a bulleted list */ $div=$div.''.$fbPhotoAlbum['name'].'
    '.'
    '.fppg_get_photos($fbPhotoAlbum['id'],$limit,$rand).'
    '; /* Removing album names of any album with the name 'Untitled Album' - Optional */ $div=str_replace('Untitled Album;','',$div); } return($div); }
  • There we go, and this is how it looks on site, here. You can find the edited source code for download here. Download the original plugin, and replace the facebook-page-photo-gallery.php with the new downloaded file after extraction. And then now, your shortcode will have to be called only once, with the page ID of the Facebook page, rather than with some album ID.

    [fbphotos id=pageid]

    That does it! :). And don’t mind coming back to your photo gallery page ever again to update or add anything. The albums will automatically update as they are fetched from the Facebook page. Just keep those albums and photos rolling on in Facebook, and see them spring up there.

    Comment

    Launching TweetBytes

    Proudly announcing my very own Twitter client, TweetBytes! Bursts of short spans of coding over four nights. Built using PHP, TweetBytes uses OAuth to connect users to Twitter, whereby the user need not reveal his password to the application.


    Update: TweetBytes is now @tweet on txtWeb

    TweetBytes facilitates Twitter access through text messages, and is a complete SMS based Twitter client. But I’ve put in enough effort to make sure it isn’t largely inferior to the web and smartphone clients. And well, it surely beats their ass up in the sense that it requires no Internet! Just carry it along in your phone, and access it from anywhere through text messages, thanks to txtWeb.

    The front end development and the code for OAuth authentication took as much time as developing the back end features of the client. Check it out here.

     

    Well, that was my first tweet from TweetBytes, and tweeting here gets as simple as sending @tweet This is my tweet to txtWeb. Update: A few more tweets here from some of my friends using it!

     

     

     

    Update: TweetBytes has expanded to newer horizons after being published on the 55444.in platform on 20th September 2012. Access it here.

    I might have missed a couple of them, but I’m trying to archive tweets from others regarding the application. Thanks everyone!!







    Comment

    Back To The 8-Bit Era

    He who hasn’t had a taste of the classic 8-bit video gaming console in his childhood has missed out on some of the best things in his life. And if you are one of the few, there is a certain something that you must do. Just get back out there.

    I’m not sure how exciting it would be for someone who hasn’t been through those days, but for me, those glorious days of gaming are something to look back and cherish. And it is so wondrous to go through it all over again. So nostalgic, that what flashes through me is those box of game cartridges that come in various colors and claim to hold one less than ten million games in each, that hyperfastidious adapter which had to be fixed at an angle so precise so as to keep the console running, the Reset button that had been misused a thousand times and the sheer brilliance of a hundred games encapsulated within each of those three-inch long chips. And not to forget those innumberable fights for the joystick, and the first taste of multiplayer gaming.

    Thanks to Nintendo, though I can bet that the one which I had and the ones which we found in India was everything except Nintendo.

    There is this emulator that I got from a friend of mine recently, and it’s been giving me immense joy. If you can relate to what I’ve said so far and if you don’t already have the emulator, you are going to be taking it off right away. And if you do not know what I’m talking about, I’m going to force it on you. I wish.

    I have the entire thing loaded along with the emulator here. Just download, and run the VirtualNES exe. Open the games from the rom folder, and you’re good to go!

    Some shots from some of those bloody awesome games. I don’t think I would have to name any of these.

    I miss the gun.

    Comment

    Inactivity and Activity

    I must be the least frequent visitor of my own blog. Absolute inactivity for months. Or maybe not quite. I’ve actually been putting my site to some good productive use otherwise, and it’s already brought me some things, and enabled me to do a lot of things.

    On the blog front, I probably get an average of half a visitor every month, or maybe a quarter, but when I visit my cPanel AWStats, I can see that I get an average of 2000 to 3000 hits per day, and occasionally much greater. 1600 unique visitors each month. I don’t know how much sense numbers make, but now that’s something to make me happy. And well, thanks to my hosted applications of various sorts feeding roughly 25+ applications on the Windows Phone platform and txtWeb platform put together.

    I don’t know how January weirdly has much greater bandwidth usage, probably was around the time when I was uploading a lot of things and setting up the site.

    Analytics

    And I attribute my inactivity on the blog to me being active on the other end, working with Internet Society, YourStory.in, Slum Soccer, BigFourZa and a few others besides managing the Computer Science Forum in my college, working on two projects as a part of the academic curriculum, and doing my usual experiments.

    Overload. Zero time.

    I’m not sure if I’m handling them right, but I can say that I’m able to manage. Applications. Websites. Ideas. Classes. I’ve earned through a few, and I’m just doing the rest as a service which I ought to be doing. But everything is a learning process, which is what encourages me to keep going.

    Comment

    Asynchronous Refresh

    With the pace with which the web standards and technologies have been evolving, periodical page refreshes to fetch new data from the server has become a thing of history for quite a long time now. Everyone would remember times when pages used to refresh every minute or so when following the updates of a football or a cricket match on the Internet. And those of you who were observant enough would have noticed how things don’t work the same way anymore, and about how updates are delivered seamlessly without any signs of page reload.

    I have been working on creating a simple Social Chat-Room for a college project assignment, and while in fact most of its coding is already done, I know the code that I have used is ugly and annoying, talking of how the wall of the chat room gets rendered. I have set the frame containing the display wall to refresh every 10 seconds using the following piece of code in the head section of the page.

    
    

    Easiest thing to do. And ugly too.

    And now comes along a real project, which gives me a good reason to start learning. I’ve got to work on developing a “Live Updates” module for this quite-happening football blog, BigFourZa, a blog about the Big Four of the English Premier League. Something which demands me to start learning. Something for which a continuously refreshing page isn’t going to cut it out.

    Time for AJAX. Time for jQuery.

    What this Asynchronous Refresh is about is making calls to the server-side document and loading its contents to make it available for dynamic rendering on already present elements in the currently loaded document without any whole page refresh as such. Say we have a page, scores.php, which reads entries from a database and displays it on screen. Now when we add new entries into the database, unless we force a page refresh, the new entries are not going to be displayed on the page.

    What we can do with jQuery is asynchronously poll the scores.php from another page, say main.php, and display the contents of scores.php in it. The code of asynchronous refreshing is what is of our interest now, and so the main.php would be something like this:

    
    .
    .
    
    
    
    .
    .
    

    The interval is set to 10000 msec, so every 10 seconds the function is called and scores.php is loaded inside the element <div> with id=myscores, of the currently loaded page, which is main.php. And that’s all it takes. Not to forget to include the source of the jquery.js in main.php. And anyhow, one flaw with this code is that it takes initially 10 seconds before the document is loaded for the first time. For this, you’d have to add this into the head section:

    
    

    Now to debate, there are much better methods to achieve this than polling, but in terms of simplicity nothing beats polling.

    If someone doesn’t have much of any problem with understanding the Document-Object-Model (DOM) of an HTML webpage, then the documentation that is available on the Internet for jQuery is alone sufficient to start playing with it. And for me, it really is time to get working with things. Maybe soon, I’ll be ready with a working prototype of the Live Updates, or with the updated no-shabby-code Chat Room for you all to see.

    Comment

    Personal Home Page

    It’s been a while since I looked back into my blog, holding good with how I thought it would turn out to be. And it’s sooner than I anticipated, which is bad. But then I’ve come to a milestone here that’s encouraging me to get back to writing. 1000 hits to my site. Talking about blogs that get such a response each day, this isn’t anything to brag about. But it sure feels great.

    A counter plugin that’s been installed is doing the job. And then there’s my own script that’s running everytime a page on this site is loaded. A simple PHP script. Implementing a counter is possibly one of the simplest things you could achieve with it, but its significance is not to be played down for the reason that the very existence of this language arised merely from the need for keeping visitor count. A 25 year old Rasmus Lerdorf, back in 1994, wanted to track the visitor hits to his personal website, and put together a set of Perl scripts and formed what he called as Personal Home Page Tools. And over the following years, the language was open-sourced which led to the rapid development and evolution of the scripting language what we now know as the PHP: Hypertext Processor.

    Bearing a close resemblance to C++, anybody who’s learnt programming at school should be able to pick it up in no time. And the best of all is what you could actually do with it being a web-scripting object-oriented language. For how I began using it to just scrape data off the web, things in it turned out to be so elegant that it drew my interest and now I’ve picked it up quite enough to be doing all of what I do on it.

    This language now, means a lot to me.

    Comment

    Underneath Facebook

    A myriad of us spend a considerable amount of our free time on one site, Facebook. A few others might spend all their time, and there are a few who have already spent a lifetime. All of us know Facebook as how it appears from the outside. All information in our profile, wall, albums and pages, beautifully rendered in that blue and white layout. Friends. Photos. Status Updates. Comments. Likes. Videos. Apps. Games. Everything under one platform. Facebook has evolved to that point where it in itself has become as much a phenomenon as the whole Internet is.

    For how it has become very much a part of our lives, it would do some justice for us to know a bit about how things work underneath.

    I have been interning at this startup called QuiKast for the past two weeks, and as a part of my project over there it was required that I learn about Facebook. So while what I talk about in this post will no way be related to programming and development, I sure will come back with a post talking about a Facebook app. But now, let’s get to the Facebook Graph.

    Now for all the people who don’t know what a graph is yet, a graph is a set of nodes connected by edges. The general representation of anything in a graph is with ‘objects’ acting as nodes, and the ‘relationship’ between two objects acting as an edge. I think that describes it in a fairly simple and concise manner.

    Here is how things work. ‘Facebook’ is a graph. The whole of it. To some such a perception would sound absurd. But that’s how things are. Everything in Facebook is an object. Every piece of anything on Facebook is an object. You are an object on the Facebook graph. Your friend is an object on the graph. Your status update is an object of its own. Your photos are objects of their own. And what holds them together is the relationship between them, the edges, except that there are different kinds of relationships between different objects. The relationship could be something like ‘friend’, or something like ‘like’, or ‘tag‘, or ‘own’, or anything else you could think of. Probably this image is going to help you with the visualization.

    Facebook Graph

    That sure does make things a lot easier to understand. So Facebook identifies and knows certain kinds of relationships as I told you about. And the objects that interact can be virtually anything. Of course, it knows of people, pages, groups and apps but whatever it is, is a property of the object. And whatever the object is, is given an unique identifier. The object of my profile on Facebook has the ID 559736373. And the object of Mark Zuckerburg has the ID 4. The Facebook ID of the official page of Adidas is 182162001806727. And the ID of the Texas HoldEm Poker app is 2389801228. Now here’s what happens when I go and like Adidas. An edge is drawn between 559736373 and 182162001806727. And the relationship that describes the edge is ‘Likes‘. Suppose I upload a new photo. It is given a new identifier. And then there’s a relationship ‘Photo From‘ between myself and the photo. And then I tag a couple of my friends in it. Two new edges are introduced into the graph. Between each of my friends and the photograph. By the relationship ‘Tags‘. Even external objects residing anywhere on the internet is mapped onto the graph once it starts interacting with Facebook. Take for example the “Like” box that you see on the top right corner of this site. The first thing that happened when I added the “Like” box was that Facebook created an object for ‘http://www.arjunabhynav.com’. Now the moment someone likes it, a new edge is drawn between them and this site.

    I think we’ve come one step down now. It makes more sense to get looking into things with a more hands-on approach. Let’s start exploring the Facebook Graph. Externally. Not from within Facebook. Let’s visit http://graph.facebook.com/56134108238. And please do this through Firefox or Google Chrome. What do you observe? There you see the object of the page Internet Society. Now this is an object, and it has some attributes which you can see from the graph. These attributes are properties of that object. Now try http://graph.facebook.com/559736373. That’s me.

    Okay. This doesn’t seem to define all of me properly, does it? It doesn’t show all the details that you see in my profile, does it? Nope. There is more to my profile. I link to different objects. The different things that define me. My wall posts. My photos. My friends. And everything else. It is very much possible to view them all through the graph. Say you want to check all my friends. http://graph.facebook.com/559736373/friends. And the music that I like. http://graph.facebook.com/559736373/music. Well, I know this didn’t work. You need something called an access token to view my profile details. Then the URL would become something like http://graph.facebook.com/559736373/friends?access_token=1234ABCD. This isn’t really a valid access token. I can give you an access token, but then it would expire in a while and wouldn’t work if you try. I would rather go with screenshots. You can view my friend list here. And the music that I like here. Observe that each music band that I like and each friend of mine has an unique ID, and also check out the awfully long access token on the URL. Likewise you can access just about any detail of mine, anything like a photo or any of my wall posts, using an access token. You would have to go to /photos or /feed or /groups or /videos or /likes or other relationships. And you would require an access token to access any of these, because that’s how my privacy settings are. Within Facebook, when you click on my profile, you get to see all these details, but that’s because being a friend, Facebook internally gives you access privileges and then you make a request to view my details. And say when you visit the profile of someone who is not a friend, then Facebook does not give you privileges to view his posts or photos. It’s all about privacy.

    Let’s jump into a photo that is public and can be viewed by anyone. Check this out. http://graph.facebook.com/281666035202449. If you can follow the braces, then you’d get the real feel of the graph. You can see the “from” tag which gives the owner of the photo. You can see the names and IDs of the people who have been tagged in it, who have liked it, who have commented on it. You can even check out the comments in the “message” tag. Note that every comment also has its own ID. And not to forget, you can check out the link of the photo under “images:source”, the URL where it really resides on the web.

    And you can see that Facebook is a lot about traversing through these graph structures, generating them, and rendering the right content at the right place. But it’s one messed up graph, and what seems simple isn’t really all that simple. Mad coding, defining Data Structures that can handle these, and continuous optimization runs behind the scenes.

    I think we’ve come to an end here. I really appreciate it if you read through the whole thing. It sure is good to know more about something you are passionate of. I tried to be as descriptive as possible, but I can’t be telling that I explained the whole of it. There’s always more to learn, and best way to do is to visit the Developers page in Facebook and start reading up on things. However, I’m sure this would have given you a good insight into how things are ‘Underneath Facebook’.

    Comment

    The Inception

    Turns out that I can be the subject of a stereotypical Rajnikanth joke. “Rajnikanth’s email address is gmail@rajnikanth.com”. Well yes, now my email address is mail@arjunabhynav.com. You might think of me to be a person too self-obsessed, about me owning a domain with my own name. But then this is a personal website, and an address like arjunabhynav.com is far more sensible and better sounding than something like arjuncool.com or rockstararjun.com. And moreover I couldn’t have purchased such a domain ’cause there already must be a dude with that address.

    Well, but why did I even want a website in the first place?

    Now I needn’t be reasoning, but then I can’t think of anything else to be writing as my first post in this blog. So here goes. Because I needed one. I needed a reliable hosting space, and I landed up with this domain. Of late, I have been into developing a few simple text based mobile applications which use the response of my PHP applications hosted on a server. And also I have been into developing websites, testing them on random sub-domains around the web. At first I did resort to free hosting sites as anyone would. But I’ve had my bad time with them. Uptime is horrible. And the FTP bandwidth is terrible. The kind of restrictions that they can impose on free users is limitless. And unpredictable. Who bothered to read through their Terms and Conditions? But then it’s a free hosting account, and I shouldn’t have expected more. The response that I used to get from my hosted applications on access was so erratic. And they wouldn’t work over considerable times in a day. And then one day, on login, I got this message. “Your account has been suspended for violating 20%+ CPU usage limit for more than 1000 times”.

    Boom. Everything on it was lost. And the applications which it used to feed stopped working. “Upgrade to Premium Hosting”. That’s what they said. I should have understood when I saw the Free vs. Premium Hosting comparison table on the homepage. A ✓ would disgracefully find its seat in between a majority of ✕. And look at the other side. A row of majestically aligned ✓.

    Well it was time to think about switching to a paid hosting service. And thanks to my dad, he agreed. But then I chose a new webhost. Reliable, hopefully. And now I’m here. And the domain name? I can’t be hosting things on an empty cloud. And if I do, nothing can ever point to them. It needs an address.

    Welcome to arjunabhynav.com. This is it. I do not have a definite idea in mind as to what I’m going to be using this website for. But it’s a good time to start blogging, and to play around. I cannot promise to be regular blogger, but then I think there is a bit of enthusiasm in me that’ll show up for the first few months.

    I’m calling it “Bits and Bytes”.

    Comment
    Copyright © Bits and Bytes | Arjun Abhynav. Powered by WordPress.