Planet JavaScript News

the unofficial alterslash-style digest

The Shadow DOM Is Now Enabled By Default

Atom News Monday January 05, 2015 @ 00:00 • over a year ago

After a successful trial period, the shadow DOM is now enabled by default to prevent style pollution in Atom's text editor component starting in today's release, 0.166.0. Check out the introductory blog post for more details.

If you're targeting the text editor's content with a selector that descends from atom-text-editor or .editor in your user style sheet or in a theme, you should use the ::shadow expression to puncture the shadow boundary as follows:

/* before */
atom-text-editor .gfm.markup.heading {
  font-weight: bold;

/* after */
atom-text-editor::shadow .gfm.markup.heading {
  font-weight: bold;

If you experience problems, please open an issue on the relevant package or Atom core. You can temporarily disable the shadow DOM in the settings view, but this option will be removed prior to Atom 1.0.


npm's year in numbers: 2014

npm News Wednesday December 31, 2014 @ 22:55 • over a year ago

A small part of my job at npm is to keep track of various performance metrics. This helps make sure our systems are working and aren’t hiding any slow-growing performance problems, that we are appropriately planning for future growth, and that our business goals as a company are based on reality. Also, I like making spreadsheets.

With that in mind, here’s a collection of numbers, some of which I actively track and some I just decided to look at, and how they’ve changed from January 1 to December 31, 2014:

Number of full-time employees:

Jan 1: 0
Dec 31: 11
Growth rate: infinity! If we keep this up by this time next year everyone in the universe will be an npm employee.

Number of packages in the registry:

Jan 1: 53,459 (estimate)
Dec 31: 115,194
Growth rate: 2.1x.

Total downloads, previous 30 days:

Jan 1: 149,822,000 (estimate)
Dec 31: 648,620,794
Growth rate: 4.3x, and our true growth is actually a little higher because the last week has been really quiet because of end-of-year holidays.

Number of mascots:

Jan 1: 0
Dec 31: 1

It’s a long story, but we’ve acquired a wombat and we like him. Thanks, Jon!

npm wombat

Average weekday downloads (approximate)

Jan 1: 6,024,000
Dec 31: 25,000,000

Average weekend downloads (approximate):

Jan 1: 3,000,000
Dec 31: 12,000,000

We list these separately because it still comes as a surprise to many people that Node.js is more popular during the week than on the weekend. People use npm to do grown-up stuff!

Why did downloads grow twice as fast as the number of packages? Because there are more people using them. How many exactly is quite tricky. Here are some ways we can try measuring:

Registered developers:

Jan 1: 21,000 (very rough estimate)
Dec 31: 83,317
Growth rate: 4x. Right now, the only people who usually bother to register are people who are publishing packages.

Weekly unique visitors to the npm website:

January 18 (first day we have data): 113,000
Dec 20 (last week before holidays): 264,000
Growth rate: 2.3x

Total unique users on npm website in 2014:


Total pageviews in 2014:


The top 10 countries using npm:

  1. USA
  2. UK
  3. India
  4. Germany
  5. France
  6. Canada
  7. China*
  8. Russia
  9. Japan
  10. Brazil

(* Chinese npm users run a lot of mirrors and translated sites, so actual usage of npm in China is probably higher)

How about the npm software itself?

Total commits to all npm repos:

2013: 919
2014: 3360
Growth rate: 3.6x

Some stats we don’t have over time, but will if we do this post next year:

Unique IPs hitting the registry, last 7 days:

1,402,000 (estimate)

Unique website users, last 90 days:


Total repos:


Open issues:


Closed issues:


All of which is to say: it was a very good year, and it’s all thanks to lovely users like you turning up every day and using our software and our services, and we’re really happy you did. Happy 2015!

npm Enterprise with GitHub 2FA

npm News Tuesday December 30, 2014 @ 00:47 • over a year ago

If you have two-factor auth enabled on your GitHub account npm login will fail with a 401 error. To make authorization work in this situation, you must manually generate an access token for Github.

Follow these steps:

  1. Go to

  2. Click on Generate new token.

  3. Give the token an appropriate name, e.g., npm enterprise

  4. The default permissions are fine.

  5. Copy the token generated somewhere safe. Github will not show it to you again.

Now that we’ve generated an auth token, we need to store it in our ~/.npmrc. Ordinarily you’d run npm login to get an auth token from the npm service and store it in ~/.npmrc, but in this case we’ll be using the one we just generated instead.

Edit ~/.npmrc and add the following lines:

@mycompany:registry= //

For @mycompany, use the namespace you’ll be using for your private modules. For example, if your private modules are named @foo/bar, your namespace is @foo.

Change the url to be the address of your private npmE registry.

Lastly, copied-auth-token should be the token you just generated on Github.

You are now ready to publish a module to test your token!

  1. Create a package starting with this sample package.json.
  2. Edit the package.json to change the respository field to one you have write access for on GitHub.
  3. Change @npm to the same namespace you used in your npmrc earlier.
  4. Type npm publish.

This should get you up and running with GitHub 2FA and npm Enterprise. If you have any issues getting this to work, email

2014: Mozilla Hacks looks back

Mozilla Hacks Monday December 29, 2014 @ 15:00 • over a year ago

Wherever you live, it’s a season of work holidays, school vacations, year-end blog posts, and lists. The Hacks blog will be back in early January 2015 to continue writing for developers about the products and technologies created by Mozilla and by builders of the Open Web around the world.

In the (chronological) list below, we celebrate some 2014 milestones and memorable moments for Mozilla, Firefox, and the web platform:

  • The new improved Firefox Sync launched early in 2014, built atop Firefox Accounts. Here’s a deeper look at the new Sync protocol.
  • Mozilla worked with the Apache Cordova team to integrate Firefox OS with Cordova’s open source device APIs, enabling mobile app developers to access native device functions from JavaScript, and release Cordova apps for the Firefox OS platform. Cordova is the underlying software in Adobe PhoneGap: the integration made it possible for PhoneGap developers to easily port their apps to the Firefox Marketplace.
  • Mozilla Research made great progress on Servo, a prototype browser engine. Servo is written in Rust, a systems programming language designed to support concurrency and parallelism for modern hardware. Another Big Milestone for Servo—Acid2 was reported in the spring.
  • Australis was the codename for our major redesign of the Firefox Desktop browser, which launched in late April. Designer Stephen Horlander wrote a post about the process, titled (Re)Designing Firefox.
  • The summer release of Firefox 31 brought new capabilities for game developers, including access to emscripten for compiling to JavaScript. In Resources for HTML5 game developers, we described some of the tools and techniques for coding and debugging sophisticated, performant HTML5 games. On the Mozilla blog, we featured the first commercial games to leverage asm.js, demonstrating the readiness of HTML5 as a game platform.
  • In October, we shared a Preview of Firefox Hello, a WebRTC-powered voice/video chat service.
  • As part of the festivities surrounding Firefox’s 10th birthday, Mozilla Research launched MozVR to help bring virtual reality to the Web. Grab your oculi and hold on to your hats.
  • At the same time, the Firefox Developer Tools team released Firefox Developer Edition, the first browser created specifically for developers. Though still in its early days, the Developer Edition features Valence, an integrated add-on to let you develop and debug your app across multiple browsers and devices, as well as WebIDE, providing an editing environment for app development and remote debugging.
  • The evolution of asm.js continued with the release of Massive, an open source benchmarking tool that measures asm.js performance specifically. You can run Massive here.
  • Mozilla and partners announced the formation of the Internet Security Research Group (ISRG) and launched the Let’s Encrypt initiative. Let’s Encrypt is a new Certificate Authority that’s free, automated, and open. It’s due to arrive in summer 2015.
  • Our friends at Telenor introduced Gonzo, an ongoing project which explores the use of Firefox OS as an embedded platform. Telenor engineer and Firefox OS evangelist Jan Jongboom is hacking together a wireless camera and sharing what he learns along the way.
  • Firefox OS Expands to Nearly 30 Countries – It’s been an expansive year. At last count, Firefox OS is now up and running on 16 smartphones offered in 29 countries. And in December news, Mozilla and KDDI announced the release of Japan’s first Firefox OS smartphone, which went on sale on December 25. The Fx0 is the first high-spec Firefox OS smartphone and it’s a beauty!

If you’re interested in writing for the Hacks blog in 2015, we’d love to hear from you. Email us. In the meantime, have a safe and hacky holiday!

Node v0.10.35 (Stable)

Node.js Blog Wednesday December 24, 2014 @ 01:30 • over a year ago

2014.12.22, Version 0.10.35 (Stable)

  • tls: re-add 1024-bit SSL certs removed by f9456a2 (Chris Dickinson)

  • timers: don't close interval timers when unrefd (Julien Gilli)

  • timers: don't mutate unref list while iterating it (Julien Gilli)

Source Code:

Macintosh Installer (Universal):

Windows Installer:

Windows x64 Installer:

Windows x64 Files:

Linux 32-bit Binary:

Linux 64-bit Binary:

Solaris 32-bit Binary:

Solaris 64-bit Binary:

Other release files:




Hash: SHA1

98f61cb09685ed45f2db6e0fc5ccbdd273204091  node-v0.10.35-darwin-x64.tar.gz
8616029e0bb79dea1a974f97e42399fe24d3f4d7  node-v0.10.35-darwin-x86.tar.gz
3a202a749492e48542d2c28220e43ef6dae084bc  node-v0.10.35-linux-x64.tar.gz
c71823a584aa4cc778d73ff4ea89ed2b6f0ac250  node-v0.10.35-linux-x86.tar.gz
56f2837da0cf1a302e7b3e6da770fba875a13a62  node-v0.10.35-sunos-x64.tar.gz
d5713e3933a4ddfd9573a5326a2a5043fb50184f  node-v0.10.35-sunos-x86.tar.gz
fca0fcf21a0dcd4ae02b319804a99e3cfeb83ee3  node-v0.10.35-x86.msi
3781eae7bcbf55d87b528b3a0b3c9524f94e66a4  node-v0.10.35.pkg
bcad4ebf56516676f93b28377f03d3b3ea52795c  node-v0.10.35.tar.gz
16a363d39f08fa5119f3ca82dcd08a6d67110bcb  node.exe
43197d7d92e9a6eead6060288173941041dac9a4  node.exp
c0cc751dcc915234b15cfc210cdd459b78148435  node.lib
9ff7f9e7959c196a97cc53400d86602da7f5a74d  node.pdb
bfc708da1114ac539cd43738145d8cc1f5e39f6f  openssl-cli.exe
f54d55939d9493f934dc36baa169429df8fb47f4  openssl-cli.pdb
c95e8041b5b16488eb2522fa072061690f6ef0cb  x64/node-v0.10.35-x64.msi
7f31dd9c636e658f7386e8f8b2ef3be885158c55  x64/node.exe
6df8b6b95024e5f0bd7f39cd5a83341ae227e8aa  x64/node.exp
82fa5ea193f4aac3267b58c8c5f581952ae46fea  x64/node.lib
e6e4df82798d36343f0f0e872a36d15172e86f70  x64/node.pdb
ae6917172865a8fa3ddfdf3bc93a863043742fa9  x64/openssl-cli.exe
b9bb9409cbf63c20b2c2e7db9f5f323cfd400771  x64/openssl-cli.pdb
Version: GnuPG/MacGPG2 v2.0.22 (Darwin)
Comment: GPGTools -


You can’t go wrong watching JavaScript talks

Mozilla Hacks Monday December 22, 2014 @ 20:09 • over a year ago

Late last week, I was collecting suggestions for year-end Hacks blog posts. As she headed out for the winter holidays, apps engineer Soledad Penadés gifted me “a bunch of cool talks I watched this year.”

In fact, it’s a curated collection of presentations from JSConf, JSConf EU, and other recent developer conferences. Presenters include notable Mozillians and opinionated friends: hackers, JavaScripters, teachers, preachers, and hipsters. Many talks come with links to slides. They cover diverse topics: software development, developer culture and practices, developer tools, open source, JavaScript, CSS, new APIs.

Part 1: Sole’s list

Part 2: Making video better on Firefox

Binge-watching JavaScript talks not your idea of a holiday break? If you’re watching video at all, Mozilla could use your help improving the video experience on Firefox.

Here’s how you can contribute: Download Firefox Nightly, and help us test the implementation of Media Source Extensions (MSE) to support YouTube videos running in HTML5. Over recents weeks, Firefox engineers have been working hard addressing top bugs. To get this into the hands of users as quickly as possible, we need more help testing the experience. Here’s a detailed description of the testing task, thanks to Bugmaster Liz Henry from the QA team.

File bugs using this link. Describe your platform, OS, and the steps needed to reproduce the problem.

Thank you for helping to make the Firefox Desktop video experience awesome. See you in the new year.

React.js Conf Diversity Scholarship

React.js News Friday December 19, 2014 @ 08:00 • over a year ago

Today I'm really happy to announce the React.js Conf Diversity Scholarship! We believe that a diverse set of viewpoints and opinions is really important to build a thriving community. In an ideal world, every part of the tech community would be made up of people from all walks of life. However the reality is that we must be proactive and make an effort to make sure everybody has a voice. As conference organizers we worked closely with the Diversity Team here at Facebook to set aside 10 tickets and provide a scholarship. 10 tickets may not be many in the grand scheme but we really believe that this will have a positive impact on the discussions we have at the conference.

I'm really excited about this and I hope you are too! The full announcement is below:

The Diversity Team at Facebook is excited to announce that we are now accepting applications for the React.js Conf scholarship!

Beginning today, those studying or working in computer science or a related field can apply for an all-expense paid scholarship to attend the React.js Conf at Facebook’s Headquarters in Menlo Park, CA on January 28 & 29, 2015. React opens a world of new possibilities such as server-side rendering, real-time updates, different rendering targets like SVG and canvas. Join us at React.js Conf to shape the future of client-side applications! For more information about the React.js conference, please see the website and previous updates on our blog.

At Facebook, we believe that anyone anywhere can make a positive impact by developing products to make the world more open and connected to the people and things they care about. Given the current realities of the tech industry and the lack of representation of communities we seek to serve, applicants currently under-represented in Computer Science and related fields are strongly encouraged to apply. Facebook will make determinations on scholarship recipients in its sole discretion. Facebook complies with all equal opportunity laws.

To apply for the scholarship, please visit the Application Page:

Award Includes #

  • Paid registration fee for the React.js Conf January 28 & 29th at Facebook’s Headquarters in Menlo Park, CA
  • Paid travel and lodging expenses
  • Additional $200 meal stipend

Important Dates #

  • Monday, January 5, 2015: Applications for the React.js Conf Scholarship must be submitted in full
  • Friday, January 9, 2015: Award recipients will be notified by email of their acceptance
  • Wednesday & Thursday, January 28 & 29, 2015: React.js Conf

Eligibility #

  • Must currently be studying or working in Computer Science or a related field
  • International applicants are welcome, but you will be responsible for securing your own visa to attend the conference
  • You must be available to attend the full duration of React.js conf on January 28 and 29 at Facebook Headquarters in Menlo Park

jQuery 1.11.2 and 2.1.3 Released – Safari Fail-Safe Edition

jQuery Blog Thursday December 18, 2014 @ 15:46 • over a year ago

Season’s greetings! After a thoughtful review of the Naughty and Nice lists, we have decided to leave a small present under the tree to finish 2014: jQuery 1.11.2 and 2.1.3! These releases include several bug fixes to make your cross-browser development experience better.

The most significant fix in this release is a workaround for a serious querySelector bug in Safari 8.0 and 7.1. When this bug popped up we were hopeful that it would be fixed in patch releases but that did not happen. Apple is by far the least transparent browser maker, and we have very little information about when the Webkit patch for this bug might be pulled into Safari. As a result, we have decided to patch this in Sizzle, the selector engine used by jQuery.

A bug like this one emphasizes the benefit of using a library like jQuery rather than going directly to the DOM APIs. Even modern browsers can suffer from bugs that aren’t fixed for a long time, and there are still cross-browser feature differences with several browsers in wide use such as Android 2.3. Special-case code for obscure browser issues can seem unnecessary until you spend a day trying to debug a problem in your own code caused by one. Or worse, lose a paying customer because they couldn’t use your site from their old phone.

Another bug that makes it difficult for us to test jQuery on iOS 8 is that the user agent of the simulator is incorrect so the iOS 8 simulator is not recognized by our unit test infrastructure. The fix for that issue is very simple but Apple won’t tell us if we can count on it being done. For now we’re doing our iOS 8 testing manually.

In addition, this release includes several changes inside jQuery to avoid holding onto DOM elements unnecessarily. Although the old code generally wouldn’t cause things to run incorrectly, web pages might run slowly and use more memory than necessary.

You may notice that we skipped a patch release number in the 2.x branch. We didn’t actually skip it, we built it and found a problem that caused problems when jQuery was used with node. (Many thanks to Denis Sokolov for letting us know immediately and prodding us to fix it!) Rather than shipping those files to the other CDNs, we decided to create new releases.

As far as the potential for compatibility or regression issues, we believe this is a very low-risk upgrade for anyone currently using 1.11.1 or 2.1.1. We are making this release ahead of jQuery 3.0 to ensure that you can use a Safari-safe version of jQuery without the need to review your code for compatibility with changes being anticipated in jQuery 3.0. If you do encounter bugs, in upgrading from the previous version, please let us know.

You can include these files directly from the jQuery CDN if you like, or copy them to your own local server. The 1.x branch includes support for IE 6/7/8 and the 2.x branch does not.

These updates are already available as the current versions on npm and Bower. Information on all the ways to get jQuery is available at Public CDNs receive their copies today, please give them a few days to post the files and don’t be impatient. If you’re anxious to get a quick start, just use the files on our CDN until they have a chance to update.

Many thanks to all of you who participated in this release by testing, reporting bugs, or submitting patches, including Chris Antaki, Denis Sokolov, Jason Bedard, Julian Aubourg, Liang Peng, Michał Gołębiowski, Oleg Gaidarenko, PashaG, Richard Gibson, Rodrigo Rosenfeld Rosas, Timmy Willison, and TJ VanToll.

Since the last release of jQuery we have moved from a Trac installation to GitHub issues, so there are currently tickets for this release in both bug trackers. References to the Trac tickets have been migrated to GitHub issues, however, so you can use this GitHub Issues query to review all the tickets.

Thanks for all your support, and see you at jQuery 3.0!

React v0.12.2

React.js News Thursday December 18, 2014 @ 08:00 • over a year ago

We just shipped React v0.12.2, bringing the 0.12 branch up to date with a few small fixes that landed in master over the past 2 months.

You may have noticed that we did not do an announcement for v0.12.1. That release was snuck out in anticipation of Flow, with only transform-related changes. Namely we added a flag to the jsx executable which allowed you to safely transform Flow-based code to vanilla JS. If you didn't update for that release, you can safely skip it and move directly to v0.12.2.

The release is available for download from the CDN:

We've also published version 0.12.2 of the react and react-tools packages on npm and the react package on bower. 0.12.1 is also available in the same locations if need those.

Please try these builds out and file an issue on GitHub if you see anything awry.

Changelog #

React Core #

  • Added support for more HTML attributes: formAction, formEncType, formMethod, formTarget, marginHeight, marginWidth
  • Added strokeOpacity to the list of unitless CSS properties
  • Removed trailing commas (allows npm module to be bundled and used in IE8)
  • Fixed bug resulting in error when passing undefined to React.createElement - now there is a useful warning

React Tools #

  • JSX-related transforms now always use double quotes for props and displayName

Node v0.10.34 (Stable)

Node.js Blog Wednesday December 17, 2014 @ 22:15 • over a year ago

2014.12.17, Version 0.10.34 (Stable)

  • uv: update to v0.10.30

  • zlib: upgrade to v1.2.8

  • child_process: check execFile args is an array (Sam Roberts)

  • child_process: check fork args is an array (Sam Roberts)

  • crypto: update root certificates (Ben Noordhuis)

  • domains: fix issues with abort on uncaught (Julien Gilli)

  • timers: Avoid linear scan in _unrefActive. (Julien Gilli)

  • timers: fix unref() memory leak (Trevor Norris)

  • v8: add api for aborting on uncaught exception (Julien Gilli)

  • debugger: fix when using "use strict" (Julien Gilli)

Source Code:

Macintosh Installer (Universal):

Windows Installer:

Windows x64 Installer:

Windows x64 Files:

Linux 32-bit Binary:

Linux 64-bit Binary:

Solaris 32-bit Binary:

Solaris 64-bit Binary:

Other release files:




Hash: SHA1

8df2fdb333dd8edee59ceaf72738e3773c7863e6  node-v0.10.34-darwin-x64.tar.gz
03168c2157baff928a397b85d8a7e6731b270f9a  node-v0.10.34-darwin-x86.tar.gz
f064a252827c8129126f0e8ab3c8bf46f92506ec  node-v0.10.34-linux-x64.tar.gz
fe0343f97c35aeb2c72bfd997dafde947ff44c23  node-v0.10.34-linux-x86.tar.gz
4b3ccf37886f8056800ed174688c8782f9857d52  node-v0.10.34-sunos-x64.tar.gz
ea891434436ed91d806201eb329d3c98f7e3c6b6  node-v0.10.34-sunos-x86.tar.gz
7609d6dda6071e499a54656bbf85f16ed097c106  node-v0.10.34-x86.msi
56e2aec59ac526d3daf607c7f50c2faf3e857cff  node-v0.10.34.pkg
a342eb4d653ab48ba016c0c0c259565c822881cc  node-v0.10.34.tar.gz
c71dce9dd3f3fbff34506a4edc3e37c59e31d7bd  node.exe
ffc836802c3b2e25b38f4f73c0f044fef345e152  node.exp
3e24f9c69826f320d303795c3564994e4311879f  node.lib
8ccb4fdaaaec797e0762cea38112af5456fe3f7e  node.pdb
fa0d0c098f475d6e1d6ad74c301a2361a9ac9888  openssl-cli.exe
72772212ff62ecbf76ca468f402184e3f364de51  openssl-cli.pdb
c54153231d0003792c4431cea38b9cb733a142b5  x64/node-v0.10.34-x64.msi
b84684c92ed41a883452eb65a3010223378eb1ca  x64/node.exe
c95e2dd11dc216c4b2d5a76852d2a0e7a8b247bc  x64/node.exp
41db33520c33c576e4591771c371ae5f2644cadf  x64/node.lib
d2ebec3f34e1a7e7969bfbe3330140f253b3cf9c  x64/node.pdb
b678c997ad7747c4c35dc8c8362730fca5bad97c  x64/openssl-cli.exe
f38f6eaae3aa2b11f3835b67f2dce04f4fc0fab8  x64/openssl-cli.pdb
Version: GnuPG/MacGPG2 v2.0.22 (Darwin)
Comment: GPGTools -


Improving the Pointer Events Polyfill

jQuery Blog Wednesday December 17, 2014 @ 17:45 • over a year ago

Today, we’re excited to announce that Google has transferred its Pointer Events polyfill to the jQuery Foundation. This polyfill was originally written by Google’s Polymer team but since Google has chosen to put their Pointer Event implementation on hold, we engaged to ensure that the polyfill is maintained and continues to be a tool developers can use as a path to the eventual native implementation in all browsers. Many thanks to Google and the Polymer Team for allowing us to build off their work and continue development.

The jQuery Foundation has been, and continues to be a strong proponent of standards and we are specifically strong proponents of the Pointer Events standard because it will simplify the way web developers handle user interactions. Today developers are saddled with two very different event models for mouse and touch, even though they share many similarities. The result is often code that has a myriad of special cases, particularly when the device itself generates “fake” mouse events from touches. The jQuery Foundation hopes to drive developer adoption of this unified event system. Our goal is to have all browsers implement this standard natively.

Just yesterday, the W3C took the Pointer Events specification to the Proposed Recommendation stage. This makes Pointer Events one step closer to a finished standard and gives browsers a solid base on which to implement these APIs. Some browsers have even begun their implementation. Unsurprisingly Internet Explorer, where the first implementation of Pointer Events began before being submitted to the W3C for standardization, has implemented Pointer Events and Firefox has a branch of their code base implementing Pointer Events which they intend to port to all version of Firefox. Both of these implementations recently passed 100% of the Pointer Events test suite so implementation is progressing nicely.

We want to thank Microsoft Open Technologies for their hard work on Pointer Events and their continued support. We also want to thank IBM, Mozilla, Google, Dojo and the many other organizations and individuals that have helped and continue to help make developers lives easier through the creation, fostering and promotion of new standards like Pointer Events. If you want to get involved or just want to start using Pointer Events in your projects, head over to the new Pointer Events repo and check it out.

Firefox 36 was just uplifted to the Developer Edition channel, so let’s take a look at the most important Developer Tools changes in this release. We will also cover some changes from Firefox 35 since it was released shortly before the initial Developer Edition announcement. There is a lot to talk about, so let’s get right to it.


You can now inspect ::before and ::after pseudo elements.  They behave like other elements in the markup tree and inspector sidebars. (35, development notes)


There is a new “Show DOM Properties” context menu item in the markup tree. (35, development notes, documentation about this feature on MDN)


The box model highlighter now works on remote targets, so there is a full-featured highlighter even when working with pages on Firefox for Android or apps on Firefox OS. (36, development notes, and technical documentation for building your own custom highlighter)

Shadow DOM content is now visible in the markup tree; note that you will need to set dom.webcomponents.enabled to true to test this feature (36, development notes, and see bug 1053898 for more work in this space).

We borrowed a useful feature from Firebug and are now allowing more paste options when right clicking a node in the markup tree.  (36, development notes, documentation about this feature on MDN)


Some more changes to the Inspector included in Firefox 35 & 36:

  • Deleting a node now selects the previous sibling instead of the parent (36, development notes)
  • There is higher contrast for the currently hovered node in the markup view (36, development notes)
  • Hover over a CSS selector in the computed view to highlight all the nodes that match that selector on the page. (35, development notes)

Debugger / Console

DOM Promises are now inspectable. You can inspect the promises state and value at any moment. (36, development notes)


The debugger now recognizes and works with eval’ed sources. (36, development notes)

Eval’ed sources support the //# sourceURL=path.js syntax, which will make them appear as a normal file in the debugger and in stack traces reported by Error.prototype.stack. See this post: for much more information. (36, development notes,  more development notes)

Console statements now include the column number they originated from. (36, development notes)


You are now able to connect to Firefox for Android from the WebIDE.  See documentation for debugging firefox for android on MDN.  (36, development notes).

We also made some changes to improve the user experience in the WebIDE:

  • Bring up developer tools by default when I select a runtime app / tab (35, development notes)
  • Re-select project on connect if last project is runtime app (35, development notes)
  • Auto-select and connect to last used runtime if available (35, development notes)
  • Font resizing (36, development notes)
  • You can now adding a hosted app project by entering the base URL (eg: “”) instead of requiring the full path to the manifest.webapp file (35, development notes)

Network Monitor

We added a plain request/response headers view to make it easier to view and copy the raw headers on a request. (35, development notes)


Here is a list of all the bugs resolved for Firefox 35 and all the bugs resolved for Firefox 36.

Do you have feedback, bug reports, feature requests, or questions? As always, you can comment here, add/vote for ideas on UserVoice or get in touch with the team at @FirefoxDevTools on Twitter.

Classes in JavaScript: Exploring the Implementation in Chakra

Internet Explorer (IE) News Monday December 15, 2014 @ 21:37 • over a year ago

The Windows 10 Technical Preview November build and RemoteIE includes many changes and additions to Internet Explorer from the next edition of the JavaScript standard, ECMA-262 6th Edition (ES6). ECMAScript 6 will be a substantial advance for JavaScript language, and currently the technical preview is the most compliant implementation. This post explores where ECMAScript is going and gives a peek into the implementation of a new language feature: ES6 Classes.

ECMAScript Evolution to Meet the Advancing Web

The web has evolved substantially in the 5 years since ES5 was ratified. Apps today are becoming more complex and demanding. Microsoft, working with the ECMA working group - TC39, has been hard at work on the next substantial update to the language. The 6th edition of ECMA-262 (ES6) is perhaps the biggest update to the language in its history.

The order we implement ECMAScript proposals depends on a few principles including whether it is necessary to ensure interoperability with other engines, enables new types of apps, provides developers with compelling value beyond saving keystrokes, has a stable specification has multiple reference implementations, and has a comprehensive test suite (called Test262) to ensure interoperability. Overall we do our best to make data driven decisions and deliver features that will give the most value to developers. Let us know what you find most valuable on User Voice or Connect!

ES6 Classes

Many features in ES6 aim to reduce time writing code and increase expressiveness of common patterns in JavaScript. Because they do not add new fundamental capabilities to the runtime and essentially simplify the boilerplate code, these kinds of features are collectively referred to as ‘syntactic sugar’.

ES6 Classes in JavaScript is one such feature and remains one of the most commonly requested features on

To those of you familiar with object-oriented languages, classes should be a familiar concept. However classes in JavaScript are a little different from other languages. With ES5, class functionality is commonly implemented using functions, prototypes, and instances. For example:

By contrast, the ES6 version below is much more readable and concise. For programmers from a classical inheritance background, the functionality is easier to understand without in depth knowledge of how JavaScript's prototypal inheritance model works.

Now that we’ve seen a simple example of what the syntax looks like, let’s have a look at the other syntactic features of ES6 classes.

The example includes a basic class construct with instance, static, getter and setter methods. A class constructor is a special method which can be customized or omitted. Omitting a constructor generates the default constructor which merely forwards arguments to its super as shown above. Classes provide inheritance through the extends keyword. A subclass has the super keyword, which allows use of the superclass properties and methods.

Implementation challenges

In a previous post, we explored the architecture of the Chakra engine in detail (see ‘Announcing key advances to JavaScript performance in Windows 10 Technical Preview) using the diagram below. The parts requiring the most modification to support classes are highlighted in green.

Parts of the Chakra engine requiring the most modification to support ES6 Classes

When implementing new language features, syntactic sugar features often map directly to older language constructs, as shown in the first code example. Classes are no exception. Underneath, classes use the same function, prototype, and instance constructs that have always been available, and Chakra uses these constructs to implement classes.

Not all of the sugar maps to pre-existing language features, however. The super keyword is one example. super ended up taking longer than the rest of classes due to its complex usage scenarios. These uses are not always apparent to the end user, but part of the fun of being a compiler developer is to come up with the corner cases that break things. For example, the use of eval() in a class makes the implementation more complex:

In the example above, both Child methods require a reference to Parent to allow execution of super(). In the case of method(), the parser is able to detect the use of super() at compile time. Chakra marks method() as having a super keyword reference during parsing, so when it reaches bytecode generation it knows to generate special bytecode to make a reference to Parent available. At runtime, this reference becomes available as Chakra consumes the bytecode at the beginning of the function, performing checks on whether it is valid to use super at that location and point in time.

In the case of methodEval(), there is a call to eval() which drastically changes the implementation. Chakra knows this is a class method, but until it executes the eval(), it has no idea if there is a super reference, or if there will ever be a super reference. This poses a design problem that we felt had two options:

  1. Should Chakra maintain a reference to Parent that is available in case it is needed by super somewhere inside the eval(), or
  2. Should Chakra wait until it is somewhere in the eval() to fetch the reference?

The first option, pre-emptively loading super, adds unnecessary bytecode to the method which could adversely affect performance.

The second option, to fetch the Parent reference when Chakra needs it, sounds simple at first. However it can’t predict the complexity of the eval(). For example, Chakra could be several levels deep in function calls in the eval(), or perhaps be in several levels of the eval() itself. Finding the Parent reference at this point could be more costly than if it had been stashed it away previously.

There isn’t necessarily a correct answer here, and the answer may change as we learn more about how programmers use super. In the current technical preview, we implemented super by pre-emptively loading the reference in situations where the trade-off in performance is justifiable. For example, using super in a subclass method is more likely to happen than in a top level class method (regardless of whether the use is valid or invalid.)

In the time since the release of the technical preview, the ES6 specification has been updated to allow super in more places. Being on the bleeding edge of implementation as standards evolve often means revisiting implementations, and the ES6 specification is no different.

Classes are a core part of the ES6 language feature set. We anticipate they will help new JavaScript programmers learn the language more rapidly when they have experience with other object oriented languages. We also anticipate that many seasoned JavaScript programmers will welcome the terseness.

Moving forward with ECMAScript

While ECMAScript 6 makes great progress, both the runtime capabilities and expressivity will continue to evolve. ECMAScript 7 should arrive more rapidly than any previous ECMAScript version because it and future editions of the standard will be moving to a more regular “train model”. In this model, proposals are built in isolation from one another and move through stages of ratification as they mature. Eventually, a proposal may make it on to a “train”, where the proposal is integrated with the other proposals on the train to form the final document that will be ratified. This model is useful for language standards because we get cohesive, complete specifications developed in an agile fashion that we don’t have to wait years for. It also gives some flexibility to make sure we get a design right. It’s a lot easier to take a bit more time when it means shipping in the specification next year rather than five years from now. For example, when the committee got substantive negative feedback on the subclassing built-ins machinery, it was relatively easy to pull it out of ES6 and get it ready for making the ES7 train. (You may also be interested to know that we were analyzing a subclassable built-ins implementation to complement classes, but as a result of the change we could not include it in this release.)

This model should also be much friendlier to JavaScript developers because new features come to the language yearly rather than every half decade. Also, browsers can pick up smaller chunks and begin implementing them sooner in the process, which should help get interoperable implementations more rapidly. The end result of this new process should be substantially increased pace of improvements to JavaScript.


Classes are available today in the current Windows 10 Technical Preview, and you can also play with them using We can’t wait to hear about how you will be using the feature in your ES6 code. We’re planning to deliver more articles in the future about other ES6 features. In the meantime, feel free to join the comment discussion, reach out on Twitter @IEDevChat, or on Connect.

Tom Care (@tcare_), Brian Terlson (@bterlson) & Suwei Chen

Chakra Team

Mozilla and Web Components: Update

Mozilla Hacks Monday December 15, 2014 @ 14:00 • over a year ago

Editor’s note: Mozilla has a long history of participating in standards development. The post below shows a real-time slice of how standards are debated and adopted. The goal is to update developers who are most affected by implementation decisions we make in Firefox. We are particularly interested in getting feedback from JavaScript library and framework developers.

Mozilla has been working on Web Components — a technology encompassing HTML imports, custom elements, and shadow DOM — for a while now and testing this approach in Gaia, the frontend of Firefox OS. Unfortunately, our feedback into the standards process has not always resulted in the changes required for us to ship Web Components. Therefore we decided to reevaluate our stance with members of the developer community.

We came up with the following tentative plan for shipping Web Components in Firefox and we would really appreciate input from the developer community as we move this forward. Web Components changes a core aspect of the Web Platform and getting it right is important. We believe the way to do that is by having the change be driven by the hard learned lessons from JavaScript library developers.

  • Mozilla will not ship an implementation of HTML Imports. We expect that once JavaScript modules — a feature derived from JavaScript libraries written by the developer community — is shipped, the way we look at this problem will have changed. We have also learned from Gaia and others, that lack of HTML Imports is not a problem as the functionality can easily be provided for with a polyfill if desired.
  • Mozilla will ship an implementation of custom elements. Exposing the lifecycle is a very important aspect for the creation of components. We will work with the standards community to use Symbol-named properties for the callbacks to prevent name collisions. We will also ensure the strategy surrounding subclassing is sound with the latest work on that front in JavaScript and that the callbacks are sufficiently capable to describe the lifecycle of elements or can at least be changed in that direction.
  • Mozilla will ship an implementation of shadow DOM. We think work needs to be done to decouple style isolation from event retargeting to make event delegation possible in frameworks and we would like to ensure distribution is sufficiently extensible beyond Selectors. E.g Gaia would like to see this ability.

Our next steps will be working with the standards community to make these changes happen, making sure there is sufficient test coverage in web-platform-tests, and making sure the specifications become detailed enough to implement from.

So please let us know what you think here in the comments or directly on the public-webapps standards list!

New Release: Polymer 0.5.2

Polymer News Friday December 12, 2014 @ 13:05 • over a year ago

We announce significant releases here on the blog, highlighting the major new features as well as breaking changes. Bear in mind, Polymer is in Developer Preview as we continue to explore the new world of Web Components, and these releases may have particularly high entropy. As always, we’d love to get your feedback, issues, and PR’s, so tweet us @polymer or contribute to the Github.

A new release of Polymer is up today - 0.5.2. A few changes to note:

New Brand New Mixins - CoreResizable and CoreResizer

With Polymer.CoreResizer and Polymer.CoreResizable mixins, we’ve set out to relieve some of the developer pain involved in manually checking an element’s size and notifying when an element is resized, shown or hidden. They’re fresh out of the oven, but feel free to check them out and apply the mixins to your element.

“Resizers” are elements that control the size or hidden state of their children, while “Resizables” are elements that need to be notified when they are resized or un-hidden by their parents in order to take action on their new measurements.

The following elements have been updated to take advantage of these mixins - check them out for code examples of how to use the resize events:



Updated core-ajax Content-Type

A minor tweak to core-ajax: The Content-type header is now set to null when FormData payloads are sent.

Updated paper-input Cursor Animation Removed

We’re constantly honing the paper elements to make sure they’re aligned with the material design spec - in this revision, we’ve removed the cursor animation from paper-input.

pluto/1.3.2 - Ruby/2.0.0 (2014-11-13/x86_64-linux) on Rails/4.2.0 (production)