Note: This only works with Apache 2.0+ and the compression will only work if your apache configuration has “mod_deflate” turned on.

To help visualize this speed up, I’m using the plugin YSlow for firefox’s Firebug. If your not using Firefox already for development, shame on you. Lets take a look at the site as it is now.

As you see, we get a nice fat score of F. This isn’t like getting an F on your math test though, this plugin is a VERY hard grader. However, it won’t take much to improve this score. As we see in the top graph, even with our browser cache, we’re still pulling down 52.2k and the real killer 36 requests. We look at our report card and see why we failed. I’m only gonig to talk about the things we are going to fix. “Add Expires Header” is first. Basically when we serve up a file we can give it an expires time. That way the browser will KNOW that the file it has in its cache is still good until that date comes. We can set that however long in the future we want. The next is “GZip Components”. This is a type of compression that can be applied to most code files (js, css, html, php) that get served up as they are text based and have lots of wasted space. This means that the browser has less to download from your server. As you see I’ve already put my CSS on top and JS on the bottom which is always good coding practices. The last thing is “Configure ETags”. Its hard to explain how these things work, but basically its a time/server stamp on every file so the browser can ask the server if it has a new file. However, with our expire times already set, we don’t need/want the browser to waste its energy checking these. The problem with ETags are that even if your browser has a perfectly good cached version of the file, it is still going to bug the server for a new version. This is a request and is bad.

There is a snippet to help all of these issues in one swoop. An .htaccess genius Vinny I work with came up with this clever script you can simply drop in your root .htaccess file and it will make your score MUCH better. Here it is:

<FilesMatch “\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$”>
Header unset ETag
FileETag None
ExpiresActive On
ExpiresDefault “access plus 4 day”
</FilesMatch>

<FilesMatch “\.(html|htm|php|js|css)$”>
SetOutputFilter DEFLATE
</FilesMatch>

After dropping that guy in there, you’ll get a score that looks like this:

Look at That!  Only 1 request and the rest was cached.  Thats better savings than if you woke up at 4am on Black Friday to go to Best Buy.  The only issue is that if you updated your CSS file and uploaded it, some people would have to wait 4 days to get the new one.  However, there are cache busting techniques I’m working on automating that I’ll share with you soon.

First of all, you should index your tables to make for faster joins. Thats an entirely different subject so read up on it here. However, there is an even simpler solution that appears obvious once you see it. The way MySQL does a join is it reads the first table, does the join on the next, then the next. It procedurally goes through each table in order that you wrote it. Knowing this makes a BIG DIFFERENCE. Say we have tables, “assets”, “assets_to_types” and “types”. Normally you’d type something like this:

SELECT *.a, *.b, *.t FROM assets a JOIN assets_to_types b ON a.type = b.type_id JOIN types t ON b.type_id=t.id WHERE t.name = ‘picture’

Makes sense right? You want the asset so that first then join on the type. Well lets say we have 1,000 records in asset, 1,000 records in assets_to_types and 5 records in types. (for the 5 different types of assets you have).  The above query would start with all 1,000 assets, then join them on the 1,000 types to assets, then onto the 5 records.  That’s pretty intense.  Alternatively if you started with the smallest table first, then all the following joins will happen much faster because it has to look at less rows.  Try this instead.

 SELECT *.a, *.b, *.t FROM types t JOIN assets_to_types b ON b.type_id=t.id JOIN assets a ON a.type = b.type_id WHERE t.name = ‘picture’

You will get the same results but in a MUCH faster query.  For the complete explanation on why this works so well, check out fiftyfoureleven for the article.

Let’s say we have a div with the id of “content_container” dynamically filled with content and you want to know the height. Well traditionally, even with the help of old libraries, this is at least a 3-4 confusing lines of code. But with jQuery its this:

var oldHeight = $(’#content_container’).height();

Thats it! You might have even guessed that right? Now lets go for something a little trickier. Say we have a page with several tabs and one of them is selected. When you click on different tab you’d like the old selected tab to go unselected and make the one you clicked on selected. There are typically 2 ways to do this. First would be to loop through all of the tabs and look for the one with the class of selected and change it. Another way would be to blindly reset them all to unselected and then select the clicked one. Both of these methods take up precious time and the second one even might cause visual jumps on the page. Lets see how jQuery will do it.

$(’.tab_container .tab_selected’).removeClass().addClass(’tab_unselected’);
$(’#tab_’+type).removeClass().addClass(’tab_selected’);

Yup. 2 lines. Because jQuery is chainable, many things can be accomplished on one or two lines. The selector makes really easy work of this. It simply says find the div with a class of “tab_selected” within the “tab_container” div and remove its class and add unselected. The second line just says the id of the tab we clicked on and remove its class and add “tab_selected”. You can see how this can start to get very powerful. Also note the use of div id’s and div classes.

$(’.class_name’) - select an object by its class
$(’#id_name’) - select and object by its id

With jQuery, you can forget about all the tedious lines of javascript and replace it with sensible, simple, elegant lines of beautiful code. I will be writing more simple tutorials on jQuery as time goes on discussing animation, DOM manipulation, and Ajax. Until then check out http://jquery.com/

First I will share with you the wordpress plugin I made for it.  This plugin is simple and just carries the function and makes it obtainable through the template.  So even if you will not be using this for wordpress, you can download this and extract the function.

mk_excerpt.zip

Basically the function takes 3 arguments.  The content, the number of characters to cut off at, and the addition string (ex. usually “…”)  For all those who want to see the code, here it is:

function mk_html_substr($string, $length, $addstring=”")
{

    $addstring = ” ” . $addstring;
if (strlen($string) > $length) {
if( !empty( $string ) && $length>0 ) {
$isText = true;
$ret = “”;
$i = 0;
$currentChar = “”;
$lastSpacePosition = -1;
$lastChar = “”;
$tagsArray = array();
$currentTag = “”;
$tagLevel = 0;
$noTagLength = strlen( strip_tags( $string ) );

// Parser loop
for( $j=0; $j<strlen( $string ); $j++ ) {
$currentChar = substr( $string, $j, 1 );
$ret .= $currentChar;
if( $currentChar == “<”) $isText = false;
if( $isText ) {
// Memorize last space position
if( $currentChar == ” ” ) { $lastSpacePosition = $j; }
else { $lastChar = $currentChar; }
$i++;
}else{
$currentTag .= $currentChar;
}
// Greater than event
if( $currentChar == “>” ) {
$isText = true;
// Opening tag handler
if( ( strpos( $currentTag, “<” ) !== FALSE ) && ( strpos( $currentTag, “/>” ) === FALSE ) && ( strpos( $currentTag, “</”) === FALSE ) ) {
// Tag has attribute(s)
if( strpos( $currentTag, ” ” ) !== FALSE ) {
$currentTag = substr( $currentTag, 1, strpos( $currentTag, ” ” ) - 1 );
}else{
// Tag doesn’t have attribute(s)
$currentTag = substr( $currentTag, 1, -1 );
}
array_push( $tagsArray, $currentTag );
}else if( strpos( $currentTag, “</” ) !== FALSE ){
array_pop( $tagsArray );
}
$currentTag = “”;
}
if( $i >= $length) {
break;
}
}
// Cut HTML string at last space position
if( $length < $noTagLength ) {
if( $lastSpacePosition != -1 ) {
$ret = substr( $string, 0, $lastSpacePosition );
}else{
$ret = substr( $string, $j );
}
}
// Close broken XHTML elements
while( sizeof( $tagsArray ) != 0 ) {
$aTag = array_pop( $tagsArray );
$ret .= “</” . $aTag . “>\n”;
}
}else{
$ret = “”;
}
// only add string if text was cut
if ( strlen($string) > $length ) {
return( $ret.$addstring );
}
else {
return ( $res );
}
}else {
return ( $string );
}

}

So maybe it wasn’t Denver we needed, but Cliffside Park we needed to get away from.  We started our apartment search in our price range.  We still wanted to say in Jersey to keep the car, make paperwork easy and pay cheaper rent, but needed a cooler place.  The first place one thinks of is Hoboken.  I love Hoboken, but its just as crowded as Manhattan and almost just as expensive.  Then come the people that say Newark or Jersey City.  These aren’t horrible locations but not really nice either.  Newark is just plain ghetto, and although Jersey City is getting better, it doesn’t feel solid yet.  Erin found the answer on craigslist in a place 1.9 miles away called Guttenberg, NJ.  You’ve probably never heard of it, and there is a good reason.   It’s only 4 blocks wide!  Thats right, its a little town crammed in between West New York and North Bergen.

This apartment on paper looked worse than our other place.  It was less floorspace, only street parking (if your lucky) and more money!  Its charm, however beats any number on paper.  It was less floorspace but it uses it great in its open layout.  Most of the windows are shaded and the apartment stays naturally cool.  The neighborhood is dead quiet yet a block in any direction will get you to the police station, post office, minute marts, chinese food places, bars, pizza places, etc… Its a cool neighborhood.  And as a bonus, we were allowed to have a dog.  (see the Blue pictures)  The new place is also less than 1/2 block from Blvd East, which is not only breathtaking for views of the city, but every transportation vehicle in the area goes down it, so catching a bus into the city takes 10 minutes tops and only takes about 20 minutes until your in Times Square.

We’ve been here officially since  April 15th and have never looked back.  Our lives have completely changed for the better.  It amazing what can be just around the corner.  We’re not in no rush to move anywhere for a while.  Being in a place like this makes New York a wonder place to be near.