esgoggles
Browser ide for reading and exploring javascript code.
Demo 1 -- style 1: http://keeyipchan.github.com/esgoggles/demo/style1.html, use
Demo 2 -- style 2 with variable scopes: http://keeyipchan.github.com/esgoggles/demo/style2.html, use
Purpose
- Reading badly-formatted code is a hassle
- People don't always agree on preferred formatting, why not make it an individual preference?
- Represent the AST in the DOM, use jQuery for traversal, and CSS for styling
- Share plugins or themes suited for specific libraries or audiences (novice, expert, jQuery, extJS, etc..)
- Javascript needs better static analysis tools; even better if they're interactive, allowing you to explore
- escope provides valuable insight about your code
Samples
Don't like certain keywords? Use CSS to replace with something you prefer
es.FunctionDeclaration > es.id:before,
es.FunctionExpression > es.id:before
{
content: 'λ ' /* Show a symbol instead of 'function' */
}
Don't like parentheses except around function parameters? Use CSS
es.params
{
margin-left: 4px;
}
es.params:before
{
content: '(';
}
es.params:after
{
content: ')';
}
es.params > es:before {
content: ',';
display:inline-block;
margin-right: 20px;
}
es.params > es:first-child:before {
content: '';
margin-right: 0px;
}