JavaScript Tools

To Read: High Performance JavaScript

Optimization

asm.js

https://developers.google.com/closure/compiler/

https://github.com/mishoo/UglifyJS

Stand Alone

http://webodf.org/news/2014-06-30.html

Display and Edit ODF docs in a browser

jQuery Plugins

http://www.awkwardgroup.com/sandbox/awkward-showcase-a-jquery-plugin/

Very cool show case, slides can be interactive.

http://jamielottering.github.com/DropKick/

Cleaner drop-downs

http://anthonyterrien.com/knob/

Knob style controls

http://www.designchemical.com/lab/jquery-drill-down-menu-plugin/examples/

Drill down. Lets the user move up and down through a tree

http://duopixel.com/extremes/

Simple, just places links in a circle

http://zikes.github.com/circle-menu/examples/

Circular menus - I really like the nested in a corner example, that could be really cool.

http://prinzhorn.github.com/skrollr/

This is just cool - I'm not sure how easy it would be to work with, but it could be really good.

http://masonry.desandro.com/

http://yconst.com/web/freetile/

This could help with some of my CSS frustration

http://gridster.net/

Draggable grid

http://www.jqplot.com/

Every type of graph EVAR

http://bartaz.github.com/impress.js/#/bored

Slides in javascript

CodeMirror

Code Editor in browser

Development Tools

jsFiddle

Frameworks

In working on my Tasks program, I began to realize how badly I needed a framework. I initially tried to handle the organization myself with a Core and a UI connected by listeners, but I couldn't get anything I was really happy with and even the decent attempts would not have scaled well.

Backbone

Library of utilities not a framework. Meh, looks very MVCish, not the dynamic environment I want. The collections look pretty good though. I watched most of video and I had no idea what was Backbone and what was just the presenters personal preference.

Knockout

MVVM, sounds pretty good. Microsoft pushing it so hard makes me wary.

Spine

Lightweight.

Sammy

Also light, basic structure

Mustache

http://mustache.github.com/mustache.5.html

Basic: use double curly braces to access an object. Double will auto-escape data and triple will not.

The call is actually made with

 Mustache.to_html(template, data);

Blocks: Starts with # ends with /

 {{#foo}}
   ...
 {{/foo}}

If foo is boolean, it will act as an if. If foo is a list, it will iterate over the list and the list item can be accessed with {{.}}. With lists of objects you move into the object context...I'm not sure I like this - how do you access the parent context?

If foo is a function, the unrendered contents will be passed as the only arguments. and the return value will be inserted. Rendering will still happen on the returned string.

Templates are simply strings. Often they are included as scripts with the type set to something like "text/template" or "test/mustache".

Inversions select for not - they use caret.

 {{^foo}}
 ... happens if foo evaluates to false or empty...
 {{/foo}}

Partials are sub-templates strings as part of the context.

 {{> partialName}}

Which would work if the context had an attribute partialName that was a mustache template. These can be recursive, so watch out.

Game Frameworks

So for Phaser looks best. But Turbulenz also looks good.

This may be a big help in deciding.

Phaser.js Notes

pixi.js may be a better choice for me, it looks like it's more of just a rendering engine.