How to integrate Google Friend Connect – In Pictures

I am probably one of the luckiest (if this is the case) to have got google friend connect invitation a couple of minutes back. And it really took me a few minutes (< 10) to setup Google Friend connect on Gtalkbots.

In Pictures:








http://google.com/friendconnect

Try out, if it clicks for your and others, you might get loads of traffic.

How to create a social networking website in 5 minutes

Hello Friends,

Social media is the way to go now-a-days. After Orkut, Facebook and My Space we saw hundreds of social networking site making their mark in the market. However now a days socialness is not only restricted to social networking sites. Now every company wants to include some amount of socialness into their website, product or whatever it is.

However the features which any of the social networking site provide are same and restricted to a certain extent. 3 of the sites which I have developed so far, all have socialness as a base component. (Gtalkbots, Altertunes, IITG Alumni) However after I saw Elgg a few days back, I was just wondering how much time I wasted in building social features in all the 3 sites. I just wish I could have found this before.

Here in 5 minutes we will see how to build a full fledged social networking site using Elgg:

  1. Download Elgg setup from the download page here or directly using this link http://elgg.org/getelgg.php?forward=elgg1.1.zip
  2. Lets name our social networking site as Snizr.
  3. Extract the downloaded zip file in your Apache Document Root and name the folder as snizr. In my case it is C:Workspacesnizr 
  4. Now just open the url http://localhost/snizr and you will see a page like this:

  5. Create a database named snizr in mysql and enter the details in the form above. Press enter and you will come to the system settings page. If for some reasons this configuration page doesn’t take you to the system settings page, manually go to engine/settings.example.php and rename it to engine/settings.php and enter the details inside.

  6. Now enter the details of your social network here. Create a upload folder outside the installation directory e.g. C:Workspacesnizr-uploads . You will be asked to enter this path in the system settings above.
  7. After you are done you are taken to the registration page. The first registered user is admin by default.

  8. Thats it. You have a full social networking available for you. After registration you come to the login page and after loggin in you come to your dashboard.

Features provided by Elgg:
You just got a feel of how easy it is and its not even 5 minutes as per my watch. Still 2 min to go 😉 .
Quickly lets see what else does Elgg offer.

  1. Click on Administration link at the top navigation bar and you will be amazed to see the kind of admin panel it provides.
  2. Next go to Tool Administration and you can see about 10 plugins at your service. From Blog, API, Bookmarks, Friends, Groups, Messages, Status, UserValidationByEmail and what not.
  3. Enable a few and go to your profile pages to see them being reflected immediately.

Now I will leave to explore rest of it yourself. 5 minutes are almost over 😉

I hope you enjoyed discovering Elgg.

How to create a single button flash audio player using Openlaszlo?

Hello Everyone,

I have been working on OpenLaszlo for quite sometime now and found it every easy to build custom flash widgets using it. In my first tutorial on OpenLaszlo, we will together learn a few specs of Openlaszlo and then code a tiny little flash media player.

Getting started with Openlaszlo:

  1. Openlaszlo is a framework which allows you to build flash widgets easily and faster. Biggest advantage is that you need not write any action scripting for building your flash widget. In laszlo we write code in XML format (files saved with extension .lzx) and then Laszlo server compiles our .lzx files to output a flash .swf file. WOW!
  2. Download your copy of laszlo from http://openlaszlo.org/download and install. If you are on windows, installation is simple. Just double click the downloaded .exe file and it will install everything for you. For me my installation is at C:OpenLaszlo Server 4.0.12
  3. Create a directory C:OpenLaszlo Server 4.0.12Serverlps-4.0.12Workspace . I generally do all my laszlo specific development under Workspace directory. (Adjust the path as per your installation)
  4. Create a folder inside Workspace named audioplayer
  5. Start the laszlo server.

Building an audioplayer in laszlo:

Before we proceed you may checkout the code repository from Google Code Base:

svn checkout http://abhinavsingh.googlecode.com/svn/trunk/ abhinavsingh-read-only

  1. As I wrote before, laszlo code files have an extension called .lzx . Lets first see a demo and then we will learn the syntaxes etc. You can find the explanation of the codes below within the code as comments
  2. Create a file called main.lzx and copy paste the following lines of code in it:
    <canvas id=”miniplayer” medialoadtimeout=”120000″ bgcolor=”#FFFFFF” debug=”true”>
     
      <!– This file takes care of toggling for the play/pause button –>
      <include href=”playpausemultibutton.lzx”/>
     
      <!– Include the MP3 player class –>
      <include href=”player.lzx”/>
     
      <!– Main view containing everything within it –>
      <view x=”5″>
        <simplelayout axis=”x” spacing=”5″/>
        <!– PLAY-PAUSE BUTTON PANEL –>
        <view name=”buttonpanel” id=”buttonpanel” y=”1″ bgcolor=”#EEEEEE”>
          <multistatebutton id=”playpausetoggle” name=”playpausetoggle” bgcolor=”#EEEEEE”
          resource=”playpause_rsrc” align=”center” statenum=”0″ statelength=”2″ maxstate=”1″ onclick=”this.toggle()”>
            <method name=”toggle”>
              if (this.statenum == 0) {
                this.setStateNum(1);
                <!– if players is already loaded with a song just play it, otherwise load it again with mp3url –>
                if(audioplayer.nowplaying == false) {
                  audioplayer.setAttribute(“nowplaying”,true);
                  audioplayer.setResource(global.mp3url);
                }
                else {
                  audioplayer.play();
                }
              }
              else {
                this.setStateNum(0);
                audioplayer.stop();
              }
            </method>     
          </multistatebutton>
        </view>
       
        <!– Include the audioplayer class –>
        <player id=”audioplayer” width=”100%” height=”100%”/>
       
      </view>
    </canvas>
  3. Create a file called playpausemultibutton.lzx and copy paste the following lines of code in it:
    <library>
      <resource name=”playpause_rsrc”>
         <!–  State: 0 –>
         <!– first  frame of state 1 = mouseup   image of the button –>
         <frame src=”icons/play_blue.png”/>
         <!– third  frame of state 1 = mousedown image of the button –>
         <frame src=”icons/pause_blue.png”/>

         <!–  State: 1 –>
         <!– first  frame of state 2 = mouseup image of the button –>
         <frame src=”icons/pause_blue.png”/>
         <!– third  frame of state 2 = mousedown image of the button –>
         <frame src=”icons/play_blue.png”/>
      </resource>
    </library>

  4. Create a file called player.lzx and copy paste the following lines of code in it:
    <library>
     
      <!– THE AUDIOPLAYER PLAYING CLASS –>
      <class name=”player” extends=”view” visible=”true” play=”false”>
       
        <!– Attribute which captures the player nowplaying stat –>
        <attribute name=”nowplaying” value=”false”/>
       
        <!– Attribute which captures the player loading stat –>
        <attribute name=”loading” value=”false”/>
       
        <!– Write ‘onlastframe’ handler –>
        <handler name=”onlastframe”>
          this.setAttribute(“nowplaying”,false);
          this.setAttribute(“loading”,false);
          playpausetoggle.toggle();
        </handler>
       
        <!– Write ‘onloadperc’ handler –>
        <handler name=”onloadperc” args=”p”>
          if(p > 0) {
           
          }
          if(p &lt; 1) {
            audioplayer.setAttribute(“loading”,true);
          }
          else if(p == 1) {
            audioplayer.setAttribute(“loading”,”done”);
          }
        </handler>
       
        <!– Write ‘onunload’ handler –>
        <handler name=”onunload”>
          if(this.nowplaying) {
            this.setAttribute(“nowplaying”,false);
            this.stop();
          }
        </handler>
       
        <!– Write ‘onplay’ handler –>
        <handler name=”onplay”>
          this.setAttribute(“nowplaying”,true);
        </handler>
       
        <!– Write ‘onload’ handler –>
        <handler name=”onload”>
        </handler>
       
        <!– Write ‘onframe’ handler –>
        <handler name=”onframe”>
        </handler>
       
        <!– Write ‘onstop’ handler –>
        <handler name=”onstop”>
        </handler>
       
        <!– Write ‘ontimeout’ handler –>
        <handler name=”ontimeout”>
        </handler>
       
      </class>
     
    </library>
  5. Create a file called mediaplayer_dev.html and copy paste the following lines of code in it: (This is development environment file, mediaplayer.html is the production environment file which you can find in code repository)
    <html>
      <head>
        <title>Flash Audio Player</title>
        <script type=”text/javascript” src=”swfobject.js”></script>
      </head>
      <body>
        <div id=”flashcontent” width=”100%”>
          This text is replaced by the Flash movie.
        </div>
        <script type=”text/javascript”>
          var so = new SWFObject(“main.lzx?lzt=swf&debug=true”, “singlebuttonplayer”, “100%”, “100%”, “7”, “#FFFFFF”);
          so.addParam(“quality”, “high”);
          so.addParam(“scale”, “exactfit”);
          so.addParam(“salign”, “LT”);
          so.addParam(“menu”, “false”);
          so.addParam(“wmode”, “opaque”);
          so.addParam(“allowScriptAccess”, “always”);
         
          //Set the mp3urlfor the song
          so.addVariable(“mp3url”,”http://127.0.0.1:8080/lps-4.0.12/Workspace/audioplayer/Liquid Tension Experiment – Acid Rain.mp3″);
         
          so.write(“flashcontent”);
        </script>
      </body>
    </html>
  6. Create a folder called icons and copy the two icons which you checked out from the code repository.
  7. Copy an mp3 file from your hard disk and copy paste it in the folder. Then edit the mp3url in above code of mediaplayer_dev.html
  8. Copy and paste the swfobject.js file which you have checked out from code repository.

That all we need to test run our single button audio player. Now simply open the following URL in your browser: (edit it as per your folder names)
http://127.0.0.1:8080/lps-4.0.12/Workspace/audioplayer/mp3player_dev.html
and you can see the audio player playing your mp3 song 🙂

Now we can see our file playing the mp3 well and we would like to generate a flash file out of our main.lzx file. For this laszlo have their inbuild compilers which will compile the flash file for you. Simply open the url:
http://127.0.0.1:8080/lps-4.0.12/Workspace/audioplayer/main.lzx
and then check swf8 at the bottom of the page under compile options and press compile

From here on you have two options:

  1. Either to use laszlo specific embedding strategy i.e. If you proceed with further steps after pressing compile, laszlo will give you a set of javascript files which you can use to embed your audio player.
  2. Or you can use swfobject.js to embed your flash files in your website. (Recommended)

I assume you will use swfobject.js and in that case you may simply stop after pressing compile. See the folders and you can see  two .swf files being generated into the folder. These are our final production level flash audio player files.

Now lets see how to use these .swf files in our pages. Simply rename them to alterplayer.swf and create a file called mediaplayer.html and copy paste the below code in it:

<html>
  <head>
    <title>Flash Audio Player</title>
    <script type=”text/javascript” src=”swfobject.js”></script>
  </head>
  <body>
    <div id=”flashcontent” width=”100%”>
      This text is replaced by the Flash movie.
    </div>
    <script type=”text/javascript”>
      var so = new SWFObject(“alterplayer.swf”, “singlebuttonplayer”, “100%”, “100%”, “7”, “#FFFFFF”);
      so.addParam(“quality”, “high”);
      so.addParam(“scale”, “exactfit”);
      so.addParam(“salign”, “LT”);
      so.addParam(“menu”, “false”);
      so.addParam(“wmode”, “opaque”);
      so.addParam(“allowScriptAccess”, “always”);
     
      //Set the mp3urlfor the song
      so.addVariable(“mp3url”,”http://mysite.com/songname.mp3″);
     
      so.write(“flashcontent”);
    </script>
  </body>
</html>

We did not much change from mediaplayer_dev.html. Simply replaced .lzx file with actual .swf file and the mp3url also change to your production level mp3 url.

Thats pretty much of what we actually wanted to have. 🙂

In future we will see how to build a:

  1. Single Button Player which also shows the time
  2. Single Button Player with progress bar and volume control
  3. Audio Player capable of playing a whole mp3 playlist.
  4. Audio Player with AJAX search enabled in it.

If you want to see the final version of flash player which we will slowly learn to develop, kindly visit Altertunes (my first ever site :))

Kindly let me know if you are having trouble in learning and running this player. I will more than happy to contribute and share further.

Document Reference:

  1. http://www.openlaszlo.org/lps4/docs/
  2. http://www.openlaszlo.org/lps3/docs/reference/
  3. You can find some great help from the official forum http://forum.openlaszlo.org/

Let me know your feedbacks.

A Light Weight Javascript calendar for your websites and blogs

Hello Everyone,

Well you can find a lot of such calendars out there in the market, and this is yet another one for you. I made this to embed with my scheduling calendar which you can find here. Calendar with auto notification and demo

Check out the source code from the google code repository:
svn checkout http://abhinavsingh.googlecode.com/svn/trunk/ abhinavsingh-read-only

How to make faster websites and enhance your site user experience – Part 1

In all my posts till now I concentrated over how to get started with web development and related introductory stuffs. In next few posts (series of 3 posts), I will write some of my learning in the field of “How to make your website faster and enhance your site user experience”.

So lets assume I made a site, which rocks with all those web2.0 features in it. But still my user complaints like:

  1. My site hangs their browser while loading.
  2. The page takes too long to load.
  3. Blah Blah Blah…… 🙁

So how to go about and make sure that you do your best to make things rocking. Here are a few of my tips on things that you should concentrate upon and which will definitely help in fast loading of your pages:

  1. GZip your site static content: This is one of the most important stuff which helps a great deal in enhancing your site download speed. Let me explain the process:
    • When I type www.yahoo.com in my browser and press enter, an interaction starts between my browser and the www.yahoo.com servers. My browser asks for the yahoo.com homepage from the yahoo servers. However all Grade-A browsers sends a few useful stuff along with this homepage request. They tells the server that I support gzip encoding, and if you serve me the contents in g-zipped format I will happily except it, unzip at my end and render it for the user.
    • The Yahoo server sees these headers being sent by the browser and depending upon its configuration it gzips the content before serving back to the browser. However, if Yahoo server’s are not configured for the gzip encoding, it will server the content in its raw form. Further, if Yahoo server’s are configured for gzip encoding but my browser isn’t a Grade-A browser, servers are smart enough to return back the content in the form which suits my browser.
    • For instance here are the request header sent by my browser to the yahoo servers when I type in http://yahoo.com in my browser:

      In the above image we can very well see that my browser sends in a header saying Accept-Encoding : gzip,deflate. On seeing this in the headers Yahoo server responds as expected i.e. it serves back the gzipped contents to the browser.

      In the above image we see the response headers being sent by the Yahoo server to my browser. We can see that Yahoo server tells back my browser that it has served the contents in Content-Encoding : gzip , so please unzip them at your end before rendering them for the user.

      So how does the end user’s experience gets enhanced?

      If we see the above image we can very well see that the Yahoo homepage which is actually of 125.1Kb comes in as 31.9Kb only. Further the javascript files gets compressed and hence faster data transfer through the channels and thus faster experience for your site users.

      Though gzipping the site content increases your server side CPU load, but that gets compensated by the fast that users are able to see your pages load faster.

    • What all contents should I gzip? Its always better to gzip the javascript files, CSS files, HTML files, Plain Text files (In some cases XML’s too but I have had a few problems with gzipped XML’s). We generally don’t compress images, pdf’s etc as they are already in best compressed format and further compressing won’t give us any smaller file sizes.
  2. Setting an ETag for your sites content: This is another factor which helps the page load faster for the users. By setting up an ETag , server sends an information about the contents being served to the browser, telling the browser about its last modified date. So when I type in http://yahoo.com in my browser and presses enter, my browser requests for content from the Yahoo servers. In reply if it sees that the ETags haven’t changed for the requested component, it simply uses the component from browser’s cache. Hence this time we saves the data transfer part, as browser is capable enough to cache enough static data from one single domain.

    In the above image Yahoo servers doesn’t reply back the ETags possibly because of two reasons. Advertisements and Expires Headers which we will see in the next point. As Yahoo have advertisements on all their pages, they simply don’t want those contents to be cached by our browsers. So that everytime we open yahoo.com , we see a new advertisement. (Experts, Kindly correct me if I am wrong in my explanation here)

  3. Setting up the Expires headers: This factor even saves the browser pinging the server time.

    In the above image we can see Yahoo servers setting up an expire header telling the browser that, this component is not going to change before the setup expired header. Hence next time you type in Yahoo.com in your browser and press enter, browser sees the content which still haven’t expired and picks them up from the browser cache. Thus they don’t even ping the servers, saving your servers BW and enhancing your users page load time.

    What if I have setup expired headers 2 months from today and I want to change the content before that?
    Simple enough, next time in place of http://l.yimg.com/us.js.yimg.com/lib/bc/bc_2.0.4.js will be change to something like http://l.yimg.com/us.js.yimg.com/lib/bc/bc_2.0.5.js ,  i.e. changing the version of the javascript file being served from server side. Hence browser will be forced to download the new javascript file from the servers rather than using them from the cache.

  4. Use of sub-domain or different domain for serving static contents: We can very well see in the above image that Yahoo serves all its javascript files from a server called http://l.yimg.com which is supposedly one of its static server. But why the hell do I need to do this? This is because currently all Grade-A browsers allows 2 parallel connections to a host. i.e while loading a page yahoo.com, my browser can download only two files at a time from the yahoo yahoo.com server. Hence this will make other contents to go in queue, wait for the already downloading contents to finish before they get downloaded.

    Hence for the same reasons, we generally server our static content from one or more different sub0domains or full-domains all together. In future Internet Explorer 8 and Firefox are planning to increase this 2 requests per domain to 4-8 requests per domain.

  5. Minify your Javascripts and CSS files: What is minify? It was something developed and introduced by Douglas Crockford. Minifying your sites javascripts and CSS files two purpose at the same time. They decreases the size of your javascripts and CSS files and also hides (make it tougher to parse by others) your javascript calls. I minified javascript file will look like this:

    We can see it makes the size of javascript file by eliminating unwanted white spaces and blank lines. Plus it also makes it difficult for a hacker to tweak in the javascript file.

  6. Put CSS on top and JS at the bottom , avoid inline javascripts: By putting CSS on top ensures that user’s browser will render the page content for your users as and when it gets the HTML content. We want to put Javascripts at the bottom and avoind inline scripts, because while the page loads we do not want browser to start executing the contents in javascripts, which may create a lock time for other contents before they gets downloaded.

Thats it! There are a lot of other things which you may want to do, for making your site page load faster. But the above described 6 points dominates the page load time. I am no expert and still learning the tid-bits of scalable websites, hence if you find any mis-leading content , kindly leave a comment. I will be more than happy to edit the post.

PS: These are a few of the frontend things that we can do on the frontend to make our sites faster. In my next post of this series I will try to bring in the key backend things which can help in faster loading of the webpages.

Enjoy making cooler, faster webpages for your users 🙂

How to get started with web development?

Many of my friends have asked me on how to start with web development. I am not expert but here in this post I would like to describe a few steps that might help one climb the ladder of web development fast. Kindly feel free to add to this blog post if you think some other methodology might be better off.

  1. Where do I start web development? Well the first and best place to start web development is your own system. Yes your very own personal computer. You don’t need a server on internet to start with. Infact I worked locally on my computer for about a month before I went for free hostings, shared hosting and finally VPS. Once you feel that you are comfortable enough with the tid-bits of web development, then you can move to one of them.
  2. How to configure my local computer for that? You have a number of options to start with. I personally started on Tomcat Server after my initial training at Oracle. Tomcat is suited if you are starting with JSP (Java Server/Servlet Pages) . I started by making a few basic pages like creating a login/registration system. I made a few and then hosted on my office computer. Distributed the links to a few around to get the much needed boost. (Yes if you are into web development you need a lot of encouragement and appreciation from others, else your enthusiasm can soon die out). However I soon realized that in todays world of web 2.0 Tomcat is not the thing. So I shifted to Apache.

    Next option you have is to go for Apache (which I use currently for all my developments). I have written 2 posts on how to configure your local system for the same. Read it here: Web Development Part 1 Apache MySQL PHP . If you are interested in starting on a unix machine (which is always the best thing to do) here is the post where I described: How to configure Ubuntu and LAMP on Windows.

  3. Things to concentrate upon initially? Before you go for any big big applications its better to get your basics right. I sucked for long while working with out dated styles and methodology. Here is a bunch of things which you should initially look to:
    • Choose the <div> style to create your HTML pages. I didn’t knew about this methodology and even went ahead to release Altertunes with <table> structure HTML pages.
    • While looking around on internet you will find loads and lot of framework offerings. They really make your work sooo simple. Takes all the burden away from you. Solves all cross browser compatibility for your application and what not. Find a list of frameworks I have tried before here: Essential Frameworks for web development
    • However one thing which you lose by using such frameworks is the insight. You never get to know what cross browser compatibility issues comes and how are they solved. They provide you easy ajax requests but you never get to know the methodology behind it. The biggest drawback which I find is that even for a simplest of application you always need to include whole bunch of files from framework hence making your application heavy for no reason.
    • Hence I finally went ahead coding everything from scratch and never ever used any framework for any of my works.
    • You need to learn how to prevent XSS (Cross browser scripting) and SQL Injection in your applications. Something very important for all your applications.

  4. Getting to a free hosting server: After initial play at your PC, its time to get to a free hosting server which brings in more knowledge and experience. I am lucky in the fact that I moved to X10 Hosting for the very first time. In my opinion they are one of the best in providing free hosts. The amount of features and largely the amount of support at their forums make them the best free hosting services around. I started with http://imoracle.x10hosting.com as my first ever site. Few applications which I build on that were:
    • User login and registration system, where user was authenticated by an link sent to him through email.
    • Inside I had a few basic applications including contact form, multiple picture uploads etc etc.
    • One of the finest feature I had in that was Gmail Contact Import script, which I made using PHP Curl application.
    • Last but not the least I built a chat application similar to browser based chat applications in google and yahoo mails. (Though not that efficient). That was first and the last time I used a framework for any of my application. It was built using Prototype Windows Class framework.

    I told you about these features as these were the applications which got me started initially. Helped me learn the tid bits of web development. May be you too can give a try to a few of them as your first few applications.

  5. Altertunes: Must be wondering why is this name up here again. Well I agree Altertunes fails as a full time product on web but then actually this self initiated project helped me learn all and everything about web development. It was hugely an ajax dominated website with ajax requests flowing in and out of everything you do inside. Basically the social networking aspect inside altertunes helped me learn most of the things. Key things inside altertunes which helped me develop my web dev skills are:
    • Social networking aspects like adding friends, sending personal messages, dedicating a song to your friends etc etc.
    • Importing Gmail, Yahoo and other email contacts. I initially used self made gmail address book import script. But then probably Gmail changed the ways on their mail and my script started failing. However I was lucky to find various services which helps you import mail contacts.
    • Creating of search bots for mp3. This was one of the things done in PERL instead of PHP. Read my blog on how to create an html parser using PERL here. This search bot was similar to any other search bot but it only used to index mp3 files in the database.
    • Use of various web services API’s like Artist Recommendation API by last.fm, Video API by YouTube, Pictures API by Google.
    • Features like creating your custom playlists, bookmarking artists, creation of analytic backend engine to provide users with the best recommended songs based on users listen history.
    • Finally, I learnt to make custom web players. Alterplayer which I made using OpenLaszlo, was something which I did out of PHP, MySQL, Apache.
    • Being at Oracle at that point in time, helped me in maintaining such a relational database with ease.
    • Auto suggest feature which is similar to google auto suggest. Altertunes used to offer you artist names as you typed in the name of the artist.
    • News from Google and Yahoo news. As there were no API’s available for this, I scrapped the google and yahoo news using PERL scripts and showed them to the users. (Illegal it was though) 😉

    However I must say that your website is not complete till you have all the look and feel and User Interface to lure the users. Initially I thought that the UI is coming up good but then as the features which I wanted to offer increased and with my sucking <table> structured HTML pages everything got screwed. However Altertunes helped me develop my web dev skills a hell lot and helped me understanding the right way of doing things. Probably picking up a small project for yourself is always the best idea, as then only you will always try to make your application look more professional.

  6. Time for a shared host : As the traffic increased on Altertunes I had to quickly shift to a shared hosting. I again went for a shared hosting at X10, where I bought a hosting server for around 80$ a year with 99% uptime till date. All my websites including Altertunes, My personal website and a few other under ground works of mine are hosted on the same shared host. Basically shared host assures you of more % uptime, more bandwidth and more forum support from X10. Those guys just go out of their ways at times to help you out.

    However you always have few drawbacks of a shared host:

    • First of all its a shared host i.e. a single CPU with many document roots (one root for each client) in it. At times hosting service providers over shoot the maximum allowed roots on a single CPU, which makes your CPU share low. And hence sucking performances.
    • Your site can go down even without a single error from your side. Yes this is the case which happened with me, when one of the other user on the same CPU set up a cron job (an automated job which runs every X hours) to take a backup of his server every 1 hour. Well in that case every single hour he used to consume maximum CPU cycles and hence all other users their started experiencing major downtimes. However X10 forum moderators are kind enough. They take immediate actions in such cases and ensure everything is fine.
    • You can’t have all PHP PEAR and Perl modules installed. I wanted to have a PHP PERL module installed for me by which I can write perl codes inside my PHP script. But as its a shared host and a package installed effects everyone on the CPU, I was denied by the X10 hosting admins.
    • Similarly for creating a upload meter application you need to have APC (Alternate PHP Cache) module enabled on your server. And I was again denied this package by the X10 hosting as they will cache all other users file which they might not want to.
    • Finally the biggest drawback is that you don’t have access to the httpd.conf i.e you apache server configuration file and your php.ini your php configuration file. Which at times you may want to change to meet your applications demand.

  7. Finally time for a VPS (Virtual Private Server) : When you start feeling you want a total control on your server and applications, its time to switch to a VPS. However they will cost you more than expected. I started with VPS at VPSFarm which I must say totally sucks. Doesn’t go well for me atleast with Zero support (‘Zero’ means zero). I took the Xen 1024 plan which costs around 40$ per month. However by the time my 1st month got over X10 started offering VPS too and with my experience and relations with them I immediately shifted to a VPS at X10. It too costs me same, around 35$ per month with more RAM and more Disk Space.

    However do not move to a VPS because you want to. It takes a lot of hard work to set it up and maintain it further. You basically have no support what so ever. Your mails not going, file not loading, server down, database not working. No one is accountable for that except you. But then you get all the controls on various configuration files which means you can fine tune the system to meet your needs.

    However one thing which I miss is the comfort of CPanel which used to come in by default with free host and shared hostings. I got so used to it in last 1 year.  Plus being from ECE background doesn’t helps me a great deal either. Anyways I suppose I am here to stay on VPS for long. I am slowly migrating all my websites to VPS. 

I guess this is all I had to share here in this post. If I have missed out on anything which many of you have asked me on chat and mails kindly feel free to ask it here. If I feel I need to add anything, will do so.

For experienced developers who accidentally read till here, feel free to add anything you want to. If you feel anything was wrong in my methodology and approach do let us all know. I am still learning.

All the best for all those starting out there.

Patience is the Key I will say finally.

——————————————————————————-
Other Posts you may want to read:
——————————————————————————-

Calendar with Auto-Notification : API and demo.

I was quite impressed with the Google Calendar, Yahoo Calendar and Outlook implementation of the same and wondered how exactly is it done? What are the challenges? So I thought of making a clone of one of them and see if I am able to achieve the same level of perfection.

I must say my 1 day of work did indeed brought some smile to my face as I could see my application running and rocking. Here is it, try out for yourself and Let me know if it worked for you. You can even use it for your day to day needs, my server is up and running forever 😉

Click to visit the Calendar API Demo Page

Important before you try it out:

  1. It will ask you for Email Id and Password.
  2. Give your personal email id where you want to receive event’s notification.
  3. Password can be anything, which you can reuse to login.
  4. It will send out an email to your email id above 30 minutes before the event start
  5. For eg. If you marked an event for 26th July, 2008 – 06:00 PM. You will receive a mail notification of the same at 26th July,2008 – 05:30 PM.
  6. There must be atleast an hour gap between your event time and the moment you are marking it.

STEP 1:



STEP 2:



STEP 3:

Thats it, try out. Works for me perfectly. Let me know about your feedbacks.

Thanks
Abhinav

iPhone Flick Photo SlideShow API

Apple Inc has been the pioneers in the field of innovation and excellent User Interfaces. After iPod they have come up with much hyped iPhone which runs on touch screen technology. I was just looking at this particular feature in iPhone where user can flick the photos in the slide show, and depending upon his flick speed the photos scrolls overs. Excellent application by iPhone we all must agree.

I though why not have such a feature for our websites where users can just flick through the slide show. Basically it started from a mailing list discussion and finally I have come up with the below implementation.

Now before much talking lets see what I have been able to comeup with:

Currently configured to work only on Firefox Mozilla and Flock (Not IE)

Click here for the demo link for this API

Just flick the photos to your left and right and you will experience the magic of iPhone without even having one. I will be releasing it as a part of the Javascript API, however if you are too curious and can’t stop yourself from implementing this on your website kindly have a look at the code and implement it accordingly.

Fell free to discuss and ask any question that you might have on the blog post.

Kindly digg this up and thanks for shouting it out to your friends if you liked this one.

Enjoy and Happy Flicking.

Photo Cropper API: How is it achieved?

Photo Cropper was something which was introduced or I must say became popular after various social networking sites started applying it. This allows users to choose a section from a photo which he wants to upload and show to the world around.

I initially tried to investigate how Orkut do this for their users. Further I took a look at API’s provided by YUI for the same purpose. After investigating a few other sources of photo  cropper I finally decided to build a photo cropper with an approach used by orkut.

I will further explain the algorithm used in more details later, but before that let us have a look at what I have been able to come up with.

Currently configured only for FireFox Mozilla and Flock (Not IE)

Click here to visit the demo section of this API.

Algorithm

  • The upload form is a clone of gmail type attachment, where as soon as you select a file on your system. The upload starts automatically. I have explained and provided open source codes for the same one of my previous posts. Click here to read more on how to achieve this. Gmail Type Attachment Clone
  • Hence as a user selects a file for upload, it is submitted for upload into an iframe. In the iframe I have a file called ajax.php, whose one of the functionality is to save the selected file on the server.
  • After the upload is complete I do the following processes.
    • Hides the upload box.
    • Using iframe, open the uploaded file into a DIV on the parent page. See the source of the page to know more  and inspect the DIV named cropdiv. Basically I set the uploaded image into this div through a javascript function which is invoked from the iframe.
    • After you have opened up the uploaded image, main challenge is how to get the dashed rectangular selection region working. This dashed selection region is the one which users will use to select the section of image which they want to actually show up after upload.
    • For this purpose I have used a method similar to Orkut. To start with I create a dashed DIV of width and height half of the original uploaded image. Also I place this Selection DIV at top left corner and sync it up with the background original image. 
    • Biggest thing which I wondered before making this application was, as user moves the selection region how to ensure that he gets the corresponding section of the image inside the selection region. For this Orkut plays a big trick. They use another image on top of the original underlying image (which is transparent). This second image is knows as proxy image. Now as user shifts the selection DIV x pixel to the right and y pixel to the bottom, I simply move this proxy image x pixel left and y
      pixel top. Hence fooling the user around. User never gets to know if their were two images involved in the process.
    • Once you are done with selecting the portion of choice. I simply sends the top,left position of the selection div and new height and width of the selection div to the server using ajax. Ajax.php again handles this call which takes the parameters and crop the original image accordingly.
    • Finally once the we have our cropped image, we display the same to the user.
  • Another interesting thing which you can do is, allow user to tag the photo after he has cropped the image. I have provided an open source API for tagging photo in one of my previous posts here. Photo Tagging API

As promised before all this will officially be made open source with the API package i am currently working upon. Meanwhile if you really need this currently for your website or blog, feel free to contact me for the same.

If you liked this post kindly digg the same and thanks for shouting it out to your friends.


Creative Commons License

This work is licensed under a
Creative Commons Attribution-Share Alike 2.5 India License.

Gain admin access on windows system using your guest account

Hello All,

Ever thought of how to get into your friend’s system and see the access denied files and folders? Or ever wanted to hack into someone’s admin account? Well here is a method which exploits yet another windows bug.

  1. Have you ever noticed that if you press your system’s SHIFT key >= 5 times continuously a pop up windows occurs with the name “Sticky Keys”? If it doesn’t pop up on your comp, then may be your shortcut is turned off. For enabling it, goto Control
    Panel -> Accessibility Options
    . In the accessibility options under the
    keyboard tab, in sticky keys , click on settings and enable the
    shortcut for sticky keys. And u can do this even with a guest account.
  2. Finally if the following 2 requirements are setup on your system, then you are all set to enter into your admin’s account.
  • On Pressing SHIFT >= 5 times, a pop up should appear.
  • The windows System32 directory should be writable.

Concept:
When u press, the SHIFT key >= 5 times, a file with the name “sethc.exe” is
executed.  You can verify this in TASK manager (don’t close the pop up
window). This file is located in C:WINDOWSsystem32 folder, or
where ever your windows is installed.

The Vulnerability

  1. When SHIFT key is pressed >=5 times, windows executes a file named
    “sethc.exe” located in system32 folder. It doesn’t even check if its the
    same file. Also it runs with the privilege of the CURRENT USER
    which is executing the file i.e if u have logged on as a guest then in
    the TASK manager under processes, it shows your user name as guest.
  2. The file executes even if u log off, and have the windows login screen is
    showed up, BUT THIS TIME SINCE NO USER HAS LOGGED IN IT RUNS WITH
    SYSTEM PRIVILEGE.

Exploitation
If u understand this much, then the exploitation is very simple for you. What we will do is that,
we pick cmd.exe , copy it at a folder other than system32, (because windows
won’t allow u to copy) rename it to sethc.exe, go to system32 folder,
and paste it. Windows will ask, “that another file exists, do u want to
replace?” and after pressing OK, you have replaced the sethc.exe with ur own
cmd.exe. Now if u press SHIFT key >=5 times, a command prompt will
pop-up.


Finally

  1. Now log-off or restart. When you reach the windows
    login screen, press the shift key >=5 times. A command prompt will
    pop up with SYSTEM privilege.
  2. Enter the normal commands as follows:
  3. net user username /add
  4. net user localgroup administrators username /add
  5. And a new user called username with admin privilege will be added.

And thats it, you have admin privilege of the system and you can do what ever you want to with it.

Hiding your fake admin profile
Now you surely don’t want the real admin to track you. Here is what you will have to do to hide yourself from login screens as well as from control panel

  1. Goto registry editor and open this place.
  2. [HKEY_LOCAL_MACHINESOFTWAREMicrosoftWindows NTCurrentVersionWinlogonSpecialAccountsUserList]
  3. Here create a new DWORD value, write its name as the “user name” that u created for your admin account.

Thats it now you are invisible but still admin of the system. Live as admin forever and keep screwing the real admin forever.



Last but not the least (IMPORTANT)
Windows has two type of login screens:

  1. Where the accounts are listed with some pictures.
  2. Where u have to write username and password.

After making the hidden account u will have to login through the 2nd step only. If ur login screen is of Type 1, press ALT-CTRL-DEL twice to get the 2nd type screen.

Thats it!!!

NOTE:
This is a sureshot way to gain admin, if u r a lamer or a newbie
then please do some googling.
I have written almost every detail.

Thanks for reading this far 🙂 Make a comment if you liked this one.

Thanks for digging and shouting it out to your friends.