Showing posts with label Tips. Show all posts
Showing posts with label Tips. Show all posts

Wednesday, April 10, 2013

Testing the performance of a web application

Currently, I am working with a web application and one of the main duty is to improve the performance of the application. I am trying to reduce the page refresh time first. Here I m going to note down all the tools and techniques I am utilizing.
To identify exactly what is bottle-necking I used the following tools:
FireBug
IE Developer tools
Yslow
Pagespeed
Fiddler
I needed to compress/minify my css and js files. I got some tools that are of high rank. But finally I wrote my own tool to perform the same :
https://github.com/marifrahman/WebResourceCompressorForm

Some of the clients has very slow internet connection. Therefore I needed to test the site using low speed internet  To accomplish that following tools were very useful.
Sloppy
a fiddler extension [http://fiddlerdelayext.codeplex.com/]

Sunday, February 26, 2012

jQuery Datatables plugin and Codeigniter


Just got an work around for the jQuery datatables wrapper [IgnitedDatatables] and made it working on a project to load huge data. As I din get any neat info I had to dig little deep both into datatables plugin and the wrapper and finally made a work around for me. Here in this post I am basically sharing my experience along with keeping records of what and how I did :)
The js I am using on the view to create the datatable and load using ajax is as follow [don try to run on jsFiddle 'cz it has lots of garbage- will clean it up :| ] :


Code on the controller:


And finally the model:


I will write in details on it - how I actually worked on later on this post.
Tips:
  1. For the callback function for the wrapper to work you need to create a helper file where you need to put all the callback functions.
  2. As the wrapper somewhat works as the model should work I have called and made use of it in my model class.
Reference:
  1. jQuery Datatables plugin api
  2. Server side data processing using Datatables plugin
  3. IgnitedDatatables function reference; and Method Chaining example
  4. Example usage code for the IgnitedDatatables library [independent of Codeigniter]
  5. Sample MySql Database [Sakila :)]

Sunday, February 12, 2012

Dynamically add a group of fields using jQuery

Its not a so tough thing, tough. Just wanted to keep a record and add a tip :) Following is the code I am using:

Note:
I was facing a problem, when the groups of fields grows  more then the view area for each click to create the window jumps to the top of the page; To resolve, to remain where I was creating the new fields I just added one line return false as the last line of the click even.
Instead of remaining the same place if you want to scroll to some where else you can use the following jQuery plugin:
scrollTo

Wednesday, February 8, 2012

Manipulating Auto Increment values in MySql



  1. Set the MySql variables auto_increment_increment and auto_increment_offset variables.
  2. Play with the Auto_Increment in Information schema.
To start with an AUTO_INCREMENT value other than 1, you can set that value with CREATE TABLE or ALTER TABLE, like this:
ALTER TABLE tbl AUTO_INCREMENT = 100;
Note:It is not possible to confine the effects of these two variables to a single table, and thus they do not take the place of the sequences offered by some other database management systems; these variables control the behavior of all AUTO_INCREMENT columns in all tables on the MySQL server. If the global value of either variable is set, its effects persist until the global value is changed or overridden by setting the session value, or until mysqld is restarted. If the local value is set, the new value affects AUTO_INCREMENT columns for all tables into which new rows are inserted by the current user for the duration of the session, unless the values are changed during that session.


Wednesday, December 7, 2011

My Instant Continuous Integration environment for development


A simplest dev environment for continuous integration for a dev team [considering a php project with mysql db] :
1. Install Visual SVN server - its for windows and easy to install and manage SVN server.
2. Create a post commit hook for the repo; to do that - In the VisualSVN Server GUI Tool:
-Select your repository
-Right click Properties Select the Hooks tab
-Select the Post-commit hook
-Click the Edit button.
-Enter a line like this into the textbox:
c:\program files\visualsvn server\bin\svn.exe" export https://svn.yourserver.com:4433/svn/YourRepository/Websites/YourWebsite/ C:\inetpub\wwwroot\YourWebsite --quiet --non-interactive --force --username youruser --password yourpassword
-Click Ok.
3. Now for the DB Sync follow the steps in the following article : [However, you might need some modification to meet your need]
http://www.decodephp.com/2008/09/29/svn-and-mysql-schema-synchronization/

Surely, You can add more flavor to this environment, like you can add a script to run each day so that it grabs all the commit logs and emails to the test team and/or stack holders or may to the entire team - so that everybody remains better informed.

Hope this will help us a to remain synced in an Agile team.
Those who is not aware of the term Continuous Integration, you can check this wikipedia link

Sunday, November 13, 2011

Installing php driver for MongoDB

PHP      &   mongoDB


This is the post where I will configure php to work with mongoDB. On my previous post I have put the teps I followed to install mongoDB on my Ubuntu [TurnKey Linux] running on VirtualBox.
1.Run:
sudo pecl install mongo
2.Open your php.ini file and add to it:
extension=mongo.so
It is recommended to add this to the section with the other "extensions", but it will work from anywhere within the php.ini file.
3.Restart your web server (Apache, nginx, etc.) for the change to take effect.
Note:
pecl requires that pear be installed. For those using apt-get, you may need to run the following:
sudo apt-get install php5-dev php5-cli php-pear
However, you can download the source for the driver and can compile it manually :
shell> tar -xzvf mongo-1.2.6.tar.gz
shell> cd mongo-1.2.6
shell> phpize
shell> ./configure
shell> make
shell> make install
Check with the phpinfo

Starting MongoDB and php on Ubuntu

Installing MongoDB on Ubuntu:
1. Add 10gen package to source.list 
The 10gen package contains the latest mongoDB version, append below line to the end of the file “/etc/apt/sources.list”
deb http://downloads-distro.mongodb.org/repo/ubuntu-upstart dist 10gen
For example, you can vim the “source.list” and append the 10gen package like this :
$ sudo vim /etc/apt/sources.list
File : /etc/apt/sources.list
#...content omitted ...
## This software is not part of Ubuntu, but is offered by third-party
## developers who want to ship their latest software.
deb http://extras.ubuntu.com/ubuntu natty main
deb-src http://extras.ubuntu.com/ubuntu natty main
 #mongo repo ##########
deb http://downloads-distro.mongodb.org/repo/ubuntu-upstart dist 10gen

 2. Update package
Update the modified “/etc/apt/sources.list” :
sudo apt-get update
Now, a new “mongodb-10gen – An object/document-oriented database” is available for install.
  3. Add GPG Key
10gen package required GPG key, import it :
sudo apt-key adv --keyserver keyserver.ubuntu.com --recv 7F0CEB10
   4. Install mongodb-10gen
Everything is ready, now you can Install the mongoDB package :
sudo apt-get install mongodb-10gen
    5. Post-InstallationVerification
Now, mongoDB is installed, started, and auto start mongoDB script is generated to “/etc/init/mongo” and “/etc/init.d/mongo“. In addition, all mongoDB files are copied to “/usr/bin” folder.

The main configuration file “mongodb.conf” is located at “/etc/mongodb.conf“, change the values to customize your mongoDB server.

File : mongodb.conf
# mongodb.conf
# Where to store the data.
# Note: if you run mongodb as a non-root user (recommended) you may
# need to create and set permissions for this directory manually,
# e.g., if the parent directory isn't mutable by the mongodb user.
dbpath=/var/lib/mongodb
#where to log
logpath=/var/log/mongodb/mongodb.log logappend=true
#port = 27017
#......
   6. Verification
To verify it, just connect it with “mongo”
$ mongo
MongoDB shell version: 1.8.1 connecting to: test
>
on my next post I will try to connect php with this mongoDB.

Monday, October 3, 2011

Hack a Blackberry 9700 Bold to access internet without BlackBerry data service

[I kept this post for long as Draft; thought I shud l publish; ]
Playing with the Blackberry 9700 from Sujoy who was not using it because it cost a lot to enable Blackberry service with the Operators who are offering BB services.
So I picked it up just to see why should such a device left unused just because some kinda service is not available or bcz its expensive. Following are the things what I am currently doing with it :
Setting the Internet connection without the Blackberry data service :
First of all you have to set up your tcp settings. In your BlackBerry menu go to => Options - Advanced Options - TCP and enter your APN information for your GSM Service.You can ask your customer care for the APN information.When you finish the settings you need a browser to surf the net. The best one is Opera Mini Browser. You download the Opera Browser to your BlackBerry and in the Opera Browser menu you go through automatic network setup. Once the Opera Browser finds out your settings you are ready to surf the net from you BlackBerry for free. (Excluding standart connection charges- for the GPRS/Edge from your GSM service provider)
Happy, browsing then without paying the BB service :P.

Thursday, January 28, 2010

Sending Valid Emails from Website



E-mails are one of the key elements of a website/web application. They are used in contact forms, sign-ups, notifications, newsletters, etc.

It is a common experience that sometimes e-mails sent from websites go to the junk folders or never reach.

Although it is not always possible to detect the reasons for this, there are several things that we can do to minimize the risk. Here they are:



  • Send E-mails Through A Valid E-mail Server With Authentication

This is the most important one which you may be automatically offering all the tips below.

It is mostly a good idea to send website e-mails through the e-mail server that will require authentication rather than the web server's SMTP server. Servers that are specifically set to send e-mails generally have Reverse DNS & SPF records, support greylisting ,etc.

Every scripting language offers methods to send e-mails with authentication.

On the other hand, sometimes, using e-mail servers are not enough as you may need to send lots of e-mails but the hosting provider may be applying limits, etc. In such cases, if you'll be sending e-mails through your web server, make sure to check these all:

  • Reverse DNS (rDNS)

As every domain resolves to an IP address, optionally, IPs can resolve to domain names which is called reverse DNS.

Many spammers use non-existing or dynamic e-mails without reverse DNS records. E-mail servers generally check if the sender IP has a reverse DNS record or not.

How to add reverse DNS records?: reverse resolving uses the pointer DNS record type (PTR record) which you should be asking your hosting provider to create it (check if it exists).

  • SPF Records

Sender Policy Framework is being used by more & more e-mail providers everyday (Gmail, Hotmail & Yahoo uses it) as a criteria to detect if a message is spam or not.

It simply allows the owner of a domain to specify their mail sending policy, (like which mail servers they use to send mail from their domain).

SPF records are DNS TXT records which an online setup wizard can help you creating it (you'll need to create new DNS records).

  • Using A SMTP Server That Supports Greylisting

A very powerful spam prevention method used by mail servers is called greylisting.

When you send an e-mail, the server receiving it can say to your SMTP server: "send it to me again in x minutes" which is mostly not supported by the methods spammers use.

So, you need a smart SMTP server who can understand this command (IIS SMTP can not) that will re-send the e-mails when requested.

  • No Bulk Mailing

Both the SMTP server you'll be sending e-mails & the servers that will receive them generally have rules to define an IP/e-mail as spammer who sends x number of mails in y seconds.

So, if you have a large userbase to send e-mail, it will be a good idea to send them in intervals.

  • No Sending Of E-mails In Alphabetical Order

Again, if you'll be sending e-mails to a large userbase, don't send them in alphabetical order of e-mails as mail servers can mark them as a dictionary attack.

  • Check If The Server IP Is Blacklisted

Blacklists are systems, that are used by most of the e-mail service providers, that has bot or human e-mail accounts which analyze the common e-mail traffic & can blacklist IPs according to e-mails sent from them.

The server you're using to send e-mails can be shared by many other users. And, a spam that is sent by anyone on that server can lead to a "blocking" by e-mail blacklists which will damage the communication of every account on it.

You can check if you IP is blacklisted from different resources.

I'll be updating if I get and experience any other tips for it.

Tuesday, November 3, 2009

How to htaccess: Password Protecting Your Pages

Scenarios:
  • You're building a new site, but you only want yourself (and maybe a select few) to be able to view the work-in-progress.

  • You have an area of your site that you never want the general public to have access to - for example, your web stats or private pages.

  • You have some paid (subscription) content on your site that only subscribers should be able to access.

Apache lets you password protect individual files, folders, or your entire site fairly easily. Read on to find out how it's done.

What to do:

To add password protection to your pages, you need to do the following two things:

  1. Create a text file on your server that will store your username and password.
  2. Create a special file called .htaccess in the folder you want to protect.

That's it! Now let's take a look at how to do each step.

How to do:

  • Creating the Password file:

The first step is to create a simple text file that will store your username and password, separated by a colon (:). The small catch is that the password must be encrypted. Luckily, there are many free web-based utilities that will encrypt the password for you. Try one of these:

Simply enter your desired username and password in one of these pages and submit the form. You'll get back a string similar to the following:

bt:3kgHAH7CKtZAw

Now, open up your favourite text editor (e.g. Notepad or TextEdit), then copy and paste the username/password string into the editor. Save the file and call it .htpasswd.

Next, upload this file to your website. Make sure you place it outside the Web root of your site if possible, as you don't want just anyone to be able to view the file! For example, place it above your public_html or htdocs folder. (Having said this, Apache is often set up by default to block web-based access to files beginning with .ht. Better safe than sorry though!)

If you can't place your .htpasswd file outside your Web root, name it something that's not easily guessable - for example, .htxuymwp - so that people won't be able to find it easily. (In addition, it helps to start the filename with .ht; as mentioned earlier, Apache usually blocks access to files starting with .ht.)

Alternative: Creating the password file using htpasswd
If you have SSH access to your web server (or you're running Apache on a local machine), you can encrypt your password and add it to your password file in one go by using the htpasswd utility that comes with Apache. Simply SSH to your server or open up a terminal window on your local machine, cd to the folder where you want to create your password file, and type:

htpasswd -c .htpasswd fred

(where fred is the username you want to use). You'll be prompted to enter and retype your password, then the .htpasswd file will be created for you.

  • Creating the .htaccess file :
Now that you have created and uploaded your password file, you need to tell Apache to use it to protect your page(s) or site. This is what your .htaccess file will do.

Open your text editor again, create a new file, and save it as .htaccess.

Protecting a folder: To password protect a folder on your site, you need to put the following code in your .htaccess file:
AuthUserFile /full/path/to/.htpasswd
AuthType Basic
AuthName "My Secret Folder"
Require valid-user

/full/path/to/.htpasswd should be the full path to the .htpasswd file that you uploaded earlier. The full path is the path to the file from the Web server's volume root - for example, /home/username/.htpasswd or C:\wwwroot\username\.htpasswd. (If you're not sure of the full path to your site or home directory, ask your Web hosting company for this info.)

The above .htaccess file will password protect all files in the folder that it is placed in, and all sub-folders under that folder too. So if you wanted to password protect your entire site, you would place the .htaccess file in your Web root folder.

Protecting a file: To password protect just a single file in a folder, use the following .htaccess file:

AuthUserFile /full/path/to/.htpasswd
AuthType Basic
AuthName "Restricted Access"
Require valid-user
This will password protect just the mypage.html file in the folder where you put the .htaccess file.

  • Uploading the .htaccess file
Once you've created your .htaccess file, upload it to your website, placing it in the folder (or folder containing the file) that you want to protect.

Utilization:
Now use your Web browser to visit the folder or file that you've protected. You should see a password dialog like the one shown at the start of this tutorial. Type in the username and (unencrypted) password that you chose earlier, and you should be given access to your folder or file!

Note: with this type of password protection, you continue to have access to the password protected stuff until you restart your browser.

You have got issues?
If you can't access your stuff and the dialog keeps popping up, check that you entered the username and password correctly. If it still doesn't work, check the path to your .htpasswd file on the server - make sure the path specified in the AuthUserFile directive is correct. Also make sure that both the .htpasswd and .htaccess files are readable by the Web server user (chmod 644 should do the trick for UNIX/Linux/FreeBSD servers).

If the password protection isn't working (i.e. you can still access your stuff without needing to enter a username/password), check that you uploaded your .htaccess file to the right folder. Also check that your web server supports .htaccess password protection (it needs to be an Apache server, and your server admin needs to have enabled the AuthConfig override for your site).

Password protecting more stuff
  • If you want to password protect other folders (that aren't under the currently protected folder), simply copy your .htaccess file to the new folder to be protected.
  • To password protect more than one file in the same folder, just create more blocks within the same .htaccess file - for example:
AuthUserFile /full/path/to/.htpasswd
AuthType Basic
AuthName "My Secret Page"

<Files "mypage.html">
Require valid-user
</Files>

<Files "myotherpage.html">
Require valid-user
</Files>

Adding more usernames and passwords
You're not restricted to just one username/password. If you want to add other usernames and passwords, simply repeat the "Creating the password file" procedure above, but add each new username/password line to your existing .htpasswd file, e.g.:

arif:p29cmnwl4a0et
stranger:vwp45xakfh89

Alternatively, if you're using htpasswd to create your passwords, as described earlier, then you can add extra users with the command:

htpasswd .htpasswd stranger

(where stranger is the username you want to add). Make sure you don't include the -c option when adding additional users, or htpasswd will attempt to create a new password file!

Reference:

Friday, October 23, 2009

Trimming with Javascript

I simple but effective implementation of javascript for trimming extra spaces from a string. A good use of it could be on form validation.
The custom trim function :
function trim (str) {
var str = str.replace(/^\s\s*/, ''),
ws = /\s/,
i = str.length;
while (ws.test(str.charAt(--i)));
return str.slice(0, i + 1);
}
Typical use of trim :
function validate()
{
val = document.getElementById("txt").value;
retval = trim12(val);
alert(retval);

}
Surely if you use any rich javascript library a trim method should come with it. Have fun :)

Thursday, April 30, 2009

How To : Styling a file type input

Of all form fields, the file upload field is by far the worst when it comes to styling. Explorer Windows offers some (but not many) style possibilities, Mozilla slightly less, and the other browsers none at all. The "Browse" button, especially, is completely inaccessible to CSS manipulation.

The Solution

Fortunately, reader Michael McGrady invented a very neat trick that allows us to (more or less) style file upload fields. The credits for the solution presented on this page are wholly his, I only added the position: relative, a few notes and tests, and ported it entirely to JavaScript.


McGrady's technique is elegant in its simplicity:

  1. Take a normal <input type="file"> and put it in an element with position: relative.
  2. To this same parent element, add a normal <input> and an image, which have the correct styles. Position these elements absolutely, so that they occupy the same place as the <input type="file">.
  3. Set the z-index of the <input type="file"> to 2 so that it lies on top of the styled input/image.
  4. Finally, set the opacity of the <input type="file"> to 0. The <input type="file"> now becomes effectively invisible, and the styles input/image shines through, but you can still click on the "Browse" button. If the button is positioned on top of the image, the user appears to click on the image and gets the normal file selection window.
(Note that you can't use visibility: hidden, because a truly invisible element is unclickable, too, and we need the <input type="file"> to remain clickable)

Until here the effect can be achieved through pure CSS. However, one feature is still lacking.

  • When the user has selected a file, the visible, fake input field should show the correct path to this file, as a normal <input type="file"> would. It's simply a matter of copying the new value of the <input type="file"> to the fake input field, but we need JavaScript to do this.

Therefore this technique will not wholly work without JavaScript. For reasons I'll explain later, I decided to port the entire idea to JavaScript. If you're willing to do without the visible file name you can use the pure CSS solution. I'm not sure if this would be a good idea, though.

The HTML/CSS Structure

I've decided on the following HTML/CSS approach:

div.fileinputs {
position: relative;
}

div.fakefile {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}

input.file {
position: relative;
text-align: right;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
}

<div class="fileinputs">
<input type="file" class="file" />
<div class="fakefile">
<input />
<img src="search.gif" />
</div>
</div>

For original article check at www.quirksmode.org

Tuesday, March 31, 2009

How To : Put HTML Code in your post

How to put HTML code in blogspot post or blogger post actually is a topic that out of date. Since many of my friends still ask me how to do that, I guess it’s better if I write the trick here. And here we go the trick.
  1. Open http://centricle.com/tools/html-entities/ on your browser.
  2. Copy your HTML code that you want to post and start encode there.
  3. If it’s finished, now move to your posting area.
  4. Make sure you choose the “edit HTML” options
  5. then simply paste the encoded code that you have from centricle.
  6. After that, you can continue edit your post or simply publish it.
Happy blogging then :)

Monday, January 12, 2009

Custom Background Image for Windows Explorer

"Windows Explorer Background Images
... Ever get confused which hard drive you are working in? Well, the Windows Explorer can put different backgrounds on them to help you remember. Just create a file at the root of your drive called desktop.ini and place the following in it:

[ExtShellFolderViews]
{BE098140-A513-11D0-A3A4-00C04FD706EC}={BE098140-A513-11D0-A3A4-00C04FD706EC}
[{BE098140-A513-11D0-A3A4-00C04FD706EC}]
Attributes=1
IconArea_Image=background.gif

Next, find a washed-out image or create a light color in MSPAINT and put it there called background.gif. (be sure to make the file type a GIF too) Open Windows Explorer and see your creation! ... "

This is kind of neat... It is a very quick and simple way to customize a folder, including a drive's root folder.

Some notes:
1. The change is not recursive. So the background image does not show in subfolders.
2. The background.gif will tile.
3. Windows Explorer doesn't need to be restarted for this change to take effect (i.e. the desktop.ini is read each time the folder is displayed)

For a little more information on the Desktop.ini, check out, Customizing Folders with Desktop.ini