xgqfrms commented 6 years ago

websocket

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

shit jquery

http://pgwjs.com/pgwslider/

xgqfrms commented 6 years ago

border-image

https://css-tricks.com/understanding-border-image/

https://css-tricks.com/almanac/properties/b/border-image/

.main-container-full {
    background: #f5f5f5;
    border-image: url("../imgs/border.png");
    border: 9px solid #3385ff;
}

border first & border-image second

test


.xyzdata_main-container-full {
    box-sizing: border-box;
    width: 80%;
    height: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px;
    background: #f5f5f5;
    border: 30px dashed #3385ff;
    border-image: url(../imgs/border.png);
    border-image-slice: 4;
    border-image-repeat: stretch;
    border-image-width: 9px 9px;
}

xgqfrms commented 6 years ago

border-image & demo

http://www.norabrowndesign.com/css-experiments/border-image-anim.html

xgqfrms commented 6 years ago

border-image-bug

border-image 太花哨了，实现不了。

xgqfrms commented 6 years ago

Win10怎么查看无线网络密码

xgqfrms commented 6 years ago

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

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

https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-repeat

https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-slice

https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-outset

https://css-tricks.com/understanding-border-image/

http://www.norabrowndesign.com/css-experiments/border-image-anim.html

https://css-tricks.com/almanac/properties/b/border-image/

xgqfrms commented 6 years ago

html5 & link & imports & templates

https://www.html5rocks.com/en/tutorials/webcomponents/imports/

https://www.webcomponents.org/community/articles/introduction-to-html-imports

http://w3c.github.io/webcomponents/spec/imports/

http://w3c.github.io/webcomponents/spec/imports/#link-type-import

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

xgqfrms commented 6 years ago


let link = `<link rel="import" href="http://2ality.com/2017/01/import-operator.html" data-rel="import-operator">`,
    tempalteBox = document.querySelector(`[data-modules="modules-container"]`);

tempalteBox.insertAdjacentHTML(`afterbegin`, link);

xgqfrms commented 6 years ago

import once

test


link = document.querySelector(`link[data-rel="containers"]`);
// <link rel="import" href="./containers.html" data-rel="containers">…</link>
template = link ? link.import : null;

// empty html


<!DOCTYPE html>
<html lang="zh-Hans">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="xgqfrms">
    <meta name="generator" content="VS code">
    <title>H5 html template</title>
    <!-- firefox bug -->
    <!-- polyfill & preload -->
    <!-- <link rel="preload" href="./webcomponents-hi-sd-ce.min.js" as="script"> -->
    <script src="./webcomponents-hi-sd-ce.min.js"></script>
    <!-- <link rel="preload" href="style.css" as="style"> -->
</head>

<body>
    <section>
        <h1>H5 html template & preload && delay</h1>
    </section>
    <section data-test="html-template">
        <!-- test -->
    </section>
    <section data-modules="modules-container">
        <link rel="import" href="./containers.html" data-rel="containers">
        <!-- links -->
        <section data-template="template-container">
            <!-- templates -->
        </section>
    </section>
    <!-- js -->
    <script>
        // no need jQuery
        let $$ = {
            qs: function qs(uid = ``) {
                return document.querySelector(uid);
            },
            qsa: function qsa(uid = ``) {
                return document.querySelectorAll(uid);
            },
        };
        if (window.$) {
            window.$ = Object.assign($, $$);
        } else {
            window.$ = Object.assign({}, $$);
        }
        const loadTemplate = (uid = `containers`) => {
            let templatesBox = document.querySelector(`[data-template="template-container"`),
                link = document.querySelector(`link[data-rel="containers"]`),
                // #document
                template = link ? link.import : null,
                div = template ? template.querySelector(`[data-div="templates-${uid}"]`) : null;
            if (div) {
                // read template once
                templatesBox.appendChild(div);
            } else {
                // exsit template
            }
        };
        const showDOM = (uid = `full-width`) => {
            let container = $.qs(`[data-test="html-template"]`),
                temp = $.qs(`[data-template="template-containers-${uid}"]`),
                clone = temp ? temp.content.cloneNode(true) : null;
            if (clone) {
                container.appendChild(clone);
            }
        };
        // DOM fully loaded and parsed!
        document.addEventListener("DOMContentLoaded", () => {
            setTimeout(() => {
                // preload && delay
                loadTemplate();
                // init
                showDOM();
            }, 100);
        });
        // window.onload = () => {
        //     setTimeout(() => {
        //         loadTemplate();
        //         // init
        //         showDOM();
        //     }, 1000);
        // };
    </script>
</body>

</html>


<!-- template -->
<div data-div="templates-containers">
    <template data-template="template-containers-full-width">
        <section data-container="containers-full-width" data-handle="container-box" draggable="false" class="f10_containers_full-witdh data-handle-container-box">
            <h1 data-handle="container-title" class="data-handle-container-title">☰ container-title</h1>
            <div data-handle="container-content" class="data-handle-container-content" draggable="false">
                <p>container-content</p>
                <p>container-content</p>
                <p>container-content</p>
                <p>container-content</p>
            </div>
        </section>
    </template>
</div>

xgqfrms commented 6 years ago

E应用图表开发及官方DEMO讲解

https://alivideolive.taobao.com/h5/liveDetail/78b88b41-b231-41fb-bd71-fbc629d497ad?code=ae7a4623cc0838549f560f4d8ca206b8&state=dingtalk

xgqfrms commented 6 years ago

ES6 template string codes folded wanted!

https://github.com/Microsoft/vscode/issues/57124

xgqfrms commented 6 years ago


const es6TemplateString = `
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <meta name="author" content="xgqfrms">
        <meta name="generator" content="VS code">
        <title>Index</title>
    </head>
`;

/* 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="xgqfrms">
    <meta name="generator" content="VS code">
    <title>Index</title>
</head>
*/

vscode-bug

xgqfrms commented 6 years ago

webpack 3.x

https://github.com/webpack/webpack/issues?utf8=%E2%9C%93&q=xgqfrms

https://gist.github.com/superandrew/9222e7cb3fc7abe15c5935cad29f8a74

https://gist.github.com/superandrew/5f65ab0d1a5b4c406d8fb1f3a7accbd0

https://github.com/webpack/webpack/issues/2785#issuecomment-344880193

https://github.com/webpack/webpack/issues/4475#issuecomment-286083871

multiple-pages

webpack 4.x

https://survivejs.com/webpack/output/multiple-pages/

xgqfrms commented 6 years ago

React & SSR & webpack

https://survivejs.com/webpack/output/server-side-rendering/

xgqfrms commented 6 years ago

https://code.visualstudio.com/updates/v1_26#_user-setup-for-windows https://code.visualstudio.com/docs/?dv=win64user

xgqfrms commented 6 years ago

webpack 4.x bug

xgqfrms commented 6 years ago


"use strict";

/**
 * @license MIT
 * @copyright xgqfrms
 * @description  URL configs & getURl & search params
 * @example
 *
 */

window.ORIGIN_IP = window.ORIGIN_IP || window.parent.location.origin;

const FetchIP = window.ORIGIN_IP.includes("http://localhost") || window.ORIGIN_IP.includes("file://") || window.ORIGIN_IP.includes("3000") || window.ORIGIN_IP.includes("3001") || window.ORIGIN_IP.includes("3002")
    ? "http://10.1.5.202"
    : `${window.ORIGIN_IP}`;

const getUrls = () => {
    let URL = window.IP || window.parent.location.href,
        PROTOCOL = window.PROTOCOL || window.parent.location.protocol,
        HOST = window.HOST || window.parent.location.host,
        PORT = window.PORT || window.parent.location.port,
        SEARCH = window.SEARCH || window.parent.location.search,
        HASH = window.HASH || window.parent.location.hash,
        ORIGIN = window.ORIGIN || window.parent.location.origin;
    // query object
    SEARCH = JSON.parse(decodeURI(SEARCH).substr(1));
    return {
        // IP,
        URL,
        PROTOCOL,
        HOST,
        PORT,
        SEARCH,
        HASH,
        ORIGIN
    };
};

const SearchParams = (search = ``, debug = false) => {
    let params = "";
    if (search) {
        params = new URLSearchParams(search);
    } else {
        // default search
        search = decodeURIComponent(window.location.search);
        params = new URLSearchParams(search);
    }
    let result = {};
    for (let param of params) {
        let key = ``,
            value = ``;
        key = param[0];
        value = param[1];
        result[key] = value;
    }
    return result;
};

export default FetchIP;

export {
    FetchIP,
    getUrls,
    SearchParams
};

xgqfrms commented 6 years ago

ES6 Modules

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

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export

https://www.sitepoint.com/understanding-es6-modules/

xgqfrms commented 6 years ago

export & Module Redirects

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export#Module_Redirects

// module "redirect-module.js"

export {default} from './other-module';
export * from './other-module';

xgqfrms commented 6 years ago

Import an entire module's contents

import * & namespace

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Import_an_entire_module's_contents


import * as myModule from '/modules/my-module.js';

myModule.doAllTheAmazingThings();

xgqfrms commented 6 years ago

https://www.sitepoint.com/understanding-es6-modules/

xgqfrms commented 6 years ago

how to import sortable.js in ES6 module?

which one is the right import way?

import "sortable.js";
// import { Sortable } from "sortable.js";
// import * as Sortable from "sortable.js";

https://github.com/RubaXa/Sortable/issues/1362

https://github.com/RubaXa/Sortable/blob/master/Sortable.js

local modules

https://raw.githubusercontent.com/RubaXa/Sortable/master/Sortable.js

xgqfrms commented 6 years ago

bug

import order bug / import module bug ???


import "../libs/sortable";
// import "../libs/sortable.js";

// import "sortable.js";
// import { Sortable } from "sortable.js";
// import * as Sortable from "sortable.js";

// import "../css/h5-dnd.css";

console.log(`this is h5-dnd.js!`);

// const el = document.getElementById("items");
// let sortable = Sortable.create(el);

// export default Sortable;

// export {
//     Sortable,
// };


"use strict";

/**
 *
 * @author xgqfrms
 * @license MIT
 * @copyright xgqfrms
 *
 * @description plugins.js
 * @augments
 * @example
 *
 */

// import "../css/plugins.css";

import "./h5-dnd";
// import * as ST from "./h5-dnd";

// import { ST } from "./h5-dnd";

console.log(`this is plugins.js!`);

// export default ST;

// export {
//     ST,
// };


const Testing = (debug = false) => {
    if (debug) {
        console.log(`testing.js is running...`);
    }
    const el = document.getElementById("items");
    let sortable = Sortable.create(el);
};

export default Testing;

export {
    Testing,
};


import "../css/app.css";

import "./plugins/index.js";
// import { ST } from "./plugins/index.js";

import { Testing } from "./plugins/testing";

console.log(`this is app.js!`);

document.addEventListener(`DOMContentLoaded`, () => {
    console.log(`DOM is ready!`);
    Testing();
});

xgqfrms commented 6 years ago

global export

OK

"use strict";

/**
 *
 * @author xgqfrms
 * @license MIT
 * @copyright xgqfrms
 *
 * @description h5-dnd.js
 * @augments
 * @example
 *
 */

// import "../libs/sortable";
// import "../libs/sortable.js";
import * as Sortable from "../libs/sortable.js";

// import "sortable.js";
// import { Sortable } from "sortable.js";
// import * as Sortable from "sortable.js";

// import "../css/h5-dnd.css";

console.log(`this is h5-dnd.js!`);

// global export
window.Sortable = Sortable;

// export default Sortable;

// export {
//     Sortable,
// };

"use strict";

/**
 *
 * @author xgqfrms
 * @license MIT
 * @copyright xgqfrms
 *
 * @description plugins.js
 * @augments
 * @example
 *
 */

// import "../css/plugins.css";

import "./h5-dnd";
// import * as ST from "./h5-dnd";

// import { ST } from "./h5-dnd";

console.log(`this is plugins.js!`);

// export default ST;

// export {
//     ST,
// };


"use strict";

/**
 *
 * @author xgqfrms
 * @license MIT
 * @copyright xgqfrms
 *
 * @description testing.js
 * @augments
 * @example
 *
 */

const Testing = (debug = false) => {
    if (debug) {
        console.log(`testing.js is running...`);
    }
    const el = document.getElementById("items");
    let sortable = Sortable.create(el);
};

export default Testing;

export {
    Testing,
};

"use strict";

/**
 *
 * @author xgqfrms
 * @license MIT
 * @copyright xgqfrms
 *
 * @description app.js
 * @augments
 * @example
 *
 */

import "../css/app.css";

import "./plugins/index.js";
// import { ST } from "./plugins/index.js";

import { Testing } from "./plugins/testing";

console.log(`this is app.js!`);

document.addEventListener(`DOMContentLoaded`, () => {
    console.log(`DOM is ready!`);
    Testing();
});

xgqfrms commented 6 years ago

Module Redirects & 模块重定向

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/export#%E6%A8%A1%E5%9D%97%E9%87%8D%E5%AE%9A%E5%90%91

xgqfrms commented 6 years ago

SVG

https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Tools_for_SVG

xgqfrms commented 6 years ago

OK

npm package name bug


"use strict";

/**
 *
 * @author xgqfrms
 * @license MIT
 * @copyright xgqfrms
 *
 * @description h5-dnd.js
 * @augments
 * @example
 *
 */

// import "../libs/sortable";
// import "../libs/sortable.js";
// import * as Sortable from "../libs/sortable.js";

// import "sortable";
// import { Sortable } from "sortable";// bug
// import { Sortable } from "sortablejs";
import * as Sortable from "sortablejs";

// import "../css/h5-dnd.css";

console.log(`this is h5-dnd.js!`);

// global export
window.Sortable = Sortable;

// export default Sortable;

// export {
//     Sortable,
// };

`sortablejs` !== `sortable.js`

{
    "dependencies": {
        "sortablejs": "^1.7.0"
    }
}

xgqfrms commented 6 years ago

name bug

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

xgqfrms commented 6 years ago

https://github.com/RubaXa/Sortable/issues/1362

xgqfrms commented 6 years ago

vue

https://sagalbot.github.io/vue-sortable/

https://github.com/sagalbot/vue-sortable

xgqfrms commented 6 years ago

`Async functions` & `import()`

http://2ality.com/2017/01/import-operator.html#async-functions-and-import

xgqfrms commented 6 years ago

CSS3 & auto skin

http://10.1.5.202/xxx/skin/pages/index.html

css3-var-auto-skin

xgqfrms commented 6 years ago

import "../css/main.css";

console.log(`this is main.js!`);

const autoChangeSkin = () => {
    let head = document.querySelector(`head`);
    let link = `
        <link href="../css/app.min.css" rel="stylesheet">
    `;
    head.insertAdjacentHTML(`beforeend`, link);
};

document.addEventListener(`DOMContentLoaded`, () => {
    alert(`3s 后, 通过 CSS3 变量自动换肤!`);
    setTimeout(() => {
        autoChangeSkin();
    }, 3000);
});

@charset "UTf-8";

/* main.css */

:root {
    --cololr: #000;
    --background: #fff;
    --font-size: 12px;
}

body {
    color: var(--cololr);
    background: var(--background);
    font-size: var(--font-size);
}

@charset "UTf-8";

/* black.css */

:root {
    --cololr: #0f0;
    --background: #000;
    --font-size: 23px;
}

/* body {
    color: var(--cololr);
    background: var(--background);
    font-size: var(--font-size);
} */

xgqfrms commented 6 years ago

Mark Man

UI 标色，测量

PS
png

MarkMan & UI

设计稿标注、测量

http://www.getmarkman.com/

xgqfrms commented 6 years ago

NoMark & http://effectiveall.com/

PxCook & http://www.fancynode.com.cn/pxcook

Sketch & https://www.sketchapp.com/

https://sketch.io/sketchpad/

xgqfrms commented 4 years ago

URLSearchParams

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


var paramsString = "q=URLUtils.searchParams&topic=api";
var searchParams = new URLSearchParams(paramsString);

//Iterate the search parameters.
for (let p of searchParams) {
  console.log(p);
}

searchParams.has("topic") === true; // true
searchParams.get("topic") === "api"; // true
searchParams.getAll("topic"); // ["api"]
searchParams.get("foo") === null; // true
searchParams.append("topic", "webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=api&topic=webdev"
searchParams.set("topic", "More webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=More+webdev"
searchParams.delete("topic");
searchParams.toString(); // "q=URLUtils.searchParams"

Web Workers

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

xgqfrms commented 4 years ago

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

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

xgqfrms / FEIQA

websocket & shit jquery #26

websocket

shit jquery

border-image

border first & border-image second

border-image & demo

Win10怎么查看无线网络密码

html5 & link & imports & templates

import once

test

E应用图表开发及官方DEMO讲解

ES6 template string codes folded wanted!

webpack 3.x

multiple-pages

React & SSR & webpack

webpack 4.x bug

ES6 Modules

export & Module Redirects

Import an entire module's contents

how to import sortable.js in ES6 module?

bug

global export

Module Redirects & 模块重定向

SVG

OK

`sortablejs` !== `sortable.js`

name bug

vue

`Async functions` & `import()`

CSS3 & auto skin

Mark Man

MarkMan & UI

URLSearchParams

xgqfrms / FEIQA

websocket & shit jquery #26

websocket

shit jquery

border-image

border first & border-image second

border-image & demo

Win10怎么查看无线网络密码

html5 & link & imports & templates

import once

test

E应用图表开发及官方DEMO讲解

ES6 template string codes folded wanted!

webpack 3.x

multiple-pages

React & SSR & webpack

webpack 4.x bug

ES6 Modules

export & Module Redirects

Import an entire module's contents

how to import sortable.js in ES6 module?

bug

global export

Module Redirects & 模块重定向

SVG

OK

sortablejs !== sortable.js

name bug

vue

Async functions & import()

CSS3 & auto skin

Mark Man

MarkMan & UI

URLSearchParams

`sortablejs` !== `sortable.js`

`Async functions` & `import()`