Colors and Shapes

ideas for work with JavaScript syntax





Sergey @veged Berezhnoy

Fronteers 2014 Jam Session, October 8

Hello!

Sergey Berezhnoy

@veged

Colors

the days of black and white code

colors bring happines

Yet Another JavaScript Highlighter

github.com/veged/yajsh



highlighting can be more detailed and nuanced

semantics aware!

square brackets

[1, 2, 3]
[1, 2, 3][2]

curly braces

{ a: 1 }
function() { return { a: 1 } }

parentheses

alert(1)
alert((1 + 2) * 3)

declarations

var a = 1, b = 2;
function f(x) { return x }

commas

[1, 2, 3]
{ a: 1, b: 2, c: 3 }
var a = 1, b = 2;
function f(x, y) { return x + y }

statements

if(a) f(1) else f(2)
while(true) f()
try { f() } catch(e) { console.log(e) }

same idea for different editors and tools

Shapes

the are a lot of different code-styles

well known tools for simple checks

some tools for trivial reformatting

very few tools

for deeper structural code shaping

Krasota.js

github.com/veged/krasota.js



code can be reshaped intelligently

automagically!

indents and trailing spaces

{
    a: 1,
     b: 2,
    c: 3
}
{
    a: 1,
    b: 2,
    c: 3
}

all kind of spaces

{ a: 1, b: 2 };

[1, 2, 3];

while(true) f();
{ a : 1, b : 2 };

[ 1, 2, 3 ];

while ( true ) f ();

single and multiple vars

var a = 1;
var b = 2; // xxx
var c = 3;
var a = 1,
    b = 2, // xxx
    c = 3;

comma-first

var a = 1;
var b = 2;
var c = 3;
var a = 1
  , b = 2
  , c = 3

you can personalise code shape

for different viewers

as well as highlighting!

Thank you!

Sergey @veged Berezhnoy

Yet Another JavaScript Highlighter

github.com/veged/yajsh

Krasota.js

github.com/veged/krasota.js