<commit_before>eslint-ui-concept
=================

A concept web UI and docs site for [ESLint](https://github.com/nzakas/eslint/) project.

## Install

Clone this repo, then `npm install` and `bower install` to get up and running.

## Grunt Tasks

`grunt preview` will build the basic site at `localhost:9000`.

`grunt production` builds the project and does image optimization, concatenation, file revving, and so on. It uses port 9001.

## To-Do List

My plans so far. Feel free to add to this list.

2014-01-06
- Host this project so people can preview it without building it locally.
- Mock up the documentation browsing experience.
- Mock up the demo page experience.

2014-01-07
- Try a concept for rule configuration in the web UI. Probably not manageable do to the sheer number of rules available, but it's worth exploring.

## The Design

### Forms

For the logo concept, I started with a heavy hexagon shape, intended to evoke standard hexagonal bolt heads and nuts. The outer hex is rotated 18 degrees to convey a sense of motion or activity. It also creates a slight visual imbalance. The inner hex is straight to convey a sense of alignment. The visual metaphor: one side is active but imbalanced, while the other is calm and aligned. The outer and inner hex shapes represent your code before and after ESLint, respectively.

### Typography

Work in progress.

### Colors

Why purple? It's not used much in the JS tooling space, so it helps keep things visually distinct. If anyone has strong reactions to that one way or another, there are plenty of other colors that would make sense.<commit_msg>added note about port numbers<commit_after>eslint-ui-concept
=================

A concept web UI and docs site for [ESLint](https://github.com/nzakas/eslint/) project.

## Install

Clone this repo, then `npm install` and `bower install` to get up and running.

## Grunt Tasks

`grunt preview` will build the basic site at `localhost:9000`.

`grunt production` builds the project and does image optimization, concatenation, file revving, and so on. It uses port 9001.

## To-Do List

My plans so far. Feel free to add to this list.

- Host this project so people can preview it without building it locally.
- Mock up the documentation browsing experience.
- Mock up the demo page experience.
- Try a concept for rule configuration in the web UI. Probably not manageable do to the sheer number of rules available, but it's worth exploring.

## The Design

### Forms

For the logo concept, I started with a heavy hexagon shape, intended to evoke standard hexagonal bolt heads and nuts. The outer hex is rotated 18 degrees to convey a sense of motion or activity. It also creates a slight visual imbalance. The inner hex is straight to convey a sense of alignment. The visual metaphor: one side is active but imbalanced, while the other is calm and aligned. The outer and inner hex shapes represent your code before and after ESLint, respectively.

### Typography

Work in progress.

### Colors

Why purple? It's not used much in the JS tooling space, so it helps keep things visually distinct. If anyone has strong reactions to that one way or another, there are plenty of other colors that would make sense.
{'fraction_non_alphanumeric': 0.06465651227852036, 'fraction_numerical': 0.011190550202051602, 'mean_word_length': 4.1079365079365076, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2510698', 'n_tokens_mistral': 859, 'n_tokens_neox': 804, 'n_words': 501}