Assorted JavaScript notes

Lately, I’ve been using Zurb’s Foundation framework quite a lot in my web projects.

The app.js file starts with these to lines of code that, while I think of myself as proficient in the language, were a little mistery to me:

;(function ($, window, undefined) {  
  'use strict';

Why should someone start a file with a semi-colon and WTF is use strict?

Turns out the solution is pretty simple.

The semi-colon is just a precaution in case that file is included just after another script that has not its semi-colons in right: in that case that case the contents of the parentheses could become kind of an argument for something in the other script.

The "use strict"; is a feature of ECMAScript 5, that should help in writing better javascript throwing more exceptions and preventing the use of some deprecated or dangerous constructs (with(){} or eval() anyone?). For a lot more info there is this 2009 piece from the always excellent John Resig himself. And yes, I do realize I’m late in the game.

Scrolling blues

On a recent project I decided that while reading and scrolling through an article the reader would have been pleased by the constant presence of an index of the chapters of the artcile itself and some other additional information useful to have on screen at all time. Couple this with a big all-width footer at the end of the page and the problems began.

What if the index is longer than the window? What if the chapter is too short? What when the footer comes in view and covers (or is covered) by the fixed-position index)

scrollMonitor to the rescue: this small module allows to add watchers to objects on the page that triggers events when the object enters or exits the page. The performance seems good.

I’m already rewriting my project using this library.

JavaScript’s full of surprises

And finally, I enjoyed watching this JavaScript APIs you’ve never heard of (and some you have) screencast by Nicholas Zakas.

Lots of information there; I’ve found very interesting elementFromPoint() and matchMedia(), I’ll find a way to use them in one of my next projects.