We've moved!

TechKnack.blogspot.com has officially moved to TechKnack.net. You should be redirected in 3-5 seconds. Thank you.
Showing posts with label web. Show all posts
Showing posts with label web. Show all posts

July 19, 2008

Is your DNS cache poisoned?

Add this post to Del.icio.us. Del.icio.us (0 saved)

Say what?

First, some background on DNS; feel free to skip this paragraph if you know what it is ;) . "Domain Name System" is a distributed system for translating web addresses (Google.com) to IP addresses (64.233.187.99). You type "Google.com" into your browser, the browser (through the computer) sends that address to the DNS, the DNS looks up the address and retrieves the corresponding IP, the DNS sends that IP to your computer, and, finally, the browser can use that IP to contact the appropriate website's server to fetch the content. Each domain has at least one "authoritative" DNS server, which holds the master information for that domain. Other servers in the DNS system contact the authoritative server, and cache the IP address in their own tables. This way, if an authoritative server goes down, less-reliable-yet-still-useful results can be obtained from secondary servers. (This is the way I understand it, please correct me if I'm wrong). OK, moving on.

I was doing some domain name management on FreeDNS a few days ago, when, seemingly out of nowhere, I was getting "error loading page" for that site. I tried a few other sites to make sure my internet wasn't down; I could access Google, but not eBay, with the same situation for a number of other sites. Very strange. Having recently been educating myself about DNS (that happens when you start looking into the details of dynamic DNS ;) ), I immediately assumed that my ISP's (AT&T's) DNS servers were on the fritz. Which, to my knowledge, has never happened before.

So, naturally, I went straight to google with a query: "att dns servers broke". Not the best grammar in the world, but it worked :) . Nothing especially recent popped up under Web results, so I checked out the Blog results, and found this: Your DNS Server is Broken, and Can't Be Fixed. Naturally, that site was one of the sites that my working DNS server(s) couldn't find, so I had to call up a google cached version. 'Twas a scary article.

Basically, there is an inherent flaw in the very design of the DNS system. This flaw allows malicious entities with knowledge of this flaw to poison the DNS cache. This means that they can update the system's cache to point a domain name at their IP address, which, in theory, could be a perfect copy of the original website. This would allow them to redirect major bank websites, for example, to their perfect copies designed to steal your account information. And you, of course, would never know the difference, because the URL bar still says "mybank.com".

Fortunately, the discoverer of the flaw, Dan Kaminsky of Doxpara.com, was a security researcher. And, fortunately, he kept this monumental news quiet and got together with some other security guys and programmers, as well as some of the big names in technology, to work up a workaround. The flaw isn't fixable, but we can make it harder to exploit.

After reading this article, which didn't exactly answer my first question ("Are AT&T's DNS servers down, broken, or worse?"), I headed to the news search. The most recent article there was on Forbes.com: Hackable Broadband Left Unpatched. This article, besides describing the flaw, detailed some major ISPs who hadn't updated their servers as of the day the article was published. To my disdain, AT&T was among them. This may explain the DNS hiccups, though, if implementing this workaround to the main servers is at all a major undertaking.

While sooner is better, the major ISPs (or, really, anyone who runs a DNS server) have until August 6th to update their systems. That's when Kaminsky will be discussing all the gritty details of the exploit in his talk at the Black Hat Briefings. In other words? DNS D-Day for anyone who hasn't patched up yet.

July 12, 2008

Sticky Page Footers

Add this post to Del.icio.us. Del.icio.us (0 saved)

Occasionally you'll be coding out a site, and you want a "sticky footer", a footer that sticks to the bottom of the browser viewport or the bottom of the main content section, whichever is lowest.

There are a few notable sites that have posted methods for doing this, but the short answer is it doesn't work unless you meet certain requirements. Probably the most popular example (which is also the first google result for "sticky footer") is A CSS Sticky Footer. However, as the explanation page shows, the method uses extraneous markup to push the footer down below the content. Also, this method only works with static-height footers.

Another good example comes from AListApart: Exploring Footers. The method involves using relative positioning on a container and absolutely positioning the footer to the bottom of that container. Inexplicably, this works, though for my implementation, I used the body element as my wrapper. Unfortunately, you have to apply appropriate padding or margin to the bottom of the content div, which in turn squashes the idea of having a dynamic-height footer.

Given these examples, which are perfect for fixed-height footers, it seems sticky, dynamic-height footers are not meant to be under current browser implementations. If you're insistent on having a dynamic-height sticky, you'll have to go the way of the faux footer (along the lines of the faux columns, which I've always thought to be cheating :) ). I couldn't find any links talking about faux columns (in this sense, anyway), but one site which currently implements it is KilianValkhof.com. If you look into his code, you'll see that the background of the footer is actually set in the body.

July 3, 2008

Find me on...

Add this post to Del.icio.us. Del.icio.us (0 saved)

Seems I've got a lot of social networking accounts under my belt nowadays. From FaceBook to Twitter to Digg to Blogger. While I would like to put a "find me on" widget in this blog's sidebar, it would just add to the clutter. So, in lieu of that, I'll just put links to myself in a blog post. :) The list is in "site - username" format. Here we go...

There are probably more that aren't coming to mind at the moment. Probably mainly because I don't use them that much. As I join other services, I'll add them here.

June 27, 2008

Use Google for UnitConversions

Add this post to Del.icio.us. Del.icio.us (0 saved)

Recently I was doing some quick google-research on sheet paper sizes; I came across a wikipedia image which showed A-sheet sizes -- in millimeters. Being an American who prefers to deal in inches, I did a Google search to get the inch equivalent of 210mm. I expected to find a website that could provide such a conversion for me -- and I found it sooner than I expected: I suppose this feature has been around for quite a while (I found a forum thread dated from '05), but it's such a small feature that it can easily be overlooked. Or, more likely, not seen at all except by those few who have a need for it. ;)

June 4, 2008

140 characters, are you kidding me???

Add this post to Del.icio.us. Del.icio.us (0 saved)

After long holding back from joining Twitter, for fear of the addiction that it would surely cause, my self-control finally wore down and I signed up. First thing I notice? I only get 140 characters for each "twit"! This will not be possible; I find it sometimes difficult to obey 500-character limits on some forums, let alone a single thought in 140 characters. I'll have to do something like ... um ... posting three twits in a row. Goody, goody. :)

Also, what do I do about links? I'll surely have links to articles and stuff every few twits. I guess I'll be making extensive use of tinyurl.com.

Well, at any rate, wish me luck ... follow me ... do whatever you fellow twitters do ...

Oh, and to top it all off, I also registered on FriendFeed.

May 17, 2008

AdSense Videos Not Necessarily Good

Add this post to Del.icio.us. Del.icio.us (0 saved)

In my last post, I "introduced" AdSense's new Video Units. I also railed against the size requirements a little bit in that post.

Now. Taking a step back, let me ask a question. What is the purpose of ads (AdSense ads in particular)? For most legitimate cases, the purpose is to enhance a page's content with topic-relevant alternative links, with the main incentive of earning a few cents per click. Note the word enhance, meaning "to add value to". You put ads on your site in the hopes that the links provided will provide enough potential quality that the user will click through. Now, another question: what do videos, the marketing tool of the Information Age, do by their very nature? They grab your attention, and they grab it hard! Have you ever found one specific video on YouTube, watched it, and immediately been pulled in to the "related videos" journey? Mm-hm. Guilty as charged :) . The "traditional" (if I may use the word here) ad system is to place a text block (which is easily skimmable, by the way!) within our content, where it sits quietly by in the hopes that some user may grace it with a mouse click. This new version? GRAB the user's attention away from the main content, and perhaps they might click the overlay ads in the process. These video ads, as big as they are, will steal the limelight from your content, if not placed appropriately. Really, I don't think the current sizes have an "appropriate" placement. You can either place them intrusively up front where they steal from your content, or you can place them out-of-the-way (long after your content) where they'll hardly be noticed.

Now, you'd think that's great, right? Grab their attention straight to the ad unit itself, no trouble? Well, it might be, if the overlay ads themselves were noticeable. I just added the mini player to my blog and played the first video on it, and the overlay ad was so annoying and detracting from my video experience so badly that I quickly hid it. That's right, there's a "close overlay ad" button. It reduces the entire money-making mechanism to a little "show ad" button in the bottom-right corner of the player. Now, how many people do you think, after having hidden the ad that was so darned annoying, will re-open that same ad to see if they want to click it? Certainly not me. I have more content to look through, and better things to do with my time.

Come to think of it, I might not even press the play button.

May 14, 2008

AdSense Videos

Add this post to Del.icio.us. Del.icio.us (0 saved)

Seems Google has one-up'd their AdSense service to include full-on YouTube videos. You can embed a video player in your website which will play YouTube videos with overlay ads.

To create an AdSense video unit, you must first own both an AdSense account and a YouTube account. Following the links from within the AdSense website, you must link the two accounts together (fairly straightforward). Once linked, YouTube will put you on the video unit setup page, where you can add a name and description, color scheme (nine available at time of writing), size (Mini 400x415, Standard 500x510, and Full-Sized 780x560 -- yikes!), and content. The content options seem the most difficult part to figure out; a "keywords" field is offered, but all my attempts at using only keywords failed. You can also pick-and-choose from categories. Once a "search is successful", you are presented with a bunch of YouTube channels from which to choose your content. The "Channel Picker" offers the helpful hint "Click on a content owner to preview their information." The information? Their name, a link to their YouTube page, when they joined, how many channel views they've had, and, if you're lucky, a picture. Nothing useful enough to choose what content my viewers might enjoy. It does offer a "preview videos" button, which returns a table of video thumbnails with links you can click through to view the corresponding videos. Sorry, still not enough to accurately filter my content. Anyway. Moving on.

The smallest player, 400x415, is not "small". Granted, everyone has screens that are 1024x768 at a minimum (I myself use a 1440x900 notebook), but the browser no longer occupies the entire screen. I keep my FireFox window constantly at 1024x768 with the help of the Web Developer extension, and this "Mini" player is anything but mini. I suppose it does depend on your website's layout, of course, but seriously. 400 pixels wide is pretty "intrusive" by my standards; my current blog layout allows only 512 pixels for content width, and about 230 pixels for the sidebar content. Gimme something that's 200 pixels wide or less ("Micro" size, perhaps :D ), and hope it doesn't lose too much quality.

I know, I know, they've only just released it, more options will come with time and development, give em a break, right? Fine. I'm not really for the idea anyway, but that's another post.

Now, just because I'm not for the idea, doesn't mean I won't try it. I've added a "mini" sized player to the bottom of the blog, and we'll see how it goes. Enjoy the LockerGnome :)

May 11, 2008

Lists, Useful For More Than Menus

Add this post to Del.icio.us. Del.icio.us (0 saved)

I came across a page recently that uses ordered lists for the entire layout -- not just the menu. The entire layout is in two parts: one ordered list for the header/body/footer, and another ordered list for the three columns inside the body.

I find this to be an interesting approach to multi-column layouts. Better yet, the author claims that it works in all major browsers on the three major operating systems.

However, are ordered lists the proper elements to use in this case? Is it "semantically correct"? What about unordered versus ordered lists? It'd be terribly simple to convert the layout to work with unordered lists, but which is more "correct".

Regardless of correctness, though, "no floats, no divs, no clears" is rather appealing.

May 8, 2008

Circular Menus and Usability

Add this post to Del.icio.us. Del.icio.us (0 saved)

Circular menus. Ever heard of them? I'm not sure if they have an "official" or "common" name, but this name is pretty descriptive.

Circular menus are superior in usability to the typical rectangular slide-out menu. Why? Because, ideally, each menu item is the same distance from the initial pointer position as each other item. Look at the iPod buttons, for example. Play/Pause, the most common function, is in the middle, and the other functions are equal distances from there.

Also check out the SecondLife context "spin menu". The pie pops up surrounding the cursor, and all the available options are an equal twitch away from the center.

Submenus? Just expand the circle. For example, here's a quick mockup I made converting much of my current FireFox context menu into a pie menu:

But how feasible would such menus be inside a website? WebToolkit.info has a mostly-working demo that uses images exclusively. I tried substituting text for the images, but the menu simply disappeared.

Credit for image: iPod image and SecondLife image

April 19, 2008

Alternative Link Underlining

Add this post to Del.icio.us. Del.icio.us (0 saved)

Ever seen the odd site that, instead of solid or absent underlining, has a dotted or dashed underline? Ever wonder how it's done? It's really simple: border-style.

All you need to do to get an alternative underlining effect is to, first off, hide the default underline with text-decoration:none, and then specify a bottom border for the affected links: a:link { text-decoration:none; border-bottom: black dashed 1px; } To make the effect stand out, you could also make the link and border separate colors, either on hover or all the time.

April 12, 2008

Pretty Up Your Forms with CSS

Add this post to Del.icio.us. Del.icio.us (0 saved)

Download Example

Let's face it: form elements au naturel are NOT pretty. So what do we do with them? We add a border thickness here, a border color there, leaving the whole thing largely unchanged. And still ugly. Time to change that.

I'm going to use the Tableless CSS Forms code provided by DynamicDrive's CSS library contributors. This gives us the basic layout and essential elements without too much trouble:

We'll start with the basics: borders and background. In Web 2.0, simplicity is king. Beveled corners? Sooo Web 1.0. Sooo not pretty. We'll make the borders solid, with uniform color, and thin to keep the simplicity. And we'll specify a white background to avoid any cross-browser issues: .cssform input, .cssform textarea { border:#999 solid 1px; background:#FFF; } A nice, neutral gray tones down the harshness of the input areas' borders, and the solid-1px all the way around eliminates any doubts as to where the areas begin and end.

Next we want to make it a li'l roomier. How do you like cramming text into zero-padding textboxes? .cssform input { padding:3px 5px; } .cssform textarea { padding:5px; } Here's when you start getting into trouble with the disparities in browsers' box models, though as long as the width of the elements isn't an issue, you should be fine.

Now that we've covered the foundation, time to break out the makeup: images! Using a very small, very subtle gradient image, we can add a simple inner shadow to each input field. While this is "adding features", I feel it actually adds to the feeling of simplicity: .cssform input, .cssform textarea { border:#999 solid 1px; background:#FFF url(formgrad.png) repeat-x top left; } The gradient image is a 1px wide by 15px high PNG image with a gradient of hex colors #EEEEEE (top) to #FFFFFF (bottom). The slightest difference in color makes for a very nice effect.

We could very well stop here -- all the form elements are styled nicely, even the submit and reset buttons. But why stop there when you can make the buttons intuitive as well? .cssform .submit { background:#FFF url(submitgrad.png) repeat-x bottom left; } .cssform .reset { background:#FFF url(resetgrad.png) repeat-x bottom left; } Here we use another technique found at DynamicDrive. This simply adds two other colored gradient images to the background of the appropriate buttons. Of course, you must add the appropriate classes to the buttons for this to work. If you want to take full advantage of CSS standards and leave IE6 and below behind in the dust, you could just use the attribute selector: .cssform input[type="submit"] { background:#FFF url(submitgrad.png) repeat-x bottom left; } .cssform input[type="reset"] { background:#FFF url(resetgrad.png) repeat-x bottom left; }

And there you have it. With no more than three images (or one, if you prefer), some very simple CSS, and an eye for simplicity, we've made our form elements nice looking.

Additional links:
Download the example
DynamicDrive: CSS Tableless Forms
DynamicDrive: Stylish Submit Buttons

April 9, 2008

Do we really need the br element?

Add this post to Del.icio.us. Del.icio.us (0 saved)

Do we really need the lowly <br/> element? Apparently the W3C thinks so, with HTML5 containing the element. I mean, seriously, what does it do that a span styled with display:block; can't?

The last two times I've seen it used were in articles about creating a tableless photo gallery and making a CSS block nav menu. In both instances, the br was used to drop down the descriptive text to the next line. In both instances, a span surrounding the descriptive text, and with its display set to block, does the exact same thing.

I suppose an argument could be made about users with CSS turned off. In my opinion, though, if you have CSS turned off, you're willing to deal with a few minor inconveniences. If you're that worried about them, throw in a space before the span for readability. And if you really insist on giving them the extra lines of text -- there's always the naturally-block-level <div>.

And what about screenreaders? I doubt they'd be affected either way (it is whitespace, after all -- right?), but I really have no clue. Perhaps someone who uses a screenreader could tell me, after chewing me out about my own blog's (actually Blogger's) screenreader-friendliness. :o

April 4, 2008

Promote Standards Awareness with CSS Naked

Add this post to Del.icio.us. Del.icio.us (0 saved)

CSS Naked is a standards-awareness initiative led/organized by Dustin Diaz. On the specified date, April 9th, all participating websites will strip their sites of their CSS, allowing the world to see the underlying clean-code usability:

The idea behind this event is to promote Web Standards. Plain and simple. This includes proper use of (x)html, semantic markup, a good hierarchy structure, and of course, a good 'ol play on words. It's time to show off your <body>.

While I would love to participate in this, I wouldn't recommend it for Blogger users. The building blocks of Blogger blogs, widgets, produce all sort of irrelevant divs and such that are used exclusively as CSS hooks. Aside from the fact that the underlying code is NOT semantic, disabling styles on Blogger sites (well, this one anyway) is NOT pretty (or, for that matter, usable). If you must see the results of such an inadvisable act as disabling CSS, you can (using FireFox) go to View -> Page Style -> No Style. This will disable styles for the current page (or the current tab, I'm not exactly sure).

So, to reverse Dustin's little play on words -- sorry, you don't get to see my <body> :P

April 1, 2008

Got Mad Coding Skills?

Add this post to Del.icio.us. Del.icio.us (0 saved)

Think you got what it takes to slice up a PSD file into a valid and usable (X)HTML template? Then check out CSS Off, a contest that gives you the opportunity to do just that. At one minute past midnight CST on April 5, a PSD file will be uploaded for contestants to download. Contestants will have up to 24 hours to submit their completed entry.

Don't have Photoshop? Check out the GIMP! I'm hoping that the PSD file is GIMP-compatible. You could try to convert it one way (using an online service) or another (directly in the GIMP),but there's always the issue of unsupported layer effects getting messed up.

And, no, this is not an AFD trick. At least, I hope it isn't...

IE8: In Like A Lion, Out Like A Lamb

Add this post to Del.icio.us. Del.icio.us (0 saved)

Here it is, the end of March, and I just couldn't help but notice how little has been said about IE8 lately. When the first beta was publicly released amidst the MIX08 madness, you could almost feel the blogosphere shuddering with the news. The tremors were discernible for what...a week? Maybe two? Then all became silent once more. Is it just that it's Microsoft, and everyone's tired themselves out with the extra efforts put toward M$-bashing that week? Or is it because everyone and their mother (and their dog, to top all) reviewed the thing like no tomorrow, and our eyes have grown weary of the Blue E? (if your eyes are, indeed, weary of the Blue E, don't click that link)

Whatever the reason, I just thought I'd note that the famous March proverb seemed to apply to IE8, with about the same timing. Perhaps we'll hear more about it (both bashing and praise) when it goes stable?

March 27, 2008

Anything to make a buck...

Add this post to Del.icio.us. Del.icio.us (0 saved)

I was perusing eBay today, looking at Photoshop CS3 prices, amongst other things. As I was looking down the list, I came across an auction for a copy of the GIMP Only $5 Buy It Now, $4.50 starting bid! Too bad anyone willing to buy it will download it for free. Those who don't know about the free option probably won't bid on it because they've never heard of it :)

I went over the GNU GPL hosted on The GIMP's website, and didn't see anything about selling copies of the software, other than the detail of offering the source code to the purchaser. Of course, the seller in this case also offers the legitimate option of mailing a CD with the program for $3 shipping. I'll be very interested to see how this auction goes, if it sells, how much it sells for, and how much traffic it'll get from Digg. Hehe, sorry, I just couldn't resist...

Edit: Upon further reading the GPL, section 3 states

You may copy and distribute the Program [...] in object code or executable form under the terms of Sections 1 and 2 [...] provided that you also [make the source code available].

It goes on to detail three methods by which you can make the source code available (accompanying the software, with a written offer to transfer the source, or with information concerning such an offer made to you). The seller, however, does not offer the source code anywhere in the listing -- and there's no way to know whether they will offer it after the auction.

At any rate, this seller is selling other GPL'd and open-source software, including 7-Zip and OpenOffice. And all the GPL stuff they're selling, IMO, taste of false advertising.

March 25, 2008

Faviconize your blog

Add this post to Del.icio.us. Del.icio.us (0 saved)

Favicons. Those little icons that appear on FireFox's tabs, IE's favorites bar, and various other places in web-related applications. Simple little icons, no larger than 32 pixels square, yet they are a part of your site's identity.

Why have a favicon? Kiseki.co.uk puts it well:

A favicon can help people identify your site quickly and easily in, say, a long list of bookmarks....It is only a small detail, but it can be useful for people to recognise your site.

A favicon is an instant visual cue that, when a visitor sees it, conjures your website in their minds. As AbstractPromotion.com says, "If you don’t have a favicon, your users will forget about you".

Making a favicon is fairly straightforward: churn up your creative juices, fire up the gimp, create a new 16x16px or 32x32px image, brand away, save as an ICO, GIF, or PNG file, then upload the image to a file hosting site. I personally enjoy Village Photos' free account, though there's always PhotoBucket, ImageShack, or Google's own Picasa service. After the image is web-accessible, add the following lines to the <head> section of your blog HTML template: <link href='http://host.com/path/to/image.png' rel='shortcut icon' type='image/png' /> <link href='http://host.com/path/to/image.png' rel='icon' type='image/png' /> And, voila! You should obviously replace the href and type attributes to fit your situation. For type, use image/png for PNG, image/gif for GIF, and image/ico for ICO, in case you were wondering :)

Why two nigh-identical tags? To answer a question with a question, what browser has, in decades past, caused us all so much pain? That's right. It seems that older versions of IE need the "shortcut icon" link just to see the favicon image...whether or not they decide to display it.

According to the W3C, the rel attribute's value should, "officially", be "icon". Interestingly, they also recommend putting a "profile" attribute in the <head> tag, "to define what the ["icon"] value means". Their version: <head profile="http://www.w3.org/2005/10/profile"> <link rel="icon" type="image/png" href="/somewhere/myicon.png" /> Though I don't know for sure how well this will make IE6 behave...if such a thing is indeed possible.

March 22, 2008

Web 3.0: Are We There Yet?

Add this post to Del.icio.us. Del.icio.us (0 saved)

Quick disclaimer: this article is simply something that I wrote up on a whim, meant to provoke thought. By no means do I claim to be an expert on the history of the web, the intricacies of "Web 2.0" et al, or anything else. This is, simply put, a brainstorm.

Since its inception, the web has been evolving.

In the beginning, there were marked-up files, with the sole purpose of spreading information. Files linked to each other using hyperlinks. Pages were made up of static HTML -- with a strong emphasis on "static". Websites were merely a collection of rarely-changing information. Rarely-changing because...well...because, put simply, they were static.

Enter Server-Side Scripting. Wonder of wonders! Intelligent pages, able to adapt, to learn, to store and retrieve information! Pages could be made easier to update, easier to maintain, and easier to modify. Website owners and visitors alike could create accounts, and later log back in to those accounts to retrieve information they had saved on previous visits.

The world of static pages, difficult maintenance, and ad-hoc special effects has been dubbed the "Web 1.0 era". The focus of the web was information, and information was served.

As dynamic server-side languages gained popularity, people created websites that slowly evolved into communities. Web 2.0, we called it. The focus shifted to the people, and the people were served.

And now where are we? "Well, nothing revolutionary has come along, so we must still be in Web 2.0". I would disagree. In a recent article on IndustryInteractive.net entitled "Facebook has failed us", the author states:

  1. Facebook is great at connecting people. [...] I was able to find people I went to elementary school with, identify them, and connect.
  2. Facebook sucks at playing well with others. There are Facebook Apps to integrate things like Flickr and del.icio.us, but they really blow, and why isn’t Facebook building that functionality right in anyways? [...]

While I won't say how great or how horrible Facebook is, it seems the focus of the web is shifting -- or already has shifted -- away from people, and more towards services. With "web applications" like Google Docs, Flickr, Netvouz, GMail, and Google Reader, web-based computing may not be that far off. Already, most of the functions we perform on our computers can already be done through our favorite web browsers -- even BitTorrent downloading!

People don't expect information or community anymore -- those are a given for any good website. What people expect in this new day and age is integration of services. Can I inject my Del.icio.us bookmarks into my blog feed? Can Google Docs post this document to my Blogger blog? Can I integrate my Flickr pics into my Facebook profile?

With the shift of focus to services, it's possible we may already be in a kind of Web 3.0. Or perhaps not -- perhaps we are only in Web 2.5, the middle grounds between people-focus and service-focus. After all, there was a Web 1.5: the middle grounds between information-focus and people-focus, when those good ol' dynamic web languages were still picking up support.

March 16, 2008

Browsershots: Mass Website Testing

Add this post to Del.icio.us. Del.icio.us (0 saved)

In the world of Web 2.0, cross-browser compatibility is a necessary evil. With different browsers, different versions of different browsers, and different operating systems with different versions of different browsers, you can rarely predict how your visitor might be viewing your site (unless, of course, you're developing for a tightly controlled intranet, where everyone uses the same OS and browser). Unfortunately, it's rarely, if ever, possible or sensible to test your site on even the major browser/OS combinations, let alone every conceivable combination.

Enter BrowserShots (currently version 0.4 beta 2). What is browsershots?

Browsershots makes screenshots of your web design in different browsers. It is a free open-source online service created by Johann C. Rocholl. When you submit your web address, it will be added to the job queue. A number of distributed computers will open your website in their browser. Then they will make screenshots and upload them to the central server here.

The process is very simple: point your browser to BrowserShots.org, enter your website's URL, check off the browser/OS combinations you want to check it in (there are a LOT of choices!), set any optional settings, and click "submit". Optional settings include screen size, color depth, javascript support, java support, and flash support. Once you click submit, your requests are placed in a queue. In my experience, the wait time to receive all requested snapshots (mainly using the top browsers on all three platforms) varies between 3 minutes (last night) and 30 minutes (estimated time as I write this post :) ), though for $15 (10€), you can get priority processing. The snapshots are available for 30min (or more, if you want to extend it), and can be viewed as they are taken (you don't have to wait for the whole batch to finish). Refresh your "Website Overview" page to see screenshots as they are uploaded. On the Website overview page, you also have the opportunity to download a zip file containing all snapshots that have been taken so far.

Once a screenshot has been taken and uploaded, you can click on its thumbnail to view the details of the browser and OS the snap was taken on, as well as a full-size screenshot of the page. Details include browser, engine, javascript capabilities, java capabilities, flash capabilities; "factory", sponsor, hardware, and OS of the machine that took that snapshot; dimensions and file size of the screenshot; and various timestamps related to the screenshot.

Granted, you can't check website behavior (javascript animations, interactions, and such), but for those without access to different operating systems and different browsers, this is a very useful tool for cross-browser compatibility checking.

Browser Shots

March 7, 2008

I'm Digging...a duplicate of WHAT??

Add this post to Del.icio.us. Del.icio.us (0 saved)

Digg is a great source of traffic and popular news. Quite obviously a very popular website. However, its popularity has resulted in so many stories "getting Dugg" that, while Digging a brand-new story, it is almost inevitable to get a "We think you're duping us" alert. Frankly, it's getting quite ridiculous, if you ask me.

As I was digging the first dent in the ground for one of my recent articles, Add entries to Konqueror's "Create new" menu, I ran into the expected "Submit a New Story - Are You Sure It's Not a Duplicate?" message. I usually take the time to look through the stories to see if my topic has been covered before, but usually it's just a bunch of stories that have nothing to do with my topic. This time, though, it was worse.

The title Dugg was "Add entries to Konqueror's "Create new" menu". The content, you can see for yourself at the article's Digg page. The category was "Linux/Unix" under "Technology". The so-called duplicates?

Honestly, what does altering Konqueror's context menu have ANYTHING to do with BK offering Mac and Cheese?? It doesn't even have anything to do with food, and there were no less than three food-related "dupes" in the list. The only dupe that came close to my content was Empty Applications menu on Ubuntu 7.10

The Digg "Dupes Filter" may have worked fine when Digg was a startup site with only a few thousand stories, but with the multitudinous and growing number of stories Dugg on a daily basis, the Digg duplicates filter needs to be more robust than just picking out a few keywords from the Dugg content. It's time to revisit the design phase.
</rant> :)