update examples on homepage

also add highlighting and tests (in new directory, where it won't bloat the site)

staged at:

http://fpcode.dart-lang.appspot.com/#code

BUG=10797
R=sethladd@google.com

Committed: 324bcf7

[Kathy Walrath, 2013-08-07 23:24:35]

How's this for the new code section of the homepage?

http://fpcode.dart-lang.appspot.com/#code

We'll need to update the Web UI thing to Polymer soon, of course... But is this
good for now?

[Kathy Walrath, 2013-08-08 00:01:52]

Reload to see gentler highlighting colors.

http://fpcode.dart-lang.appspot.com/#code

[sethladd, 2013-08-08 05:06:29]

a few thoughts

https://chromiumcodereview.appspot.com/22528003/diff/1/src/tests/site/code/fu...
File src/tests/site/code/futures.dart (right):

https://chromiumcodereview.appspot.com/22528003/diff/1/src/tests/site/code/fu...
src/tests/site/code/futures.dart:9: });
how about a catchError. I think that's a cool feature of futures

https://chromiumcodereview.appspot.com/22528003/diff/1/src/tests/site/code/sy...
File src/tests/site/code/syntax.dart (right):

https://chromiumcodereview.appspot.com/22528003/diff/1/src/tests/site/code/sy...
src/tests/site/code/syntax.dart:6: num perimeter() => 2*height + 2*width; //
Function shorthand syntax.
should be a getter

[sethladd, 2013-08-08 05:09:11]

couple more

https://chromiumcodereview.appspot.com/22528003/diff/3002/src/tests/site/code...
File src/tests/site/code/webui/web/webui.dart (right):

https://chromiumcodereview.appspot.com/22528003/diff/3002/src/tests/site/code...
src/tests/site/code/webui/web/webui.dart:3: @observable String myString = '';
lets put this in a class, to get closer to polymer

https://chromiumcodereview.appspot.com/22528003/diff/3002/src/tests/site/code...
File src/tests/site/code/webui/web/webui.html (right):

https://chromiumcodereview.appspot.com/22528003/diff/3002/src/tests/site/code...
src/tests/site/code/webui/web/webui.html:13: <div>     Shouted: {{shouted}}
</div>
let's wrap these in a template, to get closer to polymer

[Kathy Walrath, 2013-08-08 17:09:38]

I've updated the samples (and they work) but not the homepage yet. Do these
changes look good? I wasn't sure about the Web UI changes, but they do work.

https://chromiumcodereview.appspot.com/22528003/diff/1/src/tests/site/code/fu...
File src/tests/site/code/futures.dart (right):

https://chromiumcodereview.appspot.com/22528003/diff/1/src/tests/site/code/fu...
src/tests/site/code/futures.dart:9: });
On 2013/08/08 05:06:29, sethladd wrote:
> how about a catchError. I think that's a cool feature of futures

Done.

https://chromiumcodereview.appspot.com/22528003/diff/1/src/tests/site/code/sy...
File src/tests/site/code/syntax.dart (right):

https://chromiumcodereview.appspot.com/22528003/diff/1/src/tests/site/code/sy...
src/tests/site/code/syntax.dart:6: num perimeter() => 2*height + 2*width; //
Function shorthand syntax.
On 2013/08/08 05:06:29, sethladd wrote:
> should be a getter

Done.

https://chromiumcodereview.appspot.com/22528003/diff/3002/src/tests/site/code...
File src/tests/site/code/webui/web/webui.dart (right):

https://chromiumcodereview.appspot.com/22528003/diff/3002/src/tests/site/code...
src/tests/site/code/webui/web/webui.dart:3: @observable String myString = '';
On 2013/08/08 05:09:12, sethladd wrote:
> lets put this in a class, to get closer to polymer

Done.

https://chromiumcodereview.appspot.com/22528003/diff/3002/src/tests/site/code...
File src/tests/site/code/webui/web/webui.html (right):

https://chromiumcodereview.appspot.com/22528003/diff/3002/src/tests/site/code...
src/tests/site/code/webui/web/webui.html:13: <div>     Shouted: {{shouted}}
</div>
On 2013/08/08 05:09:12, sethladd wrote:
> let's wrap these in a template, to get closer to polymer

Done.

[mem, 2013-08-08 18:14:24]

lgtm

On 2013/08/08 17:09:38, Kathy Walrath wrote:
> I've updated the samples (and they work) but not the homepage yet. Do these
> changes look good? I wasn't sure about the Web UI changes, but they do work.
> 
>
https://chromiumcodereview.appspot.com/22528003/diff/1/src/tests/site/code/fu...
> File src/tests/site/code/futures.dart (right):
> 
>
https://chromiumcodereview.appspot.com/22528003/diff/1/src/tests/site/code/fu...
> src/tests/site/code/futures.dart:9: });
> On 2013/08/08 05:06:29, sethladd wrote:
> > how about a catchError. I think that's a cool feature of futures
> 
> Done.
> 
>
https://chromiumcodereview.appspot.com/22528003/diff/1/src/tests/site/code/sy...
> File src/tests/site/code/syntax.dart (right):
> 
>
https://chromiumcodereview.appspot.com/22528003/diff/1/src/tests/site/code/sy...
> src/tests/site/code/syntax.dart:6: num perimeter() => 2*height + 2*width; //
> Function shorthand syntax.
> On 2013/08/08 05:06:29, sethladd wrote:
> > should be a getter
> 
> Done.
> 
>
https://chromiumcodereview.appspot.com/22528003/diff/3002/src/tests/site/code...
> File src/tests/site/code/webui/web/webui.dart (right):
> 
>
https://chromiumcodereview.appspot.com/22528003/diff/3002/src/tests/site/code...
> src/tests/site/code/webui/web/webui.dart:3: @observable String myString = '';
> On 2013/08/08 05:09:12, sethladd wrote:
> > lets put this in a class, to get closer to polymer
> 
> Done.
> 
>
https://chromiumcodereview.appspot.com/22528003/diff/3002/src/tests/site/code...
> File src/tests/site/code/webui/web/webui.html (right):
> 
>
https://chromiumcodereview.appspot.com/22528003/diff/3002/src/tests/site/code...
> src/tests/site/code/webui/web/webui.html:13: <div>     Shouted: {{shouted}}
> </div>
> On 2013/08/08 05:09:12, sethladd wrote:
> > let's wrap these in a template, to get closer to polymer
> 
> Done.

[Kathy Walrath, 2013-08-08 18:52:55]

OK, I've updated the homepage to match the new samples and make every
description link to more info.

Good to go?

http://fpcode.dart-lang.appspot.com/#code

[sethladd, 2013-08-08 19:00:32]

Sorry for the delay, I was able to really take a look.

https://chromiumcodereview.appspot.com/22528003/diff/32001/src/site/index.html
File src/site/index.html (right):

https://chromiumcodereview.appspot.com/22528003/diff/32001/src/site/index.htm...
src/site/index.html:144: You can find code examples in Dart Editor,
maybe say "dart editor welcome page" ? How would I find them?

https://chromiumcodereview.appspot.com/22528003/diff/32001/src/site/index.htm...
src/site/index.html:203: and get better help from tools.
Can we add how you get better help? e.g. "e.g. with better code completion,
refactorings, and warnings"

https://chromiumcodereview.appspot.com/22528003/diff/32001/src/site/index.htm...
src/site/index.html:250: [[highlight]].then[[/highlight]]((content) { //
Specifies what to do if the Future completes successfully.
how about .then((content) => print(content)) here?

https://chromiumcodereview.appspot.com/22528003/diff/32001/src/site/index.htm...
src/site/index.html:255: print('$error');
can you move this $error up to the first print? You already have a \n there. It
eliminates the second print

https://chromiumcodereview.appspot.com/22528003/diff/32001/src/site/index.htm...
src/site/index.html:291: <!-- HTML code: -->
What about showing a snippet from a real tutorial, and then adding a link to the
full tutorial to learn more? That way, it's more of a funnel, and if they have
further questions about how this all works, they know where to go.

https://chromiumcodereview.appspot.com/22528003/diff/32001/src/site/index.htm...
src/site/index.html:294: instantiate="if [[highlight]]shout[[/highlight]] !=
null">
s/instantiate/if

so, if="{{shout}}" should work (at least, it does in polymer)

https://chromiumcodereview.appspot.com/22528003/diff/32001/src/site/index.htm...
src/site/index.html:304: <script src="packages/browser/dart.js"></script>
we can probably drop these two scripts, yes?

https://chromiumcodereview.appspot.com/22528003/diff/32001/src/tests/site/cod...
File src/tests/site/code/syntax.dart (right):

https://chromiumcodereview.appspot.com/22528003/diff/32001/src/tests/site/cod...
src/tests/site/code/syntax.dart:20: ..onClick.listen(startOrEndTest);
can we connect this to the rectangle class? As this stands, the poor old
Rectangle is getting no love.

If you want to show libraries, don't use dart:html, try another like
dart:convert. That way, all the code in here is cohesive and runnable.

[Kathy Walrath, 2013-08-08 23:16:59]

All incorporated except for the syntax example. That's always harder than you'd
expect. I have a strawman in my comments (advice welcome!).

https://chromiumcodereview.appspot.com/22528003/diff/32001/src/site/index.html
File src/site/index.html (right):

https://chromiumcodereview.appspot.com/22528003/diff/32001/src/site/index.htm...
src/site/index.html:144: You can find code examples in Dart Editor,
On 2013/08/08 19:00:32, sethladd wrote:
> maybe say "dart editor welcome page" ? How would I find them?

Done.

https://chromiumcodereview.appspot.com/22528003/diff/32001/src/site/index.htm...
src/site/index.html:203: and get better help from tools.
On 2013/08/08 19:00:32, sethladd wrote:
> Can we add how you get better help? e.g. "e.g. with better code completion,
> refactorings, and warnings"

Done.

https://chromiumcodereview.appspot.com/22528003/diff/32001/src/site/index.htm...
src/site/index.html:250: [[highlight]].then[[/highlight]]((content) { //
Specifies what to do if the Future completes successfully.
On 2013/08/08 19:00:32, sethladd wrote:
> how about .then((content) => print(content)) here?

Done.

https://chromiumcodereview.appspot.com/22528003/diff/32001/src/site/index.htm...
src/site/index.html:255: print('$error');
On 2013/08/08 19:00:32, sethladd wrote:
> can you move this $error up to the first print? You already have a \n there.
It
> eliminates the second print

Done.

https://chromiumcodereview.appspot.com/22528003/diff/32001/src/site/index.htm...
src/site/index.html:291: <!-- HTML code: -->
On 2013/08/08 19:00:32, sethladd wrote:
> What about showing a snippet from a real tutorial, and then adding a link to
the
> full tutorial to learn more? That way, it's more of a funnel, and if they have
> further questions about how this all works, they know where to go.

I don't think there are any real Web UI tutorials that use templates and objects
in this way. This started out being a simplified version of shout, but we've
made it more polymer-like. Once we have Polymer, we can revisit this sample.

https://chromiumcodereview.appspot.com/22528003/diff/32001/src/site/index.htm...
src/site/index.html:294: instantiate="if [[highlight]]shout[[/highlight]] !=
null">
On 2013/08/08 19:00:32, sethladd wrote:
> s/instantiate/if

I think "if" is a polymer-ism. At least, I couldn't make it work.

> so, if="{{shout}}" should work (at least, it does in polymer)

Maybe that would work if shout were a boolean? Anyway, it doesn't work in Web UI
right now (even with instantiate).

https://chromiumcodereview.appspot.com/22528003/diff/32001/src/site/index.htm...
src/site/index.html:304: <script src="packages/browser/dart.js"></script>
On 2013/08/08 19:00:32, sethladd wrote:
> we can probably drop these two scripts, yes?

Done.

https://chromiumcodereview.appspot.com/22528003/diff/32001/src/tests/site/cod...
File src/tests/site/code/syntax.dart (right):

https://chromiumcodereview.appspot.com/22528003/diff/32001/src/tests/site/cod...
src/tests/site/code/syntax.dart:20: ..onClick.listen(startOrEndTest);
Any ideas for a good example that uses cascades? I suppose I could make
rectangle non-final. Or maybe make it an ellipse, which will require importing
dart:math for various calculations. Maybe something like this:

import 'dart:math';                  // Importing a library.

// Define functions either inside or outside of classes.
createGoldenEllipse(width) =>        // Function shorthand syntax (=>)
    new Ellipse(width, width*(1 + sqrt(5))/2);

class Ellipse implements Shape {     // Declaring a class.
  num width = 0;                     // With a property.
  num height = 0;                    // And another property.
  num get area => PI*width*height/4; // A property implemented with a getter.
  
  Ellipse(this.width, this.height);  // Compact constructor syntax.
  Ellipse.empty();                   // Named constructor.
  Ellipse.circle(num size) {         // Constructor with a body.
    width = height = size;
  }
  
  // Overriding Object's toString() method.
  String toString() => 'Ellipse: ${width}x${height} ($area)';
}

// Every app has a main() function, where execution starts.
main() {
  print(createGoldenEllipse(1));
  
  // The cascade operator (..) saves you from repetitive typing.
  var imperfectEllipse = createGoldenEllipse(1)
    ..width = 20
    ..height *= 10;
  
  print(imperfectEllipse);
}

abstract class Shape {
  num height;
  num width;
  num get area;
}

On 2013/08/08 19:00:32, sethladd wrote:
> can we connect this to the rectangle class? As this stands, the poor old
> Rectangle is getting no love.
> 
> If you want to show libraries, don't use dart:html, try another like
> dart:convert. That way, all the code in here is cohesive and runnable.

[Kathy Walrath, 2013-08-08 23:23:14]

I would, of course, trim the syntax example. E.g., don't show Shape, don't show
print()s, ...

[sethladd, 2013-08-08 23:43:11]

https://chromiumcodereview.appspot.com/22528003/diff/32001/src/tests/site/cod...
File src/tests/site/code/syntax.dart (right):

https://chromiumcodereview.appspot.com/22528003/diff/32001/src/tests/site/cod...
src/tests/site/code/syntax.dart:20: ..onClick.listen(startOrEndTest);
should createGoldenEllipse be a named constructor?

how about give a color and a rotation as fields on Shape, so you can cascade
those?

Your top-level function could add shapes to a top-level list of shapes. (bonus:
you can show off a real list collection)

Thoughts?

https://chromiumcodereview.appspot.com/22528003/diff/38001/src/tests/site/cod...
File src/tests/site/code/futures.dart (right):

https://chromiumcodereview.appspot.com/22528003/diff/38001/src/tests/site/cod...
src/tests/site/code/futures.dart:9: print("Sorry, no news today. Here's
why:\n$error"));
I don't see people putting a newline after => so perhaps use { and } here for
catchError

[Kathy Walrath, 2013-08-08 23:51:59]

https://chromiumcodereview.appspot.com/22528003/diff/32001/src/tests/site/cod...
File src/tests/site/code/syntax.dart (right):

https://chromiumcodereview.appspot.com/22528003/diff/32001/src/tests/site/cod...
src/tests/site/code/syntax.dart:20: ..onClick.listen(startOrEndTest);
> Your top-level function could add shapes to a top-level list of shapes.
(bonus:
> you can show off a real list collection)

Actually, I played with a List<Shape> but wasn't sure I wanted to get into
generics...

OK, I'll play around with it some more.

[sethladd, 2013-08-08 23:53:15]

I think it works if you leave off the generics, fwiw.

[Kathy Walrath, 2013-08-09 01:36:06]

ptal

[sethladd, 2013-08-09 01:45:22]

lgtm

one comment.

https://chromiumcodereview.appspot.com/22528003/diff/42001/src/tests/site/cod...
File src/tests/site/code/syntax.dart (right):

https://chromiumcodereview.appspot.com/22528003/diff/42001/src/tests/site/cod...
src/tests/site/code/syntax.dart:4: var _shapes = new List();             // A
global variable.
I think we can drop the _, as I wonder if it's too much here. I couldn't find an
example of you explaining the _.

Your call.

[Kathy Walrath, 2013-08-09 17:54:58]

I'm having second thoughts about the first example: I think it's too big. (The
original bug was that the example was too complex, and we've moved back in that
direction, unfortunately.) I'm going to try to split it up over 2 tabs.

[Kathy Walrath, 2013-08-12 18:30:55]

ptal

https://chromiumcodereview.appspot.com/22528003/diff/42001/src/tests/site/cod...
File src/tests/site/code/syntax.dart (right):

https://chromiumcodereview.appspot.com/22528003/diff/42001/src/tests/site/cod...
src/tests/site/code/syntax.dart:4: var _shapes = new List();             // A
global variable.
On 2013/08/09 01:45:22, sethladd wrote:
> I think we can drop the _, as I wonder if it's too much here. I couldn't find
an
> example of you explaining the _.
> 
> Your call.

Done.

[sethladd, 2013-08-12 18:34:15]

lgtm

[Kathy Walrath, 2013-08-12 18:38:27]

Committed patchset #12 manually as r324bcf7 (presubmit successful).