Kebiasaan untuk Mengurangi munculnya Stupid Bug

Stupid Bug

stupid bug ini istilah yang aku buat sendiri karena senior ku suka bilang stupid, wtf, seperti Gordon Ramsay hahaha. Ok. Apaa itu stupid bug? jadi sesuai namanya, stupid bug adalah bug yang terjadi karena kebodohan atau bahasa halusnya kelalaian developer. Contohnya : tidak ada pengecekan null, menggunakan index 0 padahal data list nya bisa kosong, salah merelasikan data. Powerfull IDE tidak akan bisa membantu kita, ini murni Human Error. Mangkanya jangan heran meski portofoliomu banyak tapi kalau tes logic nilainya rendah bisa - bisa tersingkir dari para pelamar kerja.

diketahui : 

Aku mau berbagi nih apasaja Stupid Bug yang aku ketahui. 

Koreski List

apakah ukuran list lebih dari 0 

Empty String ("")

string dengan value kosong ""

Nullable

data bisa null atau tidak

Response API

Looping Confused

Missunderstanding 


Continue Reading
Adventure to the Portal (Navbar, Sidebar, Admin Portal) - Reactjs Frontend 2021

We have 2 menu, that is Navbar and Sidebar. Navbar on top then sidebar on left/right. Navbar will stick on top while Sidebar usually have countless navigation and can be scrolled.

1. Material UI Dashboard

Create project, install @material-ui, copy paste the code from github example. DONE

2. Volt Bootstrap

This is full template include the content inside it.

https://github.com/themesberg/volt-react-dashboard



3. Next JS Material Dashboard

https://www.creative-tim.com/product/nextjs-material-dashboard?AFFILIATE=128200

this is full template using @material-ui, more advance than list number 1.




4. Berry
I love this template card. it has bubble inside it and the background is not gray like others.


5. Data Able


6. Notus : React Tailwind





Ok. We can find so many template of Admin Portal here. but what if I want is just sidebar and navbar only. There is a way to delete unused stuff from admin portal but the other problem is the pattern. Since reactjs don't have pattern. I wish it can be used as component only. given example :

<Portal 
navbar={}
sidebar={}>
    {children}
</Portal>

easy right? ok let's find more.

1. React pro sidebar



2. Semantic UI

3. Material Drawer


4. React burger menu

wow, this library has good animation




5. Chakra-ui Drawer

6. Kendo Drawer

7. Rc-Drawer

this sidebar has configuration from left or right.




Reference :

https://dev.to/sm0ke/react-dashboards-open-source-apps-1c7j




Continue Reading
RIP px, Sekarang eranya REM dan EM

Kenapa jangan Pixel? 

karena pixel tiap device itu berbeda, pixelnya web lebih besar dari pixelnya mobile. dulu saat pertama belajar web kita sering menggunakan px sebagai acuan untuk ukuran, namun semenjak adanya mobile dengan pixel yang lebih tinggi dari komputer membuat px tidak cocok dipakai sebagai ukuran. Contoh lain juga karena di beberapa browser ada fitur untuk mengubah ukuran font. kalau kita menggunakan px maka ukuran padding atau margin yang menggunakan px tidak akan berubah. Solusinya adalah REM dan EM.

Hai REM

ketika kita mengubah ukuran font pada browser, maka ukuran margin dan padding yang kita set menggunakan REM akan ikut berubah menyesuaikan dengan ukuran dasar dari root font-size.

Berikut adalah contoh bagaimana kita bisa melihat kalau px, rem dan em sangat berpengaruh.

Setting ukuran font pada Chrome


Jika ingin pixel kita sama maka kita bisa memaksa Chrome dengan menentukan ukuran font dasar lewat css menggunakan pixel seperti: 
{ font-size: 10px; }

// TODO : membuat code pen untuk menunjukan perbedaan px, REM dan EM.
Continue Reading
Octoverse, menjawab dilema memulai belajar bahasa pemrograman

Octoverse

#github #program #code #webdeveloper #vcs #android #ios #appdeveloper #app #programmer


😋 Kayaknya enak bisa bikin program. tapi bingung mulai dari mana ya? terus apakah bahasa pemrograman yang kita pelajari saat ini bakal dipakai untuk kedepannya? fenomena yang terjadi di Indonesia adalah mulai ditinggalkannya bahasa php. why? dulunya dengan php saja kita sudah bisa membuat sebuah website. dengan template wordpress kita sudah bisa membuat blog. namun zaman sudah berubah.

Saat ini dunia terbagi menjadi 2 ✌ bagian yaitu frontend 💅 dan backend 🖥. analoginya itu frontend merupakan petarung terdepan dalam menghadapi klien, dan backend adalah penyedia senjata. keduanya sama penting saat ini. Masih ingatkah kalian saat frontend cuma html css js dan backend hanya CRUD saja. ternyata dunia sudah tidak sesimpel itu.

Biar tidak bingung ingin belajar apa ayo kita tanya anaknya Github bernama Octoverse yang akan memberi tau kita trend pemrograman saat ini. 


Gambar Header Octoverse


Hai, Aku Octoverse

Octoverse merupakan kumpulan statistik dari Github. tau sendiri kalau Github itu open source git terbesar di dunia saat ini hehehe. Zaman saya dulu Github hanya bisa public dan yang private berbayar sehingga akhirnya semua pindah ke Gitlab atau Bitbucket untuk private repository namun semenjak github sudah menyediakan private gratis akhirnya saya sendiri pindah ke github. 


Grafik negara penyumbang open source terbesar

Indonesia urutan ke 4 tuh. tidak kalah netizen nya hahaha.

Cek yang banyak anggota Komunitas nya

Kenapa Octoverse bisa menjadi acuan kita dalam belajar bahasa pemrograman mana? karena bahasa pemrograman yang paling berkembang adalah yang banyak komunitas dan kontributornya. Siapa juga yang tidak mau pakai produk dengan library yang sudah sangat banyak dan disediakan umum hahaha.

Banyak Library mengurangi Mikir

Don't repeat yourself(DRY/ Jangan Bikin yang sudah ada), IT itu tinggal copas gaes. kalau kalian buat sesuatu yang sudah ada itu buang - buang waktu kecuali kalian memang ingin membuat yang lebih baik atau library itu tidak sesuai keinginan. Library menjadi kunci untuk pembuatan software ala Bandung Bondowoso (semalam jadi). Sayangnya PHP yang populer di negara Indonesia kita tercinta ternyata tidak menduduki peringkat dengan library terbesar. Ternyata peringkat pertama di raih oleh npm atau nodejs. sata urutkan dulu ya.


Statistik 5 Penyedia Library Terbanyak


Peringkat bahasa pemrograman berdasarkan jumlah library :
  1. NPM - javascript
  2. RubyGems - Ruby
  3. Maven - Java
  4. NuGet - .NET
  5. pip - python

Saat ini Javascript Juaranya

Bukan main ternyata javascript mejadi juara 5 tahun berturut - turut. Saya sendiri pertama mengenal javascript lewat Web hingga sekarang bisa merambah ke backend express, PWA, desktop Elektron, mobile React Native & Ionic.

Statistik Pengguna Bahasa Pemrograman Terbanyak

Meskipun javascript merupakan bahasa paling banyak penggunanya ternyata javascript tidak menduduki posisi pertama sebagai bahasa paling berkembang. Dart menjadi juara untuk bahasa paling berkembang, menurut pengetahuanku sih karena Dart yang merupakan bahasa utama di Flutter sudah multi platform baik Web, iOS, dan Android. Mungkin kedepan akan merambah ke desktop juga. Kemudian ada Rust dan HCL yang perlu kita pelajari juga. Go lang sekarang juga merupakan bahasa paling cepat untuk akses ke backend.

Statistik Perkembangan Bahasa Pemrograman

Kesimpulan 

Jadi menurut saya, kita harus belajar banyak bahasa. Bahasa tidak diciptakan untuk bersaing namun karena masing - masing memiliki keunggulannya sendiri. Saya dulu memulai dari Java sehingga saya kebingungan dengan Python yang bisa mengembalikan 2 variabel dan juga kotlin yang punya tanda tanya untuk null exception dan Golang yang tidak punya class. Boleh jadi master di satu bahasa pemrograman,  tapi kita juga harus membuka telinga untuk bahasa pemrograman yang mungkin memiliki fitur yang sesuai dengan kebutuhan kita untuk kedepannya. Namun kita bisa melihat grafik diatas untuk memilih bahasa mana. Saran saya yaitu Typescript dan Dart. Typescript merupakan versi lanjutan dari Javascript dan Dart merupakan bahasa paling berkembang, lowongan pekerjaan yang paling sering saya temui yaitu 2 bahasa ini karena keduanya mencakup Frontend dan Backend(kecuali Dart). Kalau kalian punya pendapat lain silahkan tulis di kolom komentar. Matur Suwun 💙💚










Continue Reading
React (eps 1.0) Membangun Create React App + Typescript

Saya mulai belajar React tahun ini, saya memiliki pengalaman membangun web menggunakan Laravel. kalau di Laravel, mereka juga punya kemampuan manajemen komponen yang disebut blade. Perbedaannya di React menggunakan kustom tag seperti HTML sehingga lebih mudah dibaca. saya pernah menggunakan Angular sekali, sayangnya angular memiliki aturan sendiri seperti *ngIf and *ngFor while in React we can still use normal if and for statement. Typescript have been fill something missing in javascript. Seperti namanya, Type + script. yaitu javascript yang diberi tipe data. jadi mari kita membuat aplikasi React menggunakan typescript.

Command untuk membuat react-app dengan template typescript. :

yarn create react-app my-app — template typescript

Selanjutnya kita akan mempelajari konfigurasi kekinian seperti

  • SCSS (css yang bisa diisi logic dan variabel)
  • ESLINT & PRETTIER (pengaturan untuk membuat code anda tetap rapi)
  • WEBPACK (membungkus semua source javascript anda agar bisa dibuka di web)
  • JEST + ENZYME (test aplikasi anda)


Continue Reading

Like us on Facebook