YUI Compressor According to Yahoo!'s Exceptional Performance Team, 40% to 60% of Yahoo!'s users have an empty cache experience and about 20% of all page views are done with an empty cache (see this article by Tenni Theurer on the YUIBlog for more information on browser cache usage). This fact outlines the importance of keeping web pages as lightweight as possible. Improving the engineering design of a page or a web application usually yields the biggest savings and that should always be a primary strategy. With the right design in place, there are many secondary strategies for improving performance such as minification of the code, HTTP compression, using CSS sprites, etc. In terms of code minification, the most widely used tools to minify JavaScript code are Douglas Crockford's JSMIN, the Dojo compressor and Dean Edwards' Packer. Documentation: Detailed description of the YUI Compressor and how to use it. How does the YUI Compressor work? Using the YUI Compressor from the command line Additional notes
Grunt: The JavaScript Task Runner Closure Compiler - Javascript Compiler by Google - Compress Javascript with Closure Compiler Yesterday, Google introduced Closure Tools (announcement) to enable easy creation of web applications. The tool set contains: Closure Compiler, Closure Library and Closure Templates. Closure Compiler is a Javascript optimizer that compiles javascript code into a compact, high performance form. Closure Compiler by Google - reduces the size of your JavaScript files and makes them more efficient As mentioned before, Closure compiler is more than a standard Javascript compressor. The compiler also offers a Firebug extension, named Inspector, for better debugging. Closure Compiler by Google does more than removing whitespace.
Project Silk: Client-Side Web Development for Modern Browsers patterns & practices Developer Center September 2011 Project Silk provides guidance for building maintainable cross-browser web applications that are characterized by an intentional design, rich interactivity, and a responsive user interface (UI), resulting in an immersive and engaging user experience (UX). Such applications take advantage of the latest web standards, including HTML5, CSS3, and ECMAScript version 5, and modern web technologies such as jQuery and ASP.NET MVC3. An intentional design indicates that deliberate attention was paid to the modularity of the JavaScript code, and the usability of the application was an explicit focus. Project Silk also illustrates how you can take advantage of the fast JavaScript engines of the modern, standards-based web browsers to achieve a user experience and execution speeds that rivals desktop applications. If you are not familiar with these concepts or have not used them in your own projects, please refer to these resources:
uglify-js UglifyJS is a JavaScript parser, minifier, compressor and beautifier toolkit. Note: uglify-js@3 has a simplified API and CLI that is not backwards compatible with uglify-js@2.Documentation for UglifyJS 2.x releases can be found here.uglify-js only supports JavaScript (ECMAScript 5).To minify ECMAScript 2015 or above, transpile using tools like Babel. Install First make sure you have installed the latest version of node.js (You may need to restart your computer after this step). From NPM for use as a command line app: npm install uglify-js -g From NPM for programmatic use: npm install uglify-js uglifyjs [input files] [options] UglifyJS can take multiple input files. If no input file is specified, UglifyJS will read from STDIN. If you wish to pass your options before the input files, separate the two with a double dash to prevent input files being used as option arguments: uglifyjs --compress --mangle -- input.js Command line options -h, --help Print usage information. CLI source map options Example: fs
boxbox - javascript physics made easy what is boxbox? boxbox is a fun and simple framework for making games with the box2d physics engine. no, i mean really, what is it boxbox is a framework for box2dweb, a JavaScript port of box2dflash, an ActionScript port of box2d, a C++ library. The box2d physics engine is hard to use for a beginner. features simple API work with entities rather than fixtures, bodies, and shapes attach events to entities rather than the whole world reuse common configuration among similar entities built in canvas rendering with image support demos Mouse wheel programming in JavaScript Quick links: source · test page · long test page (with scrollbars) · compatibility Though many people still find this page useful, there have been some changes in the browsers since last update of this page, and I generally consider some information here to be outdated. However, I suggest using MooTools or other general Javascript frameworks that provide portable and maintainable basis for writing Javascript code. Web applications are becoming more and more like “normal” desktop applications. This page, however, is not about AJAX (or any other buzzword). Annotated code Below is annotated javascript code, which should explain the magic behind mouse wheel generated events. /** This is high-level function. * It must react to delta being more/less than zero. Handler function In the code above, there is “handle” function which is, of course, meant to be written by you. Practically, you only have to watch for positive and negative values of delta. If delta is positive, wheel was scrolled up.
Crockford on JavaScript -- Volume 1: The Early Years - Douglas Crockford - YUI Theater ▶ Play His talk is entitled "Polymer, Building blocks for the web" with the following description. From "a" to "select", elements are the building blocks of the web. But modern applications have outgrown these built-in elements, forcing app developers to rely on JavaScript frameworks to provide dynamic, custom behavior. In this talk we'll take a look at Polymer, a new library that allows developers to create their own HTML elements and compose them into complete applications. Rob Dodson is a Developer Advocate for the Google Chrome team, focusing on Polymer and web components. JavaScript variable name validator Wondering if you can use a given string as a variable name in JavaScript? Learn how it works, or just use this tool. <strong>To use this tool, please <a href= JavaScript</a> and reload the page.</strong> permalink That’s a valid identifier according to ECMAScript 6 / Unicode 8.0.0. However, the NaN, Infinity, and undefined properties of the global object are immutable or read-only. It is a reserved word.