add favorite & 收藏夹 & html-imports & dynamic-imports

[xgqfrms]

add favorite & 收藏夹

// 收藏夹

function favorite (){
    var ctrl = (navigator.userAgent.toLowerCase()).indexOf("mac") !== -1 ? "Command/Cmd" : "Ctrl";
    if (document.all){
        window.external.addFavorite("https://www.xgqfrms.xyz", "");
    } else if (window.sidebar){
        window.sidebar.addPanel("官网", "https://www.xgqfrms.xyz", "");
    } else {
        alert("您可以通过快捷键" + ctrl + " + D 加入到收藏夹");
    }
}

[xgqfrms]

shit IE

table border bug

> `border-collapse: collapse;`

table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 13px;
    font-weight: normal;
    overflow: hidden;
    margin-bottom: 15px;
    color: #727272;
}

IE table border border-collapse bug?

https://stackoverflow.com/questions/16682591/border-collapse-not-working-in-ie10

table{
    border-collapse: collapse;
}
table td{
    border: 1px solid black;
}

solution

table{
    border-spacing: 0px;
    border-top: 1px solid black;
    border-right: 1px solid black;
}
table td{
    border-left: 1px solid black;
    border-bottom: 1px solid black;
}

https://stackoverflow.com/questions/15747859/border-not-appearing-in-ie9-ie10

table{
    border-top:1px solid #000;
}

tr{
    border-left:1px solid #000;
    border-bottom:1px solid #000;
}

td{
    border-right:1px solid #000;
}

https://stackoverflow.com/questions/19706555/ie-table-cell-border-bug-with-colspan-set

[xgqfrms]

https://caniuse.com/#search=border-collapse

[xgqfrms]

https://caniuse.com/#search=nth-last-of-type

[xgqfrms]

https://www.quirksmode.org/css/

[xgqfrms]

IE border-collapse bug

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

[xgqfrms]

solution

/* IE & shit table &  border-collapse: collapse; */

table>tr>td:nth-of-type(n) {
    border-left: 0;
    border-bottom: 0;
}

table {
    border-spacing: 0px;
    border-top: 1px solid #f0f0f0;
    border-right: 0;
}

table td {
    border-left: 1px solid #f0f0f0;
    border-bottom: 0;
    border-right: 0;
}

tbody>tr>td:nth-last-of-type(1) {
    border-right: 1px solid #f0f0f0;
}

tbody>tr:nth-last-of-type(1)>td {
    border-bottom: 1px solid #f0f0f0;
}

[xgqfrms]

https://caniuse.com/#search=nth-last-of-type

[xgqfrms]

https://stackoverflow.com/questions/16682591/border-collapse-not-working-in-ie10

https://stackoverflow.com/questions/9240772/border-collapse-issue-in-ie-8-compatibility-mode

https://stackoverflow.com/questions/19706555/ie-table-cell-border-bug-with-colspan-set

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

http://csarven.ca/tr-border-trick-for-ie http://forums.mozillazine.org/viewtopic.php?t=157897 https://bugs.chromium.org/p/chromium/issues/detail?id=356132

https://robert.accettura.com/blog/2007/04/04/ie-table-border-bug/

[xgqfrms]

shit IE

no table border-collapse: collapse;

/* IE & shit table &  border-collapse: collapse; */

table {
    border-spacing: 0px;
    border-top: 1px solid #f0f0f0;
    border-right: 0;
}

table td {
    border-left: 1px solid #f0f0f0;
    border-bottom: 0;
    border-right: 0;
}

tbody>tr>td:nth-last-of-type(1) {
    border-right: 1px solid #f0f0f0;
}

tbody>tr:nth-last-of-type(1)>td {
    border-bottom: 1px solid #f0f0f0;
}

tbody>tr:nth-of-type(2n) {
    background: #f5f5f5;
}

tbody>tr:nth-of-type(2n + 1) {
    background: #fff;
}

tbody[id="tbody2"]>tr:nth-of-type(n) {
    background: #fff;
}

[xgqfrms]

HTML Imports & polyfill

https://cdn.xgqfrms.xyz/html-imports/index.html https://cdn.xgqfrms.xyz/html-imports/polyfill.html

https://cdn.xgqfrms.xyz/HTML5/html-imports/index.html https://cdn.xgqfrms.xyz/HTML5/html-imports/polyfill.html

[xgqfrms]

https://caniuse.com/#search=html%20imports https://github.com/webcomponents/webcomponentsjs/tree/v1#how-to-use

[xgqfrms]

https://github.com/webcomponents/webcomponentsjs/blob/v1/package.json

这个可以自己按需构建，你如果使用 npm 的引用方式，需要导入对应的模块才行。

https://github.com/webcomponents/webcomponentsjs/blob/v1/gulpfile.js

[xgqfrms]

https://github.com/webcomponents/webcomponentsjs/tree/v1#webcomponentsready

[xgqfrms]

"use strict";

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

// no need jQuery
let $$ = {
    qs: function qs(uid) {
        return document.querySelector(uid);
    },
    qsa: function qsa(uid) {
        return document.querySelectorAll(uid);
    },
};

window.$ = $$;

// if (window.$) {
//     window.$ = Object.assign($, $$);
// } else {
//     window.$ = Object.assign({}, $$);
// }

function loadTemplate ()  {
    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-containers"]') : null;
    if (div) {
        // read template once
        templatesBox.appendChild(div);
    } else {
        // exsit template
    }
};

function showDOM () {
    let container = $.qs('[data-test="html-template"]'),
        temp = $.qs('[data-template="template-containers-full-width"]'),
        clone = temp ? temp.content.cloneNode(true) : null;
    if (clone) {
        container.appendChild(clone);
    }
};

let uid = document.querySelector('[data-uid="result"]');

if (Modernizr.htmlimports) {
    // supported
    uid.innerHTML = '<span class="htmlimports">supported<span>';
} else {
    // not-supported
    uid.innerHTML = '<span class="no-htmlimports">not-supported<span>';
}

// DOM fully loaded and parsed!
document.addEventListener("DOMContentLoaded", function () {
    setTimeout(function () {
        if (Modernizr.htmlimports) {
            // preload && delay
            loadTemplate();
            // init
            showDOM();
        } else {
            // not-supported
           alert("template is not supported!");
        }
    }, 100);
});

[xgqfrms]

polyfills

https://www.polymer-project.org/

https://www.polymer-project.org/3.0/start/

https://www.polymer-project.org/2.0/start

https://stackblitz.com/

---

https://github.com/webcomponents/webcomponentsjs https://github.com/webcomponents/webcomponentsjs/tree/v1#webcomponentsready

https://www.webcomponents.org/polyfills/#wrap-and-unwrap https://www.webcomponents.org/introduction#html-template

https://html.spec.whatwg.org/multipage/scripting.html#the-template-element/

https://www.webcomponents.org/publish

dynamic-imports

https://github.com/webcomponents/html-imports#dynamic-imports

[xgqfrms]

table width bug

auto width ???

https://www.layui.com/demo/table/auto.html

[xgqfrms]

Online IDE powered by Visual Studio Code

https://stackblitz.com/ https://www.polymer-project.org/3.0/start/

https://github.com/stackblitz/core

Public URLs for exposing your local web server.

https://ngrok.com/ https://developer.github.com/webhooks/configuring/

[xgqfrms]

https://ngrok.com/docs

https://dashboard.ngrok.com/get-started

[xgqfrms]

https://stackblitz.com/edit/react-auth0-9kgrvh

[xgqfrms]

turbo

涡轮 增压

https://turbo.net/

https://turbo.net/docs/getting-started

[xgqfrms]

https://github.com/webcomponents/html-imports/issues/86

[xgqfrms]

html-imports & dynamic-imports

https://github.com/webcomponents/html-imports/issues/86

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

[xgqfrms]

Video Downloader Plus

https://chrome.google.com/webstore/detail/video-downloader-plus/baejfnndpekpkaaancgpakjaengfpopk

The Flash Video Downloader

https://chrome.google.com/webstore/detail/the-flash-video-downloade/amjcoehkcacocffpmhnefgoeanepjfkf

[xgqfrms]

Game Bar & YouTube video records

Windows 10

C:\Users\xgqfrms\Videos\Captures

Win + G Win + Alt + G Win + Alt + R

Win + Alt + M Win + Alt + B Win + Alt + W

Win + Alt + PrtSrc

[xgqfrms]

https://marked.js.org/#/README.md#README.md https://github.com/markedjs/marked

[xgqfrms]

html-imports & dynamic-imports

https://github.com/webcomponents/html-imports#dynamic-imports

[xgqfrms]

CMD & current folder path

how to get the current folder path

https://stackoverflow.com/questions/25438172/find-path-of-current-folder-cmd

Bash

current directory

https://stackoverflow.com/questions/4419868/what-is-the-current-directory-in-a-batch-file

[xgqfrms]

Web Component & HTML imports

https://cdn.xgqfrms.xyz/HTML-imports/templates/index.html

https://github.com/webcomponents/html-imports/issue

[xgqfrms]

Chrome shortcuts

加入收藏夹

https://developers.google.com/web/tools/chrome-devtools/iterate/inspect-styles/shortcuts?utm_source=devtools

[xgqfrms]

ESM & import() & dynamic import All In One

作者：xgqfrms 链接：https://www.cnblogs.com/xgqfrms/p/16965768.html 来源：https://www.cnblogs.com 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 ©xgqfrms 2012-2023 www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！ 原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！