Compression of HTML, CSS and JavaScript is quite important for improving your site’s speed and should always be used.

Of you will find that all you need to do is add a line similar to the following to your .htaccess file:

AddOutputFilterByType DEFLATE text/html text/plain text/css text/xml application/x-javascript text/javascript application/javascript
Source: StackOverflow

However, if you’re on a GoDaddy shared hosting account you may have realised that this doesn’t work. GoDaddy’s help page recommends that you paste this code in all your PHP pages:

<?php if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) ob_start("ob_gzhandler"); else ob_start(); ?>

That’s fine, but from my understanding this will not cache your CSS or JavaScript. However, I found a solution here, which involves some .htaccess trickery to compress all your CSS and JavaScript files automatically. Enjoy!

A great effort to get people to switch from IE6: Let’s Kill IE6.

I couldn’t find the CSS for this anywhere, so here’s what I’m using.
Note: you will probably also want this image.


/* ============== */
/* Let's Kill IE6 */
/* ============== */
#letskillie6 {
width:400px;
background:#2A2A2A;
color:#CCCCCC;
font-size:14px;
line-height:18px;
position:absolute;
left:34%;
}
#letskillie6 #letskillie6_close {
background:url(images/letskillie6.gif) no-repeat 0 0;
float:right;
height:15px;
width:0;
overflow:hidden;
padding-left:15px;
margin:5px;
}
#letskillie6 #letskillie6_close:hover {
background:url(images/letskillie6.gif) no-repeat 0 -15px;
}
#letskillie6 .content {
width:100%;
margin:0;
float:none;
}
#letskillie6 .content .pic {
background:url(images/letskillie6.gif) no-repeat -15px 0;
height:73px;
width:55px;
display:block;
float:left;
margin:10px;
}
#letskillie6 .content p {
margin-top:10px;
padding-right:10px;
}
#letskillie6 .content p.browsers {
padding:0 10px 15px 10px;
}
#letskillie6 .content p.meta {
display:none;
}
#letskillie6 .content p.browsers a {
display:block;
float:left;
height:16px;
padding-left:20px;
margin-left:11px;
color:#A8C634;
}
#letskillie6 .content p.browsers a.ie8 { background:url(images/letskillie6.gif) no-repeat -70px 0; }
#letskillie6 .content p.browsers a.firefox { background:url(images/letskillie6.gif) no-repeat -70px -16px; }
#letskillie6 .content p.browsers a.opera { background:url(images/letskillie6.gif) no-repeat -70px -32px; }
#letskillie6 .content p.browsers a.chrome { background:url(images/letskillie6.gif) no-repeat -70px -48px; }
#letskillie6 .content p.browsers a.safari { background:url(images/letskillie6.gif) no-repeat -70px -64px; }


A great, cut-to-the-chase article I found about vertical centering with CSS.. enjoy

In the Woods – Vertical Centering With CSS.

I know rounded corners have come and will probably soon go, but after some searching for a good solution this one by far seems to the best:

http://www.tillett.info/2007/09/11/orb-fluid-css-one-image-round-borders/

My reasons?

1. I think the use of JS for rounded corners is not justified
2. Pure CSS methods add horrible amounts of markup and CSS
3. The traditional 4-image approach is ok but means 4 separate image requests, rather than the 1 that this method uses