Published on
January 31, 2009 in
Projects.
Very excited to show off a new plugin I just finished up for Streampad and AOL Music. It let’s you play mp3 tracks you post to your blog from the Streampad bottom bar – take a look below.
This Mother Mother track rocks. Also been enjoying this Late of the Pier track, this The Bird and The Bee track and of course, Matt & Kim.
Streampad is the brain child of Dan Kantor. If you are interested in participating in the beta program, leave me a comment below or shoot me an email.
Update: Streampad Plugin launched, you can download it here.
On Thursday, the new Asylum User Photos Experience phase 1 launched into production. I have been working for over 5 months on this product, needless to say – I am very excited!
The Asylum editorial staff kicked off the launch with this awesome comic book tattoo gallery, which despite limited promotion is already engaging users.
This application, which is code named UPP, is by far the most complex application I have launched for AOL. It has a ton of moving parts, from an intricate backend system using AOL proprietary technology stack called Dynapub to a front end API server that provides a JSONP API in order to create a rich, responsive JavaScript application. The platform is extremely scalable. We are hoping to engage around 30,000 users per month uploading photographs and serve up 60 million page views per month.
As we iterate on the project, we are also considering a publicly available API in order to share the application with developers and partners around the world who want to contribute to the growing Asylum community.
I hope you get a chance to check out the tattoo gallery, if you have a comic book tattoo to show off – you totally should! 
A co-worker kept asking me for a Mootools class that automatically set links to external sites to open in a new window. So I spun up the following. It’s fairly self explanatory, just thought I would share (and have a centralized place to store it)
Basically, it just parses the DOM and checks if http and the document.location.host are in the href, any links that don’t match the current page it sets the target attribute. It also allows a CSS class to be added.
//<![CDATA[
/*
name : com.aol.externallinks
author : gregory tomlinson
///////////////////////////
///////////////////////////
dependencies : mootools 1.2
///////////////////////////
///////////////////////////
*/
if( typeof com === "undefined" ) var com = {};
if( typeof com.aol === "undefined" ) com.aol = {};
com.aol.externallinks = new Class({
Implements: [Options, Events],
options : {
currentServer : '', // override use of document.location.host
extLnkClass : '',
autoRun : true,
onComplete : $empty // Event
},
initialize : function (options)
{
this.setOptions(options);
if(this.options.autoRun) { this.run(); }
},
run : function() {
var b = $$('body')[0], lnks = b.getElements('a'), s = this.setServer();
lnks.each( function(item) {
this.setLink( item, s );
}, this );
this.fireEvent( 'complete', { "statusText" : "ok", options : this.options } );
return true;
},
//Helpers
setServer : function() {
var s = ( this.options.currentServer !== '' ) ? this.options.currentServer : document.location.host;
return {
getServer : function() { return s; }
}
},
setLink : function( el, server ) {
var h = el.get('href');
if( h.indexOf('http') >= 0 && h.indexOf( server.getServer() ) < 0 ) {
el.set('target', '_blank');
if( this.options.extLnkClass !== '' ) el.set('class', this.options.extLnkClass )
}
return el;
}
});
//]]>Pretty simple stuff, an example of it’s use would be
var lnks = new com.aol.externallinks( {
extLnkClass : 'aCSSClassForExtLnks',
onComplete : function() {
alert('I made all the links different if need be!');
}
} );In all likely hood, you would tie the instantiation of this class to the window DOM ready event, which you can learn more about here.
Getting started with Apache Mod Deflate was fairly simple. Like mod concat from the first piece in the Blog Optimization series, it’s just a matter of compiling and installing mod deflate. Mod deflate comes with Apache 2.2, the first step is locating it.
prompt:$ find / -name mod_deflate.c
# change directory (cd) to the location of mod_deflate.c
prompt:$ apxs -i -a -c mod_deflate.c
prompt:$ apachectl configtest
# make sure the syntax is okay
prompt:$ apachectl graceful # restart the server
Now that mod_deflate is enabled, it’s time to configure it. I couldn’t find much information during the research phase on configuring the module. I knew from previous experience that I wanted to gzip, or deflate, all static files. Eventually, I found this post on configuring mod_deflate with cPanel. It was helpful, I modified it slightly to include a few other file types
<Location />
AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/javascript text/css application/x-javascript application/x-shockwave-flash
</Location>The Apache 2.2 docs indicate the AddOutputFilterByType directive is deprecated and mod_filter should be used instead, I haven’t had time to play around with mod filter and the Apache 2.2 docs urge caution since it’s not fully tested. If anyone has experience with mod filter, please share in the comments section below.
Mod deflate has done wonders to reduce my bandwidth costs and site performance. On average each request uses 25% less bandwidth than without mod_deflate. Obviously images don’t benefit from gzip compression, but all JavaScript, CSS, HTML and flash files are benefiting by being about 50% smaller in size. For instance, JQuery is about 30.3kb on the server. When it’s delivered using mod_deflate it’s 16kb according to Firebug.
Have a look at some before and after numbers from my server logs.
| Day |
Number
of
visits |
Pages |
Hits |
Bandwidth |
| 26 Dec |
761 |
3966 |
12131 |
242.29 MB |
| 31 Dec |
761 |
4161 |
12809 |
196.94 MB |
Do you have any blog optimization techniques you are using on your site? Check out my related posts on Blog Bloat and using Mod concat if you interested in optimizing your blog or website.
