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.

Tech: Asas GIT

Jumaat lepas adalah giliran aku untuk mengajar asas GIT di OST. Objektifnya adalah:

  1. Pengenalan kepada code versioning
  2. Konsep GIT
  3. Merge v Rebase
  4. Conflict

Pengenalan Code Versioning

Semalam ok je, hari ni terus tak jadi. – Pelajar FYP (saban tahun)

Untuk mengelakkan terjadinya ayat seperti di atas adalah antara sebab untuk menggunakan code versioning. Sebab lain adalah untuk mengelakkan terjadinya satu fail pelbagai versi seperti;

  • index.php
  • index.php.lama
  • index.php.lama.lama
  • index.php.lama.lama.lama-sangat

Terdapat pelbagai jenis code versioning seperti contoh;

  1. GIT
  2. SVN
  3. Mercurial

GIT adalah antara yang popular pada zaman kini. Dan entri ini adalah tentang GIT.

Konsep GIT

Konsep GIT boleh dipecahkan kepada dua bahagian iaitu;

  1. Konsep pokok
  2. Konsep kerja

Konsep Pokok

Di dalam GIT, konsep pokok ini adalah bertindak seperti sebuah pokok yang mempunyai batang utama atau main dan ranting / cabang atau branch.

Main – Batang paling utama di dalam sesebuah git. Selalunya main ini juga dipanggil sebagai cabang master.

Branch – Cabang tambahan yang mungkin dicipta disebabkan beberapa perkara seperti fungsi baharu ataupun proses membetulkan pepijat.

Konsep Kerja

  1. workplace
  2. index
  3. local repository
  4. upstream repository

Workplace

Workplace atau ruang kerja adalah keadaan semasa yang sedang digunakan oleh programmer. Dalam satu-satu ketika hanya boleh ada satu sahaja ruang kerja yang aktif untuk sesebuah projek. Secara lalai, workplace yang aktif adalah di bawah branch master.

git-init-master

Ruang kerja juga adalah tempat di mana sebarang perubahan di dalam fail berlaku. Tetapi dalam peringkat ini GIT masih belum menyimpan sebagai rekod perubahan yang sah. Hanya sebagai ruang kerja individu sahaja. Jika dilihat daripada git status, fail yang dimasukkan di bawah seksyen untracked files tersebut adalah fail yang masih berada di ruang kerja.

git-new-file-workplace

Index

Index adalah ruang dimana GIT merekodkan perubahan fail yang mahu di simpan sebagai rekod tetapi pada peringkat ini rekod tersebut masih boleh ditukar dan belum dijadikan sebagai satu rekod yang sah. Kita boleh memindahkan perubahan yang dibuat pada ruang kerja kedalam index dengan menggunakan arahan git add <nama fail>.

git-add-file-to-index

Nota: Perubahan yang berlaku selepas anda meletakkan fail ke dalam index adalah dianggap sebagai perubahan yang baru dan perlu dimasukkan kedalam index sekali lagi untuk membuat kemaskini perubahan.

Local Repository

Kita boleh menjadikan perubahan yang telah dimasukkan kedalam index sebagai rekod yang sah dengan membuat arahan git commit -m "mesej anda". Atau digelar sebagai local commit.

git-commit-status-log

Dan apabila kita menyemak kembali status GIT, GIT akan menyatakan bahawa tiada perubahan baharu di dalam index kerana perubahan tersebut telah pun di tukar kepada rekod yang sah di dalam local repository.

Kita boleh melihat commit tadi dengan menggunakan arahan git log.

253e9ee2b09af3dafe37bf9048ec6ff4016b78d8 (HEAD -> master)

  • Nombor yang panjang dihadapan tersebut adalah kod unik yang membezakan di antara commit dengan commit yang lain.
  • HEAD adalah puncak tertinggi dalam sesebuah cabang yang sedang dibuka di ruang kerja..
  • master adalah cabang yang sedang dibuka di ruang kerja.

Upstream Repository

Antara konsep yang perlu diambil perhatian kepada pengguna GIT baru adalah konsep decentralize. Di dalam GIT, konsep decentralize ini merujuk kepada kebebasan yang diberikan kepada pengguna untuk mengubah atau menambah cabang, commit baharu di dalam sesebuah local repository (contoh: laptop) tanpa memberikan kesan kepada upstream repository (contoh: server).

Dengan maksud lain, apa yang ada di dalam local repository tidak semestinya ada di dalam upstream repository, vice versa. Berbeza dengan kaedah yang digunakan SVN iaitu centralize. Dengan menggunakan konsep decentralize ini juga membolehkan orang lain mengambil projek daripada upstream repository kita dan menjadikannya sebagai satu “cabang” lain yang boleh dikawal oleh dirinya sendiri yang digelar sebagai fork.

Untuk meletakkan apa yang telah kita buat di dalam local repository juga terdapat di dalam upstream repository yang boleh dikongsi dengan orang lain, kita boleh menggunakan arahan git push <upstream alias> <upstream branch>. Atau digelar sebagai publish local commit.

git-push-origin-master

Sebagai contoh: git push origin master

Origin – selalunya di dalam GIT, alias kepada upstream repository dipanggil origin tetapi anda boleh menukarkannya kepada apa sahaja nama yang anda mahukan kerana alias adalah tetapan secara individu. Tidak mempengaruhi orang lain. Tetapi untuk memudahkan proses pemahaman, letakkan sahaja sebagai origin.

Master – cabang di dalam upstream repository selalunya adalah sama seperti yang ada di local repository.

 

Merge vs Rebase

git-merge-rebase-original

Tidak dapat tidak, apabila kita bekerja untuk sesebuah projek terlebih sekali apabila terdapat lebih daripada seorang programmer, akan tiba masa kita membuat perubahan kepada fail yang sama. Dan untuk menggabungkan dua perubahan ini terdapat dua kaedah iaitu;

  1. Merge
  2. Rebase

Terdapat perbezaan di antara merge dan rebase.

Merge

git-merge

Merge adalah proses dimana kita menyatukan dua perubahan menjadi satu dengan menggunakan satu titik pertembungan atau merge point. Ini kerana cabang tersebut akan dikekalkan. Proses merge boleh dibuat dengan menggunakan arahan git merge <nama branch>.

Pro: Cabang asal dikekalkan.

Cons: Kalau terlalu banyak cabang, akan lebih serabut untuk melihat dan memahami perubahan yang dibuat.

Rebase

git-rebase

Berbeza dengan kaedah merge, rebase adalah satu kaedah yang dilihat lebih baik pada zaman kini kerana akan menggabungkan dan menjadikan dua cabang sebagai satu cabang utama sahaja. Dan menghasilkan pokok GIT yang lebih “bersih”.

Boleh dijalankan dengan menggunakan arahan git rebase <nama branch>

Pro: Semua cabang akan disatukan menjadi satu cabang utama sahaja.

Cons: Cabang terhapus dan tidak nampak perbezaan diantara cabang utama dan cabang pecahan.

Conflict

Konflik adalah satu perkara yang tidak dapat dielakkan. Apabila anda mahu menggabungkan antara dua perubahan dengan menggunakan kaedah merge ataupun rebase, malangnya terdapat konflik di antara dua jenis perubahan yang memerlukan tindakan anda untuk membuat keputusan perubahan mana yang perlu diambil dan mana yang tidak.

Apabila berlaku sesebuah konflik, GIT akan menandakan setiap perubahan yang perlu diambil keputusan dengan menggunakan >>>>>, ===== dan <<<<<. Sebagai contoh;

git-conflict

Daripada <<<<< HEAD sehingga ===== adalah seksyen di mana kod yang ada untuk branch yang mahu digabung (merge atau rebase). Dan daripada ===== sehingga >>>>> ayam tak suka dimakan tersebut adalah seksyen di mana kod yang kita ubah. ayam tak suka dimakan tersebut adalah mesej untuk commit yang telah dibuat sebagai rujukan.

Saya suka makan.
Hari-hari saya makan.
<<<<<<< HEAD
Kawan saya suka makan ayam.
=======
Kawan saya suka makan.
Ayam tak suka dimakan.
>>>>>>> ayam tak suka dimakan

Maka tugas kita di sini adalah untuk menentukan apakah data yang kita mahu kekalkan atau mahu buang. Terdapat 4 keadaan yang saya boleh fikirkan:

  1. Ambil yang HEAD sahaja
  2. Ambil yang baru sahaja
  3. Ambil kedua-duanya
  4. Ambil secara pilihan (custom)

Ambil yang HEAD sahaja

Saya suka makan.
Hari-hari saya makan.
Kawan saya suka makan ayam.

Ambil yang baru sahaja

Saya suka makan.
Hari-hari saya makan.
Kawan saya suka makan.
Ayam tak suka dimakan.

Ambil kedua-duanya

Saya suka makan.
Hari-hari saya makan.
Kawan saya suka makan ayam.
Kawan saya suka makan.
Ayam tak suka dimakan.

Ambil secara pilihan

Saya suka makan.
Hari-hari saya makan.
Kawan saya suka makan ayam.
Ayam tak suka dimakan.
Tapi saya suka makan ayam.
Ayam sedap.

Yang penting selepas perubahan dan keputusan dibuat, fail tersebut perlu di git add dan diterukan dengan merge ataupun rebase.

Kesimpulan

Ini hanya asas kepada GIT. Masih banyak yang perlu difahami dan pengalaman akan memberikan pengajaran yang baik.

Tech: Jajahan, apa yang aku belajar daripadanya.

Jajahan adalah satu senarai yang aku kumpulkan daripada beberapa sumber yang kebanyakannya berdasarkan data daripada DDSA (Data Direktori Sektor Awam) oleh Mampu. Walaupun begitu ada beberapa data yang aku kira tidak berapa jelas di dalam DDSA dan memerlukan diambil data daripada tempat lain. Tujuan utama adalah untuk memudahkan kerja aku sendiri dalam membuat satu boilerplate (plat dangdang adalah terlalu pelik) untuk digunakan dalam semua projek yang aku buat terutamanya melibatkan sektor awam.

Antara sebab kenapa aku gunakan data daripada DDSA sebagai asas adalah untuk memudahkan kerja-kerja intergrasi dan migrasi data apabila diperlukan kelak dan tidak menyebabkan orang akan mengutuk aku berbakul-bakul di kemudian hari.

jajahan baharu

Tetapi daripada projek mudah ini terdapat beberapa perkara yang aku pelajari daripadanya;

Kod negara 3 aksara ada banyak

Terdapat paling kurang tiga jenis kod negara 3 aksara yang digunakan secara meluas di dalam dunia ini.

  1. ISO
  2. IOC
  3. FIFA

Perbezaan ini juga menyebabkan kiraan negara adalah berlainan mengikut kaedah kiraan. Sebagai contoh England dan Scotland dikira sebagai dua negara yang berbeza di FIFA tetapi dikira sebagai satu negara yang sama di dalam ISO iaitu The United Kingdom Of Great Britain And Northern Ireland. Perbezaan juga dapat dilihat kadang kala kod ISO, IOC dan FIFA berbeza di antara satu sama lain seperti IDN (ISO & IOC) dan INA (FIFA) untuk Indonesia.

Kaedah pemansuhan dan penambahan data baru

Aku tidak nampak keperluan ini pada awal projek tetapi kini nampak lebih lagi untuk data-data yang selalu berubah seperti DUN dan Parlimen. Untuk jangka masa pendek tiada masalah tetapi untuk jangka masa panjang yang melibatkan pemecahan mahupun penyatuan antara kawasan akan menyebabkan data sukar untuk dipantau. Hal ini lebih bermasalah apabila penyatuan antara dua kawasan seperti Dun.

Jangan jadikan Kod DDSA sebagai Primary Key

Aku cadangkan ini atas dua perkara

1. Kod DDSA tidak konsistan

Pengalaman mengajar, kod DDSA tidak pernah konsistan. Paling tidak setakat mana yang aku pernah lalui. Perubahan demi perubahan, struktur penyimpanan data yang bercanggah antara satu sama lain. Tidak dinafikan bahawa mereka telah membetulkan banyak data tetapi aku tak pasti adakah akan ada lagi perubahan drasktik atau tidak. Maka jangan terlalu bergantung pada kod DDSA sebagai primary key.

2. Kod DDSA ada padding.

Kebanyakkan kod DDSA mempunyai padding seperti 09 untuk negeri Perlis dan 0102 untuk daerah Johor Bahru dan menyimpannya di dalam bentuk int adalah amat tidak digalakkan. Aku cadangkan jadikan kod DDSA ini sebagai satu field baharu dan diletakkan sebagai berjenis string.

3. Kod DDSA Bandar Sarawak ada 7 aksara

Semua kod DDSA bandar untuk negeri lain mempunyai 6 aksara iaitu;

  1. 2 aksara negeri
  2. 2 aksara daerah
  3. 2 aksara bandar

Tetapi untuk sarawak

  1. 3 aksara bandar menjadikannya tidak konsistan (sekali lagi).

Kesimpulan

Aku kini dalam proses membuat kemaskini senarai kod untuk Jajahan versi 2 iaitu akan memasukkan beberapa data tambahan seperti kod FIFA dan IOC untuk negara, koordinat umum untuk semua data untuk memudahkan membuat GIS untuk projek yang memerlukan pemetaaan visual data dan beberapa perkara lain. Aku mulakan dulu dengan sistem dalaman dahulu dan kemudiannya akan aku jadikan sebagai satu pakej untuk boleh ditarik menggunakan composer.

Kemudian untuk versi 3 aku akan cuba untuk membuat lebih eksperimen menggunakan datatype json yang aku kira sudah disokong dengan baik secara asasnya untuk MariaDB 10.2 dan MySQL 5.7.

Jajahan via Github.

Taman: Sungkupan

Sungkup atau mulch adalah satu kaedah menutup tanah atas (topsoil) daripada tiga perkara:

  1. Hakisan yang berlaku apabila air melalui ketika siraman atau hujan.
  2. Penyejatan melampau menyebabkannya kering.
  3. Pertumbuhan rumpai yang sukar dikawal.

Maka untuk mengatasi masalah ini, sungkupan atau mulch dicadangkan.

Bahan Sungkupan

Ada pelbagai kaedah sungkupan yang boleh digunakan. Sama ada organik mahupun tidak organik. Contoh bahan organik adalah:

  • Daun kering
  • Serpihan kayu
  • Serbuk kopi

Manakala bahan bukan organik yang biasa digunakan adalah plastik hitam.

Untuk skala kecil, aku cadangkan untuk menggunakan sungkupan organik di atas dua perkara iaitu:

  • Mengatasi 3 masalah di utama.
  • Nutrien tambahan yang akan terurai menjadi tanah atas yang baharu.

Jangan Terlalu Banyak

Tetapi dalam menggunakan sungkupan organik terdapat satu perkara yang perlu diambik perhatian iaitu jangan terlalu tebal sehinggakan bahan sungkupan menjadi terlalu lembap sepanjang masa. Ini kerana jika bahan sungkupan yang mempunyai tinggi nutrien seperti serbuk kopi mahupun teh berada dalam keadaan terlalu lembap, serangan kulat akan mudah terjadi. Lebih lagi jika kedua tersebut dalam keadaan serbuk. Jika serangan kulat masuk ke bahagian akar, pokok anda boleh mati secara tiba-tiba.

Aku sendiri pernah mendapat masalah ini apabila menanam pokok timun jepun. Pokok yang sihat tetapi sungkupan terlalu tebal (teruja mungkin) dan berlaku serangan kulat menyebabkan pokok yang hari ini segar, keesokkan harinya terus layu walaupun tanah dalam keadaan lembap.

Aku selalu gunakan sungkupan biji kopi hancur kerana selalunya di rumah akan buat kopi sendiri dan serbuk atau biji kopi hancur tersebut akan di letakkan di atas permukaan tanah mengikut keperluan. Sebagai contoh, ada 6 pasu anak pokok limau nipis yang ditanam, maka aku memerlukan biji kopi hancur selama 6 hari untuk memenuhkan semua pasu dengan sungkupan.

pokok-tanpa-sungkupan
Contoh tanah atas pokok tanpa sungkupan.
pokok-dengan-sungkupan
Contoh tanah atas pokok dengan sungkupan biji kopi hancur.

Tiada benih rumpai

Perkara terakhir sebelum anda membuat sebarang jenis sungkupan adalah untuk memastikan tiada benih rumpai di tanah sedia ada terutamanya jika menggunakan sungkupan organik kerana sungkupan organik tidak mempunyai kadar legapan kepada cahaya yang tinggi seperti mana plastik. Ini untuk memastikan halangan sungkupan kepada rumpai lebih bagus.

Sembang: Mengapa Lagu Ahmad Jais Dianggap Explicit?

Nota awal: Ini entri sembang ringan. Jika anda biasa dengan spotify dan lagu-lagu melayu klasik, anda akan terperasan bertapa banyak lagu melayu klasik yang diletakkan sebagai explicit. Lagu yang diletakkan simbol explicit adalah merujuk kepada lagu yang mempunyai kata-kata offensive. Aku rujuk daripada google:

explicit (ɪkˈsplɪsɪt,ɛkˈsplɪsɪt) [adj] – stated clearly and in detail, leaving no room for confusion or doubt.
Dengan maksud lain selalunya lagu berbentuk explicit ini adalah yang mempunyai lirik yang boleh menyinggung perasaan orang lain secara terus dan tiada tapis.
lagu-ahmad-jais-explicit
Tetapi aku sedikit aneh apabila lagu melayu klasik seperti Ahmad Jais diletakkan sebagai explicit. Dimanakah explicit tersebut? Aku cuba merungkai isu ini dengan menggunakan lagu Umpan Jinak Di Air Tenang sebagai contoh.

Rangkap 1

Madah berbunga alun suara
Terdengar merdu hanya dendangan
Wajah yang indah ditatap saja
Hati yang satu digadai jangan

Daripada rangkap pertama ini saja sudah boleh digelar explicit. Masakan tidak, teguran secara terus yang diberikan kepada orang muda yang berdarah manis asal nampak yang cantik sahaja nak dipikatnya. Walaupun sudah ada orang dihatinya. Pesanan ini juga sesuai untuk orang muda di zaman mutakhir ini kerana terlalu besar dan luas pengaruh media sosial dalam kehidupan sampaikan terlalu mudah untuk terjumpa orang yang kita tak kenal, hanya suara atau rupa dan jangan terlalu mudah untuk terpikat.

Rangkap 2

Jangan tergoda bintang di awan
Kalau terbitnya di siang hari
Jinak merpati makan di tangan
Jangan dikurung disangkar hati

Teguran diteruskan kepada rangkap kedua iaitu jangan tergoda bintang di awan, kalau terbitnya di siang hari. Bintang disiang hari dalam situasi sekarang boleh dirujuk sebagai mereka-mereka yang suka memviralkan diri tak kene tempat, buat perkara kurang cerdik semata-mata untuk satu-dua review job dan sebagainya. Kerana mereka-mereka ini umpama merpati yang nampak jinak untuk dikenakan dan jangan diletakkan ke dalam hati kerana niat mereka semua adalah untuk menjual produk masing-masing selepas itu.

Kerana mereka semua memerlukan audiance untuk mempromosikan sesuatu dan jika semua orang tak layan, maka golongan ini akan mati kerana matahari yang lebih cerah daripada mereka.

Rangkap 3

Seribu senyum seribu madah
Mungkin dikuntum racun yang bisa
Kalau terkorban jiwa merana
Seribu sesal apa gunanya

Diingatkan lagi kepada orang muda, jangan mudah tergoda dengan senyuman dan rupa kerana siapa yang tahu apa niatnya yang sebenar. Mungkin itu adalah perangkap. Kalau dah terjerat susah nak keluar. Maka berhati-hati dalam kehidupan terutamanya zaman sekarang.

Rangkap 4

Merdu di dengar indah di pandang
Awaslah umpan di air tenang
Kasih dan budi bukan mainan
Tergadai hati jiwa tebusan

Awaslah umpan di air tenang ini perlu digandingkan dengan pepatah lama air yang tenang jangan sangka tiada buaya dan memang secara merujuk kepada dua golongan yang wujud di zaman kini yang penuh dengan perangkap:

  1. Pussy hunter
  2. Dick hunter

Kalau dah masuk perangkap dan di-ransom maka nak keluar daripada permainan tersebut amatlah payah.

Kesimpulan

Maka disebabkan itu aku amat bersetuju bahawa lagu Ahmad Jais, Umpan Jinak Di Air Tenang ini memang patut ada label explicit. Eminem dan Rap God juga tidak mampu menandingi kehebatan lagu ini.

Jika anda tidak bersetuju dengan pendapat ini, sila mohon Spotify betulkan kedudukan lagu ini menggunakan Spotify Line-in.

Tech: Yii2 Data Tak Masuk

Di dalam Yii2, jika satu-satu medan di dalam database, tidak perlu lagi dimasukkan ke dalam model. Jika tidak, data tersebut tidak akan di simpan ke dalam database. Sebagai contoh di bawah;

class Application extends Dermaga
{
    public $application_type;
    public $investor_unit;
    public $investor_amount;
    public $investor_tnc;

...
}

Aku meletakkan empat variable di dalam class Application walaupun sebenarnya empat medan tersebut telah berada di dalam database. Semasa aku membuat penyimpanan data, aku perhatikan, data tersebut tidak disimpan. Seolah-olah nilai asalnya menjadi null. Osh menjelaskan;

Model ada 2 dlm yii… kalu kau extend dgn activerecord bleh direct ke table je n tak perlu define attr…satu lg model extends model utk collect form data je (cthnya) yg ni kena define attr…yg activerecord bleh gk nk tmbh attr tp kalau sama dgb attr drp table akan overwrite

Secara kesimpulannya model di dalam Yii terdapat dalam dua bentuk:

  1. Model yang di-extend bersama ActiveRecord yang secara lalainya tidak memerlukan untuk di-define di dalam class.
  2. Model yang di-extend untuk mendapatkan data daripada form sahaja tetapi tidak mempunyai sebarang medan di dalam database.

Dan sebarang model yang di-define dan mempunyai medan di dalam database, nilainya akan di overwrite oleh model di dalam class.

Tech: HTML, CSS & Sistem Grid

Hari Jumaat lepas adalah kali pertama aku masuk dalam sesi perkongsian pendek yang dibuat di OST. Golongan sasaran sesi ini adalah untuk memberikan idea dan kefahaman kepada intern dan juga junior programmer tentang apakah itu HTML, CSS dan juga sistem grid yang sering digunakan di dalam template sistem web yang mereka bina. Ini kerana kebanyakkan golongan ini tidak memahami kaedah yang digunakan dalam membuat dan menentukan apakah kelas yang sesuai untuk digunakan dalam tugasan mereka. Maka dalam entri ini aku tulis sedikit nota kepada sesi tersebut.

HTML

HTML ada sejarahnya tersendiri, daripada tahun 90an sehingga kini terdapat 5 versi utama yang telah bertukar daripada sekadar satu protokol yang hanya mampu mengeluarkan tulisan secara asas sehingga mampu menjalankan canvas sendiri seperti memainkan video dan audio tanpa memerlukan library tambahan seperti Flash.

Perkongsian diteruskan dengan memperkenalkan secara terperinci tentang struktur asas sesebuah fail HTML.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>OST Grid Training</title>
    <meta name="description" content="OST's grid styling training">
    <meta name="keyword" content="OST, training, grid">
    <meta name="author" content="OST">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="icon" type="image/png" href="favicon.png">
    <link rel="apple-touch-icon" href="icon.png">
</head>
<body>

</body>
</html>

Doctype

Doctype mempunyai dua jenis versi. Versi HTML 4 dan 5. Untuk HTML 4, mempunyai 3 jenis doctype. Tetapi untuk HTML 5 hanya ada satu jenis sahaja iaitu <!doctype html> (syukur). Tugas utamanya adalah untuk memberitahu kepada pelayar internet anda apakah jenis dokumen yang sedang dibuka.<

<HTML>

Tag HTML adalah antara sebagai pemula kepada dokumen HTML. Sebenarnya untuk pelayar internet yang moden, tidak wajib untuk meletakkan tag HTML kerana pelayar internet anda akan menambahnya secara automatik tetapi tiada ada baiknya anda meletakkan tag HTML kerana memberi ruang untuk pelayar internet cuba membaiki tag HTML yang hilang selalunya akan menjadikan dokumen HTML tersebut akan mempunyai masalah untuk kes cross browser.

lang=”en”

Ini adalah untuk memberitahu kepada pelayar internet bahawa dokumen ini ditulis dalam bahasa inggeris. Jika anda mahukan di dalam bahasa Malaysia, maka gunakan ms_MY. Kesannya dapat dilihat apabila pelayar internet moden seperti Chrome mencadangkan untuk membuat pentafsiran bahasa secara automatik. Tidak wajib tetapi tiada salahnya jadikan sebagai satu standart.

<HEAD>

HEAD adalah di mana perkara yang akan dibaca dan diselesaikan terlebih dahulu dan akan dibaca oleh robot terlebih dahulu sebelum masuk ke bahagian lain. Antara perkara yang dimasukkan ke dalam HEAD adalah META, TITLE dan LINK.

<META>

META atau metadata adalah di antara data yang akan digunakan oleh enjin carian untuk membuat pengiraan bagi tujuan SEO dan SERP. Terdapat banyak contoh data META yang boleh dimasukkan ke dalam HEAD yang mempunyai tugas tertentu.

<TITLE>

Apa yang anda tulis disini akan dikeluarkan di tab pelayar internet anda. Juga untuk tugas SEO.

<LINK>

LINK adalah pautan kepada sebarang jenis dokumen luar. Selalunya digunakan untuk memanggil fail CSS masuk ke dalam fail HTML yang asal.

<BODY>

Ini adalah di mana segala perkara yang mahu di paparkan kepada pengguna diletakkan.

CSS

Jika HTML itu boleh dikatakan sebagai dinding rumah, maka tugas CSS adalah untuk mencantikkan rupanya seperti meletakkan jenis pintu, jenis tingkap, warna cat, saiz frame gambar, permaidani, tile, dan dengan menggunakan CSS versi 3, arah putaran kipas pun boleh ditentukan menggunakan CSS animation.

Tiga kaedah yang boleh digunakan untuk mencantikkan HTML adalah:

  1. Elemen Tag
  2. Class
  3. Id
h1 {
    font-size: 24px;
}

.my-class {
    display: flex;
}

#my-id {
    display: none;
}

Dan di dalam perkongsian ada di terangkan penggunaan @media sebagai contoh penggunaan CSS3 dalam proses membuat laman yang menyokong kemampuan untuk responsive.

.ost-2 {
    float: left;
    width: 50%;
}

@media only screen and (min-width: 601px) and (max-width: 800px) {
    .ost-2 {
        width: 100%;
    }
}

Mungkin di lain masa boleh diterapkan pula penggunaan SASS atau LESS untuk menjadikan lebih mudah difahami seperti ini:

.ost-2 {
    float: left;
    width: 50%;
    @media only screen and (min-width: 601px) and (max-width: 800px) {
        width: 100%;
    }
}

Sempat juga kelas masuk ke dalam pengenalan Twitter Bootstrap selepas mereka memahami kaedah yang digunakan di dalam Bootstrap untuk membuat class seperti col-md-6, col-sm-12.

Taman: Kaedah Potong Dahan Pokok

Pokok yang ditanam kadang-kala perlu dipotong atau dicantas dahannya sama ada besar atau kecil untuk memastikan tumbesaran pokok dalam keadaan terkawal. Lebih lagi pokok seperti Mulberry yang mempunyai kadar tumbesaran yang laju. Sebab lain untuk mencantas pokok adalah disebabkan untuk memberikan pokok tersebut tekanan dan menyebabkannya berbunga pada pucuk baru selepas di cantas. Dalam kes pokok Mulberry, kedua-dua sebab ini diambil kir kerana buah akan terbentuk di hujung dahan dan dahan yang tinggi menyukarkan untuk memetik buah.

Terdapat dua kaedah mencantas yang biasa aku gunakan iaitu:

  1. Satu cantasan.
  2. Dua cantasan.

Satu Cantasan

Kaedah satu cantasan ini adalah kaedah paling biasa digunakan. Terutamanya kepada dahan yang kecil. Sepertimana namanya, hanya ada satu cantasan kepada dahan pokok yang akan mencantas dahan tersebut.

satu cantasan dahan pokok

Seperti gambar di atas, cantasan dibuat di garisan hitam iaitu memotong terus dahan pokok tersebut. Cantasan ini tidak sesuai untuk dahan yang bersaiz besar ataupun panjang kerana tekanan yang terhasil semasa pemotongan boleh menyebabkan kulit pokok di bahagian bawah akan mudah terkoyak melebihi keperluan seperti yang ditunjukkan dengan garisan jingga.

Ini menyebabkan tekanan yang tidak diperlukan dikenakan kepada pokok dan meningkatkan kadar jangkitan pada pokok kerana fungsi kulit pokok adalah seperti kulit manusia iaitu sebagai lapisan pertahanan paling luar.

Jika berlaku kes di mana perlu memotong dahan yang besar ataupun panjang, maka aku cadangkan kaedah dua cantasan digunakan.

Dua Cantasan

Seperti namanya, kaedah dua cantasan memerlukan pengguna membuat dua kali potongan. Iaitu satu potongan penuh dan satu potongan separa.

dua cantasan dahan pokok

Kaedah ini dimulakan dengan membuat satu potongan kecil (1/3 hingga 1/2 daripada saiz dahan) daripada bawah dahan seperti mana garisan kuning dalam gambar di bawah. Kemudian kita perlu membuat potongan terus dengan jarak 2 hingga 3  inci lebih tinggi daripada potongan pertama.

Secara teorinya, dengan menggunakan kaedah ini tekanan yang menyebabkan kulit pokok terkoyak semasa dahan hampir terpotong tidak berlaku kerana kulit pokok di bahagian bawah dahan telah dipotong terlebih dahulu dan akan dahan akan terpatah pada garisan jingga.

Kesannya adalah potongan yang lebih kemas dan tidak memberikan tekanan yang tidak perlu kepada pokok dan mengurangkan luas permukaan yang terbuka kepada jangkitan.

Tambahan

Kedua-dua kaedah cantasan ini boleh dipraktikkan dengan menggunakan gergaji manual mahupun gergaji elektrik.

Akuarium: Pam Udara

akuarium

Adakah pam udara diperlukan ke dalam setiap jenis akuarium dan apakah tugas sebenarnya di dalam ekosistem akuarium?

Tugas utama pam udara adalah untuk membekalkan oksigen terlarut yang amat penting dan diperlukan ke dalam air untuk digunakan oleh ikan ataupun hidupan akuatik yang lainnya untuk bernafas. Tidak dinafikan ada sesetengah ikan terutamanya ‘ikan kampung’ seperti puyu dan sepat mampu untuk mengambil oksigen secara terus daripada permukaan air tetapi kadar oksigen terlarut di dalam air yang mencukupi juga adalah penting untuk memastikan ekosistem akuarium tersebut berjalan dengan selamat. Ini kerana di dalam akuarium bukan hanya ada ikan sahaja tetapi lebih daripada itu.

Kadar oksigen terlarut sebenarnya tidak sama antara satu ekosistem dengan ekosistem yang sama. Boleh berubah di atas beberapa sebab seperti tekanan udara dan suhu air.

Suhu Air

Semakin tinggi suhu air, semakin kurang oksigen terlarut di dalam air. Apabila kita lihat dalam konteks ekosistem akuarium di Malaysia dengan suhu yang sekitar 28-30 darjah Celsius, boleh kita mengatakan bahawa kandungan oksigen terlarut di dalam air agak rendah berbanding mereka yang menggunakan penyejuk yang akan merendahkan suhu air kepada 25 darjah Celsius. Antara kaedah yang boleh di buat dalam meningkatkan oksigen terlarut di dalam akuarium adalah dengan menggunakan pam udara.

Pam udara secara mekanikal akan mengepam udara masuk daripada luar ke dalam akuarium yang dibantu dengan batu angin. Batu angin akan mengecilkan saiz udara secara individu yang akan meningkatkan luas permukaan udara yang terdedah kepada air dan membantu meningkatkan kadar kelarutan oksigen ke dalam air.

Tetapi untuk menjawab adakah semua ekosistem akuarium memerlukan pam udara, jawapannya bergantung kepada beberapa keperluan seperti:

  • Jumlah hidupan
  • Jumlah pokok hidup
  • Jumlah bahan organik mereput
  • Pergerakkan air

Jumlah Hidupan

Jumlah hidupan fauna di dalam sebuah akuarium amat mempengaruhi keperluan pam udara di dalam akuarium. Ini kerana setiap hidupan di dalam akuarium memerlukan oksigen untuk hidup. Walaupun bukan ikan, tetapi udang, siput, ketam, cacing dan bakteria juga memerlukan oksigen terlarut untuk terus hidup. Maka jika ikan sering dilihat hanya duduk di atas permukaan air untuk menghirup udara daripada luar maka dicadangkan untuk menggunakan pam udara.

Tetapi bergantung kembali kepada jenis ikan. Ada ikan yang memang suka bermain di atas permukaan air seperti guppy.

Jumlah Pokok Hidup

Pokok hidup dapat membantu dalam menghasilkan oksigen terlarut di dalam air semasa proses fotosintesis. Jika akuarium tersebut mempunyai kadar pokok hidup yang mencukupi, pam udara tidak diperlukan kerana oksigen terlarut sudah cukup banyak tetapi kembali semula kepada suhu air, kemungkinan walaupun pokok hidup ada dalam kuantiti yang banyak namun oksigen terlarut tidak dapat di simpan di dalam air disebabkan suhu air yang tinggi.

Dalam kes ikan yang tidak sesuai diletakkan pokok hidup seperti ikan emas, maka pam udara adalah amat penting. Boleh dikatakan sebagai wajib.

Jumlah Bahan Organik Mereput

Dalam bahasa paling mudah, tahi ikan atau daun pokok yang mati. Semua ini adalah bahan organik yang mereput. Apabila sesuatu bahan mereput, oksigen diperlukan. Jika tidak proses reputan tersebut tidak menjadi dengan lancar. Perkara ini dapat dikurangkan dengan membuat selengaraan yang kerap untuk membuang bahan organik keluar daripada akuarium. Bahan organik mereput yang tinggi juga akan meningkatkan kehadiran ammonia dan CO2 yang tinggi di dalam air dan akan mengancam keselamatan hidupan akuatik.

Ini juga dapat dibantu dengan mempunyai filter yang bagus.

Pergerakan Air

Pergerakan air merujuk kepada pergerakan air di permukaan dan juga di bawah permukaan air. Tujuannya adalah dengan mendapat pergerakan permukaan air yang baik, kebarangkalian untuk oksigen terlarut hadir adalah lebih tinggi daripada permukaan air yang tidak bergerak. Dan pergerakan air di bawah permukaan air adalah untuk menyebarkan oksigen terlarut tadi kepada keseluruhan akuarium. Pergerakan air boleh dibantu dengan menggunakan lily pipe atau menjadikan pengeluaran air daripada filter diletakkan di permukaan air.

Kesimpulan

Oksigen terlarut adalah penting kepada hidupan akuatik. Memastikan oksigen terlarut mencukupi adalah penting untuk memastikan hidupan akuatik tidak mati.