Tag Archives: Developer Tools

Yarn: A new package manager for JavaScript

Facebook fixes several problems with npm; will yarn become the new standard, will npm make changes, or will developers not care?


We’ve used the npm client successfully at Facebook for years, but as the size of our codebase and the number of engineers grew, we ran into problems with consistency, security, and performance. After trying to solve for each issue as it came up, we set out to build a new solution to help us manage our dependencies more reliably. The product of that work is called Yarn — a fast, reliable, and secure alternative npm client.

Read more at Facebook Code

Pause and slow down CSS3 animations in Chrome Dev Tools

Chrome Canary gives you a sneak peak of dev tools for CSS3 animation


Visually debugging CSS animation just got a whole lot easier! We’ve needed better debugging tools (or any debugging tools, really) for CSS animation for ages. Now we’re starting to see some show up in browsers! The latest version of Canary now has controls to globally slow down and pause animation right from Dev Tools. It’s such a huge help for both designing and troubleshooting your animations.

To try these out for yourself in Canary, open up Dev Tools and go to Styles tab under Elements. Look for the play button in the far right and you’re off to the races.

Read more from the source: valhead.com

The First Browser Dedicated to Developers is Coming

Firefox creates bridges to use the Firefox Dev Tools on other browsers and even mobile devices. Will it become your new workflow?


From Mozilla’s Blog:

We decided to unleash our developer tools team on the entire browser to see how we could make your lives easier.

We’ve redesigned the browser by looking at it through a completely new filter to put developers’ interests first. It’s built by developers for developers so you can debug the whole Web, allowing you to more easily build awesome Web experiences. It also integrates some powerful new tools like WebIDE and the Firefox Tools Adapter.

Soon, we’re going to bring you more, a lot more, in a package that you deserve as a builder for an independent Web.

Get ready to spread the word (#Fx10) or sign up for our Hacks newsletter here to be emailed as soon as the browser is available.

Read more from the source: The Mozilla Blog

CSS Variables Land in Firefox 31

An uncertain future: Firefox implements CSS variables even though other browser vendors have not committed either way.


Craig takes a look at native CSS variables, which can now be used in Firefox 31. Has the technology become redundant before we can use it?

Preprocessors such as Sass, Less, and Stylus provide variable functionality with many other benefits.

Read more from the source: SitePoint

Waldo: Search the JavaScript Object Model in under 1 KB

Have you ever needed to find a property or value buried in the catacombs of your JavaScript objects? Waldo to the rescue!


Here’s a tiny util that you can save as a bookmarklet and use to crawl the JavaScript object model of any web site. Waldo (thanks to @shinypb for the name!) lets you find and inspect instances by name, type or value, and it can be easily customized to add additional tests. It runs in the console on Chrome, Firefox, Safari and IE>8. It’s sourced on github. Feel free to fork it if you want to add more search methods or a spiffy UI.

Loading the Waldo script will create a global object called find which invokes a set of utility methods: byName, byNameContains, byType, byValue, byValueCoerced and custom. Each method will crawl the entire runtime JavaScript model from window down (unless otherwise specified) and report every object that matches the search term argument. There is also an optional options argument for specifying a) the root object for the search and b) the root of the object path that will display in the search results (the latter option is purely cosmetic).

Read more from the source: JavaScript, JavaScript…