Pada hari Sabtu, tanggal 15 Februari 2020, pengurus Komunitas Surabayadev sejumlah kurang lebih 10 orang mengadakan kegiatan belajar bersama di Dilo Surabaya yang terletak di AJBS Surabaya.

Kegiatan ini merupakan kegiatan rutin yang diadakan oleh komunitas Surabayadev untuk meningkatkan skill masing-masing pengurus. Sebelumnya komunitas Surabayadev juga mengadakan kegiatan belajar bersama dengan materi UI UX.

Kenapa Surabayadev Belajar JavaScript?

Selama bertahun-tahun berturut-turut, JavaScript adalah bahasa pemrograman yang paling dicari dan tumbuh cepat. JavaScript merupakan salah satu pilihan paling tepat dalam pengembangan antarmuka web interaktif karena didukung oleh semua browser modern.

Seperti yang ditunjukkan oleh survei tahunan yang diadakan oleh Stack Overflow, sekitar 70 persen dari 72.525 Software Developer profesional menyatakan mereka menggunakan JavaScript. Selain itu, ini adalah salah satu bahasa yang paling dicari yang berarti bahwa 17,8% responden belum menggunakannya tetapi ingin mempelajarinya.

survei tahunan yang diadakan oleh Stack Overflow

Menurut data yang diberikan oleh stackshare.io, lebih dari 10400 perusahaan di seluruh dunia menggunakan JavaScript di techstack yang mereka gunakan, diantaranya adalah Facebook, Linkedin, AirBnb, dll.

Perusahaan yang menggunakan JavaScript

Begitulah kawan, JavaScript itu keren, dan oleh sebab itu Pengurus SurabayaDev ingin meningkatkan skill programming JavaScript dipandu oleh Antoni dan Arryangga.

Inti Acara Belajar JavaScript Hari ini

Materi yang dibawakan oleh Arryangga dan Antoni

Kegiatan belajar bersama kali ini berlangsung dari pukul 10.00 hinggal 17.00, cukup lama namun seru. Hal yang dipelajari oleh para pengurus Surabayadev diantaranya adalah:

  1. Apa itu front end?
  2. JavaScript Basic
    • Tipe Data
    • Array & Object Properties (Loop & Iteration)
    • DOM Manipulation
    • Events & Event Handling
    • LocalStorage
    • Fetch API
  3. Live Practice (Coding & Deploy) TODO List App dengan Vanilla JS

Source code tersedia di Github: https://github.com/surabayadev/todolist-vanillajs
(Jangan lupa di ⭐ star juga ya ?)

Antoni dan Arryangga Sedang mengajar JavaScript

Seperti yang sebelumnya, sesi akhir dari acara ini ditutup dengan diskusi langsung, setiap individu dapat memberikan pertanyaan kepada Arryangga dan Antoni, serta review acara hari ini.

Dan setelah itu masuk kepada ritual intinya yang tidak boleh ketinggalan sama sekali, foto bareng:

Foto bersama Arryangga dan Antoni di Surabayadev

Macbook Pro

Macbook merupakan salah satu device yang banyak dimiliki oleh seorang software developer, designer, dll. Menurut saya pribadi, Macbook adalah perangkat komputer yang memberikan experience sangat baik dari segi performa, touchpad, layar retina, dan masih banyak hal lainnya yang mungkin juga dirasakan oleh para Apple Fanboy.

Bagi saya pribadi, kekurangan Macbook terletak pada harga yang ditawarkan. Untuk mendapatkan sebuah Macbook dengan layar Retina Display kita setidaknya harus mengeluarkan budget minimal 12juta rupiah. Untuk tipe terbaru Macbook Pro 16inch Retina Display di bandrol dengan harga paling murah 35juta rupiah. Harga yang menurut saya sangat fantastis alias mahal bagi saya yang memiliki pendapatan biasa-biasa saja ? .

Dibalik harganya yang mahal, layar retina display yang ciamik ini tidak lepas dari sebuah permasalahan yang cukup menjengkelkan. Masalah ini sebenarnya sudah muncul lama sekali, namun Apple belum juga memberikan solusi atau bahkan pengumuman yang kongkrit untuk masalah ini. Masalah tersebut terletak pada layarnya yang kerap mengalami staingate.

Apa itu Staingate?

Staingate adalah masalah yang terjadi pada layar retina di Macbook, permasalahan ini terletak pada coating layar yang sedikit demi sedikit terkikis, masalah ini muncul karena layar yang bersentuuhan dengan keyboard, atau muncul saat dilakukan pembersihkan layar dengan cara yang kurang tepat. Hal ini menyebabkan layar sangat tidak nyaman dilihat dan sangat mengganggu, apalagi bagi seorang desainer, ye kan? ? .

Staingate Pada Macbook

Jika teman-teman membuka google untuk mencari cara menghilangkan staingate, teman-teman akan menemukan beberapa cara untuk menghilangkannya, salah satunya dengan listerine mouth wash yang belum pernah saya coba tentunya. Saya sendiri pernah mengalami staingate, namun tidak begitu parah, hanya sekedar bercak tombol keyboard yang ada di layar Macbook, dan itu sangat mengganggu dan tidak dapat dihilangkan.

Bagaimana mencegah staingate pada Macbook ?

Pepatah diatas sering kali kita dengar, dan menurut saya, petatah ini juga berlaku pada kasus ini. Apabila Macbook yang kita miliki tidak mendapatkan fasilitas replacement layar secara gratis, kita setidaknya harus mengeluarkan budget minimal 6-7jt (Macbook Pro 2016) untuk mengganti layar retina, mahal banget kan? ?

Sebelum permasalahan itu terjadi dan saya harus keluar uang yang cukup banyak, saya inisiatif melindungi layar Macbook dengan cara paling murah, yaitu dengan memasang screen guard dengan harga kisara 50-100ribu saja.

Apa itu MDSB Skin Protector?

Sebenarnya di toko online sangat banyak pilihan screen protector, namun berdasar pada pengalaman, saya sering gagal saat melakukan pemasangan screen protector. So... daripada habis uang namun hasil kurang bagus, saya percayakan kepada seseorang yang udah jago dalam memasang screen protector, ini adalah foto saat proses pemasangan:

Pemasangan Screen Protector di Macbook

Akhirnya saya percayakan lagi ke MDSB Skin Protector di Hi-tech Mall Surabaya, ini kedua kalinya saya memasang screen protector untuk Macbook, pertama pada awal tahun 2017 lalu, dan yang kedua minggu kemarin.

Alasan saya mempercayakan ke MDSB Skin Protector tidak lain karena mereka cukup profesional dalam menangani screen protector, hasilnya sangat rapih, pokoknya bagus banget, dan ada pilihan dof maupun glossy. Ini adalah hasilnya:

Hasil Pemasangan Screen Protector untuk Melindungi Staingate Pada Macbook

Hasil Pemasangan Screen Protector untuk Melindungi Staingate Pada Macbook

Ada 2 pilihan screen protector, ada yang glossy dan dof, kebetulan saya pakai glossy, karena stocknya lagi nggak ada untuk tipe 15inch. ? Jadi sekian tulisan saya tentang staingate. Terimakasih teman-teman

Banyak dari kita yang menggunakan Kerangka CSS (CSS Framework) seperti TailwindCSS, Bootstrap, MaterializeCSS, Foundation, dll. Namun sangat banyak code CSS yang mubadzir, alias tidak digunakan sama sekali.

Contoh saat kita menggunakan Bootstrap Framework, di dalamnya terdapat banyak sekali komponen seperti carousel, dropdown button, button group, dll. Namun apakah kita menggunakan semua komponen tersebut? saya rasa 90% pengguna bootstrap tidak menggunakan semua komponen yang ada.

Komponen yang tidak digunakan akan menjadi sampah, karena code css pada komponen yang tidak digunakan akan terus berada bersama dengan css pada komponen yang benar-benar digunakan.

Efek Buruk Pada Sebuah Website

Kode-kode sampah pada CSS yang tidak digunakan dapat menimbulkan efek buruk pada sebuah website, salah satunya adalah performa website itu sendiri. Website dapat mengalami penurunan loading time yang diakibatkan oleh banyaknya kode CSS maupun JS yang tidak digunakan, hal ini karena Browser harus mendownload lebih banyak resource daripada yang seharusnya.

Kita ambil contoh salah satu website di Indonesia yaitu dicoding.com, kita coba lihat pada homepage mereka, kira-kira berapa banyak sih CSS yang tidak mereka gunakan pada halaman tersebut?

CSS yang tidak digunakan pada Homepage diconding sebanyak 90%

*untuk menampilkan Coveraga, cukup buka Chrome Devtools

Saya cukup kaget melihat hasilnya, ?. Ternyata pada homepagenya hampir 90% CSS yang mereka load saat pertama kali itu tidak digunakan.

Kan halaman mereka nggak cuma homepage? Saya setuju, mereka memiliki banyak halaman selain homepage, masih banyak halaman lain lagi. Solusi yang mungkin dapat diberikan adalah dengan melakukan splitting pada CSS.

Splitting maksudnya memisah CSS menjadi beberapa bagian, dan memanggil CSS jika memang dibutuhkan, mau baca lebih lengkap tentang CSS Code Splitting? https://lihautan.com/css-code-splitting/

Apa itu PurgeCSS

CSS Code splitting rasanya terlalu advance bagi apra pemula, saya akan membahas dengan cara sederhana saja. Ada sebuah tools bernama PurgeCSS. PurgeCSS adalah sebuah development tool untuk menghapus CSS yang tidak digunakan. PurgeCSS menganalisa dan memilah konten yang kita miliki (contoh: HTML, JSX) dan file CSS.

Pada proses ini PurgeCSS mencocokkan setiap CSS selector pada file HTML, dan memilih selector yang tidak digunakan dari CSS yang kita miliki, lalu menghapusnya untuk menghasilkan file CSS yang lebih kecil.

Installasi PurgeCSS

Pastikan komputer kita sudah terinstall npm. Kita dapat menginstall PurgeCSS secara global dengan cara membuka terminal, lalu kita berikan perintah:

npm i -g purgecss

Untuk memastikan purgecss sudah terinstall secara global, kita coba berikan perintah purgecss pada terminal, jika berhasil di install maka akan keluar hasil seperti ini:

➜  kopidev ✗ purgecss
purgecss --css <css> --content <content> [option]

Options:
  --con, --content  glob of content files                                [array]
  -c, --config      configuration file                                  [string]
  -o, --out         Filepath directory to write purified css files to   [string]
  -w, --whitelist   List of classes that should not be removed
                                                           [array] [default: []]
  -h, --help        Show help                                          [boolean]
  -v, --version     Show version number                                [boolean]

Cara Sederhana

Anggaplah kita memiliki sebuah project dengan struktur sebagai berikut:

- build // folder output
- index.html
- boostrap.css

Kita buka terminal, lalu kita berikan perintah:

purgecss --css bootstrap.css --content index.html --output ./build

Penjabaran dari perintah diatas adalah purgecss memindai file CSS bernama bootstrap.css dan memindai kontent index.html , jika proses pemindaian dan penghapusan selesai, purgecss akan menyimpan hasilnya ke dalam folder build

Penerapan pada PostCSS

Kita installasi dulu library PurgeCSS untuk PostCSS:

npm i -D @fullhuman/postcss-purgecss

Kita buka file postcss.config.js dan tambahkan kode berikut:

// postcss.config.js
const purgecss = require('@fullhuman/postcss-purgecss')({
  // Specify the paths to all of the template files in your project
  content: [
    './src/**/*.js',
    './src/**/*.jsx',
    './samples/**/*.html'
    // etc.
  ],

  // Include any special characters you're using in this regular expression
  defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
})

module.exports = {
  plugins: [
    ...
    purgecss,
    ...
  ]
}

Untuk lebih lengkapnya baca disini

Penerapan pada Gatbsy

npm i gatsby-plugin-purgecss

Lalu kita tambahkan kode berikut pada gatsby-config.js:

// gatsy-config.js
module.exports = {
  plugins: [
    `gatsby-plugin-stylus`,
    `gatsby-plugin-sass`,
    `gatsby-plugin-less`,
    `gatsby-plugin-postcss`,
    // Add after these plugins if used
    { 
      resolve: `gatsby-plugin-purgecss`,
      options: {
        printRejected: true, // Print removed selectors and processed file names
        // develop: true, // Enable while using `gatsby develop`
        // tailwind: true, // Enable tailwindcss support
        // whitelist: ['whitelist'], // Don't remove this selector
        // ignore: ['/ignored.css', 'prismjs/', 'docsearch.js/'], // Ignore files/folders
        // purgeOnly : ['components/', '/main.css', 'bootstrap/'], // Purge only these files/folders
      }
    }
  ]
};

Sebelum langsung ke tutorial cara membersihkan mechanical keyboard dengan cara yang paling sederhana, saya ingin kilas balik sedikit tentang "Apa itu mechanical Keyboard?", untuk sekedar menambah wawasan bagi yang belum mengerti tentang mechanical keyboard.

Apa itu mechanical keyboard?

Mechanical keyboard adalah sebuah keyboard yang tidak menggunakan karet (membran) atau rubber dome untuk menahan setiap key pada keyboardnya.

Mechanical keyboard menggunakan pegas atau tuas mekanik dari besi yang terletak pada switch keyboard.

gambar dari keyboard mechanical

Setiap switchnya berdiri sendiri-sendiri, tidak tergantung sama lain, sehingga jika ada 1 kerusakan pada switch tertentu kita hanya perlu mengganti 1 saja.

Apa itu Membran Keyboard atau Rubber Dome?

Sedangkan ini adalah switch dari sebuah keyboard membran atau rubber dome

gambar dari keyboard membran

Jika ada kerusakan pada keyboard circuit, cara paling mudah adalah dengan membeli yang baru.

Mechanical Keyboard Milik Saya

Saya pernah memiliki mechanical keyboard TKL (Ten keyless) tanpa cursor, Cherry MX Blue Switches, dengan merek Anne Pro.

Dan itu menjadi penyesalan terbesar saya dalam membeli keyboard, bukan karena mereknya, tapi penyesalan terletak pada kurangnya kelihaian saya dalam menggunakan keyboard tanpa cursor. Saya seorang progammer, dan bagi saya cursor adalah segalanya.

Selain itu Cherry MX Blue menjadi penyesalan karena cukup berat untuk mengetik, dan BERISIK. Semua pecinta mechanical keyboard pasti sudah paham jika Cherry MX Blue adalah switch yang cukup berisik.

Keyboard yang saat ini saya gunakan telah berumur 2 tahun, keyboard ini bermerek Cherry MX Board 2.0, dengan switch Cherry MX Red Linier.

keyboard arryanggaputra

Dan menurut saya ini adalah keyboard terbaik yang saya miliki saat ini, selain cukup ringan dijari, tidak berisik, juga terlihat oldies. Karena tanpa lampu RGB yang terlihat seperti odong-odong.

https://www.youtube.com/watch?v=L0imIrewuQg

Ini adalah odong odong

Membersihkan Mechanical Keyboard

Tahun lalu saya sudah membersihkan keyboard ini, dan sekarang adalah tahun berikutnya, jadi saya membersihkan keyboard ini 1 tahun sekali. Dan ini adalah kondisi keyboard saya setelah 1 tahun tidak dibersihkan:

keyboard arryanggaputra
keyboard arryanggaputra
keyboard arryanggaputra
keyboard arryanggaputra

Alat Tempur Untuk Membersihkan Keyboard

  1. Kuas pembersih laptop
    kuas pembersih laptop
  2. Keypuller
    keypuller mechanical keyboard
  3. Cairan Pembersih Laptop
    keypuller mechanical keyboard
  4. Air sabun Sunlight. Sunlight sudah terkenal dari masa kemasa untuk membersihkan segala perabot rumah, dan juga harganya murah, karena ini tutorial sederhana, ya saya gunakan seadanya saja.
    keypuller mechanical keyboard

Memulai Pembersihan Keycaps

Hal yang pertama harus kalian lakukan adalah mencabut seluruh keycaps yang ada pada keyboard dengan keypuller. Kenapa keypuller? Ya agar lebih mudah, daripada pada kuku, bisa capek dan sakit.

Setelah seluruh keycaps tercabut, kalian cukup rendam kedalam air sabun SunLight.

merendam mechanical keyboard

Setelah direndam, kalian ambil satu persatu keycaps, dan bersihkan dengan kuas yang tadi disiapkan.

membersihkan mechanical keyboard

Setelah dibersihkan semuanya, tanpa tertinggal noda yang membandel, kalian bisa jemur dibawah terik matahari.
menjemur mechanical keyboard

Memulai Pembersihan Keyboard

Hal yang sulit adalah membersihkan bagian dalam keyboard yang tidak memiliki fitur removable switches.

Cara paling mudah adalah dengan menyemprotkan cairan pembersih laptop dari jarak 30cm, dan jangan banyak-banyak ya, cukup sampai lembab saja.

Setelah disemprot dengan cairan pembersih, kalian cukup gunakan kuas yang tadi disiapkan untuk membersihkan sela-sela keyboard. Dan menurut saya hasilnya cukup bersih.

menjemur mechanical keyboard

Setelah kita pastikan semuanya selesai, kita bilas dengan air bersih, dan pastikan tidak ada sabun yang tertinggal. Setelah itu kita dapat menjemur keyboard dibawah terik matahari.

menjemur mechanical keyboard

Merakit Kembali Mechanical Keyboard

Setelah menjemur kurang lebih 1jam, pastikan keyboard dan keycaps benar-benar dalam keadaan kering. Dan keyboard siap untuk dirangkai kembali. Begini hasil akhirnya, sangat bersih dibanding sebelumnya.

hasil membersihkan mechanical keyboard