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?

^{*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.

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

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.

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:

Alat Tempur Untuk Membersihkan Keyboard

1. Kuas pembersih laptop
   
2. Keypuller
   
3. Cairan Pembersih Laptop
   
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.
   

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.

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

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

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.

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.

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.

Menurut statistik yang diambil dari https://gs.statcounter.com/browser-market-share, browser safari setidaknya memiliki 15% pengguna dari seluruh total pengguna internet. Angka 15% cukuplah besar, oleh karenanya kita perlu peduli melakukan testing website kita di safari agar kita memiliki gambaran bagaimana experience website kita di pengguna browser safari.

Apakah melakukan testing di Chrome Browser sudah cukup?

Tidak bro, kalau cuman di test di browser Chrome sangat tidak cukup. Kenapa perlu di test di browser safari? Selain jawabannya ada di paragraf diatas, yang harus kita ketahui adalah browser safari dan browser Chrome menggunakan Engine yang berbeda dalam merender sebuah web. Kira-kira seperti ini daftarnya:

Bagaimana cara instalasi Safari Browser di Linux?

Jadi yang perlu kita perhatikan adalah pada engine yang digunakan, karena safari menggunakan Webkit engine, dan safari tidak dapat di install di Linux, cara paling mudah yang dapat kita lakukan adalah menginstal browser yang menggunakan Webkit engine di Linux. Dan browser yang dapat di install bernama browser Gnome Web

Browser Gnome Web

Browser Gnome Web pada mulanya disebut dengan browser Epiphany hingga 2012. Gnome web sendiri adalah browser web gratis dan open-source berbasis WebKitGTK, yang dikembangkan oleh GNOME, dan ini adalah default browser untuk GNOME.

Cara installnya gampang banget, kalian tinggal menuju ke https://snapcraft.io/epiphany disana ada tombol installnya kok. ?

Segini dulu artikel dari saya, dan jika artikel ini dirasa membantu kalian, share ya,atau jika ada yang perlu saya koreksi, saya dengan senang hati menerima masukan. Terimakasih.