massive CL is massive

src/site/index.html

 ---
-layout: default
-header:
-  css: ["/css/dartboard.css"]
+layout: homepage
 ---
 
-<h2> A new platform for structured web apps</h2>
+<article class="homepage">
 
 <section>
-                
-  <div class="homepage-intro">
-    <p>
-      With the Dart platform,
-      you can write code
-      that runs on servers and in modern web browsers.
-      Dart compiles to JavaScript,
-      so your Dart web apps will work in multiple browsers
-      (not just ours).
-    </p>
-
-    <p>
-      The Dart platform includes
-      a language, libraries, an editor,
-      a virtual machine (VM)
-      for both servers and browsers,
-      and a compiler to JavaScript.
-    </p>
-
-    <p>
-      Dart is still in preview, so
-      try it out and tell us what you think.
-    </p>
-
-{% comment %}
-<!-- Important announcement? Put it here. -->
-    <p style="border-radius: 5px; background-color: #55DDCA; padding: 5px">
-      <strong>New!</strong> ANNOUNCE SOMETHING GREAT AND LINK TO MORE INFO.
-    </p>
-{% endcomment %}
+
+  <div class="row" id="top-mast">
+    <div class="span12 contents">
+      <img class="logo" src="/imgs/dart-logo.png" width="268" height="116">
+      <h1>
+        Build HTML5 apps for the modern web
+      </h1>
+      <p>
+        Dart brings structure to web app engineering
+        with a new language, libraries, and tools.
+      </p>
+      <div>
+        <ul class="buttons">
+          <li class="download">
+            <a href="/downloads.html" class="btn btn-primary btn-large"> Download now </a>
+          </li>
+          <li>
+            <div class="g-plus" data-width="170" data-height="69" data-href="//plus.google.com/109866369054280216564?rel=publisher"></div>
+          </li>
+          <li class="twitter">
+            <a href="https://twitter.com/dart_lang" class="twitter-follow-button" data-show-count="false" data-size="large">Follow @dart_lang</a>
+          </li>
+        </ul>
+      </div>
+    </div>
   </div>
 
-  <script src="http://feeds.feedburner.com/DartNewsUpdates?format=sigpro" type="text/javascript" ></script><noscript><p>Subscribe to RSS headline updates from: <a href="http://feeds.feedburner.com/DartNewsUpdates"></a></p> </noscript>
 </section>
 
-
 <section>
-<h2>Get started</h2>
-
-<p>
-Read a <a href="/docs/technical-overview/">technical overview</a>,
-take a <a href="/language-tour/">language tour</a>, or
-download <a href="/docs/editor/getting-started/">Dart Editor</a>.
-Or play with Dart code right here in your browser.
-</p>
-
-
-<div id="samples">
-<label for="samples-list" style="display:none">Dart code examples:</label>
-  <select id="samples-list">
-    <option value="hello">Hello, Dart!</option>
-    <option value="fib">Fibonacci</option>
-    <option value="point">Point</option>
-  </select>
+
+  <div class="row callouts">
+    <div class="span4">
+      <h2><i class="icon-ok"></i> Familiar</h2>
+      <p>
+        Dart is a <strong>class-based, object-oriented language</strong>
+        with lexical scope, closures, and optional typing.
+        Dart addresses issues with current web programming languages
+        and is <strong>easy to learn</strong> for a wide range of developers.
+        <a href="#structured-language">Learn more</a>
+      </p>
+<div class="visible-desktop">
+{% highlight dart %}
+#import('dart:html');
+
+main() {
+  var msg = query('#msg');
+  var btn = new ButtonElement();
+  btn.on.click.add((e) => msg.text = 'Dart!');
+  document.nodes.add(btn);
+}
+{% endhighlight %}
 </div>
-
-<code id="samples-editor" class="codes for-samples">main() {
-  print('Hello, Dart!');
-}</code>
-
-{% include samples.html %}
+<div class="visible-tablet visible-phone">
+{% highlight dart %}
+#import('dart:html');
+
+main() {
+  var msg = query('#msg');
+  var btn = new ButtonElement();
+  btn.on.click.add((e) {
+    msg.text = 'Dart!'
+  });
+  document.nodes.add(btn);
+}
+{% endhighlight %}
+</div>
+    </div>
+
+    <div class="span4">
+      <h2><i class="icon-cogs"></i> Productive</h2>
+      <p>
+        Dart Editor and the SDK provide
+        an <strong>integrated development and debugging</strong> experience. The editor
+        supports refactoring, breakpoints, code completion, code
+        navigation, and more. The SDK contains the stand-alone virtual
+        machine, a <strong>package manager</strong>, and Chromium with an embedded
+        Dart VM.
+        <a href="#productive-tools">Learn more</a>
+      </p>
+      <p class="img">
+        <img src="/imgs/homepage/editor-full.png">
+      </p>
+    </div>
+
+    <div class="span4">
+      <h2><i class="icon-globe"></i> Ubiquitous</h2>
+      <p>
+        Dart <strong>compiles to JavaScript</strong>,
+        so you can use it for web apps in all modern desktop and mobile browsers.
+        Our JavaScript compiler generates minimal code thanks to tree-shaking.
+        Dart apps can also <strong>run on the server</strong>, in a stand-alone
+        Dart VM.
+      </p>
+      <p class="img">
+        <img src="/imgs/homepage/server-desktop-phone.png">
+      </p>
+    </div>
+  </div> <!-- /.row -->
+
 </section>
 
-<script async type="text/javascript"
-  src="http://try.dartlang.org/dartboard.dart.app.js">
-</script>
-
-
+<section>
+
+  <div class="row callouts">
+    <div class="span4">
+      <h2><i class="icon-play"></i> Start</h2>
+      <ul>
+        <li><a href="/docs/editor/">Get the editor and SDK</a></li>
+        <li><a href="/docs/technical-overview/">Read the technical overview</a></li>
+        <li><a href="/samples/">Tour the samples</a></li>
+        <li><a href="http://www.youtube.com/watch?v=vT1KmTQ-1Os"
+          title="Introduction to Dart">Watch an intro video</a></li>
+      </ul>
+    </div>
+
+    <div class="span4">
+      <h2><i class="icon-book"></i> Learn</h2>
+      <ul>
+        <li><a href="/docs/language-tour/">Follow the language tour</a></li>
+        <li><a href="/docs/library-tour/">Follow the library tour</a></li>
+        <li><a href="http://synonym.dartlang.org/">See synonyms to JavaScript</a></li>
+        <li><a href="http://shop.oreilly.com/product/0636920025887.do">Read a free eBook</a></li>
+        <li><a href="/slides/2012/06/io12/Bullseye-Your-first-Dart-app-Codelab-GoogleIO2012.pdf">Practice a codelab</a></li>
+      </ul>
+    </div>
+
+    <div class="span4">
+      <h2><i class="icon-comments"></i> Participate</h2>
+      <ul>
+        <li><a href="/mailing-list">Send feedback to the mailing list</a></li>
+        <li><a href="https://plus.google.com/109866369054280216564/posts">Follow on G+</a>
+          and <a href="http://twitter.com/dart_lang">Twitter</a></li>
+        <li><a href="http://stackoverflow.com/questions/tagged/dart">Get answers at Stack Overflow</a></li>
+        <li><a href="http://dartbug.com/new">File feature requests and bugs</a></li>
+        <li><a href="http://code.google.com/p/dart/wiki/Contributing">Submit a patch</a></li>
+      </ul>
+    </div>
+  </div>
+
+</section>
+
+<div class="overview-transition">
+  <hr>
+  <h1>Overview</h1>
+</div>
+
+<section id="structured-language">
+
+  <div class="page-header">
+    <h1>A structured language <small>that's flexible and familiar</small></h1>
+  </div>
+
+  <div class="row" id="language-features">
+    <div class="span12">
+      <p>
+        Dart addresses issues with traditional web development languages
+        while remaining easy to learn. Thanks to optional types, Dart
+        scales from simple scripts to large apps. Learn more with the
+        <a href="/docs/language-tour/" title="Dart Language Tour">language tour</a>, or read the
+        <a href="/docs/spec/" title="Dart Language Specification">language spec</a>.
+      </p>
+
+      <ul class="nav nav-tabs">
+        <li class="active"><a href="#lang-classes" data-toggle="tab">Classes</a></li>
+        <li><a href="#lang-lexical-closures" data-toggle="tab">Lexical closures</a></li>
+        <li><a href="#lang-libraries" data-toggle="tab">Libraries</a></li>
+        <li><a href="#lang-optional-static-types" data-toggle="tab">Optional static types</a></li>
+        <li><a href="#lang-named-params" data-toggle="tab">Named parameters</a></li>
+        <li><a href="#lang-isolates" data-toggle="tab">Isolates</a></li>
+        <li><a href="#lang-more" data-toggle="tab">More</a></li>
+      </ul>
+
+      <div class="tab-content">
+          <div class="tab-pane active" id="lang-classes">
+            <div class="row">
+              <div class="span6">
+{% highlight dart %}
+class Point {
+  final num x, y;
+
+  Point(this.x, this.y);
+  Point.zero() : x = 0, y = 0;  // Named constructor
+                                // with an initializer list.
+
+  num distanceTo(Point other) {
+    var dx = x - other.x;
+    var dy = y - other.y;
+    return Math.sqrt(dx * dx + dy * dy);
+  }
+}
+{% endhighlight %}
+              </div>
+              <div class="span6">
+                <h2>Classes</h2>
+                <p>
+                  Dart supports classes as a fundamental structural
+                  building block for libraries and apps. Classes define
+                  the structure of an object, and you can extend them to create
+                  more specialized definitions. New features
+                  such as <a href="/articles/m1-language-changes/#no-explicit-interfaces">implicit interfaces</a> and
+                  <a href="http://www.dartlang.org/docs/language-tour/#named-constructors">named constructors</a>,
+                  make it easier to
+                  say more while typing less.
+                  Learn more about <a href="/docs/language-tour/#classes">classes in Dart</a>.
+                </p>
+              </div>
+            </div>
+          </div> <!-- /.tab-pane -->
+
+          <div class="tab-pane" id="lang-lexical-closures">
+            <div class="row">
+              <div class="span6">
+{% highlight dart %}
+makeAdder(num x) {
+  return (num y) => x + y;
+}
+
+main() {
+  var add2 = makeAdder(2);
+  assert(add2(3) == 5);
+}
+{% endhighlight %}
+              </div>
+              <div class="span6">
+                <h2>Lexical closures</h2>
+                <p>
+                  Dart has lexical scoping and a convenient closure
+                  mechanism. The <code>makeAdder</code> function returns a
+                  new function that closes around <code>x</code>.
+                  The <code>=&gt;</code> syntax is syntactic
+                  sugar for a one-line function with a return value.
+                </p>
+              </div>
+            </div>
+          </div> <!-- /.tab-pane -->
+
+          <div class="tab-pane" id="lang-libraries">
+            <div class="row">
+              <div class="span3">
+{% highlight dart %}
+// In widget.dart
+
+#library('widget');
+
+class Widget {
+  // ...
+}
+{% endhighlight %}
+              </div>
+              <div class="span3">
+{% highlight dart %}
+// In toolkit.dart
+
+#library('toolkit');
+#import('widget.dart');
+
+class Window extends Widget {
+  // ...
+}
+{% endhighlight %}
+              </div>
+              <div class="span6">
+                <h2>Libraries</h2>
+                <p>
+                  Use libraries to create reusable modules of functionality.
+                  Libraries can import other libraries, making it easy to
+                  publish and share code.
+                </p>
+              </div>
+            </div>
+          </div> <!-- /.tab-pane -->
+
+          <div class="tab-pane" id="lang-optional-static-types">
+            <div class="row">
+              <div class="span6">
+{% highlight dart %}
+class Point {
+  final num x, y;
+  Point(this.x, this.y);
+  // use types (num and Point) for
+  // the "surface area" of your code
+  num distanceTo(Point other) {
+    // var declares an
+    // untyped dynamic variable
+    var dx = x - other.x;
+    var dy = y - other.y;
+    return Math.sqrt(dx * dx + dy * dy);
+  }
+}
+{% endhighlight %}
+              </div>
+              <div class="span6">
+                <h2>Optional static types</h2>
+                <p>
+                  Think of Dart's static types as annotations or documentation
+                  that help clearly indicate your intent, without getting in
+                  your way. Use types when you want more help from your tools,
+                  or if you want to make it easier to understand how to use your
+                  code. Omit the type annotations if you're just scripting around or
+                  if you're trying to express something that is challenging to
+                  express with a single type annotation.
+                  Type annotations don't affect the runtime semantics. Learn more about
+                  <a href="http://www.dartlang.org/articles/optional-types/">optional
+                    types in Dart</a>.
+                </p>
+              </div>
+            </div>
+          </div> <!-- /.tab-pane -->
+
+          <div class="tab-pane" id="lang-named-params">
+            <div class="row">
+              <div class="span6">
+{% highlight dart %}
+flipFlags([bool on, bool up, bool hidden=false]) {
+  // ...
+}
+
+flipFlags(on: true, up: false, hidden: true);
+
+// Named params are also optional params
+flipFlags(on: true); // up == null, hidden == false
+{% endhighlight %}
+              </div>
+              <div class="span6">
+                <h2>Named parameters</h2>
+                <p>
+                  The meaning of <code>true</code>
+                  or <code>false</code> is hard to decipher without context.
+                  Using named parameters, you can write code that is easier
+                  to understand.
+                  As a bonus, named parameters are also optional parameters.
+                </p>
+              </div>
+            </div>
+          </div> <!-- /.tab-pane -->
+
+          <div class="tab-pane" id="lang-isolates">
+            <div class="row">
+              <div class="span6">
+{% highlight dart %}
+#import('dart:isolate');
+
+echo() {
+  port.receive((msg, SendPort replyTo) {
+    replyTo.send("Echo: $msg");
+  });
+}
+
+main() {
+  SendPort echoService = spawnFunction(echo);
+  echoService.call("Hello!").then((answer) => print(answer));
+}
+{% endhighlight %}
+              </div>
+              <div class="span6">
+                <h2>Isolates</h2>
+                <p>
+                  Create isolates for concurrent programming and to
+                  run third-party code more securely. Communicate between
+                  isolates by passing messages that are copied before
+                  received to ensure no state is ever shared. Dart uses
+                  isolates instead of shared-state threads for safer
+                  parallel programming.
+                </p>
+                <p>
+                  The <code>echo()</code> function is run in an isolate,
+                  which is created with <code>spawnFunction</code>.
+                  A message is sent by <code>call</code> and an answer
+                  is printed.
+                </p>
+              </div>
+            </div>
+          </div> <!-- /.tab-pane -->
+
+          <div class="tab-pane" id="lang-more">
+            <p>
+              The Dart language contains many more useful and productive
+              features.
+              Check out a sample:
+            </p>
+            <ul>
+              <li>better asynchronous programming with
+              <a href="/docs/library-tour/#asynchronous-programming">Futures</a></li>
+              <li>more explicit collections with <a href="/docs/language-tour/#generics">generics</a></li>
+              <li>better <a href="/docs/language-tour/#for-loops">for loops</a></li>
+              <li>error handling with <a href="/docs/language-tour/#exceptions">exceptions</a></li>
+            </ul>
+
+            <p>
+              Learn more about the Dart language by taking
+              a <a href="/docs/language-tour/">Language Tour</a>,
+              or reading the <a href="/docs/spec/">Dart Language Spec</a>.
+            </p>
+          </div> <!-- /.tab-pane -->
+
+        </div> <!-- /.tab-content -->
+    </div> <!-- /.span12 -->
+  </div> <!-- /#language-features -->
+
+</section>
+
+<section id="productive-tools">
+
+  <div class="page-header">
+    <h1>Productive and integrated tools <small>for faster development</small></h1>
+  </div>
+
+  <p>
+    Gone are the days of building web apps with plain text editors.
+    <a href="/docs/editor/">Dart Editor</a>, its static analysis engine,
+    and direct integration with Chromium+DartVM
+    helps you develop, debug, and maintain your apps.
+  </p>
+
+  <p>
+    Dart also ships a stand-alone
+    <a href="/docs/sdk/">Dart SDK</a> that contains the
+    <a href="/docs/dart2js/">dart2js compiler</a>,
+    the <a href="/docs/standalone-dart-vm/">Dart VM</a>
+    for running command-line apps, and the
+    <a href="/docs/pub-package-manager/">pub</a> package manager.
+  </p>
+
+  <ul class="thumbnails">
+    <li class="span6">
+      <div class="thumbnail">
+        <img src="/imgs/homepage/editor-code-completion.png" alt="Code completion in Dart Editor">
+        <h5>Code completion</h5>
+        <p>
+          Explore the methods and fields
+          available to the object you're working on.
+        </p>
+      </div>
+    </li>
+
+    <li class="span6">
+      <div class="thumbnail">
+        <img src="/imgs/homepage/editor-refactor.png" alt="Refactoring in Dart Editor">
+        <h5>Refactoring</h5>
+        <p>
+          Change your code structure
+          without changing the behavior.
+        </p>
+      </div>
+    </li>
+
+    <li class="span6">
+      <div class="thumbnail">
+        <img src="/imgs/homepage/editor-outline.png" alt="Code completion in Dart Editor">
+        <h5>Outline view</h5>
+        <p>
+          List the classes,
+          methods, and functions
+          in a simple tree display.
+        </p>
+      </div>
+    </li>
+
+    <li class="span6">
+      <div class="thumbnail">
+        <img src="/imgs/homepage/editor-debug.png" alt="Debugging in Dart Editor">
+        <h5>Debugger</h5>
+        <p>
+          Set breakpoints, inspect variables,
+          and step over, into, and out of code.
+        </p>
+      </div>
+    </li>
+
+    <li class="span6">
+      <div class="thumbnail">
+        <img src="/imgs/homepage/editor-warnings.png" alt="Static analysis warnings in Dart Editor">
+        <h5>Static analysis</h5>
+        <p>
+          See warnings when inconsistencies and potential problems are detected.
+        </p>
+      </div>
+    </li>
+
+    <li class="span6">
+      <div class="thumbnail">
+        <img src="/imgs/homepage/editor-callers.png" alt="Find callers for methods in Dart Editor">
+        <h5>Open callers</h5>
+        <p>
+          Quickly find all callers for a method, and easily jump to those locations.
+        </p>
+      </div>
+    </li>
+  </ul>
+
+</section>
+
+</article> <!-- /.homepage -->