17 January

Participate in Wednesday’s SOPA strike

Looking for an easy way to participate in tomorrow’s SOPA (and PIPA) strike? The SOPA Strike website has some code you can use to automatically load this page.

I’ve set up my own customized version, which you’re welcome to use. This does not completely black out your site. Instead, the page loads with a black screen. Then after a few seconds, the words "STOP SOPA" with a "Learn more…" link appear in white. The black box then fades to slightly transparent and animates to the upper left corner of the screen. It then stays fixed in the corner as the user scrolls around. The site is still usable, but the “STOP SOPA” message is ever-present. (Be forewarned: as I did not take the time to set up cookies, the entire process also repeats on each new page load.)

If you’d like to see how it works, I set up an awesome fake site to demonstrate the blackout animation in action.

If your site is already using jQuery, simply copy the code below into your page, ideally just after the <body> tag:

<script type="text/javascript" src="http://atomic.room34.com/sopa_blackout.js"></script>

If you’re not already using jQuery on your site, you just need to include it from Google Code first, like this:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://atomic.room34.com/sopa_blackout.js"></script>

If you’re using PHP, you can even use this code to automatically make it appear at 8 AM EST and disappear at 8 PM EST. (Update the times as needed to represent your time zone, and remove the Google Code line if you’re already using jQuery.)

<?php
if (time() > mktime(8,0,0,1,18,2012) && time() < mktime(20,0,0,1,18,2012)) {
?>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://atomic.room34.com/sopa_blackout.js"></script>
<?php
}
?>

Note: As indicated above, I built this quickly, and have not done a lot of cross-browser testing. It’s pretty basic, but it may not display correctly in some older browsers, especially earlier versions of Internet Explorer. Use at your own risk… just like the Internet itself!

Web 2.0 — opening up a whole new world of Internet Explorer quirks!

Just when I needed it least, Internet Explorer has thrown me another curveball.

I’m hard at work trying to seem like less of a 20th Century web dinosaur by acquiring new skills with these techniques that are loosely lumped together into what some call “Web 2.0.” Key among these is an approach called AJAX (Asynchronous JavaScript and XML). Fun stuff. I’ve been working for the past several days on an interactive registration form for a site at work, using AJAX. Of course, as usual, I’m plugging away in Safari and Firefox, but eventually I decided to check out how things are looking in Internet Explorer.

[When I figure out an emoticon that represents my head exploding, I’ll insert it here.]

IE is consistently barfing on what it claims is a syntax error that I eventually tracked down to the evalScripts function in prototype.js. Well, at least it’s not my own code that’s making it crap out this time. Or is it? With IE you never can tell. Maybe evalScripts is buggy (even though I can find no evidence to that effect) or maybe it’s just the code in my script that’s being thrown at it. Whatever the case, once again all forward progress has come to a grinding halt while I scour the Internet fruitlessly for a solution.

Although this turned out not to be a solution to my problem, I just have to refer you to this developer’s blog entry on a typical IE workaround. Yes, I tried this, even though I was almost positive his problem was completely unrelated to my own (which was the case). Nevertheless, when a problem does arise in IE, the most likely eventual result of one or more days’ worth of sleuthing is the resigned acceptance of such hokey code bloat, rather than anything even remotely satisfying (or even logical).

There you have it. As for my own problem using prototype.js with IE, I did find a solution. Yes, it was my code, and it was something I had seen previously that was pretty much staring me in the face, if I had just bothered to heed Thomas Fuchs’s sage advice.

It all comes down to standard practice for wrapping <script> tags in HTML. I still have the habit of doing it this way:

<!–
//–>

The funny thing about that is that I know it’s completely pointless these days. It’s done so that browsers that don’t support JavaScript don’t inadvertently display the JavaScript code in the web page. But every browser has supported JavaScript since about 1997, so it’s pretty ridiculous to keep doing that. Especially given that, the way the sites I’m working on are so utterly dependent upon JavaScript, you’d never even get to the page in question without it.

However, with XMLHttpRequest (which is at the heart of AJAX), and just the increasing complexity of JavaScript in general, it’s become necessary to wrap script code in a new tag to ensure that browsers handle the code properly. To wit:

// <![CDATA[
// ]]>

Just as Thomas Fuchs said. And just as has been lingering in the back of my mind for the past several weeks, since I first discovered his wonderful tool based on prototype.js, Scriptaculous. I’ve learned my lesson.