Firefox-team January reading group: Effective JavaScript

About a month ago Margaret Leibovic had the idea to start a Firefox team reading group.

The idea is that every month we choose one book (or a set of articles/essays) to read, then get together to discuss it (while eating and/or drinking).
Topics include programming, engineering, design, etc. Basically anything that makes us better software developers.

For the month of January we settled on Effective JavaScript, written by Mozilla’s very own Dave Herman.

We’re planning on discussing the book on Friday, 25 January at 12pm PST.

Discussion points:

• Are there any points in the book that you strongly agree (or disagree) with?
• Was there anything that surprised you?
• Do you have any examples of times when you’ve used these strategies?
• Do you have any examples of bugs you’ve seen because these strategies weren’t used?
• What’s your new favorite JavaScript feature?

Anybody is welcome to join along and read the book with us. If someone wants to join the meeting discussion and doesn’t have access to our Vidyo video-conferencing software, send me a note and I’ll try my best to get you included in the discussion.

Unnecessary Regular Expressions

Regular expressions are powerful. They are the jackhammer for all chiseling purposes. In some situations they work great, but often they are either overkill or computationally unreasonable.

Regular expressions introduce a state-machine that is hard to optimize for each case.

Here are a couple regular expressions that I’ve seen within code that was replaced with easier-to-read and faster code.

s.replace(/[^.]*/g, “”).length

This regular expression removes all non-period characters in a string. It then queries for the length of the new string. This effectively just gets the number of periods in the string.

A much simpler approach, and also faster, would be to walk through the string and just count each instance of the period character.

var i, l = s.length, count = 0;
for (i = 0; i < l; i++) {
  if (s[i] == '.')
    count++;
}

s.replace(/\s+$/, “”)

This regular expression removes all whitespace at the end of the string. A much simpler approach would be to use the trim() function. There also exists non-standard functions trimRight() and trimLeft() that can be used to only remove whitespace from a specified side of the string.

Testing it out

If you’d like to see the performance differences for yourself, you can run the character counting and string trimming benchmarks on JSPerf.

JavaScript: The Good Parts presentation

Last week I gave a presentation at Michigan State University to a group of students who have a passion for web development. Many of them are experienced with HTML and CSS, but are just getting introduced to JavaScript.

This talk covers some of Douglas Crockford’s “JavaScript: The Good Parts” book.

Douglas has also posted his slidedeck online if you would like some more information. I removed some of his slides from my talk due to its introductory nature.

One of the students in the audience asked for more resources about JavaScript. During the presentation I recommended W3Schools, but after further thinking I realized there are just too many poor recommendations and incorrect statements on W3Schools website. I found a good list of places to grab resources from on w3fools.com:

I wanted to follow up with resource that your members can get more information. This list is from w3fools.com:

• HTML Dog is a fantastic and comprehensive intro for HTML and CSS.
• Opera Web Standards Curriculum covers the basics of web standards-based design in HTML and CSS.
• Google’s HTML, CSS, and Javascript from the Ground Up presents the basics of web development with video tutorials presented by Google’s expert web developers.
• SitePoint is a pretty good reference for HTML, CSS and JavaScript. Their documentation always mentions feature support across different browsers, and describes known browser bugs.
• The W3C, itself, has a wiki-based general Learn page as well as an HTML element reference.
• The MDC (Mozilla’s Doc Center) takes over at intermediate CSS and covers JavaScript better than anyone.

Uncovering hidden features of Campfire

Tonight I spent some time with one of my coworkers, Eric, who is working on a Campfire extension for Google Chrome.

While perusing through the JavaScript of 37Signal’s Campfire, Eric came across a couple of undocumented features: Emoji, and the complete list of sounds.

To place an Emoji in a message, simply surround one of the following with colons, like

:sunny:

Here is the complete list of Emojis that you can use:

Emoji: [ 'sunny', 'zap', 'leaves', 'lipstick', 'cop', 'wheelchair', 'fish',
'hammer', 'moneybag', 'calling', 'memo', 'mega', 'gift', 'pencil', 'scissors',
'feet', 'runner', 'heart', 'smoking', 'warning', 'ok', 'tm', 'vs', 'new', 'bulb', 'zzz',
'sparkles', 'star', 'mag', 'lock', 'email', 'fist', 'v', 'punch', '+1', 'clap', '-1' ]

Now for the sounds. To use these, type /play followed by one of the sound names:

It’s always fun digging through JavaScript and finding unpublished features. Our software team regularly uses Campfire for discussions, so the more expressive we can be the better. Does your team use a chat room like Campfire or IRC to communicate?

JavaScript at MSU

This coming Thursday I’ll be giving a talk at the monthly MSU Student Web Authoring Team meeting.

A JavaScript Workshop
Thursday, March 31st
317 Bessey Hall, Michigan State University
7:00pm

I’ll be covering the JavaScript language and its interactions with the DOM from a beginners to intermediate perspective. This will be a hands-on workshop style with a short presentation at the beginning.

Bring your laptop and a good spirit and hopefully you’ll walk away with some new knowledge and appreciation for JavaScript.

I will try to record the presentation portion and make that available here on my blog for those that are unable to attend.

Updated on 4/4/2011: I have uploaded a video of the presentation for your viewing pleasure.