News roundup: Twitter onscroll performance, Ace editor, CSSOM, Modernizr 2.0 beta

Twitter, onscroll, and performance

You may have noticed Twitter slowing to a crawl earlier this week while trying to scroll down the page. The issue appears to be caused by upgrading to jQuery 1.4.4, as developer Dustin Diaz states on his blog.

John Resig responded with an explanation of the changes in jQuery. In particular, he explains that while most other functions are already using the native querySelectorAll, jQuery 1.4.3 brought another function .find(’.class’) up to speed by having it default to querySelectorAll. According to tests, there was a slight performance hit but it was negligible, and shouldn’t have brought any applications any noticeable slowdown. So what’s the deal with what happened on Twitter?

Resig points out that Twitter suffered badly as a result of two bad practices: 1) attaching an event handler on the window’s scroll event and 2) not caching the DOM queries. As it turns out, Twitter was re-querying the DOM EVERY time the scroll event fired. It’s amazing how this same mistake is made over and over, even in professional development. Hitting the DOM is expensive! Cache your selectors!

Mozilla Skywriter (Bespin) merged into Ace

Mozilla has announced that Skywriter (formerly known as Bespin) has been merged with Cloud9 Editor.

You can see a live demo here, which is quite impressive. I remember first trying Bespin and finding it impressive, but it’s really been polished. It probably also has something to do with the speed of the browser getting faster. In any case, if TextMate is your favorite editor, you’ll find it hard to distinguish between this and the real thing!

The project’s homepage is now and its Twitter feed is @cloud9_editor. If you were following @MozSkywriter before, you’ll find that you’re now following @cloud9_editor!

CSSOM, variables, and mixins

The CSSOM is a bit of new lingo for changes being introduced to CSS and JavaScript by the Chrome team. The CSSOM is said to be the interface between CSS and JavaScript. You probably know that manipulating CSS in JavaScript isn’t too pretty and can definitely be improved, and as such the Chrome team is sidestepping standards bodies (and their squabbles) a bit and testing out some new syntax.

They’re also implementing variables in CSS, definitely a controversial move, but one that definitely helps folks who maintain any CSS. An example of a reusable color variable might look something like the following:

@var header-color color #06c;
h1 {
color: var(header-color);

These slides also cover some more things we can expect to see, such as CSS mixins which promote reusable code, and which were pioneered by CSS preprocessors such as LESS.

Modernizr 2.0 beta

Modernizr 2.0 beta has been released. The team is now joined by Alex Sexton.

The biggest noticeable change is the ability to custom-tailor the download to suit your needs (very reminiscent of YUI3’s Configurator). Say you don’t care about detecting Touch events or any other features. No problem, just uncheck it and click the “Generate It!” button to get your custom download.


Node 0.3.5
RightJS 2.2.0

Upcoming Events

Paul Irish on HTML5 Boilerplate (January 27, 2011 in San Francisco, CA)
Day of JavaScript on Mobile (January 27, 2011 in Mountain View, CA)
Mozilla/P2PU School of Webcraft (starts January 26, 2011 online)
JS Boot Camp (February 10-11, 2011 in Reston, Virginia, US)
High-Performance Mobile (SF Web Performance Group) (February 16, 2011 in San Francisco, CA) – a talk given by yours truly
Confoo.CA: Web Techno Conference (March 9-11, 2011 in Montreal, Canada)
MobileCampRDU (March 12, 2011 in Durham, North Carolina)
JSConf 2011 (May 2-3, 2011 in Portland, Oregon, US)
NodeConf 2011 (May 5, 2011 in Portland, Oregon, US)
jsday (May 12-14, 2011 in Italy)
Mobilism (May 12-13, 2011 in Amsterdam)
TXJS (June 11, 2011 in Texas)


HTML5 has a logo: you’ve probably heard about this by now…
What the Heck is Shadow DOM? is a look at parts of the DOM only accessible by the browser itself, but sometimes styleable. Case example is input type=”range”
ecmazing JavaScript blogs – a list of JavaScript bloggers
The JavaScript arguments object…and beyond is a look at the array-like arguments object, its quirkiness and its possible future
Video: 11 More Things I Learned from the jQuery Source by Paul Irish is a followup to his previous video 10 Things I Learned from the jQuery Source
The M Project is a new HTML5 JavaScript framework for mobile devices (using jQuery Mobile)
martial is a visual map that plots visitors’ ip addresses on a world map (live demo)
Harmony Of My Dreams – Brendan Eich spells out some of the future of JavaScript
Building Reusable Widgets with YUI 3 – Ryan Grove has written a great guide on creating your own YUI3 widgets
Audio: Inspecting node_pcap (node.minutewith) – a detailed look into the JavaScript packet analyzer.
iPad View Source Bookmarklet
Audio: Tim Caswell on Node.js – Node.js community leader explains it and what it has to offer
Audio: The Undetectables with Paul Irish (SitePoint Podcast #95) – chatting about features you can and can’t detect
Firefox 4 Beta 9 – a huge pile of awesome – Christopher Blizzard lays out the details on all the improvements in this iteration, performance included. Hardware acceleration! Woohoo!
When is Mobile Safari not Mobile Safari? – Jason Grigsby explains why the Mobile Safari user agent appears to be inconsistent during the course of a user session

Share and Enjoy:
  • Digg
  • Facebook
  • Google
  • description
  • Reddit
  • TwitThis
  • Simpy
  • StumbleUpon

Leave a Reply

© webdevpublishing 2011