Desktop Development Web Browsers

Firefox redirecting localhost to

To avoid this annoying behavior of Firefox that redirects http://localhost to when you are developing on the localhost, try one or more of the following tips:

  1. Use other browsers such as IE or Chrome.
  2. Use “” instead of “localhost”.
  3. Make sure http://localhost is correctly configured and responding.
  4. Make sure C:\Windows\System32\drivers\etc\hosts has and only has “    localhost“. Comment out “::1    localhost” which is for IPv6.
  5. Disable Firefox web address automatic alternate fixup: 1) about:config, 2) browser.fixup.alternate.enabled = false
  6. You can also disable IPv6 in Firefox or even disable IPv6 entirely at OS level but it’s not recommended. How? Search for yourself!
  7. Should you be debugging PHP, include these at the top of your code to make sure PHP gives the error for you to erase the underlying problem:
    ini_set('max_execution_time', 180);
    ini_set('memory_limit','1024MB' );

I would prefer 2 and 5.

HTTP Tips & Tutorials Information Security Internet Tools Web Applications & Online Software

Make Firefox to Not Send HTTP Referer (or On a Per-Site Basis)

By default browsers such as Firefox sends the Referer information to the target URL in the HTTP header, as defined by HTTP protocol, so the destination URL / website knows where you have come from. For instance, when you click this link to one of my friends’ sites, it would know you have arrived at Princessly from this page:

Because Firefox sends this information in the HTTP header.

While this is very valuable data to many parties, such as the website owners (who can analyze traffic sources) and market analysts (who wants to know people’s interests and habits so as to sell well), it can be bad for our privacy because it is disclosing our browsing information to the websites we are visiting. You may want to disable Firefox from sending the referrer.

How to disable Firefox to send HTTP referrer?

Just type:


In your Firefox address bar and click “I’ll be careful, I promise!”.

In search, type:


And an entry reading “network.http.sendRefererHeader” would come out with a value that’s 2 by default. Right click on the entry and click “Modify”. Input 0 and click OK.

Restart your Firefox, and now it should not send any referer information any more. And no website would ever know where you were before coming to them.

Not Send Referer on a Per-Site Basis in Firefox?

However, sometimes this may break something as legitimate sites are also using referer information to better serve you. There must be some sites that you don’t quite trust and wanted to disable referer for them.

Simple. Just use the RefControl add-on for Firefox.

After installation, you should see a tiny button on the Add-on Bar, at the bottom of the Firefox window. When you are at the website, click on the button and select “RefControl Options for This Site” and you will have this dialog box:

block referer in Firefox

Just select your intended option for this particular site. If you do not want to send any referer information to this site, just select “Block – send no referrer” and click OK.

That’s it. Now Firefox will send no HTTP referer information to this particular site but will keep sending it to all other sites.

CSS & HTML Tips HTTP Tips & Tutorials PHP Tips & Tutorials WordPress How To

Redirect 404 Error to Home Page

Other than making your 404 error page user friendly, you can redirect it to your index pages such as the homepage, sitemap, or search page, to make it useful for the users. Instead of relying on them to correct the error themselves, you offer the new orientation.

How to redirect a 404 error page to the home page?

There are essentially 3 ways to do this depending on the technology your site is built on.

The .htaccess and HTML solution

This works across all sites that are served by the Apache web server with .htaccess enabled. Add this line in the .htaccess file in the root directory of your domain:

ErrorDocument 404 /404.html

And in 404.html, add a meta tag in the HTML head section:

<meta http-equiv="Refresh" content="1; URL=">

So when there’s an 404 Not Found error the user would be first redirected to /404.html and in turn, he or she would be redirected to the homepage (or whatever you change it to) by the meta Refresh actions.

The PHP solution

If you are using PHP to code your site, chances are you know this solution. You can always use the previous solution (The .htaccess and HTML solution) to redirect 404 error page to your home page on a PHP site, but you can also try the pure PHP approach instead.

Whenever a user types in a URL request that you do not recognize, render this:

header("HTTP/1.1 404 Not Found");
header("Location: /");

Which would redirect the user who has hit a 404 error to the homepage / or any other page URL you specify there.

The WordPress solution

If you are using WordPress for your site, make a 404.php file in your theme directory with the following content:

header("HTTP/1.1 301 Moved Permanently");
header("Location: ".get_bloginfo('url'));

WordPress would automatically use 404.php as the default 404 Not Found error page and when a user hits that page, he or she would then be taken to the home page your WordPress blog.


CSS: Make <pre> Text to Wrap

I deal with quite some code examples across some of my blogs and sometimes they contain too long lines to fit in nicely, which makes it hard to read the latter part of a long line. But you still need to maintain the pre-formatted text with the <pre> tag.

The solution is to use CSS to prescribe the <pre> tag to wrap the lines. Just add this in your stylesheet:

pre.wrap {
 white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */

And add the “wrap” class to the <pre></pre> blocks that you want lines to wrap naturally:

<pre class="wrap">I will be wrapping at the end of the line width.</pre>
CSS & HTML Tips HTTP Tips & Tutorials

HTML: Make a Page Refresh Every xx Seconds

A quick tip for those who just started learning HTML. It’s possible to add a line of code in your HTML page so that it’s automatically refreshed every few seconds when loaded in the user’s browser.

To make the page automatically refresh itself every 60 seconds, just insert the following code in the <head></head> section of your HTML source code:

<meta http-equiv="refresh" content="60">

This would be very useful to display information that is constantly changing.

This can also be used to redirect the user from the current page to another, just specify the destination URL:

<meta http-equiv="refresh" content="30; url=">

Which would redirect the browser to 30 seconds after finishing loading the current page.


Pure CSS Rounded Corner, No Images

Though it does look great, I haven’t given it a try until the other day when I was developing Notice the previous and next link immediately below the boy image at here:

They look and feel great.

So here’s what I’ve done to achieve the rounded corner box in pure CSS – no images nor whatever. Just CSS:

.rounded {
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	-khtml-border-radius: 2px;
	border-radius: 2px;

Tested across major modern browsers other than IE. Sure it doesn’t work in IE6, but not sure if it works in IE7, IE8, IE9, etc. But let me know if you know.

Client Side Coding Books CSS & HTML Tips Rich Internet Application

Best and Newest HTML5 Books (and Some CSS3 Books)

HTML5 and CSS3 are becoming a reality. To be better prepared and armed with the latest technologies of the web so that we stay on the cutting edge when creating stuff, I have found some of the best book titles at Amazon about HTML 5 and CSS 3. Note that several of these books have not been released yet. You can pre-order and receive them when they are out.

Web Developers / Designers’ Books:

  1. Best HTML Books
  2. Best CSS Books
  3. Best JavaScript Books
  4. Best PHP Books
  5. Best MySQL Books
  6. Best Linux Books
  7. Best Apache Books (mod_rewrite Books)
  8. Best Web Hosting Books

HTML5: Up and Running

html 5 up and running

Here’s a godsend online book for learning HTML5 written by Mark Pilgrim as well.

HTML5: Designing Rich Internet Applications (Visualizing the Web)

HTML5 Designing Rich Internet Applications (Visualizing the Web)

Beginning HTML5 and CSS3: Next Generation Web Standards

Beginning HTML5 and CSS3 Next Generation Web Standards

Pro HTML5 Programming: Powerful APIs for Richer Internet Application Development

Pro HTML5 Programming Powerful APIs for Richer Internet Application Development

Introducing HTML5 (Voices That Matter)

Introducing HTML5 (Voices That Matter)

Beginning iPhone Web Apps: HTML5, CSS3, and JavaScript for WebKit

Beginning iPhone Web Apps HTML5, CSS3, and JavaScript for WebKit

HTML5 Now: A Step-by-Step Video Tutorial for Getting Started Today (Voices That Matter)

HTML5 Now A Step-by-Step Video Tutorial for Getting Started Today (Voices That Matter)

HTML5 Straight to the Point: Using HTML5 with CSS3 and JavaScript

HTML5 Straight to the Point Using HTML5 with CSS3 and JavaScript

CSS3: Visual QuickStart Guide (5th Edition)

CSS3 Visual QuickStart Guide (5th Edition)


The Ultimate Way to Cloak and Hide any Website Address or URL (Stealth Forwarding)

Most of the existing URL cloaking services are only a redirection by a randomly generated short URL. The real URL of the target website or web page will eventually be revealed when the visitor arrives at it after the obscure redirection. So how to ACTUALLY hide and cloak the destination URL of any website or web page so the address bar of the browser stays unchanged? In other words, how to create a stealth forwarding?

With a simple HTML web page, you can do that very easily. Copy and paste the following HTML code into a file named google.html and save it at

<!doctype html>

<style type="text/css">
body {margin:0;}
iframe {padding:0;border:0;position:absolute;width:100%;height:100%;}

<iframe src=""></iframe>


Now navigate to your website It’s Google’s home page no problem. Better yet, the URL in the browser address bar doesn’t change to

CSS & HTML Tips PHP Tips & Tutorials

CSS: How to write CSS rules to detect or target Chrome, Safari or Opera browsers only?

It’s easy to target firefox, just write as expected by the standards, at least most of the time. It’s also easy to target IE and any specific versions of them by a few of the famous hacks or the IE conditional comments to selectively include style sheets by version numbers. But how does one write CSS rules and make the browsers to recognize that they are particularly for Chrome, Safari or Opera?

Use PHP to distinguish the browsers.


Put this line in a .php file, upload the file to your server and browse to it by all the different browsers you have. From the server side, $_SERVER['HTTP_USER_AGENT'] contains all the information PHP knows about the source of the request, namely your browser. Now that the server is able to recognize the client browser, you can serve up different versions of a web page by PHP and include different CSS classes according to the browser type:

if (strpos($_SERVER['HTTP_USER_AGENT'], 'Safari') !== false) {
	// Chrome user agent string contains both 'Chrome' and 'Safari'
	if (strpos($_SERVER['HTTP_USER_AGENT'], 'Chrome') !== false) {
		echo '<body class="chrome">';
	} else {
		echo '<body class="safari">';
} elseif (strpos($_SERVER['HTTP_USER_AGENT'], 'Opera') !== false) {
	echo '<body class="opera">';
} else {
	echo '<body>';

The rest is very simple. Just cascade your styles by additional classes to adapt your design to Safari, Chrome or Opera specifically. You can do a lot more than this by the server side variable $_SERVER['HTTP_USER_AGENT'], such as detecting browser versions and operating systems or writing your own web traffic statistics software.


Use Relative Protocol URL Address to Automatically Determine Web Address Protocol (HTTP or HTTPS)

http or httpsHere’s a really interesting bit about how you can omit the protocol part of a web address in your web pages. The predominant belief is that an HTTP:// or an HTTPS:// has got to be prefixed to a URL or it won’t work, truth is, it will. Try the following link:

Click Me!

View the source of this entry and you’ll see the link code:

<p><a href="//"></a>Click Me!</p>

There is no HTTP nor HTTPS protocol at the beginning of the URL. Yet, it’s working properly. Browsers will automatically use the same protocol as that of the current URL. It’s also working for other URL sources in HTML such as images or JavaScript scripts. Wherever you need to specify a URL.

This is very useful when your site is using SSL thus all the URLs start with HTTPS://. Because this approach lets the browser to automatically use the current protocol, you will not be blamed for using HTTP:// URLs on an HTTPS page and causing the notorious unsafe content warning to the users. It will also be a breeze to switch between the HTTP version and HTTPS version of your site. It’s totally automatic.

However, I don’t know what this would do in terms of SEO and how Google sees any URLs without the protocol part. Learn more about what the hell HTTP is.