Vue.js學習帳 - 1. 介紹


之前應承過自己要試下整Vue嘅教學,咁就由簡介吓佢開始啦,順便鞏固我對呢款JS framework嘅認知

如果仲有後續教學嘅話請注意呢一系列嘅教學並唔包括vue-router。

Vue係由Google嘅前員工尤雨溪開發。當時佢嘅諗法係覺得Angular太過龐大而且太過缺乏編程嘅彈性,於是佢就將Angular裡面覺得實用性高嘅部份抽出黎重寫並放上Github,呢個就係Vue嘅雛型。時至今日,Vue已經去到2.x版本,喺Github嘅星數已經可以同React爭一日之長短。

對我黎講,Vue點解會咁特別嘅原因有以下幾點:
1. Data-driven。其實而家普遍嘅JS framework都係以資料作主導,而唔再好似係以前jQuery之類嘅framework咁以操作DOM黎達成目的。由於我本身都係由jQuery開始學起,所以一開始上手其實唔係咁容易轉到諗法...不過上咗手之後就發現真心好好多。
2. 輕量化。同Angular嗰種以嘗試用一個framework解決絕大部份問題唔同,Vue本身剩係保持core code以及做data-binding嘅工作,其他嘢就一律以module嘅形式去整,用嘅時候先加載。如果問我嘅話,我會覺得Vue其實同React相似。

其實我會接觸Vue主要係因為Laravel...係,又係關佢事。Laravel 5.3嘅時候(亦即係我啱啱開始學Laravel嗰陣),Laravel嘅default JS framework就係用咗Vue。本住Vue喺當時已經係如日中天(?)JS framework,我就開始學習點樣去寫......而家CMS入面有一部份都已經由jQuery轉成用Vue,仲好方便添。

如果仲有下次的話(?)我就開始寫下基本嘅coding吧?

Laravel中如何解除Auto-incremented Integer Primary Key?


本來應該係過幾日先寫,但係更新緊個table發現咗呢個問題,立即過黎寫低先...

喺Laravel裡面,migrations係用黎做類似database版嘅version control,你可以用諸如php artisan migrate或者php artisan migrate:rollback去更新或者還原database入面嘅table structure。由於呢幾日喺度搞緊User Management嗰邊嘅table,所以就喺rollback嗰陣遇上咗問題。

問題code:
/**
 * Run the migrations.
 *
 * @return void
 */

public function up()
{
    Schema::table('dummy' function(Blueprint $table) {
        $table->increments('id')->first();
    });
}

/**
 * Reverse the migrations.
 * 
 * @return void
 */

public function down()
{
    Schema::table('dummy', function(Blueprint $table) {
        $table->dropPrimary(['id']);
        $table->dropColumn('id');
    });
}

喺更新嘅位我加咗一個會Auto-increment嘅id欄位並作為primary key存在,而當我要還原嘅時候應該係要首先將id嘅primary key屬性移除先再去將成個欄位刪走。不過好不幸地,當我rollback嗰陣出現咗以下嘅錯誤:

SQLSTATE[42000]: Syntax error or access violation: 1075 Incorrect table definition; there can be only one auto column and it must be defined as a key

於是就諗起我要首先將個auto-increment特性移除咗先,但係Laravel嘅說明文檔無一個modifier係有呢個功能。結果喺上網搵完resource後發現原來我可以咁樣...

public function down()
{
    Schema::table('dummy', function(Blueprint $table) {
        $table->integer('id')->unsigned()->change();
        $table->dropPrimary(['id']);
        $table->dropColumn('id');
    });
}

利用change()嘅method將id欄位嘅unsign特性移走,咁就會順手無咗auto-increment嘅效果。之後就可以成功rollback啦。

CSS嘅特色導致問題?


今日係公司最後一日,前後一個月嘅不被信任生涯(?)終於完結。

進入話題先。今日最後幫公司更新咗首頁,發現CSS有一個位係無辦法達成...

HTML:
<div class="col-4 portal-box p-0">
    <a href="{{ route('website.school.index') }}">
        <img src="{{ asset('images/portal-school-image.jpg') }}" class="d-block mx-auto portal-image" />
        <h1 class="position-absolute portal-image-name text-center">學校管理</h1>
    </a>
</div>

SASS:
.portal-box {
    .portal-image {
        width: 100%;

        &:hover {
            opacity: 0.2;

            +.portal-image-name {
                z-index: 2;
            }
        }
    }

    .portal-image-name {
        width: 100%;

        bottom: 0;

        color: #000000;

        z-index: -1;

        &:hover {
            +.portal-image {
                opacity: 0.2;
            }
        }
    }
}

呢個位係當mouse移入張圖嗰陣就會淡化張圖並且會令遮住咗嘅字浮現出黎。問題係當滑鼠指向啲字嘅時候,張圖唔識得淡化......無理由架,明明我已經整咗會淡出架喎?

Compiled CSS:
.portal-box .portal-image-name:hover + .portal-image {
    opacity: 0.2;
}

然後我就去搵關於CSS Adjacent Siblings Selectors嘅嘢,發現我一直誤解佢同CSS General Siblings Selectors嘅用法...
https://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-css-selector

最後唯有用jQuery達到效果...

Javascript:
$(document).ready(() => {
    $('.portal-image').on('mouseenter', function() {
        $(this).css('opacity', '0.2');
        $(this).siblings('.portal-image-name').css('z-index', '2');
    });
    $('.portal-image').on('mouseleave', function() {
        $(this).css('opacity', '1.0');
        $(this).siblings('.portal-image-name').css('z-index', '-1');
    });
    $('.portal-image-name').on('mouseenter', function() {
        $(this).siblings('.portal-image').css('opacity', '0.2');
        $(this).css('z-index', '2');
    });
    $('.portal-image-name').on('mouseleave', function() {
        $(this).siblings('.portal-image').css('opacity', '1.0');
        $(this).css('z-index', '-1');
    });
});

南無。

圖片無法被Laravel Mix進行編彙?


話說近日我就喺度整緊後台既新介面,將個人資料更新個位寫好之後就擺咗上黎先。又更新Laravel 5.6,又轉Bootstrap 4,SweetAlert2又上左7,然後database有啲欄位又更新咗。喺開發嗰陣搞完一大輪再試無問題,就諗住擺上黎production應該就無問題啦,點知就出咗事......

事緣係因為更新咗堆SASS檔既關係,我就要行Laravel Mix黎compile做CSS啦,點知喺local同dev行咗幾次都無問題,上到production居然炒咗,所以尋日就應該會見到成個版面亂晒,又或者無咗背景張雲圖(手機版睇唔到好正常)。

咁到底衰咗啲乜?我試過鏟晒node_modules成個folder再行npm install,發現mozjpeg呢個package無辦法安裝,但我喺Windows又裝到喎。原來係因為Ubuntu個server無裝到一堆package......


如是者,裝返相關既嘢之後又用得返啦。明明之前都好地地無問題......

總而言之今次係想話俾大家聽終於都更新咗啦,應該會喺黎緊慢慢再加返啲唔同既功能落去啦。

Ubuntu Desktop設定: Wireless Adapter


圖片取自TP-Link官網。

唔少人都試過喺Windows上運行上網手指以使用Wi-Fi,但因為Windows既用家比較多,所以廠商基本上都會包埋一隻光碟,內含手指喺Windows使用既驅動程式。不過如果你想喺Linux度行Wireless Adapter既話,恐怕就無咁簡單。

Powered by Half-moon Production.

Copyright © 2011-2020 by 泣雨家的雜物房. Version 1.5.2.

Vue.js學習帳 - 1. 介紹


之前應承過自己要試下整Vue嘅教學,咁就由簡介吓佢開始啦,順便鞏固我對呢款JS framework嘅認知

如果仲有後續教學嘅話請注意呢一系列嘅教學並唔包括vue-router。

Vue係由Google嘅前員工尤雨溪開發。當時佢嘅諗法係覺得Angular太過龐大而且太過缺乏編程嘅彈性,於是佢就將Angular裡面覺得實用性高嘅部份抽出黎重寫並放上Github,呢個就係Vue嘅雛型。時至今日,Vue已經去到2.x版本,喺Github嘅星數已經可以同React爭一日之長短。

對我黎講,Vue點解會咁特別嘅原因有以下幾點:
1. Data-driven。其實而家普遍嘅JS framework都係以資料作主導,而唔再好似係以前jQuery之類嘅framework咁以操作DOM黎達成目的。由於我本身都係由jQuery開始學起,所以一開始上手其實唔係咁容易轉到諗法...不過上咗手之後就發現真心好好多。
2. 輕量化。同Angular嗰種以嘗試用一個framework解決絕大部份問題唔同,Vue本身剩係保持core code以及做data-binding嘅工作,其他嘢就一律以module嘅形式去整,用嘅時候先加載。如果問我嘅話,我會覺得Vue其實同React相似。

其實我會接觸Vue主要係因為Laravel...係,又係關佢事。Laravel 5.3嘅時候(亦即係我啱啱開始學Laravel嗰陣),Laravel嘅default JS framework就係用咗Vue。本住Vue喺當時已經係如日中天(?)JS framework,我就開始學習點樣去寫......而家CMS入面有一部份都已經由jQuery轉成用Vue,仲好方便添。

如果仲有下次的話(?)我就開始寫下基本嘅coding吧?

Laravel中如何解除Auto-incremented Integer Primary Key?


本來應該係過幾日先寫,但係更新緊個table發現咗呢個問題,立即過黎寫低先...

喺Laravel裡面,migrations係用黎做類似database版嘅version control,你可以用諸如php artisan migrate或者php artisan migrate:rollback去更新或者還原database入面嘅table structure。由於呢幾日喺度搞緊User Management嗰邊嘅table,所以就喺rollback嗰陣遇上咗問題。

問題code:
/**
 * Run the migrations.
 *
 * @return void
 */

public function up()
{
    Schema::table('dummy' function(Blueprint $table) {
        $table->increments('id')->first();
    });
}

/**
 * Reverse the migrations.
 * 
 * @return void
 */

public function down()
{
    Schema::table('dummy', function(Blueprint $table) {
        $table->dropPrimary(['id']);
        $table->dropColumn('id');
    });
}

喺更新嘅位我加咗一個會Auto-increment嘅id欄位並作為primary key存在,而當我要還原嘅時候應該係要首先將id嘅primary key屬性移除先再去將成個欄位刪走。不過好不幸地,當我rollback嗰陣出現咗以下嘅錯誤:

SQLSTATE[42000]: Syntax error or access violation: 1075 Incorrect table definition; there can be only one auto column and it must be defined as a key

於是就諗起我要首先將個auto-increment特性移除咗先,但係Laravel嘅說明文檔無一個modifier係有呢個功能。結果喺上網搵完resource後發現原來我可以咁樣...

public function down()
{
    Schema::table('dummy', function(Blueprint $table) {
        $table->integer('id')->unsigned()->change();
        $table->dropPrimary(['id']);
        $table->dropColumn('id');
    });
}

利用change()嘅method將id欄位嘅unsign特性移走,咁就會順手無咗auto-increment嘅效果。之後就可以成功rollback啦。

CSS嘅特色導致問題?


今日係公司最後一日,前後一個月嘅不被信任生涯(?)終於完結。

進入話題先。今日最後幫公司更新咗首頁,發現CSS有一個位係無辦法達成...

HTML:
<div class="col-4 portal-box p-0">
    <a href="{{ route('website.school.index') }}">
        <img src="{{ asset('images/portal-school-image.jpg') }}" class="d-block mx-auto portal-image" />
        <h1 class="position-absolute portal-image-name text-center">學校管理</h1>
    </a>
</div>

SASS:
.portal-box {
    .portal-image {
        width: 100%;

        &:hover {
            opacity: 0.2;

            +.portal-image-name {
                z-index: 2;
            }
        }
    }

    .portal-image-name {
        width: 100%;

        bottom: 0;

        color: #000000;

        z-index: -1;

        &:hover {
            +.portal-image {
                opacity: 0.2;
            }
        }
    }
}

呢個位係當mouse移入張圖嗰陣就會淡化張圖並且會令遮住咗嘅字浮現出黎。問題係當滑鼠指向啲字嘅時候,張圖唔識得淡化......無理由架,明明我已經整咗會淡出架喎?

Compiled CSS:
.portal-box .portal-image-name:hover + .portal-image {
    opacity: 0.2;
}

然後我就去搵關於CSS Adjacent Siblings Selectors嘅嘢,發現我一直誤解佢同CSS General Siblings Selectors嘅用法...
https://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-css-selector

最後唯有用jQuery達到效果...

Javascript:
$(document).ready(() => {
    $('.portal-image').on('mouseenter', function() {
        $(this).css('opacity', '0.2');
        $(this).siblings('.portal-image-name').css('z-index', '2');
    });
    $('.portal-image').on('mouseleave', function() {
        $(this).css('opacity', '1.0');
        $(this).siblings('.portal-image-name').css('z-index', '-1');
    });
    $('.portal-image-name').on('mouseenter', function() {
        $(this).siblings('.portal-image').css('opacity', '0.2');
        $(this).css('z-index', '2');
    });
    $('.portal-image-name').on('mouseleave', function() {
        $(this).siblings('.portal-image').css('opacity', '1.0');
        $(this).css('z-index', '-1');
    });
});

南無。

圖片無法被Laravel Mix進行編彙?


話說近日我就喺度整緊後台既新介面,將個人資料更新個位寫好之後就擺咗上黎先。又更新Laravel 5.6,又轉Bootstrap 4,SweetAlert2又上左7,然後database有啲欄位又更新咗。喺開發嗰陣搞完一大輪再試無問題,就諗住擺上黎production應該就無問題啦,點知就出咗事......

事緣係因為更新咗堆SASS檔既關係,我就要行Laravel Mix黎compile做CSS啦,點知喺local同dev行咗幾次都無問題,上到production居然炒咗,所以尋日就應該會見到成個版面亂晒,又或者無咗背景張雲圖(手機版睇唔到好正常)。

咁到底衰咗啲乜?我試過鏟晒node_modules成個folder再行npm install,發現mozjpeg呢個package無辦法安裝,但我喺Windows又裝到喎。原來係因為Ubuntu個server無裝到一堆package......


如是者,裝返相關既嘢之後又用得返啦。明明之前都好地地無問題......

總而言之今次係想話俾大家聽終於都更新咗啦,應該會喺黎緊慢慢再加返啲唔同既功能落去啦。

Ubuntu Desktop設定: Wireless Adapter


圖片取自TP-Link官網。

唔少人都試過喺Windows上運行上網手指以使用Wi-Fi,但因為Windows既用家比較多,所以廠商基本上都會包埋一隻光碟,內含手指喺Windows使用既驅動程式。不過如果你想喺Linux度行Wireless Adapter既話,恐怕就無咁簡單。