background preloader

Javascript

Facebook Twitter

Introduction to JavaScript Source Maps. Have you ever found yourself wishing you could keep your client-side code readable and more importantly debuggable even after you've combined and minified it, without impacting performance?

Introduction to JavaScript Source Maps

Well now you can through the magic of source maps. Basically it's a way to map a combined/minified file back to an unbuilt state. When you build for production, along with minifying and combining your JavaScript files, you generate a source map which holds information about your original files. When you query a certain line and column number in your generated JavaScript you can do a lookup in the source map which returns the original location. Developer tools (currently WebKit nightly builds, Google Chrome, or Firefox 23+) can parse the source map automatically and make it appear as though you're running unminified and uncombined files.

Demo: Get original location The above demo allows you to right click anywhere in the textarea containing the generated source. Real world So... Potential XSSI issues. Compiling to JavaScript: What, Why, and How? Five years ago, Build New Games would not have had much to talk about.

Compiling to JavaScript: What, Why, and How?

The only viable option to make web games at the time was Flash. Since then, web browsers have progressed by leaps and bounds both in performance and features; and they are now capable of running pretty complex games. How complex? We don’t know yet, we’re all just getting started really. Someone pushes the envelope and wows the rest of us on a regular basis. We hear a lot about how HTML5 is ushering in a new era, etc… but what does that mean? New features in each of the three web languages: HTML, CSS and JavaScript.

Dependency Management with RequireJS. ShellJS. ShellJS is a portable (Windows/Linux/OS X) implementation of Unix shell commands on top of the Node.js API.

ShellJS

You can use it to eliminate your shell script's dependency on Unix while still keeping its familiar and powerful commands. You can also install it globally so you can run it from outside Node projects - say goodbye to those gnarly Bash scripts! The project is unit-tested and battled-tested in projects like: PDF.js - Firefox's next-gen PDF readerFirebug - Firefox's infamous debuggerJSHint - Most popular JavaScript linterZepto - jQuery-compatible JavaScript library for modern browsersYeoman - Web application stack and development toolDeployd.com - Open source PaaS for quick API backend generation and many more. Installing Via npm: $ npm install [-g] shelljs If the global option -g is specified, the binary shjs will be installed. . $ shjs my_script You can also just copy shell.js into your project's directory, and require() accordingly. Examples JavaScript CoffeeScript Global vs. Example: pwd()