Bukan Blogazine

Oleh karena itulah Aku harus tegas memutuskan bahwa blog ini sama sekali bukan Blogazine. Melainkan lebih luas lagi dan bisa dibilang sudah tidak standar. Aku lebih suka menyebutnya sebagai blog art direction yang tidak memiliki aliran khusus. Selama desain yang Aku buat cocok dengan isi tulisannya, maka Aku akan melanjutkannya.

Walaupun begitu, hal ini bukanlah alasan utama yang membuatku menulis jurnal khusus yang aneh ini, yang bisa dibilang sangat keluar jalur dari tujuanku membangun jurnal pribadi ini sejak awal. Tidak semua hal harus sesuai dengan rencana, terlebih jika waktu telah berlalu dan membuat beberapa hal menjadi lebih baik. Selama ada hal penting yang harus disertakan, maka kenapa tidak disertakan? Yang penting jangan terlalu mencolok sehingga akan mengalahkan konten-konten yang lain. Itu sih menurutku.

Aku menulis ini untuk mendokumentasikan keputusan akhir yang tegas mengenai standar arsitektur blog ini untuk memastikan agar desain-desain posting di hari-hari berikutnya tetap stabil mengikuti standar yang Aku buat sendiri supaya Aku tidak plin-plan lagi dalam memodifikasi framework blog ini.

Penulisan Nilai Atribut HTML dan Selektor CSS

Kunyatakan bahwa standarisasi layout blog sudah mencapai hampir 100%. Setiap atribut kelas dan ID pada masing-masing elemen di dalam blog ini dinyatakan dengan nama yang logis dan berbahasa Inggris. Jika nama tersebut terdiri lebih dari satu kata, maka setiap kata akan dipisahkan dengan simbol hyphen dan bukan uderscores atau CamelCase. Bukan #outerwrapper, bukan #outerWrapper maupun #outer_wrapper melainkan #outer-wrapper

Berikut ini adalah daftar elemen utama dengan ID dan kelas yang sudah standar:

Berikut ini adalah beberapa elemen yang paling sering ditimpa CSS baru untuk menciptakan desain posting tunggal:

Berikut ini adalah nama kelas elemen baru yang akan ditambahkan saat JavaScript aktif dan saat panel komentar sedang terbuka:

Pengecualian

Tidak ada standar penulisan kelas dan ID pada selektor CSS jika itu merupakan bawaan dari plugin atau framework tertentu. Misalnya .nivoSlider atau .mCSB_horizontal. Aku tidak mungkin memodifikasi setiap nama kelas dan merombak seluruh plugin hanya untuk memenuhi obsesiku dalam menuliskan nama-nama kelas dan ID elemen dengan hyphen. Gila!

Selain itu, jika kasusnya berhubungan dengan pengurutan kelas atau ID yang saling terkait atau memiliki pola yang standar dalam kasus yang spesifik, mungkin Aku akan menuliskannya seperti ini:

#foo-bar_1 { /* baz */ }
#foo-bar_2 { /* baz */ }
#foo-bar_3 { /* baz */ }
#foo-bar_4 { /* baz */ }
#foo-bar_5 { /* baz */ }

Selalu usahakan untuk tidak memakai huruf besar, kecuali jika huruf tersebut bukan berupa kata yang memiliki makna dan datangnya setelah angka:

.foo-bar_a-10 { /* baz */ }
.foo-bar_a-11 { /* baz */ }
.foo-bar_a-12 { /* baz */ }
.foo-bar_a-13 { /* baz */ }
.foo-bar_a-14 { /* baz */ }

.foo-bar_1AB {}
.foo-bar_1AC {}
.foo-bar_1AD {}

Perfeksionis setengah mampus!

Skala dan Ukuran

Ukuran font global adalah 100%. Turun ke body menjadi .875em atau sekitar 14px. Sudah sepakat dengan skala elemen heading seperti ini:

h1 {font-size:315%}
h2 {font-size:270%}
h3 {font-size:200%}
h4 {font-size:180%}
h5 {font-size:150%}
h6 {font-size:120%}

line-height font global adalah 1.375em dan akan normal kembali pada elemen heading. Ukuran heading kolom arsip halaman muka, heading komentar dan heading widget menyesuaikan. Tidak ada standar khusus.

Jarak masing-masing paragraf adalah 1.5em, termasuk juga tabel, tag <pre>, elemen daftar dan description list.

Pematian Ukuran

Terjadi pematian ukuran navigasi utama, bulan terbit, navigasi halaman dan footer yang untuk alasan tertentu Aku harus membuat ukurannya dalam satuan piksel sehingga ukuran elemen tersebut tidak akan terpengaruh jika Aku mengubah ukuran huruf pada elemen.

1. Ukuran font navigasi adalah 10px dengan line-height sebesar 30px. padding masing-masing item navigasi adalah 0 12px.
2. Ukuran dan tipe font waktu penerbitan posting disamakan dengan ukuran dan tipe font pada navigasi utama, karena posisi waktu penerbitan berada menyatu dengan navigasi utama. Posisi right bukan 12px melainkan 15px.
3. Ukuran font navigasi halaman dan footer adalah 10px dengan line-heigt sebesar 16px. Ukuran padding dimatikan ke 11px 18px.

Font Standar

Font Utama: Palatino Linotype sampai mati!
Font Heading: Georgia sampai mati!

body {
  font-family:Palatino,"Palatino Linotype","Palatino LT STD","Book Antiqua",Georgia,"URW Bookman L",Serif;
}

h1,h2,h3,h4,h5,h6 {
  font-family:Georgia,"URW Bookman L",Serif;
}

Tidak boleh menggunakan @font-face!!!

Selamat Tinggal Google Web Fonts!

Setelah kupikir-pikir, font yang dimuat secara langsung dari direktori Google Web Fonts ternyata tidak bagus. Kebanyakan ukurannya tidak sesuai dengan font fallback yang Aku tentukan di belakangnya sehingga akan membuat tampilan huruf menjadi terlalu kecil atau terlalu besar ketika font gagal dimuat atau belum sempat termuat. Aku tidak bilang kalau font-font yang ada di sana itu jelek, hanya saja kualitas font yang tersimpan di Google terasa tidak sesuai dengan yang Aku inginkan. Aku lebih suka mengunduh font secara langsung dari direktori font Google di sini, kemudian mengunggah ulang font-font tersebut dengan skala font yang sudah disesuaikan melalui generator @font-face. Ternyata, kualitasnya jadi lebih bagus dan lebih cepat termuat, dibandingkan dengan font yang ditransfer secara langsung dari Google Web Fonts

JQuery 1.7.2 Sampai Mati!

Ini kasus! Setelah beberapa waktu yang lalu Aku sempat mengganti versi JQuery menuju ke versi terbaru, ternyata beberapa bagian fungsi menjadi tidak bekerja. Setelah diteliti ternyata blog JQuery mengumumkan bahwa beberapa fitur yang sudah usang benar-benar telah disingkirkan. Itu artinya, mengubah versi JQuery akan memicu risiko yang sangat besar terhadap posting-posting lama di blog ini. Mengapa? Karena sekali saja Aku mengganti versi JQuery, maka Aku juga harus mengetes ulang beberapa plugin terkait dengan JQuery pada masing-masing posting. Mengetes ulang apakah mereka masih bekerja dengan versi JQuery yang sekarang atau tidak.

Kabar buruknya adalah, memutuskan untuk memiliki blog dengan desain yang unik pada setiap posting tunggal telah memaksaku untuk membuka ulang semua posting lama yang sudah terbit hanya untuk mengetes kerja plugin-plugin dan deklarasi JQuery yang kutuliskan pada masing-masing posting. Dan lebih buruknya lagi, itu baru satu peramban saja. Untuk memenuhi standar web yang baik, setidaknya Aku harus mengetesnya pada lima peramban sekaligus! Dan itu baru desktop. Bagaimana dengan seluler??!! WAAARRRGGGHHHH!!!!

Kesimpulan

Aku akan tetap menggunakan JQuery versi 1.7.2 meskipun terdapat pembaharuan-pembaharuan baru dari dokumentasi. Tapi… di satu sisi Aku juga tidak boleh ketinggalan info.

Jadwal Pencegahan

Pertama, Aku harus mengunduh framework JQuery versi 1.7.2, baik yang sudah dikompres maupun yang masih asli dari CDN Google, untuk berjaga-jaga kalau sampai CDN Google hancur karena kebanjiran atau tenggelam dikarenakan lumpur Lapindo, setidaknya Aku masih punya duplikatnya di komputer. Setelah itu Aku akan tetap mengikuti dokumentasinya di API JQuery. Selalu mengetes plugin-plugin yang diunduh dengan JQuery 1.7.2, selalu memodifikasi plugin yang diunduh dan bukan hanya sekedar pasang tempel saja.

Mencoba untuk menambahkan fitur-fitur yang ada pada JQuery versi terbaru sebagai plugin terpisah jika memang diperlukan. JQuery 1.7.2 sudah bagus dan stabil. Lagipula, ada angka tujuh di tengahnya. Itu angka favoritku. Jangan diambil!

Pola Penulisan CSS-ku Saat Ini

Setelah cukup lama mempelajari CSS secara mandiri, sepertinya sekarang Aku lebih terfokus ke pola penulisan dibandingkan dengan CSS itu sendiri. Dan berikut ini adalah pola-pola yang masih bisa kuingat:

Dua spasi untuk indentasi dan hilangnya spasi setelah simbol : dan ,

#foo {
  property:value;
  property:value;
  &:hover {
    property:value;
    property:value;
  }
  property:value;
  property:value;
}

#bar {
  color:rgba(0,0,0,0);
  background-image:linear-gradient(top,#ffa500,#992363);
}

Membuang satuan pada nilai berupa 0 dan juga menghapus angka 0 di depan angka bertipe desimal:

#foo {
  color:rgba(0,0,0,.5);
  margin:0 auto 10px;
}

Mewajibkan tanda petik pada nama font yang memiliki spasi atau nama font dengan angka dan titik. Tetap menggunakan huruf awal kapital pada nama font fallback:

body {
  font-family:"Lobster 1.3","Bebas Neue",Bebas,Sans-Serif;
}

Mewajibkan tanda petik pada nilai url() dan nilai selektor atribut:

.site-logo:before {
  content:url("/favicon.ico");
}

abbr[title="212"] {}

Langsung menuliskan resolusi tanpa keyword screen pada Media Queries:

@media (max-width:800px) {}

Meluruskan selektor CSS yang hanya memiliki satu deklarasi dan membuang semicolon di bagian akhir. Menciptakan jarak pada masing-masing selektor dengan dua baris dan menjadikannya satu baris jika dua buah selektor yang berdampingan merupakan selektor dengan deklarasi tunggal. Memisahkan setiap selektor dengan satu baris jika sedang berada di dalam @rule:

#foo {
  property:value;
  property:value;
}

#bar {
  property:value;
  property:value;
}

.baz-1 {property:value}
.baz-2 {property:value}
.baz-3 {property:value}

@media (max-width:800px) {
  #foo {
    property:value;
    property:value;
  }
  #bar {
    property:value;
    property:value;
  }
  .baz-3 {property:value}
}

Memindahkan selektor-selektor yang panjang ke baris baru pada kasus penggabungan deklarasi:

#fooooooooo,
#baaaaarrrrr,
#brooooottttt {
  property:value;
  property:value;
}

Apa lagi ya? Lupa.

Kotak Ingkar Janji