16 Useful .htaccess Tricks and Hacks For Web Developers

Posted by | Posted in Website Security | Posted on 10-12-2008

The .htaccess files (Hypertext Access file) is a very powerful configuration tool on Apache web server. The Apache web server has a number of configuration options that are available to the server administrator. The .htaccess is a simple ASCII text file placed in your website root directory. You can create and edit an .htaccess file using a text editor like notepad.

Here in this blog post I have come up with useful 16 tips and hacks to configure your web server.
As a configuration file .htaccess if a very powerful and a slight syntax error can result in a severe malfunction of your server. So to avoid that always try to keep a backup copies of all your files from the server before working with the .htaccess file.

1. Creating a custom error page with .htaccess on a linux apache is a very simple task. Using you a text editor like notepad you create an .htaccess files. Custom error pages give your website an professional look and catch those visitors who reach your website following a back link.

ErrorDocument 401 /error/401.php
ErrorDocument 403 /error/403.php
ErrorDocument 404 /error/404.php
ErrorDocument 500 /error/500.php

2. How to set the timezone on your server

SetEnv TZ America/Houston

3. Block IPs Using htaccess
Sometime you need to block certain IPs from accessing your entire site or directory. Its pretty simple task. All you have to do is inside the .htaccess file is put the following code.

allow from all
deny from 145.186.14.122
deny from 124.15

If you use the whole IP or a part of the IP to block and add the new ones in a new line.
When someone trying to access your site from the banned ip they will get a 403 error access forbidden message.

4. SEO Friendly 301 permanent redirects for bad/old links and moved links

Redirect 301 /d/file.html http://www.htaccesselite.com/r/file.html

5. Set the Email Address for the Server Administrator - Using this code you can specifying the default email address for the server administrator.

ServerSignature EMail
SetEnv SERVER_ADMIN default@domain.com

6. Hotlinking protection with .htaccess is very important because anyone can hot link to your images and eat up all your bandwith of your server. The following code will help you to prevent that.

Options +FollowSymlinks
# Protect Hotlinking
RewriteEngine On
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www.)?domainname.com/ [nc]
RewriteRule .*.(gif|jpg|png)$ http://domainname.com/img/hotlink_f_o.png [nc]

7. Block all requests from user agent – by creating a perfect .htaccess ban list, you can block all of unwanted user agents that will keep your server load down. Also Check out this interesting thread on webmaster world about the  228 user agents ban list.

## .htaccess Code :: BEGIN
## Block Bad Bots by user-Agent
SetEnvIfNoCase user-Agent ^FrontPage [NC,OR]
SetEnvIfNoCase user-Agent ^Java.* [NC,OR]
SetEnvIfNoCase user-Agent ^Microsoft.URL [NC,OR]
SetEnvIfNoCase user-Agent ^MSFrontPage [NC,OR]
SetEnvIfNoCase user-Agent ^Offline.Explorer [NC,OR]
SetEnvIfNoCase user-Agent ^[Ww]eb[Bb]andit [NC,OR]
SetEnvIfNoCase user-Agent ^Zeus [NC]
<Limit GET POST HEAD>
Order Allow,Deny
Allow from all
Deny from env=bad_bot
</Limit>
## .htaccess Code :: END

8. Redirect everyone to different site except few IP
-If you want to redirect all the visitors to a different IP. Also give access to certain  few IPs. You can use the code below

ErrorDocument 403 http://www.youdomain.com
Order deny,allow
Deny from all
Allow from 124.34.48.165
Allow from 102.54.68.123

9. Don’t want to display download request – Usually when you try to download something from a web server you get a request asking whether you want to save the file or open it.
To avoid that you can use the below code on your .htaccess file.

AddType application/octet-stream .pdf
AddType application/octet-stream .zip
AddType application/octet-stream .mov

10. Change the file type – Make any file be a certain kind of file type Makes image.jpg, index.html, default.cgi all act as php

<Files test>
ForceType application/x-httpd-php
SetHandler application/x-httpd-php
</Files>

11. Block access to your .htaccess file – By adding he following code to your htaccess file will prevent attempts to access your htaccess file. This extra layer of security protects your htaccess file by displaying a 403 error message on the browser.

# secure htaccess file
<Files .htaccess>
 order allow,deny
 deny from all
</Files>

12. Protect access to certain specific file on your server - this can be done by adding the below mentioned code. For example you want to block with the file name default.jpg This will prevent the viewing of this file.

# prevent access of a certain file
<files default.jpg>
 order allow,deny
 deny from all
</files>

13. Prevent access to unauthorized browsing – Protecting specific directory browsing can be done by intructing the server to serve a Forbidden and Authorization required message while anyone requests to view that particular directory. Usually if you site doesn’t have a default index page any files within that directory is accessible to the visitors. To avoid that use the following code in the .htaccess file.

# disable directory browsing
Options All -Indexes

14. Setting the default page
– You can set the default page of a directory to any page you like. For example in this code the default page is set as about.html instead of index.html

# serve alternate default index page
DirectoryIndex about.html

15. Password protect your directories and files
- You can create authentication for certain files and directories from being access. The code has examples of both password protection for a single file and password protection for a entire directory.

# to protect a file
<Files secure.php>
AuthType Basic
AuthName “Prompt”
AuthUserFile /home/path/.htpasswd
Require valid-user
</Files>

# password-protect a directory
resides
AuthType basic
AuthName “This directory is protected”
AuthUserFile /home/path/.htpasswd
AuthGroupFile /dev/null
Require valid-user

16. Redirect an old domain to a new domain
– Using htaccess file you can redirect a old domain name to a new domain by adding the following code into the htaccess file. Basically what it does is it will remap the old domain to the new one.

# redirect from old domain to new domain
RewriteEngine On
RewriteRule ^(.*)$ http://www.yourdomain.com/$1 [R=301,L]

As htaccess files are very powerful, even a slightest syntax error can cause sever malfunction of your server. So it is crucial to take the backup copies of everything before you try the hacks and tricks on your hypertext access files. Post your thoughts with a comment.

10 Firefox Extensions for Web Analytics

Posted by | Posted in Firefox, Web Analytics | Posted on 05-12-2008

Firefox has been one of the fastest and most user friendly browser for anyone. I can’t think working without it. Firefox extensions help web analyst to test, report and analysis the web data easily. I’ve used Firefox for close to four years now and I’ve found a number of extremely useful third party plug-ins and extensions to simplify manipulation, analysis and graphing of data. analysis analytic, reporting

Here is the list of 10 top user web analytic Firefox extensions.

1. Web Analytics Solution Profiler/Debugger (WASP)

Provides detailed information about the data being collected trough Query String and Cookies by web analytics solutions. Covers 125 tools, including Google Analytics, Omniture SiteCatalyst, Coremetrics, WebTrends, ad networks and several others.

2.Data Analytics Firefox Addson

DataAnalytics is a Firefox extension that enables importation, manipulation, analysis and graphing of data. Often websites lock their information in static tables.

3. TrackMe Analytics on user habits.

TrackMe delivers Personal Analytics on user habits and can provide teachers with a tool to use in assessment which can encourage learners to engage in inquiry in a domain, whilst documenting and developing their habits.

4.Greasemonkey

Grease monkey allows you to customize the way a webpage displays using small bits of JavaScript. Here’s a list of scripts which’ll help web analysts, before that make sure u have latest version of grease monkey addons.

5. Checks to see if Google Analytics is installed on any given page

This extension checks the current page you are on to see if Google Analytics is installed. It’ll automatically detect and report back to your browsers status bar.

6. Counterpixel – Display the counting/measurement pixel of a website.

The tool tries to find counting/measurement pixel of tracking software from different services and companies.

7. Fire Analytics – allows you to view Google Analytics reports in Firefox.

Open Tools > Fire Analytics menu, specify your email & password on Preferences tab (alternatively you can just log into your account using browser), choose Report type and click “Show report” button.

8. Better Google Analytics – Enhances Google Analytics with a compilation of user scripts.

9. Ghostery – Firefox Plugin

Ghostery lets you see the invisible web on every page on the web. Invisible web objects include web bugs that track your behavior as well as analytic trackers used by the sites you visit to understand their own audience.

10. Alexa Sparky

Sparky is a free Firefox browser plugin built by Alexa, that accompanies you as you surf, providing useful information about the sites you visit without interrupting your Web browsing.

These firefox extensions saves us a lot of time for to analysis our web traffic efficiently. If We have missed out or if anyone have any thoughts about these web analytic firefox plugin please feel free to add a comment. Also in future this list would be expanded as and when new addson are added.

6 Ways to Increase the Web Page Load Time.

Posted by | Posted in Web Graphic Design | Posted on 27-11-2008

You have been at sites where you wait to website to load within couple of second and gets frustrated and leave. Click and refreshing multiple times for the page to load and still doesn’t load full. Sometimes the images doesn’t load or the styles of the page isn’t loaded. Users expect your website to load fast or within couple of seconds then you will lose those visitors. To avoid these hurdles we have few tips on how to optimize and speed up the web page to load fast.

1) Compress your graphics
Recently there has been an explosion in do it yourself kind of web site programs out there. Add your text and upload your images, but the problem with these kind of programs are these images are not optimize to load fast. Use image editing program like photoshop and other online image editors to compress your graphic before you upload from to your website. Uploading your images straight from you camera might not bigger in file size and too big for the web.

2) Remove unnecessary fancy stuffs
Removing unwanted flashy flash movies and animated gifs which takes every to load your website is key to make your web page load fast. Also generate unwanted javascript and ajex files for cool and animation can cause delay in pulling the website quick.

3) Use your content wisely
Don’t use PDF, images and flash for your content in the web page. Present your web page content in standard HTML. It loads faster and is user friendly and easy to download.

4) Use Clean Code
One of the reason for slow download of your web page is because of the junk code in your HTML. The advantage of building web pages with HTML complying to the latest W3c standards is it elimnate most of the junk code as well as your web page would be compaitable with all browsers. The other advantage is it is search engine friendly which allows the search engines to index your web pages faster.

5) Pick Good Hosting
Most of the time when a web page takes time to load is due to their web hosting server. Host on a server which has fast processors. Looking for cheaper hosting always end up in bad server where tons of websites are hosting. Check with your hosting provider if you have a web site slow loading problem and move to a better ones.

6) Use Efficient web programs
Often most of the web designers and developers pick the wrong web program for their website like ecommerce and Content management system.
These programs are created to make the website functional easily and faster. For example the CMS you choose d to run the website has a lot of junk code in it, then the loading of the web page will be slow. Apart from these drawbacks most of these programs are not search engine friendly. Check out the online reviews of these programs before you buy it.

The bottom line is a fast loading website don;t make your visitors leave fast also it is a user friendly to your users.

16 Web Based Handy Web Designer Tools

Posted by | Posted in General, Web Graphic Design | Posted on 04-10-2008

while designing and developing a website a web designer need to several tools to maximizing the effectiveness of the website. There are a wide range of different tools which is been presented here. Each of these tools is so important for a web designer.

  1. Web Page Analyzer Tool
    Web Page Analyzer Tool – This tool can be used to test the loading time of your web page. It gives a detailed report on how many objects and size of the objects on the page. These tools have several rating for each object like Green ratings is for good, Yellow for caution and Red for warnings.
  2. W3C CSS Validation Services
    W3C CSS Validation Services –
    This W3C CSS validation Service is a web based tool helps web designers to check Cascading Style Sheets(CSS) are validated. The CSS can be validated here by three ways one is typing the URL, second is by uploading the file and finally by inputting the direct CSS code in the input box.
  3. Browser compatibility testing tool
    Browser compatibility testing tool – By using Browsershots you can test your web designed pages in different browsers. As we all know the importance of checking the web pages with different multiple browsers. Browser compatibility testing is a critical element in the web development practice.
  4. Website Wireframe Tool
    Website Wireframe Tool –
    Wireframes are a basic visual guide for any web page layout design. Wireframe also allows maintaining design consistency throughout the site. Wireframes are very important part in the initial stage of the design process. Gliffy is a free web-based diagram editor. Gliffy free wireframe software makes it easy to create website wireframes and to share web mockups with anyone.
  5. Web color picker
    Web color picker - This color picker will help you fine tune the hex color codes for your web page. These color picker tools are great for exploring colors and color schemes for your web design project.
  6. Screen Resolutions Checker
    Screen Resolutions Checker – Quickly and easily test any Website in various Screen Resolutions! This tool allows you to check any web page in different screen resolutions. As web visitors uses different screen resolutions web designers need to check their web page design in different screen resolutions and make sure it looks in all of them.
  7. Dummy Text Generator
    Dummy Text Generator –
    A dummy text generator will come handy to any web designers because when they wait for the content. Web designers can use dummy text generators to fill up that space.
  8. CSS Menu Generator
    CSS Menu Generator – will generate both the CSS and the HTML code required to produce a text-based yet appealing set of navigation buttons. Menu generator makes it easy to create custom CSS menus without having to know all the complicated HTML and CSS
  9. Broken Link checker
    Broken Link checker –
    Use this tool to check for Broken Links on a website. Broken links are links that lead nowhere; Clicking on the link will show an error page.
  10. Browser size checker
    Browser size checker -
    A nifty online tool for setting your browser size while doingWeb design.
  11. Robot Control Code Generation Tool
    Robot Control Code Generation Tool –
    The only reason you might need to use a robots.txt file is if you want to prevent someone else from using this search engine to index your site
  12. Http header checker
    Http header checker - Check your server to make sure the proper HTTP Status Codes (200, 301, 302, 304, 307, 404, 410) are being returned in the server headers.
  13. URL rewriting tool
    URL rewriting tool - This tool helps you convert dynamic URLs into static looking html URLs.
  14. htaccess tool
    htaccess tool – These tools will create .htaccess and .htpasswd files for you, without having to build these manually.
  15. Rounded Corner and Gradient Generator
    Rounded Corner and Gradient Generator - This generates a basic box with rounded corners. It will create four image files and the necessary HTML and CSS code for you to put rounded corners around your content.
  16. Strip Generator
    Strip Generator lets you make your own comic strips. Users can even create their own Strip Blog, which combines the art of creating comic strips with blogging.

25 extremely useful CSS Shorthand Tutorials

Posted by | Posted in CSS, Web Graphic Design | Posted on 09-09-2008

CSS Shorthand techniques are used for condensing and shorting your CSS code which makes your stylesheets small which will enable your website to load faster and easier to read. One of the greatest advantages of using CSS shorthand properties is to specify several properties by using only one.

So here are some 25 extremely useful CSS shorthand tutorials to make your CSS code more Concise.

  1. CSS Shorthand Guide – The syntax for declaring the background shorthand values are excellent.css-shorthand-img-1.jpg
  2. CSS shorthand properties – This tutorial explains on how using CSS shorthand properties you can reduce the size of your CSS documents even smaller.css-shorthand-img-2.jpg
  3. An excellent source for Introduction to CSS shorthand properties.css-shorthand-img-31.jpg
  4. Efficient CSS with shorthand properties.
    css-shorthand-img-4.jpg
  5. CSS – Shorthand V Longhand.
    css-shorthand-img-5.jpg
  6. Introduction to CSS Shorthand from Sitepointcss-shorthand-img-6.jpg
  7. Free! – CSS shorthand properties – Shows some excellent examples of list shorthand rule.
    css-shorthand-img-7.jpg
  8. Useful CSS shorthand properties
    css-shorthand-img-8.jpg
  9. CSS Shorthand Properties
    css-shorthand-img-9.jpg
  10. Use shorthand properties in CSS to shrink your style sheets.
    css-shorthand-img-10.jpg
  11. CSS Shorthand, Step by Step How-To
    css-shorthand-img-11.jpg
  12. Advantages of using CSS Shorthand properties
    css-shorthand-img-12.jpg
  13. What is a CSS Shorthand Property?
    css-shorthand-img-13.jpg
  14. CSS Shorthand Cheat Sheet
    css-shorthand-img-141.jpg
  15. Detailed guide to using shorthand CSS in your cutups
    css-shorthand-img-151.jpg
  16. Minimizing and creating efficient CSS code
    css-shorthand-img-161.jpg
  17. How do I write Shorthand CSS?
    css-shorthand-img-171.jpg
  18. A good collection of links to CSS shorthand articles
  19. Shorthand properties
    css-shorthand-img-191.jpg
  20. Writing CSS Shorthand
    css-shorthand-img-20.jpg
  21. Writing Efficient CSS Shorthands
    css-shorthand-img-21.jpg
  22. CSS shorthand tips
    css-shorthand-img-22.jpg
  23. Using CSS shorthand for fast-loading websites
    css-shorthand-img-23.jpg
  24. Basic CSS Shorthand rules
    css-shorthand-img-24.jpg
  25. CSS Shorthand from WordPress
    css-shorthand-img-25.jpg

Feel free to comment and add your thoughts on these tutorials.


By TwitterIcon.com