My blog has moved to github

My blog has moved to github

Its been fun wordpress. 

Joining Solvr.io

Pleased to announce that I’m joining #solvr.io full time to work with Lars Tackmann in #dart. Solvr is dedicated for creating modern math tools on the web. We find dart as the perfect opportunity to accomplish our goals, please follow and sign up for an alpha release at http://solvr.io. I feel dartlang has the potential to succeed in commercial opportunities. That helped me in the choice of leaving casino industry for math education tools. A second driver for me is the web ecosystem is ever more important these days, it needs to be in every developer’s toolbox. Finally, math is fun!

I would like to thank all the open source #dartlang developers/hackers/friends for creating the rich community around dart. The community effort has been accelerating at a wonderful speed, the new frameworks and libraries keep on evolving with the dart language. That will help us all in the long haul. This is a great time for startups, smaller companies and enterprises to get in now and create what we want to use over the next years.   

One of the first libraries I will be working on is dart-bignum to help with development that depends on fast implementation of BigInteger across dart and dart2js.

adam@solvr.io
http://solvr.io

Dart Templates

As mentioned by Seth Ladd, Dart now has a template system in the bleeding_edge branch. One way to learn what is offered, is to look at the uitest.dart unit test. Since the template code is in flux I’ve created some scripts to help init and build templates. A sample Dart Template Example is provided to follow along with this post. Please keep in mind this is currently subject to change by the Dart team, provide feedback to help the project along.

exportTemplateUtils.sh script is used for exporting all the dependent code from the dartlang code base. The template build script depends on lib, css, and template folders from the utils directory.

22:54:59-adam@Adams-MacBook-Air:~/dart/DartTemplateExample
$ ./exportTemplateUtils.sh 
A    lib
[...]
Exported revision 5635.
A    css
[...]
Exported revision 5635.
A    template
[...]
Exported revision 5635.

The DivisionSales.tmpl was ripped from the unit test and adjusted for the project. The template keyword is used for defining the template name. Inside the template you can have css, html and scripting. Dart team is currently experimenting with the following.

template DivisionSales(var divisions) {
  css {
    .division-item {
      background-color: #bbb;
      border-top: 2px solid white;
      line-height: 20pt;
      padding-left: 5px;
    }
    .product-item {
      background-color: lightgray;
      margin-left: 10px;
      border-top: 2px solid white;
      line-height: 20pt;
    }
    .product-title {
      position: absolute;
      left: 45px;
    }
    .product-name {
      font-weight: bold;
      position: absolute;
      left: 100px;
    }
    .product-users {
      position: absolute;
      right: 150px;
      font-style: italic;
      color: gray;
      width: 110px;
    }
    .expand-collapse {
      margin-left: 5px;
      margin-right: 5px;
      vertical-align: top;
      cursor: pointer;
    }
    .expand {
      font-size: 9pt;
    }
    .collapse {
      font-size: 8pt;
    }
    .show-sales {
      display: inherit;
    }
    .hide-sales {
      display: none;
    }
    .sales-item {
      font-family: arial;
      background-color: lightgray;
      margin-left: 10px;
      border-top: 1px solid white;
      line-height: 18pt;
      padding-left: 5px;
    }
    .ytd-sales {
      position: absolute;
      left: 100px;
    }
  }
  <div>
    ${#each divisions}
      <div class="division-item">
        <span>${name}</span>
        <span>&nbsp;-&nbsp;</span>
        <span>${id}</span>
      </div>
      <div>
        ${#each divisions.products}
          <div class="product-item">
            <span var=productZippy class="expand-collapse expand">▼</span>
            <span class='product-title'>Product</span>
            <span class="product-name">${name}</span>
            <span class="product-users">${users}&nbsp;</span> 
            <div class="show-sales">
              ${#each products.sales}
                <div class="sales-item">
                  <span>${country}</span>
                  <span class="ytd-sales">${yearly}</span>
                </div>
              ${/each}
            </div>
          </div>
        ${/each}
      </div>
    ${/each}
  </div>
}

template Header(String company, Date date) {
  css {
    .header {
      background-color: slateGray;
      font-family: arial;
      color: lightgray;
      font-weight: bold;
      padding-top: 20px;
    }
  }
  <div class='header' align=center>
    <h2>${company}</h2>
    <div align=right>${date}</div>
  </div>
}

The scripting is very basic at the moment. Looking at the tokenkind.dart one can get an idea of what is supported.

[...]
  // Synthesized tokens:

  static final int END_NO_SCOPE_TAG = 50;       // />
  static final int START_EXPRESSION = 51;       // ${
  static final int START_COMMAND = 52;          // ${#
  static final int END_COMMAND = 53;            // ${/
  static final int EACH_COMMAND = 53;           // ${#each list}
  static final int WITH_COMMAND = 54;           // ${#with object}
  static final int IF_COMMAND = 55;             // ${#if (expression)}
  static final int ELSE_COMMAND = 56;           // ${#else}
[...]

buildTemplates.sh script will loop over all *.tmpl files in the current working directory and generate *.dart files for each one.

22:57:41-adam@Adams-MacBook-Air:~/dart/DartTemplateExample
$ ./buildTemplates.sh 

Building dart templates

Parsed /Users/adam/dart/DartTemplateExample/DivisionSales.tmpl in 3134 msec.
Codegen /Users/adam/dart/DartTemplateExample/DivisionSales.tmpl in 215 msec.
Wrote file /Users/adam/dart/DartTemplateExample/DivisionSales.dart in 215 msec.

Copy & Paste import statements

#source('DivisionSales.dart');

After the dart code is generated the following source statements can be copied into the main/lib.

#import('dart:html');
#source('DivisionSales.dart');

class Sales {
  String country;
  String yearly;
  Sales(this.country, this.yearly);
}

class Products {
  List<Sales> sales;
  String name;
  String users;
  Products(this.name, this.users, this.sales);
}

class Divisions {
  List<Products> products;
  String id;
  String name;
  Divisions(this.id, this.name, this.products);
}

class DartTemplateExample {

  DartTemplateExample() {
  }

  void run() {
    document.body.elements.add(new Header("Dollar Shave Club", new Date.now().toString()).root);
    
    List<Sales> sales = [new Sales("USA", "3500"), new Sales("USA", "4500")];
    List<Products> products = [new Products("Razor", "Sammy", sales)];
    List<Divisions> divisions = [new Divisions("South West", "A-Team", products), new Divisions("North East", "B-Team", products),];
    
    DivisionSales divisionSales = new DivisionSales(divisions);
    document.body.elements.add(divisionSales.root);
  }
}

void main() {
  new DartTemplateExample().run();
}

This example is deployed on github. You can also experiment with the template system to see what code gets generated on a live page. At first glance the template system is simple enough to use, I would assume things would change in the future. For now the Dart team has provided enough for people to start banging away and provide feedback.

Dart classify markup example

I was looking for a simple way to create some markup dynamically of syntax highlighted dart code, in dart! A big thanks to Bob Nystrom from the Dart team for suggesting the simplest solution. Use classify from dartdoc.

A live example of this can be found here along with the source code.

Example of how to use dartdoc/classify.dart
dartdoc is used for generating static HTML for the api.dartlang.org site. This example shows how importing dartdoc/classify.dart one could generate syntax highlighted dart code at runtime.

Patching
Currently you need to modify the import statement to reference the location of classify.dart.

#import('../../dart_bleeding/dart/utils/dartdoc/classify.dart', prefix:"classify");

Building
Build with minfrog for best results. At the moment dart editor does not seem happy with me on importing dartdoc/classify.dart. So compiling with minfrog worked best.

minfrog --compile-only --out=ClassifyExample.dart.js ClassifyExample.dart

Using classify
This is the easiest part! Create a SourceFile and add pass it along to classifySource which will return a properly formatted string of span elements that has class attributes set. From that point you can add a css style to the span elements.

    String code = "main() { print('hello world'); }";
    classify.SourceFile sf = new classify.SourceFile("sf.dart", code);
    String c = classify.classifySource(sf);
   <span class="i ">main</span><span class="p ">(</span><span class="p ">)</span><span> 
   </span><span class="p ">{</span><span> </span><span class="i ">print</span>
   <span class="p ">(</span><span class="s si">'hello world'</span>
   <span class="p ">)</span><span class="p ">;</span><span> </span><span class="p ">}</span> 

Example css style

/* Syntax highlighting. */
/* Note: these correspond to the constants in classify.dart. */
.e { color: hsl(  0, 100%, 70%); } /* Error */
.c { color: hsl(220,  20%, 65%); } /* Comment */
.i { color: hsl(220,  20%, 20%); } /* Identifier */
.k { color: hsl(220, 100%, 50%); } /* Keyword */
.p { color: hsl(220,  20%, 50%); } /* Punctuation */
.o { color: hsl(220,  40%, 50%); } /* Operator */
.s { color: hsl( 40,  90%, 40%); } /* String */
.n { color: hsl( 30,  70%, 50%); } /* Number */
.t { color: hsl(180,  40%, 40%); } /* Type Name */
.r { color: hsl(200, 100%, 50%); } /* Special Identifier */
.a { color: hsl(220, 100%, 45%); } /* Arrow */

/* Interpolated expressions within strings. */
.si {
  background: hsl(40, 100%, 90%);
}

.s.si { background: hsl(40, 80%, 95%); }
.i.si { color: hsl(40, 30%, 30%); }
.p.si { color: hsl(40, 60%, 40%); }

Dart: Quick 0-60 with DartEditor and Dartium on MacOSX.

Quick 0-60 with DartEditor and Dartium on MacOSX. The DartEditor now comes with the ability to launch Dartium directly. The key to getting that to work is to have Chromium folder located in the dart-sdk. Below is a simple script to bootstrap your MacOSX from the latest builds. Note, if you move the directory around you’ll need to adjust the runDartEditor.sh script. DartEditor expects an absolute path for the -debug flag. By the time Dartium hits the dart-sdk, his route will be obsolete.
Now support for choosing frogc or dartc is available in the GUI options.

git clone git://gist.github.com/1702746.git DartEditor
cd DartEditor
chmod +x get_and_unpack.sh 
./get_and_unpack.sh && cd dart && ./runDartEditor.sh

https://gist.github.com/1702746

Dart: A short introduction to dart.

On 1/28/2012 I was fortunate to give an introduction to dart at a GTUGsf Mobile HTML5 Codelab event. Conrad Wade did a spectacular job of arranging the event and promoting the DartSF meetup group. I truly enjoy the GTUGsf events!

Dart: Updated Dartium builds with breakpoint support for Linux and Mac

As Seth Ladd has commented on google plus, Dartium now has breakpoint support. Big win in such an early stage of the project. Providing Release builds for Mac and Linux below. While I was trying breakpoints out, one thing noticed was to getting scripts to show up properly in inspector you need to hit an extra refresh on the page. My public is can be found on pgp.mit.edu.

wget http://dl.dropbox.com/u/33138127/dartium_macosx/Chromium.app.tar.gz
wget http://dl.dropbox.com/u/33138127/dartium_macosx/Chromium.app.tar.gz.sig
wget http://dl.dropbox.com/u/33138127/dartium_macosx/Chromium.app.tar.gz.md5
wget http://dl.dropbox.com/u/33138127/dartium_macosx/README.txt
gpg --verify Chromium.app.tar.gz.sig Chromium.app.tar.gz
md5sum -c Chromium.app.tar.gz.md5
wget http://gsdview.appspot.com/dart-editor-archive-continuous/latest/DartBuild-linux.gtk.x86.zip
wget http://dl.dropbox.com/u/33138127/dartium/dartium-linux-32bit-Release.tar.gz
wget http://dl.dropbox.com/u/33138127/dartium/dartium-linux-32bit-Release.tar.gz.sig
wget http://dl.dropbox.com/u/33138127/dartium/dartium-linux-32bit-Release.tar.gz.md5
wget http://dl.dropbox.com/u/33138127/dartium/README.txt
gpg --verify dartium-linux-32bit-Release.tar.gz.sig dartium-linux-32bit-Release.tar.gz
md5sum -c dartium-linux-32bit-Release.tar.gz.md5
Follow

Get every new post delivered to your Inbox.