When using development frameworks like CakePHP, Zend or even Smarty, I always took their ability to cache data for granted. After all, I hadn’t built all of my applications using frameworks and those that were lacking didn’t seem to be hurting too badly. It just seemed like a bonus for using their environments and while I was very aware of the fact that caching reduces stress on the database, I hadn’t really built anything that was in dire need of caching as a means of improving overall functionality.

Once I started learning about memcached, I actually started to think about my non-frameworked applications and whether there were any noticeable lags. It wasn’t long before I had thought of a few glaringly obvious examples where (mem)caching could be used to significantly improve performance. But before I go into those examples, here is a brief explanation of what memcached does for you (taken directly from memcached.org):

What is Memcached?

Free & open source, high-performance, distributed memory object caching system, generic in nature, but intended for use in speeding up dynamic web applications by alleviating database load.

Memcached is an in-memory key-value store for small chunks of arbitrary data (strings, objects) from results of database calls, API calls, or page rendering.

Memcached is simple yet powerful. Its simple design promotes quick deployment, ease of development, and solves many problems facing large data caches. Its API is available for most popular languages.

So first on my list was Blogflare.com, with its MySQL-based statistical cruncher running on regular intervals and its PHP-based image tickers, the load on the database was strained on a very regular basis. I noticed if I just adjusted the simple database calls to push updates to memcached and then check memcached for data before I even touch the database, performance significantly increased on the front-end. Additionally, this same improvement was helpful in terms of serving out ticker images that are normally database-driven. With these two simple changes, load on the database dropped enough to make scaling much less of a pain. This is relevant, too, as the site has grown steadily over the past few months and shows no signs of stopping.

The next item on the list is one I can’t actually link you to but an application that I’ve built for the University’s Art School to handle finance planning and reporting for graduate students. After a few moments of thinking about its structure I realized the database is very read-heavy, particularly in the reporting area. Reports are generated from stored procedures and perform some pretty heavy calculations on each student’s data in order to provide administrators with a very accurate picture of spending and planned spending. Updating the database calls for insert/update/delete methods to perform calls to memcached first proved to be ENORMOUSLY effective at speeding up use of the database. While this helps to reduce load on the server, the most important factor in this case was how much better the overall user experience was. Lagginess became intermittent rather than constant.

When I was researching memcached and wondering about how such a thing would scale, I found a clipping from this article entitled How to Dramatically Speed Up Your Web Application: An Introduction to memcached very helpful-

No doubt if you took Computer Science in school you were cautioned of the temptation to abuse caches because there is a law of diminishing returns in regards to the size of your cache: the larger your cache gets the more costly it is retrieve and store information within it. Memcache however is not heavily constrained in this way, because the cache at large is made up of lots of little caches. This allows memcached to be much more responsive even when the cache itself begins to reach sizes that might be really inefficient in other circumstances.

So this little bit managed to assuage my fears and give me the confidence to jump right in and start testing it with my lesser-applications. The results, even this early, have been astounding and I can now see how they are a very vital part of modern web application development.

Recently, I had the task of creating a simple form to be submitted to a specific department member here on campus. I felt this was a great opportunity to utilize jQuery and to see just how simple I could make adding new fields, since I wanted the form to be somewhat dynamic (adding/removing of inputs and such).

After trying a few methods here and there, I was able to utilize a few jQuery functions and a nice plugin (jquery-formatcurrency) to make everything work as desired.

Here is what I came up with:

$(document).ready(function(){
 
	var total = 0;
 
	$('.currency').blur(function()
	{
		total = 0;
 
		$('.add').each(function(i,obj){
			total += $(obj).val()*1;
		});
 
		$('.subtract').each(function(i,obj){
			total -= $(obj).val()*1;
		});
 
		$('#total').val(total);
 
		$('.currency').formatCurrency({symbol:''});
	});
 
});

What’s neat about this method is that it handles everything on the blur (loss of focus) of any element with the ‘currency’ class applied. That means it won’t do anything to the field while a person is typing in it — annoying for some people — it waits until the user moves on to the next field or away from the field altogether.

The really cool part of what happens first is the mathematical operation. Notice the similarity between the following methods:

$('.add').each(function(i,obj){
	total += $(obj).val()*1;
});
 
$('.subtract').each(function(i,obj){
	total -= $(obj).val()*1;
});

The first method looks at all elements with the ‘add’ class applied. The .each jQuery function cycles through each matched element and feeds two variables to the attached function: an incremented index and the object reference itself. This makes a tally extremely simple as jQuery will automagically cycle through all the elements you want to either add or subtract based on what class you have applied. The same applies to both classes and, of course, can be extended if you want to do more complex mathematics or formatting to your fields.

After these methods run, the total variable now holds the correct sum for all fields properly classed either ‘add’ or ’subtract.’ This can now be applied to the input field with an id of ‘total’:

$('#total').val(total);

This will set the ‘total’ input field’s value to the sum of the fields.

Lastly, it will format all fields to currency using the formatCurrency function:

$('.currency').formatCurrency({symbol:''});

Notice I specify here that I do not want any currency symbol (e.g. ‘$’) as I specify that outside the field itself to display to the user.

Again, all of this happens every time a field gets updated and loses focus. So yes, it’s magic.

Click to Enlarge

I doubt I’ll be applying for a job in Amsterdam anytime soon, but I thought I’d see if I could work my way through this test anyway. It doesn’t really involve any sort of real web development prowess, really, but it does require some reasonable know-how with Firebug (one of my most favorite tools ever).

The test took me about five minutes (four of which was spent on number three), the last minute was spent on the other questions. That’s pretty decent in my mind, but who knows how well other people did?

I really like this style of interviewing though, and I think more companies should use it to weed out the riffraff. It does require a lot of creativity on the design end but, I’d imagine, reduces man hours (spent interviewing and processing) like crazy. If I ever hire more developers, I plan to come up with a puzzle test like this.

If you’re interested in seeing how you’ll do, click here to take the web ninja test.

-Scott

Kill Internet Explorer 6

Well it’s about time.

It’s been nearly ten years of toiling over my CSS and Javascript, trying to give my websites a consistent look and feel across the board. Internet Explorer version 6 has been the bane of my existence and the thorn in my hide. My developer friends and I have discussed boycotting it at the risk of losing the eyes of the uninformed millions unknowingly viewing the internet the way it was never meant to be seen. Sure, we might lose their eyes altogether but we’d prefer that over a negative experience.

More recent versions of Internet Explorer aren’t as bad and they’re getting better at adhering to web standards but there are still some annoying browser-specific quirks we have to deal with every day. All I ask is that people really follow through with this movement.

To read more, click here.

IE Tester

Today, my buddy Javier (owner of the Online Bill Manager) told me about IETester and I was shocked that A) I’d never heard of it before, and B) how simple it is to use.

If you’ve ever wanted to test one of your websites for cross-browser compatibility, you know how much of a pain in the ass it is to either use a web service to do it for you or to ask a friend who actually has a crappy older version of IE to check your website for you. In either case, the waiting is the worst part and slows development down to a crawl.

Now although some people have chosen to boycott Internet Explorer (I know I’d be happier if it were gone), I still understand that a large percentage (if not the majority) still use it. Therefore, as web developers, we must test for it and patch our CSS and Javascript accordingly.

IETester makes this an absolute snap.

Although it is buggy, if all you want to do is see how a site looks in Internet Explorer 5.5, you simply open an IE 5.5 tab and go. You can view web pages in Internet Explorer versions 5.5, 6, 7 and 8 all at once. All you have to do is tab between them. Pretty handy, huh?

After tabbing through a few of my websites, I’ve found a lot of glitches in previous versions of Internet Explorer that I would have otherwise never known about. Of course, my philosophy is that if you aren’t at least on IE 7, then you need to get with it. IE 6 was nice and simple but it completely lacks standards support and even IE 7 falls short in the browser war.

In any case, for those of us that work in professional production environments where we are forced to design for versions as old as IE 6, this tool is amazing for just that purpose.

Oh yeah, and did I mention it’s free?

Download IETester Here

Sweet Date

Sweet Date is a very straight-forward dating service web site. People sign up, browse and find people that interest them, and they can either send them an instant message or they can send them a message using the site’s built-in mailing system.

As far as the look goes, I chose blue because I think it looks great and because I thought I’d try adhering to some standards for emotional targetting this time (e.g. Color Wheel Pro / Blue). Additionally, I’m taking my time with the feel of the site as I don’t want it to have a “thrown-together” appearance. Instead, I want people to know intuitively how to use the web site and where to go if they need help.

The reason I’m able to pay attention to these elements is because I’m using Smarty Templating Engine again, which makes development go a lot faster. Now I can focus on jQuery and Photoshop.

While I’m very aware that dating web sites are a dime-a-dozen these days, I’ve always wanted to build one for several reasons:

1. Ads pay reasonably well
2. The structure is reasonably simple
3. I need more large-scale web sites on my resume

Although at the moment, the web site is currently being built, the basic frame is in place with the look & feel largely intact. Once registration is open, feel free to open an account but the site will be largely in beta until I feel it is relatively complete.

In my search for ways to increase efficiency while decreasing page load times and bandwidth output, I happened upon the wonderful world of Zlib compression. This compression type uses gzip to compress the output of your files and feed them to the browser.

How cool is that?

While it might sound like it would be an impossible task, it’s really as simple as doing two things-

Step 1. Make sure your PHP server has the zlib extension

All you have to do is create a file called something like phpinfo.php on your server and put the following code inside:

<?php

phpinfo();

?>

Once it loads, just find ‘zlib’ and check to see whether it’s there and whether it’s enabled. If not, you need to either enable it yourself or ask your server admin to do it.

Step 2. Pop in the code!

Put the following code at the very top of any pages you want compressed, or (preferably) in your header file for the entire site-

<?php

ini_set('zlib.output_compression', 'On');
ini_set('zlib.output_compression_level', '1');
?>

OR if that doesn’t work for you, you can try this-

<?php

ob_start('ob_gzhandler');

?>

…that’s it!

Now try reloading your page.

If everything went right, you should notice an improvement in load time and where you’ll notice it most is in your bandwidth usage at the end of the month.

I tested the before and after on Sitdiary.net and the file got compressed by over 3X every time! In other words, I’m going to cut my bandwidth usage down by 2/3 on all PHP files.

*** UPDATE ***

On my Wordpress blogs, I’ve been testing this out on the index.php and it seems I’m getting upwards of 75% compression rates!

Profiles Free

Profiles Free, I’ll admit, was something made purely out of curiosity. I wanted to see whether I could build a site that Google would like enough to keep users coming back to while at the same time generating a small stream of income, and it does just that.

The site incorporates Google AdSense and affiliate marketing ads in a very “in your face” kind of style.

One of the best things about this site is that it’s almost maintenance-free. I check on it about once a month just to make sure it’s still there and functioning.

All of the back-end code is done in PHP and the database is, of course, MySQL. Instead of using any kind of JavaScript library on the site, I decided it was a bit overkill for a site like this and just went with the light-weight GreyBox framework to display images in modal forms.

Sitdiary

Sitdiary started back in 2001 as a very simple idea: I wanted other people to be able to post blog entries about anything they wanted. What started as a small idea soon grew into a user-base of over 250,000, where at its peak had over 100 users online at any given time.

Time after time, the bandwidth wasn’t enough for this “small” site and I was forced to continuously upgrade on a monthly basis. At one point, the cost became more than I could handle and that’s when the popularity of the site started to take a downward turn.

As the site would be out of commission for days at a time, the user base soon dwindled down to around 50,000 and all of a sudden, bandwidth wasn’t too much of an issue.

Of course, if I knew then what I know now, I would have done quite a few things differently. For one, I would’ve chosen a catchier name. Secondly, I would’ve added some serious caching to this site to reduce overall demand on files and database. Thirdly, I wouldn’t have built the database in such a fashion. When I started building Sitdiary, I figured the best way to build the database would be to give each user their own tables for: entries (posts), comments and friends. While this might work well for a few thousand users, the method quickly degrades over time as it is an unnecessary waste of space. Fourthly, I would have added a payment plan for the really dedicated users to help pay for the bandwidth costs.

Since then, I’ve upgraded the database to a more standardized format and after testing the speed before and after, I can tell you that the standardized format is significantly faster. I’ve also added page caching using Smarty.

Overall, I’m glad Sitdiary is still running despite its bumpy and uncertain past.

Bill Manager

Bill Manager was initially built as a way to remind me to pay my own bills, but as I talked to other people I found that they were interested in such a service — especially for free.

On top of reminders, the site also features a few informational articles, a series of tips on financial responsibility and calculators.

Currently, the site is still going an upgrade to facilitate multiple users but should be up shortly.

It should be noted that since this site was created, several others have popped up on the ‘bill manager’ search that do pretty much the same thing. This is no surprise, but I’m in the process of coming up with a killer feature to set it apart (if only temporarily).