Learning DOM Scripting

Around Christmas I purchased Jeremy Keith’s new book DOM Scripting: Web Design with JavaScript and the Document Object Model. It has been amazingly good so far (I am on the sixth chapter). I have already found practical uses for the lessons in the book.

Jeremy nails the topic down with clear principles, examples that are easy to follow, and a fun but authoritative tone to his writing. I highly recommend this book to all web designers and developers.

If you’ve been doing JavaScript and client-side scripting for a while, you will learn new ways to make your code degrade gracefully and how to separate the scripts from your CSS and HTML code. If you are new to JavaScript, even better! This book will teach you the basics while giving you a solid education in unobtrusive scripting.

My experience is somewhere in between. I’ve been using JavaScript for some time, but I’ve never understood it very well. Until reading this book, I had also never written any scripts from scratch. Now that I see how easy it is to manipulate a document with the DOM, I will incorporate unobtrusive JavaScript into my daily workflow.

Tips and tricks

These are some of the lessons I have noted:

  1. When considering JS for a project, or when writing scripts, a cautious, questioning attitude is desirable
  2. A good practice: use double quotes in your JavaScript code, and use the (back slash) for escaping characters within a string
  3. Some naming conventions: camelCase for functions, under_score for variable names
  4. Good practice: use var when assigning a value to a variable for the first time, especially within a function. This forces it to be local in scope
  5. Reminder for when manipulating the DOM: All nodes are objects
  6. For conditional statements, if (something != null) can also just be if (something) to shorten the statement
  7. The methods getAttribute and setAttribute only work on element nodes
  8. Here are some useful methods used on the document object:
    • getElementById
    • getElementsByTagName
    • getAttribute
    • setAttribute
    • childNodes
    • firstChild
    • lastChild
  9. Instead of browser sniffing, use object detection: if (!document.getElementsByTagName) return false;
  10. Use safety checks to add object detection in functions to help separate code from markup. If id or class names change, the JavaScript won’t get called. It’s important to have these tests and checks both for backwards compatibility and for future use.

Some bad uses of JavaScript

Also, some of the wrong habits that I need to change:

  1. Using javascript: pseudo-protocol to send links to a new window (for example)
  2. Using inline event handlers
  3. Relying on document.write and innerHTML for modifying markup
  4. Avoid onkeypress if possible, since onclick works with both mouse AND keyboard!

Personal JavaScript Updates

Just as learning semantic markup for HTML documents and lean, clean CSS for style sheet use, there are now a lot of bad uses of JavaScript coming to my attention on sites that I own or operate. For one, I need to get all JavaScript out of the body element of my web pages. Next, inline event handlers need to be moved to the JavaScript file instead of being in the HTML.

Another example: I often use JavaScript to obfuscate email addresses and form action paths. Doing it in this way might not be unobtrusive (it doesn’t degrade nicely) unless I can figure out a way to return a statement of [at] type if JavaScript is not supported. This is worth pursuing more…Of course, there are always server-side solutions but I don’t always have access to the server on client projects.

Worth it’s Weight

I am only 6 chapters into DOM Scripting: Web Design with JavaScript and the Document Object Model, but it has already paid for itself. By the end of the book, it will be worth it’s weight in gold. Thanks Jeremy and hopefully others will find similar lessons in their own web work.

Visit the book’s companion web site and purchase the book on Amazon.com.

Search Engine Rankings for Your Site

If you own or operate a web site it’s likely that you are concerned about your search engine rankings. I have received enough questions from clients about rankings that I realize some of you really care about how high your site ranks. Here are some resources to help you.

The Basics

If you have been relying on others for your site’s SEO, don’t worry! The basic techniques are not hard to understand. The maxim for basic SEO is:

Add quality content regularly and make sure your site is well-built.

That quote is from Roger Johansson’s great article, Basics of search engine optimisation. As Roger says, good content is very important. Frankly, if you don’t have compelling content, you shouldn’t even have a site in the first place, right? So work hard on your site’s content and you will be well on your way.

The well-built part, well, that is slightly more complicated. It involves using web standards such as XHTML and CSS correctly to ensure that your site is visible and attractive to both human and search engine robot visitors. Good use of these technologies not only helps your site do better in search engine rankings, but makes it easier to maintain that all-important content.

Read Roger’s Basics article article if you would like a more in-depth analysis with examples.

Ethical SEO

Some clients have asked: Do I need to hire someone to perform SEO for my site? One reason to do your own SEO is to avoid bad situations where you pay lots of money to “optimize” your site and actually lose visitors in the aftermath. Beware of so-called “SEO consultants” even if they claim to use ethical methods. For a fascinating horror story, read Chris Heilmann’s article Ethical search engine optimisation my foot!

Deceptive SEO methods might make your site perform worse or even get you banned from search engines. Forty Media’s James Archer posted a great treatise on his blog Return of Design.

James broke SEO techniques into three categories: search engine optimization, search engine exaggeration, and search engine deception. If you read his article, it will reinforce in your mind that basic SEO is enough to make your site successful, as long as you put work into the content and making sure the site is well-built.

Accessible and Searchable

As a bonus, read High Accessibility Is Effective Search Engine Optimization to find out how improving your site’s search engine rankings correctly can also increase your site’s accessibility.

SEO and You

You can do it! Don’t take shortcuts, build and maintain your site lovingly, and keep the content fresh and attractive. That’s the start to getting the optimal search engine ranking.

Dreamhost Just Got Better

My favorite hosting company, Dreamhost, just got better! Besides the high-quality and low cost of their services, they just enabled support for two features that makes the deal even sweeter. While you could use these third-party services before today, it was a nightmare to set up and manage them. Dreamhost has gracefully changed that for all of us by providing management and setup right through their web-based control panel.

  1. Jabber IM support is now (officially) enabled! In Dreamhost’s nice array of goodies, this was one that was lacking. It was hard to set up and not fully supported. Now, if you have an account with them, you can set up your own chat users and run your IM through your Dreamhost account server. Very useful because you don’t have to rely on mainstream IM services like AIM, Yahoo, or MSN anymore and can also add security and other features.
  2. Subversion support! Dreamhost has been lacking in this regard, so this is great news for any web developer. I’ve managed a few projects with SVN on Dreamhost before, but couldn’t quite get it right due to lack of good documentation and poor control of the SVN repository and users. Now Dreamhost allows you to manage your SVN projects right through their administrative panel! It seems to be very simple to use and easy to get going on a new project.

The announcement of these two services simply made my day! Even just one out of two would have been great; both of them at the same time is almost too much fun…

If you haven’t checked out Dreamhost, take a look to see what they have to offer. The basic plan comes in at $7.95/month, and it’s all you’ll ever need unless you are hosting lots of client sites or have extremely high bandwidth needs.

Yay Dreamhost!