Determining when an element is scrollable in Gecko

16 October, 2013 § 1 Comment

As a web developer, there are often times where it’s necessary to know if an element on a page is scrollable. One way of checking this would be to find the difference of element.scrollWidth and element.clientWidth. If the difference between these two properties is non-zero, then the element is scrollable. However, this doesn’t work for all cases.

In particular, element.scrollWidth and element.clientWidth clamp their values to integers. If the difference between the scrollWidth and clientWidth is less than zero, then the computed difference between the two will result in zero. This is less than good.

Starting in Firefox 16 [1], there is a new property element.scrollLeftMax which returns the difference of scrollWidth and clientWidth, including the fractional component. Also introduced is the companion element.scrollTopMax for use in determining vertical scrolling availability.

Hopefully these properties will find their way in to the other layout engines.

[1] These properties were implemented in bug 766937.

Firefox-team January reading group: Effective JavaScript

27 December, 2012 § Leave a comment

Effective JSAbout 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

18 September, 2012 § 13 Comments

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] == '.')

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

4 April, 2011 § 1 Comment

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

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

Uncovering hidden features of Campfire

29 March, 2011 § 8 Comments

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


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?

Where Am I?

You are currently browsing entries tagged with javascript at JAWS.


Get every new post delivered to your Inbox.

Join 99 other followers