Junal on the run

Archive for the ‘Technology’ Category

Alexa is well known for internet traffic/information about a site and now days they are on top as their data is more accurate. Today, I was researching on some web sites so I needed alexa’s help of course. Alexa used to show the visitors/page view at the Y-axis in thousands previously. But today, I was a little bit confused when I was looking for monthly visitors. Well month view was there but it was just showing something in percentage. Well fine, percentage on what number? I didn’t see any information there and then went through their FAQ and found that it was based on “Total Global Internet users”, ahh interesting! I don’t know what was their problem to show the actual number !

Anyways, for today I found total global internet users were 1,463,632,361

So for, percentage that I had from my query (e.g. 0.02) had to calculate from the total number.

An example of Alexa Chart

An example of Alexa Chart

Example:

Monthly visitors = 1,463,632,361 * 0.02 / 100;

Approximately : 2, 92,726 users per month

Well, im still thinking why they didn’t give the actual number? Business purpose? Hmm….

Day before yesterday night I was watching this movie called “My Fair Lady“, I got to say movie was quite interesting. It had enough fun to hold me but something was distracting me badly, there was live twittering going on, there was live friendfeed going on in real time! Specially, enjoyed the fun comments on American Election 2008. As I was watching the movie on my laptop, I kept the movie player at the right side and the web browser on other side. Time to time I was getting confused which one to watch. “Live web” was that kind of fun so I gave up watching the movie, unfortunately!

We know Facebook “live feed”[please check it out from your FB home page] was launched few days ago, so now we can see the activities of our friends in real time. This is something really interesting, even my friend is not online, I can see what he/she is doing with their profile 😉

Similar thing has brought by Friendfeed and Twitter! Unlike Twitter’s page, which only shows Tweets, FriendFeed’s “real time web” shows you everything that people are doing on the Web. Seems like chat room eh? But hey! You can also comment on these live tweets and friendfeed comment and note that you cannot comment on facebook live feed!

So, where this web is going really? Now, I have something more to keep me in front of my laptop, when im not working and bored I have got something to watch in the web! Isn’t it amazing?? This is not something that is stored somewhere and web page is playing it for me. This is something that is going on in REAL TIME. No doubt, this web world is becoming more AJAX place. It’s becoming interesting day by day…and I just can’t wait to see what’s going to happen in next couple of years…

I was waiting to study on these applications architecture for a long time. Just couldn’t manage time, this time after coming here in my hometown Sylhet I got a good amount of time and didn’t waste this time to study on Google architecture, Youtube architecture, Flickr architecture and finally twitter architecture. I just had this curiosity to know how these apps actually maintain the high scalability. No doubt that Google is the king of scalability. They got all pure engineers from around the world and I guess this is the only company in IT sector who implemented university studies directly in real life.

So what lessons I have learned?

  • Simplicity allows you to re-architect more quickly so you can respond to problems. It’s true that nobody really knows what simplicity is, but if you aren’t afraid to make a change then that’s a good sign simplicity is happening.
  • A team is always a powerhouse of a company. Only a talent team can find a better ways of scalability. After all a team is the main recourse of a company.
  • Make your application easily partitionable from the start. Then you always have a way to scale your system.
  • Most performance comes not from the language, but from application design.
  • Turn your website into an open service by creating an API. Twitter’s API is a huge reason for their success. It allows user’s to create an ever expanding and ecosystem around Twitter that is difficult to compete with.
  • Move your all popular content to CDN (content delivery network). You are just giving the responsibility to trusted people to do your job. Certainly it reduces the load to the main server. Creating own network would be time consuming and costly.
  • If you have a long tail product caching won’t always be your performance savior.
  • Know what’s essential to your service and prioritize your resources and efforts around those priorities.
  • I have noticed applications that use too much cache, they prefer PHP scripting language! (I.e. Facebook, Flickr).
  • Caching and RAM are answers to everything. All applications give priority on these…
  • If we optimize then we should optimize a large thing as small things makes the system evil
  • If you fails on your system then get advice from the community. There are better expert in the community than your company nerds.
  • Hide update using AJAX
  • Build self-managing system that work without having to take the system down

When I saw the redesigned facebook like few days ago, first thing came in my mind was like “hey, status update is almost like twitter” and then I realized, that facebook would try to take away the popularity of twitter. And today, I saw they also updated the status options in home page which is almost like twitter! Tomorrow I won’t be surprised if I see my facebook IM is showing my friends status message with a pop-ups. Yes, it is just rewinding the same question. “Twitter will be killed by facebook?”

There could be some strong support if I say yes to answer this question.

First of all, they have billion of users. If I can do the same thing with my friends in one place then why would I use twitter? See, now facebook focusing all users status message by making it way larger than before. Their intension is clear.

Status message in my home page, looke like twitter

Status message in my home page, looks like twitter

But,

I don’t think so! Twitter will remain as twitter if they don’t kill their system, if they can figure out how to maintain huge data load.

Why don’t think so, because my twitter friends and facebook friends are not same. I don’t want to share same message/status message with both category. Twitter message is related about what I’m doing, “I’m working on php GD library”. i know this status will be changed after a while in my twitter. But same message with different type of friends in facebook? Uhm …no, I don’t think so.

I’m not worried about twitter!

I have been planning to post a blog on all changes and new features of redesidned facebook ! Thank god, today I got an opportunity to do some RnD on it..and here is the result of all changes and new features. I believe integration of new profile box in MAIN profile is a challenge now. I’m working on it and hopefully, soon I will be able to write another post on how we can integrate new profile box on MAIN profile page ….

  • To use the wide layout (760 pixels) for your canvas pages, you have to enable it in the Facebook Developer application. Edit your application’s settings, then check the Use full canvas width option
  • FB changed the permissions for profile boxes, tabs, and Publisher so they work with require_login as opposed to require_add, since they all have separate confirmations.
  • Parameter name changes for tabs. In the request for the FBML content of a tab, the parameters ‘fb_sig_user’ and ‘fb_sig_session_key’ are now named ‘fb_sig_profile_user’ and ‘fb_sig_profile_session_key’ to distinguish them from other request contexts, where fb_sig_user always represents the logged in user. On a tab, fb_sig_profile_user is the id of the user whose tab is being viewed, and fb_sig_profile_session_key is a special read-only session key on behalf of the tab owner, given so that you can request data for constructing the tab contents.
  • API Calls: For many calls, session keys are now optional. If you continue to pass valid session keys, FB’ll ignore them. FB recommends you remove session keys from the appropriate calls now.
  • User Sessions: During the user preview period, FB will still grant infinite sessions to your Web applications for users on the old profile. However, FB’ll grant temporary sessions to your Web applications for users on the new profile. Temporary sessions last 24 hours, or until the user logs out, whichever comes first. After we launch the profile to all users, we will grant temporary sessions to all Web applications.
  • When the new profile launches in full, only feed.publishUserAction will work to publish Feed stories. So FB recommends you create and register your Feed story templates now and start testing and using that method.
  • Feed Stories. During the user preview period, Feed stories submitted through the APIs will appear on both old and new profiles. The old Feed API calls (feed.publishStoryToUser, feed.publishActionOfUser, and feed.publishTemplatizedAction) will render the appropriate Feed story on the old profile, and render one line stories on the new profile. The new Feed API call (feed.publishUserAction) will work as expected on the new profile, and will render one line Feed stories on the old profile. All Feed stories will be aggregated and shared in News Feed as they are today.
  • Old vs. New Profile: Determining Which Site a User Is Using. We will pass in the fb_sig_in_new_facebook parameter on all pages on the site. Use this to determine whether a given user is using the new profile (true) or the old one (false).
  • Notifications: With the new profile, there will be two types of notifications: general and announcement notifications. General notifications require active user sessions, which use the sending user’s active session (with the same allocation amounts as today).

    Announcement notifications are sent on an application’s behalf. An application can send 7 announcement notifications per user per week when the new profile goes live. This number will fluctuate as allocations change, based on user feedback, like today.

    To account for these changes, we’ve added a type parameter to Notifications.send, which can be set to general or to announcement (the default is general).

  • When a user first interacts with your application, you can call users.getInfo and get a subset of user data (name, profile picture, and so forth). users.getInfo also no longer requires a session key, and if you don’t pass one, you can get the same subset of information.
  • users.getStandardInfo returns more user information (like gender and birthday), and you can use the information from this call to return data for your analytics, for example. You shouldn’t use this call to return information that you want to display to other users.
  • With the new automatic authentication model, we now pass an fb_sig_canvas_user parameter, which sends you the user’s public search listing data (like name, profile picture, friend IDs) when the user interacts with your application for the first time, before the user agrees to your application’s Terms of Use.
  • FB now passes the fb_sig_in_new_facebook parameter to all pages on the site. Use this to determine whether a given user is using the new profile (true) (=1) or the old one (false) (=0).
  • Narrow profile in MAIN PROFILE : The narrow profile boxes on the main profile (Feed, Wall and Info tabs) have the same width as narrow profile boxes (200 pixels) but are limited in height to 250 pixels. You create a narrow profile box for the main profile using the new profile.setFBML API profile_main parameter.

    For more info : http://wiki.developers.facebook.com/index.php/New_Design_Narrow_Boxes

  • Integration Guide for the New Facebook Profile : http://wiki.developers.facebook.com/index.php/New_Design_Integration_Guide#Understanding_the_New_Integration_Points
  • Upgrading your applications: http://wiki.developers.facebook.com/index.php/New_Design_Integration_Guide#Upgrading_your_Applications
  • Registering Templates: New API Methods : http://wiki.developers.facebook.com/index.php/New_Design_Platform_Changes#Registering_Templates:_New_API_Methods
  • Changes to Existing Platform Components: http://wiki.developers.facebook.com/index.php/New_Design_Platform_Changes#Changes_to_Existing_Platform_Components
  • Platform Policy http://wiki.developers.facebook.com/index.php/Platform_Policy#8._Integration_Points
  • Resizable Iframe : http://wiki.developers.facebook.com/index.php/Resizable_IFrame
  • Prompt permission : You can prompt a user to approve the following extended permissions for your application:

. Allowing email to be sent to the user

  • Granting offline access (i.e. an infinite session) for your application
  • Updating user status
  • Uploading and tagging photos
  • Creating and modifying Facebook Marketplace listings
  • Creating and modifying events
  • Setting a user’s RSVP status for an event
  • Sending SMS to the user

for more information :

http://wiki.developers.facebook.com/index.php/Fb:prompt-permission

Today, I went through this challenging (for me of course) task to map/create separate links on one image. I think this could be a great alternative of Image Mapping. Well after doing it, I felt that I would write a small tutorial on this CSS image mapping. So lets have a look how we can simply create separate links on one image with CSS.

First of all, we will put the image in a div as a Background. Note one thing that, div height must be given, otherwise it could be overlapped by other divs.

Let’s have a look at the HTML part…

<div id=”link_out”> </div>

CSS ….

#link_out{

background:transparent url(yourfile_path/link.jpg) no-repeat;

border:5px solid #ccc8bc;

height:263px;

width:194px;

margin-bottom:30px;

}

now, lets put <a> tag for a link and of course thats should be in the DIV.

<div id=”link_out”>

<a id=”first_a” href=”https://junal.wordpress.com/&#8221; target=”_blank” ></a>

</div>

so we have a tag id called first_a . now point this link with CSS ..

#link_out #first_a {

display:block;

height:20px;

margin-top:50px;

margin-bottom:1px;

outline-style:none;

outline-width:medium;

overflow:hidden;

width:194px;

}

this above CSS should point out the first link. Same as we can create another link that can follow another link….

here is the example image that I have from this tutorial.

CSS Image Map

CSS Image Map

To get the complete example, download the code from here:CSS Image Mapping


View Junal Rahman's profile on LinkedIn
Subscribe to me on FriendFeed

Follow Me on Twitter

Archives

My photos

Blog Stats

  • 428,810 hits