https://github.com/keeyipchan/esgoggles

Browser ide for reading and exploring javascript code
https://github.com/keeyipchan/esgoggles

Last synced: about 1 month ago
JSON representation

Browser ide for reading and exploring javascript code

• Host: GitHub
• URL: https://github.com/keeyipchan/esgoggles
• Owner: keeyipchan
• Created: 2012-12-16T17:39:20.000Z (almost 12 years ago)
• Default Branch: master
• Last Pushed: 2023-07-10T00:30:27.000Z (over 1 year ago)
• Last Synced: 2024-08-01T12:34:32.545Z (4 months ago)
• Language: JavaScript
• Size: 1.11 MB
• Stars: 48
• Watchers: 2
• Forks: 7
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-starred - keeyipchan/esgoggles - Browser ide for reading and exploring javascript code (others)

README

        
esgoggles

=========

Browser ide for reading and exploring javascript code.

Demo 1 -- style 1: http://keeyipchan.github.com/esgoggles/demo/style1.html (use Chrome)

Demo 2 -- style 2 with variable scopes: http://keeyipchan.github.com/esgoggles/demo/style2.html (use Chrome)

## 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

```css

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

```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;

}

```

## Screenshots