I like my shared host, it’s cheap, it’s great, and any problems are easily overcome through a little ingenuity. In this case it’s hotlinking, something that’s been a serious problem in the past without a clear solution. Time has proven blocking outside referers with an .htaccess file is both ineffective, and can cost honest users. Without access to the httpd.conf, I’m forced to do things a little differently.

The system I have works using an .htaccess file that requires all files accessed in its folder have a unique key in the URL (as part of the query, the stuff that comes after the ‘?’ symbol). This key is changed every once in a while, and the .htaccess file is simply rewritten with the new information.

The files are updated by a cron job that runs a bash file that updates all the files. It fails gracefully too, if any file is unwritable everything will be left in a working state, albeit one that doesn’t prevent hotlinking anymore. The .htaccess file also lets the previously used key to still be used as well, so that the URLs don’t expire immediately after a new key is introduced.

Here’s how to get it working.

1. Get the files.

Available here. The files in the protected folder should similarly go into the folder you want protected and “update-key” should go somewhere else where it can be executed by the cron job but have no chance of being visible to the outside world. Make sure the file permissions are kept intact, “.htaccess” and “.htkey” files must all be writable by the cron job and “update-key” must be executable.

2. Set up a cron job.

Add a cron job that executes update-key every so often with whatever method you’re allowed. The “update-key” script changes files in the current directory, so you need to execute it in the same folder as the .ht files. Here’s an example cron job that runs every 8 hours. Change the paths to the right locations.

0 0,8,16 * * * cd $HOME/path/to/protected && $HOME/path/to/update-key

3. Use it in your pages.

To generate the URLs, just dump the contents of “.htkey”  as your key at the end of the URL. Here’s some examples.

PHP

<? echo '<img src="http://www.brokenfunction.com/protected/awesome.jpg?key=' . trim(array_pop(file("/path/to/protected/.htkey"))) . '">' ?>

Python

keyfile = open("/path/to/protected/.htkey", "r")
key = keyfile.readline().strip()
keyfile.close()
print("<a href='http://www.brokenfunction.com/protected/awesome.jpg?key=%s' />" % key)

If anybody can offer some other examples in the comments I’ll add them here.

This isn’t a perfect solution of course, anybody could check with your site and update their links accordingly whenever the key changes, but it’s good for lightweight protection and a lot more reliable than referer blocking.

Listen, I know that cool animation on your website looks great. I know! I think it looks pretty alright too. After all we both probably use Firefox on some fast computers, right? Lots of popular sites use animation! Well, I’m here to try and convince you that you are so very very wrong. One of the greatest sins to commit in Javascript is to add in an animation library.

Please stop imposing your will on the people unfortunate enough to suffer slow computers. You’re running a website, not Crysis, it should run on a 5-year-old computer. When I head home for the holidays animation suddenly becomes a curse. I watch, in horror, as your finely tuned and tweened animation moves jerkily across the screen of my mom’s computer. Since it runs too often because it is not expecting my computer to be slow, your animation freezes up my browser, and due to the single-threaded nature of this Pentium 4 computer, the entire OS as well. I sit there, locked into viewing your horrorshow animation, unable to do anything but cry.

The road to hell is paved with good intentions. Here’s a play-by-play.

  • You may decide to set up each animation frame is a setInterval call. After all, setInterval should call this function every 30 ms if I tell it to, right?
  • Discovering that the time between setInterval calls has no correlation to reality since browsers both clamp the speed and ignore it due to the nature of Javascript. So instead, one may base the animation on actual time, rather than frames, probably using Date.
  • Later, you may notice it looks terrible on older computers. Turns out that alpha-blending the entire screen was too much for them. You realize that the same effect works better on a smaller area since browsers tend to only update the area that has changed.
  • Nonetheless, you may notice it runs too slow on older computers. Realizing that setInterval is basically running constantly, you have it run less constantly. Now your animation is choppy on fast computers.
  • You start building a speed-detecting system before you realize it probably won’t work right and you are going insane and adding all this code to what amounts to a minor visual effect is silly.

I know animation is awesome, but Javascript is just not a platform that wants to deal with it. HTML may be a standard but browser performance isn’t. Remember that the goal of a browser is to protect users from the mistakes of foolish/malicious developers, something that your animation is doing to my old computer. To this end all browsers clamp the speeds of setTimeout/setInterval, but it doesn’t work for everybody. Smart developers should know that and avoid animation in Javascript almost entirely.

That being said, the title of this post is a lie. I think animation should be experimented with, but the only decent animation I’ve seen on websites is the subtle kind. Javascript/HTML, of all the platforms with the potential for animation, is one of the least capable of doing it right. Just keep that in mind and I won’t complain anymore, okay Internet?

typeface.js

October 28th, 2008

Embedding fonts in web pages is tricky business. I never really liked the (and let’s face it) hack that has Flash do this job, since Flash can embed fonts. It’s always a little imperfect, since Flash never really integrates fully with web browsers. There’s a CSS way to do it, but apparently it’s spotty.

Hulu is the most popular website I’ve seen use the Flash technique. They use it for the titles of videos since apparently no standard font is capable of displaying it to their needs. Problem is, when you dim the screen, The title of the video doesn’t dim with the rest of the page (at least when I’ve used it). And despite some good effort, it’s basically impossible to highlight Flash and non-Flash text together.

But no more! Now there is typeface.js. It uses canvas (and VML apparently in IE) to draw the fonts directly. Since it’s the browser doing the work in integrates much better into the structure of an HTML document. You can actually highlight the text! Well, not in IE, but I’m betting those users don’t care. And it all fails very gracefully.

Who knew?

GIMP and Photoshop (from what I remember) insist upon 256 colors for GIF images. It makes sense, because that way a palette index only takes up one byte, so I just assumed it was a limitation of the format. I’ve been living a lie.

Google Talk "chatback"

February 26th, 2008

This is a pretty good idea. It’s a (groan) badge that allows anyone to chat with you over Google Talk when you’re online. It’s a pretty nifty idea. I just added one to this blog to check it out. Personally I think its up there with GrandCentral‘s similar badge. They have one that allows other people to call you if they enter their phone numbers. GrandCentral then calls them, and connects them to your GrandCentral number.

Something like this can’t last though, the spam will come, it always comes.

Skater Dater

October 28th, 2007

This circa 1965 short film is just about the coolest corny thing I’ve ever seen. It’s embedded below…

I wrote a post a while back describing how wary digital distribution made me. Now a perfect example of the huge flaw in digital distribution exists. It was provided, surprisingly enough, by Google. They decided to back out of the pay-to-download video market, taking the videos people purchased with them. Refunds are offered, but in the equivalent of “store credit”. Google will likely do something to escape backlash, but more importantly, they really don’t have to do that. This is why digital distribution in its current form is very flawed, not because it isn’t a good idea, but because physical ownership is lost.

Edit: Looks like Google’s giving out full refunds instead of store credit, and they’re being extra nice about it too. Doesn’t change the fact that they didn’t have to do that.

Splice Music

August 6th, 2007

Oh my goodness. Andre has really done it this time. It’s a very “Web 2.0” community remixing site that uses Flash, allowing it all to run straight out of a browser. The Creative Commons-loving crowd is going to have a joygasm when they see it. Cory Doctorow will be so happy he’ll fall from his balloon. Also, my ongoing battle to outmatch Andre in AS skillz has been nixed again. Of course it seems another fellow did all the real audio work, but I must try harder nonetheless. You win this round Michelle.

I spotted this article describing how to make Ubuntu send mailto: links through Gmail. It’s not wrong exactly, but I wanted to improve upon it a little. I have my own version which requires no external files, and all it needs is that you send your mailto: links through this command…

sh -c "firefox 'https://mail.google.com/mail?view=cm&tf=0&to='$(echo "$1" | sed -e 's/mailto:(//)?//' -e 's/?/&/' -e 's/&subject=/&su=/I')" custom-mailto-launcher "%s"

On Ubuntu, go to System -> Preferences -> Preferred Applications, change your mail reader to “Custom”, then put this line in. If you use another version of Linux, you’ll have to figure that part out yourself. Keep in mind %s is the variable and firefox is the default browser in my example.

Mine removes the “mailto” part a little better, and makes a hacky attempt to parse the subject/cc/bcc arguments these links sometimes have. Most importantly though, it’s a one-step process.

I read Mark Shuttleworth’s post on DRM today. He makes some good points about how DRM doesn’t work, and he’s right. Thing is, he and other DRM-haters seem to think digital distribution is the future. It’s not.

What ever happened to physical ownership? You can’t have that with digital distribution (and in some ways, DRM). When I own something I want to hold in my hands. If you buy a movie online and your hard drive breaks down, which any hard drive will ultimately do, you don’t own the movie anymore. You can probably get the movie back again, but that’s expensive for the distributor and what if they refuse, or go out of business? I’m sure plenty of people would be fine with this, but it won’t become a popular idea until all types of people jump in.

In the end, a DRM-laden Blu-Ray disk is still better than any movie I’d download. When I own something I don’t want it stuck on my computer, I want it to exist independently, and I’m sure plenty of other people feel the same way whether they know it or not. Unless digital distribution finds a way to seperate itself from a computer (although any efforts to do so today would be hindered by DRM) it will never succeed. Ownership is about freedom, and both DRM and digital distribution don’t offer that.

Update: I wrote a followup.