Update
This commit is contained in:
Rico Sta. Cruz
parent
ce76b735f4
commit
6e2a22b82b
|
|
@ -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 }
|
||||
])
|
||||
```
|
||||
76
bookshelf.md
76
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')
|
||||
```
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 = <div class='my-app'>Hello World!</div>
|
||||
|
||||
render(tree(app), document.body)
|
||||
```
|
||||
|
||||
## Components
|
||||
|
||||
```js
|
||||
Button = {
|
||||
render () { return <button>Submit</button> }
|
||||
}
|
||||
|
||||
App = {
|
||||
render () { return <div><Button /></div> }
|
||||
}
|
||||
|
||||
render(tree(<App />), document.body)
|
||||
render(tree(element(App)), document.body)
|
||||
```
|
||||
|
||||
## Component props/state
|
||||
|
||||
```js
|
||||
App = {
|
||||
render ({ props, state }) {
|
||||
return <div>{ /*...use state.store here*/ }</div>
|
||||
}
|
||||
|
||||
initialState (props) {
|
||||
return { store: store.getState() }
|
||||
},
|
||||
|
||||
afterMount (comp, el, setState) {
|
||||
store.subscribe(() => setState({ store: store.getState() }))
|
||||
}
|
||||
}
|
||||
|
||||
render(tree(<App />), document.body)
|
||||
```
|
||||
|
||||
## Events
|
||||
|
||||
```js
|
||||
<a onClick={onClick}>{props.text}</a>
|
||||
```
|
||||
|
||||
## Magic virtual element
|
||||
Use [magic-virtual-element](https://github.com/dekujs/magic-virtual-element) to enable nice classnames.
|
||||
|
||||
```
|
||||
import element from 'magic-virtual-element'
|
||||
<div style={style} class={[ 'button', '-active' ]}>
|
||||
```
|
||||
|
||||
## 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: <https://www.npmjs.com/package/deku>
|
||||
103
deku.md
103
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 = <div class='my-app'>Hello World!</div>
|
||||
|
||||
render(tree(app), document.body)
|
||||
```
|
||||
|
||||
## Components
|
||||
|
||||
```js
|
||||
Button = {
|
||||
render () { return <button>Submit</button> }
|
||||
}
|
||||
/** @jsx element */
|
||||
import { element } from 'deku'
|
||||
|
||||
App = {
|
||||
render () { return <div><Button /></div> }
|
||||
}
|
||||
|
||||
render(tree(<App />), document.body)
|
||||
// or with virtual-element
|
||||
render(tree(element(App)), document.body)
|
||||
```
|
||||
|
||||
## Component props/state
|
||||
|
||||
```js
|
||||
App = {
|
||||
render ({ props, state }) {
|
||||
return <div>{ /*...use state.store here*/ }</div>
|
||||
}
|
||||
|
||||
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 (
|
||||
<div class='App' hidden={props.hidden} color={context.theme.color}>
|
||||
{children}
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
render(tree(<App />), 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
|
||||
<a onClick={onClick}>{props.text}</a>
|
||||
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(
|
||||
<MyButton>Hello World!</MyButton>,
|
||||
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'
|
||||
<div style={style} class={[ 'button', '-active' ]}>
|
||||
```
|
||||
|
||||
## 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: <https://www.npmjs.com/package/deku>
|
||||
|
|
|
|||
|
|
@ -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 <https://learnxinyminutes.com/docs/elixir/>.
|
||||
32
flowtype.md
32
flowtype.md
|
|
@ -20,3 +20,35 @@ function foo(x: string, y: number): string { ... }
|
|||
// Arrays
|
||||
function total(numbers: Array<number>) { ... }
|
||||
```
|
||||
|
||||
### Primitives
|
||||
|
||||
```
|
||||
any
|
||||
boolean
|
||||
mixed
|
||||
number
|
||||
string
|
||||
void
|
||||
|
||||
Array<T>
|
||||
Class<T>
|
||||
Function
|
||||
Object
|
||||
```
|
||||
|
||||
```js
|
||||
var myNumbers: Array<number> = [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> = MyClass
|
||||
var b: MyClass = new a()
|
||||
|
||||
// Function signature
|
||||
var add: ((num1: number, num2: number) => number) = function(num1, num2) {
|
||||
return num1 + num2;
|
||||
};
|
||||
```
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
81
jade.md
81
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
|
||||
```
|
||||
|
|
|
|||
1
meow.md
1
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'],
|
||||
|
|
|
|||
11
sass.md
11
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
|
||||
|
||||
- <http://sass-lang.com/documentation/Sass/Script/Functions.html>
|
||||
|
|
|
|||
|
|
@ -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) => { ... })
|
||||
```
|
||||
Loading…
Reference in New Issue