Ran – Ran

List all variables inside a Laravel blade

Posted on 2020-09-21 | by Ran | Leave a Comment

{{ dd(get_defined_vars()['__data']) }}

How to Get the Size of a Table in MySQL

Posted on 2020-08-24 | by Ran | Leave a Comment

SELECT
    TABLE_NAME AS `Table`,
    ROUND((DATA_LENGTH + INDEX_LENGTH) / 1024 / 1024, 2) AS `Size (MB)`
FROM
    information_schema.TABLES
WHERE
    TABLE_SCHEMA = 'DatabaseName'
ORDER BY
    (DATA_LENGTH + INDEX_LENGTH)
DESC;

資料來源：https://chartio.com/resources/tutorials/how-to-get-the-size-of-a-table-in-mysql/

Docker connect from a container to a service on the host

Posted on 2020-08-05 | by Ran | Leave a Comment

如何從 Docker 容器連到本機的 host port

情境

SSH Tunnel 連至遠端伺服器 (localhost:8888 -> remote:3306)

想透過 docker 啟動的 web service (LNMP) 操作 adminer/phpmyadmin 連至遠端的資料庫。

原本想更改 docker network mode 為 host ，讓容器直接使用同一張網卡，但 windows 和 Mac 環境不支援 (只支援 Linux)，查了好久終於找到解法。

https://docs.docker.com/docker-for-windows/networking/#use-cases-and-workarounds

The host has a changing IP address (or none if you have no network access). From 18.03 onwards our recommendation is to connect to the special DNS name host.docker.internal, which resolves to the internal IP address used by the host. This is for development purpose and will not work in a production environment outside of Docker Desktop for Windows.
The gateway is also reachable as gateway.docker.internal.

解法

使用 host.docker.internal:8888

How to Deep Clone an Array in JavaScript

Posted on 2020-06-10 | by Ran | Leave a Comment

let array_A = [
    {'id': 1, 'type': true},
    {'id': 2, 'type': false},
    {'id': 3, 'type': true},
    {'id': 4, 'type': false},
    {'id': 5, 'type': true},
];

// Deep clone

    // 方法一： jQuery (若有使用 jQuery 可考慮)
        // let array_B = $.extend(true, {}, array_A);

        // Convert object to array
        // array_B = Object.values(array_B);

    // 方法二： JSON.parse(JSON.stringify())
    //         (純資料，可行；若遇 Function、Set、Map..等型態，失效)
        // let array_B = JSON.parse(JSON.stringify(array_A));

    // 方法三： 使用 lodash (library)
        // let array_B = _.cloneDeep(array_A);

    // 方法四： 國外網友提供的遞迴方法，感覺很不錯
        const clone = (items) => items.map(item => Array.isArray(item) ? clone(item) : {...item});
        let array_B = clone(array_A);

// Select type is true
array_B = array_B.filter( number => number.type );

// Set type to false
array_B.map( number => number.type = false );

console.log(array_A);
console.log(array_B);

https://dev.to/samanthaming/how-to-deep-clone-an-array-in-javascript-3cig

https://kanboo.github.io/2018/01/27/JS-ShallowCopy-DeepCopy/

AMP (Accelerated Mobile Pages)

Posted on 2020-05-05 | by Ran | Leave a Comment

<!doctype html>
<html amp lang="en">
<head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Hello, AMPs</title>
    <link rel="canonical" href="https://amp.dev/documentation/guides-and-tutorials/start/create/basic_markup/">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
        { "@context": "http://schema.org", "@type": "NewsArticle", "headline": "Open-source framework for publishing content", "datePublished": "2015-10-07T12:02:41Z", "image": [ "logo.jpg" ] }
    </script>
    <style amp-boilerplate>
        body {
            -webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
            -moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
            -ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
            animation: -amp-start 8s steps(1, end) 0s 1 normal both
        }

        @-webkit-keyframes -amp-start {
            from {
                visibility: hidden
            }
            to {
                visibility: visible
            }
        }

        @-moz-keyframes -amp-start {
            from {
                visibility: hidden
            }
            to {
                visibility: visible
            }
        }

        @-ms-keyframes -amp-start {
            from {
                visibility: hidden
            }
            to {
                visibility: visible
            }
        }

        @-o-keyframes -amp-start {
            from {
                visibility: hidden
            }
            to {
                visibility: visible
            }
        }

        @keyframes -amp-start {
            from {
                visibility: hidden
            }
            to {
                visibility: visible
            }
        }
    </style>
    <noscript>
        <style amp-boilerplate>
            body {
                -webkit-animation: none;
                -moz-animation: none;
                -ms-animation: none;
                animation: none
            }
        </style>
    </noscript>
</head>
<body>
    <h1>Welcome to the mobile web</h1>
    <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
    <amp-analytics type="googleanalytics" id="analytics">
        <script type="application/json">
        {
            "vars": {
                "account": "UA-XXXXXXXX-Y"
            },
            "triggers": {
                "trackPageviewWithAmpdocUrl": {
                    "on": "visible",
                    "request": "pageview",
                    "vars": {
                        "title": "TITLE",
                        "ampdocUrl": "CANONICAL_URL"
                    }
                }
            }
        }
        </script>
    </amp-analytics>
</body>
</html>

https://amp.dev/documentation/guides-and-tutorials/start/create/basic_markup/

https://github.com/ampproject/amphtml/blob/master/spec/amp-var-substitutions.md