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

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 w3fools.com:

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

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

: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

28 March, 2011 § Leave a comment

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.

JavaScript Injection proof of concept

26 February, 2011 § Leave a comment

Following up from my previous post about XSS Session Hijacking in Google Gruyere, I decided to write a post covering a JavaScript injection vulnerability.

The color attribute on profiles lack input validation, and thus are susceptible to JavaScript injection. Simply put, this means that a user can edit their profile and insert code that will run on the computers of other users.

Some of the possible uses of this attack would be to:

  • Spam the user with advertisements
  • Increase visits to another website
  • Spread malware

In this proof of concept, I used the following as the “color” setting for my profile:

red' onmouseout='window.open("http://www.msu.edu/~weinjare/ad.html", "", "height=220,width=450");return false;

The JavaScript for the onmouseout event handler will launch a new popup window that could include spam. This code will be executed if the visitor moves their mouse over my username.

I’ll try to explain the source code above. The HTML that is generated for the page uses single quote characters to specify attributes. Adding a single quote to the setting, appearing after the word “red”, allows arbitrary HTML to be injected within the page. The following code is treated as another attribute for the element, adding an event handler for when a mouse moves on to the element and then leaves the element.

The value of the attribute starts with a single quote and lacks an ending quote. This is because the generation of the HTML will append a single quote to the value. This will allow the generated HTML to remain valid.

To show this in action, I created the following video:

Where Am I?

You are currently browsing entries tagged with javascript at JAWS.

Follow

Get every new post delivered to your Inbox.

Join 998 other followers