Membuat Tooltip dengan CSS

Dalam artikel ini saya bahas cara cepat bikin tooltip dengan CSS (SCSS), tanpa JavaScript. Di sini saya bikin tooltip yang tampil di atas dan di samping elemen parent-nya. Saya mulai dari struktur HTML & CSS dasarnya dulu:

Jadi kelas utamanya .tooltip & untuk ngatur posisinya ada kelas .top untuk tampilan tooltip di atas & kelas .right untuk tampilan di samping kanan.

Bukan tooltip namanya kalo nggak ada pointer segitiganya. Caranya saya kopas aja dari sini: CSS Triangle.

Yang pertama, saya bikin tooltip tanpa border. Ini gampang sekali. Tinggal nempelin segitiga di bawah atau di samping. Untuk nampilin segitiga, saya pake pseudo-element :after.

Continue reading →

Branching Git Alternatif dengan Worktree

Tentu kita udah nggak asing lagi dengan branch, merge, stash, dan istilah Git yang lain. Dalam artikel ini saya ingin bahas satu fitur Git yang jarang atau mungkin nggak pernah kita dengar sebelumnya, yaitu worktree.

Branch bisa dibilang seperti virtual-directory. Setiap branch isinya boleh beda, tapi lokasi fisiknya masih sama dalam satu direktori root. Waktu kita checkout sebuah branch, isi direktori root ini diganti file yang ada di branch itu. Ini bisa dianggap fitur Git atau kelemahan (liability), tergantung situasi.

Sejak versi 2.5 Git punya fitur namanya worktree yang memungkinkan kita bikin branch di direktori di luar root.

Terus apa bedanya dengan bikin klon di direktori lain?

Misalnya kita punya 2 repositori lokal hasil klon remote yang sama, masing-masing klon nggak punya hubungan langsung dengan yang lain. Klon di direktori dir_1/, nggak tau apa2 tentang klon di dir_2/.

Nah kalo worktree, semua masih berhubungan seperti branch biarpun lokasinya beda.

Continue reading →

ReactJS: Controlled & Uncontrolled Input

Controlled Input adalah elemen form yang nilainya (value / state) dikontrol oleh React. Lawannya adalah Uncontrolled Input, state-nya dikontrol oleh elemen itu sendiri seperti normalnya form biasa.

Nilai yang dimasukin ke Controlled Input diproses dulu oleh React (onChange callback) baru inputnya diupdate. Dalam contoh di atas, text yang dimasukin ke text input nggak langsung dipake sebagai input.value tapi dikonversi dulu ke huruf besar oleh handleNameChange. value dari inputnya sendiri baru diset setelah state berubah (setelah setState()).

Jadi Controlled Input dalam contoh di atas cara kerjanya kurang lebih begini:

Import & Export Modul dalam ES6

Ekspor / impor modul ES6 memang sedikit bikin bingung. Soale cara ekspornya macem-macem, impornya juga macem-macem. Berikut ini catatan singkat tentang cara ekspor & impor.

Kalo mau nyoba kode2 di bawah, bisa pake Poi.

1. Anonymous default export

//file: src/vehicles/car.js
export default (brand) => (
  {
    brand: brand,
    drive() {
      console.log(this.brand, ' drive');
    }
  }
)

Continue reading →

Firefox Quantum Sering Hang ?

Beberapa hari terakhir Firefox Quantum seringkali hang tanpa sebab.

Ngeklik link Google, hang.

Geser window, hang.

Kirain masalahnya cuman di High-Sierra[1] ternyata di Sierra & Windows juga. Solusinya: Aktifin opsi “Prevent accessibility services …” di menu Privacy & Security.


[1] Selama pake Mac baru kali ini nyesel upgrade OSX. Sejak iMac pake High Sierra, flash disk yg setiap saat nempel krn buat file project sering disconnect tanpa sebab. Reset SMC & NVRAM ga ngefek.
Flashdisk yg sama dicolokin ke laptop MBP yg masih pake Sierra aman-aman aja. Ky Windows aja — upgrade malah error.