Part 1

GulpJS

A long time ago, people wrote HTML, CSS, and JavaScript from scratch — how 20th century. JavaScript is now often compiled or built from shorthand syntaxes such as CoffeeScript. The CSS is built from a set of rules.

If you’ve often wished there was a simple way to automate all the processing that happens after you write your code, GulpJS is here to organize it all. You write a bit of JavaScript to specify the paths, then Gulp does the rest. It’s like Ant or Maven for Java, but this time they used the native language (JavaScript) to specify the work instead of XML. The image shows a snippet of code for minifying and cleaning up some JavaScript.

AngularJS

Google built AngularJS to offer a smooth, lightweight framework for presenting information in the browser. It collects data from the server, then compiles the templates locally for presentation. In other words, it’s a Model-View-Controller framework built out of HTML, JavaScript, and CSS to run in the browser. The server code handles data storage, and the AngularJS code is responsible for presentation. It’s compatible with desktop browsers, tablets, and phones.

The image shows a snippet from an Angular template that mixes Angular code in curly brackets with raw HTML.

Odyssey

Adding maps to a website has never been easier, thanks to the full APIs offered by the competing companies. Telling a story just requires some words. What if you want to mix the two? That’s the objective of CartoDB’s Odyssey, a tool for mixing story and maps with features like “slipping map interactions” bound to parts of the text. The image shows a sandbox for building stories that interact with maps.

PlayCanvas

In theory, games are something separate that only gamers build. They’re completely different from Web apps and other things that serious people do with their serious time.

In reality, all of the tools from the game world can be useful for adding slick interfaces to websites. PlayCanvas is a game engine built around WebGL. It combines physics, lighting, shadows, audio, and more into a coherent tool for creating a world filled with objects. The image shows an online development tool for the framework.

Deb.js

We all make mistakes. The way we fix them, though, makes all of the difference. Deb.js is a small file — about 1.5KB — but it cleans up the console window, so it’s easier to debug JavaScript. It’s the next necessity after FireBug and the built-in debuggers in Chrome, Opera, and Safari. The image shows a stack trace.

Source : infoworld.com