Sabtu, 22 April 2017

Tutorial Sublime Text 3 – #13 Color

    Assalamualaikum Wr. Wb. Hai – hai man-teman sahabat lupacode, selamat datang kembali diblog lupacode – Tutorial Pemrograman Dalam pembahasan meteri kemarin kita telah belajar mengenai sublime text, dan pada materi sebelumnya kita telah membahas mengenai Tutorial Sublime Text 3 – #12 Emmet (Bagian 3) bagi sahabat lupacode yang kebetulan baru saja mampir ke dalam blog ini, silahkan dipelajari dulu materi – materi yang sebelumnya dari pembahasan yang pertama. Karna didalam setiap materi pembahasan disini itu saling berhubungan antara materi sebelumnya dan materi selanjutnya. Atau sahabat dan teman – teman lupacode dapat langsung menuju pada halaman DaftarIsi disana seluruh pembahasan dari mulai materi yang pertama sampai dengan materi yang saat ini kita bahas tersedia disana.



     Pada kesempatan kali ini yang akan kita bahas masih pada seri tutorial sublime text 3, dimana pada materi sebelumnya kita sudah mempelajari bagaiamana menginstal sebuah plugin yang menurut saya sangat keren sekali untuk membantu kita dalam ngoding dengan sangat cepat. Namun pada materi kali kita akan bahas mengenai dua buah plugin, plugin nya sederhana saja engga sesulit plugin-plugin yang lainnya seperti emmet misalnya, plugin ini memudahkan kita sebagai web desainer apalagi yang sering bekerja dengan css.
          Ada dua buah plugin warna yang berhubungan dengan css, kita lihatb contoh kasus nya terlebih dahulu, misalkan begini saya punya sebuah file css dan didalam nya ada dua buah atribut yang berhubungan dengan warna seperti ini

body {
 font-family: arial, sans-serif;
 background-color: lightblue;
}

h1 {
 color: darkgrey;
}

   Saya punya dua buah property warna, yang pertama ada background color dan yang kedua ada color. Untuk background color saya set dia jadi lightblue atau biru muda, lalu untuk color atau tulisan saya set dia jadi darkgrey atau abu-abu tua.
         Nah misalkan gini, kalau misalkan saya mau ganti warna itu kan ada beberapa cara pertama kita bisa ganti dengan menuliskan nama warna nya misalkan red, atau royalblue atau banyak warna yang lainnya. Tapi kita juga selain nama warna kita juga bisa pakai hexa misalnya #000000 ada 6 digit dan itu warna nya hitam, sedangkan untuk warna putih adalah #ffffff lalu semua kombinasi hexa warna antara 000 dan fff itu jadi warna yang lain, tapi kita kan ga mungkin hafal semua kombinasi warna di hexa ini, jadi misalkan kalau kalian ingin memberi warna diluar warna yang tadi tentunya kalian butuh kombinasi warna hexa ini, nah biasnanya kita kan membutuhkan bantuan aplikasi lain seperti paint untuk menampilkan color picker nya, atau kalian pakai photoshop atau aplikasi di web ada unutk menampilkan warnanya.
  Tapi alangkah lebih bagus nya jika sublime text punya fasilitas color picker itu, supaya kita gampang milih warnanya. Nah untungnya ada plugin di sublime text 3 ini yang namanya color picker sekarang kita coba instal saja pluginnya. Kita masuk ke dalam menu Preferences -> Package Control atau kalian juga gunakan shortcut nya dengan tulis CTRL+SHIFT+P kemudian kita tulis di pencariannya install kemudian kita pilih install package atau kalian bisa tekan enter lalu kita tunggu sebentar, kemudian kita cari plugin yang namanya colorpicker, kita tulis saja colorpicker tinggal dipilih saja kemudian kita tekan enter


         Kita tunggu proses download nya dan ini tergantung koneksi internet yang sedang kita gunakan. Kemudian kalau sudah terinstall akan ada notifikasi dibawah nya “colorpicker successfully installed” oke sekarang kalau sudah selesai terinstal misalkan saya mau ganti warna color nya, saya hapus dulu warna yang diatas, kemudian kita tekan shortcut untuk menampilkan colorpicker nya yaitu dengan menekan CTRL + SHIFT + C maka akan keluar color pickernya seperti ini


    Kemudian kita tinggal pilih saja warnanya sesuai dengan keinginan kita, sama seperti kita menjalankan aplikasi seperti paint atau photoshop atau aplikasi web yang menampilkan warna untuk fasilitasnya.
       Oke sudah yah untuk menampilkan plugin nya sekali lagi kita hanya cukup tekan CTRL + SHIFT +C maka akan langsung keluar color pickernya jadi itu sangat gampang banget untuk  kita memilih jenis warna yang kita inginkan tanpa kita harus menghafal hexa warna nya karna itu gak mungkin mengingat jumlah kombinasi hexa nya itu mencapai ribuan. Sekarang kita lihat hasil hexa nya, itu di tulis dalam huruf besar.


   Kalau kalian engga suka huruf besar kalian dapat merubah untuk hasilnya hexa nya berubah menjadi huruf kecil. Caranya adalah sama seperti kalian mengkonfigurasi plugin – plugin lain. Kita masuk ke dalam menu Preferences -> Package Setting -> nah biasanya disana sudah ada plugin-plugin yang sudah terinstal, kemudia kita lihat yang Color picker


  Kemudian pilih dulu yang default, dan selalu biasakan untuk memilih dulu yang default. Kemudian kalian dapat melihat setting default nya seperti dibawah ini.


         Lalu kemudian kalian dapat lihat disalah satu item nya yaitu ada “color_upper_case”: true  nah untuk merubah settingan default nya menjadi huruf kecil nah yang true itu kalian tinggal gant menjadi false. Tapi biasakan jangan diganti di default nya, ini berlaku untuk semua plugin juga sama yah jangan biasakan merubah settingan pada setting – default. Tapi jika kalian ingin merubah nya kalian masuk ke dalam setting – user nah pada setting userlah kalian boleh merubahnya. Kenpa ga boleh mengganti pada saettingan default ? jika nanti kalau kalian update sublime text nya maka semua settingan atau konfigurasi nya akan hilang.
         Baiklah sekarang kita ganti dengan cara membuka settingan user nya dengan cara sama seperti diatas pada cara membuka setttingan default. Ketika kita buka setting- user untuk color picker maka didalam nya masih kosong, nah sekarang kita copykan terlebih dahulu “color_upper_case”: true  yang terdapat pada setting – default ke dalam setting – user. Tapi jangan lupa untuk menambahkan dulu { } kedalam setting – user sebelum naruh scriptnya karena ini bentuknya javascript object. Selanjutnya kita ganti dengan false, jadi settingan user ini akan menimpa atau mengoveride settingan default.
      Oke baiklah kalau sudah kita akan langsung mencobanya kembali, dengan cara menekan CTRL + SHIFT+C untuk menampilakn Color picker nya, kemudian kita pilih salah satu warna dan lihatlah sekarang hexa codenya sudah berubah menjadi huruf kecil semua.
       Sekarang kita masuk kedalam plugin yang ke-dua. Plugin yang kedua masih ada hubungannya dengan warna, kalau tadi kita menginstal plugin color picker itu fungsinya untuk menampilkan warna yang tersedia, tapi kali ini bagaimana suatu hexa warna yang sudah kita tulis, misalnya hexa warna #fff888 apakah denga melihat code hexa warna itu kita akan ingat apakah itu warna apa yang kita masukan ? saya sendiri engga ingat, mengingat banyaknya code hexa warna ini. Nah jadi  dengan plugin ini kita dapat mengetahui warna apa yang sudah kita masukan. Baiklah dari pada kalian bingung, langsung saja kita download pluginnya terlebih dahulu
      Seperti biasa saya ketikan CTRL + SHIFT + P untuk memunculkan command pallete nya, lalu kita tuliskan dalam pencariannya COLOR lalu sekarang kita pilih yang color highlighter


       Silahkan di klik saja kemudian kita tunggu proses download dan instalasi nya. Mungkin ini memakan waktu yang cukup lama karna ukuran plugin color highlighter sendiri cukup besar ukurannya. Baiklah kalau sudah selesai kita akan langsung mencoba nya kembali.
       Sebelumnya dapat kalian lihat jika plugin highlighter ini sudah berhasil di instal maka setiap kode warna yang sudah kita tuliskan itu akan ada garis bawahnya dan garis bawah itu menunjukan warna dari kode hexa itu sendiri. Kalau ingin lebih jelas kita dapat mengklik hexa warna yang sudah kita tuliskan, dan sekarang kalian lihat




       Tulisan kode hexa itu sekarang mempunyai background dan warna background nya sama dengan warna hexa nya. Oke baiklah mungkin itu dua plugin yang saya gunakan untuk membantu saya dalammengenali warna dan memilih warna, silahkan kalau kalian inginstal tingga instal saja seperti yang sudah saya jelaskan pada tutorial diatas.
     Mungkin sampai disini dulu untuk pembahasan materi mengenai Color nya, selanjutnya kita masih akan membahas mengenai seri pada sublime text 3 ini. Kita langsung saja kedalam materi berikutnya yaitu
Tutorial Sublime Text 3 – #14 Sidebar Enhancements & Alignment

Silahkan berkomentar yang baik dan menarik sesuai dengan isi konten.
Komentar yang tidak diperbolehkan :

1. Berbau penghinaan SARA & PXXN
2. Komentar dengan Link hidup ( akan dianggap spam )
3. Komentar tidak nyambung dengan isi postingan
EmoticonEmoticon