I've had time lately to do a lot more reading and Jeremy Keith's DOM Scripting book is another one that belongs on your shelf if you're trying to learn any amount of JavaScript.  I've hated and avoided JavaScript for years, mostly because I started my career during the browser wars and quickly grew tired of having to write different code for different browsers.  Thankfully, those days are now mostly over and this book has made me love JavaScript again.

The Document Object Model (DOM) is a standard for conceptualizing and representing the contents of an HTML or XML type document.  Mr. Keith's book teaches how to use JavaScript to manipulate the DOM so that you can dynamically add or remove content from a page, change the way things look, or move things around.  Similar to how CSS allows you to control the presentation of your content, DOM scripting allows you to control behaviors and events.

There are lots of great JavaScript frameworks available like jQuery, Script.aculo.us, or Dojo which allow you to easily enhance your websites.  In order to fully take advantage of them though, you need to have a fundamental understanding of how things like the DOM and JavaScript event handling work.  That's where this book really excels.  It's written primarily for web standards developers fluent in XHTML/CSS who're looking to branch into more client-side scripting.

This book is full of useful lessons and real world examples on how to make JavaScript and the DOM work in your applications. It also places a heavy focus on fundamentals and best practices such as graceful degradation which will help you make sure that your sites still function well even without the fancy JavaScript enhancements.  JavaScript has long been thought to make things inaccessible but it doesn't have to be.  This book stresses how to use these technologies in an efficient, unobtrusive way.

What I liked most about this book was the voice in which it was written.  I've read dozens of boring hard-to-follow tech manuals over the years but this book felt more like a friend standing over your shoulder and walking you through the process.  That does somewhat limit the amount of information the book can cover and it definitely doesn't go very far into advanced techniques.  If you've been doing standards development and basic JavaScript for a while though, and you really want to get started on increasing your scripting skills, this book makes an excellent primer.  For me it turned my impression of JavaScript from an overly-complex annoyance to an easy-to-use yet incredibly powerful tool for improving my websites.

Permalink | Posted On May 9, 2008 Comments (0) | TrackBacks (0)

I just wasted an hour of my life figuring this out so I thought I'd share in case anyone else has the same problem. This happened to me using Adobe Dreamweaver CS3 but may be relevant to previous versions as well.

I was working on some CSS for a multi-tier dropdown menu when all of a sudden Dreamweaver just shut itself down. No warning. No error message. Just Poof! Gone. When I restarted, the splash screen came up and the program would start to load, get to the part where it said something about "Initializing Site Cache" and then just vanish. It turns out that I'd corrupted my cache file which rendered Dreamweaver inoperable.

By re-naming the folder I was working in, I got Dreamweaver to start loading again.  Since it could no longer find my site it didn't see the bad cache and the program would load.  When I tried to switch back to editing my site though, the problem would happen again, even after disabling and re-enabling the cache.  Something was causing my cache to go haywire.

I'd been debugging some IE6 issues (imagine that) and had been commenting and un-commenting various lines of my external stylesheet.  During one of these debug sessions I'd apparently left a rogue */ at the end of a CSS block.  Having the comment close marker but not the comment open marker was enough to send Dreamweaver into a frenzy.

So if you run into a similar issue with Dreamweaver crashing and burning, check the latest edits you made to your files.  If there's invalid markup it can apparently cause Dreamweaver's cache to explode and ruin your day.

Permalink | Posted On April 29, 2008 Comments (0) | TrackBacks (0)

There are about a million different scripts out there for doing JavaScript rollover images. Most of them however, aren't very good. They often require multiple functions... one to preload the images, one to swap them on rollover, and another to swap them back. Worse still, they usually involve inserting JavaScript event handlers into your HTML code.

Just look at the HTML code inserted by Adobe Dreamweaver's rollover function:

This code is obtrusive and difficult to manage. Wouldn't it be great if you could just do something simple, like adding a CSS class, to make the rollovers work automatically? By using some scripting with the Document Object Model you can do that quite easily.

Here's a great rollover script written by Daniel Nolan that will allow us to greatly simplify our code. Take a look the HTML code needed to do the rollovers using this method.

This is definitely much cleaner and easier. All we need to do is add the class="imgover" to our img tag and the script does the rest. When the page loads, the JavaScript looks through all of the img tags on the page. For each img tag it finds with the "imgover" class, it will dynamically add the onmouseover and onmouseout events to replace the images. It automatically looks for an image of the same name with "_o" at the end for the rollover. So if your main image were named myimage.jpg, you'd name the rollover image myimage_o.jpg.

That's all there is to it. Quick, easy, standards-compliant rollover images.

Download the rollover.js file.

Permalink | Posted On April 12, 2008 Comments (0) | TrackBacks (0)

A while back I posted a review of Stephen Walther's ASP.NET 2.0 Unleashed. It's a fantastic book that I've used more times than I can count. The release of the .NET 3.5 framework means there are lots of new things to learn. Thankfully, Mr. Walther has released an amazing follow up-book titled ASP.NET 3.5 Unleashed.

At 1890 pages this book has just about everything you need to know to start building complex ASP.NET applications. While the book assumes that you have some familiarity with using ASP.NET the first few chapters are still devoted to the basics. I encourage everyone to read them, even the experts. There are many tips and tricks in the book so you may learn something new or pick up on something you'd long forgotten. Did you know the asp:Literal control has a build in Mode property that can be set to HTML encode it's content? I'd honestly forgotten about that and had been doing my encoding on the back-end.

This book provides an in-depth look at just about all of the core ASP.NET features building on many of the techniques we used in 2.0. For the new features specific to ASP.NET 3.5 , Walther devotes an entire chapter to the new ListView and DataPager controls. These controls can be thought of as a GridView or Repeater on steroids. There's also a chapter on data access with LINQ to SQL and a 3-chapter section devoted to working with AJAX.NET and the AJAX Control Toolkit.

There are many books out there that focus on the "how" but what I like most about Mr. Walther's books is that he devotes a great deal of time to the "why". For example, the book explains how to use the SqlDataSource control but then also explains why you'll want to avoid it for most complex applications and use the ObjectDatasourceControl instead. With this book you'll not only learn how to get things done, you'll learn how to get things done right. For that reason it's an invaluable resource for your library. Every ASP.NET developer should have this book on his/her shelf.

Note: While the code samples in the previous 1.1 and 2.0 Unleashed books were written in VB.NET, this new 3.5 book has them written in C#. Walther cites the fact that there are now more C# developers than there are VB.NET developers as the reason for the switch. I would've liked to have seen two different versions of the book but all code samples are also provided in VB on the included CD-ROM so everyone can easily follow along.

Permalink | Posted On March 31, 2008 Comments (0) | TrackBacks (0)

I'm building an ASP.NET application this weekend and ran into the following error.

Failed to enable constraints. One or more rows contain values violating non-null, unique, or foreign-key constraints.

The error message itself is somewhat vague and it took me a little while to troubleshoot it so I thought I'd post my solution here. There are many reasons you could get this error, the most obvious being that you may have data in your database that contains a null value or that violates a foreign-key constraint.

I spent a while checking my database and everything seemed to be in order. There were no null values where there shouldn't be, my relationships were setup properly, and I'd double-checked that I wasn't enforcing foreign-key constraints.

After wracking my brain for a while, I started Googling and found some suggestions in a few different .NET forums which helped fix the problem. It turns out that during my data-importing I'd decided to change a field in one of my tables from VARCHAR(50) to VARCHAR(100) because some of the data was larger than I'd originally expected. However, I'd neglected to update the MaxLength property of the same field in my DataSet file. This disparity is what caused the problem. Updating the MaxLength property to 100 instantly fixed the issue.

So this error message can be somewhat misleading. If you find yourself faced with this error and you've checked all the things that the error message suggests and you're still having problems, check to see that the sizes of your database fields match the sizes in your dataset.

Permalink | Posted On March 8, 2008 Comments (0) | TrackBacks (0)

These days I spend more of my time in meetings and putting out fires than I do actually writing cool new bits of code, which is one of the reasons for the infrequent blog postings. Since I'm not writing as much code these days I can at least point out some of the cool work being done by other people.

Kevin Miller of Stickman Labs has provided two great components based on the script.aculo.us framework; Accordion and LightWindow.

Accordion is a great way to add collapsible panels where one panel closes as another one opens. This is a great way to organize pages which have lots of content, like a Frequently Asked Questions page or perhaps organizing some navigation elements on a page.

LightWindow is similar to Lightbox and other modal/pop-over window controls. It uses AJAX to pull content from the server dynamically and display it overlayed on top of the current page. What differentiates it from the rest is that it supports virtually any kind of conent. You can use it to load images, flash movies, video files, other HTML content, web forms, etc. It's easy to setup and there are lots of options you can tweak to make it work for your site.

Both controls can add cool functionality to your site and they're incredibly easy to install and use. Check them out and start enhancing your applications.

Lastly, people like Mr. Miller dedicate a lot of time creating projects like this for the rest of us to use. While he offers these free of charge, please consider supporting him and the community in general by making a donation. Hopefully this will encourage him to keep creating great work like this.

Permalink | Posted On January 30, 2008 Comments (1) | TrackBacks (0)

In what I'm going to consider a late Christmas present, AOL/Time Warner has decided to kill off the ailing Netscape web browser. While the recent versions of Netscape didn't cause nearly the amount of headaches as the Netscape of old, it was still one more browser for us to worry about testing in.

According to Netscape Director Tom Drapeau, "While internal groups within AOL have invested a great deal of time and energy in attempting to revive Netscape Navigator, these efforts have not been successful in gaining market share from Microsoft's Internet Explorer".

Forbes.com has more information about the end of Netscape's 13 year battle for browser popularity.

So long Netscape... you had a good run.

Permalink | Posted On December 29, 2007 Comments (0) | TrackBacks (0)

This is a post about something that I'd thought had died out but I've started seeing it a lot again lately. Whenever a designer does a new website design, they rarely have copy to work with. So when creating promotional areas on the homepage, in sidebars, etc., you'll inevitably see something like this:

Lorem ipsum dolor sit amet
Quisque molestie tristique nulla. Nam porta cursus sapien. Duis ullamcorper porta tortor. Suspendisse vel enim vitae magna lobortis tempor.
Read More

The problem I have with this is the "read more" link at the bottom. Content creators use this template and typically add copy but leave the link unchanged. While it may look aesthetically pleasing to have 4 promo areas with symmetrical "read more" links at the bottom, it's terrible for SEO and for general web accessibility.

It's widely known at this point that search engines use the actual text of a hyperlink as one of the criteria for search engine rankings. Chances are people aren't googling "read more" and hoping to find your website so stop polluting your pages with those links. Instead, make the title of the promo your hyperlink, or at least use descriptive keywords in your link at the bottom.

If you're a designer, stop creating comps with these "read more" links because it encourages a bad practice.

If you're a content writer, start factoring this into your content creation. Whenever you need a link, be sure to include descriptive keywords.

If you're a developer, send this blog post to your designer and content creator team members and let's try to kill the "read more" link once and for all.

Permalink | Posted On December 2, 2007 Comments (1) | TrackBacks (0)

This is probably old news but I so rarely use Internet Explorer that I completely missed it. I've written before about the Firefox Web Developer Extension and the Web Accessibility Toolbar for IE. It turns out that Microsoft apparently released it's own Internet Explorer Developer Toolbar.

Microsoft's toolbar is a little bit like Firebug although definitely not as good. I rarely run IE if I can help it... but every once in a while I'm forced to use it for some badly coded IE-only web application.  For times like that it's handy to have a development tool like this. It may also come in handy when you're trying to figure out why your standards compliant pages are breaking in IE. It's not perfect but it's a worthy addition to your dev toolbox.

Download the Internet Explorer Developer Toolbar

Permalink | Posted On November 8, 2007 Comments (0) | TrackBacks (0)

In the last month or so I’ve dealt with a PC with a fried motherboard, a SNAFU that prompted me to switch hosting companies and rebuild the blog, and a corporate IT department which permanently erased an entire SourceSafe database. So I thought I’d write a quick post about the importance of backups.

If you work in any kind of corporate environment you no doubt store your files on some sort of network drive or server which gets backed up onto tape every night. But what about your home computer? Or what if you run a home-based business?

Having backups of your files, and your client’s files, is paramount when running any kind of web business and it’s also important for your personal photos, documents, MP3s, etc, etc. Should anything go wrong, you’ll want to get things back up and running as soon as possible.

CDs and DVDs are a huge hassle. External hard drives are great as long as your office doesn’t burn down. An automatic, inexpensive solution that stores your files online for easy retrieval is the ideal solution. That’s where Mozy comes in.

Mozy is a service that takes your important data and backs it up for you automatically to an online location. It runs in the background and will continually ensure that your most recent data is stored securely online in the event of a problem. Restoring files from these online backups is a snap via an easy to use web interface.

Mozy provides both consumer and business solutions for just a couple dollars a month; a small price to pay for the piece of mind of knowing your data is safe.

Check out Mozy for your personal files and Mozy Pro for your business.

Permalink | Posted On November 3, 2007 Comments (0) | TrackBacks (0)