xgqfrms/feiqa

FEIQA: Front End Interviews Question & Answers

Here are some ideas to get you started:

• 🔭 I’m currently working on Web, Linux, macOS ...
• 🌱 I’m currently learning Flutter, TypeScript, Swift, Docker, ...
• 👯 I’m looking to collaborate on Everything ...
• 🤔 I’m looking for help with StackOverflow, Google, ChatGPT, ...
• 💬 Ask me about Anything of Web Full Stack ...
• 📫 How to reach me:
• 😄 Pronouns: webfullstack / webgeeker
• ⚡ Fun fact: ...

https://www.xgqfrms.xyz/

Gaming

• 

projects 🔥

Skill Stack

desciption	image
GitHub Metrics SVG
3D Profile

copyright© xgqfrms 2012 ~ forever

feiqa's Issues

VUE & VUE CLI 3.x

VUE & VUE CLI 3.x

VUE CLI

# remove old version (1.x / 2.x)
$ npm uninstall vue-cli -g or yarn global remove vue-cli.

# install 3.x
$ npm install -g @vue/cli

# OR
$ yarn global add @vue/cli

# check version
$ vue --version
$ vue -V

# help
$ vue --help
$ vue -h

# app
$ vue create app
# dev
$ vue create dev

$ vue create --help

$ vue ui

https://cli.vuejs.org/guide/

NVM

https://github.com/creationix/nvm
https://github.com/coreybutler/nvm-windows

Prototyping

You can rapidly prototype with just a single *.vue file with the vue serve and vue build commands

$ npm install -g @vue/cli-service-global

vue plugins

# plugins

$ vue add @vue/eslint
# OR
$ vue add @vue/cli-plugin-eslint

$ vue add router
$ vue add vuex

$ vue add @vue/eslint --config airbnb --lintOn save

https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue

Router

HTML5 History

https://router.vuejs.org/guide/essentials/history-mode.html

npx

https://router.vuejs.org/guide/essentials/history-mode.html

.vuerc

{
    "useConfigFiles": true,
    "router": true,
    "vuex": true,
    "cssPreprocessor": "sass",
    "plugins": {
        "@vue/cli-plugin-babel": {},
        "@vue/cli-plugin-eslint": {
            "config": "airbnb",
            "lintOn": ["save", "commit"]
        }
    }
}

vue-cli-service

https://cli.vuejs.org/guide/cli-service.html#using-the-binary

Fetch & POST & JSON Server

Fetch & POST & JSON Server

before

after

JSON Server

const fetchPOSTJSON = (url = ``, obj = {}) => {
    return fetch(url,
        {
            method: "POST",
            mode: "cors",
            headers: {
                "Content-Type": "application/json; charset=utf-8",
            },
            body: JSON.stringify(obj),
        }).then(res => res.json())
        .then(
            (json) => {
                console.log(`POST configs OK!`);
                return json;
            }
        ).catch(err => console.log(`fetch error & POST configs Error!`, err));
};

// async / await
async function getPOSTDatas(url = ``, obj = {}) {
    try {
        return await fetchJSON(url, obj);
    } catch (err) {
        console.error("getDatas error:\n", err);
    }
}

let obj = {
        "id": "fb-hc",
        "config": {
            "width": "1024",
            "height": "300",
        }
    };

fetchPOSTJSON(`http://10.1.5.202:7777/componentConfig`, obj);

HTTPS & SSL & localhost

HTTPS & SSL & localhost

https://localhost

#43 (comment)

vue component library

vue component library

https://github.com/vuejs/awesome-vue

vue ui frameworks

https://github.com/vuejs/awesome-vue#frameworks

https://github.com/ElemeFE/element
https://github.com/iview/iview

https://github.com/matsp/material-components-vue

https://alibaba.github.io/ice/block?type=vue

linux & chmod 777

linux & chmod 777

https://stackoverflow.com/questions/8328481/chmod-777-to-a-folder-and-all-contents

how to read browser console error in js ?

how to read browser console error in js?

https://stackoverflow.com/questions/19846078/how-to-read-from-chromes-console-in-javascript

https://www.quora.com/How-do-I-read-console-window-errors-from-Chrome-using-JavaScript

polyfill

polyfill

https://github.com/Financial-Times/polyfill-service
https://polyfill.io/v2/docs/

Front-End & News & Blogs

Front-End & News & Blogs

news & blogs

https://www.zhihu.com/question/29940477

https://stackshare.io/

https://stackshare.io/search/q=xgqfrms

https://stackshare.io/trending/tools

https://stackshare.io/news

https://stackshare.io/react

input & atrributes

input & atrributes

readonly & regex pattern

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-pattern

---

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/

<input type="text" disabled="true" title="用户名不可编辑" />

https://element.eleme.io/#/zh-CN/component/input

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable
https://developer.mozilla.org/en-US/docs/Web/CSS/:disabled
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

TinyMCE

TinyMCE

https://panjiachen.github.io/vue-element-admin/#/components/tinymce

GitHub & GraphQL API

GitHub & GraphQL API

https://www.cnblogs.com/xgqfrms/p/9515213.html

HTML5 & template & polyfill

HTML5 & template & polyfill

html templates

https://caniuse.com/#search=html%20templates

polyfill

https://www.webcomponents.org/polyfills/

https://stackoverflow.com/questions/16055275/html-templates-javascript-polyfills

---

https://github.com/jeffcarp/template-polyfill

http://jsfiddle.net/brianblakely/h3EmY/

createDocumentFragment

"use strict";

/**
 *
 * @author xgqfrms
 * @license MIT
 * @copyright xgqfrms
 *
 * @description H5TemplatePolyfill
 * @augments
 * @example
 *
 */

// const H5TemplatePolyfillGenerator = (datas = [], debug = false) => {
//     let result = ``;
//     // do something...
//     return result;
// };



// export default H5TemplatePolyfill;

// export {
//     H5TemplatePolyfill,
// };


function templatePolyfill() {
    if ("content" in document.createElement("template")) {
        return false;
    }
    var templates = document.getElementsByTagName("template");
    var plateLen = templates.length;
    for (var x = 0; x < plateLen; ++x) {
        var template = templates[x];
        var content = template.childNodes;
        var fragment = document.createDocumentFragment();
        while (content[0]) {
            fragment.appendChild(content[0]);
        }
        template.content = fragment;
    }
}

// module.exports = templatePolyfill;

CSS & Variable Fonts

CSS & Variable Fonts

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide

https://caniuse.com/#feat=variable-fonts

Fetch & GET & POST & Content-Type & Query String

Fetch & GET & POST

Content-Type & Query String

const url = `http://10.1.64.116:8080/http/send/viewtree`;

let obj = {
    pro_name:"service-base"
    // "pro_name":"service-base"
};

// JSON.stringify(obj);
// "{"pro_name":"service-base"}"

// encodeURIComponent(JSON.stringify(obj));
// "%7B%22pro_name%22%3A%22service-base%22%7D"

fetch(url,
    {
        method: "POST",
        // mode: "no-cors",
        mode: "cors",
        credentials: "same-origin",
        headers: {
            "Content-Type": "application/x-www-form-urlencoded; charset=utf-8",
            // this line is important, if this content-type is not set it wont work
        },
        body: `json=${encodeURIComponent(JSON.stringify(obj))}`,
        // query string
    }
).then(res => res.json())
.then(
    (json) => {
        console.log(`POST configs OK!`);
        return json;
    }
).catch(err => console.log(`fetch error & POST configs Error!`, err));

let get_url = `http://10.1.64.116:8080/http/send/viewtree?${encodeURIComponent(JSON.stringify(obj))}`;

fetch(get_url,
    {
        method: "GET",
        // mode: "no-cors",
        mode: "cors",
        credentials: "same-origin",
        headers: {
            "Content-Type": "application/json; charset=utf-8",
        },
    }
).then(res => res.json())
.then(
    (json) => {
        console.log(`GET configs OK!`);
        return json;
    }
).catch(err => console.log(`fetch error & GET configs Error!`, err));

---

https://stackoverflow.com/questions/29775797/fetch-post-json-data

https://stackoverflow.com/questions/4007969/application-x-www-form-urlencoded-or-multipart-form-data

readonly js object

readonly js object

https://stackoverflow.com/questions/2428409/how-can-you-make-a-variable-object-read-only-in-javascript

integrated-terminal

integrated-terminal

VS Code

https://code.visualstudio.com/docs/editor/integrated-terminal#_changing-how-the-terminal-is-rendered

webpack 3.x best practical & webpack 4.x best practical

webpack 3.x best practical

https://www.cnblogs.com/xgqfrms/p/9515189.html

multi pages

webpack 4.x best practical

https://www.cnblogs.com/xgqfrms/p/9109493.html

ES6 Set & unique array keys

ES6 Set

javascript

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set

https://medium.com/ecmascript-2015/es6-set-map-weak-a2aeb7e2d384

https://www.frontendjournal.com/javascript-es6-learn-important-features-in-a-few-minutes/

https://stackoverflow.com/questions/33089695/how-can-i-sort-an-es6-set

https://coryrylan.com/blog/javascript-es6-class-syntax

https://medium.com/sons-of-javascript/javascript-an-introduction-to-es6-1819d0d89a0f

Array.from(new Set(["b","a","c"])).sort();

[...(new Set(["b","a","c"]))].sort(); 
// with spread.

let s = new Set();
// s.size;
// s.keys();
// s.values();
// s.entries()

// arr = Array.from(s);
// arr = [...s];

// s.forEach((value) => {
//     console.log(value);
// });

// // intersect can be simulated via
// var intersection = new Set([...s].filter(x => s.has(x)));

// // difference can be simulated via
// var difference = new Set([...s].filter(x => !s.has(x)));




const titles = [
    "fund.topic.asset_allocation.other.PortfolioChangeDetail",
    "fund.topic.asset_allocation.other.PortfolioChange.FundDetail",
    "fund.topic.asset_allocation.other.AllRestrictedDetail",
    "fund.topic.asset_allocation.other.StockTrade",
    "fund.topic.asset_allocation.other.PortfolioChange",
    "fund.topic.asset_allocation.other.AllRestrictedBond",
    "fund.topic.asset_allocation.other.AllRestrictedBond.FundDetail"
];

for (let i = 0; i < titles.length; i++) {
    // if (s.has(titles[i])) {
    //     s.add(titles[i]);
    // }
    s.add(titles[i]);
}

fancytree & customize status icon

fancytree & customize status icon

https://github.com/mar10/fancytree/

docs

https://github.com/mar10/fancytree/wiki#configure-options

http://www.wwwendt.de/tech/fancytree/doc/jsdoc/Fancytree_Static.html

http://wwwendt.de/tech/fancytree/doc/jsdoc/global.html#FancytreeOptions
http://www.wwwendt.de/tech/fancytree/doc/jsdoc/global.html#FancytreeOptions

external

span.external span.fancytree-title:after {
    content: "";
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAMAAAC67D+PAAAAFVBMV…EcVB8kmrwFyni0bOeyyDpy9JTLEaOhQq7Ongf5FeMhHS/4AVnsAZubxDVmAAAAAElFTkSuQmCC) 100% 50% no-repeat;
    padding-right: 13px;
}

OK

how to add customize css class to the box span?

mar10/fancytree#867

http://wwwendt.de/tech/fancytree/demo/sample.js
http://wwwendt.de/tech/fancytree/demo/sample.css

fetch api & image

fetch api & image

fetch image url

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#Checking_that_the_fetch_was_successful

    fetch("http://example.com/movies.json")
    .then(function(response) {
        return response.json();
    })
    .then(function(myJson) {
        console.log(myJson);
    });
    
    //  https://cdn.xgqfrms.xyz/logo/icon.png
    fetch("http://example.com/flowers.jpg")
    .then(function(response) {
        if(response.ok) {
            return response.blob();
        } else {
            throw new Error('Network response was not ok.');
        }
    }).then(function(myBlob) { 
        var objectURL = URL.createObjectURL(myBlob); 
        myImage.src = objectURL; 
    }).catch(function(error) {
        console.log('There has been a problem with your fetch operation: ', error.message);
    });

cdn & hotlink image

cdn & hotlink image

X-Frame-Options & iframe & CORS

X-Frame-Options

iframe & CORS

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options

bug

no `for` & create Array 100

no for & create Array 100

new Uint8Array(100).map((item, i) => (item = i));

// Uint8Array(100) [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99]

---

Uint8Array

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint32Array

https://en.wikipedia.org/wiki/Bit_array

https://stackoverflow.com/questions/29523206/how-do-i-write-an-8-bit-array-to-a-16-bit-array-of-1-2-size
https://stackoverflow.com/questions/33793246/c-converting-8-bit-values-into-16-bit-values

Typed Arrays

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array

new_arr = new Uint8Array(100); // new in ES2017

// Uint8Array(100) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]

old_arr = new Array(100);
// (100) [empty × 100]

localStorage

localStorage

localStorage.setItem(`depend_pro_names`, DependencesProjects);
localStorage.setItem(`depend_server_names`, DependencesServers);

let DependencesProjects = localStorage.getItem(`depend_pro_names`).split(","),
    DependencesServers = localStorage.getItem(`depend_server_names`).split(",");

variable & replace & JavaScript

How to use a variable in replace function of JavaScript ?

variable & replace & JavaScript

https://stackoverflow.com/questions/10136097/mystring-replace-variable-but-globally

let message = "[JIRA编号]：GFT-4596\n[修改内容]：request更换请求参数EndDate\n[提交类型]：阶段性递交\n[需要测试]：是",
    jiraId = "GFT-4596";


let regex = new RegExp(jiraId, "ig",
    new_message = message.replace(regex, `<a data-links="jira" href="http://abc.xyz.com/browse/${jiraId}">${jiraId}</a>`);

return new string

---

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace

http://burnignorance.com/php-programming-tips/how-to-use-a-variable-in-replace-function-of-javascript/

css3 & 3d flip cards

css3 & 3d flip cards

https://css3playground.com/3d-flip-cards/

https://davidwalsh.name/css-flip

https://www.cnblogs.com/xgqfrms/p/9127423.html

PM2

PM2

https://www.npmjs.com/package/pm2

https://github.com/Unitech/pm2

docs

https://pm2.io/doc/en/runtime/quick-start/

https://pm2.io/doc/en/runtime/overview/

https://pm2.io/doc/en/runtime/guide/installation/

---

old docs

https://pm2.keymetrics.io/docs/usage/quick-start/
https://pm2.keymetrics.io/docs/usage/quick-start/#options

https://pm2.keymetrics.io/docs/usage/pm2-api/

https://pm2.keymetrics.io/docs/usage/watch-and-restart/#auto-restart-apps-on-file-change

https://pm2.keymetrics.io/docs/usage/startup/

https://id.keymetrics.io/api/oauth/register

https://github.com/pm2-hive/pm2-hive.github.io/tree/master/docs/features/startup.md

---

# install

$ npm install pm2 -g

$ pm2 list

$ mp2 start server.js

cookie

cookie

// write cookie
document.cookie = `
access_token=eyJhbGciOiJIUzI1NiJ9.eyJyb2xlIjoiQWRtaW4iLCJ1c2VyX25hbWUiOiJhZG1pbiJ9.k82neq7nQXjz3xBu0P7jnbukOx57WUo4_V3DLStkEss; Expires=Wed, 21 Oct 2020 07:28:00 GMT; path=/;
`;

https://www.w3schools.com/js/js_cookies.asp

ES6 & Set & sort Array

ES6 & Set & sort Array

https://stackoverflow.com/questions/33089695/how-can-i-sort-an-es6-set

Array.from(new Set(["b","a","c"])).sort();
[...(new Set(["b","a","c"]))].sort(); // with spread.

CSS parent selector

CSS parent selector

https://css-tricks.com/parent-selectors-in-css/

https://remysharp.com/2010/10/11/css-parent-selector/

https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector

https://github.com/Idered/cssParentSelector

https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors

:has

https://caniuse.com/#feat=css-has

https://drafts.csswg.org/selectors-4/#relational
https://drafts.csswg.org/selectors-4/#has-pseudo

websocket & shit jquery

websocket

https://github.com/jmesnil/stomp-websocket

shit jquery

http://pgwjs.com/pgwslider/

chrome canary & blur fonts bug

chrome canary & blur fonts bug

blur fonts bug

https://developers.google.com/web/updates/2018/04/devtools

https://support.google.com/chrome/go/feedback_confirmation

code snippets

code snippets

https://github.com/xgqfrms/FEIQA/tree/master/000-xyz/templates

.code & right click copy

.code & right click copy

xgqfrms/vscode#1

Ali & FEI

Ali & FEI

js & this

new version

var test = (
    function (a){
        console.log(`a2 =`, a);// 1
        // console.log(`b2 =`, b);
        // undefined
        this.a = a;
        console.log(`this.a1 =`, this.a);// 1
        return function (b) {
            console.log(`this.a2 =`, this.a);// 1
            console.log(`b3 =`, b);// 4 ???
            return this.a + b;
        };
    }(
        function (a, b) {
            console.log(`a1 =`, a);// 1
            console.log(`b1 =`, b);// 2
            return a;
        }(1, 2)
    )
);
console.log(`test(4) = `, test(4));
// 5
// console.log(`a =`, a);
// 1
// console.log(`b =`, b);
// undefined
// console.log(`this.a =`, this.a);
// undefined

ad blocker checker

ad blocker checker

no ads

https://www.ruanyifeng.com/blog/2016/09/csp.html
https://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html

Kubernetes & K8S

Kubernetes

K8S

https://kubernetes.io/docs/concepts/overview/what-is-kubernetes/

Kubernetes is a portable, extensible open-source platform for managing containerized workloads and services, that facilitates both declarative configuration and automation.

Kubernetes是一个便携式，可扩展的开源平台，用于管理集装箱化的工作负载和服务，这有助于声明性配置和自动化。

https://kubernetes.io/cn/

freecodecamp & codecademy

freecodecamp

https://www.freecodecamp.org/

codecademy

https://www.codecademy.com/paths/web-development/

https://github.com/codecademy

web-components

web-components

https://developers.google.com/web/fundamentals/web-components/

https://developers.google.com/web/fundamentals/web-components/examples/howto-checkbox
https://googlechromelabs.github.io/howto-components/howto-checkbox/#demo

https://developers.google.com/web/fundamentals/web-components/examples/howto-tabs
https://googlechromelabs.github.io/howto-components/howto-tabs/#demo

https://developers.google.com/web/fundamentals/web-components/examples/howto-tooltip
https://googlechromelabs.github.io/howto-components/howto-tooltip/#demo

https://github.com/GoogleChromeLabs/howto-components

mobile touch & js touch events

mobile touch & js touch events

xgqfrms/xgqfrms#30 (comment)

Linux & shell & bg & fg

Linux & shell

https://www.linux.org/

Linux 中如何让命令在后台运行

1. 在下达的命令后面加上&，就可以使该命令在后台进行工作，这样做最大的好处就是不怕被 ctrl+c 这个中断指令所中断。

2. 那大家可能又要问了，在后台执行的程序怎么使它恢复到前台来运行呢？很简单，只用执行 fg 这个命令，就可以了。

3. 可能有些同学又要问了，我现在已经在前台运行的命令，我能把它放到后台去运行么？当然可以了，只要执行 ctrl+z 就可以做到了。是不是很赞啊！

4. 说到这里可能有些同学又要问了，如果我有多个进程在后台运行，那如何恢复到前台来执行呢？这时候就要用到jobs这个命令了，通过jobs这个命令，能够列出所有在后台执行的进程，那个中括号（[ ]）里面的数字就是 jobs 的代号啰 ，通过fg %number 就可以恢复指定的后台进程.

https://www.cnblogs.com/andydao/p/4162479.html

---

bg & fg

https://www.cnblogs.com/lwm-1988/archive/2011/08/20/2147299.html

PM2

HTML5 drag & drop & how to detect cursor position in js

HTML5 drag & drop

how to detect cursor position in js?

https://javascript.info/mouse-drag-and-drop

HTML5 Canvas

HTML5 Canvas

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images

https://codepen.io/pen/define

---

https://www.html5canvastutorials.com/tutorials/html5-canvas-images/
https://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/

https://www.w3schools.com/tags/canvas_drawimage.asp
https://www.w3schools.com/graphics/canvas_images.asp

---

Canvas & Ruler

js canvas image

https://stackoverflow.com/questions/20434728/how-to-create-a-ruler-a-tool-for-canvas

https://mrfrankel.github.io/ruler/
https://github.com/mrfrankel/ruler/

MrFrankel/ruler#12

demo

https://codepen.io/webgeeker/pen/KBLaVp

perfect demo

https://codepen.io/webgeeker/full/pZmRYe/

PS: re-render

CDN

https://cdn.xgqfrms.xyz/canvas/ruler/ruler.min.css
https://cdn.xgqfrms.xyz/canvas/ruler/ruler.min.js

"use strict";

/**
 *
 * @author xgqfrms
 * @license MIT
 * @copyright xgqfrms
 *
 * @description canvas ruler
 * @augments
 * @example
 *
 */

const canvasRuler = new ruler({
    container: document.querySelector(`#wrapper`)
});

let guides = ``,
    visible = true,
    visibleGuides = true;

// ruler
function setPosX(val){
    canvasRuler.api.setPos({
        x: val
    });
}

function setPosY(val){
    canvasRuler.api.setPos({
        y: val
    });
}

function setScale1(val){
    canvasRuler.api.setScale(val);
}

function hideRuler(){
    canvasRuler.api.toggleRulerVisibility(visibleGuides = !visibleGuides);
}

// guides
function clearGuides(){
    canvasRuler.api.clearGuides();
}

function storeGuides(){
    guides = canvasRuler.api.getGuides();
}

function setGuides(){
    canvasRuler.api.setGuides(guides);
}

function hideGuides(){
    canvasRuler.api.toggleGuideVisibility(visible = !visible);
}

function destory(){
    canvasRuler.api.destroy();
}

Linux & tree

Linux & tree

https://www.computerhope.com/unix/tree.htm

https://www.computerhope.com/unix/tree.htm#examples

https://linux.die.net/man/1/tree

https://www.cyberciti.biz/faq/linux-show-directory-structure-command-line/

https://www.ostechnix.com/view-directory-tree-structure-linux/

http://mama.indstate.edu/users/ice/tree/

# all
$ tree

# folder only
$ tree -d

# src folder
$ tree src

# ignore folder
$ tree -I "node_modules*"

__proto__ & prototype

__proto__ & prototype

inheritance & prototype chain

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/prototype

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/proto

https://developer.mozilla.org/en-US/docs/Mozilla/JavaScript-DOM_Prototypes_in_Mozilla

---

https://stackoverflow.com/questions/3082791/javascript-and-proto-what-browsers-use-it

table multi cols

table multi cols

bug

const cols = [
    {
        "key": "name",
        "title": "Name",
        "colspan": 1,
        "rowspan": 3,
        "children": null,
    },
    {
        "key": "addreess",
        "title": "Addreess",
        "colspan": 4,
        "rowspan": 1,
        "children": [
            {
                "key": "country",
                "title": "Country",
                "colspan": 2,
                "rowspan": 1,
                "children": [
                    {
                        "key": "language",
                        "title": "Language",
                        "colspan": 1,
                        "rowspan": 1,
                        "children": null,
                    },
                    {
                        "key": "population",
                        "title": "Population",
                        "colspan": 1,
                        "rowspan": 1,
                        "children": null,
                    },
                ],
            },
            {
                "key": "city",
                "title": "City",
                "colspan": 2,
                "rowspan": 1,
                "children": [
                    {
                        "key": "code",
                        "title": "Code",
                        "colspan": 1,
                        "rowspan": 1,
                        "children": null,
                    },
                    {
                        "key": "rank",
                        "title": "Rank",
                        "colspan": 1,
                        "rowspan": 1,
                        "children": null,
                    },
                ],
            },
        ],
    },
    {
        "key": "age",
        "title": "Age",
        "colspan": 1,
        "rowspan": 3,
        "children": null,
    }
];

const datas = [
    {
        "key": "001",
        "name": "xgqfrms",
        "age": 23,
        "country": "China",
        "city": "shanghai"
    },
    {
        "key": "002",
        "name": "Jackson",
        "age": 17,
        "country": "USA",
        "city": "LA"
    },
    {
        "key": "003",
        "name": "king",
        "age": 27,
        "country": "Korea",
        "city": "Seoul"
    },
];


const recursiveTrs = (cols = []) => {
    let trs = ``,
        newTr = ``,
        ths = ``;
    const delayTest = (children = []) => {
        newTr += recursiveTrs(children);
    };
    cols.forEach(
        (col, i) => {
            let {
                key,
                title,
                children,
                colspan,
                rowspan
            } = {...col};
            ths += `
                <th colspan="${colspan}" rowspan="${rowspan}" data-key="key">
                    ${title}
                </th>
            `;
            console.log(`${i} ths =`, ths);
            if(children !== null) {
                // console.log(`${i} new trs =`, trs);
                // trs += recursiveTrs(children);
                delayTest(children);
            }
        }
    );
    trs += `
        <tr>
            ${ths}
        </tr>
    `;
    trs += newTr;
    console.log(`return trs =`, trs);
    return trs;
};



recursiveTrs(cols);

const cols = [
    {
        "key": "name",
        "title": "Name",
        "colspan": 1,
        "rowspan": 2,
        "children": null,
    },
    {
        "key": "age",
        "title": "Age",
        "colspan": 1,
        "rowspan": 2,
        "children": null,
    },
    {
        "key": "addreess",
        "title": "Addreess",
        "colspan": 2,
        "rowspan": 1,
        "children": [
            {
                "key": "country",
                "title": "Country",
                "colspan": 1,
                "rowspan": 1,
                "children": null,
            },
            {
                "key": "city",
                "title": "City",
                "colspan": 1,
                "rowspan": 1,
                "children": null,
            },
        ],
    },
];

CSS3 loading

CSS3 loading

text spinners

https://github.com/maxbeier/text-spinners

https://maxbeier.github.io/text-spinners/

CSS content & 换行字符 & loading 效果

https://www.zhangxinxu.com/wordpress/2016/11/css-content-pre-animation-character-loading/

ES6 & import()

ES6 & import()

dynamically importing ES6 modules

http://2ality.com/2017/01/import-operator.html

args duplication bug

args duplication bug

bdadam/PubSub#2

Error

let PubSub = window.PubSub;

PubSub.subscribe("anEvent", function(eventName, eventData) {
    console.log(`\neventName =`, eventName);
    console.log(`\neventData =`, eventData);
    // undefined
    console.log(eventData.something);
    // Uncaught TypeError: Cannot read property 'something' of undefined
    console.log(eventData.someOtherThing);
    // Uncaught TypeError: Cannot read property 'something' of undefined
});

setTimeout(() => {
    PubSub.publish(
        "anEvent", // 1 + 1 args & name
        {
            something: 1,
            someOtherThing: 2
        },// data
    );
}, 1000);

OK

but duplication name argument

let PubSub = window.PubSub;

PubSub.subscribe("anEvent", function(eventName, eventData) {
    console.log(`\neventName =`, eventName);
    console.log(`eventData =`, eventData);
    console.log(eventData.something);
    console.log(eventData.someOtherThing);
});


// args bug
PubSub.subscribe("anEvent", function(eventName, eventData) {
    console.log(`\neventName =`, eventName);
    // "anEvent"
    console.log(eventName.something + 1);
    console.log(eventName.someOtherThing + 3);
});



setTimeout(() => {
    PubSub.publish(
        "anEvent",// 1 + 2 args
        "anEvent",// name
        {
            something: 1,
            someOtherThing: 2
        },// data
    );
}, 1000);

js json string to object

js json string to object

https://stackoverflow.com/questions/9036429/convert-object-string-to-json

const json = {
    "status": 200,
    "success": true,
    "message": null,
    "data": "{\n  version: '1.0',\n  defaultSchema: 'root',\n  schemas: [\n    {\n      name: 'root',\n      cache:'false',\n      type: 'custom',\n      factory: 'org.gil.sydb.server.schema.BaseSchemaFactory',\n      operand: {\n           tables:['*']\n      }\n    },\n    {\n      name: 'news',\n      type: 'custom',\n      factory: 'org.gil.sydb.server.schema.BaseSchemaFactory',\n      operand: {\n       tables:['MockTable']\n      }\n    }\n  ]\n}\n"
};


let str = `${json.data}`;

JSON.parse(JSON.stringify(eval(`(${json.data})`)));

https://stackoverflow.com/questions/45015/safely-turning-a-json-string-into-an-object