This website uses cookies and similar technologies to understand visitors' experiences. By continuing to use this website, you accept our use of cookies and similar technologies,Terms of Use, and Privacy Policy.

Jun 03 2013 - 04:44 PM
Fluent 2013 session - JavaScript Authoring Tooling
In this session, Paul Irish introduced a few tools and techniques he's been using for JavaScript developing. The first tool introduced by Paul is SASS (Syntactically Awesome Stylesheets). SASS is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance and more. It's translated to well-formatted, standard CSS using the command line tool or a web-framework plugin. Per the above definition, SASS is pretty close to LESS, the tool EdLab developers have been using. However, SASS does provide some unique features that makes it stand out. SASS users can choose to install an additional manager called COMPASS, which is a library that provides the basic SASS mixing definition, which is useful to most users. Besides, SASS has a powerful directive @extend which allows a mixing to be inherited or overridden. This important OO features make it possible for developers to write even more organized code. What's else, SASS has a special 'respond-to' technique. It's mainly used for so-called "media query" (to apply styling to specific browser types). This is similar to the switch syntax as in a normal programming language. e.g. =respond-to($name) @if $name == small-screen @media only screen and (min-width: 320px) @content @if $name == large-screen @media only screen and (min-width: 800px) @content The next thing Paul recommended was Bower. Bower is a package manager for the web. It offers a generic, unopinionated solution to the problem of front-end package management, while exposing the package dependency model via an API that can be consumed by a more opinionated build stack. There are no system wide dependencies, no dependencies are shared between different apps, and the dependency tree is flat. Bower runs over Git, and is package-agnostic. Bower command examples: # Using the dependencies listed in the current directory's bower.json bower install # Using a local or remote package bower install # Using a specific Git-tagged version from a remote package bower install # Here's the list of available packages that are managed by Bower. http://sindresorhus.com/bower-components/ Paul continued to demonstrate a few interesting JavaScript developing tools using Chrome Canary. The Canary build is less stable, but it's used to test even more cutting-edge features than our normal Chrome. Below are the tools that are worth learning:
  1. continuous repaint mode
  2. fps meter & memory consumption
  3. show paint rects & layer border
  4. object allocation tracking
  5. layout thrashing details
|By: Yudan Li|1549 Reads