diff --git a/awesome-redux.md b/awesome-redux.md new file mode 100644 index 00000000..55722d9d --- /dev/null +++ b/awesome-redux.md @@ -0,0 +1,60 @@ +--- +title: Awesome-redux +category: Ruby +--- + +### [redux-actions](https://www.npmjs.com/package/redux-actions) +Create action creators in flux standard action format. + +```js +increment = createAction('INCREMENT', amount => amount) +increment = createAction('INCREMENT') // same + +err = new Error() +increment(42) === { type: 'INCREMENT', payload: 42 } +increment(err) === { type: 'INCREMENT', payload: err, error: true } +``` + +### [flux-standard-action](https://github.com/acdlite/flux-standard-action) +A standard for flux action objects. + +``` +{ type: 'ADD_TODO', payload: { text: 'Work it' } } +{ type: 'ADD_TODO', payload: new Error(), error: true } +``` + +An action may have an `error`, `payload` and `meta` and nothing else. + +### [redux-promise](https://github.com/acdlite/redux-promise) +Pass promises to actions. Dispatches a flux-standard-action. + +```js +increment = createAction('INCREMENT') // redux-actions +increment(Promise.resolve(42)) +``` + +### [redux-effects](https://www.npmjs.com/package/redux-effects) +Pass side effects declaratively to keep your actions pure. + +```js +{ + type: 'EFFECT_COMPOSE', + payload: { + type: 'FETCH' + payload: {url: '/some/thing', method: 'GET'} + }, + meta: { + steps: [ [success, failure] ] + } +} +``` + +### [redux-multi](https://github.com/ashaffer/redux-multi) +Dispatch multiple actions in one action creator. + +```js +store.dispatch([ + { type: 'INCREMENT', payload: 2 }, + { type: 'INCREMENT', payload: 3 } +]) +``` diff --git a/bookshelf.md b/bookshelf.md index 81354cc0..2c9f2c49 100644 --- a/bookshelf.md +++ b/bookshelf.md @@ -6,55 +6,41 @@ category: JavaScript libraries Model ----- - # or Bookshelf.Mode.extend({..}) - class Book extends Bookshelf.Model - tableName: 'books' +```js +Summary = bookshelf.Model.extend({ + tableName: 'summaries', + hasTimestamps: true, + hasTimestamps: ['created_at', 'updated_at'], +}) +``` ### Associations - class Book extends Bookshelf.Model - # Associations - author: -> @belongsTo(Author) - summary: -> @hasOne(Summary) - pages: -> @hasMany(Pages) - shelves: -> @belongsToMany(Shelves) +```js +Summary = bookshelf.Model.extend({ + book () { + return this.belongsTo(Book) + }, + author () { + return this.hasOne(Author) + } + // belongsToMany + // hasMany + // hasMany().through() +}) +``` - @hasMany(Comment) - .through(Chapter) +### CRUD - @belongsToMany(Comment) - .withPivot(['created_at']) +```js +Book.create({ title: '..' }).save() +new Book({ title: '..' }).save() -### Collections +new Book({ id: 1 }).fetch() - class Books extends Bookshelf.Collection - model: Book - - books = new Books() - books.query(where: { id: 2 }) - .fetch() - .then -> - -### Fetching associations - - new Book(id: 1).summary().fetch() - .then (summary) -> - -Manipulation ------------- - -### Reading (Fetch by ID) - - new Story(id: 2).fetch() - .then (story) -> - story.id #=> 2 - story.title #=> "Through the Looking Glass" - - story.summary = "Hello" - story.save() - - .then -> ... - -### References - - * http://bookshelfjs.org/ +Book.where({ id: 1 }).fetch() +Book.where('favorite_color', 'red').fetch() +Book.where('favorite_color', '<>', 'red').fetch() +Book + .query((q) => q.orderBy('updated_at') +``` diff --git a/css-flexbox.md b/css-flexbox.md index 872573fa..17163943 100644 --- a/css-flexbox.md +++ b/css-flexbox.md @@ -68,7 +68,7 @@ category: CSS .container > .top { order: 1; } - + .container > .bottom { order: 2; } @@ -106,7 +106,7 @@ to the circumstances. .container > .date { flex: 1 0 120px; } ### Vertical - + Vertically-center all items. .container { diff --git a/deku-v1.md b/deku-v1.md new file mode 100644 index 00000000..03f03c6c --- /dev/null +++ b/deku-v1.md @@ -0,0 +1,85 @@ +--- +title: Deku v1 +category: JavaScript libraries +--- + +```js +/** @jsx element */ +import element from 'virtual-element' // replacement for React.createElement +import {render, tree} from 'deku' + +var app =
Hello World!
+ +render(tree(app), document.body) +``` + +## Components + +```js +Button = { + render () { return } +} + +App = { + render () { return
} +} + +render(tree(), document.body) +render(tree(element(App)), document.body) +``` + +## Component props/state + +```js +App = { + render ({ props, state }) { + return
{ /*...use state.store here*/ }
+ } + + initialState (props) { + return { store: store.getState() } + }, + + afterMount (comp, el, setState) { + store.subscribe(() => setState({ store: store.getState() })) + } +} + +render(tree(), document.body) +``` + +## Events + +```js +{props.text} +``` + +## Magic virtual element +Use [magic-virtual-element](https://github.com/dekujs/magic-virtual-element) to enable nice classnames. + +``` +import element from 'magic-virtual-element' +
+``` + +## Reference + +``` +name = 'MyComponent' + +// Defaults +initialState (props) {...} // return initial state +defaultProps = { hi: 'hello' } + +// Render +render ({props, state}, setState) {...} + +// Lifecycle +beforeUpdate ({props, state, id}, nextProps, nextState) {} +afterRender ({props, state, id}, el) {} +afterUpdate ({props, state, id}, prevProps, prevState, setState) {} +afterMount ({props, state, id}, el, setState) {} +beforeUnmount ({props, state, id}, el) {} +``` + +See: diff --git a/deku.md b/deku.md index a326c11b..a720f090 100644 --- a/deku.md +++ b/deku.md @@ -1,86 +1,49 @@ --- -title: Deku +title: Deku v2 category: JavaScript libraries --- -```js -/** @jsx element */ -import element from 'virtual-element' // replacement for React.createElement -import {render, tree} from 'deku' - -var app =
Hello World!
- -render(tree(app), document.body) -``` - ## Components ```js -Button = { - render () { return } -} +/** @jsx element */ +import { element } from 'deku' -App = { - render () { return
} -} - -render(tree(), document.body) -// or with virtual-element -render(tree(element(App)), document.body) -``` - -## Component props/state - -```js -App = { - render ({ props, state }) { - return
{ /*...use state.store here*/ }
- } - - initialState (props) { - return { store: store.getState() } - }, - - afterMount (comp, el, setState) { - store.subscribe(() => setState({ store: store.getState() })) +function render ({ props, children, context, path }) { + // props = properties object + // children = children array + // path = path to current component (like 0.1.5.2) + // context = common properties in all components + return ( + } } -render(tree(), document.body) +function onCreate ({ props, dispatch, path }) { ... } +function onUpdate ({ props, dispatch, path }) { ... } +function onRemove ({ props, dispatch, path }) { ... } +// actually { children, props, path, context } + +export default { render, onCreate, onRemove } ``` -## Events +## Rendering ```js -{props.text} +import { createStore } from 'redux' +import { dom, element } from 'deku' + +// Create a Redux store to handle all UI actions and side-effects +let store = createStore(reducer) + +// Create a renderer that can turn vnodes into real DOM elements +let render = createRenderer(document.body, store.dispatch) + +// Update the page and add redux state to the context +render( + Hello World!, + store.getState() + ) ``` - -## Magic virtual element -Use [magic-virtual-element](https://github.com/dekujs/magic-virtual-element) to enable nice classnames. - -``` -import element from 'magic-virtual-element' -
-``` - -## Reference - -``` -name = 'MyComponent' - -// Defaults -initialState (props) {...} // return initial state -defaultProps = { style: 'rout' } - -// Render -render ({props, state}, setState) {...} - -// Lifecycle -beforeUpdate ({props, state, id}, nextProps, nextState) {} -afterRender ({props, state, id}, el) {} -afterUpdate ({props, state, id}, prevProps, prevState, setState) {} -afterMount ({props, state, id}, el, setState) {} -beforeUnmount ({props, state, id}, el) {} -``` - -See: diff --git a/elixir.md b/elixir.md new file mode 100644 index 00000000..bc9fa65d --- /dev/null +++ b/elixir.md @@ -0,0 +1,95 @@ +--- +title: Elixir +category: Development +--- + +## Type checks + +```elixir +is_atom/1 +is_bitstring/1 +is_boolean/1 +is_function/1 +is_function/2 +is_integer/1 +is_float/1 + +is_binary/1 +is_list/1 +is_map/1 +is_tuple/1 + +is_nil/1 +is_number/1 +is_pid/1 +is_port/1 +is_reference/1 +``` + +### Operators + +```elixir +left != right # equal +left !== right # match +left ++ right # concat lists +left =~ right # regexp +``` + +### Numbers + +``` +abs(n) +rem(a, b) # remainder (modulo) +div(a, b) # integer division +round(n) +``` + +### Functions + +``` +apply(fn, args) +apply(module, fn, args) +``` + +### Inspecting + +```elixir +inspect(arg, opts \\ []) +``` + +### Tuples + +```elixir +elem(tuple, 1) # like tuple[1] +put_elem(tuple, index, value) +tuple_size(tuple) +``` + +### Maps + +```elixir +put_in(data, keys, value) +Map.get(map, key) +Map.put(map, key, value) +``` + +### String + +```elixir +String.length(str) +String.codepoints(string) +String.slice(str, 0..-1) +String.split(str, " ") +String.capitalize(str) +String.match(string, regex) +``` + +### Enum + +```elixir +Enum.reduce(list, acc, fn) +Enum.map(list, fn) +# consider streams instead +``` + +There's really way too many things, just see . diff --git a/flowtype.md b/flowtype.md index c876d165..bf50c39b 100644 --- a/flowtype.md +++ b/flowtype.md @@ -20,3 +20,35 @@ function foo(x: string, y: number): string { ... } // Arrays function total(numbers: Array) { ... } ``` + +### Primitives + +``` +any +boolean +mixed +number +string +void + +Array +Class +Function +Object +``` + +```js +var myNumbers: Array = [42] +function foo(): any { return 42 } +var b: boolean = false +var b: ?boolean = false /* maybe */ +var b: string | boolean = false /* maybe */ + +var a: Class = MyClass +var b: MyClass = new a() + +// Function signature +var add: ((num1: number, num2: number) => number) = function(num1, num2) { + return num1 + num2; +}; +``` diff --git a/imagemagick.md b/imagemagick.md index ea911038..dd90a7ea 100644 --- a/imagemagick.md +++ b/imagemagick.md @@ -5,11 +5,13 @@ title: Imagemagick ### Stuff -resize 100x40 - -flip # vertical - -flop # horizontal - -transpose # flip vertical + rotate 90deg - -transverse # flip horizontal + rotate 270deg - -trim # trim image edges + -crop 40x30+10+10 # (width)x(height)+(x)+y + -crop 40x30-10-10 # (width)x(height)+(x)+y + -flip # vertical + -flop # horizontal + -transpose # flip vertical + rotate 90deg + -transverse # flip horizontal + rotate 270deg + -trim # trim image edges -rotate 90 ### Resize to fit diff --git a/jade.md b/jade.md index 5432fb3d..0401c673 100644 --- a/jade.md +++ b/jade.md @@ -2,9 +2,82 @@ title: Jade --- +``` +doctype html +// comment (html) +-// silent comment + +html(lang='en') + - javascript() + h1.class#id(name='hi') + | Text. Hello there, + = name + + if condition + p. hello + + p. + multiline text + goes here +``` + ### Iteration - ul - each user in users - li= user - +```jade +ul + each user in users + li= user +``` + +### Layouts + +```jade +extends layout.jade + +block title + | hello + +block content + | hello +``` + +```jade +-// layout.jade +title + block title +body + block content +``` + +### Includes (partials) + +```jade +include ./includes/head.jade +include:markdown article.md +``` + +### Mixins + +```jade +mixin list + ul .. + ++list +``` + +```jade +mixin pet(name) + span.pet= name + ++pet('cat') +``` + +```jade +mixin article(title) + article + h2.title= title + block + ++article('hello there') + p Content goes here +``` diff --git a/meow.md b/meow.md index 29bc4d8f..512a357d 100644 --- a/meow.md +++ b/meow.md @@ -11,7 +11,6 @@ const cli = require('meow')(` -h, --help show usage information -v, --version print version info and exit `, { -alias: { alias: { h: 'help', v: 'version', x: 'excludeTag' }, string: ['lang'], boolean: ['pager'], diff --git a/sass.md b/sass.md index b1d42a21..ed06df9b 100644 --- a/sass.md +++ b/sass.md @@ -36,6 +36,13 @@ category: CSS http://sass-lang.com/documentation/Sass/Script/Functions.html +### Functions + + unquote('hello') + quote(hello) + unit(3em) => 'em' + unitless(100px) => false + ### Loops $i: 6; @@ -56,3 +63,7 @@ http://sass-lang.com/documentation/Sass/Script/Functions.html length($list) @each $item in $list { ... } + +## Reference + +- diff --git a/tape.md b/tape.md new file mode 100644 index 00000000..379bad5d --- /dev/null +++ b/tape.md @@ -0,0 +1,42 @@ +--- +title: Tape +category: JavaScript libraries +--- + +```js +test('things', (t) => { + t.plan(1) + + t.equal('actual', 'expected') + t.equal('actual', 'expected', 'should be equal') // messages are optional + + t.end(err) + t.fail('msg') + t.pass('msg') + t.timeoutAfter(2000) + t.skip('msg') + + t.ok(value, 'is truthy') + t.notOk(value, 'is falsy') + t.error(err, 'is falsy (print err.message)') + + t.equal(actual, expected, 'is equal') + t.notEqual + + t.deepEqual(actual, expected, 'is equal (use node's deepEqual)') + t.notDeepEqual + + t.looseEqual(actual, expected, 'is equal (use node's deepEqual with ==)') + t.notLooseEqual + + t.throws(fn, /FooError/) + t.throws(fn, FooError /* class */) + t.doesNotThrow + + t.comment('message') +}) +``` + +```js +test.only((t) => { ... }) +```