Coding with Jesse

JavaScript Speed Detection

December 14th, 2005

This question came up on the css-discuss mailing list today (asked by Howard 'duke' Holtz):

I would like to include a Flash header on the homepage, but switch to a standard gif header for viewers with slow connections. I was hoping that there is a way to maybe have two “includes”, and use one or the other – but first I need some kind of 'conditional switch' or 'logic switch'.

This is a great question. I don't think any website has addressed this issue through scripting. We've all seen websites that start off with "Click here for Flash, Click here for slow connections" pages. But what about using JavaScript to test the speed of a connection?

I started experimenting with JavaScript and came up with a fairly simple, clean solution. It is all based on the onload event of an image. What we will do is time how long it takes to load an image. If the time is below our threshold for "high speed", we will display the flash content. Otherwise, we will do nothing and display the default content.

<script type="text/javascript">
var start = (new Date()).getTime();
var THRESHOLD = 2500; // a number we will calculate below

function speedTest() {
    var duration = (new Date()).getTime() - start;
    if (duration < THRESHOLD) {
        // fast connection (display flash)
    } else {
        // slow connection (do nothing?)
<img src="some-image.jpg" onload="speedTest()">

The onload event can go on any image on the page, preferably the largest image to give us a better estimate. Let's say we only want users downloading faster than 10k/s to get the flash code. We check the size of our some-image.jpg, and see that it is 25kb. We can easily calculate the THRESHOLD value like so: (25kb) / (10k/s) = 2.5s. Converting this to milliseconds gives us 2500, so this is what we will use for the THRESHOLD.

If you're using Bobby VanDerSluis' Unobtrusive Flash Objects 2.0, you can put the UFO code to load Flash in the block for users with a fast connection. You can then do nothing for users with a slow connection and just let them see the default content on the page.

I have thought of one problem with this solution: if the image is in the user's cache, the number will be very low. This will cause the flash to be loaded if they come back later. To avoid this, you could add a no-cache rule on the webserver for this image. Or, instead of using an image on the page, you could load an image in the background with JavaScript using a random URL like so:

var testImage = new Image();
testImage.onload = speedTest;
testImage.src = "some-image.jpg?random=" + Math.random();

Of course, if you are using PHP or another scripting language on the server, you could generate the random URL a number of different ways. This fix also has the downside that the visitor must download this extra image every time. You'll have to balance these factors in your solution to come up with one that fits.

Good luck! I'd love to hear your comments, suggestions and questions about this. Let me know how it goes on your own web sites!

No More Ads

December 10th, 2005

As you may have noticed, there are no longer ads on this site. I decided to get rid of them for a few reasons. First, they were just a big eye sore, as far as I was concerned. Second, since I don't have a whole lot of traffic (yet??), I was only making a few cents a week. I weighed the two, and decided that it just wasn't worth it. Once my traffic gets to be higher, I might put them back. But for now, you can enjoy the site in it's pure form.

I actually left the Chitika ads on the tools pages. I get quite a bit of traffic through there, and none of the visitors are regular, repeat visitors, so I'm not worried about the eyesore factor. Plus, I'm desperately waiting to earn the minimum payment amount so I can leave Chitika behind. I've been really disappointed with Chitika. I think this is because none of my websites are really geared to people who are interested in buying anything specific.

I've seen websites and blogs around that are just chock full of ads. And, I suspect, these tend to be websites that people just don't go to. I suspect there may even be a connection here, perhaps the ads tend to turn people away. Although it would be nice to be able to have the website pay for itself, that's certainly not why I made this site. It's all about balance. And since I have a day job, I can certainly afford to make this site look a bit nicer for all of you. Maybe some of you with websites can do the same for me? ;)

Why Not You?

December 9th, 2005

Steve Pavlina just wrote a wonderful piece, "Why Not You?". Like I wrote about a few days ago, I strongly feel that everyone is capable of doing anything. The problem is, nobody seems to know it. Steve addresses this, asking "Why not you" go out and fix the problems in the world that you see.

"It's too big," you say? It's supposed to be too big. Tackling challenges that are too big for you is what makes you grow as a human being. Why do you think this problem keeps coming up in your life, staring you in the face? Do you think you're supposed to ignore it and hide from it and wait for someone else to solve it for you? If you notice it, you own it.

I believe the Internet has made this even easier. It's easy to send off an email and talk to anyone, especially the "right" people. It's easy to put up a website to get support from people across the world. It's easy to find other people that share your goals. All this without leaving your bedroom!

So, think about this. Is there anything that you want changed in the world? If so, go change it!

P.S. Don't get Steve any widgets for Christmas!

Inspiration from Television?

December 6th, 2005

John at Success Begins Today just mentioned that he has put up some new inspirational articles. He writes:

Most people receive inspiration from people they see on television or hear on the radio.

I think this is sad..but probably true. I can't help but imagine millions of people sitting at home, watching TV, thinking "if only I could be rich and famous like that person". Personally, and lately, I get all my inspiration from reading stuff on the Internet. Now, I'm not being stuck up about different types of media. I realise I'm in the rare minority that rarely watches television and spends all my time on the Internet. And I think inspiration is wonderful no matter where it is found.

Nonetheless, television just represents a different world to me. I can't remember the last time I was inspired by people on television or radio. For some reason the phonyness of "celebrities" really turns me off; I never want to be a "celebrity". I have no interest in getting my 15 minutes of fame. And I don't feel the ability to entertain is some incredibly rare talent that should be held high above all other talents and abilities.

I like to see people who believe in a purpose or have seemingly impossible goals, and have focused on those goals over a long enough time that they have succeeded in one form or another. I like to read about how they started off the same as all of us, yet broke through and achieved great things. Sure, these people end up on television sometimes. Like John's example, sports heros can certainly be inspirational. But they are rarely referered to as "celebrities". The people that the television world chooses to "celebrate" are not the same ones I would choose to.

If you disagree, or if you feel I'm missing something, I'd love to hear your comments.

[Update: I've been mulling this over since I wrote the response, trying to determine what it is that frustrates me. I've decided I'm frustrated at the artificial divide that television seems to create. I am frustrated that millions of people think they could never achieve the things they see on tv; that only "experts" or "geniuses" can accomplish such things. And as a result, they don't even try.

I find the most inspiration when I'm reminded that everyone is capable of everything. I believe it's just a matter of attitude, including integrity, passion, devotion.

As John later mentioned, realism is very important. Both to keep plans realistic, but also being realistic with what is possible. I think most people put unrealistic limitations on their lives.]

How to deliver XHTML 1.1

December 4th, 2005

A while back, one of my first posts was This site is valid XHTML 1.1, where I explained what I had to do to change the markup from XHTML 1.0 to 1.1. However, I guess I was a total liar in saying that's all I had to change. This is because Internet Explorer doesn't support XHTML 1.1.

So, using PHP, I had to deliver alternative markup to Internet Explorer and Firefox (rather, between browsers that don't support XHTML 1.1 and those that do).

Luckily, we don't have to use any complex browser detection. Instead, we can just inspect the HTTP-ACCEPT header. Browsers supporting XHTML 1.1 will have "application/xhtml+xml" in this list, and those that don't won't. Using PHP, I have the following code at the top of every page:

if ($_SERVER['HTTP_ACCEPT'] != null
    && strpos($_SERVER['HTTP_ACCEPT'], 'application/xhtml+xml') == false) {
	$xhtmltype = '1.0';
	header("Content-type: text/html; charset=utf-8");
} else {
	$xhtmltype = '1.1';
	header("Content-type: application/xhtml+xml; charset=utf-8");

XHTML is actually a subset of XML, and as a result we need to change a few other things. Mainly, the stylesheet is attached as an xml processing instruction at the start of the document instead of in the <head> tag. At the same time, we output the <!DOCTYPE> tag for each version of XHTML.

if ($xhtmltype == '1.1') {
     echo '<'.'?xml version="1.0" encoding="utf-8"?'.'gt;';
     echo '<'.'?xml-stylesheet href="/screen.css" type="text/css"?'.'>';
     echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" ';
     echo '"">';
} else {
     echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ';
     echo '"">';

As I mentioned in the previous article, I had to remove the lang attribute from the <html> tag. However, it is required with XHTML 1.0. So, again, we need to deliver two versions:

<html xmlns="" 
xml:lang="en"<?php if ($xhtmltype == '1.0') echo ' lang="en"'; ?>>

Next, we have to provide a few more tags that are required still for XHTML 1.0 in the <head> tag:

if ($xhtmltype == '1.0') {
     echo '<link rel="stylesheet" type="text/css" media="screen"';
     echo ' href="screen.css" id="stylesheet"/>';
     echo '<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>';

That's it for most web pages. However, I should include the changes I needed to make to deliver Chitika and Adsense ads. For XHTML 1.1 visitors, we put an <object> tag on the page, and the Adsense code in an external HTML document. For XHTML 1.0 visitors, we embed the <script> code like normal. If you want more details and examples, go check out this article.

Well that's about it. I guess the only other thing I need to do differently is be extremely careful the content on the site doesn't break validation. As soon as a closing tag is missing or an & unescaped, Firefox won't render the page, instead reporting an error. This is actually a strong feature of XHTML in my eyes. Being completely unforgiving about invalid pages will improve the quality of the web eventually (once people move away from HTML). Though, of course, there is a tradeoff of actually having to make valid pages 100% of the time :)

UTF-8 Encoded Dynamic Text in Flash MX

December 1st, 2005

If you are struggling to get UTF-8 characters to show up properly in dynamic text fields in Flash movies, even though you've embedded the fonts, make sure you aren't publishing as Flash 5!

This painful undocumented little thing took me forever to figure out. I followed all the documentation to a tee, and had no success. Then, I tried to implement one of the examples I read. The example wouldn't work with my current publish settings (Flash 5) so I switched to Flash 6. All of a sudden, the characters displayed perfectly. It seems that UTF-8 support wasn't built into Flash 5, so when you publish for Flash 5 compatibility, it just won't work.

If, however, you are publishing with Flash 6 or higher, and you are still having trouble, you will definitely want to check out Unicode in Macromedia Flash MX on Macromedia's website. That page has links to all the relevant documentation, plus links to other Unicode related sites.