eHussain's Blog (Hussain Cutpiecewala)

.htaccess Techniques Developer should know

.htaccess file is one through which you can control the Apache server without modifying its htdocs file. This file allows you to do so mamy things with just little efforts.

1. Remove WWW from your URL

For SEO purpose you might need to remove the www prefix from your url, or sometimes you might prefer to use it.
Here is the way to remove the www from url by redirecting it to non www url.

   RewriteEngine On
   RewriteCond %{HTTP_HOST} !^ehussain.com$ [NC]
   RewriteRule ^(.*)$ http://ehussain.com/$1 [L,R=301]

2. Use Custom Error Pages

For your website you might prefer to use custom error pages. You may also want to load different pages on different kind of errors.
Here is the way to use error pages from .htaccess. Upload this pages to your server and change the location of them based on your need.

   ErrorDocument 400 /errors/bad_request.html
   ErrorDocument 401 /errors/authentication_required.html
   ErrorDocument 403 /errors/forbidden.html
   ErrorDocument 404 /errors/not_found.html
   ErrorDocument 500 /errors/internal_server_error.html

3. Logging PHP Errors

Debugging is important part of development cycle. but when you are in production environment you might not want your user too see the internal server errors.
But instead you may want to log those errors in some file on your server. Also if you are on shared hosting you might not have access to configuration file to enable or change the location of error log.
Here is the way to log the php errors in file through .htaccess file.

   # display no errs to user
   php_flag display_startup_errors off
   php_flag display_errors off
   php_flag html_errors off
   # log to file
   php_flag log_errors on
   php_value error_log /location/to/php_error.log

4. Prevent Hot Linking

Hot linking is a technique used by many website to load images from other website. So, if someone is hot linking to you then your bandwidth gets consumed for others benefit.
Here is the way to prevent hot linking to your files on your server. This will allow files to get loaded only if its being referred by your website.

   RewriteEngine On
   RewriteCond %{HTTP_REFERER} !^http://(.+\.)?ehussain\.com/ [NC]
   RewriteCond %{HTTP_REFERER} !^$
   RewriteRule .*\.(jpe?g|gif|bmp|png)$ /images/do-not-hotlink.jpg [L]

5. Force Download

In your website you may offer download options at various place, and you might want browser to ask user to download file, instead of rendering it in browser.
For example, you might want browser to force the download for the files with extension of “mp3″ and “xls”.
Here is the .htaccess file content for forcing download.

   <Files *.xls>
   ForceType application/octet-stream
   Header set Content-Disposition attachment
   </Files>
   <Files *.mp3>
   ForceType application/octet-stream
   Header set Content-Disposition attachment
   </Files>

There are more techniques that I will come up with in Part II

-
Hussain Cutpiecewala | ehussain

Hi,

Finally my & your wait ends, and right time came to get back to my blogging world. Not forgetting, its almost 4 months for me to write my last blog post. There are couple of reasons for the lag.

Three months back I moved to Mumbai (away from my home sweet home ) for joining Zycus Inc., Excellent work place, Fantastic Team and Fabulous Working environment.  Due to lack of PC or Laptop I was unable to write any new posts. But, Just before a month I purchased Sony Vaio, Its lovely & beautiful

I have too many post queued in my brain so I am planning to devote time for blog writing regularly. So, wait for my upcoming interesting post coming in next week.

Signing Off, Bye bye. Catch you soon over here.

And ya, Happy New Year. Having Year with too many hopes and goals. Hope you have too, All the best.

-
Hussain Cutpiecewala | ehussain

Hello www.

I am remembering, It was around 1:00 PM of this 16th. I was surfing internet to find solution to the problem I was facing, but suddenly my focus switched to the topic of Client Side Storage. So, Finally I got this interesting topic to share with you. I did little bit research work over it to collect the basic things. I have also prepared demonstration for it

As you may know, web is getting more and more dynamic these days, web applications like Google Wave, Gmail (Mobile) and other mobile app are capable of doing client side caching. For growing market of mobile, client caching is really nice to have feature.

Till 16th I was knowing just one way to store data on Client, the most popular Cookie. Cookie is simply the key-value pair that is stored in form of text file on client machine. The major limitation of cookie is its size, you can only store 4kb of data in cookie. So, web developers needed more smarter way to store details on client machine.

So, Client Side Storage method is one of the feature that came out of HTML5 bundle. Client Side Storage is memory space that is allocated to browsers to store persistent data. All data are associated with their domain.

HTML5 provides three ways to store data on client machine.

1. Local Storage
2. Session Storage
3. Database Storage

Let’s discuss all of them one by one.

1. Local Storage :

Most simplest form of storage available is Local Storage. HTML5 provides way to store key-value pairs on client machine. Data stored in Local storage is persistent. It means that, you can access those data in your further requests, even if browser window is closed. Data stored in Local Storage is accessible to all browser window.

It is one of the great way to implement client caching.

Here is the way to write Local Storage

// way to set local storage variable
localStorage.setItem(“userName” , “eHussain”);

// way to retrieve the value of local storage variable
alert(“User name is : ” + localStorage.getItem(“userName”));

// another way to retrieve the value of local storage variable
alert(“User name is : ” + localStorage.userName);

// way to remove the local storage variable
localStorage.removeItem(“userName”);

2. Session Storage :

You might be wondering for Session Storage at Client Side! But yes, HTML5 offers the way better solution than the Cookie. Session storage having ability to store data in amount of MBs.

Also, Unlike Cookie (which is sent to server for every requests), Session is not sent to the server for every requests. So, request load is minimal than the Cookie. However, this sessionStorage has nothing to do with Server’s Session.

Session Storage and Local Storage methods are identical. However they only differ in persistence and scope. Scope of the Session storage is limited only to specific browser window. Browser creates new instance of the Session Storage if you open same url in different tab/window. Also Data stored in Session Storage persist as long as browser window is open.

Here is the way to write Session Storage

// way to set session storage variable
sessionStorage.setItem(“userName” , “eHussain”);

// way to retrieve the value of session storage variable
alert(“User name is : ” + sessionStorage.getItem(“userName”));

// another way to retrieve the value of session storage variable
alert(“User name is : ” + sessionStorage.userName);

// way to remove the session storage variable
sessionStorage.removeItem(“userName”);

3. Database Storage :

We have discussed Session Storage, Local Storage and Cookie. You may have noticed, all techniques offers key-value method for storing the Data. But, sometimes you need way better solution to store huge amount of data on Client Side. One of the great way to do this is, Database. Database Storage is one of the best feature (I think) of HTML5. So far, as per my research, Safari is the only browser who supports the Database Storage. Database Storage uses the SQLite database, which is light weight, and fast.

Here is how you can make it.

var db = openDatabase(“Database_Name”, “Database_Version”);
database.executeSql(“SELECT * FROM tbl_users”, function(result1) {
  // iterate over resultset or do some other operation
  database.executeSql(“DROP TABLE tbl_users”, function(result2) {
    // do some cleanup
    alert(“My second database query finished executing!”);
  });
});

For many browsers Database storage has limited functionality and few vulnerabilities, I will discuss it some other day.

I have prepared the demonstration of Local Storage & Session Storage, If you have mozilla firefox then you can have a look at them.

If you liked this post then don’t miss to share it with other people. You can also post your valuable thoughts as comment below. That’s it for today, Signing off.

-
Hussain Cutpiecewala | ehussain

Hello www.

I am back with my second & useful post. There are wide range of skills that are available and constantly changing, being a good developer means staying on your toes and always learning to be the best one, and that is my favorite thing about web development.

Here is the list of few skills that are most important for being a good web developer. You may feel that this is focused on front-end skills. but they apply to all developers. I haven’t discussed here much about back-end skills because they are specific to language & platform. I will provide more details on back-end skills on my upcoming posts. But let’s talk about the general skills first.

1. Regular Expressions :
   Regular expressions are among the one from which I was scared most during early days of my carrier, but later I found that, Regular Expressions, a most powerful tool to manipulate string and data. They are found in scripting languages, editors, programming environments and specialized tools.
   
   Regular expressions are used to parse strings, basically to find and replace bits of text. Versatility of regex makes it quite powerful tool.There are wide variety of methods for optimizing a regex string, which may lead to huge performance improvement to your app/system.Regular expressions can be used with just about any language, they work great with Javascript & PHP to name a few. They are also great with Apache rewrite rules for htaccess.Its surprising how few developers use regex considering how useful it is. So if you haven’t learned already than make sure to learn regular expression.
2. Javascript Library :
   Even if you don’t write much javascript you should have basic knowledge of javascript library that can make too easier for you. Whether its JQuery, Mootools, or whatever. My personal choice go with JQuery. Writing native javascript code takes too much efforts & introduces many vulnerabilities in your system, on other hand using javascript library will cut your development time to less then half.
   
   These libraries takes the cross browse dirty work out of javascript programming so you can stop checking features of browser and start animating. Also these library provides wide variety of options to access the nodes of DOM & provides the easy way to animate them. These library also has many plugins available and many are getting available daily to make your life easier.
3. Debugging Code:
   A good debugger will make your web programming go so much quicker & easier. If we talk about front end then I specially like Firebug, which allows you to go through the elements of the page & analyze the styles & details about which stylesheet is being used. Using firebug you can also modify the styles of elements on fly, you can modify elements as well as page markups.Another useful thing about firebug is javascript debugging. Firebut helps with javascript debugging. providing a better analysis of javascript errors as well as console for running javscript on the fly.It also provides the NET panel through which we can see the loading time of various front end assets as well as anything that is 404′ing or otherwise not loading. We can also analyze the data being transmitted through GET/POST request.
4. Debugging View :
   In order to obtain many visitors as possible. your website need to work with majority of browser (IE6, IE7, IE8 , FF2 , FF3, Safari 4, Opera 9). If you ask any designer then most of them hates to do cross-browser debugging, but the better you get the less you’ll have to do it. Most better technique to design cross browser website is to be preventative. starting with valid HTML and good reset style sheet. For your work you can go with this reset css. Beyond that it is useful to understand compatibility master table.
5. Layout with valid HTML/CSS (and no tables) :
   Its not 2000, even a back end developer need to know how to write front end code with valid HTML & CSS – not with bunch of tables. The markup should be clean and valid according to its DOCTYPE. CSS of website should be separated from the HTML markup, it means that there should not be any inline styles.If you are beginner to front-end then you should learn various css tags and CSS Box Model.
   
   Whenever you write HTML code it should be XHTML valid. it means that you should have properly nested nodes, closing tags, Image tag with necessary attributes and other basics. You can check XHTML validity of your HTML code by using W3C’s HTML Validator, it will show an errors if any on your page. Its really a good practice to fix all those errors shown by Validator.
6. Basic Performance Rules :
   End user spents most of his time on the front-end. When end user opens the website, he gets tied up in downloading components of your page like images. css. javascript, flash etc. Performance of website can be improved in many ways, but most basic way to improve performance is reduce the number of HTTP request made by the browser to render the page.
   
   There are techniques like CSS Sprites are available to reduce the number of image requests. Also using Content Delivery Network for the loading your javascript library can reduce the HTTP request time considerably. For more details you can see Yahoo’s Best Practices for Speeding Up Your Website.
7. Basic SEO :
   A knowledge of basic SEO is essentially for any good web developer. You can leave work of research of keywords to your client. but developer should have basic knowledge of targeting those keywords on the web page. Web developer should use clean markup and should know the good use of <title>, <meta>, <h1> and <h2> tags on the front end. It is also very important to have solid & organized directory structure on back-end. Best resources I have found for learning basics of SEO is Beginners guide to Search Engine Optimization and Search Engine Ranking Factors
8. Payment Gateway Integration :
   Obviously your clients wants go get paid for their investment. So as being a web developer you should have basic knowledge of payment gateways like Amazon, PayPal, Google, etc. Every payment gateways provides API to integrate your website with their gateway. Many payment gateway provides their own development kit that you can plug into your site, but you must have strong knowledge of any of the back-end language to handle the issues that arises during the integration. I will talk more on this in my later posts.
9. Apache rewrites :
   Apache rewrites are very useful for converting your messy URLs and make them cleaner & easy to type. If you know regular expression then you can remove the ugly URLs like index.php?section=post&section=comments&limit=10 and you can rewrite it as post/comments/10. Apache rewrites are not only useful for making clean urls but it can also be useful for converting simple page into complete app with a directory structure. Simply, rewrite all of your query strings to the directories and that’s it, you are all set. However be careful, apache rewrites are very hard to debug (I feel it personally). The rewrites can’t be traced because they don’t provide any debugging information. They are nightmare that can’t be tracked.
10. Version Control :
    Last but not the least, every developer should know & use the verison control. Version control is not only only provides way to backup your files but it also provides smooth integration with other developers working on same project. Version control works by keeping track of the changes made in directory content. Using version control you can commit your changes to centralized server, or revert back to previous version.
    
    I personally prefer SubVersion which is centralized, and I use it at my work place. You can also find distributed as opposed to centralized version control, since it provides two levels of version control. You can commit changes to your local repository and then push those changes to centralized server. Using it you can make small numbers of unstable changes to your local repository and then push final revision to your team. If you have large team working on same system then you should go with distributed version control. Mercurial provides distributed version control.

Did I leave anything important from above list? What you think for above items? They may not be in good order but is any item more or less important to you? Please post your valuable thoughts as a comments below.

-
Hussain Cutpiecewala | ehussain

Hey,

I am Hussain Cutpiecewala a.k.a ehussain in www community. I live in Surat & working as a Web Developer since 2 years.
I also work as a freelance developer for individuals or company.

I work on Open source giants like PHP & MySQL. I also have well depth knowledge of Javascript, JQuery, Prototype & MooTools, I do Web designing too.
However I never kept myself limited to few technologies, I also like to work on .NET, Java, Flex etc. at basic level. I am interested in software/product as whole, including its Architecture, Quality, UI & Usability.

I am very much fond of doing new experiments, reading books, coping up with new trends and of course Twitter & Facebook.

I have just started the blogging after setting up my new server & domains. huhhhh, I really worked hard since past 4 nights to get it done. I would also like to thank Tanmay Patel for his kind help.

If you are looking for good source of information on www technologies then you are at heaven! I will also share experiences of my life so you can have insight at what I am . I will try my best to keep you engaged with my blog by providing quality posts on regular interval, and that’s my primary concern to start blogging.

That’s it for my Hello Post because Its getting time to reach office. You will see me here again very soon, I am very well known for keeping my promises

You are most welcome to provide your feedback, I would love to here from you. If you want to write personally to me than send me email at me[at]ehussain[dot]in or me[at]ehussain[dot]com. You can also call me on my cell, the number is +91 9904395152.

Now its getting late to me, catch me later on same place 

Signing off, Bye bye.

–
Hussain Cutpiecewala | ehussain