The Problem – Why You Should Care

Other sites that you pull content from are not always going to be reliable.  They could be down, running slow, or some other possible problem.  If you are using something like twitter to display your status on your site but you have a lot of other content you want people to see then it would be wise to use client-side scripting to get the content.  You might be saying in your head “Oh but I have this sweet PHP script that does that for me.” but you should tell that voice in your head to shut up and just listen.

The Solution…

When you use server-side scripting then the server that is dishing out your website needs to go to the other (possibly) slow website.  If it’s waiting for this content then your user is waiting for your site to finish being generated server side and then sent to their browser.  This was a problem when twitter was doing its thing with the “fail whale” on a regular basis and was generally taking forever to display tweets.  This in turn was making my site very slow.  Realizing the problem, I took out the PHP widget that I had and replaced it with my own little creation that utilizes javascript and a tiny bit of PHP.

Let’s take a look at how to do that…

First thing you’re going to want to do is make a little div with some static text in it that gets killed when your stuff finishes loading.  You can make it kinda like this:

<div id=”twit_text”>
<ul id=”twitter_update_list”><li>Waiting for Twitter.com to reply.  Please hold.</li></ul>
</div>

The ul in there will be replaced by the script which actually sits right on twitter’s servers.  This is pretty simple and basic stuff.  It is advisable to put some static content in there so that users know that something else is going to happen and you don’t have a blank spot on the page.  There is one other piece of magic that actually uses a little bit of PHP but not for the same purpose the other scripts use it for…

<?
$currURL = currPageURL();

if (($currURL == “http://www.patricktulskie.com/”) || ($currURL == “http://patricktulskie.com/”))
{
echo “<script type=\”text/javascript\” src=\”http://twitter.com/javascripts/blogger.js\”></script>”;
echo “<script type=\”text/javascript\” src=\”http://twitter.com/statuses/user_timeline/PatrickTulskie.json?callback=twitterCallback2&count=1\”></script>”;
}
?>

This goes in the footer of the page to only load the javascript if the page you’re looking at is the index page.  You can modify the PHP to load on different pages but for my purposes I only want you to see the status on the index.  You can’t easily do this with a plugin because plugins are loaded entirely as the page loads.  The PHP above is in the very footer of the page and it only kicks off the javascript IF we’re on the index of the site AND after everything else on the page has already loaded.

One Other Thing…

I use this function to get the URL of the page.  You can put it in your wordpress theme’s functions or you can put it wherever you need it on your site.  It’s fairly reusable too.

function currPageURL()
{
$pageURL = ‘http’;
if ($_SERVER["HTTPS"] == “on”) {$pageURL .= “s”;}
$pageURL .= “://”;
if ($_SERVER["SERVER_PORT"] != “80″)
{
$pageURL .= $_SERVER["SERVER_NAME"].”:”.$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"];
}
else
{
$pageURL .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
}
return $pageURL;
}

I Hate Twitter

Well thats fine.  I’m sure it doesn’t like you much either.  Regardless, this is a really basic usability concept that many people don’t seem to grasp or even think about when creating a website.  Say you want to pull news feeds from a Digg category using an RSS parser on your page.  You have other stuff on the page but this Digg box is in your sidebar.  If you don’t think about where the script is going to execute in relation to your page loading, then you’re going to have problems when Digg is running slow or is down.  For those of you who don’t want to get into a full blown ajax setup, or simply don’t know how to then this is a great work around that uses really minimal coding.

Today we’re going to beat up on certain gallery pages that use images of the format “imageName.sized.jpg”.  What I mean by this is – we’re going to take the page (which is usually filled with junk) and replace everything with just the full size image and the caption.

Let’s get some assumptions out of the way:
You know SOME Java Script, the site you’re visiting also has the non-sized images in the same directory as the sized images, and you don’t care what else is on the web page.  We’re also assuming there is only one caption with no “id” and we only have a style class to work with.

Ok?  Ok.  Let’s go.

Once you’ve installed GreaseMonkey, set it up, and got it going then you’ll want to make a new user script.  The namespace isn’t terribly important right now so just make it the URL for your website or something like that and continue on.  Once you’ve specified your edittor of choice, it will open up and you’ll basically have a blank canvas to work with.  The code you enter here will be run when the page is completed.  First thing we’re going to do is get the caption with this code:

function getCaption()
{
var all = document.all ? document.all :
document.getElementsByTagName(’p');
var theCaption;
for (var e = 0; e < all.length; e++)
{
if (all[e].className == “pcaption”)
{
theCaption = all[e];
}
}
return theCaption;
}

What we’re doing there is grabbing all of the elements of the document that are paragraphs (p tags) and then looping through until we find that “pcaption” class.  You might need to look at the gallery you’re visiting to get the exact names but that’s the basic gist of it.  Now let’s grab the image and replace the page with it and our caption:

var theImage, unSizedImage, unSizedPath;
theImage = document.getElementById(’galleryImage’);
theCaption = getCaption();

if (theImage)
{
unSizedPath = theImage.src.replace(/.sized/,”");
unSizedImage = document.createElement(’img’);
unSizedImage.src = unSizedPath;
document.body.innerHTML = “<center>” + theCaption.innerHTML + “<br /><img src=\”" + unSizedImage.src + “\” /></center>”;
}

First we just create some variables and get our caption from before.  Once we have that all setup we say if you find an image with the id of “galleryImage” then we’re gonna do some work.   We grab the src for the image, strip out the .sized portion, and then assign that source to a new blank set of image tags.  Lastly we take the body’s innerHTML and assign it our caption’s innerHTML and our newly grabbed image.

In this little exercise we learned how to totally modify the contents of a page with a new image from “somewhere else.”  We also learned how to get a set of tags using the class for instances where we don’t have an id.  We also did some very basic string replacing and innerHTML utilization and manipulation.  Pretty cool huh?

Now you can toy with it anyway you want.  There’s a lot of fun stuff in there.  For more Grease Monkey tutorials and guides you can visit http://diveintogreasemonkey.org/  Have something you’re looking to accomplish?  Well, just comment to this post with a suggestion.

Note: Wordpress is really awesome at stripping out whitespace from stuff.  Sorry about the poor code formatting as a result.  I will be looking into a better way to display this stuff so it doesn’t happen in the future.

What I did was I made most of the fonts on the page black, but this had some negative affects in terms of not being able to read the text on some of the black spots on the page.  I’m working on it, I know.  Just want to let everyone know I’m aware.

One of the other things that was pretty annoying was the slow page load time when my twitter status is loading.  I handled that with some PHP to verify the URL of the page you’re looking at and I also moved the javascript to the very bottom of the site before the end of the body tag.  This makes sure that only pages where the twitter status is shown will actually load the javascript AND it also makes sure that the rest of the page loads in a timely manner so you don’t need to wait around for my status if you want to read something else.

Just some usability metrics that I had to handle and I thought I’d mention them.  I’ll be doing another article on the PHP used to handle the twitter status probably later on this week.