20170108notes CSS Writing Modes + js state machine

CSS Writing Modes

Chinese tranlation | www.zcfy.cc
Original Link | 24ways.org

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:

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

The inline stack

JS state machine

Original Link | segmentfault.com

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

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

// 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

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