.

css.md

@@ -82,6 +82,9 @@ Webkit extensions
     * {
       text-rendering: optimizeLegibility !important;
       -webkit-font-smoothing: antialiased !important;
+      text-rendering: optimizeLegibility !important;
+      -webkit-font-smoothing: antialiased !important;
+      -moz-osx-font-smoothing: grayscale;
     }
 
 ### Heading kerning pairs and ligature

curl.md

@@ -11,6 +11,10 @@ Options:
     -v           # --verbose
     -vv          # Even more verbose
 
+Request:
+
+    --request POST
+
 Data options:
 
     -d <data>    # --data: HTTP post data, URL encoded (eg, status="Hello")

gremlins.md

@@ -0,0 +1,33 @@
+---
+title: Gremlins.js
+layout: default
+---
+
+### Example
+
+    gremlins.createHorde()
+        .before(function(done) {
+            var horde = this;
+            setTimeout(function(){
+                horde.log('async');
+                done();
+            }, 500);
+        })
+        .before(function() {
+            this.log('sync');
+        })
+        .gremlin(gremlins.species.formFiller())
+        .gremlin(gremlins.species.clicker().clickTypes(['click']))
+        .gremlin(gremlins.species.scroller())
+        .gremlin(function() {
+            alert('here');
+        })
+        .after(function() {
+            this.log('finished!');
+        })
+        .mogwai(gremlins.mogwais.alert())
+        .mogwai(gremlins.mogwais.fps())
+        .mogwai(gremlins.mogwais.gizmo().maxErrors(2))
+        .unleash();
+
+https://github.com/marmelab/gremlins.js

gulp.md

@@ -21,9 +21,10 @@ title: Gulp
  * gulp-nodemon
  * gulp-size (displays size)
 
- Example
+### Example
 
 
+    // gulpfile.js
     // Load plugins
     var gulp = require('gulp'),
         sass = require('gulp-ruby-sass'),
@@ -113,3 +114,23 @@ title: Gulp
 ### References
 
 https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md#getting-started
+
+### Livereload
+
+    var lr = require('tiny-lr')();
+
+    function notify (lr, root) {
+      return function (event) {
+        var fname = require('path').relative(root, event.path);
+        lr.changed({ body: { files: [ fname ] }});
+      };
+    }
+
+    gulp.task('livereload', function () {
+      lr.listen(35729)
+      gulp.watch('public/**/*', notify(lr, __dirname+'/public'));
+    });
+
+    // Express
+    app.use(require('connect-livereload')())
+    <!-- livereload --><script>document.write('<script src="'+(location.protocol||'http:')+'//'+(location.hostname||'localhost')+':35729/livereload.js?snipver=1"><\/scr'+'ipt>')</script>

heroku.md

@@ -72,8 +72,6 @@ layout: default
 
 ## `domains` - Custom domains
 
-      heroku addon:add custom_domains
-
     # Add both!
       heroku domains:add example.com
       heroku domains:add www.example.com

jshint.md

@@ -0,0 +1,12 @@
+---
+title: Jshint
+layout: default
+---
+
+### Relaxing
+
+    // expr: true
+    production && a = b;
+
+
+    

ractive.md

@@ -33,9 +33,35 @@ vim: ft=javascript
       sanitize: false
     })
 
+http://docs.ractivejs.org/latest/initialisation-options
+
+### Instance methods
+
+    view.set('a', true)
+    view.set({ a: true })
+    view.merge(...)
+    view.get('a')
+
+    view.on('event', function() { ... });
+    view.fire('event');
+
+    view.update()
+    view.updateModel()
+
+    view.find('.klass')
+    view.findAll('.klass')
+    view.nodes
+    view.nodes['hello']   // .find('#hello')
 
 http://docs.ractivejs.org/latest/initialisation-options
 
+### Extend
+
+    View = Ractive.extend({
+      ...
+    })
+    new View()
+
 ### Components
 
     Widget = Ractive.extend({ ... })
@@ -58,6 +84,10 @@ https://github.com/RactiveJS/Ractive/wiki/Components
 
 ### Events
 
+   view.on('teardown')
+
+### DOM Events
+
     <button on-click='activate'>Activate!</button>
 
     view.on({
@@ -81,11 +111,11 @@ https://github.com/RactiveJS/Ractive/wiki/Components
     Body: {{{unescaped}}}
 
     <!-- each -->
-		{{#list:i}}
+    {{#mylist:i}}
       <li>{{this.name}}</li>
       <li>{{name}}</li>
       <li>{{.}}</li> <!-- same as 'this' -->
-    {{/#list}}
+    {{/mylist}}
 
     {{^user}}Not logged in{{/user}} <!-- if false -->
     {{#user}}Welcome, sire{{/user}} <!-- if true -->
@@ -127,3 +157,49 @@ This transforms the `list` attribute via a helper function called `sort()`.
 
       t.complete();
     };
+
+### Decorators
+
+    <span decorator="tooltip:hello there">Hover me</span>
+
+    decorators: {
+      tooltip: function (node, content) {
+        // setup code here
+        return {
+          teardown: function () {
+            // cleanup code here
+          }
+        }
+      }
+    }
+
+    <span decorator="tooltip:'a','b',2,'c'">Hover me</span>
+
+    tooltip: function (node, a, b, two, c) { ... }
+
+http://docs.ractivejs.org/latest/decorators
+
+### Adaptors
+
+    myAdaptor = {
+      filter: function (object, keypath, ractive) {
+        // return `true` if a particular object is of the type we want to adapt
+      },
+      wrap: function (ractive, object, keypath, prefixer) {
+        // set up event bindings here
+        object.on('change', function () { ractive.set(prefixer({...})); });
+        // then return a wrapper:
+        return {
+          teardown: function () { .. },
+          // json representation
+          get: function () { return { a:2, b:3, c:4, ... }; },
+          // called on ractive.set
+          set: function (key, val) { },
+          // called on ractive.set on root (return false = die)
+          reset: function (data) { return false; }
+        };
+      }
+    };
+
+
+http://docs.ractivejs.org/latest/adaptors

react.md

@@ -0,0 +1,169 @@
+---
+title: React.js
+layout: default
+---
+
+### Basic class
+
+    React.createClass({
+      render: function () {
+        return (
+          <div>Hello {this.props.name}</div>
+        );
+      }
+    });
+
+### Using
+
+    var Component = React.createClass({ ... });
+
+    var compo = React.renderComponent(Component(), mountnode);
+
+### [API](http://facebook.github.io/react/docs/component-api.html)
+
+    c.setState({ x: y });
+    c.setProps({ .. });
+
+    c.replaceProps({ .. });
+    c.replaceState({ .. });
+
+    c.getDOMNode()
+
+    c.forceUpdate()
+    c.isMounted()
+
+### [Lifecycle](http://facebook.github.io/react/docs/component-specs.html)
+
+    render: function()
+    getInitialState: function()
+    getDefaultProps: function()
+    propTypes: {}
+    mixins: []
+    statics: { .. } /* static methods */
+    displayName: '..'
+
+    componentWillMount
+    componentWillUpdate
+    componentWillUnmount
+
+    componentDidMount
+    componentDidUpdate
+    componentDidUnmount
+
+
+### Initial states
+
+    React.createClass({
+      getInitialState: function () {
+        return {data: []};
+      },
+
+      render: function () {
+        return (
+          <CommentList data={this.state.data} />
+        );
+      }
+    });
+
+### Default properties
+
+    React.createClass({
+      getDefaultProps: function () {
+        return {name: ''};
+      }
+    );
+
+### Before rendering
+
+    React.createClass({
+      componentWillMount: function () {
+        $.get(this.props.url, function (data) {
+          this.setState(data);
+        });
+      },
+
+      render: function () {
+        return (
+          <CommentList data={this.state.data} />
+        );
+      }
+    });
+
+### Actions
+
+    <form onSubmit={this.handleSubmit}>
+      Name: <input ref="name">
+    </form>
+
+    React.createClass({
+      handleSubmit: function (event) {
+        name = this.refs['name'].getDOMNode().value;
+        // see two-way binding below
+      }
+    })
+
+### Two-way binding
+
+
+    React.createClass({
+      mixins: [React.addons.LinkedStateMixin],
+      getInitialState: function() {
+        return {value: 'Hello!'};
+      },
+      render: function() {
+        return <input type="text" valueLink={this.linkState('value')} />;
+      }
+    });
+    // LinkedStateMixin adds a method to your React component called
+    // linkState(). 
+
+http://facebook.github.io/react/docs/two-way-binding-helpers.html
+
+### Lists
+
+    var TodoList = React.createClass({
+      render: function() {
+        var createItem = function(itemText) {
+          return <li>{itemText}</li>;
+        };
+        return <ul>{this.props.items.map(createItem)}</ul>;
+      }
+    });
+
+### Class set
+
+    render: function() {
+      var cx = React.addons.classSet;
+      var classes = cx({
+        'message': true,
+        'message-important': this.props.isImportant,
+        'message-read': this.props.isRead
+      });
+      // same final string, but much cleaner
+      return <div className={classes}>Great Scott!</div>;
+    }
+
+### Propagating properties to children
+
+    var CheckLink = React.createClass({
+      render: function() {
+        // transferPropsTo() will take any props passed to CheckLink
+        // and copy them to <a>
+        return this.transferPropsTo(<a>{'√ '}{this.props.children}</a>);
+      }
+    });
+
+### Mixins
+    var TickTock = React.createClass({
+      mixins: [SetIntervalMixin]
+    }
+
+    SetIntervalMixin = {
+      componentWillMount: function() { .. }
+    }
+
+### Reusable components
+
+http://facebook.github.io/react/docs/reusable-components.html
+
+  * Prop validation

stylus.md

@@ -54,6 +54,12 @@ Multiple args:
 
     -{prefix}-border-radius: 2px
 
+### Color operators
+
+    #888 + 50%    // => #c3c3c3
+    #888 - 50%    // => #444
+    #f00 + 50deg  // => #ffd500 (hue)
+
 ### Built-in functions
 
     alpha(#fff)   //=> 1

superagent.md

@@ -0,0 +1,35 @@
+---
+title: Superagent
+layout: default
+---
+
+### Result
+
+    result == {
+      ok: true
+      error: false
+
+      // Response
+      body: null
+      text: "<!doctype html>..."
+
+      // Headers
+      status: 200
+      type: "text/html"
+      charset: "UTF-8"
+      headers: {
+        'cache-control': 'public',
+        'content-type': 'text/html; charset=UTF-8"
+      }
+
+      accepted: false
+
+      // specific errors
+      badRequest: false
+      clientError: false
+      forbidden: false
+      notFound: false
+      noContent: false
+      notAcceptable: false
+      unauthorized: false
+    }

weinre.md

@@ -1,4 +1,4 @@
----
+----
 title: Weinre
 layout: default
 ---
@@ -14,5 +14,4 @@ Start the server:
     $ weinre --boundHost 0.0.0.0
     $ open http://localhost:8080
 
-    <script 
-    src="http://localhost:8080/target/target-script-min.js#anonymous"></script>
+    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.async=1;js.src='http://'+location.hostname+':8080/target/target-script-min.js#anonymous';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','weinre');</script>

zombie.md

@@ -0,0 +1,26 @@
+---
+title: Zombie
+layout: default
+---
+
+
+    browser
+      .visit("http://.../", ->)
+      .fill("email", "zombie@underworld.dead")
+      .fill("password", "eat-the-living")
+      .select("Born", "1985")
+      .uncheck("Send newsletter")
+      .clickLink("Link name")
+      .pressButton("Sign", -> ...)
+
+      .text("H1")
+
+
+    expect(browser.query("#brains"))
+
+    expect(browser.body.queryAll(".hand")).length 2
+
+    console.log(browser.html())
+    console.log(browser.html("table.parts"))
+
+    expect(Browser.text(".card-nopad small"), "A better way to get around!")