diff --git a/doc/site/branching.markdown b/doc/site/branching.markdown index 56e0fe81..0fbc261c 100644 --- a/doc/site/branching.markdown +++ b/doc/site/branching.markdown @@ -3,7 +3,7 @@ *Control flow* is used to determine which chunks of code are executed and how many times. Expressions and statements for deciding whether or not to execute some code are called *branching* and are covered here. To execute something more than once, you'll want [*looping*](looping.html). -## Truthiness +## Truth Branching is conditional on the value of some expression. We take the entire universe of possible values and divide them into two buckets: some we consider "true" and the rest are "false". If the expression results in a value in the true bucket, we branch one way. Otherwise, we go the other way. @@ -48,13 +48,13 @@ And, of course, it can take a block too: The `&&` and `||` operators are lumped here under branching because they conditionally execute some code—they short-circuit. Both of them are infix operators, and, depending on the value of the left-hand side, the right-hand operand expression may or may not be evaluated. -An `&&` ("logical and") expression evaluates the left-hand argument. If it's falsey, it returns that value. Otherwise it evaluates and returns the right-hand argument. +An `&&` ("logical and") expression evaluates the left-hand argument. If it's false, it returns that value. Otherwise it evaluates and returns the right-hand argument. :::dart IO.print(false && 1) // false IO.print(1 && 2) // 2 -An `||` ("logical or") expression is reversed. If the left-hand argument is truthy, it's returned, otherwise the right-hand argument is evaluated and returned: +An `||` ("logical or") expression is reversed. If the left-hand argument is true, it's returned, otherwise the right-hand argument is evaluated and returned: :::dart IO.print(false || 1) // 1 diff --git a/doc/site/fibers.markdown b/doc/site/fibers.markdown index 7da326a6..e3f5aa62 100644 --- a/doc/site/fibers.markdown +++ b/doc/site/fibers.markdown @@ -3,9 +3,9 @@ Fibers are a key part of Wren. They form its execution model, its concurrency story and take the place of exceptions in [error handling](error-handling.html). -They are a bit like threads except they are *cooperatively* scheduled. That means Wren won't stop running a fiber and switch to another until you tell to. You don't have to worry about context switches at random times and all of the headaches those cause. +They are a bit like threads except they are *cooperatively* scheduled. That means Wren doesn't pause one fiber and switch to another until you tell it to. You don't have to worry about context switches at random times and all of the headaches those cause. -They are scheduled entirely by Wren, so they don't use OS thread resources, or require heavyweight context switches. They just need a bit of memory for their stacks. A fiber will get garbage collected like any other object when not referenced any more, so you can create them freely. +Fibers are managed entirely by Wren, so they don't use OS thread resources, or require heavyweight context switches. They just need a bit of memory for their stacks. A fiber will get garbage collected like any other object when not referenced any more, so you can create them freely. They are lightweight enough that you can, for example, have a separate fiber for each entity in a game. Wren can handle thousands of them without any trouble. For example, when you run Wren in interactive mode, it creates a new fiber for every line of code you type in. diff --git a/doc/site/getting-started.markdown b/doc/site/getting-started.markdown index e58969ec..7b2f8b7d 100644 --- a/doc/site/getting-started.markdown +++ b/doc/site/getting-started.markdown @@ -28,7 +28,7 @@ You can exit the interpreter using good old Ctrl-C or Ctrl-D, or just throw your ## Running scripts -The standalone interpreter can also load scripts from files and run them. Just pass the name of the script to wren. Create a file named `my_first_script.wren` in your favorite text editor and paste this into it: +The standalone interpreter can also load scripts from files and run them. Just pass the name of the script to wren. Create a file named "my_script.wren" in your favorite text editor and paste this into it: :::dart for (yPixel in 0...24) { @@ -54,7 +54,7 @@ The standalone interpreter can also load scripts from files and run them. Just p Now run: :::bash - $ ./wren my_first_script.wren + $ ./wren my_script.wren Neat, right? You're a Wren programmer now! The next step is to [read more docs](syntax.html) and learn your way around the language. If you run into bugs, or have ideas or questions, any and all of the following work: diff --git a/doc/site/index.markdown b/doc/site/index.markdown index 7a59cc66..cac71e4f 100644 --- a/doc/site/index.markdown +++ b/doc/site/index.markdown @@ -1,4 +1,4 @@ -^title Welcome! +^title Welcome Wren is a *small, clean, fast, class-based scripting language.* Think Smalltalk in a Lua-sized package. diff --git a/doc/site/performance.markdown b/doc/site/performance.markdown index a98a3257..f8235130 100644 --- a/doc/site/performance.markdown +++ b/doc/site/performance.markdown @@ -138,7 +138,7 @@ On compilers that support it, Wren's core bytecode interpreter loop uses somethi Doing that using an actual `switch` confounds the CPU's [branch predictor](http://en.wikipedia.org/wiki/Branch_predictor): there is basically a single branch point for the entire interpreter. That quickly saturates the predictor and it just gets confused and fails to predict anything, which leads to more CPU stalls and pipeline flushes. -Using computed gotos gives you a separate branch point at the end of each instruction. Each gets its own branch prediction, which oftens succeed since some instruction pairs are more common than others. In my rough testing, this made a 5-10% performance difference. +Using computed gotos gives you a separate branch point at the end of each instruction. Each gets its own branch prediction, which often succeeds since some instruction pairs are more common than others. In my rough testing, this makes a 5-10% performance difference. ### A single-pass compiler diff --git a/doc/site/qa.markdown b/doc/site/qa.markdown index dee68f6b..a60bd44e 100644 --- a/doc/site/qa.markdown +++ b/doc/site/qa.markdown @@ -3,7 +3,7 @@ ## Why did you create Wren? -Most creative endeavors aren't immediately met with existential crises, but for programmers don't seem to like new languages. Here's the niche I'm trying to fill: +Other creative endeavors aren't immediately met with existential crises, but for some reason programmers don't seem to like new languages. Here's the niche I'm trying to fill: There are a few scripting languages used for embedding in applications. Lua is the main one. TCL used to be. There's also Guile, increasingly JavaScript, and some applications embed Python. I'm an ex-game developer, so when I think "scripting", I tend to think "game scripting". diff --git a/doc/site/style.scss b/doc/site/style.scss index 162693ab..157ebce2 100644 --- a/doc/site/style.scss +++ b/doc/site/style.scss @@ -1,9 +1,10 @@ -$header: "Dosis", helvetica, arial, sans-serif; +$header: "Sanchez", helvetica, arial, sans-serif; +$subheader: "Lato", helvetica, arial, sans-serif; $body: "Source Sans Pro", georgia, serif; $code: "Source Code Pro", Menlo, Monaco, Consolas, monospace; -$dark: hsl(200, 30%, 20%); -$light: hsl(30, 20%, 92%); +$dark: hsl(200, 20%, 30%); +$light: hsl(0, 0%, 100%); $gray-10: mix($dark, $light, 10%); $gray-20: mix($dark, $light, 20%); $gray-30: mix($dark, $light, 30%); @@ -12,49 +13,35 @@ $gray-50: mix($dark, $light, 50%); $gray-60: mix($dark, $light, 60%); $gray-80: mix($dark, $light, 80%); -$text: hsl(30, 10%, 40%); +$text: mix($light, #000, 30%); -$code-color: hsl(30, 5%, 55%); -$code-bg: mix($light, #fff, 50%); +$code-color: hsl(200, 20%, 40%); +$code-bg: hsl(200, 20%, 97%); -$blue: hsl(200, 60%, 50%); -$blue-hover: hsl(200, 100%, 80%); -$blue-dark: hsl(200, 80%, 30%); -$blue-glow: hsla(200, 100%, 50%, 0.4); - -// TODO: Green is not currently used. -$green: hsl(100, 70%, 35%); -$green-light: hsl(100, 70%, 45%); -$green-hover: hsl(100, 80%, 70%); -$green-dark: hsl(100, 70%, 20%); -$green-glow: hsla(100, 70%, 50%, 0.5); - -$gold: hsl(40, 70%, 50%); -$gold-hover: hsl(40, 70%, 80%); -$gold-dark: hsl(40, 80%, 30%); -$gold-glow: hsla(40, 70%, 50%, 0.4); +$link: hsl(200, 40%, 50%); +$link-hover: hsl(200, 100%, 80%); +$link-dark: hsl(200, 80%, 30%); +$link-glow: hsla(200, 100%, 50%, 0.4); * { -moz-box-sizing: border-box; box-sizing: border-box; } -body, code, h1, h2, h3, p, pre, tt { +body, code, h1, h2, h3, p, pre { margin: 0; padding: 0; } body { background: $light; - color: hsl(40, 10%, 40%); + color: $text; font: 17px/26px $body; } .page { - position: relative; margin: 0 auto; - padding: 0 20px; - width: 840px; + width: 800px; // Clear contents. &:after { @@ -64,84 +51,60 @@ body { } } -.nav-column { - float: left; - width: 240px; -} - .main-column { - margin-left: 280px; + position: relative; + width: 560px; } header { .page { - height: 150px; + height: 120px; } - background: $dark; + background: $gray-80; + border-bottom: solid 1px $dark; h1 { position: absolute; - left: 20px; - bottom: 0; + left: 0; + top: 63px; padding: 0; - font: 64px $header; - font-weight: 300; + font: 400 48px $header; letter-spacing: 2px; } h2 { position: absolute; - right: 20px; - bottom: 11px; + right: 0; + top: 72px; padding: 0; - font: 18px $header; - font-weight: 300; - letter-spacing: 1px; - color: hsl(200, 30%, 40%); + font: 500 13px $subheader; + text-transform: uppercase; + letter-spacing: 2px; + color: $gray-50; } a { - color: $blue; + color: $gray-20; } a:hover { - color: $blue-hover; - text-shadow: 0 0 6px $blue-glow; - } -} - -.header-bar { - height: 100px; - background: $gray-10; - border-top: solid 1px $gray-20; - border-bottom: solid 1px white; - - h1 { - padding-top: 30px; - font: 48px/60px $header; - font-weight: 400; - color: $gray-60; - - small { - font-size: 36px; - font-weight: 400; - color: $gray-40; - } + color: $link-hover; + text-shadow: 0 0 6px $link-glow; } } nav { - @extend .nav-column; - - padding-top: 20px; + float: right; + width: 160px; + padding-top: 110px; h2 { color: $gray-30; - font: normal 18px $header; - font-weight: 300; + font: 500 11px $subheader; + text-transform: uppercase; + letter-spacing: 2px; margin: 0; - letter-spacing: 1px; } ul { @@ -150,27 +113,33 @@ nav { } li { - font: 15px $body; - font-weight: 400; + font: 16px $body; + color: $gray-30; list-style-type: none; margin: 0 0 4px 0; } } +h1 { + padding-top: 30px; + font: 500 36px/60px $header; + color: $link; +} + h2 { - font: normal 30px $header; + font: 500 24px $header; margin: 24px 0 0 0; - color: $blue; + color: $link; } h3 { - font: normal 24px $header; + font: 500 24px $header; margin: 24px 0 0 0; - color: $blue; + color: $link; } a { - color: $blue; + color: $link; text-decoration: none; transition: color 0.2s, text-shadow 0.2s; outline: none; @@ -182,7 +151,7 @@ main { } a:hover { - color: $blue-dark; + color: $link-dark; } .header-anchor { @@ -196,7 +165,7 @@ h3:hover > .header-anchor { h2:hover > .header-anchor:hover, h3:hover > .header-anchor:hover { - color: $blue-dark; + color: $link-dark; } p, li { @@ -211,9 +180,9 @@ code, pre { color: $code-color; font: 14px $code; background: $code-bg; - border-radius: 4px; - border-bottom: solid 1px $gray-10; - border-top: solid 1px #fff; + border-radius: 2px; + border: solid 1px hsl(200, 20%, 93%); + border-bottom: solid 1px hsl(200, 20%, 80%); } code { @@ -234,8 +203,18 @@ footer { margin-top: 20px; padding: 20px 0 40px 0; font: 14px $body; - background: hsl(40, 5%, 60%); - color: hsl(40, 15%, 85%); + background: $gray-80; + color: $gray-20; + border-top: solid 1px $dark; + text-align: center; + + a { + color: $link-hover; + } + + a:hover { + color: $link; + } } // Syntax highlighting. @@ -244,51 +223,14 @@ footer { span.c1, span.cm { color: mix($code-color, $code-bg, 60%); } // Keywords. - span.k, span.kd, span.kc { color: $blue; } + span.k, span.kd, span.kc { color: hsl(200, 80%, 50%); } // Numbers. - span.m, span.mi { color: $green; } + span.m, span.mi { color: hsl(90, 80%, 35%); } // Strings. - span.s, span.s2 { color: $gold; } - span.se { color: mix($gold, $gold-dark, 50%); } -} - -// Category colors. -body.reference { - a { - color: $gold; - } - - a:hover { - color: $gold-dark; - } - - header { - a:hover { - color: $gold-hover; - } - } - - main { - h2, h3 { - color: $gold; - } - - .header-anchor { - color: $light; - } - - h2:hover > .header-anchor, - h3:hover > .header-anchor { - color: $gray-10; - } - - h2:hover > .header-anchor:hover, - h3:hover > .header-anchor:hover { - color: $gold-dark; - } - } + span.s, span.s2 { color: hsl(45, 70%, 50%); } + span.se { color: hsl(35, 70%, 50%); } } // Bar charts on the performance page. @@ -311,59 +253,96 @@ table.chart { display: inline-block; font: 13px $body; color: $light; - background: $blue; - border-bottom: solid 1px $blue-dark; + background: $link; + border-bottom: solid 1px $link-dark; text-align: right; border-radius: 2px; } .chart-bar.wren { - background: mix($blue, $blue-dark, 30%); - border-bottom: solid 1px $blue-dark; + background: mix($link, $link-dark, 30%); + border-bottom: solid 1px $link-dark; } } @media only screen and (max-width: 839px) { // 36 pixel columns. - .page { width: 760px; } - .nav-column { width: 216px; } - .main-column { margin-left: 252px; } + .page { width: 720px; } + nav { width: 144px; } + .main-column { width: 504px; } } @media only screen and (max-width: 759px) { // 32 pixel columns. - .page { width: 680px; } - .nav-column { width: 192px; } - .main-column { margin-left: 224px; } + .page { width: 640px; } + nav { width: 128px; } + .main-column { width: 448px; } +} + +@media only screen and (max-width: 679px) { + // 28 pixel columns. + .page { width: 560px; } + nav { width: 112px; } + .main-column { width: 392px; } + + header h2 { + font-size: 12px; + letter-spacing: 1px; + } } @media only screen and (max-width: 639px) { - .page { + .page { width: 100%; } + + nav { + float: none; + width: 100%; + padding: 10px 10px; + margin: 0; + background: $gray-10; + text-align: center; + + section { + display: inline-block; + vertical-align: top; + text-align: left; + width: 30%; + } + } + + .main-column { + padding: 0 20px; width: 100%; } - .nav-column { display: none; } - .main-column { margin-left: 0; } header { h1 { position: relative; + top: 10px; left: 0; text-align: center; } h2 { position: relative; + top: 0; right: 0; text-align: center; + font-size: 13px; + letter-spacing: 2px; } } - nav { - display: none; - } - main { float: none; width: 100%; } + + pre { + font-size: 13px; + } + + footer { + padding: 20px 20px 40px 20px; + } } diff --git a/doc/site/template.html b/doc/site/template.html index 44bba36d..77f32ceb 100644 --- a/doc/site/template.html +++ b/doc/site/template.html @@ -4,7 +4,7 @@ {title} – Wren - + @@ -12,59 +12,60 @@
-

wren

-

a classy little scripting language

+
+

wren

+

a classy little scripting language

+
-
-
-
-

{category}

-
-
-

{title}

-
-
-
+

{title}

{html}