Gutenberg

Ini adalah percubaan kepada Gutenberg. Satu editor yang masih dalam proses eksperimen di dalam WordPress. Ideanya adalah untuk memudahkan penghasilan entri yang lebih flexible mengikut keperluan tanpa memerlukan banyak kerja.

Kalau letak headsink di atas kubur, adakah yang di dalam kubur itu akan merasa lebih sejuk?

Memang menarik untuk menghasilkan content yang cepat dan cantik. Tapi kene buat banyak Javascript. Ideanya adalah letak sebagai component sebab WP dan jadi react based.

Masa diambil

512

saat

Cadangan Untuk Gobind

Aku tertarik dengan artikel yang mana Kementerian Komunikasi dan Multimedia bercadang untuk mengurangkan harga jalur lebar kepada separuh daripada harga sekarang. Aku biasa dengar janji-janji ini cuma berapa pantas dan berapa kerap dapat dibuat? Setakat ini aku nampak hanya pada janji sahaja. Pencapaiannya belum tentu.

Apa pun aku ingin mencadangkan beberapa perkara yang aku rasa boleh dicadangkan kepada Gobind;

  1. Untuk semua talian tetap di bawah TM, Streamyx dengan kelajuan 1mbps adalah termasuk di dalam pelan. Dengan maksud lain, Streamyx 1mbps adalah percuma. Mungkin dengan kuota atau tiada kuota. Ini dapat meningkatkan kadar penembusan internet di Malaysia terutamanya di kawasan-kawasan luar bandar yang mana penduduk masih bergantung kepada Streamyx yang prestasinya tidak sepadan dengan harganya. Dengan maksud lain, setiap rumah yang ada talian tetap TM, terus mempunyai internet percuma. Bayangkan peningkatan ketara kadar penembusan interent di Malaysia selepas perlaksanaan tersebut. Ini adalah matlamat pertama – meningkatkan penembusan internet di Malaysia.
  2. Memberikan pembekal servis yang lain untuk membentang backbone mereka ke seluruh Malaysia tanpa perlu bergantung kepada backbone TM sahaja. Ini sekaligus akan mengurangkan kuasa monopoli TM dan juga akan dapat merendahkan harga internet di Malaysia. Dan perlawanan di antara pembekal servis ini juga dilihat dapat mendekatkan jurang di antara kawasan luar bandar yang mempunyai purata kelajuan internet yang perlahan dan kawasan bandar yang mempunyai kelajuan mencapai 100 kali ganda daripada di luar bandar. Jika ini berjaya maka matlamat kedua dapat dicapai iaitu meningkatkan kelajuan purata internet di Malaysia.
  3. Meletakkan syarat kepada pembekal servis untuk membuat semakan semula harga langganan setiap 18-24 bulan. Ini akan memberikan kebaikkan kepada Malaysia dalam jangka masa yang sederhana yang mana peningkatan daripada sudut penembusan internet dan juga purata kelajuan internet negara akan bertambah dari tahun ke tahun. Seperti contoh kaedah yang digunakan oleh Unifi tempoh hari, pelanggan akan diberikan peningkatan kelajuan internet tetapi tidak menaikkan harga langganan.

Buat masa ini itu sahaja tiga perkara yang aku rasa sesuai untuk diketegahkan.

Git Permission Denied (Public Key)

Pagi tadi aku dapat satu kes yang perlukan bantuan. Kesnya adalah begini;

Apa bila developer membuat arahan git fetch akan keluar ralatpermission denied (public key). Maka dalam hal ini, berikut adalah step yang aku gunakan untuk cari masalah tersebut berpunca daripada mana.

  1. Pastikan ssh public key telah dijana oleh server. Kalau *nix based boleh lihat pada ~/.ssh/id_rsa.pub. Kalau tiada, sila jana dahulu.
  2. Pastikan ssh public key tersebut telah dimasukkan ke dalam git upstream server. Bermula daripada ssh-rsa, diikuti dengan signature yang unik dan berakhir dengan nama server. Jika salah, maka kene betulkan dahulu.
  3. Periksa bahawa server git upstream mengenal server kita. Kalau *nix based boleh cuba dengan arahan ssh -v git@<git upstream server domain> dan sepatutnya git server akan mengenal anda  dengan memberi jawapan seperti Welcome to GitLab, Syafiq Lomotech. Jika gagal sila periksa semula langkah 2. Jika masih berlaku cuba ke langkah 4.
  4. Periksa upstream url anda dengan melihat git config pada .git/config dan lihat pada bahagian url. Pastikan url tersebut sama dengan url yang dibekalkan daripada server git upstream. Dalam kes pagi tadi. Url ini tidak sama. Sepatutnya gitlab. Tetapi telah ditukarkan kepada github.

Jika masih tidak berjaya, aku tak de idea. Sebab tak sampai lagi tahap tu.

Tech: getElementById Hanya Akan Ambil Yang Pertama

Ada satu masalah petang semalam kepada seorang intern yang mana dia mahu membuat fungsi add to chart menggunakan javascript dan jquery kepada item yang diletakkan di dalam owl carousel tetapi yang peliknya daripada 20 item, hanya 10 item pertama sahaja yang boleh dimasukkan, selebihnya tidak dapat. dia memanggil satu function javascript apabila butang add to cart tersebut di tekan. Kita anggapkan sebagai addToChart(counter, item.id). Aku cuba untuk menjalankan secara manual dengan meletakkan kod tersebut di dalam snippet dan menjalankannya, function tersebut berjalan dengan jayanya. Maka kemungkinan function tersebut bermasalah boleh ditolak.

Aku cuba sekali lagi untuk menjalankan secara manual tetapi kali ini untuk mengubah textContent elemen tersebut dengan membuat $('#item-11').html('testing') dan fungsi tersebut juga tiada masalah. Cuma yang anehnya tiada sebarang perubahan yang terjadi kepada paparan. Tetapi jika di cari kembali di dalam element tab, perubahan tersebut berlaku. Cuma bukan pada tempatnya.

Setelah dicari lebih lanjut, aku perasan own carousel akan membuat clone separuh daripada senarai di atas senarai yang asal. Contohnya begini;

Senarai asal

  • item-1
  • item-2
  • item-3
  • item-4

Senarai tambahan

  • item-3 (clone)
  • item-4 (clone)
  • item-1
  • item-2
  • item-3
  • item-4
  • item-1 (clone)
  • item-2 (clone)

Aku nampak kerana mahu menjadikan slide tersebut tidak berpecah atau terpisah semasa mahu membuat pusingan. Dan disebabkan itu juga id yang mahu dibuat tidak dapat dimasukkan. Maka aku mencadangkan tukar kepada class dan masalah tersebut selesai.

Aku masih musykil kerana jika id tersebut diletakkan sebagai item-3 clone sepatutnya adalah unik berbanding item-3 sahaja. Dan aku telah cuba dengan membuat contoh mudah.

<div class="ul">
    <li id="basket-3">3 clone</li>
    <li id="basket-4">4 clone</li>
    <li id="basket-1">1</li>
    <li id="basket-2">2</li>
    <li id="basket-3">3</li>
    <li id="basket-4">4</li>
    <li id="basket-1">1 clone</li>
    <li id="basket-2">2 clone</li>
</div>

<script>
   $(function(){
        console.log($('#basket-3').text());
        console.log($('#basket-4').text());
        console.log($('#basket-3').attr('id', 'basket-3 clone'));
        console.log($('#basket-4').attr('id', 'basket-4 clone'));
        console.log($('#basket-3').text());
        console.log($('#basket-4').text());
   })
</script>

Dan daripada log, aku nampak sepert ini yang mana aku nampak mengikut konsep javascript yang biasa. Hari ini aku akan tengok balik apa masalah sebenarnya daripada own carousel tu.

javascript get element by id

Tech: Brew PHP Upgrade

Aku tak pasti kenapa dan mengapa diorang tukar kaedah simpan keg untuk php daripada php71 kepada php@7.1. Mungkin disebabkan pertukaran daripada homebrew/php kepada homebrew/core cuma aku perasan beberapa perkara;

Tidak konsistan

php@7.1 untuk php 7.1 tetapi php untuk php 7.2. Apa akan jadi jika php 7.3 atau 8.0 keluar?

non suffix php version brew
https://github.com/Homebrew/homebrew-core/pull/26137#pullrequestreview-109196492

Library asas telah dimasukkan sekali

jika dulu perlu brew install php71-intl kini tidak perlu kerana intl telah dimasukkan secara automatik. Dan ini juga menyebabkan ralat tidak perlu jika anda mempunyai external config sebelum ini.

Sukar untuk membuat pertukaran versi php

Disebabkan kaedah baru ini, agak sukar untuk membuat pertukaran antara versi dan kita perlu berjaga-jaga dengan tetapan sistem apabila keluarnya versi terkini PHP contohnya;

  • sekarang versi terkini php 7.2 – nama direktori php 7.2 => php
  • akan datang versi terkini php 7.3 – nama direktori php 7.2 => php@7.2

Maka semua projek yang menggunakan versi 7.2 yang tidak berhajat untuk masuk ke versi 7.3 perlu menukar tetapan php.

Secara positifnya, kita akan memastikan sistem kita sentiasa boleh dijalankan pada php yang terkini. Cuma, tidak semua klien boleh membuat kemaskini php versi terkini terutamanya badan kerajaan ehem.

Dan dengan ini juga, semasa menjalankan arahan composer, anda harus berhati-hati dengan versi php di cli. Aku gunakan tetapan interpreter dalam phpstorm. Jika tidak aku cadangkan membuat alias kepada setiap versi yang mahu digunakan.

Ralat

path

If you need to have this software first in your PATH instead consider running:
  echo 'export PATH="/usr/local/opt/php@7.0/bin:$PATH"' >> ~/.bash_profile
  echo 'export PATH="/usr/local/opt/php@7.0/sbin:$PATH"' >> ~/.bash_profile

Sila pastikan di dalam .bash_profile anda telah diletakkan pada versi yang mahu digunakan.

library, extension

/usr/local/etc/httpd/httpd.conf: Cannot load /usr/local/Cellar/php71/7.1.12_23/libexec/apache2/libphp7.so into server: dlopen(/usr/local/Cellar/php71/7.1.12_23/libexec/apache2/libphp7.so, 10): image not found

Disebabkan beberapa extension telah dimasukkan secara automatik dan dijalankan terus, anda perlu memastikan external configuration (dalam kes ini httpd.conf) atau autoloader tidak memanggil semula extension tersebut.

Periksa juga di dalam <span class="s1">/usr/local/etc/php untuk memastikan tiada konfigurasi lain yang mengganggu.

brew php remove autoloader
https://github.com/Homebrew/homebrew-php/issues/4826#issuecomment-377548781

Anda hanya perlu membuat komen atau memadamkan baris yang memanggil extension tersebut.

Notakaki: jika anda tidak mempunyai sebarang keperluan untuk upgrade, jangan upgrade. Guna apa yang ada.

Tech: CSS Grid – fr

Sebelum ini aku telah ceritakan bagaimana grid dalam css berfungsi, maka untuk kali ini aku sambung sedikit lagi sekitar perkara ini.

Di dalam CSS Grid, terdapat satu unit yang diperkenalkan, fr iaitu fraction.

Kegunaan fr dapat ditonjolkan dengan situasi seperti ini;

<!doctype html>
<html lang="en">
<head>
    <style>
        body {
            margin-top: 40px;
        }

        #container {
            width: 800px;
            margin: auto;
            background: #e3e3e3;

            display: grid;
            grid-template-columns: 100px 100px 100px;
            grid-template-rows: repeat(3, 50px);
            grid-gap: 1em;
        }

        #container > div {
            background: #999;
            font-weight: bold;
            color: white;
            font-family: sans-serif;
        }
    </style>
</head>
<body>
<section id="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</section>
</body>
</html>

Aku ada 3 kotak, dua kotak pertama bersaiz 100px dan kotak ketiga aku mahukan dia mengambil baki saiz yang ada. Dalam kes ini 800px - 100px - 100px - 1em - 1em. Ya aku boleh capai dengan kaedah begitu tetapi sedikit “matematik”.

Maka diperkenalkan unit fr atau fraction ke dalam CSS grid. Tugasnya adalah untuk mengambil bahagian baki yang ada berdasarkan pecahan yang dinyatakan.

Sebagai contoh apabila kita tukarkan grid-template-columns: 100px 100px 100px; kepada grid-template-columns: 100px 100px 1fr;,  secara automatik browser akan membuat kiraan untuk kita seperti ini;

jumlah width = 800px
jumlah width telah digunakan = 100px + 100px
jumlah grid-gap dan margin = 1em + 1em
jumlah pecahan = 1
pecahan semasa = 1

baki width = 800px - 100px - 100px - 1em - 1em
           = 568px

∴ width grid pecahan = baki width * (pecahan semasa / jumlah pecahan)
                     = 568px * 1/1
                     = 568px

Yang akan menghasilkan grid kiraan manual tadi.

css-grid-fr-unit

Soalan: Jika boleh menggunakan kaedah manual, mengapa perlu menggunakan kaedah fr?

Jawapan: Jika kita memerlukan fr lebih daripada satu, maka kiraan manual akan menjadi rumit. Sebagai contoh;

kotak 1 = 100px

kotak 2 = 2/3 daripada baki width

kotak 3 = 1/3 daripada baki width

Dengan menggunakan kaedah fr, kita hanya perlu menukarkan kepada grid-template-columns: 100px 2fr 1fr; yang akan memberikan arahan kepada browser untuk memberikan 2 bahagian daripada 3 (2fr + 1fr) kepada kotak 2 dan 1 bahagian kepada kotak 3.

css grid 2 fr

Kaedah ini juga lebih kurang sama dengan flex: flex: 100px 2 1; tetapi seperti mana yang aku katakan pada entri yang sebelum ini, terdapat perbezaan keperluan untuk flex dan grid.

Nota: entri ini aku kecilkan kepada fraction sahaja kerana entri lepas terlalu banyak gambar.

Tech: Nativescript iOS – Unable to apply changes on device

Aku dalam proses membuat satu percubaan untuk membina satu aplikasi mobil untuk sistem HR menggunakan Nativescript + Vuejs. Tetapi apabila aku cuba jalankan kod ke dalam emulator terdapat ralat yang menganggu.

Ceritanya, apabila aku jalankan arahan yarn run watch:ios pada terminal akan keluar ralat seperti dibawah;

Unable to apply changes on device: <device_id>. Error is: Command failed: ruby -e "require 'xcodeproj'; Xcodeproj::Config.new('/Users/syafiq/Developer/ost-hr-mobile/dist/platforms/ios/plugins-debug.xcconfig').merge(Xcodeproj::Config.new('/Users/syafiq/Developer/ost-hr-mobile/dist/app/App_Resources/iOS/build.xcconfig')).save_as(Pathname.new('/Users/syafiq/Developer/ost-hr-mobile/dist/platforms/ios/plugins-debug.xcconfig'))"
/System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/lib/ruby/2.0.0/rubygems/core_ext/kernel_require.rb:55:in `require': cannot load such file -- xcodeproj (LoadError)
        from /System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/lib/ruby/2.0.0/rubygems/core_ext/kernel_require.rb:55:in `require'
        from -e:1:in `<main>'

Daripada pembacaan aku, orang di internet mencadangkan untuk membuat diagnos menggunakan tns doctor (macam brew doctor untuk tujuan diagnos),

WARNING: xcodeproj gem is not installed or is not configured properly.
You will not be able to build your projects for iOS.
To be able to build for iOS and run apps in the native emulator, verify that you have installed xcodeproj.

Maka aku pasang pakej xcodeproj dengan command gem install xcodeproj. Setelah selesai aku jalankan semula arahan yarn run watch:ios dan akhirnya aku dapat jalankan kod ini di dalam emulator.

Nota: Nativescript + Vuejs baru dalam versi 1.0, maka sebenarnya tidak berapa sesuai untuk digunakan untuk sistem yang sebenar. Aku jadikan sistem HR dalaman sebagai bahan eksperimen untuk mengetahui sejauh mana fungsi yang ada di dalam versi Vuejs ini. Fungsi yang aku cuba akan masukkan adalah authentication dan geolocation dahulu. Kamera, autosync dan lain-lain akan menyusul.

Tech: Redirect Berdasarkan Role Selepas Log Masuk

Aku adaptasi artikel ini daripada artikel asal, Redirect after login or register in Laravel: Adding a custom method. Aku ada dua jenis pengguna:

  1. Pengguna berdaftar
  2. Admin sistem

Dan aku perlukan mereka ini dihantar kepada dua tempat berlainan selepas proses log masuk.

Pengguna URL
Pengguna Berdaftar /home
Admin Sistem /admin

Aku gunakan modul auth daripada Laravel, daripada LoginController ada satu variable yang menyatakan url yang diletakkan secara lalai untuk sebarang log masuk yang berjaya dibuat.

/**
 * Where to redirect users after login.
 *
 * @var string
 */
protected $redirectTo = '/home';

Kita boleh mengubah variable tersebut kepada function untuk memudahkan membuat if else. Kenapa tidak menggunakan ternary atau if else biasa sahaja seperti kod di bawah?

/**
 * Where to redirect users after login.
 *
 * @var string
 */
if(auth()->user()->is_admin) {
  protected $redirectTo = '/admin';
} else {
  protected $redirectTo = '/home';
}

// atau

protected $redirectTo = auth()->user()->is_admin ? '/admin' : '/home';

Untuk memudahkan proses membuat test script dan masih boleh digunakan jika sistem perlu menambah golongan ketiga, keempat mahu pun kelima kelak. Lebih future proof.

Maka daripada kod asal, aku tukarkan kepada kod ini;

/**
 * Where to redirect users after login.
 *
 * @return string
 */
public function redirectTo(): string
{
    if(auth()->user()->is_admin) {
        return '/admin';
    } else {
        return '/home';
    }
}

Dengan ini, apabila pengguna dapat membuat log masuk ke dalam sistem, sistem akan terus menyemak adakah pengguna ini seorang admin atau pengguna biasa, jika admin sistem akan membawanya kepada paparan admin. Jika tidak maka pengguna tersebut akan dibawa kepada paparan pengguna biasa.

Nota: Kaedah ini tidak akan menyelesaikan masalah jika pengguna biasa masuk ke paparan admin menggunakan kaedah menukar alamat laman web. Untuk menyelesaikan masalah ini sila gunakan middleware atau fungsi di dalam route untuk memastikan hanya admin yang boleh masuk ke paparan admin.

 

 

Tech: CSS Grid

Apabila berkata tentang grid di dalam CSS, kebanyakkan orang akan terfikir tentang nested div dengan class yang pelbagai seperti row dan column seumpama Bootstrap ataupun sesuatu yang lebih klasik seperti 960gs. Tetapi kini CSS sendiri mempunyai fungsi grid.

Fungsi grid jika dilihat adalah layout oriented. Tidak kisah macam mana susunan asal tetapi dengan menggunakan grid, kita boleh menentukan dimana mahu diletakkan sesuatu element tersebut di dalam layout. Sebagai contoh, ini adalah elemen yang ada di dalam layout anda.

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
</div>

grid-css-pre

Tetapi dengan menggunakan grid, kita boleh mengubahnya menjadi seperti ini;

grid-css-post

Langkah 0 – Firefox

Untuk Grid, aku amat mencadangkan anda menggunakan Firefox. Sebab Firefox ada fungsi grid yang terbina secara dalaman tanpa memerlukan pemalam tambahan.

Dan untuk memudahkan pembelajaran, kita tambahkan sendiri border dan beberapa perkara lain.

.container {
  width: 500px;
  height: 500px;
  margin: 100px auto 0;  
}

.item {
  border: 1px dashed purple;
}

div with purple dotted border

Langkah 1 – Grid

Langkah pertama adalah untuk mengaktifkan grid kedalam CSS.

.container {
 ...
 display: grid
}

css display grid

Ini kerana apabila menggunakan grid, grid akan mengambil semua height dan width yang diberikan di dalam CSS iaitu 500px×500px dalam kes ini. Ratio untuk setiap kotak adalah automatik. Konsep automatik amat kuat di dalam grid.

Langkah 2 – 4×4

Perbezaan besar di antara grid dan flexbox adalah konsepnya. Grid sesuai untuk membuat layout dua dimensi tetapi flexbox lebih sesuai untuk satu dimensi. Sebagai contoh, Untuk menggunakan flexbox bagi mencapai apa yang kita henda buat pada hari ini adalah tidak sesuai kerana melibatkan dua dimensi (𝑥 dan 𝑦) tetapi jika satu dimensi (𝑥) sahaja seperti navbar, flexbox adalah calon yang sesuai.

Kembali ke grid kita, daripada hasil akhir yang mahu dicapai di atas, kita tahu bahawa kotak yang kita perlukan adalah berbentuk 4×4. Maka kita perlu memberi tahu kepada grid, yang kita mahu membina grid bersaiz 4×4.

.container{
  ...
  grid-template-columns: auto auto auto auto;
  grid-template-rows: auto auto auto auto;
}

css grid 4 by 4

Kenapa hanya 4×2? sebab kita hanya ada 8 kotak. Jika mahu melihat 4×4 dalam masa ini, anda perlu menjadikannya 16 kotak atau anda juga boleh melihatnya menggunakan Firefox grid inspect element.

Jika anda perasan, penggunaan auto auto auto auto tersebut amat merenyahkan. Maka CSS mempunyai satu fungsi khas untuk digunakan di dalam grid iaitu repeat. Anda boleh menukarkan daripada auto auto auto auto kepada repeat(4, auto) seperti ini;

.container{
  ...
  grid-template-columns: repeat(4,auto);
  grid-template-rows: repeat(4,auto);
}

Kemudian untuk memberikan sedikit jarak di antara kotak, kita tambahkan grid-gap.

.container {
  ...
  grid-gap: 1em;
}
grid gap
via browser biasa
grid gap firefox
via firefox grid element inspector

Langkah 3 – Pindahkan 1 kepada 7

Kita mahu pindakan kotak 1 kepada kotak 7.

Langkah 3.1 – Pindahkan 1 kepada 3

Untuk memindahkan kotak 1 kepada 3, kita perlu menggerakkan kotak 1 kepada column 3 sehingga column 4. Jika tidak faham rujuk gambar di bawah.

css grid column start stop
nombor column boleh dilihat menggunakan firefox grid
.item:first-child {
  background: red; // estetika
  grid-column-start: 3;
  grid-column-end: 4;
}

css grid column start end post

Langkah 3.2 – Turunkan kotak 1 ke posisi kotak 5 (sekarang) atau 7 (asal)

Untuk memindahkan kotak 1 kepada 5 atau 7, kita perlu menggerakkan kotak 1 kepada row 2 sehingga column 3. Jika tidak faham rujuk gambar di bawah.

.item:first-child {
  ...
  grid-row-start: 2;
  grid-row-end: 3;
}

css grid row post

Langkah 3.3 – Refactor

Anda boleh meringkaskan CSS kepada

.item:first-child {
  background: red;
  grid-row: 2 / 3;
  grid-column: 3 / 4;
}

Langkah 3.4 – Besarkan saiz kotak 1 kepada 2×2.

.item:first-child {
  background: red;
  grid-row: 2 / 4;
  grid-column: 3 / 5;
}

css grid make it bigger

Hasil akhir langkah 3:

hasil akhir langkah 3

Langkah 4 – Pindahkan kotak 3 kepada kotak 2 dan jadikan saiznya 2×2

.item:nth-child(3) {
  background: cornflowerblue;
  grid-row: 1 / 3;
  grid-column: 1 / 3;
}

final langkah 4

Langkah 5 – Besarkan kotak 8 kepada 1×3

.item:last-child {
  background: yellowgreen;
  grid-column: 2 / 5;
}

final langkah 5

Selesai. Jika anda perasan, walau di mana pun kedudukan baharu kotak tersebut, untuk menggerakkannya masih menggunakan kedudukan element yang asal.

Nota: Aku tak pasti kenapa baris kedua lebih kecil daripada yang lain.

 

Tech: Vue Parent & Child

VueJS adalah salah satu framework yang semakin popular disebabkan menunggang populariti Laravel sebagai salah satu framework PHP yang popular.

vue-basic

Satu fungsi yang bersifat triggered daripada parent class boleh di overwrite oleh child class.

export default class Parent extends Vue {
    created() {
        console.log('created from parent')
    }

    clicked() {
        console.log('clicked from parent')
    }

    parentClicked() {
        console.log('parent clicked')
    }
}
export default class Hello extends Parent {
    message:string = 'Hello Vue'

    get fullMessage() {
        return `${this.message} from Typescript`
    }

    created() {
        console.log('created from child')
    }

    clicked() {
        console.log('clicked')
    }
}

Kalau dalam PHP boleh dikatakan bahawa situasi ini adalah function override. Aku rasa sama sahaja konsepnya.

  1. Jika function bukan navigation ada di parent dan di child – function di dalam child akan digunakan.
  2. Jika function bukan navigation ada di parent sahaja – function di dalam parent akan digunakan.
  3. Jika navigation triggered invoked function ada di parent dan di child – kedua-dua function akan digunakan.