Archive for the 'Web Development' Category


Google Chrome Launches 0

Posted September 2, 2008

While it is admittedly early to be talking about a full-blown review, I’d like to at least take a moment to discuss one of the most significant browser releases in recent history.

As someone who has spent the last 13 years writing web applications I’ve seen first hand the path modern browsers have taken to get to where they are.  Knowing what I know about this path, I can also say that the journey has been a long one full of good intentions and without much concern for developers (or standards).  That’s why I’m so impressed with what Google is doing here.

Apparently Google “accidentally” sent a notification about their browser intentions a day early, resulting in a frenzy around their creative and informative announcement “comic.”

Then, today, they officially released the browser that was the source of all of the discussion.  With their claims of speed, performance and standards compliance I was skeptical.  After all, like I said I’ve been fed the “we made it faster” line a thousand times over the past 13 years and I’ve almost never been impressed.  Sure, you can benchmark browsers and prove a 3% increase in speed but what does that buy me in the real world?

When we’re talking about Chrome, however, we’re talking about insanely fast.  Let me be clear, I’ve developed a LOT of applications for intranet usage (internal company networks) and I can say that the “slowness” often felt while using web pages is not a result of bandwidth limitations or slow downloading.  Instead, it is a latency experienced while the inefficient browser engines parse through the code needed to create a web page.  This is even more obvious when the page has complex (read:  useful) JavaScript in place.  All that is to say, Chrome is so fast it does away with the expectations you have about using web pages.

I’ve read where some folks had problems with pages, but I’ve looked at all of the ones I am responsible for and found no issues whatsoever.  This is probably because I test them in Safari, which uses the same engine for rendering as Chrome.

So for now, those are my thoughts.  I’ll post more here if things go insanely awry, but I plan to use Chrome as my primary browser at home for a while to see what I run into.  Oh… and I posted this using Chrome on WordPress, so we know that works!

More Chrome Information:  http://tools.google.com/chrome/intl/en/features.html

Download Chrome:  http://tools.google.com/chrome/

DOCTYPE affects iframe scrollbar styles 1

Posted September 18, 2007

An application I am currently working on has been specifically targeted towards Internet Explorer and a technical design requirement is that the browser window the application is being run in is a fixed size. So inevitably, there will be scrolling.

As part of the design we decided to use a document divided up into sections using DIV tags and absolutely positioning rather than using frames all around. This leaves the primary content area of the application as an iframe taking up the majority of the page.

A week or so ago I put some styles in my CSS which were intended to color the scrollbars on the iframe. Oddly… this didn’t work. I didn’t really attempt to follow up on it until today, at which point I found an interesting solution.

Before, I had the following document definition in my HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

I changed the definition to:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

And now things work great. I’m not sure why, maybe when I get some time to look it up I’ll modify this post to reflect whatever reasons I find.

However, if you are having problems with your iframe scrollbars not taking your styles, this could help.

Assigning a CSS class to a dynamically created DOM element 0

Posted August 27, 2007

I recently discovered that Internet Explorer and Firefox don’t agree on the possibilities of assigning a CSS class to a dynamically created DOM element (created via JavaScript) using the “setAttribute” method. It took me a little time to figure out what was going on and how to fix it, so in the hopes that I can save someone else some time I decided to provide this post.

First, I should outline what I was trying to accomplish. I have a need for a web page which has completely dynamic display properties. During the use of the page many of the DOM elements will behave according to the user’s input, so I need to have each of them accessible in JavaScript. The goal is to have a page which can adjust, update and move all of its elements without ever reloading the page or any data which has already been loaded. The page is being written using .NET, JavaScript, (D)HTML and CSS.

Now, for the approach I decided to take. Since JavaScript will need to have access to all the elements anyhow, I decided the better approach would be to have a JavaScript object for each “module” that will exist in the page. This object carries some details about the object as well as a reference to a DOM object that will be associated with each module. The goal here is to keep from duplicating code, so I either write the DOM object in the HTML (and use server side logic to manage it) or I write it in JavaScript (and use the client’s memory to manage it), but not both.

My page is made up of three files, I’ve simplified them for illustrative purposes below…

My JavaScript source file, script.js:

d = new Array();
d[0] = new Display("Header", "Header");

function initializeDisplays() {
  for (var i = 0; i < d.length; i++) {
    container = document.getElementById("FrameworkContainer");
    d[i].dome = document.createElement("div");
    d[i].dome.setAttribute("id", d[i].id);
    d[i].dome.setAttribute("class", "moduleBody");
    d[i].dome.innerHTML = d[i].name;
    container.appendChild(d[i].dome);
  }
}

function Display(name, id) {
  this.name = name;
  this.id = id;
}

My CSS stylesheet, style.css:

.moduleBody {
  color:  Green;
}

And finally, my HTML file, test.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhmtl">
<head>
  <title>Test Page</title>
  <script type="text/javascript" src="script.js"></script>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body onload="initializeDisplays();">
  <div id="FrameworkContainer"></div>
</body>
</html>

Now this code works fine in Firefox, the new div is loaded into the document as expected and the text is green, as expected. However, using the same code in IE provides slightly different results. The div is loaded as expected, but no styles are applied to it. The reason, is that IE doesn’t support the following line of code:

d[i].dome.setAttribute("class", "moduleBody");

Instead, IE demands you use the following syntax:

d[i].dome.className = "moduleBody";

Is it a big deal? No, not really. But it can still be very, very frustrating to find that IE has issues when applying styles to a dynamically created element which uses the consistent approach of setAttribute as a means to set a style class. You will probably find that the className property is the recommended approach in tutorials and will find that it works in most browsers, but being a stickler for consistency I tried a different approach and ended up with this article to show for it!

Spoofing your browser’s user agent 0

Posted August 22, 2007

If you are a web developer (or anyone doing any programming which involves web browsers, which is just about everyone nowadays) you really are doing yourself a disservice if you don’t include Firefox in your toolbox for diagnosing issues and testing sites. The community provided Addons for Firefox are just invaluable in day to day tasks. A great example is the ability to spoof your browser’s user agent, pretending to be any browser you want, all from one browser.

My quest to do this started as a curiosity when I found a blog post titled “Search Engine Marketeers are the new script kiddies” discussing a Wordpress blog which was hacked in such a way that it invisibly provided more traffic to the hacker’s site whenever a search engine bot crawled the site. The hack was pretty impressive, actually but more impressive was the ability for the blogger to diagnose what had happened and track down the culprit.

Having a few Wordpress blogs of my own, I decided to look into checking mine for the same issues. It took me an hour or so of toying and poking around to get everything I needed, so I figured I would take a shot at documenting the steps that went into my adventure in the hopes that someone else would be able to get this done more quickly if they ever needed it. Plus… it will provide a reference for me when I inevitably do this on more computers in the future.

First, you’re going to need to get the User Agent Switcher Addon for Firefox (written by Chris Pederick). Installation should be fairly straight forward, so just click the button while in Firefox and let it do its thing.

Now for the part which took some searching…

The default installation of the Addon doesn’t provide a lot in the way of user agents to switch to. A couple of examples are all that are there, so in order to be really useful you’ll need to add agents of your own or find them somewhere. I found a very complete set of agents conveniently compiled into an XML file which can be imported into the Addon (Options > Options > User Agents > Import) over on Tech Patterns.

Once you have installed the Addon and loaded a complete set of user agents, you can test them out with the QuirksMode Browser Detect page.

There are a lot of uses for this ability, from security to verifying code which reacts to a specific browser. Whatever you use it for, hopefully this short guide made it easier to get your results.

Ajax Rain: A collection of JS / DHTML / AJAX code 0

Posted August 20, 2007

I remember a time… waaaaaay back in, oh… say… 1997 when the internet was really just starting to get “cool.” We would drink the latest caffeine laden beverage, take the latest “keep you wide-eyed” herbal supplement and write code until we were all convinced our hair was moving all over our skulls of its own volition. Back then, we would eagerly watch for the latest release notes for Netscape Navigator and relish any additions they made to JavaScript (bonus points for anyone who can remind me what the name of the scripting language was originally). As soon as a new change was in place we would attack it and put it somewhere… anywhere… on our sites. The code was raw, usually poorly formatted and documented and almost always protected by the author like it was going to be the next billion dollar idea.

That was then. In the ten years since that time we, as web developers, have evolved. Not quite far enough to exist only on a temporal plane but far enough to consider when writing code that other people may find it useful. No longer is the “cool” stuff of a proprietary variety. Now, developers more commonly take a little extra time to make their code understandable and customizable… then they do what was unthinkable ten years ago and (gasp) distribute it for free!

In steps Ajax Rain. A new resource style site that provides the coolest in JavaScript, DHTML and AJAX code for discerning veteran and budding rookie web developers alike. All of these snippets are downloadable for free and anyone can add their latest creation to the database.

So saddle up and ride some else’s code horse for a change. Quit reinventing the wheel (never mind that Good Year and Michelin continue to make millions doing exactly that) and get with the times. Go download and implement someone else’s code and take full credit for it yourself when praise is dished out at your next company picnic! After all… all the kids are doing it and they’re making you look lame in the process.