Building Injoos

A conventional websites with multiple images take a long time to load and generates multiple server requests. Think your website has a small logo, a set of icons for comment, like/dislike, navigation, backgrounds images etc. loading all these generates multiple requests and also takes relatively more time to load.

Instead if we can load all the images that need to be displayed on the web page with just a single request it  reduce the time taken to render the whole web page.

An image sprite is a collection of images put into a single image. Image sprites will reduce the number of server requests and save bandwidth.

Now How to create sprites?

You should know bit of Photoshop or any other image editing tool with bit of CSS.

First create sprite image by joining all the images that needs to be loaded using any image editing tool (even MS Paint will do but if you are playing with PNG better to use Photoshop and create a single image and do a save for web to optimize the size).

Say the image is image_sprite.png

Write few CSS classes to serve up the images

Example

.base { background:url(image_sprite.png); }

And say you have a logo of size 40px * 20px

Define logo class as

.logo { width:40px;height:20px;background-position:0 0; }

0 0 in background-position defines left 0px, top 0px of the image.

And replace your <img src=”logo.png” /> with <span class=”base logo”> </span>

To get next image just change the background-position of the class with required width and height

.comment-icon{ width:16px;height:16px;background-position:-40px 0}

And replace your <img src=”comment.png” /> with <span class=”base comment-icon”> </span>

You can use images sprites for anything as long as images in the sprites are small sized (not that you can’t use CSS Sprites for large images but not recommended because big images themselves take more time to load so sprites of big images takes much more render time)

You can use css sprites to create effects like on hover change the background etc.

A sample code

image: sprite.png

CSS class for few of the above icons :

.plus { background:url(‘sprite.png’);background-position: 0px 0px; width:16px;height:16px;}

.alert { background:url(‘sprite.png’);background-position: 0px -26px; width:16px;height:16px;}

.black-dot { background:url(‘sprite.png’);background-position: 0px -78px; height:8px;width:8px;}

.down { background:url(‘sprite.png’); background-position: 0px -115px; height:10px;width:10px;}

So now what are you waiting for enhance your websites performance now

Happy coding… 

useful links:

http://csssprites.com/

Introduction to FOSS

Free and open source software is software which is liberally licensed to grant the right of users to study, change, and improve its design through the availability of its source code. Did you know that Firefox is a Free and Open source software? GNU/Linux, VLC player as well, we can get the source code of these projects and use it to study and modify it according to our requirements. The code we write will be used by millions of people across the world. Some other famous Free softwares include Apache web server, Eclipse IDE, Sun’s Java, MySql database management system etc.

Let’s consider one of the projects here and then proceed. The project we are trying to build here is GNUSim8085. It is a 8085 simulator. The code is written in C, the front end is designed using GTK (GTK stands for GIMP Tool Kit, It is the building block of GNOME Desktop Environment on GNU/Linux).

Installing the software

One of the pre-requisites for most of the FOSS projects is a Unix/Linux machine. Almost all Open source projects have a domain where they host their project. The official page of the GNUSim8085 project is http://gnusim8085.sourceforge.net/. Here, we can download the program and start using it. The example programs that come bundled with it is sufficient to get a feel of the software. Debian and distributions based on it, like Ubuntu can install it from the command line using the command

$ sudo apt-get instal gnusim8085

Getting the source code

The Source code can be downloaded from the same link mentioned before, but this is not the latest source code. This is the code on or before the last release of the software. All the development that happens goes into a directory called the ‘trunk’. This ‘trunk’ has the latest code at any point of time. It is maintained with the help of Revision Control system.

Many people across the world will be working on a single project. The Revision control systems are used to synchronize their work. Whenever a developer from one part of the world submits code to this ‘trunk’, the source file must be updated with this newly submitted code. We will see its functionality later on. Some of the Revision control systems widely used in FOSS are SVN (SubVersion) , CVS ( Concurrent Versions System), Git, Bazaar etc..

We can see in the GNUSim8085 website that it uses SVN for managing the project. Along with that they have also provided the URL of the SVN server where the project is hosted. Now we can download the source code from the link provided using the command:

$ svn co https://gnusim8085.svn.sourceforge.net/svnroot/gnusim8085/trunk gnusim8085

Here ’svn’ is the subversion client which will fetch the source code from the link provided and save it in gnusim8085 directory. The ‘co’ used in the command is an instruction to the subversion client to ‘check out’ (download) the code from the trunk.

If svn is not installed in the system, one can install it by following the instructions from http://subversion.tigris.org/ Debian and distributions based on it, like Ubuntu etc can install it using the command

$ sudo apt-get install subversion

Building the Project

Along with this, we will need some compilers to build the GNUSim8085 project. These compilers can be installed from the repositories depending on the Linux distribution one is using. Debian and distributions based on it can install it using the command

$ sudo apt-get install build-essential

We just used the term ‘build’, what exactly does this mean? We might have compiled many programs which are just 40 to 50 lines. When a project grows, we cannot restrict the entire code in a single file, so we have to split them into different files in order to increase the readability. This neat organization comes at a cost; we have to specify the order in which these files must be compiled before the object file is created. It gets more complicated as the project grows. Hence to avoid this, the concept of build system was introduced. With the help of this build system, the user need not worry about the sequence of compilation etc. He/she can concentrate on the implementation aspect of it. The build system generates a ‘Makefile’. This ‘Makefile’ is nothing but a set of rules that guides the compiler to compile files of a project in the desired manner thereby eliminating the complication.

Once the compilers are installed, we can start building the GNUSim8085 project. Now we move to the directory where the source code is present.

$ cd gnusim8085

Here, we have to configure all the pre-requisites or dependencies in order to build the software and make use of the configure program.

$ ./configure

‘Error: Cannot find libgtk2.0 >= 2.12.0′

Here, we will be informed that we do not have libgtk2.0 library. By searching on the internet, we get the exact library name. We can install this using the command:

$ sudo apt-get install libgtk2.0-dev

Once this is installed we proceed with configuring the build system.

$ ./configure

‘Error: Cannot find gtksourceview2 >= 2.2.0′

This time it asks for the gtksourceview2 package.

$ sudo apt-get install libgtksourceview2.0-dev

$ ./configure

Now we should not come across any errors. If there are any, simply Google the error message, it will provide the solution almost instantaneously. The configure process is complete now.

Now we build the project using the make command

$ make

Once this is complete, the binary file is created in the ‘src’ directory.

$ cd src

This is the directory where all the C source files and the header files are present. All the changes we wish to make must be made here. We shall leave it as it is for time being.

$ ./gnusim8085

This is the program that we have built from the source. This command launches the GNUSim8085 program.

Contribution

If you think you can make this program better, then go ahead with your idea, implement it and submit it.

If you are not sure of what to do exactly: The program we are currently running is not 100 % bug free. There are errors! The list of all the bugs is submitted in the project webpage.

https://sourceforge.net/tracker/?group_id=86462

Here we can select either bugs or feature requests, make modifications in the code to fix the bug or provide the needed feature.

Once we have made the necessary changes to the code, the source must be re compiled.

$ cd ..

Moving to the parent directory

$ make

This command carefully compiles the files that were changed since the previous build.

$ cd src

$ ./gnusim8085

The program that executes now is the one with our modifications.

The code I have written works absolutely fine. How do I submit it to the project maintainers? To do that, we need to create something called a patch. Patch is nothing but a ‘diff’ file (‘diff’ is a Unix command which gives us the difference between two text files). This diff file is uploaded to the sourceforge.net website where we came across the bug or the feature request.

Generating the patch

$ svn diff > Gnusim8085_bugno.patch

Attaching the bug number is a good practice since it can be used to keep track of patches.

This is how one can start contributing to the Free and Open source Software world.

When the virtual system boots, it takes the hardware clock from the node (the parent hardware) and sets that as the time.

The OS then adopts that time as the real time.

To fix this for Linux server,

Install Network Time Protocol(NTP), and it is an Internet protocol used to synchronize the clocks
of computers to some time reference

yum install ntp

Configure the ntp.conf configuration in /etc/ntp.conf

server 127.127.1.0 # local clock
fudge 127.127.1.0 stratum 10
server <<enter-parent-hardware-ip-or-dns>>
server <<enter-parent-hardware-ip-or-dns>>
driftfile /etc/ntp/drift
broadcastdelay 0.008
restrict default notrust nomodify nopeer noserve
authenticate no

Use chkconfig runlevelinformation for system services in linux, ntpd should start service at boot time of virtual server
chkconfig ntpd on
chkconfig –level 2345 ntpd on
chkconfig –list ntpd

Start the ntpd deamon
/etc/init.d/ntpd start

OAuth_Twitter.php is a library which makes a layer between your twitter App and Twitter API. If OAuth_Twitter.php is included inside your code, which acts as a gate way for your Application to Twitter API, you can access Twitter data using the methods of this Library.

Setting up the coding environment
As stated above OAuth_Twitter.php uses Zend OAuth package in its backend. So it requires OAuth package in your code base. This package is included in the latest version of Zend Framework or you can download it from code.google. . Once its done you can download OAuth_Twitter.php from git repository, and copy to proper include path. A detailed documentation is also provided with this, to make your journey easier.

How to use this Library
This library provides a class ‘OAuth_Twitter’ which accepts your twitter app configuration data which is provided by Twitter at the time of Registering the app. This configurations have to be provided to the class as an array.

$my_twitter = new OAuth_Twitter($configuration);

Most of the functions require twitter authentication to complete. So it will redirect to twitter authentication page, and on successful authentication it will redirect to the callback url of your app . There the app has to save the access token for other functions to work with the same session. This will be done using the following function

$my_twitter->handleCallback()

DONE \0/  \0/ \o/

Now you can use the functions directly in you code like

$my_twitter->updateStatus($status)  –> to update your status

$my_twitter->getFollowersByHandle(‘injoosweb’)  –> To get the followers list of injoosweb

$my_twitter->getFollowersByHandle(‘injoosweb’)  –> To get the followers list of injoosweb

$my_twitter->getPublicUpdatesByHandle(’injoosweb’) –> To know whats happening in injoos

Start Rocking ……….

IRC stands for Internet Relay Chat. IRC is the most preferred mode of communication in the Free and Open source world. We may have to wait for a few hours for a reply if we choose e-mail or some forum as our communication channel. On the other hand, we can use IRC which is very fast.

Getting Started

Most IRC servers do not require users to log in, but a user will have to set a nickname before being connected. It is advised to have a nickname. Let’s see how to create an account and connect to IRC channels. We’ll need an IRC client in order to login to the network. We are using Pidgin, because it comes pre-installed on many GNU/Linux distributions.

We can manage multiple accounts from this single chat client. Some of the protocols supported by Pidgin are:

• AIM
• Gtalk
• IRC
• MSN
• MySpace
• Yahoo etc

Click on the Add button

-> Select IRC from the protocol menu

Provide the Nickname in the Screen name field.

Change the server to irc.freenode.net

Leave the password field blank.

I have chosen the screen name: ‘username’

As soon as we login, a message from freenode-connect is received. It looks like this:

(02:23:14 IST) freenode-connect: Received CTCP ‘VERSION’ (to username) from freenode-connect

If the Nickname (screen name) is already chosen by someone else, we can change the nick name with the help of this command in the window that just opened:

/nick new_nick_name

If username already exists, we can try for other nicknames like username2 by typing the command

/nick screen_name

If we want to start using IRC without registering our nickname, we can do so by entering this command.

/join #channel-name

If we want to join the #bmslug channel, we need to type the command

/join #bmslug

We get a window which is similar to a chatroom :

To address someone, type the first few characters of their name and hit the tab key, the auto complete function will complete their name and append a “:” to it. Now we can type the message and hit the enter key.

To Register the nickname

/msg nickserv register <password> <email>

This command registers us with the current Nickname of ours.

We can identify ourselves with the command:

/msg nickserv identify <password>

This completes the basic usage of IRC.

Download and install WAMP server from:

http://sourceforge.net/projects/wampserver/files/WampServer%202/WampServer%202.0/WampServer2.0i.exe/download or

http://www.wampserver.com/en/download.php

Download Zend Library code from:

http://framework.zend.com/download/latest

Add library of zend framework folder (downloaded from above link) to php ini’s include path

And now before we start using Command Line Interface (CLI) to create your project copy  zf.bat and zf.php files to php bin directory (c:\wamp\bin\php\phpx.x\ if wamp is installed on c:\wamp)

Next add php.exe to windows path [to add to windows path go my computer right click select properties and in system properties select advanced then select Environment variables browse path in system variables then click on edit then parse till the end insert a semi colon and path ‘;c:\wamp\bin\php\phpx.x’  after this go to cmd prompt and type php –help to check]

Go to cmd prompt and change the working directory to php bin directory [ cd  c:\wamp\bin\php\phpx.x\ ]

Run zf.bat create project <project_name>from current working directory this command will create your basic site structure, including your initial controllers and views. The folder tree looks like the following:

<project_name>

\application

\application\Bootstrap.php

\application\configs

\application\configs\application.ini

\application\controllers

\application\controllers\ErrorController.php

\application\controllers\IndexController.php

\application\models

\application\views

\application\views\helpers

\application\views\scripts

\application\views\scripts\error

\application\views\scripts\error\error.phtml

\application\views\scripts\index

\application\views\scripts\index\index.phtml

\library *

\public

\public\.htaccess

\public\index.php

\tests

\tests\application

\tests\application\bootstrap.php

\tests\library

\tests\library\bootstarp.php

\tests\phpunit.xml

*After creating your project copy the contents of zend framework library to <project name> /library folder

[copy  path/to/ZendFramework/library/Zend  and paste it in /library]

Change document root and directory settings of wamp server to <project_name>\public folder in httpd.conf file

And add your mysql connection details to <project_name>\application\configs\application.ini

resources.db.adapter = PDO_MYSQL

resources.db.params.host = localhost

resources.db.params.username = <mysqlusername>

resources.db.params.password = <mysqlpassword>

resources.db.params.dbname = <mysqldb>

and you are done restart wamp server and start coding your project.

Happy Coding

For more info visit:

http://framework.zend.com/manual/en/learning.quickstart.create-project.html

For help on CLI

http://framework.zend.com/manual/en/zend.tool.framework.clitool.html#zend.tool.framework.clitool.setup-general

While we build and enhance the Injoos Social Collaboration platform we thought that it would be interesting and useful to share some of our learnings in building this platform. So what we will do on this blog is to share code snippets, tool & framework configurations, coding standards etc. so that you could benefit while building your own product and Apps. This blog will be a two way process so we look for your suggestions and inputs which will give even more benefit to our readers and help us improve Injoos.