.

Author: rstacruz

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({
-			el: $('..'),
-			el: '#box',
-			template: '...', // required
-
-			// callbacks
-			init: function()     // on instanciate
-			complete: function() // on finish animations
-
-			// objs
-			data: { ... }
-			partials: { ... }    // global: Ractive.partials
-			transitions: { ... } // global: Ractive.transitions
-			components: { ... }
-			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
-		})
+    new Ractive({
+      el: $('..'),
+      el: '#box',
+      template: '...', // required
+
+      // callbacks
+      init: function()     // on instanciate
+      complete: function() // on finish animations
+
+      // objs
+      data: { ... }
+      partials: { ... }    // global: Ractive.partials
+      transitions: { ... } // global: Ractive.transitions
+      components: { ... }
+      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
+    })
 
+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({
-			el: 'main',
-			template: '<widget foo="bar"/>',
-			components: {
-				widget: Widget
-			}
-		});
+    ractive = new Ractive({
+      el: 'main',
+      template: '<widget foo="bar"/>',
+      components: {
+        widget: Widget
+      }
+    });
 
 https://github.com/RactiveJS/Ractive/issues/74
 https://github.com/RactiveJS/Ractive/wiki/Components
 
 ### Partials
 
-		// Global partials
-		Ractive.partials.x = "<..>"
+    // Global partials
+    Ractive.partials.x = "<..>"
 
 ### Events
 
-		<button on-click='activate'>Activate!</button>
+   view.on('teardown')
 
-		view.on({
-			activate: function () { ... }
-		});
+### DOM Events
+
+    <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}}
-			<li>{{this.name}}</li>
-			<li>{{name}}</li>
-			<li>{{.}}</li> <!-- same as 'this' -->
-    {{/#list}}
+    {{#mylist:i}}
+      <li>{{this.name}}</li>
+      <li>{{name}}</li>
+      <li>{{.}}</li> <!-- same as 'this' -->
+    {{/mylist}}
 
     {{^user}}Not logged in{{/user}} <!-- if false -->
     {{#user}}Welcome, sire{{/user}} <!-- if true -->
 
-		{{>partialName}}
-		<component>
+    {{>partialName}}
+    <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="bump">
-		<div intro="bump:{duration:400}">
+    <div intro="fade">
+    <div intro="bump">
+    <div intro="bump:{duration:400}">
+
+    Ractive.transitions.bump = function(t, params) {
+       params = t.processParams( params, {
+         duration: 400,
+         color: t.isIntro ? 'rgb(0,255,0)' : 'rgb(255,0,0)'
+       });
+
+      if (t.isIntro) {
+        /* enter */
+      } else {
+        /* exit */
+      }
+
+      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
 
-		Ractive.transitions.bump = function(t, params) {
-			 params = t.processParams( params, {
-				 duration: 400,
-				 color: t.isIntro ? 'rgb(0,255,0)' : 'rgb(255,0,0)'
-			 });
+    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; }
+        };
+      }
+    };
 
-			if (t.isIntro) {
-				/* enter */
-			} else {
-				/* exit */
-			}
 
-			t.complete();
-		};
+http://docs.ractivejs.org/latest/adaptors