Sunday, June 7, 2009

A Javascript-less Image Viewer

So a while back, I was tasked with making what essentially boiled down to an image-viewer. The catch? I had to make it work without javascript (for Internet Explorer in particular), and it had to be done without reloading the entire page.

Sounds weird, I know, but blame Valve for using Internet Explorer 6, sans javascript, as their HTMLView object in the Source Engine SDK. Anyway... It sounds difficult, but it's really not, it's actually very VERY simple, it's just easy to overthink.

First of all, you're going to have to make sure all of the images are the same size, or at the very least, the same height. You're going to block out the HTML like so:
<div id='slideshow'>
   <img id="image1" src="img\image1.jpg" alt="Image 1" />
   <img id="image2" src="img\image2.jpg" alt="Image 2" />
   <img id="image3" src="img\image3.jpg" alt="Image 3" />
   <img id="image4" src="img\image4.jpg" alt="Image 4" />
</div>
<div id='slideshowNav'>
   <a href="#image1">Image 1<a>
   <a href="#image2">Image 2<a>
   <a href="#image3">Image 3<a>
   <a href="#image4">Image 4<a>
</div>

The key here is the fact that all of the images have their own id values. Now the css is going to look like so:
#slideshow{
   width: Width of your widest image;
   height: Height of the images;
   overflow: hidden;
}

Now the end result is you have the slideshow div acting as a sort of "viewing window" through which you're looking at the images. Each image has an id value associated with it, and clicking the link jumps to that image in the slideshow div.

I should note that last I checked, Opera has a problem with overflow hidden and scrolling, but it's a known bug in Opera and is in fact even a part of the Acid2 test, so I believe Opera 10 should work fine with this trick.

Wednesday, June 3, 2009

The Impossible Octal

Hehe, here's a little trick I learned from TDWTF... Thought it's really less of a trick, and more of an "I can't believe it's that broken" moment.

In the title bar of your browser, add this:
javascript: alert(parseInt('05'));

You get 5, right?
Good.
Now try this:
javascript: alert(parseInt('09'));

Yup, that's right, you get a 0.

Here's the article with the explanation for this odd output:
If you guessed 9, you fail. No, it's zero. See, Javascript supports octal numbers. Any number starting with a zero is octal, even if it can't be an actual octal number. In certain languages, like Perl, trying to use a non-octal number as an octal number results in an error. In other languages, like Javascript, it silently fails.

So, thank you Javascript, for teaching me something I didn't know about you... and making me hate your quirks all the more.

Blogger RSS feeds by tag (aka label)

One thing I wanted to do was have RSS feeds by tag/labels, so that I can use a single blog for the Journal, and tips sections of the site. The url for a specific label in a feed is:
http://yourusername.blogspot.com/feeds/posts/default/-/tag1
If you want to use multiple labels (this one, for example is labelled as 'tips' and 'other'), just add the tag to the end of the url, like so:
http://yourusername.blogspot.com/feeds/posts/default/-/tag1/tag2
This will return all posts which are both tag1 and tag2.

URL file access with a cURL backup

So in the process of getting my website up and running, I ran into the 'URL file-access is disabled in the server configuration' message. Since the server admin was asleep, I figured I'd try to find a workaround. cURL is a commonly used one for this scenario, but the problem is that if you switch hosts it may not be available. As such, here's a handy variable to tell if URL file access is enabled:
ini_get('allow_url_fopen')
It returns true or false depending on the value in the php.ini file, and you can throw it in an if statement to test for it, and use cURL in the else statement in case it fails.

Valid Blogger RSS Output

Having trouble getting your blogger rss output to validate because Google botched the tracking code (lack of alt attribute in the tracking image)?

Do what I did, add this to the php page processing the rss feed:
$entry['content'] = substr($entry['content'], 0, -8) . " alt='' />";
This cuts out the closing img and div tag, adds alt, and closes it all again... just pray google doesn't change it >.>

Tuesday, June 2, 2009

On IE6 and Windows Update

Once upon a time Internet Explorer's ties to Windows and Microsoft were it's biggest strength, but in retrospect, it may have been it's biggest flaw. Numerous people now use FireFox, Opera, Chrome, and other browsers, but none of these have the single most glaring fault that Internet Explorer boasts about like a badge of honor... Windows Update. Firefox and others all update on their own, automatically, and independently (by default), and give the user little reason to disable this behavior. IE, by contrast, updates through Windows Update (I believe it's actually been rebranded Microsoft Update now); a service which many people disable because of the risk of receiving updates which cripple their system (as the WGA check did to some people, even though their licenses were valid). This puts a large portion of IE users out of the reach of the update system, and further widens the chasm between each iteration of Internet Explorer.

The cost to us? Being forced to write pages for a browser so old that when it was first released, George W Bush had just recently become our new President, and was on vacation in preparation for what he expected to be two easy and uneventful terms. Not to mention the thousands, if not millions, of users who view the web with poor css implementation, poor png rendering, broken javascript support, etc etc. So now, with IE8's release, developers are forced to write code for 3 Microsoft browsers which render content in wholly different ways. Don't get me wrong, I'm glad that IE8 has at least taken some steps toward standards compliance, but it's a single step in a journey of miles. It seems to me that the problem isn't moving IE7 users to something better, the problem is moving IE6 users at all.

I hate the word "Blog"

So it's ironic that the backend for this journal will be Google's Blogger. I haven't written in/maintained one of these since I was an angsty teenager. Let's see how this goes.