From f5cd66053f35e32e8f4027cdcbc11bf586612d0f Mon Sep 17 00:00:00 2001 From: "Rico Sta. Cruz" Date: Sat, 22 Mar 2014 12:03:13 +0800 Subject: [PATCH] . --- css.md | 3 + curl.md | 4 + gremlins.md | 33 +++++++++ gulp.md | 23 +++++- heroku.md | 2 - jshint.md | 12 +++ ractive.md | 200 ++++++++++++++++++++++++++++++++++---------------- react.md | 169 ++++++++++++++++++++++++++++++++++++++++++ stylus.md | 6 ++ superagent.md | 35 +++++++++ weinre.md | 5 +- zombie.md | 26 +++++++ 12 files changed, 450 insertions(+), 68 deletions(-) create mode 100644 gremlins.md create mode 100644 jshint.md create mode 100644 react.md create mode 100644 superagent.md create mode 100644 zombie.md diff --git a/css.md b/css.md index 35cc13b56..81f07e0bb 100644 --- a/css.md +++ b/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 diff --git a/curl.md b/curl.md index 4022b3afe..bc1b479a8 100644 --- a/curl.md +++ b/curl.md @@ -11,6 +11,10 @@ Options: -v # --verbose -vv # Even more verbose +Request: + + --request POST + Data options: -d # --data: HTTP post data, URL encoded (eg, status="Hello") diff --git a/gremlins.md b/gremlins.md new file mode 100644 index 000000000..7034fca2a --- /dev/null +++ b/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 diff --git a/gulp.md b/gulp.md index d7527e0c9..da4180de8 100644 --- a/gulp.md +++ b/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')()) + diff --git a/heroku.md b/heroku.md index 930705f07..aef1a593a 100644 --- a/heroku.md +++ b/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 diff --git a/jshint.md b/jshint.md new file mode 100644 index 000000000..75da5b7fb --- /dev/null +++ b/jshint.md @@ -0,0 +1,12 @@ +--- +title: Jshint +layout: default +--- + +### Relaxing + + // expr: true + production && a = b; + + + diff --git a/ractive.md b/ractive.md index 389996c2c..dfb05a25d 100644 --- a/ractive.md +++ b/ractive.md @@ -6,63 +6,93 @@ vim: ft=javascript ### Initialization - new Ractive({ - el: $('..'), - el: '#box', - template: '...', // required + new Ractive({ + el: $('..'), + el: '#box', + template: '...', // required - // callbacks - init: function() // on instanciate - complete: function() // on finish animations + // 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 - }) + // 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: '', - components: { - widget: Widget - } - }); + ractive = new Ractive({ + el: 'main', + template: '', + 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 - + view.on('teardown') - view.on({ - activate: function () { ... } - }); +### DOM Events + + + + view.on({ + activate: function () { ... } + }); view.on('sort', function (e, column) { @@ -77,23 +107,23 @@ https://github.com/RactiveJS/Ractive/wiki/Components ### Markup - Hello, {{name}} + Hello, {{name}} Body: {{{unescaped}}} - {{#list:i}} -
  • {{this.name}}
    • -
  • {{name}}
    • -
  • {{.}}
    • - {{/#list}} + {{#mylist:i}} +
  • {{this.name}}
    • +
  • {{name}}
    • +
  • {{.}}
    • + {{/mylist}} {{^user}}Not logged in{{/user}} {{#user}}Welcome, sire{{/user}} - {{>partialName}} - + {{>partialName}} + - {{#statusDogs[selected]}} + {{#statusDogs[selected]}} ### Transformed attributes @@ -109,21 +139,67 @@ This transforms the `list` attribute via a helper function called `sort()`. ### Transitions -
    -
    -
    +
    +
    +
    - Ractive.transitions.bump = function(t, params) { - params = t.processParams( params, { - duration: 400, - color: t.isIntro ? 'rgb(0,255,0)' : 'rgb(255,0,0)' - }); + 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 */ - } + if (t.isIntro) { + /* enter */ + } else { + /* exit */ + } - t.complete(); - }; + t.complete(); + }; + +### Decorators + + Hover me + + decorators: { + tooltip: function (node, content) { + // setup code here + return { + teardown: function () { + // cleanup code here + } + } + } + } + + Hover me + + 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 diff --git a/react.md b/react.md new file mode 100644 index 000000000..9b2bdb63f --- /dev/null +++ b/react.md @@ -0,0 +1,169 @@ +--- +title: React.js +layout: default +--- + +### Basic class + + React.createClass({ + render: function () { + return ( +
    Hello {this.props.name}
    + ); + } + }); + +### 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 ( + + ); + } + }); + +### 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 ( + + ); + } + }); + +### Actions + +
    + Name: +
    + + 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 ; + } + }); + // 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
  • {itemText}
    • ; + }; + return
      {this.props.items.map(createItem)}
    ; + } + }); + +### 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
    Great Scott!
    ; + } + +### Propagating properties to children + + var CheckLink = React.createClass({ + render: function() { + // transferPropsTo() will take any props passed to CheckLink + // and copy them to + return this.transferPropsTo({'√ '}{this.props.children}); + } + }); + +### Mixins + var TickTock = React.createClass({ + mixins: [SetIntervalMixin] + } + + SetIntervalMixin = { + componentWillMount: function() { .. } + } + +### Reusable components + +http://facebook.github.io/react/docs/reusable-components.html + + * Prop validation diff --git a/stylus.md b/stylus.md index ef6a7893f..6e6fe6c51 100644 --- a/stylus.md +++ b/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 diff --git a/superagent.md b/superagent.md new file mode 100644 index 000000000..891656c3a --- /dev/null +++ b/superagent.md @@ -0,0 +1,35 @@ +--- +title: Superagent +layout: default +--- + +### Result + + result == { + ok: true + error: false + + // Response + body: null + text: "..." + + // 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 + } diff --git a/weinre.md b/weinre.md index 78393ef6c..2a46ddad3 100644 --- a/weinre.md +++ b/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 - + diff --git a/zombie.md b/zombie.md new file mode 100644 index 000000000..37025cd0e --- /dev/null +++ b/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!")