Skip to content

Commit

Permalink
web tweaks
Browse files Browse the repository at this point in the history
  • Loading branch information
weepy committed Jul 25, 2011
1 parent a6b772e commit d6a7a7f
Show file tree
Hide file tree
Showing 5 changed files with 39 additions and 42 deletions.
23 changes: 13 additions & 10 deletions web/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@

body {
background: #fff;
color: #04010e;
color: #332954;
font-size: 100%;
font-family: arial, "proxima-nova-1", "proxima-nova-2", sans-serif;
font-family: arial;
line-height: 1.4em;
}

Expand All @@ -20,6 +20,10 @@ body {

}

.section {
border-top: 1px dotted #aaa;
margin-bottom: 10px;
}


.download{
Expand All @@ -28,14 +32,14 @@ body {
margin-bottom: 0px;}

a{
color: #863087;
color: #007;
text-decoration: underline;
-webkit-transition: color 0.15s ease-out;
-moz-transition: color 0.15s ease-out;
}

a:hover{
color: #863027;}
color: #707;}


.download a{
Expand All @@ -58,11 +62,10 @@ p{
margin: 0 0 1.5em 0;}

h3 {
padding-top: 1em;
font-size: 2em;
font-size: 1.5em;
}
.container {
width: 600px;
width: 700px;
max-width: 1500px;
margin: 0 auto;
/* background-colord: #da4838;*/
Expand Down Expand Up @@ -131,8 +134,8 @@ h1 span.char4 {
margin-right: .035em;
}

::-moz-selection{ background: rgba(255,255,255, .3); color:#fff; }
::selection { background: rgba(255,255,255, .3); color: #fefcf2; }
::-moz-selection{ background: rgba(0,255,255, .3); color:#744; }
::selection { background: rgba(0,255,255, .3); color: #744; }


/*@media screen and (min-width: 700px) and (max-width:1500px) {*/
Expand Down Expand Up @@ -204,7 +207,7 @@ pre, textarea {
/* color: black;*/
color: black;
margin: 10px 10px 15px 0;
width: 600px;
width: 700px;
overflow: hidden;
}

Expand Down
49 changes: 24 additions & 25 deletions web/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Kaffeine - extended syntax for JavaScript</title><meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"><!-- stylesheets--><link rel="stylesheet" href="css/style.css" type="text/css"><link rel="stylesheet" href="css/sausage.css" type="text/css"><!-- javascripts--><!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--><script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script src="js/jquery.lettering-0.6.1.min.js"></script><script src="js/jquery.fittext.js"></script><script src="js/jquery.widget.js"></script><script src="js/jquery.sausage.js"></script><script src="try/kaffeine-browser.js"></script><script src="js/highlighter.js"></script><script src="js/app.js"></script><script>$(document).ready(function() {
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Kaffeine - extended syntax for JavaScript</title><meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"><link rel="stylesheet" href="css/style.css" type="text/css"><link rel="stylesheet" href="css/sausage.css" type="text/css"><!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--><script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script src="js/jquery.lettering-0.6.1.min.js"></script><script src="js/jquery.fittext.js"></script><script src="js/jquery.widget.js"></script><script src="js/jquery.sausage.js"></script><script src="try/kaffeine-browser.js"></script><script src="js/highlighter.js"></script><script src="js/app.js"></script><script>$(document).ready(function() {
$("h1").lettering();
});
</script><body><div class="container"><header><h1>Kaffeine</h1><p class="download">Extending JavaScript for fun and profit
<a href="https://github.com/davatron5000/FitText.js">Download on Github</a></p></header><h2>OVERVIEW</h2><p>Kaffeine is a set of extensions to the JavaScript syntax that attempt to make it nicer to use. It compiles directly into JavaScript that is very similar, readable and line for line equivalent to the input (for easy debugging).</p><p>Kaffeine can be compiled to JavaScript offline, or as needed in a browser. Offline compiler support is provided via Node, and you can also use Kaffeine to power Node server apps.</p><h3>How does it compare with CoffeeScript?</h3><p>Kaffeine and CoffeeScript are similar in that they both compile to plain JavaScript code that runs in a browser or JS server environment. However, the design decisions underpinning Kaffeine are different to CoffeeScript: </p><ul><li>compiles line-for-line</li><li>accepts standard JavaScript</li><li>comments are preserved</li><li>can simplify asynchronous programming</li><li>outputs JavaScript that is very similar to input</li><li>whitespace rules are the same as javascript (meaning you can structure your program as you wish)</li></ul><h3>Why is line-for-line important?</h3><p>Not all JavaScript compilers respect the line numbering of your original source code. When the result runs perfectly, no problem, but this change in vertical layout has a dire effect on debugging. For instance, if something goes wrong on Line 475 of a randomly compiled program, how would anyone know where the problem was? Kaffeine addresses this by maintaining a strict 1:1 line ratio.</p><div class="section"><h2>Overview</h2><textarea>// Implicit variable declarions
<a href="https://github.com/davatron5000/FitText.js">Download on Github</a></p></header><p>Kaffeine is a set of extensions to the JavaScript syntax that attempt to make it nicer to use. It compiles directly into JavaScript that is very similar, readable and line for line equivalent to the input (for easy debugging).</p><p>Kaffeine can be compiled to JavaScript offline, or as needed in a browser. Offline compiler support is provided via Node, and you can also use Kaffeine to power Node server apps.</p><h3>How does it compare with CoffeeScript?</h3><p>Kaffeine and CoffeeScript are similar in that they both compile to plain JavaScript code that runs in a browser or JS server environment. However, the design decisions underpinning Kaffeine are different to CoffeeScript: </p><ul><li>compiles line-for-line</li><li>accepts standard JavaScript</li><li>comments are preserved</li><li>can simplify asynchronous programming</li><li>outputs JavaScript that is very similar to input</li><li>whitespace rules are the same as javascript (meaning you can structure your program as you wish)</li></ul><h3>Why is line-for-line important?</h3><p>Not all JavaScript compilers respect the line numbering of your original source code. When the result runs perfectly, no problem, but this change in vertical layout has a dire effect on debugging. For instance, if something goes wrong on Line 475 of a randomly compiled program, how would anyone know where the problem was? Kaffeine addresses this by maintaining a strict 1:1 line ratio.</p><div class="section"><h2>Overview</h2><textarea>// Implicit variable declarions
zoo = {}
// Function arrow syntax and implicit formal parameter list
hello = -> { "Greetings!" }
Expand All @@ -17,11 +17,10 @@

// For loop extensions (of)
for user of users
send.welcome user
send.welcome user

// Unwrapping async calls via the ! postfix
if Job.count! > 10 {
data = retrieve!
process data
}
</textarea></div><div class="section"><h3>arrow function alias</h3><p>Kaffeine supports a simple arrow as an alias to a function call. </p><textarea>ok = (timeout) -> {
Expand All @@ -42,7 +41,7 @@
</textarea><p>Kaffeine inserts newlines here to make the text output as it looks, but to prohibit the extra newlines - use the normal JavaScript backslash: </p><textarea>a = "English breakfast:\n* eggs\n* bacon\n* sausages"

</textarea><h3>Ruby-style symbols</h3><p>Ruby style symbols are converted to strings. Symbols are useful for easily observing which values are _state_ and which are output such as HTML or logging. They don’t share Ruby’s immutabilty (i.e. you can still perform string operations on them).</p><textarea>if state is :end {
state = :start
state = :start
run()
}
</textarea></div><div class="section"><h3>Unwrapping async calls with ! (bang)</h3><p>A ! postfix to a function call signals to Kaffeine that this is an unwrapped async call masquerading as a normal function call. Kaffeine will recompile it into a normal function call with the follow code wrapping into an async callback:</p><textarea>// simple call
Expand All @@ -54,21 +53,21 @@
meal.complete = ok

</textarea><This>is super useful for simplifying nested asynchronous calls (esp with nodejs) and works nicely in a number of scenarios.</This><p>When does the function unwrapping ‘stop’?</p><ul><li>At an unmatched right bracket (e.g. the end of a function or arg list)</li><li>The end of the file</li><li>Or at the <code>—–</code> operator</li></ul><textarea>x = -> {
result = shoot! user1
if result, user1.die!
---
result = shoot! user2
if result, user.die!
---
result = shoot! user3
if result, user.die!
result = shoot! user1
if result, user1.die!
---
result = shoot! user2
if result, user.die!
---
result = shoot! user3
if result, user.die!
---
}

</textarea><h4>@ in bang function calls</h4><p>In the case of unwrapped async calls via the bang postfix, @ will actually refer to the outer this.</p><p>Since we can refer to both via this method, binding becomes unnecessary:</p><textarea>Class.cacheData = -> {
d = $.get! "/"
@data = d // outer this
this.data = d // inner this
d = $.get! "/"
@data = d // outer this
this.data = d // inner this
return @
}
</textarea></div><div class="section"><h3>for loop extensions</h3><p>Kaffeine adds the extra keywords <code>of</code> for looping through arrays and the <code>from</code> keyword to avoid methods that are not direct members.</p><textarea>A = [7,3,4]
Expand Down Expand Up @@ -96,16 +95,16 @@


</textarea><p>keywords such as <code>for</code> and <code>if</code> can omit their brackets (as long as the statement does not become amiguous). The brackets are inserted either before a newline, a left brace ‘{’ or a comma (for one liners)</p><textarea>for i in A
run A[i]
run A[i]

if name == "john", return false

while we_have_time {
run tasks
}
</textarea></div><div class="section"><h3>this, this.constructor</h3><p>This module provides an Ruby style aliases for:</p><ul><li><code>this</code> in the form of @</li><li><code>this.constructor</code> in the form of @@</li></ul><textarea>Animal = (type, color) -> {
@type = type
@@count += 1
@type = type
@@count += 1
@@all.push @
}
</textarea></div><div class="section"><h3>Hash Alias</h3><p># is a shortcut for referring to the first argument in a function. Useful for terse function definitions:</p><textarea>square = -> #*#
Expand Down Expand Up @@ -142,21 +141,21 @@
</textarea></div><div class="section"><h3>Implicit return</h3><p>Kaffeine's arrow function syntax juices up the function-calling process by determining a completion value based on the last statement in the block, and returning that automatically.</p><p>The last statement of a function defined with <code>-></code> will be automagically returned. For example</p><textarea>getName = -> @name

</textarea><p>This will only work for returnable statements, i.e. variables, objects and functions. So an final if statement will result no return value</p><textarea>getName = -> {
if truthy
@name
if truthy
@name

}

</textarea><p>Note: this will be added in a future version. See Roadmap</p><h4>Gotcha: be careful with using function arrow syntax with constructors</h4><p>A constructor function won't work properly if it returns an array or an object. To avoid mistakenly creating a dud constructor, you can either fall back to using the function keyword, or opt-in to Kaffeine's class keyword, which offers enhanced inheritance support.</p></div><div class="section"><h3>English comparison operators</h3><p>The english words is, or, not, and, isnt are converted to the keywords ===, ||, !, && !== respecively.</p><p>Note that the conversion will not occur if they occur next to an operator, meaning that these keywords can still be used as variable identifiers, although it's not recommended. For examples, you can still write:</p><textarea>if x is 100 or y isnt run(), return
is = require "assert"
</textarea></div><div class="section"><h3>Implicit variable declaration</h3><p>This module provides support for omitting the var keyword: the variables will be automagically defined in the closest relevant closure.</p><h4>Examples</h4><textarea>x = 1, a = 3
-> {
x = 2
x = 2
y = 2
}

</textarea><p>The var will be pulled to the top of the current closure:</p><textarea>-> {
x = 2
x = 2
var x
}

Expand All @@ -166,8 +165,8 @@
}
run()
</textarea></div><div class="section"><h3>Installation and Use</h3><p>npm install kaffeine</p><Use></Use></div><div class="section"><h3>Ideas going forward</h3><h4>Array comprehensions </h4><textarea>x = for y of myArray {
if y > 10, break
x += y
if y > 10, break
x += y
}

</textarea><h4>auto-slice arguments</h4><p>Within any function, a reference to arguments will be auto-converted to a sliced version (meaning it can be used as a proper array object).</p><h4>Existential ? operator</h4><p>extend implicit return through if blocks</p></div><footer><p>Kaffeine is brought to you by
Expand Down
6 changes: 2 additions & 4 deletions web/index.jade
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,10 @@ html(lang="en")
meta(charset="utf-8")
title Kaffeine - extended syntax for JavaScript
meta(name="viewport", content="width=device-width; initial-scale=1.0; maximum-scale=1.0;")
// stylesheets
link(rel="stylesheet", href="css/style.css", type="text/css")
link(rel="stylesheet", href="css/sausage.css", type="text/css")
// javascripts
/if IE
script(src="http://html5shiv.googlecode.com/svn/trunk/html5.js")
//if IE
script(src="http://html5shiv.googlecode.com/svn/trunk/html5.js")
script(src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js")
script(src="js/jquery.lettering-0.6.1.min.js")
script(src="js/jquery.fittext.js")
Expand Down
2 changes: 0 additions & 2 deletions web/sections/overview.jade
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
h2 OVERVIEW

p Kaffeine is a set of extensions to the JavaScript syntax that attempt to make it nicer to use. It compiles directly into JavaScript that is very similar, readable and line for line equivalent to the input (for easy debugging).

p Kaffeine can be compiled to JavaScript offline, or as needed in a browser. Offline compiler support is provided via Node, and you can also use Kaffeine to power Node server apps.
Expand Down
1 change: 0 additions & 1 deletion web/sections/started.jade
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,5 @@ textarea

// Unwrapping async calls via the ! postfix
if Job.count! > 10 {
data = retrieve!
process data
}

0 comments on commit d6a7a7f

Please sign in to comment.