Book Review: High Performance JavaScript

by Rob Larsen

I read High Performance JavaScript when it came out. It took me a while to write this review.

I’ve been busy (day job x spending a lot of time outside because it’s summer = less time for writing)

Anyway, it’s really good. It’s short, but well-written and focused so it’s an easy book to dive into, digest and integrate into your day-to-day.

One of the things I liked about it is that the topics cover enough ground that even as an experienced/expert developer you can learn some things that you’ve probably never run into in a production environment. Maybe you haven’t dealt with a lot of heavy-duty string manipulation and regular expressions or possibly you haven’t done a ton with build systems. They’re covered here, by experts. You might not be an expert after reading it, but you’ll definitely have enough to go on to start working in some solid enhancements into your own code.

All in all, this is a recommended book for all intermediate to expert JavaScript developers. It will get you thinking about your own code, about convenience and about JavaScript performance in a very fundamental way. That’s good for you, for your users and for the web as a whole.

Performance Tip: When Linking to JavaScript on the Google Ajax Library CDN, Use a Specific Version Number

by Rob Larsen

I’ve seen this a few times over the past few months:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

What that basically says to Google is “give me the latest 1.* branch version of jQuery and make sure it’s minified.”
Read the rest of this entry »

How To Make a Web Site the Modern Way. Part 10: Forms

by Rob Larsen

Forms. Forms are boring. 75% of all work you do with forms is exactly like all the rest of the work you do with forms. BO-RING.

But, they’re the gateway to making real money on the web, so they’re kind of important.

Hopefully, after today you’ll know all about forms and will love them.

Let’s take a look at our example form:


<form action="http://www.drunkenfist.com/304/wp-comments-post.php" method="post" id="commentform">
  <fieldset>
    <legend>Contact Info:</legend>
    <p>
      <label for="author">Name (required)</label>
      <input type="text" name="author" id="author" value="" tabindex="1" />
    </p>
    <p>
      <label for="email">Mail (will not be published)(required)</label>
      <input type="email" name="email" id="email" value="" tabindex="2" />
    </p>
    <p>
      <label for="url">Website</label>
      <input type="url" name="url" id="url" value="" tabindex="3" />
    </p>
  </fieldset>
  <p>
    <label for="comment">Comments</label>
    <textarea name="comment" tabindex="4"></textarea>
  </p>
  <div class="button">
    <input name="submit" type="submit" id="submit" tabindex="5" value="Submit" />
  </div>
</form>

This sample is based on the default WordPress theme. It’s maybe not as complicated as a sign-up form, but it does show the basics. On to it then.
Read the rest of this entry »

How To Make a Web Site the Modern Way. Part 0: Introduction

by Rob Larsen

Well, I leaked it earlier this week, so I might as well get started.

Welcome to How to Make a Web Site the Modern Way, a blog series outlining, to the best of my ability. how to build an HTML page using today’s best practices. The focus won’t be on specific coding techniques, although there will be some of that, it will be on how the pieces fit together. Without experience, it’s tough to know how the pieces of a web page fit together in the best way. I’ve got some of that experience and I’d like to share it with people. So at the end of all of this, I’m hoping this series will serve as a one stop shop for people looking to understand the big picture.

First up: The Anatomy of an HTML Page .

Some basic principles:

  • Fast: I want pages to be as fast as possible by default.
  • Findable: This isn’t really the same as SEO, but it’s kind of like a cousin to it. I want to make pages spiderable, human scannable, computer readable and generally information rich.
  • Standards compliant: I’m not a standards zealot, but I try my best to follow web standards wherever possible.
  • Accessible: I try to make pages as accessible as possible.
  • Usable: Usability is a deep topic, but there are things you can do, by default that will enhance the usability of your site.
  • Intuitive: I want developers to look at the stuff I do and say “hey, that makes sense.” I also want it to make sense to me when I return to it in six months :)
  • Breakable: Which is a funny way of saying “graceful degradation,” a concept that colors a lot of what I try to do. The idea being- if something’s going to break, or not work as expected, make sure that it’s not totally screwed up

The Rest of the Series

Sample HTML Markup Used To Style Common Text Elements

by Rob Larsen

The following is what we use to lay down the most common text styles. This is honestly more than we usually need, but it helps ensure we don’t miss anything when real content is flowed into a design. I thought it might be useful for folks to use in their own projects.

I’ve got a live version here on the site.
Read the rest of this entry »

Thirteen Web Development Tools I Can’t Live Without

by Rob Larsen

I got a new machine at work yesterday and in the process of building the thing out and getting it ready to actually work with, I came up with a list of the tools and utilities I use on a regular basis. Not the big stuff (Dreamweaver, Fireworks, Photoshop, etc.) The stuff that fills in the cracks that the big tools don’t cover. Thinking such a list might be useful for other folks, I added a couple of online services that I can’t live without and am now sharing the highlights of the list with the world.

Read the rest of this entry »

JavaScript Perfromance Tip- Don’t Test Against obj.length. Test Against a Local Variable.

by Rob Larsen

I saw it yesterday in some code I was debugging and I realized I’ve become hyper sensitive to this common pattern:

var anchors = document.getElementsByTagName('a');
if (anchors.length > 0){
    for (var i=0; i < anchors.length; i++) {
        addEvent( anchors[i], 'click',  trackLinks );
    };
};

Why am I sensitive to it? Well, what are some of the things we know about JavaScript performance?
Read the rest of this entry »