![Manzil.com][1]

Bismillah.

Alhamdulillah, segala puji hanyalah untuk-Nya.

Assalamualaikum w.b.t semua, diharap semua berada dalam keadaan sihat sejahtera hendak-Nya.

Beberapa minggu yang lepas, saya telah pun melancarkan aplikasi web __Manzil__ di laman https://quran-manzil.com . Alhamdulillah, rata rata maklumbalas yang saya terima semuanya positif belaka.

Di dalam entri kali ini, saya ingin berkongsikan pada anda semua mengapa aplikasi web __Manzil__ ini diwujudkan.

### Dari mana wujudnya idea untuk membangunkan Manzil?

<blockquote class="twitter-tweet"><p lang="in" dir="ltr">Bismillah.<br><br>Aku sedang usahakan satu aplikasi web yang mengandungi senarai ayat-ayat Manzil, which aku consume audio data direct from <a href="https://t.co/gqGXB6Rf4v">https://t.co/gqGXB6Rf4v</a> API.<br><br>There&#39;s a reason of why I&#39;m doing this by the way. <a href="https://t.co/O7xTeQyVQP">pic.twitter.com/O7xTeQyVQP</a></p>&mdash; fitri. (@fvtrx) <a href="https://twitter.com/fvtrx/status/1753456288208732608?ref_src=twsrc%5Etfw">February 2, 2024</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Secara jujurnya, idea aplikasi web __Manzil__ ini terbit dari pengalaman saya selaku pelajar SMKA dimana di sekolah dahulu kami sering terlibat dengan sesi bacaan ayat-ayat Manzil setiap hari Khamis malam Jumaat di surau pada minggu kedua dan keempat kalau tak silap saya.

Dan saya juga pernah mengalami pengalaman berhadapan dengan perkara-perkara mistik di mana ia berlaku di dalam persekitaran keluarga saya.

Justeru itu, ayat-ayat __Manzil__ ini banyak membantu saya mengatasi perkara-perkara mistik dengan melalui beberapa siri sesi *ruqyah* yang pernah saya hadapi. 

Secara umumnya, ayat-ayat Manzil ini merupakan himpunan ayat-ayat Al-Quran yang telah diajar oleh Rasullullah S.A.W kepada para sahabat sebagai ayat syifa', yakni penawar dan ubat dari beberapa jenis penyakit rohani dan jasmani serta mampu melindungi diri dari sebarang gangguan jin dan sihir.

Dan dari pengalaman-pengalaman itulah, tercetusnya idea dan inisiatif saya untuk membangunkan aplikasi web __Manzil__ ini.

### Bagaimana saya membangunkan Manzil?

Saya membangunkan [quran-manzil.com][2] dengan menggunakan Next.js sebagai *front-end framework* bagi paparan *user interface* (UI) dan juga Redux-saga sebagai *state management provider* untuk saya stor data dari [quran.com][3] API ke dalam *global state* yang saya set di dalam codebase saya.

Saya tidak terlalu memikirkan terlalu kompleks untuk bahagian UI nya. Oleh demikian, UI yang anda lihat di dalam [quran-manzil.com][2] sekarang sangat lah "*simple*" hasilnya. 

Ini kerana saya ingin memastikan fungsi utama __Manzil__ iaitu dapat memainkan *audio file* yang saya peroleh dari [quran.com][3] API terus dari *audio player library* yang saya gunakan dari [`react-h5-audio-player`][4]. 

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Another enhancement that I did for <a href="https://t.co/SmJbdokEMN">https://t.co/SmJbdokEMN</a> this morning.<br><br>User now able to open the <a href="https://t.co/W9PKpWlg5e">https://t.co/W9PKpWlg5e</a> webpage directly from a modal within the app, in order to ease user on navigating through each verses in Manzil. <a href="https://t.co/44YgXpUaTZ">pic.twitter.com/44YgXpUaTZ</a></p>&mdash; fitri. (@fvtrx) <a href="https://twitter.com/fvtrx/status/1755394029511184614?ref_src=twsrc%5Etfw">February 8, 2024</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Alhamdulillah, setelah beberapa siri penambahbaikan. Aplikasi web [quran-manzil.com][2] kini boleh diakses secara umum di semua *web browser* pilihan anda.

### Akhir kata.

Sekiranya anda seorang *web atau front-end developer* yang berhajat untuk menambahbaik *feature* yang sedia ada di [quran-manzil.com][2]. Anda boleh kemukakan cadangan atau *raise* sahaja PR (Pull request) di repo [GitHub][5] saya. 

Sekiranya cadangan anda berjaya melepasi penilaian saya, maka saya akan masukkan PR anda untuk *deployment* [quran-manzil.com][2] yang seterusnya. Dan saya juga akan menambah nama anda untuk dimasukkan di dalam "*contributor list*" di *repository* nanti.

--------

Sekian sahaja dari saya.

Terima kasih kerana sudi singgah dan meluangkan masa di ruangan entri kali ini.

Sampai bertemu kembali, In Sha Allah.

[1]: //images.ctfassets.net/xytlyfu15zue/41RHFKDRZywEYX3he1xQrA/cf8f00b843134ebc22770af5c60a635a/Screenshot_2024-02-07_at_2.02.14_PM.png
[2]: https://quran-manzil.com "quran-manzil.com"
[3]: https://quran.com
[4]: https://github.com/lhz516/react-h5-audio-player
[5]: https://github.com/fvtrx/manzil-nextjs-fe

Manzil.com

Manzil: Sebuah himpunan ayat-ayat Al-Quran yang telah diajar oleh Rasullullah S.A.W kepada para sahabat sebagai ayat syifa, yakni penawar. Pendinding buat jiwa dan penguat rohani.

Kenapa Manzil.com diwujudkan?

![Fitri X Ain Solemnization][1]

<blockquote>
وَخَلَقْنَـٰكُمْ أَزْوَٰجًۭا <br>
Dan Kami menciptakan kamu berpasang-pasangan <br>
- Surah An-Naba': 8
</blockquote>

Alhamdulillah, segala puji hanyalah untuk-Nya.

Dah lama tak menulis di ruangan blog saya ini. Nampak sangat berhabuknya 
😙💨.

Pejam celik, sedar tak sedar dah nak masuk 3 bulan lamanya saya sejak saya mendirikan rumahtangga pada September lalu.

<blockquote class="twitter-tweet"><p lang="qme" dir="ltr">❤️💕✨ <a href="https://t.co/OumNYCZEqG">pic.twitter.com/OumNYCZEqG</a></p>&mdash; fitri. (@fvtrx) <a href="https://twitter.com/fvtrx/status/1701439573803549180?ref_src=twsrc%5Etfw">September 12, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

[embed-tweet](https://twitter.com/fvtrx/status/1701439573803549180)

Dan saya bersyukur, kerana saya kini bergelar seorang suami kepada isteri saya yang sangat baik budi pekertinya. Indah tutur kata nya. Dan juga seorang yang matang dalam pemikiran dan pendiriannya.

Jika anda bertanya bagaimana rasanya kini bergelar seorang suami, jujur saya ungkapkan yang saya gembira dan terasa bahagia.

## Momen perkenalan pertama bersama isteri.

Perkenalan saya bersama isteri, melangkaui tempoh selama 5 tahun durasinya.

Saya merupakan bekas pelajar di SMKA Bandar Penawar yang terletak di daerah Kota Tinggi, Johor. Tapi jangan salah sangka, saya bukan lah orang yang anda boleh anggap sebagai seorang yang *"alim"* dalam bidang agama walaupun saya datang dari latar belakang sekolah yang memang menitikberatkan tentang "*biah*" (suasana) keagamaan.

Isteri saya pula, adalah bekas pelajar di SMKA Maahad Muar yang terletak di daerah Muar. Kalau anda penggemar industri nasyid sekolah, semestinya anda akan mengenali dengan sekolah yang sinonim dengan kumpulan nasyid Izdan.

Ramai juga yang bertanyakan kepada saya:

<blockquote>
"Macam mana sorang dekat SMKA Bandar Penawar dekat ceruk Kota Tinggi, and sorang lagi dekat SMKA Maahad Muar boleh berkenalan and bercinta pulak ni?"
</blockquote>

Memang benarlah bagai di kata. Kalau ditakdirkan jodoh, jauh dekat walau bagaimana sekalipun, pasti akan bertemu jua.

Pertama kali mata saya bertentangan dengan wajah isteri saya, adalah ketika mana kami berdua menyertai satu program kepimpinan pelajar iaitu Nadwah Kepemimpinan Islam Sekolah-Sekolah SMKA Negeri Johor sekitar tahun 2013-2014, yang berlangsung di SMKA Johor Bahru ketika itu. 

Ironinya, isteri saya pada ketika itu tidak pernah menyedari akan kewujudan dan keberadaan saya di dalam program itu. Dan saya, hanya memandang beliau dari jarak jauh sambil berkata di dalam hati:

<blockquote>
"Comel juga dia ni. Kecil molek saja orangnya."
</blockquote>

Mana tak nya. Beliau antara yang berdiri di barisan hadapan sekali ketika kontinjen SMKA Maahad Muar mula mula melangkah masuk ke dalam dewan Umar Abd Aziz, SMKA Johor Bahru ketika itu. Yelah, sekolah mereka jauh. Mengambil masa dalam 2-3 jam untuk sampai ke bandar Johor Bahru ketika itu. Beliau pula antara yang "terendah" ketinggian nya, jadi mestilah dia berada di barisan hadapan (*harap tak kena tidur luar lah nanti*) 🤪.

Kiranya, ketika zaman sekolah kami berdua. Kami tidak memulakan apa apa perbualan ketika program tersebut. Tak pernah bertemu dan bersua muka depan-depan sepanjang program berlangsung. Yelah, program sekolah kan? Tak manis kalau terlihat pelajar lelaki dan pelajar wanita berbual-bual atau cuba bermesraan di hadapan guru-guru ketika itu.

Sampai habis era persekolahan, saya dan isteri masih tidak pernah berhubung dengan apa jua cara sekalipun di seluruh platform media sosial yang ada ketika itu.

Habis tu, macam mana kami berdua boleh menjalinkan hubungan yang akhirnya membawa ke jinjang perkahwinan? 🤔

## Sampai di sini sahaja dahulu

Setakat ini, itu saja yang saya boleh kongsikan terlebih dahulu. Ada rezeki, nanti akan saya kongsikan di entri seterusnya jika berkelapangan. Ceritanya masih panjang kalau ikutkan. Kena *brainstorm* balik ayat and kosa-kata di samping menyingkap kembali momen-momen lama untuk menjadikan kisah nya lebih menarik. Agituhhh 🤣.

Akan tetapi, saya akan cuba nukilkan kisah saya dan isteri dengan sebaik mungkin di ruangan ini. Kalau bukan untuk anda, sekurang-kurangnya ia boleh jadi tempat untuk saya baca semula dan kenang kembali segala momen-momen yang kami berdua lalui sebagai pasangan suami isteri.

--------

Sekian sahaja dari saya.

Terima kasih kerana sudi singgah dan meluangkan masa di ruangan entri kali ini.

Sampai bertemu kembali, In Sha Allah.

__Abdullah Fitri__

[1]: //images.ctfassets.net/xytlyfu15zue/7ydEK5iWYY2Er4Y3tsRBej/4079857243ec9892593addf7e69634db/375866620_6740162636040520_4174514163690907482_n.jpg

Fitri X Ain

Alhamdulillah, I got married with the "right" person that I've been looking for a long time...

Story: Finally! I'm married 🥰 (Part 1)

![Macbook with Xcode opened](//images.ctfassets.net/xytlyfu15zue/41nDlFt1Oy5jzr9VAhqOjM/07194f79a95115d693cfd51856e4dea7/F3PQdoebwAA8ms8.jpeg)

Well, hello there!

It's been a while since I last wrote anything on my website here. Quite dusty a bit here and there, doesn't it? 😂 

But anyways, it's good to be back.

Throughout my so-called *hiatus* due to daily work and other stuff, I would like to share with all of you regarding what I would call a __big change__ in my career pathway.

Without further ado, let us begin.

## Overview.

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Day 20 of becoming an iOS Mobile Developer ✅ <a href="https://t.co/S3ccJKB9oi">pic.twitter.com/S3ccJKB9oi</a></p>&mdash; fitri. (@fvtrx) <a href="https://twitter.com/fvtrx/status/1689923503238324225?ref_src=twsrc%5Etfw">August 11, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

[embed-tweet](https://twitter.com/fvtrx/status/1689923503238324225?ref_src=twsrc%5Etfw)

For the past few months, I've been learning Swift language as the pre-requisites for me to kickstart on doing iOS app development. The reason on why I have decided to learn Swift is that I've been assigned to a project which required me to get my hands on developing a feature on top of a native iOS environment.

Most of my friends and colleagues knew that I kickstarted my journey as a mobile developer which focuses more on the hybrid environment itself *(technically it's the same role of a __Front-End developer__, only in hard mode they say)* by using JavaScript frameworks such as React, Vue and Angular. And my forte has always been revolved around React and Vue.

So when I was assigned to take up the iOS development tasks for the project, I knew that I had to take the leap of faith. To migrate yourself from a JavaScript to Swift and embark myself into a journey of becoming an iOS developer was never an easy feat.

But thankfully, all of my seniors were helpful as they kept gave me motivations for me to push through.

Thus, I began my journey of becoming an iOS developer by learning Swift from YouTube.

## Learning Swift with CodeWithChris.

<iframe width="560" height="315" src="https://www.youtube.com/embed/HJDCXdhQaP0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

For those who are just like me, trying to find their way around on how to start learning iOS app development. Especially using Swift, since Swift already overtaking Objective-C for the past 5 years if I'm not mistaken. I suggest to try lookup [@CodeWithChris](https://www.youtube.com/@CodeWithChris) channel at YouTube. 

I strongly recommended his channel as his teaching method was easy to follow. His approach on each subject/topics related to the iOS app development was very fun and engaging to watch, which makes me learn more attentively than usual. He will cover on the most part needed from setting up your development environment until the design pattern that could be taken when deciding on your mobile app development.

There are also a lot of positive reviews from people who had been following his courses via his YouTube channel for learning iOS app development using Swift.

## Reflection

In a nutshell, trying to survive in the fast pace of IT world was quite challenging until this day. Everyday is a learning process. You have to learn, adapt, unlearn and repeat all the steps once again. Because you'll never knew what would awaits you in the future. It could be something that you've learnt for the past 5-10 years is no longer relevant in the demands of IT market at the moment.

Therefore, it's no harm for us to try on new things. New knowledge, new environment, or it could be anything. Consider it as an opportunity for you to grow and nurturing yourself to a much matured, and more resourceful as a person yourself.

Wish me luck on my next journey towards doing native iOS app development, folks!

-----------------------------------------------------

That's all from me.

Thanks again, for spending your time with this entry.
More will be coming on soon.

__Abdullah Fitri__

Macbook with Xcode opened

A journey of migrating from React JS developer, to become a native iOS developer.

Story: How I shift from JavaScript to Swift.

![MGF01042022 SEMPADAN-BUKA25-1](//images.ctfassets.net/xytlyfu15zue/58jGDyaDxBraevJpya0O4d/f56f16cd296b86e7227b88a89497003f/MGF01042022_SEMPADAN-BUKA25-1.webp)

              Image credit: Malaysian Gazette (Hazrol Zainal).

__1 April 2022__ bakal tercatat di dalam lembaran sejarah sebagai salah satu peristiwa yang penting di dalam landskap negara kita, Malaysia.

Setelah 2 tahun hampir lamanya, kita bertarung dengan musuh yang berselindung dalam selimut. Di mana kita sendiri pun tidak mampu lihat ia melalui pandangan mata kasar kita.

COVID-19 sememangnya meragut kehidupan kita semua, sejak ia mula menjejakkan kaki nya ke tanah air kita.

Setelah 2 tahun lamanya, mereka yang berkelana di negara seberang tambak.. tidak dapat pulang ke tanah air tercinta dek kerana terikat dengan prosedur keselamatan yang telah ditetapkan oleh pihak kerajaan di sana.

2 tahun itu, bukanlah suatu tempoh masa yang singkat.

Ada yang kehilangan ahli keluarga. Ada yang bertemu cinta. 

Ada yang menempa kejayaan, dan ada juga yang dilanda ujian yang begitu hebat.

Namun, kegembiraan dan nikmat yang telah terjadi pada 1 April 2022 ini.. harus kita raikan dengan sebaiknya.

## Sempadan luar negara dibuka sepenuhnya

Seperti mana yang kita ketahui, tepat jam 12 malam semalam. Sempadan darat Malaysia-Singapura telah pun dibuka sepenuhnya.

<blockquote class="twitter-tweet"><p lang="in" dir="ltr">Situasi pada detik 12 tengah malam tadi apabila sempadan darat Malaysia- Singapura dibuka sepenuhnya.<br><br>Video : Orang Awam <a href="https://t.co/0k9ZpXaM8Y">pic.twitter.com/0k9ZpXaM8Y</a></p>&mdash; Mohd Redzuan Abdul Manap (@redzuanNewsMPB) <a href="https://twitter.com/redzuanNewsMPB/status/1509673664429518848?ref_src=twsrc%5Etfw">March 31, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 

[Twitter:@redzuanNewsMPB](https://twitter.com/redzuanNewsMPB/status/1509673664429518848)

Ternyata, ia mengundang pelbagai reaksi dari para netizen. Dan majoriti daripadanya, mengucapkan "selamat pulang ke tanah air tercinta" buat perantau-perantau ini yang setelah 2 tahun lamanya terkandas di negeri seberang tambak.

Dan pada 1 April 2022, tepat jam 12 malam. Bertebaran lah perantau-perantau ini pulang ke rumah masing-masing. Bertemu ahli keluarga yang tercinta, anak isteri tersayang yang sekian lama menanti kepulangan mereka ini.

Alhamdulillah.

## Solat berjemaah di masjid, kini dirapatkan saf nya

Bagaikan sebuah anugerah terindah menjelang tibanya Ramadhan Al-Mubarak, bulan yang penuh keberkatan dari Dia yang Maha Penyayang.

1 April 2022 juga mempamerkan kesemua masjid dan surau telah pun memulakan prosedur untuk merapatkan semula saf bagi melangsungkan sesi solat berjemaah untuk kelima-lima waktu.

<blockquote class="twitter-tweet"><p lang="in" dir="ltr">PUTRAJAYA : Solat Jumaat berjemaah dengan saf dirapatkan di Masjid Tuanku Mizan Zainal Abidin di sini diimamkan oleh Ustaz Rodhi Abd Ghani.<br><br>📸 Amirul Azmi / BERNAMA <a href="https://t.co/RWMpuTlDLQ">pic.twitter.com/RWMpuTlDLQ</a></p>&mdash; BERNAMA TV 🇲🇾 (@BernamaTV) <a href="https://twitter.com/BernamaTV/status/1509779004139528194?ref_src=twsrc%5Etfw">April 1, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 

[Twitter:@BernamaTV](https://twitter.com/BernamaTV/status/1509779004139528194)

Jujurnya, ia sebuah hari yang sangat bermakna di mana perasaannya bercampur aduk. 

Gembira, sebak, terharu. Ia nya bercampur aduk.

<blockquote class="twitter-tweet"><p lang="in" dir="ltr">Setelah sekian lama, saf kembali dirapatkan.<br><br>Dan saya yakin, ramai yang merindukan suasana solat berjemaah secara rapat.<br><br>It&#39;s a happy and emotional day for all of us.<br><br>Moga Allah lindung.</p>&mdash; fitri. (@fvtrx) <a href="https://twitter.com/fvtrx/status/1509777414800359425?ref_src=twsrc%5Etfw">April 1, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 

[Twitter:@fvtrx](https://twitter.com/fvtrx/status/1509777414800359425)

Dan saya pasti, majoriti dari anda amat merindukan suasana solat berjemaah secara beramai-ramai di mana saf nya dirapatkan dan diluruskan.. dan saya juga turut tidak terkecuali.

Alhamdulillah, syukur kehadrat-Nya. Kini kita akan kembali kepada suasana itu, walaupun ia mungkin akan mengambil masa untuk kita menyesuaikan diri semula.

Walau bagaimanapun, SOP dan pelaksanaan penjagaan kendiri masih perlu dititikberatkan supaya kita dapat membendung diri kita dari dijangkiti wabak COVID-19 yang masih berleluasa penyebarannya.

## Menjelang Ramadhan Al-Mubarak

Di kesempatan ini, saya ingin mengucapkan kepada semua yang membaca artikel ini:

<blockquote><p lang="in" dir="ltr">Selamat menjalani ibadah puasa di bulan Ramadhan, bulan yang penuh keberkatan dan maghfirah.</p></blockquote> 

Semoga amalan dan ibadah Ramadhan kita pada tahun ini, In Sha Allah diterima dan di angkat darjatnya oleh Allah S.W.T

Dan semoga Ramadhan kali ini, membawa 1001 makna dan kegembiraan kepada anda semua hendak-Nya. Ameen In Sha Allah.

Salam Ramadhan Al-Mubarak, dari saya.
__Abdullah Fitri__

Credit to: MalaysianGzette (Hazrol Zainal)

MGF01042022 SEMPADAN-BUKA25-1

Terlalu banyak nikmat, dan juga kegembiraan yang terlakar.

Hari ini dalam sejarah: 1 April 2022

![Takut - idgitaf (Music Video cover)](//images.ctfassets.net/xytlyfu15zue/2K5EmBE4b02gW05X2oaoLs/c7bc6fa05a0e7222df74dbe555657f44/maxresdefault.jpg)

<blockquote>
`Lika-liku perjalanan <br>
 Ku terjebak sendirian <br>
 Tumbuh dari kebaikan <br>
 Bangkit dari kesalahan`
- idgitaf, 2022
</blockquote>

## Cerita semalam

Semalam, ketika di dalam perjalanan saya ke pejabat dengan menaiki pengangkutan awam (LRT). Saya memakai *earbuds* seperti biasa, kerana ia seolah-olah menjadi rutin harian saya untuk memakai *earbuds* sejurus sahaja kaki saya menlangkah masuk ke dalam LRT, sambil memasang aplikasi *Spotify* di telefon pintar saya.

Untuk pengetahuan anda yang sedang membaca, saya suka memainkan muzik secara rawak. Ia membolehkan saya untuk menerokai jenis-jenis lagu yang mungkin saya tak pernah dengar dan besar kemungkinan saya boleh menemui seleksi lagu-lagu yang bagus untuk ditambah ke dalam senarai lagu kegemaran saya.

Selang beberapa minit, ke udara sebuah lagu ini menerjah masuk ke dalam telinga saya dan ia terus menusuk ke dalam jiwa saya. Tanpa mengambil masa yang panjang, saya terus memandang ke arah skrin telefon saya, sebab saya ingin tahu tajuk lagu yang sedang bermain di *Spotify* saya ketika ini.

Tajuk lagu yang sedang saya dengar ketika itu ialah, __Takut__ yang dipersembahkan oleh seorang penyanyi yang berasal dari negara jiran, iaitu Indonesia yang saya rasa ia merupakan nama pentas beliau iaitu __*Idgitaf*__

## Apa yang membuatkan lagu ini terus menusuk ke jiwa saya?

<blockquote class="twitter-tweet"><p lang="in" dir="ltr">Hanya Tuhan sahaja yang tahu, kenapa aku boleh menangis dengar lagu ni.<br><br>And I agreed, it&#39;s okay to be scared sometimes..<a href="https://t.co/225BAP4Rv0">https://t.co/225BAP4Rv0</a></p>&mdash; fitri. (@fvtrx) <a href="https://twitter.com/fvtrx/status/1506089570966056966?ref_src=twsrc%5Etfw">March 22, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 

[embed-tweet](https://twitter.com/fvtrx/status/1506089570966056966?ref_src=twsrc%5Etfw)

Ketika saya mengamati bait-bait lirik yang dilontarkan di dalam lagu __Takut__ ini, tanpa saya sedar.. air mata saya tiba-tiba sahaja bergelinang lalu menitis ke pipi seperti mana yang saya kongsikan melalui ciapan saya di Twitter.

Saya merasakan lagu ini, sangat dekat dengan saya. Ia bagai bercerita tentang diri saya. Seolah olah, ia memahami gelora yang melanda jiwa saya yang kian meningkat dewasa ketika ini.

Terutamanya di bahagian lirik ini:

<blockquote>
`Pertengahan dua lima Selanjutnya bagaimana? <br>
Banyak mimpi yang terkubur <br>
Mengorbankan waktu tidur <br>
Ku tak tahu apa lagi yang 'kan kukejar`
</blockquote>

Ironinya, umur saya telah pun menginjak ke usia 25 pada tahun 2022 ini.

Saya mengalirkan air mata, sehingga tamat lagu ini. Tidak lah sampai teresak-esak. Cuma ia mengalir dan cukup untuk membuatkan saya sebak.

## Dan, saya mula takut.
<blockquote>
`Takut tambah dewasa <br>
Takut aku kecewa <br>
Takut tak seindah yang kukira <br>
Takut tambah dewasa <br>
Takut aku kecewa <br>
Takut tak sekuat yang kukira <br>
Aku tetap bernafas <br>
Meski sering tercekat <br>
Aku tetap bernafas <br>
Meski aku tak merasa bebas`
</blockquote>

Ketika lirik bahagian korus ini berlalu di dalam telinga saya, jujurnya saya merasai emosi yang berselindung di sebalik lirik ini.

Dan ya, jujurnya saya takut menjadi seorang dewasa..

Majoriti daripada kita semua, tak pernah menyangka bahawa kita yang dahulunya tak banyak terfikir tentang masalah-masalah yang bakal kita hadapi ketika meningkatnya dewasa pada usia remaja.

Sebagai contoh, sewaktu kita di alam persekolahan. Masalah-masalah yang mungkin sering melanda di fikiran kita adalah:

- Kerja sekolah masih belum siap
- Balik dari sekolah, nak buat apa
- Outing nak pergi mana (hanya *applicable* pada pelajar asrama)
- Dan masalah-masalah lain...

Dan tanpa kita sedar.. waktu zaman persekolahan kita, sudah begitu lama jauh meninggalkan kita. Jauh ditelan usia.

Kini, saya telah pun menginjak ke usia 25 tahun:

- Saya telah pun memasuki alam pekerjaan. Bekerja setiap hari Isnin hingga Jumaat, bermula jam 9 pagi sehingga 6 petang
- Komitmen hidup saya bertambah (sewa rumah, minyak motor, barang keperluan rumah, bil dan seumpamanya..)
- Kawan-kawan yang dahulunya sama sama berjuang dengan saya, baik di sekolah mahupun di alam universiti. Kini masing-masing sudah ada haluan sendiri. Ada yang dah mula berkahwin, dan ada yang dah dikurniakan cahaya mata.
- Abang sulung saya, kini sudah mempunyai anak lelaki pertamanya. Menjadikan saya mempunyai gelaran "pak cik" ketika ini.
- Adik perempuan saya, yang dahulunya selalu saya dukung ketika beliau baru lahir. Ditatang, dibelai dan dimanja ketika masih kecil lagi. Kini sudah pun memasuki usia remaja nya.
- Saya kini menggalas tanggungjawab sebagai ketua keluarga, kalau dahulunya abang sulung saya yang menjaga makan minum ibu dan adik saya. Kini saya pula yang menggalas tanggungjawab itu.

Justeru itu, saya takut menjadi seorang dewasa..

Takut andai saya kecewakan diri sendiri.

Takut saya kecewakan ahli keluarga saya.

Takut saya kecewakan orang-orang sekeliling yang percayakan terhadap diri saya.

## It's okay to be scared sometimes..

Berasa takut itu, kadangkala ia perlu untuk kita koreksi dan refleksi balik diri kita semula. Untuk bangkit menjadi lebih baik.

Lagu ini mengajar saya untuk berfikir sejenak, bahawa kalau bukan diri kita sendiri yang cuba untuk berfikiran positif terhadap ujian/musibah yang melanda. *We can't expect others to do so for us*. Dan mungkin apa yg kita lalui itu barangkali adalah suatu perkara yang terbaik untuk kita.

Dunia yang sementara ini, bukan lah suatu tempat yang kita perlu kita jangkakan bahawa semua perkara akan menjadi indah belaka. Kerana itulah sifat semulajadi dunia. Penuh ujian dan dugaan.

Dan kita harus sedar, segala aturan dan perancangan kita mungkin tidak akan berjalan lancar seperti yang kita harapkan.

Sebab apa? Sebab adanya perancangan yang telah disusun rapi dan cantik oleh pencipta kita, yakni Allah S.W.T.

Atas asbab itu, kita harus percaya.. bahawa rancangan Dia Yang Maha Pengasih lagi Pemurah, adalah sebaik-baik rancangan.

Wallahu'alam.

### Tonton muzik video penuh di sini 👇
<br>

<iframe width="513" height="315" src="https://www.youtube.com/embed/5TUUg9mU_V0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

---

Sekian sahaja dari saya.

Terima kasih, kerana sudi membaca entri untuk kali ini.

__Abdullah Fitri__


Takut - idgitaf (Music Video cover)

#SelfThoughts: After listening to Takut by @idgitaf

![malaysia-tax-tracker-template-paan][1]

> Adulting is hard, but we can make it easier by sharing the pain together - [`@farhanzainudin`][2]

Jika anda ingin membuat simpanan rekod untuk pengecualian cukai bagi *e-filing* secara mudah lagi sistematik, anda boleh sahaja pergi ke pautan di bawah.

- [```shorturl.at/vAGS3```][3]

Ia adalah sebuah *tax tracker* yang dibangunkan oleh sahabat baik saya, ketika sama sama menjalani pengajian ijazah sewaktu ketika dahulu di Asia Pacific University, Bukit Jalil. Beliau yang saya maksudkan ialah __Mohamad Farhan Bin Zainudin__

![linkedin-paan][4]

Diharapkan dengan adanya *"tax tracker"* ini, ia dapatlah serba sedikit membantu anda *"keep track"* setiap perbelanjaan anda yang boleh dikenakan pengecualian cukai (tax exemption) ketika anda mengisi borang *e-filing* LHDN nanti.

Semoga bermanfaat! Dan jangan lupa untuk serahkan borang *e-filing* anda ke LHDN selewat-lewatnya ```30 April 2022``` bagi kategori individu.

Terima kasih kerana sudi membaca entri kali ini!
Sekian.

__Abdullah Fitri__

[1]: //images.ctfassets.net/xytlyfu15zue/2okaLcnNnnNaQufXiAN2QO/e36a8dda3c5cabf5d58884dd096cdcba/Screen_Shot_2022-03-20_at_6.20.07_PM.png
[2]: https://www.instagram.com/farhanzainudin/ "Paan Zainudin (@farhanzainudin"
[3]: https://mamluk-zephyr.notion.site/40d7f4eec38b432b98fc9a16341062f3?v=cc9e23245b494cca8054d2610a866c65 "Malaysia Tax tracker template (Replace with year 2022)"
[4]: //images.ctfassets.net/xytlyfu15zue/2jVnRl999BoIuII4ZpUK5z/5f80095f2937445bcc0773515681a1e5/Screen_Shot_2022-03-20_at_6.43.16_PM.png

malaysia-tax-tracker-template-paan

Jika ya, anda boleh gunakan "Malaysia Tax Tracker" yang dihasilkan oleh sahabat saya di bawah ini !

Anda nak buat simpanan rekod untuk cukai anda?

![nextjs-tailwindcss-strapi][1]

## Apakah itu *chat-bot* ?

Ringkasnya chatbot ialah aplikasi perisian yang digunakan untuk menjalankan perbualan sembang dalam talian melalui teks atau *text-to-speech*. Ia juga boleh digunakan untuk menggantikan simulasi perbualan sebenar dengan manusia secara langsung. Dan ia telah digunakan dalam pelbagai situasi dan senario, tidak terhad kepada sokongan pelanggan, tempahan tiket, *e-commerce*, e-perbankan dan ciri-ciri lain.

Untuk entri kali ini, saya akan berkongsi kepada anda cara membina pembantu *Chatbot* dengan menggunakan Next.js + CSS Tailwind sebagai *'front-end stack'* dan Strapi API sebagai *headless* CMS.

## Pra-syarat

Sebelum memulakan tutorial ini, pastikan anda:

- Telah memuat turun Node.js (v12 atau v14) di dalam komputer anda - Semak [```pautan```][2] ini untuk mengetahui tentang cara memuat turun dan *install* Node.js di dalam komputer anda
- Pemahaman asas tentang Strapi - Mulakan dengan [```panduan ringkas```][3] ini
- Pengetahuan asas [```Next.js```][4]
- Pengetahuan asas tentang [```Tailwind CSS```][5]

## Apa itu Next.js

Next.js ialah *framework* React yang hebat untuk membina aplikasi yang sangat dinamik. Ia datang dengan `pre-rendering`, `automatic code-splitting` dan banyak ciri hebat lain.

![NextJS][6]

NextJS memberikan para *developers* keupayaan untuk membina aplikasi web dengan keupayaan '*server side rendering*' tanpa konfigurasi tambahan yang memeningkan. Dalam erti kata lain, masa yang diambil untuk memaparkan keseluruhan *web page* akan menjadi lebih pantas berbanding biasa apabila aplikasi tersebut di bina dengan menggunakan NextJS.

## Apa itu Tailwind CSS?

Tailwind CSS ialah *CSS framework* yang mengutamakan utiliti untuk membina antara muka pengguna dengan pantas. Dengan Tailwind CSS, kita hanya perlu menulis kelas CSS secara terus dalam element kelas HTML, tanpa perlu mengimport *external style sheet* atau menggunakan *library* berasingan untuk menghasilkan sesebuah reka bentuk UI.

## Apa itu Strapi?
![strapi-logo][7]

Strapi ialah sebuah *headless CMS* yang dibina secara *open-source* dengan menggunakan Node.js, dimana ia membolehkan kita untuk membina API (application program interface) dan mengurus kandungan web kita dengan lebih mudah, tanpa perlu runsing untuk memikirkan bagaimana hendak membina sebuah sistem CMS itu sendiri dari peringkat awal.

Kini, kita boleh membina API dengan lebih pantas dan menggunakan kandungan data secara terus melalui Strapi dari mana-mana klien API seperti REST API atau GraphQL.

## Sebelum kita mula, *install* aplikasi Strapi terlebih dahulu.

Untuk permulaan, buka __Terminal__ (bagi pengguna Mac) atau __Command Prompt__ (bagi pengguna Windows). Kemudian, taip kod arahan di bawah di dalam __Terminal__/__Command Prompt__ anda dan tekan butang *"Enter"*

> ```npx create-strapi-app YOUR_PROJECT_NAME --quickstart```

P/s: Tukarkan __YOUR_PROJECT_NAME__ kepada nama projek yang bersesuaian dengan anda.

Dengan kod ini, ia akan memuat turun segala pakej yang diperlukan bagi mencipta aplikasi Strapi CMS anda, dan juga ia menyediakan projek anda untuk siap berfungsi dalam persekitaran "local" (boleh berfungsi dari komputer anda sahaja).

Sebaik sahaja selesai, buka *browser* anda dan layari ke URL ```http://localhost:1337/admin``` untuk membuka portal CMS anda sebagai *admin*. Atau anda boleh ke ```http://localhost:1337``` untuk melihat status pelayan (server) Strapi anda.

Gambaran adalah seperti berikut:

- Admin view - anda harus log masuk ke dalam akaun Strapi anda. Klik di [```sini```][8] untuk ketahui dengan lebih lanjut.

![strapi-admin-view][9]

- Server status view
![strapi-server-view][10]

Tahniah, anda kini mempunyai *headless CMS* dan pembina API sendiri dengan menggunakan Strapi!

## Tamat untuk bahagian pertama.

Sampai di sini sahaja terlebih dahulu perkongsian saya. Nantikan bahagian seterusnya untuk entri ini di masa yang akan datang.

Terima kasih kerana sudi membaca!

Sekian sahaja dari saya,
__Abdullah Fitri__

[1]: //images.ctfassets.net/xytlyfu15zue/4vPGm11MThDhBPGPwhm53j/4dba8c827585ddf96b149f5b755b724c/tailwindcss.png
[2]: https://codex.so/how-to-install-the-latest-node-js-npm-and-yarn "How to install latest Node.js via npm or yarn"
[3]: https://strapi.io/documentation/developer-docs/latest/getting-started/quick-start.html "Quick Start - Strapi"
[4]: https://nextjs.org/docs/getting-started "Next JS - Getting Started"
[5]: https://tailwindcss.com/docs "Docs - Tailwind CSS"
[6]: //images.ctfassets.net/xytlyfu15zue/MhNgSL4QIteaTFIqCW72j/4071a881bbd5fbb10f93e8ee3b1c2a00/Getting-Started-with-NextJS.jpeg
[7]: //images.ctfassets.net/xytlyfu15zue/47BvVTA7B1dNqfTtJU32Mr/168d93c1c04b6e33189f119b462c3adb/Logo.WhiteBackground.jpg
[8]: https://docs.strapi.io/developer-docs/latest/getting-started/quick-start.html "Getting Started - strapi.io"
[9]: //images.ctfassets.net/xytlyfu15zue/3un1jUDfRHrLmHUKbdn14c/4cee2c0a7530b73cad4e5a6884322d89/Screen_Shot_2022-03-16_at_11.13.32_PM.png
[10]: //images.ctfassets.net/xytlyfu15zue/4zllgikL9ZjpKTlSjKJN2i/16bdf32543e3659133b8d8c55a706c80/Screen_Shot_2022-03-16_at_11.13.14_PM.png

nextjs-tailwindcss-strapi

Untuk entri kali ini, saya akan berkongsi kepada anda cara membina pembantu chat-bot dengan menggunakan Next.js + CSS Tailwind sebagai 'front-end stack' dan Strapi API sebagai headless CMS.

Bina "chat-bot" dengan Next.js, Tailwind CSS dan Strapi API - Bahagian 1

![FlutterBricks - Pre-Built Widgets for Flutter][1]

Khas untuk semua penggemar Flutter, sebuah *framework* yang digunakan untuk membangunkan aplikasi untuk telefon pintar dan *tablet* bagi iOS & Android.

Anda kini tidak lagi perlu risau | kusut | runsing kepala, apabila berdepan dengan pembinaan antaramuka pengguna (user interface) untuk Flutter.

Kerana anda kini boleh menggunakan *pre-built widgets* sedia guna di FlutterBricks.

# Apa itu FlutterBricks? 🤨

![Screen Shot 2022-01-25 at 1.08.24 AM][2]

FlutterBricks ialah sebuah *provider* yang membekalkan para pengaturcara Flutter dengan __pre-build widgets__ tersedia untuk diguna bagi proses membangunkan antaramuka pengguna (user interface) bagi sesebuah aplikasi telefon pintar ataupun *tablet*.

![Screen Shot 2022-01-25 at 1.08.46 AM][3]

Walau bagaimanapun, ia masih lagi dalam peringkat *alpha* dan *beta* release. Namun, anda kini boleh mengakses beberapa *pre-built widgets* FlutterBricks melalui laman sesawang rasmi mereka, ataupun anda boleh sahaja memuat turun *extension* FlutterBricks di Visual Studio Code IDE.

![Screen Shot 2022-01-25 at 1.17.21 AM][4]

# Berbaloi untuk digunakan? 🤔

Jika anda mempunyai masalah seperti: 

- Mengambil masa yang agak lama untuk membentuk antaramuka pengguna (user interface) untuk pembangunan aplikasi telefon pintar anda dengan Flutter
- Sukar untuk mendapatkan visual dan rekabentuk yang minimalistik dan mesra pengguna
- Sukar untuk menyesuaikan diri dengan struktur pembangunan *widget* di Flutter, kerana anda terbiasa dengan struktur tradisional HTML, CSS dan JavaScript/TypeScript

Maka, FlutterBricks adalah jawapan yang terbaik untuk anda! 

Di samping ia memudahkan anda dengan set *pre-built widgets* yang disediakan oleh FlutterBricks, anda juga boleh memahami cara implementasi yang telah ditunjukkan di dalam dokumentasi mereka yang tersedia di laman sesawang rasmi FlutterBricks.

# Jangan lepaskan promosi Premium Plan 😱

![Screen Shot 2022-01-25 at 1.36.16 AM][5]

Ketika ini, anda boleh mendapatkan pakej Premium FlutterBricks dengan harga serendah $5.99 (RM25.06) untuk tempoh sebulan.

Dengan pakej Premium, anda akan menikmati akses-akses FlutterBricks dengan sepenuhnya seperti:

- __Access to All Screens__
- __Free Weekly Updates__
- __Everything on the Free Plan__
- __Dev Updates and Beta Trials__
- __Premium Support__

Jadi, jangan lepaskan peluang keemasan ini bagi para penggemar Flutter!

Sekian dari saya. Terima kasih kerana sudi meluangkan masa membaca di entri ini.

[1]: //images.ctfassets.net/xytlyfu15zue/4vWMYWuSfISZPjH4hzhYd0/5802452f43bdfb940842621047b65839/Screen_Shot_2022-01-25_at_1.03.21_AM.png
[2]: //images.ctfassets.net/xytlyfu15zue/7HRqhs75mXuNEgbc5zFFrg/1cfb8b67a3e9cc4d1419538e9c0fb03f/Screen_Shot_2022-01-25_at_1.08.24_AM.png
[3]: //images.ctfassets.net/xytlyfu15zue/53qwSVt49s8wceIApLOSSC/a70039f7eb825419c7155cdf4d3af08b/Screen_Shot_2022-01-25_at_1.08.46_AM.png
[4]: //images.ctfassets.net/xytlyfu15zue/2AdofN2TdNJe8I5Ujulnts/a40ca673e3dedc25c3c5550cc10e200b/Screen_Shot_2022-01-25_at_1.17.21_AM.png
[5]: //images.ctfassets.net/xytlyfu15zue/71T3tGGQYjo4L9hg7fGHe4/eb99448406fe8cd4d850463584ed10f9/Screen_Shot_2022-01-25_at_1.36.16_AM.png

FlutterBricks - Pre-Built Widgets for Flutter

Anda kini tidak perlu merasa pening kepala untuk mengaturcara UI Flutter...

Berita baik untuk semua pengaturcara Flutter!

![front-end-vs-back-end][1]

> “Programming isn’t about what you know; it’s about what you can figure out.” — Chris Pine

Sebagai *programmer*, saya harus akur bahawa soalan ini adalah soalan yang paling *famous* di kalangan graduan-graduan yang lahir dari jurusan teknologi informasi (IT) mahupun dari kalangan individu-individu yang ingin cuba menyelami susur-galur cabang dunia pengaturcaraan untuk dijadikan sebagai hobi ataupun sebagai kerjaya sepenuh masa.

Tanpa melengahkan masa, jom kita kupas tentang soalan yang "hangat" ini.

# Apa itu "Front-end developer" atau "Back-end developer"?

Sebelum kita pergi dengan lebih jauh, adalah lebih baik kiranya untuk kita mengenali apakah yang dimaksudkan dengan peranan:

- *__Front-end developer__*, dan
- *__Back-end developer__*

di dalam dunia pengaturcaraan (programming) itu sendiri.

## a. Front-end developer

*__Front-end developer__* kebiasaannya bertanggungjawab di dalam pembangunan komponen visual secara berkesan untuk sesuatu laman web atau aplikasi telefon pintar (smartphone). Mereka ini juga melakukan tugas-tugas pembangunan (development) bagi mencapai kriteria rekabentuk antaramuka pengguna (user interface) dan juga pengalaman pengguna (user experience) yang penting seperti navigasi, butang, atau apa sahaja yang dapat membantu meningkatkan lagi visual keseluruhan dan juga pengalaman pengguna bagi sesebuah laman web atau aplikasi telefon pintar. Mereka juga adalah individu yang bertanggungjawab untuk menterjemahkan data yang diambil dari pelayan (server) dalam bentuk visualisasi grafik.

Untuk tujuan ini, __HTML__, __JavaScript__, dan __CSS__ adalah *stack technology* yang sering digunakan bagi membangunkan setiap komponen visual seperti mana yang anda lihat di kaca skrin telefon bimbit mahupun skrin komputer anda ketika ini. Ini membolehkan pengguna berinteraksi secara bebas dan selesa terhadap sesuatu laman web atau aplikasi telefon pintar itu sendiri.

![front-end-dev][2]

Namun, dasawarsa ini kita dapat melihat lambakan teknologi-teknologi baru yang telah lahir dalam konteks pembangunan *front-end*. Sebagai contoh, pengaturcara JavaScript kini boleh memilih untuk menggunakan *front-end framework* seperti [React][3], [Vue][4] mahupun [Angular][5], di mana ia secara tidak langsung membantu ramai pengaturcara untuk beralih kepada *framework* yang lebih moden berbanding menggunakan JavaScript yang tradisional di mana penulisan sintaks dan logik agak kompleks jika dibandingkan dengan keupayaan 3 *framework* yang saya nyatakan sebentar tadi.

Jadi secara dasarnya, *front-end developer* adalah individu yang bertanggungjawab untuk menghasilkan visual dan komponen rekabentuk antaramuka pengguna (user interface) bagi tujuan untuk pengguna berinteraksi dengan sesuatu aplikasi/sistem. Baik aplikasi web, telefon pintar.

## b. Back-end developer

Jika sebentar tadi kita telah pun membincangkan tentang peranan seorang *front-end developer*. Sekarang kita akan beralih kepada peranan sebagai seorang *back-end developer*.

Jadi, apakah peranan seorang pengaturcara yang bernama *back-end developer* ini?

__*Back-end developer*__ bertanggungjawab pada pembangunan sistem yang menghubungkan sesuatu aplikasi kepada pelayan (server) yang menyimpan data di dalam pangkalan data (database). Fokus mereka lebih tertumpu kepada pengstrukturan pangkalan data (database), skrip, dan *system architecture* sesebuah aplikasi. Mereka ini juga memantau bagaimana sesebuah aplikasi/sistem itu berfungsi dan bagaimana mereka boleh membuat perubahan dan mengemas kini semua fungsi dan operasi di belakang tabir.

![back-end-architecture][6]

Teknologi-teknologi yang sering digunakan oleh *back-end developer* adalah seperti berikut:

>- Web Development Languages
>- Pangkalan data (Database) dan *cache*
>- Pelayan (server)
>- API (REST & SOAP)

Peranan *back-end developer* dapat kita simpulkan seperti berikut.

1. Pembinaan laman web dengan membina pengaturcaraan dalam bahasa PHP, Java, JavaScript, Perl, Python, dan Ruby.
2. Membantu *front-end developers* untuk mencapai masa tindak balas yang cepat kepada pengguna akhir (end-user).
3. Mahir mengunakan sistem kawalan versi perisian dengan teknologi seperti CVS, Git, atau SVN.
4. *Back-end developer* harus memahami matlamat laman web dan mencari penyelesaian yang berkesan.
5. Pengurusan sumber API (Application Program Interface) yang berfungsi di seluruh peranti.
6. *Back-end developer* juga berkemungkinan terlibat dalam pembinaan sistem dan analisis sains data.
7. *Back-end developer* bertanggungjawab mengatur logik sistem, yang akan digunakan di pelbagai peranti.

# Secara konklusinya, mana yang lebih baik?

Secara jujurnya, jawapan yang saya boleh kongsikan kepada anda ialah:

> Bergantung kepada keupayaan dan keinginan diri anda sendiri.

![gif-why][7]

Kenapa pula saya mengatakan sedemikian rupa?

Kerana kedua-duanya mempunyai permintaan (demand) yang sangat tinggi di dalam pasaran kerja ketika ini. Dan untuk mendapatkan akses untuk mempelajari tentang ilmu pengaturcaraan baik *front-end* atau *back-end* kini lebih mudah kerana semua maklumat dan bahan pembelajaran yang anda ingin mempelajari, tersedia di hujung jari anda pada hari ini.

Jika anda seorang yang meminati untuk membina sesuatu yang berlandaskan visual grafik dan menghasilkan rekabentuk antaramuka pengguna (user interface) yang mampu menarik perhatian dan mudah digunakan bagi pengguna akhir (end-user), maka pengaturcaraan dalam bentuk *front-end* adalah amat sesuai untuk anda.

Jika anda seorang yang mempunyai *critical thinking* , mempunyai kepakaran dalam menyelesaikan masalah dengan keupayaan logik yang tinggi dan seorang yang bijak menyusun atur *flow structure* dalam apa jua keadaan. Maka pengaturcaraan dalam bentuk *back-end* amatlah bersesuaian dengan diri anda.

Andai kata anda meminati kedua-dua nya, anda boleh cuba cabar diri anda dengan menjadi seorang "*__full-stack developer__*". Bak kata orang Eropah: *master of all trades*.

Namun, ia berbalik kepada penyataan saya sebentar tadi.

Apa jua pemilihan dan keputusannya, ia terletak kepada naluri hati dan penilaian secara holistik dari diri anda sendiri di akhirannya.

Oleh itu, saya ucapkan maju jaya kepada anda yang ingin menyusuri perjalanan di dalam dunia pengaturcaraan. Dan selamat mengaturcara!

## Rujukan yang boleh dilayari untuk mempelajari pengaturcaraan (programming)

1. [FreeCodeCamp][8]
2. [Codeacademy][9]
3. [HackerRank][10]
4. [GeeksForGeeks][11]
5. [Codementor][12]

---

Terima kasih kerana sudi membaca!

__Abdullah Fitri__

[1]: //images.contentful.com/xytlyfu15zue/1Fo5rZlad6TQNlOydNbTHA/e744ca314966f69d91f97e8019283055/1590690600-front-end-back-end-1080x608.webp
[2]: //images.contentful.com/xytlyfu15zue/2flB3MTTOvGMxVaSEMb3ea/bd0108d3bc33165fdc00f52156c38867/front-end-dev.png
[3]: https://reactjs.org/ "React - A JavaScript library for building user interfaces"
[4]: https://vuejs.org/ "VueJS - The Progressive JavaScript Framework"
[5]: https://angularjs.org/ "AngularJS - Superheroic JavaScript MVW Framework"
[6]: //images.contentful.com/xytlyfu15zue/7Gx808UteL4Lg2dn4AjPvK/8815d2d22f8e8c183b8b1b5e76ec70cf/back-end-architecture.png
[7]: //images.contentful.com/xytlyfu15zue/3B31AXU8swv5qShEAqAHE0/7ec76f2e3d8aa737ee0fb687e8755562/gif-why.gif
[8]: https://www.freecodecamp.org/
[9]: https://www.codecademy.com/
[10]: https://www.hackerrank.com/
[11]: https://www.geeksforgeeks.org/
[12]: https://www.codementor.io/

front-end-vs-back-end

Soalan yang sering sekali menjadi titik tolak untuk seseorang memulakan kerjaya sebagai pengaturcara (programmer)

Pengaturcaraan: Front-end atau Back-end?

![macbook-image][2]

# Sebab utama

Antara sebab utama saya mengambil inisiatif untuk mengubah keseluruhan *layout blog* ini adalah:

- __Pengurusan kod__ (*Code maintainabilit*y)
- UI dan persembahan grafik yang lebih __*fresh*__ dan __*clean*__
- Berubah kepada __*web hosting server provider*__ yang baru

Untuk entri kali ini, saya akan menyentuh *point* yang pertama terlebih dahulu. Dan selebihnya, akan saya kupas dengan lebih lanjut di dalam entri yang lain pula.

Tanpa membuang masa, kita pergi ke *point* yang pertama!

## Pengurusan kod (*code maintainability*)
Untuk memastikan sebuah *website* / aplikasi yang di bina berada dalam tahap yang terbaik, pengurusan kod untuk membina suatu perisian itu haruslah mencapai piawaian yang baik untuk tujuan penyelengaraan dan penambahbaikan di masa yang akan datang.

Sebelum ini, *blog* __fvtrx__ ini dibina menggunakan [__Gatsby.js__ ][3] sebagai *front-end framework* yang dipilih. Dan ia juga mempunyai sokongan *GraphQL* sebagai storan untuk menyimpan data entri-entri blog di dalam __fvtrx__ tanpa perlu membangunkan sebuah *database* (sebuah storan data) seperti __MySQL__, __Microsoft SQL__ dan lain-lain.

__GatsbyJS__ sendiri adalah *web framework* yang menggunakan __React__, sebuah lagi *framework* yang dibina menggunakan __JavaScript__ sebagai bahasa pengantara untuk menghubungkan *command* kepada komputer untuk diterjemahkan dalam bentuk visual, seperti yang anda lihat di semua laman web yang pernah anda layari sebelum ini.

Namun, selepas beberapa bulan saya menggunakan teknologi GatsbyJS. Saya mula menyedari akan darjah kesukaran yang telah saya alami untuk memahami struktur *code* yang saya sendiri dah tulis untuk *blog* __fvtrx__ sebelum ini. Percubaan untuk mengubahsuai *blog* __fvtrx__ menjadi serabut ketika mana saya mengalami kekeliruan ketika menggunakan GatsbyJS. Semuanya berkecamuk!

![flip-table][4]

> Serabut yang amat. Seperti di atas.. 😂

Ia juga berpunca dari kesalahan saya yang sebelum ini, hanya belajar dari *copy and paste* kod orang lain. Tanpa memahami struktur dan asas untuk teknologi GatsbyJS itu sendiri. Dan *codebase* saya juga berkecamuk dengan pelbagai *component, template* dan jenis file yang bercampur aduk. Sekejap guna *file JavaScript*, sekejap guna *TypeScript*.

Dari situ, saya tekad untuk mempelajari sebuah *web framework* yang lebih mudah untuk difahami. Serta tak begitu memeningkan kepala. Oleh itu, saya telah menjumpai __NextJS__ untuk dijadikan sebagai *programming framework* bagi membina *blog* __fvtrx__ ini *from scratch*. Mula balik semula.

### NextJS sebagai *framework* baru.
Jadi, apa itu __NextJS__? Huraian nya adalah seperti berikut:

> Next.js is a React Framework, with server side rendering capabilities and also all the other features you need for production. Without little or no any configuration. 😉

NextJS memberikan para *developers* keupayaan untuk membina aplikasi web dengan keupayaan '*server side rendering*' tanpa konfigurasi tambahan yang memeningkan. Dalam erti kata lain, masa yang diambil untuk memaparkan keseluruhan *web page* akan menjadi lebih pantas berbanding biasa apabila aplikasi tersebut di bina dengan menggunakan NextJS.

![NextJS][5]

Dan untuk pengetahuan anda, anda mungkin perasan yang ketika mana anda melayari *blog* ini, anda tidak pernah *reload page* walau sekalipun ketika melayari blog ini bukan?

Seperti yang anda lihat ketika ini, *blog* ini merupakan sebuah *__Single Page Application (SPA)__*, iaitu sebuah aplikasi web yang dibina menggunakan bahasa pengaturcaraan JavaScript.

Ini adalah antara ciri yang terdapat di dalam *blog* __fvtrx__ ketika ia dibina dengan menggunakan NextJS sebagai __SPA__. Ia berinteraksi dengan pelayar Internet (browser) hanya dengan menggantikan data pada web tersebut, menyebabkan ia tidak memerlukan anda untuk '*reload page*' ketika anda cuba untuk mengakses ke mana-mana *page* yang terdapat di dalam *blog* ini.

> Kebiasaannya SPA adalah lebih pantas daripada laman web tradisional kerana fail-fail HTML, CSS dan JavaScript hanya dimuatkan sekali sahaja sepanjang sesi anda melayari web tersebut; hanya data dan fail media sahaja yang dimuat semula oleh pelayar. Data kebiasaannya mempunyai saiz payload yang kecil dan selalunya tidak menjadi masalah bagi kepantasan Internet yang biasa-biasa.
> 
> __Omar Mokhtar (omvr.io), 2020__

Saya juga mendapati, selepas sahaja saya beralih dari GatsbyJS kepada NextJS. *Code structure* menjadi lebih kemas, lebih teratur dan mudah untuk difahami dari setiap *component, templates, logic functions* yang telah saya tulis untuk menghasilkan *reboot* bagi *blog* ini.

Sebagai contoh, anda boleh melihat *code snippets* seperti tertera di bawah:

![nextjs-code][1]

> Lebih kemas, lebih teratur untuk dibaca dan difahami 👍🏻

---

Sampai di sini sahaja terlebih dahulu. Nantikan bahagian kedua dan ketiga untuk entri ini di masa yang akan datang.

Terima kasih kerana sudi membaca!

__Abdullah Fitri__

[1]: //images.ctfassets.net/xytlyfu15zue/3vKCUgjLMaz6WD0RyOFluS/b10dff0114e06ef8dac10255e5e43ab5/Screenshot_2021-03-15_at_2.17.16_AM.png
[2]: //images.ctfassets.net/xytlyfu15zue/5ywBtLouNYWSPmtK88MJif/3411d6e18954443af41dde10dcedd679/mac.jpeg
[3]: https://www.gatsbyjs.com/ "Gatsby.js - The fastest frontend for the modern web"
[4]: //images.ctfassets.net/xytlyfu15zue/1VY93rUP8HBPXJHQ6A9GX3/49093a3e3004562a59b11d6485efb310/upset.gif
[5]: //images.ctfassets.net/xytlyfu15zue/MhNgSL4QIteaTFIqCW72j/4071a881bbd5fbb10f93e8ee3b1c2a00/Getting-Started-with-NextJS.jpeg

macbook-image

Ada beberapa sebab mengapa saya berhasrat untuk buat merubah kesemua isi kandungan blog ini...

Front-End Developer.

Sometimes, I do sing.

Latest Articles