With a mixture of a few techniques added to the .htaccess or httpd.conf files, you can reduce the pageload and the bandwith usage of your website fairly easily. In the examples below i’m referring to expressions for addition to .htaccess, the http.conf file may be structured differently to do the same things. I’m setting this up in a standard LAMP setup with Apache 2 and PHP5. It will also wirk with versions of PHP4 but not all the following items work in Apache 1.3.

Apache Module mod_expires

The first thing to do is extend the amount of time text, images, css, flash and javascript are stored in the users cache. To turn this on we need mod_expires to be active, we then use the expression ‘ExpiresActive On‘. We then set a default expiry for everything which is generally set to 6 hours (300 seconds) from the time of access. This is set using the expression ‘ExpiresDefault A300‘. Alternatively we can set it to expire a set amount of time since the file was last modified using M instead of A as in ‘ExpiresDefault M300‘. Then, if need be, we can take a more granular approach to expiration times by setting expiration by filetype using the expression ‘ExpiresByType [mimetype] [A|M][seconds]‘. So to set GIF images to expire one week from time of access we’d use ‘ExpiresByType image/gif A604800‘.

FileETag Directive

The FileETag directive configures the file attributes that are used to create the ETag (entity tag) response header field when the document is based on a file. Because we’re manually setting expirations we don’t require these headers so it’s easiest to just turn it off using the expression ‘FileETag none‘.

Compressing PHP Pages

The following requires the PHP installation to have the zlib extension enabled, which it should be by default. We use the expression ‘php_value output_handler ob_gzhandler‘ to turn on compression of the final php pages sent to the users browser. It’s noted on the PHP.net website that turning this on via the php.ini ‘zlib.output_compression‘ is preferred if available to edit.

Apache Module mod_deflate

As of Apache 2.0, there’s an available module that compresses the server output before sending to the user, called mod_deflate. This module must be turned on in order to work.  I set this up to compress by filetype so it looks like ‘AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript text/x-javascript application/javascript application/x-javascript‘. There are ways to set this up even on a per browser basis but since the browser negotiates with the server before any files are transferred, it’s not necessary.  If the browser is not compatible with compressed content, the server will provide the content uncompressed.

It’s also worth noting that Apache version 1.3 had a method for serving compressed content called mod_gzip.

Final Notes

Using these methods I’ve decreased pageload and bandwith on my site, after adding it my ySlow score for the homepage went from a D(64) to a B(83) and there was a noticeable increase in pageload speed as I was navigating the site. Many people stress that including this code into the httpd.conf file is better because it loads faster and isn’t reloaded every page load as the .htaccess file would be but my being on a shared environment I haven’t tried it myself..

Final Code

ExpiresActive On
ExpiresDefault A300
ExpiresByType text/javascript A2592000
ExpiresByType text/x-javascript A2592000
ExpiresByType application/javascript A2592000
ExpiresByType application/x-javascript A2592000
ExpiresByType text/css A604800
ExpiresByType image/gif A604800
ExpiresByType image/png A604800
ExpiresByType image/jpeg A604800
ExpiresByType text/plain A604800
ExpiresByType application/x-shockwave-flash A2592000
ExpiresByType application/pdf A604800
ExpiresByType text/html A300
FileETag none php_value output_handler ob_gzhandler AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript text/x-javascript application/javascript application/x-javascript

This might be something very obvious to some people but I for one never took the time to look into it until I started working with Joomla 1.5. Their new system uses several .ini files for the language packs which is pretty cool if you ask me. It was because of this that I finally looked into editing different file types in Dreamweaver. It’s rather easy, go to Edit » Preferences (CTRL + U) and in the menu that pops up go to the ‘File Types / Editors‘ and add any file extensions to the end of the textbox ‘Open in code view:‘. So for example mine was…

.js .asa .css .cs .config .inc .txt .as .asc .asr .vb

and now it’s…

.js .asa .css .cs .config .inc .txt .as .asc .asr .vb .ini .htaccess

That’s it! You can add any other file types you want Dreamweaver to open from here too. No more notepad for htaccess edits!

I wasn’t sure what to think about Sun acquiring MySQL but after reading this post by Kaj Arnö i’m feeling pretty good about the prospects. I didn’t know that Sun had a proven track record as the largest contributor to Open Source, that was a big part of what helped ease my mind. Java has been released under the GPL. So has the OpenSolaris operating system, Open Office / Star Office, the GlassFish application server and the NetBeans IDE tool. That’s a long impressive list of applications. Finally, MySQL will still being managed by the same people, and their charter is still the same so there should be no anxiety about them changing directions with MySQL.  I say good for them, it must feel great to get your hard work recognized like that.  I’ve been using MySQL for years and it’s the only database system I use in daily development and I couldn’t be happier. I’m excited to see where this goes in the future, only time will tell. A press release on the Sun website “Sun Microsystems Announces Agreement to Acquire MySQL” explains the acquisition in more detail.

It’s not too often that I find a good reason to make a site scroll exclusively horizontally rather than the easier and generally more accepted vertically but I’ve found myself in that situation recently and finding support on the subject was minimal at best so i felt it prudent to share what I’ve found to help those of you that need a horizontally scrolling site. Any searches I tried in Google were referencing how to get rid of the horizontal scroll, how to avoid the horizontal scrollbar and just how bad the horizontal scroller is in general. That is until I found a website dedicated to it called The Horizontal Way. Not only is it a showcase of sites that have used the horizontal way of display, it’s also a fine example of a horizontal display in itself. Definitely worth a bookmark for that rare occasion when you want to go against the grain of web standards.

I never even heard of a coding ‘framework’ until I found out about the multitude of lightweight and powerful frameworks for javascript such as jQuery and Prototype. So it goes without saying that when I found out there were some for PHP too my mind was sufficiently blown. After looking through a few different types I settled on trying one called Code Igniter because it looked to have the smallest footprint and was among the easiest to learn. There are several different reasons i’ve used CodeIgniter ever since I found out about it a few months ago. Following is a few examples of why this framework is priceless to me and my productivity. One is the structure it forces upon you (in a good way) namely the Model-View-Controller dev pattern. Right out of the box I found myself writing code more segmented and documented, which is excellent for those functions that are reusable in future projects like image processing and user logging. Also I love the way the URLs are designed to be search-engine and human friendly right out of the box. For example instead of a URL like artwork.php?piece=23&order=ASC it could end up more like /artwork/23/asc/. One thing I’ve noticed regarding this URL rewriting is that it makes it a little bit more challenging to integrate it into other script packages like WordPress that have their own rewriting method. Finally, there’s a ton of common functions, classes and helpers that range from form validation to email to sessions. It’s all been battle tested and works as you would expect them to every time. I apologize for how broad this is but it’s just too huge of a reason to explain in detail, if you’re interested in reading more about these there’s a detailed user manual online here and it’s all in HTML so it’s also included in the zip when you download the framework. I’ve created about 6 sites with this framework and can’t count the number of times I was able to go back to a previous site and reuse a function that not only saved me time in development but also in testing because it was all done already. All in all I think the fact that I feel I’m more productive, efficient and create all around cleaner and more documented code is the reason I love using this framework the most.

OK, so apparently i’ve been living under a rock for the past several months because this fairly large bit of news slipped past me. Google bought DoubleClick back in April for $3.1 Billion dollars, which is pretty big news but that’s not the reason for this article. You see, DoubleClick owns Performics a search engine marketing company. So Google purchased DoubleClick and Performics is a wholly owned subsidiary of DoubleClick, therefore, Google owns Performics. The largest and most popular search engine now owns a search engine marketing company whose sole purpose is to increase clients rankings in search engines. People paying Performics for this optimization is, at least by association, paying Google. I’m definitely not the first one to think this crosses some kind of line, conflict of interest at the very least. What do you think?

Saw an amazing web campaign for Diesel Clothes that blew me away. I wonder how long and how much that took to make! This is the kind of stuff i’d love to do, although the video portion would probably have to be done by someone else.

Found a cool blog-like resource of cool AJAX and ‘web2.0′ applications and tools over at ajaxFlakes. Looks like it’s only been around since August but it already has 6 pages of cool helpful tools. I’ve already added it to my del.icio.us, will you?

Finally, a friend turned me on to this freelance hub called freelance switch that I thought was a great implementation of a job listing database. There’s definitely no shortage of such sites out there these days but something about how this is laid out and organized really made it easy to use. I’m not much one to actively look for freelance gigs but if I did I’ll be sure to check out this site first!

I recently had the opportunity to delve deeper into MySQL and how to optimize and generally better my database structure and queries. There’s a lot of information on this topic so I thought i’d share the top ten things that matter to me when creating and querying databases.

1. Make the fields of your tables as small as possible, if you know a varchar field is never going to need a value more than 10 characters, set it to varchar(10).
2. Always use auto Increment IDs in your tables, even if you don’t expect you’ll need them now they always seem to come in handy.
3. Index all the fields you will be querying directly, especially those that you know an exact value for.
4. Normalize the data structure as much as possible, duplicate data is just more for the server to wade through when running a query.
5. If you’re querying something against a number e.g.( WHERE x = 12 ) there’s no need to use quotes around the number value, this actually slows down the query because it needs to convert from a string to a number.
6. Limit the use of LIKE and the % wildcard e.g.(WHERE userName LIKE %Woods%) as this slows the query considerably. If you know that the value is always going to be at the beginning of a field, be sure to only use the wildcard at the end to speed up the query e.g.(WHERE userName LIKE Woods%).
7. Multiple field indexes are good at speeding up queries but be aware that the first field in the index must be the first item from that index searched in the query or the whole thing won’t be used the way you intended.
8. Be aware that there is a cost to indexing, both in time and space. Indexes speed up select queries but slow down deletes and inserts and basically any other queries that involve writing to the DB. The more indexes a table has the slower these write queries will be because the indexes have to be changed with the data. The indexes also take up disk space which may cause a database to reach its disk limit more quickly. The practical implication of both these factors is that if you don’t need a particular index to help queries perform better, don’t create it.
9. Use the EXPLAIN keyword with your query to get important information on the query including the possible keys and estimated rows that will need to be searched to find a result. Especially handy with multiple table queries with joins.
10. Be careful with joins, if used incorrectly they can slow down a query considerably. Values from the preceding table (as listed in the output of EXPLAIN) are used to find rows in the current table. So if you have three tables each with 1000 rows to search you’re actually returning 1,000,000,000 rows of data. Obviously this is too many and indexes should be employed to reduce this number to something more manageable.

I came back to work today after the weekend “fall back” and noticed that my Dreamweaver CS3 was starting to act up. Ever since we got it it’s been running like a champ so I googled “dreamweaver CS3 crashes” and lo and behold one of the first results is a TechNote posted today on adobe.com that links the frequent crashes on the DST ending. Of all the things I thought it could be, changing the clocks back an hour wasn’t even considered. That’s why i’m posting this in the attempts to spread the word about this odd error. Here’s a quote of the Issue as explained in the Technote.

Adobe Dreamweaver CS3 crashes when working with certain PHP or ASP files in Code view or Design view after the clock goes back one hour, when Daylight Savings Time ends. The crashes only occur when selecting certain lines in Code view, or selecting certain objects in Design view. The crashes only occur in files that have PHP or ASP code, intermingled with HTML code. The crashes do not occur in Dreamweaver 8 or earlier (Ref. 229536).

Click Here to read more and to find out how to fix this issue.

It’s an amazing feat to put the 200 most successful websites on the web into any kind of organization but to order by category, proximity, success, popularity and perspective? Unheard of! That is until now, somehow the people over at information architects expanded upon their previous version to be more consistent and therefore more revealing and ultimately more helpful. Check it out, there’s images PDFs and webpages and if that wasn’t enough you can even get a printed poster!

Here’s a Firefox extension that I can see as being another vital tool to web developers trying to get those pixel-perfect web 2.0 applications done faster and with less hassle. It’s called FireBug and does a lot of things that the popular Web Developer extension does such as highlighting and code views but this also give additional support for Javascript debugging, CSS and JS tweaking on the fly and Exploring a treeview of the DOM. One of the coolest features, however, is the ability to monitor network activity so you can see exactly what is taking your pages so long to load. With the increasing complexity of even the most basic websites, tools like this are going to be a vital resource to keep production time down.

On their website they sell it as the “Write Less, Do More, JavaScript Library” but the skeptic in me chose to determine that on my own. So I gave it a shot, tried animating some dropdowns using one of the tutorials on their site and I couldn’t believe it. In 3 lines I had finished what would have taken me a whole separate file to accomplish. Even more amazing was that it was set up in less than fifteen minutes, that alone makes this script gold to me. But there’s so much more it can do, i’ve hardly scratched the surface myself but had to write about this amazing time-saving library. I think things like this is the true direction of the “Web 2.0″ phenomenon, coding smarter and not harder. Write it once and use it forever, spend that extra time developing something even better, more usable and more accessible than we ever dreamed possible a short year ago. I’m keeping my eyes open for libraries such as this for other applications, I can see such libraries becoming as crucial to my arsenal of tricks as my stack of code snippets I pull from regularly.