Adaptive images provides an outstanding set of instructions for customizing the images generated by PHP’s GD library, so you aren’t stuck with rubbish images. Do yourself a favor and check out Adaptive Images — it could be the perfect solution for your website imagery needs.

Adaptive Images is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

The JavaScript

Searching the user agent string for “Android” is the quickest method:

var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("android") > -1; //&& ua.indexOf("mobile");
if(isAndroid) {
	// Do something!
	// Redirect to Android-site?
	window.location = 'http://android.davidwalsh.name';
}

The PHP

Again, we’ll use PHP’s strstr function to search for Android in the user agent:

$ua = strtolower($_SERVER['HTTP_USER_AGENT']);
if(stripos($ua,'android') !== false) { // && stripos($ua,'mobile') !== false) {
	header('Location: http://android.davidwalsh.name');
	exit();
}

Bonus!  .htaccess Detection

We can even use .htaccess directives to detect and react to Android devices!

RewriteCond %{HTTP_USER_AGENT} ^.*Android.*$
RewriteRule ^(.*)$ http://android.davidwalsh.name [R=301]

And there you have it:  three different Android device detection!  Have fun with your mobile development!

Android Detection with JavaScript or PHP is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

//works

http://mydomain.com/my-page

//breaks

http://mydomain.com/my-page/

The original .htaccess source was:

#adds ".php" to a URL that isn't a directory or a file
RewriteCond %{REQUEST_URI} !(\.[^./]+)$
RewriteCond %{REQUEST_fileNAME} !-d
RewriteCond %{REQUEST_fileNAME} !-f
RewriteRule (.*) $1.php [L]

The solution was simple:  an extra statement to accommodate for the trailing slash:

#removes trailing slash if not a directory
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.+)/$ /$1 [R=301,L]

#adds ".php" to a URL that isn't a directory or a file
RewriteCond %{REQUEST_URI} !(\.[^./]+)$
RewriteCond %{REQUEST_fileNAME} !-d
RewriteCond %{REQUEST_fileNAME} !-f
RewriteRule (.*) $1.php [L]

This method may be a bit inefficient as there are two redirects but it does the job.  Do you have a better solution?  If so, share it!

Search Engine Friendly URLs with .htaccess and mod_rewrite is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

# Mod Rewrite
Options +FollowSymLinks
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]

The fix to this problem was to add the following directive before my mod_rewrite directives:

#Fix Rewrite
Options -Multiviews

Tada! The URLs began working and the website’s SEO has taken off!

Fixing mod_rewrite and .htaccess on GoDaddy Hosting is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

.htaccess: I have no idea what to do with this.

me: I want the toolbar to install when they request this file.

.htaccess: Well, how am I supposed to do that?

me: OMG! You don’t know?!

.htaccess: No, just like you didn’t know how to create a Firefox extension before you did the research.

me: Good point. When can you research and start serving it up?

.htaccess: I can’t research. I’m a file.

me: Oh. So I just need to figure things out for you again?

.htaccess: You never pay attention to me anymore…

That went on for quite a while but the moral of the story is that if you want your server to handle XPI files correctly, you need to add the following to your .htaccess file:

AddType application/x-xpinstall .xpi

If you don’t add the above directive, Firefox will open the file as plain text which is an ugly mess.

Adding the XPI MIME Type for Firefox Extension Installs is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

This post was authored by Eric Wendelin. To learn more about Eric, click here.

A significant part of your YSlow grade depends on how well your site utilizes optimal caching techniques. By editing your .htaccess file, you can increase your YSlow score by 20 points or so in just 3 minutes!

Quick Intro to Caching

Caching is a browser feature that allows storage of certain types of web files on the client-side. In most cases, we want to have our clients cache our static files like HTML and CSS so that our website is faster after the first request.

Browser caching mainly depends on two things: the headers you send in an HTTP response and the browser your client is using.

There are a couple of things a browser can do when caching depending on the headers used.

1. It can check back on every request, and servers will reply with a HTTP status 304 (Not Modified) if the file is indeed the same.
2. Only ask the server for the file when the cached one has expired.

The latter case is better for performance because the browser doesn’t even ask and therefore saves a lot of HTTP requests.

Setting the Expires Header

One of the best things we can do to ensure good cache-ability is set a far future Expires header:

<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)(\.gz)?$">
Header set Expires "Thu, 15 Apr 2012 20:00:00 GMT"
</FilesMatch>

Note here that if your site changes a lot, you’ll need to rename/version your files or get clever with your ETags to keep users up-to-date. If you Firebug my site, eriwen.com, you’ll see that I do just that. Stay tuned there for a script that can help you automate this.

Controlling Those ETags

ETags are difficult because they take precedence for caching in most browsers. You can change all the headers you want, but if the ETag associated with a file is always the same, caching will never work how you expect. In most situations, you should turn your ETag headers off.

<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)(\.gz)?$">
Header unset ETag
FileETag None
</FilesMatch>

Yes, you can combine the two snippets:

<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)(\.gz)?$">
Header set Expires "Thu, 15 Apr 2012 20:00:00 GMT"
Header unset ETag
FileETag None
</FilesMatch>

Testing Your New Settings

The best way to see what’s going on is to check the “Net” tab in Firebug. You can use a tool like the Live HTTP Headers Firefox extension (there’s also one for IE) to verify what headers are being sent. NOTE: If you refresh the page instead of clicking a link, Firefox will recheck all files it has cached. This is not the test you’re looking for.

You want to make sure everything is occurring exactly as you intended. Now is the time to bring out your inner control-freak.

Conclusion

These are just 2 simple ways to maximize caching (and therefore speed) of your site. There are lots of other headers to play with, but I find that these two give the biggest bang for your buck. Share your caching tricks in the comments!

About Eric Wendelin

Eric Wendelin is a software engineer for Sun Microsystems. When he’s not doing super-secret programming for Sun, he plays indoor soccer, playing Wii with his friends, and cheering on the Colorado Avalanche. He also writes a blog on JavaScript, CSS, Java, and Productivity at eriwen.com

Improve Your YSlow Grade Using .htaccess is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

The Folder Structure

+ root
	+ templates
		+ version1
			- css
			- graphics
			- js
		+ version2
			- css
			- graphics
			- js
		+ version3
			- css
			- graphics
			- js

Note that the different templates go in different folders within the temlpates folder — that includes template graphics, CSS styles, and JavaScript files. If any other types of files are specific to your template, you may add a directive to make them template-specific as well.

The .htaccess Directives

RewriteRule ^css/(.*)			/templates/version2/css/$1
RewriteRule ^graphics/(.*)		/templates/version2/graphics/$1
RewriteRule ^js/(.*)				/templates/version2/js/$1

The .htaccess directives change the request paths from the root level to the current template’s folder. Essentially, to switch themes, all you need to do is change the template folder in the .htaccess file.

Referencing Files

	
	<script type="text/javascript" src="/js/moo-121.js"></script>
	<link rel="stylesheet" type="text/css" href="/css/theme.css" />
	
	<!-- further in the page... -->
	
	<img src="/graphics/logo.jpg" />
	
	

Since the .htaccess directives above are changing the paths of the images, we can simply refer to the JavaScript, css, and graphics files by the shorter path. This way you don’t reveal your file structure, you get to keep your code shorter, and switching templates is extremely easy.

What are your thoughts? Is there a better way to go about this? If so, please share.

Quickly Set Up a Templating System Using .htaccess is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

The .htaccess

#Wordpress's .htaccess code
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

If the “mod_rewrite.c” module is present, that means that mod_rewrite is available and will be used. If not, the mod_rewrite code will be ignored. Using this conditional statement will prevent 500 Internal Server Errors.

Check For Module Presence in .htaccess is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_URI} !^/maintenance\.html$
RewriteRule ^(.*)$ http://domain.com/maintenance.html [R=307,L]

Once we posted the maintenance.html page and .htaccess code on both the old hosting environment AND new hosting environment, we switched the DNS settings. Before making the switch, we had ported the website’s code to a “utility” domain and made adjustments so that the website would function well in the new hosting environment. Now that the DNS had been changed, we wanted to make sure that the website would function well on the new domain within the new hosting environment. Unfortunately the code above blocks EVERYONE from accessing any file besides the maintenance.html file. Fortunately my gifted IT team had the answer:

RewriteEngine On
RewriteBase /
RewriteCond %{REMOTE_ADDR} !^11\.111\.111\.111
RewriteCond %{REQUEST_URI} !^/maintenance\.html$
RewriteRule ^(.*)$ http://domain.com/maintenance.html [R=307,L]

The above code sends all users to maintenance.html EXCEPT those with the specified IP, which just so happened to be us. We got to test the website while others were locked out. When we were satisfied with the website, we removed the .htaccess code and the site was back up immediately!

.htaccess “Down For Maintenance” Page Redirect is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

The .htaccess Code

RewriteEngine On
RewriteCond %{SERVER_PORT} 80
RewriteRule ^(.*)$ https://domain.com/$1 [R,L]

Obviously, you’ll want to change “domain.com” to your domain. Another short snippet of code that has a big impact on your website!

Force Secure (SSL) Pages With .htaccess is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.