20170108notes CSS Writing Modes + js state machine

# CSS Writing Modes

[Chinese tranlation | www.zcfy.cc](http://www.zcfy.cc/article/css-writing-modes-9670-24-ways-2321.html)
[Original Link | 24ways.org](https://24ways.org/2016/css-writing-modes/)

> Hmmm here I made some excerts.

### Why learn about writing modes?
Most importantly, I’ve found understanding Writing Modes incredibly helpful when understanding Flexbox and CSS Grid. Before I learned Writing Mode, I felt like there was still a big hole in my knowledge, something I just didn’t get about why Grid and Flexbox work the way they do. Once I wrapped my head around Writing Modes, Grid and Flexbox got a lot easier. Suddenly the Alignment properties, align-* and justify-*, made sense.

### CSS properties
I’m going to focus on the CSS writing-mode property in this article. It has five possible options:
```css
writing-mode: horizontal-tb;
writing-mode: vertical-rl;
writing-mode: vertical-lr;
writing-mode: sideways-rl;
writing-mode: sideways-lr;
```

> So I see the default mode is hrizontal-tb(top to bottom),within this article it also mentioned an important concept, 'block' and 'inline'.
The images below explain well.

### The block stack
![image](https://qiita-image-store.s3.amazonaws.com/0/119653/704c015c-d20d-9f75-61e0-10cc0658ece2.png)
### The inline stack
![](https://media.24ways.org/2016/jsimmons/inlinedirection.png)

# JS state machine
[Original Link | segmentfault.com](https://segmentfault.com/q/1010000008256997?utm_source=weekly&utm_medium=email&utm_campaign=email_weekly)
> This morning I read this page, the poster asked how to write a consecutive, multiple-step and business-complex JS pop? He need 3 pops to complete the flow below

![image](https://qiita-image-store.s3.amazonaws.com/0/119653/9d7fbe2b-624a-bea8-a685-955b910d8d65.png)

> The ranked first answer replied by @波同学, He think the key issue is how to record state and track.
He recommended 'redux' for complex business, and for simpler application, it's better to write a state machine yourself.

The code below is the state.js module

```javascript
// state.js
// define a object to record state
let states = {}


// To get the object content, usually used to check the value we stored
function getStates () {
    return states
}

// Get the stored value according to attribute name
function get (name) {
    if(states[name]) { return states[name] }
    return ''
}


// same with the 'setState' function of react
function set (options, target) {
    let keys = Object.keys(options)
    let o = target ? target : states
    keys.map( item => {
        if(typeof o[item] == 'undefined') {
            o[item] = options[item]
        } 
        else {
            if(type(o[item]) == 'object') {
                set(options[item], o[item])
            } else {
                o[item] = options[item]
            }
        }
        return item
    })
}

// Determine the data type
function type(elem) {
    if (elem == null) return elem + '';
    return toString.call(elem).replace(/[\[\]]/g, '').split(' ')[1].toLowerCase();
}

// Here we used the ES6 module sytax to provide the external interface
export { getStates, get, set }
```

Example fot usage
```js
import * as state from './state.js';

//record the step 1, we could use this structure
state.set({
    payType: {
        step: 1,
        stepName: 'payType',
        preStep: null,
        selectType: 0  // custom choice
    }
})

// record the step 2
state.set({
    cardInfo: {
        step: 2, 
        stepName: 'cardInfo',
        preStep: 'payType', 
        // Keep same with the name of previous step
        // This isse also can be archieved with some routing plugins to return the previous step
        moreInfo: {},
        ... // more info of credit
    }
})

... ...  // The all remain steps can store info like this

// This method is also convinience to insert new steps.
// e.g. If you wanna modify the data of step 2, you could write as below
state.set({
    cardInfo: {
        preStep: 'otherStep'
    }
})
```
This record is just for front level, the state will no longer exists when user refreshes or turn off the page