|
February '10 |
|
||||
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | ||||||
Sunday, February 28. 2010
YSlow: Getting a better score and a faster site.
I decided that it was finally time I took a serious look at increasing the YSlow score for our websites. I was under the impression that browsers would automatically cache (by default anyway) certain graphic elements to save on bandwidth, but our staff website has a repeating background image for a left hand navigation bar, and it would disappear for a fraction of a second while reloading the other page; this told me that something was not right, and YSlow might be the answer I was looking for (and that my PHP framework of choice was not to blame).
YSlow:
Initial Score: 67
I choose the smallest size images exported from Photoshop, and if I ever use a PNG, I use a great tool called "PNGGuantlet" (Windows only) which compresses PNGs while also removing the alpha channel problems that make PNGs appear with different colors than they were intended to. I also have compressed my main JS file, and CSS file(s). All XHTML should be valid (unless I updated a link and forget to escape an ampersand), the DOCTYPE is listed, character set is given, and all non-background images contain height and width properties. Oh, I also have a default favicon.ico file. These are all good recommendations to do regardless, and in doing so YSlow gave me a pretty decent score (albeit, not that great if it was a test in school).
Two modifications to YSlow's scoring:
1. I am not Amazon. I don't necessarily need a CDN for my content.
2. I don't need a subdomain to house my CSS, JS, and images. If I end up storing videos, that already has a subdomain set up and ready.
Therefore, I modified YSlow's grading scheme. To do so, there is a dropdown menu to the right of the 4 tabs in the YSlow toolbar, it is labelled "YSlow(V2)". Click the "Edit" button to the immediate right of that. In my scheme, I disabled "Use a Content Delivery Network (CDN)" and "Use cookie-free domains". You cannot overwrite the rule set, so you have to save it as something else, I named mine "SSPL" since that is the website domain that I care about (for work). Different websites have different criteria, so it only makes sense to name it something related to the website you are concerned about. Go through and uncheck what you don't believe applies to you. If you're uncertain, leave it checked. This little configuration raises my grade up already - that was easy.
Here are the .htaccess rules I've added to raise my own score, what they're for and why I chose to make them:
Enable GZip'ing of components:
The AddOutputFilterByType DEFLATE [list of mimetypes] was the command I used to gzip the particularly listed files that have such a MIME-Type: html, txt, js, css, js (variation), json, json (variation). Some browsers read JSON and JavaScript as an application mime-type whereas others read it as a text type, I figured I would simply cover my bases. Although these are ASCII types, you could just as easily gzip binary types, such as GIF, JPG, or PDF (though theoretically they should already be compressed and you're just adding extra work for the server).
Configure ETags:
From what I have read, ETags are a mixed breed. They can have some benefits, but they can also have some detractions. Again, considering that I'm not Amazon and I will be enabling the Expires heading, I opted to simply disable ETags. You can disable ETags in Apache under an .htaccess file with the unset rule above, along with the FileETag None to cover most supporting browsers (one would hope). I wasn't able to find any examples on how to properly "configure" ETags so that YSlow would not complain other than to simply turn them off. ETags, from what I've read, are a variation on telling the browser to cache certain files in a certain manner, but it doesn't work on any website that is run on multiple servers for the same content. Either way, I opted for the Expires heading which made ETags rather redundant from what I could tell.
Enabling an Expires Heading:
It appears that in Apache, by default, Expires headings are disabled, and just like mod_rewrite, you must explicitly tell Apache that you wish to use it, so the first thing you have to do is turn it on: "ExpiresActive On". Once that is done, there are a few ways to set the expiry time; I opted to use a human readable implementation, and YSlow expects a "far future" date (from the date last modified). As one of my sites is currently built with HTML files pulling in a template, the original files won't typically be modified for a long time, so I had to make my future date a FAR future date (10 years from last modification) - your experience may vary. For further information on Expires, take a look at the Apache documentation for mod_expires.
Additional speed enhancements:
I recently read that if you have a framework that may take some time figuring out what data must be displayed prior to even getting it to the server, it may be a good idea to flush the buffer so that the data that can be sent to the browser can be sent prior to everything else - such as the document head which contains the page title, CSS, and sometimes JS. That way, while the rest of the page is being rendered by the server, the JS/CSS has time to download. This is actually why I decided to leave my JS at the top of my website rather than placing it in the footer. I live by graceful degredation, but if the page loads before the JS does, it can also cause a screen flicker which is against accessibility guidelines for HTML. In this case, it was possible speed for accessibility - I choose accessibility. I personally really don't want me, or my client(s) getting sued for accessibility issues because "Oh hey, it loads a second faster now!". If you had an interactive rich website such as Facebook or MySpace, I'd imagine you'd have to place JS in the footer and have a separate, accessible domain for others...if that's even easily possible. Anyway, what I did with flushing the output buffer was to (in PHP) modify my template file, I called PHP's flush() function after the closing HEAD tag in the HTML template file.
Anyway, with those small tweaks and tricks, I was able to get my score up to 96. I have a B in 3 categories:
1. Expires header issue (CDN of ajax.googleapis.com, it won't recognize my CDN) as a CDN has a non-far future expiration date in the called JS file.
2. Minify CSS and JS - it is minified, so I'm not sure what it wants from me. The filesize is probably too large for an A.
3. Put JavaScript at the Bottom - I already explained why I don't want to do this, but I've left the rule in anyway.
Now my site seems to be a bit more responsive, and the background image I mentioned before no longer disappears and reappears (unless I press refresh really, really fast, confusing the browser's cache I guess).
YSlow:
Initial Score: 67
I choose the smallest size images exported from Photoshop, and if I ever use a PNG, I use a great tool called "PNGGuantlet" (Windows only) which compresses PNGs while also removing the alpha channel problems that make PNGs appear with different colors than they were intended to. I also have compressed my main JS file, and CSS file(s). All XHTML should be valid (unless I updated a link and forget to escape an ampersand), the DOCTYPE is listed, character set is given, and all non-background images contain height and width properties. Oh, I also have a default favicon.ico file. These are all good recommendations to do regardless, and in doing so YSlow gave me a pretty decent score (albeit, not that great if it was a test in school).
Two modifications to YSlow's scoring:
1. I am not Amazon. I don't necessarily need a CDN for my content.
2. I don't need a subdomain to house my CSS, JS, and images. If I end up storing videos, that already has a subdomain set up and ready.
Therefore, I modified YSlow's grading scheme. To do so, there is a dropdown menu to the right of the 4 tabs in the YSlow toolbar, it is labelled "YSlow(V2)". Click the "Edit" button to the immediate right of that. In my scheme, I disabled "Use a Content Delivery Network (CDN)" and "Use cookie-free domains". You cannot overwrite the rule set, so you have to save it as something else, I named mine "SSPL" since that is the website domain that I care about (for work). Different websites have different criteria, so it only makes sense to name it something related to the website you are concerned about. Go through and uncheck what you don't believe applies to you. If you're uncertain, leave it checked. This little configuration raises my grade up already - that was easy.
Here are the .htaccess rules I've added to raise my own score, what they're for and why I chose to make them:
Enable GZip'ing of components:
The AddOutputFilterByType DEFLATE [list of mimetypes] was the command I used to gzip the particularly listed files that have such a MIME-Type: html, txt, js, css, js (variation), json, json (variation). Some browsers read JSON and JavaScript as an application mime-type whereas others read it as a text type, I figured I would simply cover my bases. Although these are ASCII types, you could just as easily gzip binary types, such as GIF, JPG, or PDF (though theoretically they should already be compressed and you're just adding extra work for the server).
Configure ETags:
From what I have read, ETags are a mixed breed. They can have some benefits, but they can also have some detractions. Again, considering that I'm not Amazon and I will be enabling the Expires heading, I opted to simply disable ETags. You can disable ETags in Apache under an .htaccess file with the unset rule above, along with the FileETag None to cover most supporting browsers (one would hope). I wasn't able to find any examples on how to properly "configure" ETags so that YSlow would not complain other than to simply turn them off. ETags, from what I've read, are a variation on telling the browser to cache certain files in a certain manner, but it doesn't work on any website that is run on multiple servers for the same content. Either way, I opted for the Expires heading which made ETags rather redundant from what I could tell.
Enabling an Expires Heading:
It appears that in Apache, by default, Expires headings are disabled, and just like mod_rewrite, you must explicitly tell Apache that you wish to use it, so the first thing you have to do is turn it on: "ExpiresActive On". Once that is done, there are a few ways to set the expiry time; I opted to use a human readable implementation, and YSlow expects a "far future" date (from the date last modified). As one of my sites is currently built with HTML files pulling in a template, the original files won't typically be modified for a long time, so I had to make my future date a FAR future date (10 years from last modification) - your experience may vary. For further information on Expires, take a look at the Apache documentation for mod_expires.
Additional speed enhancements:
I recently read that if you have a framework that may take some time figuring out what data must be displayed prior to even getting it to the server, it may be a good idea to flush the buffer so that the data that can be sent to the browser can be sent prior to everything else - such as the document head which contains the page title, CSS, and sometimes JS. That way, while the rest of the page is being rendered by the server, the JS/CSS has time to download. This is actually why I decided to leave my JS at the top of my website rather than placing it in the footer. I live by graceful degredation, but if the page loads before the JS does, it can also cause a screen flicker which is against accessibility guidelines for HTML. In this case, it was possible speed for accessibility - I choose accessibility. I personally really don't want me, or my client(s) getting sued for accessibility issues because "Oh hey, it loads a second faster now!". If you had an interactive rich website such as Facebook or MySpace, I'd imagine you'd have to place JS in the footer and have a separate, accessible domain for others...if that's even easily possible. Anyway, what I did with flushing the output buffer was to (in PHP) modify my template file, I called PHP's flush() function after the closing HEAD tag in the HTML template file.
Anyway, with those small tweaks and tricks, I was able to get my score up to 96. I have a B in 3 categories:
1. Expires header issue (CDN of ajax.googleapis.com, it won't recognize my CDN) as a CDN has a non-far future expiration date in the called JS file.
2. Minify CSS and JS - it is minified, so I'm not sure what it wants from me. The filesize is probably too large for an A.
3. Put JavaScript at the Bottom - I already explained why I don't want to do this, but I've left the rule in anyway.
Now my site seems to be a bit more responsive, and the background image I mentioned before no longer disappears and reappears (unless I press refresh really, really fast, confusing the browser's cache I guess).
Friday, February 19. 2010
Cassie Print Station - Automatically Close the Window
Cassie is a PC Reservation Management system software built for libraries, or other venues that wish to offer multiple PCs for the public to use. It also has a print management station. Unfortunately, as of the current version, when a user goes to view their own print jobs, their account window stays active "forever" until they, or someone else clicks on the "Close" button. When using with a JAMEX corporation coinbox, it also doesn't give the user their change until the window is closed (insert $1.00 for a $0.60 charge, it won't expell the $0.40 until the window is closed).
This is a bit of a problem.
I've used AutoIT, an automation scripting language, to automate the process of a user clicking on the close button. The makers of Cassie didn't make it easy though, I was unable to detect the actual button, thankfully ALT+F4 worked (ESC worked until the JAMEX portion was added, for some reason it stopped working afterward).
This uses the included Timers.au3 file to do most of the dirty work in detecting an idle state. If the computer is left idle for 45 seconds, it will issue ALT+F4 and close the window. ALT+F4 cannot close the application itself in this instance (and won't be issued unless that window exists and is active anyway). Although it checks every 100 milliseconds and runs at all times that the computer is turned on, I tested the resources it takes up...it was barely noticeable on an old P4 @ 2.80 GHz w/2.86 GB RAM (my work PC). This application (once compiled with AutoIT) should be placed in the Windows' Startup folder (or a respective registry key).
This is a bit of a problem.
I've used AutoIT, an automation scripting language, to automate the process of a user clicking on the close button. The makers of Cassie didn't make it easy though, I was unable to detect the actual button, thankfully ALT+F4 worked (ESC worked until the JAMEX portion was added, for some reason it stopped working afterward).
This uses the included Timers.au3 file to do most of the dirty work in detecting an idle state. If the computer is left idle for 45 seconds, it will issue ALT+F4 and close the window. ALT+F4 cannot close the application itself in this instance (and won't be issued unless that window exists and is active anyway). Although it checks every 100 milliseconds and runs at all times that the computer is turned on, I tested the resources it takes up...it was barely noticeable on an old P4 @ 2.80 GHz w/2.86 GB RAM (my work PC). This application (once compiled with AutoIT) should be placed in the Windows' Startup folder (or a respective registry key).
Thursday, February 18. 2010
Enabling SSL (HTTPS) via htaccess Only if Matching a Specific Domain
I had a momentary stumble today that I (somehow) couldn't get through my head. Perhaps it's just because it's been so long since I've worked with mod_rewrite, but regardless of that, here's the situation and the solution:
"The Situation" said that the situation is:
I had multiple conditions that needed to be met before a rule should be run, otherwise it should be ignored.
I am running (and require) SSL on my production server.
I am not running SSL on my development box.
I didn't want multiple .htaccess files in my SVN repository.
The solution:
"Duh." Multiple RewriteCond in a row (separated by a newline) all must be met before the RewriteRule is run.
The resulting .htaccess took the following form:
The last 3 lines dealing with rewrite in my .htaccess file are related to the code library I'm using, and are not pertinent to the problem here. The important lines are as follows:
RewriteCond %{HTTPS} !=on
RewriteCond %{HTTP_HOST} ^staff\.sspl\.org [NC]
RewriteRule ^(.*) https://%{SERVER_NAME}/$1 [R,L]
The first condition tests to see if SSL (https protocol) is not being used in the request.
The second condition tests that the domain's host is "employees.sspl.org" (URL changed to protect the innocent).
If both tests pass, then I redirect the user to the host (and path "/$1") while using the https protocol (SSL). Done.
"The Situation" said that the situation is:
I had multiple conditions that needed to be met before a rule should be run, otherwise it should be ignored.
I am running (and require) SSL on my production server.
I am not running SSL on my development box.
I didn't want multiple .htaccess files in my SVN repository.
The solution:
"Duh." Multiple RewriteCond in a row (separated by a newline) all must be met before the RewriteRule is run.
The resulting .htaccess took the following form:
The last 3 lines dealing with rewrite in my .htaccess file are related to the code library I'm using, and are not pertinent to the problem here. The important lines are as follows:
RewriteCond %{HTTPS} !=on
RewriteCond %{HTTP_HOST} ^staff\.sspl\.org [NC]
RewriteRule ^(.*) https://%{SERVER_NAME}/$1 [R,L]
The first condition tests to see if SSL (https protocol) is not being used in the request.
The second condition tests that the domain's host is "employees.sspl.org" (URL changed to protect the innocent).
If both tests pass, then I redirect the user to the host (and path "/$1") while using the https protocol (SSL). Done.
Friday, February 5. 2010
Interesting Links from the Web - January 2010 Edition (Part 2)
Twitter can be a real boon for learning new things and finding interesting little projects so long as you manage to follow the right people.
Sticky Footer: Alternative Approach - This takes an alternative approach using only a single conditional statement for IE and supports IE5.5+, with 100% valid CSS and HTML
Design Contract Template - A template for contractual jobs in design, alter to your own use (quite verbose)
15 Tips for Designing Tables - A nice resource on using CSS and JS to markup and add interaction to your tables, a nice new take on it with good examples
A review of Rich Text Editors - Not just your grandma's WYSIWYG Editor...great thorough review
An HTML5 Video Player - Created with JavaScript and HTML5 markup; no Flash here folks!
Microsoft's Translator Widget - This thing is the coolest translator I think I've ever seen. It loads the translated version progressively via AJAX without any new page load -- with a loading bar to boot!
Free SEO Toolkit for IIS - I don't use IIS, but for those that do, this would be an enormous help, watch the video to see (good to watch even if you don't use IIS)
Dygraphs - Interactive, zoomable, plottable, QUICK JavaScript-based graphing library - it might give Highcharts.js a run for its money on line graphs (it's basically all this does, unfortunately)
Vector Social Media Icons - I'm not usually one to be excited enough about icons to tell people about them, but the fact that the author supplied two versions of the icons in vector format is pretty darn cool (32x32 and 16x16; 32x32 never scales well to 16x16 size, and 16x16 size is made especially for that size and doesn't look good stretched out)
Revised Font Stack - Looking for more fonts to use in your CSS without requiring @font-face or sIFR? OS's have updated their default font base, check here to see what more options us web developers might have nowadays
jQTouch - "A jQuery plugin for mobile web development on the iPhone, iPod Touch, and other forward-thinking devices." Check out the demo, it's sick...in the good sense.
Free App A Day.com - For all you iPod Touch and iPhone users, check out this site for some free apps! (Don't say I never gave you anything!)
Sticky Footer: Alternative Approach - This takes an alternative approach using only a single conditional statement for IE and supports IE5.5+, with 100% valid CSS and HTML
Design Contract Template - A template for contractual jobs in design, alter to your own use (quite verbose)
15 Tips for Designing Tables - A nice resource on using CSS and JS to markup and add interaction to your tables, a nice new take on it with good examples
A review of Rich Text Editors - Not just your grandma's WYSIWYG Editor...great thorough review
An HTML5 Video Player - Created with JavaScript and HTML5 markup; no Flash here folks!
Microsoft's Translator Widget - This thing is the coolest translator I think I've ever seen. It loads the translated version progressively via AJAX without any new page load -- with a loading bar to boot!
Free SEO Toolkit for IIS - I don't use IIS, but for those that do, this would be an enormous help, watch the video to see (good to watch even if you don't use IIS)
Dygraphs - Interactive, zoomable, plottable, QUICK JavaScript-based graphing library - it might give Highcharts.js a run for its money on line graphs (it's basically all this does, unfortunately)
Vector Social Media Icons - I'm not usually one to be excited enough about icons to tell people about them, but the fact that the author supplied two versions of the icons in vector format is pretty darn cool (32x32 and 16x16; 32x32 never scales well to 16x16 size, and 16x16 size is made especially for that size and doesn't look good stretched out)
Revised Font Stack - Looking for more fonts to use in your CSS without requiring @font-face or sIFR? OS's have updated their default font base, check here to see what more options us web developers might have nowadays
jQTouch - "A jQuery plugin for mobile web development on the iPhone, iPod Touch, and other forward-thinking devices." Check out the demo, it's sick...in the good sense.
Free App A Day.com - For all you iPod Touch and iPhone users, check out this site for some free apps! (Don't say I never gave you anything!)