.

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

@@ -6,63 +6,93 @@ vim: ft=javascript
 
 ### Initialization
 
-		new Ractive({
+    new Ractive({
-			el: $('..'),
+      el: $('..'),
-			el: '#box',
+      el: '#box',
-			template: '...', // required
+      template: '...', // required
 
-			// callbacks
+      // callbacks
-			init: function()     // on instanciate
+      init: function()     // on instanciate
-			complete: function() // on finish animations
+      complete: function() // on finish animations
 
-			// objs
+      // objs
-			data: { ... }
+      data: { ... }
-			partials: { ... }    // global: Ractive.partials
+      partials: { ... }    // global: Ractive.partials
-			transitions: { ... } // global: Ractive.transitions
+      transitions: { ... } // global: Ractive.transitions
-			components: { ... }
+      components: { ... }
-			adaptors: [ ... ]
+      adaptors: [ ... ]
-
-			// options
-			magic: false
-			modifyArrays: true
-			twoway: true
-			noIntro: true // true = disable transition on initial render
-			lazy: false   // false = use keyevents, true = use change/blur
-			append: false // false = overwrite element, true = append
-			debug: false
-			sanitize: false
-		})
 
+      // options
+      magic: false
+      modifyArrays: true
+      twoway: true
+      noIntro: true // true = disable transition on initial render
+      lazy: false   // false = use keyevents, true = use change/blur
+      append: false // false = overwrite element, true = append
+      debug: false
+      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({ ... })
+    Widget = Ractive.extend({ ... })
 
-		ractive = new Ractive({
+    ractive = new Ractive({
-			el: 'main',
+      el: 'main',
-			template: '<widget foo="bar"/>',
+      template: '<widget foo="bar"/>',
-			components: {
+      components: {
-				widget: Widget
+        widget: Widget
-			}
+      }
-		});
+    });
 
 https://github.com/RactiveJS/Ractive/issues/74
 https://github.com/RactiveJS/Ractive/wiki/Components
 
 ### Partials
 
-		// Global partials
+    // Global partials
-		Ractive.partials.x = "<..>"
+    Ractive.partials.x = "<..>"
 
 ### Events
 
-		<button on-click='activate'>Activate!</button>
+   view.on('teardown')
 
-		view.on({
+### DOM Events
-			activate: function () { ... }
+
-		});
+    <button on-click='activate'>Activate!</button>
+
+    view.on({
+      activate: function () { ... }
+    });
 
     <button on-click='sort:name'>Sort by name</button>
     view.on('sort', function (e, column) {
@@ -77,23 +107,23 @@ https://github.com/RactiveJS/Ractive/wiki/Components
 
 ### Markup
 
-		Hello, {{name}}
+    Hello, {{name}}
     Body: {{{unescaped}}}
 
     <!-- each -->
-		{{#list:i}}
+    {{#mylist:i}}
-			<li>{{this.name}}</li>
+      <li>{{this.name}}</li>
-			<li>{{name}}</li>
+      <li>{{name}}</li>
-			<li>{{.}}</li> <!-- same as 'this' -->
+      <li>{{.}}</li> <!-- same as 'this' -->
-    {{/#list}}
+    {{/mylist}}
 
     {{^user}}Not logged in{{/user}} <!-- if false -->
     {{#user}}Welcome, sire{{/user}} <!-- if true -->
 
-		{{>partialName}}
+    {{>partialName}}
-		<component>
+    <component>
 
-		{{#statusDogs[selected]}}
+    {{#statusDogs[selected]}}
 
 ### Transformed attributes
 
@@ -109,21 +139,67 @@ This transforms the `list` attribute via a helper function called `sort()`.
 
 ### Transitions
 
-		<div intro="fade">
+    <div intro="fade">
-		<div intro="bump">
+    <div intro="bump">
-		<div intro="bump:{duration:400}">
+    <div intro="bump:{duration:400}">
 
-		Ractive.transitions.bump = function(t, params) {
+    Ractive.transitions.bump = function(t, params) {
-			 params = t.processParams( params, {
+       params = t.processParams( params, {
-				 duration: 400,
+         duration: 400,
-				 color: t.isIntro ? 'rgb(0,255,0)' : 'rgb(255,0,0)'
+         color: t.isIntro ? 'rgb(0,255,0)' : 'rgb(255,0,0)'
-			 });
+       });
 
-			if (t.isIntro) {
+      if (t.isIntro) {
-				/* enter */
+        /* enter */
-			} else {
+      } else {
-				/* exit */
+        /* exit */
-			}
+      }
 
-			t.complete();
+      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 
+    <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>
-    src="http://localhost:8080/target/target-script-min.js#anonymous"></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!")