HOKAGE

Apa itu Web Storage? Web storage adalah salah satu Web API yang dapat menyimpan data secara lokal pada sisi  client . Berbeda dengan objek atau array, data yang disimpan pada objek atau array JavaScript bersifat sementara, dan akan hilang jika terjadi  reload  atau pergantian URL pada browser. Sedangkan data yang disimpan pada Web Storage akan bertahan lebih lama karena data akan disimpan pada storage browser. Sebelum HTML5, kita melakukan hal ini dengan menggunakan  cookies , namun penyimpanan cookies terbatas. Dengan hadirnya Web Storage kita dapat menampung data lebih besar dan tentunya lebih aman.  Data yang disimpan web storage tersedia berdasarkan domain. Artinya, data pada suatu domain web hanya dapat diakses oleh domainnya itu sendiri. Web storage dapat menampung sebesar 10MB untuk satu domain. Tipe Web Storage Web API menyediakan dua tipe Web Storage untuk kita gunakan, yakni  sessionStorage  dan  localStorage . Sebelum menggunakan Web St...

Sebenarnya CSS memiliki dua buah  flow  yang bisa digunakan untuk menampilkan elemen, yakni  static  dan  non-static . Agar mudah memahami perbedaan antar keduanya, kita gambarkan sebuah halaman website dengan tampilan tiga dimensi. Bayangkan kita memiliki tiga buat elemen div berukuran 200px x 200px yang masing-masing memiliki warna yang berbeda. . box {    width :   200px ;    height :   200px ; }   . first {    background - color :   #60d0a8; }   . second {    background - color :   #6495ed; }   . third {    background - color :   #ffa500; } Karena kita tidak mengatur properti position dari ketiga elemen tersebut, maka tiap elemen akan ditampilkan dengan static flow seperti ini: Ketika kita ingin mengubah letak kotak biru (kotak kedua) dengan menggunakan  margin-top: 20px ; tentu akan berpengaruh pada posisi elemen di bawahnya. . second {    background - c...

Kita sudah mengetahui cara mengubah posisi dari sebuah elemen dengan menggunakan margin. Namun ketika melakukannya, posisi elemen lain di sekitarnya akan terpengaruh. Lantas bagaimana jika kita ingin memindahkan tanpa mengganggu posisi elemen lainnya? Solusinya kita perlu mengubah positioning schema dengan menggunakan properti  position  dalam mengontrol letak elemen tersebut. Berikut nilai dari properti  position  yang ada pada CSS: Normal Flow / Static Flow  : Merupakan  default   behaviour  yang dimiliki elemen, di mana setiap elemen block akan ditampilkan dalam baris baru ketika dibuat. Sehingga setiap elemen block selalu muncul di bawah dari elemen block sebelumnya. Bahkan jika masih terdapat ruang kosong pada samping elemennya, mereka tidak akan nampak bersebelahan. Relative Positioning  : Membuat elemen bisa berpindah posisi ke atas, kanan, bawah, maupun kiri dari posisi semula atau posisi seharusnya elemen tersebut berada. Perpindahan...

Border Border merupakan sebuah garis yang mengelilingi area konten dan  padding  (opsional). Kita bisa mengatur tipe, ketebalan, serta warna garis yang ditampilkan sesuai dengan yang kita inginkan. Kita juga bisa mengatur dalam menampilkan sebagian atau keseluruhan garis pada elemen. Mari kita eksplorasi apa saja properties yang dapat mengatur border. Border Width Properti  border-width  digunakan untuk mengatur ketebalan dari border. Nilai dari properti ini dapat berupa pixel atau menggunakan predefined names value seperti  thin ,  medium , dan  thick . Kita tidak bisa menggunakan nilai persentase (%) pada properti ini. Kita dapat mengatur ukuran garis secara individual dengan menggunakan empat properti terpisah seperti ini: . box {    border - top - width :   2px ;    border - right - width :   1px ;    border - bottom - width :   1px ;    border - left - width :   2px ; } Tetapi kita juga d...