Harpi’s Blog (@piharpi)

Mengenal metodologi BEM CSS

2020-04-26T01:00:00+07:00

There are only two hard things in Computer Science: cache invalidation and naming things. – Phil Karlton.

TL;DR

Konvensi penamaan suatu hal pada pemrograman — memang terkadang menjadi masalah, sering membuat kerumitan programmer dan koléga-nya, termasuk memberi nama class selector CSS, hal yang sepele tapi ternyata bisa menjadi senjata makan tuan ketika bekerja dengan skala file CSS yang besar.

Sering terjadi; suatu ketika membuka file project yang semula kita paham dengan baris kode yang ditulis; seketika juga lupa apa maksud baris kode tersebut, kemungkinan dikarenakan struktur kode yang berantakan, penamaan class selector yang tidak memilki arti/makna yang jelas dan juga tidak memiliki kekonsistenan gaya penulisan, sehingga hanya Tuhan saja yang mengetahui maksud baris kode tersebut.

Beruntungnya terdapat beberapa metodologi CSS yang bisa digunakan untuk mengatasi masalah di atas yaitu; SMACSS, OOCSS, SUITCSS, Atomic dan BEM yang mana akan dibahas tulisan ini.

Metodologi BEM hadir bertujuan untuk menyelesaikan permasalahan di atas yaitu naming convention/konvensi penamaan dan struktur pada classes di HTML dan CSS, sehingga kode dapat dipahami dengan mudah oleh developer, BEM ini dikembangkan oleh Yandex perusahaan teknologi asal Rusia, BEM termasuk metode yang sering dipakai para developer saat ini karena memilki beberapa benefits: modularity, reusabililty dan structure.

Dive in BEM

BEM sendiri merupakan singkatan dari Block, Element, Modifier dari tiga kata tersebut miliki konsep kerja masing-masing, namun sebelum menjelaskan konsep itu, saya akan memberikan ilustrasi pengimplementasian BEM supaya lebih mudah dipahami.

Katakanlah saya akan membuat sebuah komponen yang saya beri nama card yang mana komponen ini memiliki gambar background, user avatar, deskripsi singkat dan footer yang berisi external link (github, twitter), berikut ini ilustrasi dalam bentuk hand draw.

Fig 1. Konsep yang akan diterapkan dengan BEM CSS.

Dari gambar di atas saya akan menjelaskan mana yang bagian block, element dan modifier, berikut ini penjelasanya:

Block merupkan entity yang berdiri sendiri, memiliki makna dirinya sendiri, pada gambar di atas bahwa card bertindak sebagai wrapper(pembungkus) dari element yang didalamnya, aturan penamaan block ialah .namablock, maka block card menjadi .card

Element bagian dari Block yang tidak berdiri sendiri dan secara semantic bergatung pada Block, contoh pada gambar di atas : background, avatar, title, description, footer merupakan bagian-bagian dari .card, karena posisinya berada didalam Block .card, aturan penamaan menggunakan double underline(__) setelah nama block diikuti nama element .namablock__namaelement maka masing-masing element tersebut .card__background .card__avatar .card__title .card__description .card__footer.

Modifier sebuah state yang ditugaskan untuk melakukan pengubahan behaviour (bentuk, penampilan, ukuran) dari Block ataupun Element. Katakanlah saya ingin mengubah penampilan yang semula avatar kotak menjadi avatar berbentuk radius circle/melingkar, aturan penamaan modifier ini menggunakan double hyphen(--) setelah nama Block atau juga Element, dan diikuti nama modifiernya .namablock__namaelement--namamodifier maka yang dihasilkan .card__avatar--circle.

*) Kita bisa membuat skema penamaan sendiri, yang terpenting skema tersebut dapat membedakan antara block, element, modifier, yang mana sudah menjadi ketentuan dari metodologi BEM, pada tulisan ini skema penamaan mengacu pada Two Dashes Style.

Fig 2. Ilustrasi implementasi BEM CSS.

Jika ilustrasi di atas kita tuliskan di CSS, hasil penyusunan struktur class selector akan lebih terlihat tegas, mempunyai makna yang jelas, karena setiap class selector memilki peran dan saling berkaitan.

// Block tanpa ada simbol apapun,
// sebagai inti komponen
.card {
}

// Element adalah bagian dari Block
// Element tanda underscore 2 kali
// diikuti nama element setelah block
.card__background {
}
.card__avatar {
}
.card__title {
}
.card__description {
}
.card__footer {
}

// Block lagi
.link {
}

// Modifier mengubah behaviour Block atapun Element
// Penamaan Block dengan Modifier,
// 2 hyphens setelah block ataupun setelah element
.link--blue {
}
.link--light {
}

// Block dan Element dan Modifier jika digabung
.card__avatar--circle {
}
.card__avatar--rounded {
}

Pros and Cons

Pro, BEM jelas less-confusing, dengan adanya Block sebagai inti komponen(wrapper), Element bagian dari block, dan Modifier sebagai pengubah behaviour, kita bisa mengerti peran masing-masing class selector dan setiap class selector memilki penamaan unique/unik, sehingga kita tidak lagi mengalami konflik dengan nama class selector yang lain (Modularity).

Jika suatu nama block sudah tersedia, maka seharusnya itu dapat digunakan kembali sehingga tidak terjadi duplikasi nama class selector, juga memiliki gaya penulisan yang konsisten dan akan mengurangi jumlah baris css yang ditulis (Reusabilty).

Struktur gaya penulisan nama class selector yang sederhana tetapi jelas, mempermudah developer untuk bisa mengingat kembali kode yang ia tulis ataupun pada saat prosses debugging (Structure).

Kontra, harus melakukan nesting/repeated penamaan, dan harus memberikan double-underscore(__) atau double-hyphen(--) pada saat pemberian nama class selector; yang mana beberapa orang tidak menyukai, dan suatu saat nama class selector akan semakin panjang tergantung pada nama block dan elemen yang digunakan.

Solusi Kontra, dapat diatasi dengan menggunakan preprocessor Sass, sehingga selector tidak terlalu panjang, akan terlihat lebih rapi dan lebih tersetruktur, namun underscore dan hyphen sebagai pembeda antara block, element, modifier harus tetap digunakan yang mana bagian dari konsep BEM.

.card {
  &__background {
  }
  &__avatar {
    &--circle {
    }
    &--rounded {
    }
  }
  &__title {
  }
  &__description {
  }
  &__footer {
  }
}

.link {
  &--blue {
  }
  &--light {
  }
}

Implementasi class selector yang sudah dibuat pada HTML, bisa ditebak apa yang terjadi dengan .card__avatar--circle? dapat dijelaskan bahwa modifier --circle akan mengubah element __avatar yang dimiliki oleh block .card menjadi berbentuk bulat, cukup meaningful bukan?

<!-- Block .card sebuah inti component card -->
<div class="card">
  <!-- Element .card__background bagian dari block .card -->
  <div class="card__background"></div>

  <!-- Element .card__avatar bagian dari block .card -->
  <!-- Modifier .card__avatar--circle
  mengubah bentuk Element .card__avatar menjadi bulat -->
  <img
    class="card__avatar card__avatar--circle"
    src="https://harpi.rocks/assets/img/avatar.jpg"
    alt="Mahendrata Harpi"
  />

  <!-- Element .card__title bagian dari block .card -->
  <h1 class="card__title">Mahendrata Harpi</h1>

  <!-- Element .card__description bagian dari block .card -->
  <p class="card__description">
    He's write in Bahasa about what interests him and as a journal for
    documentation things that he learned.
  </p>

  <!-- Element .card__footer bagian dari block .card -->
  <div class="card__footer">
    Follow me on

    <!-- Block .link component -->
    <!-- Modifier .link--light mengubah warna .link menjadi putih -->
    <a
      class="link link--light"
      href="http://github.com/piharpi"
      target="_blank"
      rel="noopener noreferrer"
      >GitHub</a
    >
    or
    <!-- Block .link component -->
    <!-- Modifier .link--blue mengubah warna .link menjadi biru -->
    <a
      class="link link--blue"
      href="http://twitter.com/piharpi"
      target="_blank"
      rel="noopener noreferrer"
      >Twitter</a
    >
  </div>
</div>

Output Learning

Dibawah ini merupakan hasil komponen card yang saya buat berdasarkan konsep di atas, sengaja tidak saya lampirkan CSS karena terlalu panjang nantinya, namun hasil dan source code bisa diakses disini atau playground dibawah ini.

Embed Hasil dari metodologi BEM CSS

Conclusion

BEM adalah sebuah metode naming convention yang bertujuan menulis secara jelas selector/classes sehingga memiliki makna yang tegas, tujuan penamaan dapat diprediksi(predictable), sehingga sesama rekan kerja mempunyai standar penulisan yang jelas, dan tidak saling membingungkan.

menggunakan BEM memang bukan sebuah keharusan, kembali pada hal yang dikerjakan apakah sebuah pekerjaan skala kecil dan apakah tanpa BEM pekerjaan bisa maintainable atau sebaliknya, atau tergantung preferensi masing-masing.

Namun, menurut opini saya menggunakan BEM kode css menjadi lebh rapi, memiliki aturan penulisan yang sama antar rekan kerja, mencegah terjadinya redundansi kode css, karena tingkat CSS specifity yang jelas.

Masih pengen gali lebih dalam tentang BEM? kunjungi situs resminya.

Resources

Cara ribet memperbarui forked repo

2020-01-29T01:00:00+07:00

Berawal dari saya pengen memperbarui repo yang tua dari suatu organisasi, niatnya pengen rumat ulang nih, ternyata dari orginal reponya ada update, sekalian buat artikel deh, lebih kurang gambaranya seperti ini.

Figure 1. Diagram repository

Ada dua cara untuk memperbarui forked repository menggunakan web interface yang disediakan oleh github tapi ribet, atau melalui terminal yang lebih ribet lagi.

Melalui Github (boring way) 😾

Buka repo yang hasil fork di Github.
Klik Pull Requests di sebelah kanan, lalu New Pull Request.
Akan memunculkan hasil compare antara repo upstream dengan repo kamu(forked repo), dan jika menyatakan “There isn’t anything to compare.”, tekan link switching the base, yang mana sekarang repo kamu(forked repo) akan dibalik menjadi base repo dan repo upstream menjadi head repo.
Tekan Create Pull Request, beri judul pull request, Tekan Send Pull Request.
Tekan Merge Pull Request dan Confirm Merge.

*) pastikan kamu tidak merubah apapun pada forked repo, supaya melakukan merge secara otomatis, kalo tidak ya paling2 konflik.

Melalui terminal ⌨️

Tambahkan remote alamat repository yang aslinya disini tak beri nama upstream., ganti ORIGINAL_OWNER dan ORIGINAL_REPO dengan alamat repo aslimu.

$ git add remote upstream git@github.com:ORIGINAL_OWNER/ORIGINAL_REPO.git
$ git remote -v
> origin git@github.com:piharpi/www.git (fetch) # forked repo
> origin git@github.com:piharpi/www.git (push) # forked repo
> upstream git@github.com:ORIGINAL_OWNER/ORIGINAL_REPO.git (fetch) # upstream repo / original repo
> upstream git@github.com:ORIGINAL_OWNER/ORIGINAL_REPO.git (push) # upstream repo / original repo

Checkout ke local branch master.

$ git checkout master
> Switched to branch 'master'

Jika sudah, Merge local repo dengan remote upstream/master.

$ git merge upstream/master

Terakhir push local repo ke remote origin.

$ git add -A
$ git commit -m "updating origin repo" && git push -u origin master

Selamat mencoba cara ribet ini, semoga bisa dipahami, saya sendiri lebih senang melalui terminal, klo ada yang ribet kenapa cari yang mudah.

Resources

Mengenal shell di lingkungan Linux

2020-01-25T11:58:47+07:00

Dulu Sebelum adanya GUI cara kita berinteraksi dengan komputer menggunakan CLI yaitu mengetik baris perintah pada sebuah antarmuka dalam bentuk baris teks seperti 👇, namun saat ini penggunaan CLI juga masih sering digunakan khususnya dikalangan para developer.

Fig 1. Terminal emulator, instalasi package dan check service.

Jika kamu pernah menggunakan unix/linux, mungkin pernah menggunakan program diatas, atau setiap hari menggunakannya untuk mengeksekusi suatu perintah melalui terminal emulator.

Pernahkah kita berpikir 🤔️ bagaimana perintah tersebut bisa dipahami oleh komputer?. Kita^[1] tidak bisa secara langsung berkomunikasi dengan sebuah hardware komputer, maka dari itu kita membutuhkan sebuah sistem operasi, dalam sebuah sistem operasi terdapat kernel; Kernel salah satu bagian program dari sistem operasi komputer, yang bertindak menjembatani antara perangkat lunak dengan perangkat keras.

Fig 2. Bagan kernel.

Kernel memfasilitasi interaksi antara komponen perangkat keras dan perangkat lunak, berperan untuk menangani permintaan input/output dari perangkat lunak, selanjutnya menerjemahkannya ke dalam pemrosesan data untuk diinstruksikan ke CPU, sehingga Hardware(cpu, memory, devices) mengerti perintah yang dimaksud dari pengguna.

Ketika kita memberikan suatu perintah pada terminal emulator, kernel tidak langsung mengerti perintah yang kita berikan, disini membutuhkan suatu interface sebagai perantara menuju kernel yaitu Shell.

Fig 3. Bagan komunikasi shell.

Shell adalah sebuah command-line interpreter; program yang berperan sebagai penerjemah perintah yang diinputkan oleh User yang melalui terminal, sehingga perintah tersebut bisa dimengerti oleh si Kernel.

Login shell biasanya ditetapkan oleh local System Administrator ketika pada saat pertama user kamu dibuat, kamu bisa lihat login shell yang sedang kamu gunakan dengan perintah dibawah ini.

$ echo $SHELL
# atau
$ echo $0

Setiap shell mempunyai default prompt. beberapa shell yang paling umum:

$ (dollar sign)   # sh, ksh, bash
% (percent sign)  # csh, tcsh

Terminologi pada shell prompt

Shell prompt adalah tempat dimana kita menuliskan suatu perintah, berikut adalah terminologinya ini membantu, jika kamu ingin mengetahui bagian-bagianya.

Fig 4. Bagian-bagin dari shell prompt.

Dibawah ini salah satu contoh perintah sederhana untuk menampilkan sebuah arsitektur CPU komputer yang sedang saya gunakan.

Fig 5. Menampilkan informasi tentang arsitektur CPU.

Dari perintah yang contohkan diatas, ketika mengetikan suatu inputan perintah di terminal dan menekan ENTER, maka shell akan mengubah perintah yang diberikan menjadi bahasa yang bisa dipahami oleh kernel, dan Kernel menerjemahkannya ke dalam pemrosesan data untuk diintruksikan ke Hardware sehingga menghasilkan output yg sesuai dengan perintah user.

Shell mempunyai beberapa macam dan turunan, berikut yang paling umum.

Fig 6. Perkembangan shell dari tahun ke tahun.

Sedikit penjelasan dari gambar diatas.

Bourne shell sh Dikembangkan oleh Stephen Bourne di Bell Labs, yang kala itu sebagai pengganti Thompson shell(diciptakan Ken Thompson), banyak sistem unix-like tetap memiliki /bin/sh—yang mana menjadi symbolic link atau hard link, bahkan ketika shell lain yang digunakan tetap sh adalah sebagai dasarnya, sebagai kompatibilitas perintah.
Korn shell ksh Unix shell yang dikembangkan oleh David Korn di Bell Labs, inisialisasi pengembangan ini berdasar pada source code Bourne shell, namun juga memiliki fitur csh dan sh, pengembanganya pun pada saat saya menulis ini pun terus terawat.
Bourne again shell bash adalah proyek ini open source GNU project memiliki kompatibel dengan sh yang menggabungkan fitur penting dari ksh dan csh, dan menjadi salah satu shell yang paling umum digunakan (umumnya menjadi default shell login Linux dan Apple’s macOS Mojave).
Z shell zsh ini mempunyai wadah komunitasnya disebutnya “Oh My Zsh”, plugin dan theme zsh bisa kita temukan di komunitas ini, saya saat ini menggunakan zsh, shell ini juga menjadi default dari sistem operasi macOS Catalina, yang menggantikan bash.
friendly interactive shell fish yah sesuai dengan deskripsi di web nya, menurut saya shell ini fun banget, fitur yang saya sukai dari shell ini autosuggestions, dan konfigurasi yang mudah melalui web based.

Masih banyak yang belum dijelaskan pada tulisan ini jika masih tertarik, baca lebih banyak dan juga komparasinya masing-masing shell.

Jika kamu tertarik untuk mengubah default shell login pada sistem operasi, kamu bisa menginstall dengan cara mengikuti didokumentasi/cara penginstalan masing-masing shell disini saya tidak membahas karena distro yang kita pakai mungkin berbeda-beda.

Untuk menjadikan default shell login pada OS bisa menggunakan perintah ini.

# command
$ sudo chsh [options] [LOGIN]

# contoh penggunaan
$ sudo chsh -s /user/bin/zsh harpi
# mengubah default shell user harpi menjadi zsh shell.
$ reboot

# atau kamu juga bisa mengubah file /etc/passwd dan edit secara manual user shellnya.
# jika masih bingung manfaatkan perintah man untuk melihat manual page.
$ man chsh

Terakhir untuk tulisan ini, shell memiliki berbagai macam, pilihlah shell yang sesuai dengan keinginanmu untuk menunjang produktivitas dan sesuaikan dengan kebutuhan, terlalu banyak plugin dan kebingungan memilih theme itu buruk 😁.

Terimakasih sudah baca, penulis menerima kritik dan saran.

Resources

How this site was born

2018-09-28T09:45:47+07:00

The website was made using Jekyll the one of open source static sites generator, and using my own simple theme, I called klisé.

All the services are free, source code the site was placed on my github repository privately and intergration with ~~netlify~~ service, another service that you can use is github page and vercel for hosting your own static site.

Let’s do this

So, before we begin creating a site, you need some tools, you can self paced for how to installing each tools, on this guide i’m just want to show you how to install jekyll and deploying in netlify, but make sure you have each tools below.

Prerequisites

Requirements before we doing magic show.

Ruby programming language
Git (version control)
Netlify and Github account
Bundler

Installation

First, you need some SSG, there are many kind ssg, but in case i’m using Jekyll cause i’m already familiar with it, open your terminal and type command on below

$ bundle install jekyll # installing jekyll in your machine
$ jekyll new my-site && cd my-site # create new jekyll project
$ jekyll s # run jekyll server

Now, jekyll is running on your local machine, open your browser and go to localhost:4000 is default address from jekyll, press CTRL + C to stop the jekyll server.

Adding remote repository

Before we adding remote repository, you must have github repository, if already have repository, just add github remote address to your local folder, with the following commands

$ git init # initializing project folder
$ git remote add origin https://github.com/YOUR-USERNAME/YOUR-REPO.git # change UPPERCASE with your own!
$ git add -A && git commit -m "Initialize" && git push -u origin master # push code to github

Now check your github repository, make sure the files is uploaded correctly.

Deploying to netlify

Go netlify dashboard, and following this step.

click new site from git, then choose Github.
then choose your repository where is the jekyll sources uploaded.
netlify smart enough to configuring, we just need’s to click Deploy site button.

Wait for moment, and voila..! your site’s are hosting and using .netlify.com tld, if your website wants to look professional, just buy a domain from your favorite domain store. or if you the first time, I advice using namecheap.com(isn’t sponsor) *based on my experienced it provides good service and have various TLDs.

So, what you waiting for, just create your own website for free.