Nge-escape satu-satu tiap karakter spesial kalau ada banyak dan stringnya panjang apalagi multiline itu merepotkan, bisa jadi malah ada yang kelewat (mana nih yang belum ke-escape?). Untungnya di C# ada fitur yang membuat penulisan string diinterpretasikan apa adanya, jadi tidak memperdulikan karakter-karakter khusus yang biasa diawali backslash (\).

Menurut buku Tatang Sutarma, ada dua bentuk penulisan string yang didukung C# yaitu regular (biasa) dan verbatim. Nah bentuk yang kedua inilah yang saya maksudkan, cukup dengan menuliskan karakter @ sebelum tanda kutip pembuka menandakan bahwa kita tidak memperdulikan berbagai macam escape (kecuali untuk karakter tanda kutip yang harus ditulis dalam bentuk double-double-quote seperti ini -> “”).

Sebagai contoh perbandingan, di bawah ini saya memiliki sejumlah baris kode JavaScript dalam bentuk string yang ingin saya assign ke sebuah property bertipe string di C# dengan penulisan regular:

RowSelectionModel1.Listeners.RowSelect.Handler =
    "#{GridPanel1}.selModel.getSelected();" +
    "var baris = Ext.data.Record.create([" +
    "    {name: \"Id\"}," +
    "    {name: \"Path\"}" +
    "]);" +
    "var tambahan = new baris({" +
    "    id: Ext.id()," +
    "    Id: record.data.Id," +
    "    Path: \"~\\App\\XML\\\" + record.data.Nmfile + \".xml\"" +
    "});" +
    "parent.#{GridPanel1}.getStore().add(tambahan);";

Dengan mengubah penulisan stringnya ke bentuk verbatim, selain tidak perlu mengescape karakter-karakter khusus juga kita bisa menggunakan penulisan multiline. Lihat bagaimana penulisan dalam bentuk ini mengimprove readability dari kode di atas:

RowSelectionModel1.Listeners.RowSelect.Handler =
  @"#{GridPanel1}.selModel.getSelected();
    var baris = Ext.data.Record.create([
        {name: ""Id""},
        {name: ""Path""}
    ]);
    var tambahan = new baris({
        id: Ext.id(),
        Id: record.data.Id,
        Path: ""~\App\XML\"" + record.data.Nmfile + "".xml""
    });
    parent.#{GridPanel1}.getStore().add(tambahan);";

Continue reading ‘Verbatim String Literal di C#’



Menurut buku Tatang Sutarma, berbagai tipe di C# pada hakikatnya dapat dibagi menjadi beberapa kategori yakni value type, reference type, dan pointer type.

Value type meliputi hal-hal seperti enum, struct, int, float, decimal, char, bool, dll. Sedangkan reference type meliputi seluruh tipe class, interface, delegate, dynamic, object, maupun string. Adapun yang menjadi perbedaan utama dari kedua tipe tersebut adalah pada bagaimana representasi dan perlakuannya di memory.

Representasi dari setiap variabel yang bertipe value di memory adalah berupa nilainya, sedangkan tipe nilai reference di memory direpresentasikan dalam bentuk “reference” dan “object” (yang berisi nilainya).

Setiap assignment dari suatu instance ke instance lain pada value type selalu membuat kopian nilainya ke instance baru, sedangkan assignment pada reference tidak ikut mengkopi objeknya namun hanya membuat kopian referencenya saja sehingga keduanya merujuk pada object yang sama.

Untuk melihat bagaimana perbedaan diantara keduanya dapat memberikan perbedaan di dunia nyata, kita lihat pada program berikut ini:

using System;

namespace Program
{
  public struct Tatang
  {
    public int X;
    public int Y;
  }

  public class Sutarma
  {
    public int X;
    public int Y;
  }

  class Program
  {
    static void Main(string[] args)
    {
      Tatang P1 = new Tatang();
      Tatang P2 = new Tatang();
      P1.X = 1;
      P2 = P1;
      P2.X = 2;
      P2.Y = 2;
      P1.Y = 1;

      Sutarma P3 = new Sutarma();
      Sutarma P4 = new Sutarma();
      P3.X = 3;
      P4 = P3;
      P4.X = 4;
      P4.Y = 4;
      P3.Y = 3;

      Console.WriteLine("Hasil\n============");
      Console.WriteLine("Nilai P1: {0}, {1}", P1.X, P1.Y);
      Console.WriteLine("Nilai P2: {0}, {1}", P2.X, P2.Y);
      Console.WriteLine("Nilai P3: {0}, {1}", P3.X, P3.Y);
      Console.WriteLine("Nilai P4: {0}, {1}", P4.X, P4.Y);
      Console.ReadLine();
    }
  }
}

Tebak berapa saja nilai outputnya? yap betul!

Demikianlah, jadi bisa tahu kenapa begini kenapa begitu ingin ini ingin itu banyak sekali..

Lalu bagaimana dengan tipe pointer? masih menurut buku Tatang Sutarma lagi, pointer type pada memory direpresentasikan tidak berisi nilai dari variabelnya melainkan address (alamat palsu) memory dimana isi dari variabel tersebut berada. Tipe ini hanya mungkin pada konteks blok program yang unsafe (ditandai dengan keyword “unsafe”) dikarenakan langsung mengakses memory tanpa dikelola melalui CLR.

Yah gitu deh.. teuing sih can begitu ngarti saya ge yg penting nulis dulu hehe :D special thanks to Tatang Sutarma atas bukunya :lol:



Di bahasa pemrograman C# yang konsepnya object oriented ini ada salah satu fitur unik namanya extension method, fitur ini memungkinkan kita membuat method tambahan untuk sebuah class tapi didefinisikan dari luar class tersebut. Manfaat dari fitur ini contohnya jika kita ingin menambahkan method pada sebuah class tapi tidak kita punya source class tersebut untuk direcompile. Namun seiring konsep enkapsulasi pada OOP, method yang dibuat di luar ini tidak bisa memanggil private variable atau method dari class yang diextend karena sifat fitur ini sebagai syntactic sugar sehingga walaupun di kode dipanggilnya seperti method biasa tapi sebenarnya manggil static method dari static class lain dimana ia didefinisikan.

Untuk menggunakannya, tipe class yang mendefinisikannya dan jenis methodnya harus static dengan parameter pertama diawali keyword “this” diikuti nama class yang ingin diextend. Sebagai contoh method di bawah ini saya ingin menambahkan method ToAlay() pada setiap instance dari object string.

namespace StrUtil
{
  using System;

  public static class StrUtil
  {
    public static string ToAlay(this string str)
    {
      return str.Replace("o", "0")
                .Replace("i", "1")
                .Replace("z", "2")
                .Replace("e", "3")
                .Replace("a", "4")
                .Replace("s", "5")
                .Replace("g", "6")
                .Replace("j", "7")
                .Replace("b", "8")
                .Replace("q", "9");
    }
  }
}

Di Visual Studio dengan fitur IntelliSense-nya kita bisa melihat tambahan method baru ini akan selalu muncul pada instance yg classnya diextend (di contoh ini class string).

Disini saya membuat program console yang outputnya adalah hasil string yang sudah di ToAlay()-kan

namespace Program
{
  using System;
  using StrUtil;

  class Program
  {
    static void Main(string[] args)
    {
      string s = "The quick brown fox jumps over the lazy dog";
      string a = s.ToAlay();
      Console.WriteLine(a);
      Console.ReadLine();
    }
  }
}

Apa yang akan terjadi kalau saya tekan F5? ini dia:

Cukup M3n4r1k k4n? h3h3.. yah d3m1k14nl4h m0h0n m44f k4l4u 4d4 y6 54l4h, 1n1 7u64 m451h 83l474r :P Continue reading ‘Extension Method di C#’



Mungkin dikarenakan melihat saya ikutan ngevote fitur shortcode untuk gist ini di forum, para admin wordpress.com pun merasa iba dan terharu haha :lol: sampai akhirnya memutuskan untuk merilis fitur tersebut sehingga sekarang kita (pengguna blog wp.com) bisa menyisipkan source code yang disimpan di layanan Gist-nya Github di postingan blog.

Menggunakan layanan gist menjadi berbeda dibandingkan menyimpan snippet di tempat lain karena teks atau source code yang disimpan tidak saja sebatas URL tapi dianggap sebagai layaknya repository git biasa, sehingga bisa dilakukan revisi, fork, dsb. Sebagai contoh, untuk URL https://gist.github.com/2652218 saya bisa menjalankan command ini

git clone git://gist.github.com/2652218.git

nge-git di Windows

Nah back to topic, dengan fitur shortcode di WordPress, menyisipkan source code yang disimpan di gist ke postingan blog menjadi sangat sederhana, yang kita perlu tahu cukup nomer gistnya saja kemudian sisipkan diantara tag shortcodenya, sebagai contoh nih dari gist saya yang di https://gist.github.com/2652218 saya bisa menuliskan:


hasilnya di postingan blog akan tampak seperti ini:

Cukup menarik walaupun jarak antar baris sepertinya agak terlalu lebar (apa tergantung theme wp-nya ya?), mungkin untuk postingan2 selanjutnya bisa dimanfaatkan ini hehe.. Btw jika kita hanya ingin merujuk ke salah satu file saja secara spesifik kita dapat menggunakan attribute “file” yg diikuti nama filenya, sebagai contoh:


Petunjuk lebih lanjut hubungi dokter: http://en.support.wordpress.com/gist/



Sejak Google merilis tampilan barunya pada 2011, antarmuka pengguna (user interface) dari Gmail yang termasuk salah satu layanannya pun ikut berubah dan rasanya menjadi lebih nyaman. Salah satu komponen yang saya perhatikan cukup menarik adalah tombol-tombolnya yang warnanya oren dan biru itu yang entah mengapa meski terlihat sederhana tapi tampak hidup. Apa rahasianya?

Untuk melihat CSS dari sebuah elemen kita bisa menggunakan tool WebKit Inspector yang biasanya terinstall di browser seperti Google Chrome & Safari, atau kalau menggunakan browser Mozilla Firefox bisa menginstall add-on yang namanya Firebug. Silakan pilih yang mana saja, hanya kebetulan disini saya menggunakan Google Chrome.

Oke, mari kita teliti!

Buka halaman Gmail, kemudian kita lakukan klik kanan pada tombol yang ingin dilihat sourcenya > pilih “Inspect element”

Lihat bahwa tombol tersebut sebenarnya bukan elemen <button> tapi elemen <a> yang distyle sedemikian rupa. Disini kita bisa melihat class CSSnya adalah g-button dan g-button-red, apa saja rule CSS dari kedua class tersebut bisa dilihat di kolom sebelah kanan.

Cukup menarik, Google menggunakan banyak property CSS3 seperti text-shadow yang memberikan kedalaman pada teks, text-transform yang secara otomatis mengubah case teks (disini menjadi huruf kapital), gradient yang memberikan efek gradasi warna pada tombol dengan pemilihan warna yang nilai hexanya berdekatan tampak sangat menyatu, border-radius yang memberi efek lekukan dinamis pada sudut-sudut tombol, transition yang memberikan efek animasi pada perubahan state default ke state hover, dst.

Bagaimana CSS dari tombol tersebut pada saat hover? oke kita centang :hover pada inspector untuk melihatnya

Apa yang berubah? ternyata Google hanya mengubah warna dari gradient dan menambahkan property box-shadow dengan transparansi 0,2 namun dengan adanya property transition di kedua arah perubahan dari bayangannya sangat haluus

Nah kode CSSnya sudah kita dapatkan, sekarang kita bisa buat replikanya untuk melihat demonya buat sebuah file HTML (bisa pake notepad atau text editor apapun) dengan isi sebagai berikut:

<!doctype html>
<html>
  <head>
    <style>
      html {
        font: 81.25% arial, helvetica, sans-serif;
      }
      a {
        text-decoration: none;
      }
      .tombol {
        display: inline-block;
        min-width: 46px;
        text-align: center;
        font-size: 11px;
        font-weight: bold;
        height: 27px;
        padding: 0 8px;
        line-height: 27px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;
        -webkit-transition: all 0.218s;
        -moz-transition: all 0.218s;
        -ms-transition: all 0.218s;
        -o-transition: all 0.218s;
        transition: all 0.218s;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        cursor: default;
        border: 1px solid transparent;
        color: white;
        text-shadow: 0 1px rgba(0, 0, 0, 0.1);
        text-transform: uppercase;
        background-color: #D14836;
        background-image: -webkit-gradient(linear,left top,left bottom,from(#DD4B39),to(#D14836));
        background-image: -webkit-linear-gradient(top,#DD4B39,#D14836);
        background-image: -moz-linear-gradient(top,#DD4B39,#D14836);
        background-image: -ms-linear-gradient(top,#DD4B39,#D14836);
        background-image: -o-linear-gradient(top,#DD4B39,#D14836);
        background-image: linear-gradient(top,#DD4B39,#D14836);
      }
      .tombol:hover {
        text-decoration: none;
        -webkit-transition: all 0.0s;
        -moz-transition: all 0.0s;
        -ms-transition: all 0.0s;
        -o-transition: all 0.0s;
        transition: all 0.0s;
        border: 1px solid #B0281A;
        color: white;
        text-shadow: 0 1px rgba(0, 0, 0, 0.3);
        background-color: #C53727;
        background-image: -webkit-gradient(linear,left top,left bottom,from(#DD4B39),to(#C53727));
        background-image: -webkit-linear-gradient(top,#DD4B39,#C53727);
        background-image: -moz-linear-gradient(top,#DD4B39,#C53727);
        background-image: -ms-linear-gradient(top,#DD4B39,#C53727);
        background-image: -o-linear-gradient(top,#DD4B39,#C53727);
        background-image: linear-gradient(top,#DD4B39,#C53727);
        -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.2);
        -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.2);
        -ms-box-shadow: 0 1px 1px rgba(0,0,0,0.2);
        -o-box-shadow: 0 1px 1px rgba(0,0,0,0.2);
        box-shadow: 0 1px 1px rgba(0,0,0,0.2);
      }
    </style>
  </head>
  <body>
    <a href="#" class="tombol">F4154LMAN</a>
  </body>
</html>

Coba jalankan di browser, dan…

Wow, sik asik! ;)



Ada yang berbeda di address bar ketika mengunjungi blog ini kembali? yap, dari judul postnya aja udah ketebak haha :lol: blog ini sekarang berganti alamat menjadi http://faisalman.com/ dari alamat lamanya yang ada di subdomain wp.com http://faisalman.wordpress.com/ hehehe sebenarnya sudah lama ingin punya domain sendiri cuman ragu2 dan akhirnya kesampean sekarang wkwkww, tapi tenang saudaraku.. blognya sendiri tidak pindah kemana-mana koq, hanya ganti nama domain sahaja. :D

Untuk mengalihkan alamat lama ke alamat baru (baik itu domain yang didaftarkan melalui wordpress atau lewat registrar lain), saya menggunakan fitur upgrade domain mapping yang disediakan oleh wordpress.com, kemudian setelah sekitar 1×24 jam setelah server DNS di seluruh dunia dikabar-kabari atau mungkin lebih cepat dari itu (karena kurang dari beberapa jam saja alamat ini sudah bisa saya akses), jika saudara2 sekalian mengunjungi alamat lama blog saya di http://faisalman.wordpress.com, om Matt akan dengan berbaik hati mengantarkan anda ke alamat yang baru ini dengan selamat, terima kasih Mister!

FYI, traffic blog saat ini rata2 mencapai kisaran 600~700 pengunjung per hari (padahal jarang banget apdet), kita lihat nanti seberapa besar dampak perubahan domain pada SEO blog ini di beberapa minggu ke depan ;) (ceritanya eksperimen)



Dalam memprogram sebuah aplikasi seringkali ada kebutuhan untuk menampilkan sebuah nilai dengan format yang berbeda dari format aslinya yang tersimpan di database, sebagai contoh adalah menampilkan mata uang dalam bentuk rupiah dari database yang mana data aslinya disimpan dalam bentuk angka.

Jika aplikasinya berbasis web maka pertama mungkin kita dihadapkan pada pilihan: dimana sebaiknya format angka diubah ke format rupiah, apakah di sisi server (PHP/ASP/dsb) atau di sisi client (JavaScript)? Kalau melihat esensi dari penampilan format rupiah yang lebih ke arah aspek tampilan dan penuh dengan pemrosesan teks, tentunya akan lebih baik jika konversi dilakukan di sisi client, dengan skenario ini maka server hanya perlu berhubungan dengan angka, lumayan untuk mengurangi resources karena proses tambahan ini cukup dihandle di sisi client oleh browser.

Kemudian masuk ke bagaimana caranya mengubah angka ke rupiah pada JavaScript? memang tidak ada fungsi built-in yang bisa melakukan hal tersebut secara langsung, namun algoritma konversinya sederhana saja yakni:

1. Setiap 3 angka dari belakang ditambahkan “.”
2. Tambahkan “Rp.” di depan dan pada beberapa keadaan bisa juga tambahkan “,00″ di belakang

Algoritma di atas agar lebih mudah diimplementasikan kita pecah-pecah ke tahapan yang lebih detail lagi:

  1. Karena sepertinya rupiah tidak memiliki nilai desimal, angka pertama-tama diubah ke bentuk integer
    var angkaInt = parseInt(angka, 10);
  2. Karena akan melakukan pemrosesan teks, maka terlebih dulu angka perlu diubah ke string
    var angkaStr = angkaInt.toString();
  3. Agar lebih mudah menghitung dari belakang, nilai string perlu dibalik, ini bisa dilakukan dengan mengubah jadi  array dan memanfaatkan fungsi reverse() array kemudian diubah lagi jadi string
    var angkaStrRev = angkaStr.split('').reverse().join('');
  4. Lakukan loop dengan tiap 3 karakter (modulo 3) kita tambahkan titik, kecuali jika karakter terakhir (karena akan berada di depan karakter pertama jika dibalik)
    var angkaStrRevTitik = '';
    for(var i = 0; i < angkaStrRev.length; i++){
        angkaStrRevTitik += angkaStrRev[i];
        if((i+1) % 3 === 0 && i !== (angkaStrRev.length-1)){
            angkaStrRevTitik += '.';
        }
    }
  5. Setelah beres kita balikkan lagi stringnya (mirip tahap 3)
    var angkaRp = angkaStrRevTitik.split('').reverse().join('');
  6. Tambahkan “Rp.” di depan, dan jika berkenan tambah “,00″ di belakang
    var rp = 'Rp. ' + angkaRp + ',00';

Agar bisa digunakan ulang, kita dapat menyatukan statement-statement di atas ke dalam bentuk sebuah fungsi:

function toRp(angka){
    var rev     = parseInt(angka, 10).toString().split('').reverse().join('');
    var rev2    = '';
    for(var i = 0; i < rev.length; i++){
        rev2  += rev[i];
        if((i + 1) % 3 === 0 && i !== (rev.length - 1)){
            rev2 += '.';
        }
    }
    return 'Rp. ' + rev2.split('').reverse().join('') + ',00';
}

Atau, dengan tidak mengubah algoritma, variabel2 dan sintaksnya dapat saja kita persingkat menjadi:

function toRp(a,b,c,d,e){e=function(f){return f.split('').reverse().join('')};b=e(parseInt(a,10).toString());for(c=0,d='';c<b.length;c++){d+=b[c];if((c+1)%3===0&&c!==(b.length-1)){d+='.';}}return'Rp.\t'+e(d)+',00'}

Dengan ini maka untuk mengubah angka ke format rupiah kita tinggal memanggil fungsi toRp() ;)

var angka = 12345678;
var rp = toRp(angka);

console.log("angka: " + angka); // "angka: 12345678"
console.log("rupiah: " + rp); // "rupiah: Rp. 12.345.678,00"

Setelah hal di atas terselesaikan, maka masalah yang mungkin akan muncul selanjutnya adalah ketika mengirimkan kembali nilai ke server tentu kita harus mengirimnya dalam bentuk angka kembali, untuk itu tentu perlu ada fungsi untuk membalik format rupiah ke dalam angka, yang  dalam logika sederhananya antara lain:

1. Hilangkan karakter selain angka
2. Pada beberapa keadaan karakter angka di belakang koma juga perlu dihilangkan

Algoritma pembalik ini lebih mudah diimplementasikan, karena tidak perlu membalik dan menghitung karakter, cukup menggunakan fungsi replace() dengan parameter berupa regular expression untuk menghapus karakter yang tidak diinginkan

function toAngka(rp){return parseInt(rp.replace(/,.*|\D/g,''),10)}

Sehingga dengan ini kita dapat menggunakan toAngka() untuk membalik formatnya ;)

var rp = "Rp. 12.345.678,00";
var angka = toAngka(rp);

console.log("rupiah: " + rp); // "rupiah: Rp. 12.345.678,00"
console.log("angka: " + angka); // "angka: 12345678"

Demikian.

Segitu dulu untuk hari ini, kalau ada yang salah atau ada yang kurang-kurang silakan dikoreksi ;) wassalamualaikum.

==

Referensi fungsi2 JavaScript yang digunakan: parseIntsplitreversejoin, replace, Regular Expressions



Masih terkait dengan postingan CSS1K yang lalu, jika anda melihat demo CSS saya yang berjudul “1024-bytes” efek visualnya memang sangat terpengaruh dari efek accordion.

Biasanya, untuk membuat efek visual seperti accordion ini perlu digunakan JavaScript dikarenakan efek animasi yang tidak dimiliki CSS2.1, namun seiring perkembangannya khususnya dengan hadirnya fitur “transition” di CSS3 maka sebuah komponen accordion dapat dibuat murni menggunakan CSS.

Meski demikian terdapat beberapa keterbatasan daripada pembuatan accordion menggunakan CSS:

Bahwa pada dasarnya CSS tidak memiliki event listener untuk mouse click, namun bukan tidak ada cara sebenarnya, untuk menyiasati event click ini bisa digunakan trik yang memanfaatkan :target selector, hanya saja dengan syarat tiap elemen dari accordion memiliki nilai attribute href yang unik (itulah mengapa pada demo CSS saya accordionnya bereaksi pada event mouse hover saja karena markup HTML-nya sudah ditentukan dari sananya, tidak bisa diubah).

Kemudian pula, accordion yang dibuat menggunakan murni CSS ini adalah bersifat fixed (tidak fluid/responsive) dikarenakan nilai ukuran tidak dapat berdasar proporsi/perbandingan ukuran dengan elemen parentnya (yang kalau menggunakan JavaScript ini mudah saja dihitung) namun ditentukan besarnya secara fix.

Terakhir, tentu saja tidak semua browser mendukung fitur-fitur CSS terbaru ini, karena browser-browser lama belum memiliki implementasi CSS3. Berdasarkan data dari Mozilla (https://developer.mozilla.org/en/CSS), berikut daftar fitur yang didukung dan versi browsernya:

“transition / -webkit-transition / -moz-transition” property:
Chrome 1.0+, Safari 3.0+, Firefox 4.0+, Opera 10.5+, IE?

“:target” selector:
Chrome 1.0+, Safari 1.3+, Firefox 1.3+, Opera 9.5+, IE 9+



Jika anda mengikuti perkembangan dunia persilatan, eh, maksud saya.. perCSSan, mungkin pernah mendengar CSS1K, apa itu? CSS1K merupakan sebuah situs yang diinisiasi oleh Jacob Rask (seorang software developer di Opera) yang dimaksudkan untuk mendemonstrasikan kemampuan layout CSS (mirip-mirip CSS Zen Garden) namun dengan ukuran yang hanya 1KB (mirip seperti kontes JS1K). Adalah sebuah tantangan tersendiri tentunya untuk bisa membuat sebuah visualisasi kreatif atas sebuah struktur HTML tertentu namun dengan jumlah karakter CSS yang dibatasi maksimum sebanyak 1 Kibibyte. Dengan 1 Kibibyte sama dengan 1024 bytes dan 1 karakter menghabiskan 1 byte, maka batasannya adalah 1024 karakter, sebuah jumlah yang sedikit dibandingkan ukuran stylesheet pada umumnya.

Diantara demo yang ada, "Typhon" by eswat, merupakan salah satu tema favorit saya

Setiap orang boleh berpartisipasi dengan mengirimkan tema CSSnya melalui email atau github, saya sendiri mensubmitnya lewat pull request di github ke https://github.com/jacobrask/CSS1K/ karena kebetulan punya akun github dan lebih praktis saja rasanya. Bagaimana demonya? bisa dilihat di situs CSS1K, silakan cari yang mana hehe.. :D Prototip CSS yang saya buat awalnya memang jauh lebih besar dari 1024 bytes, wajar karena banyak elemen yang distyle sedemikian rupa, sehingga akhirnya harus memutuskan untuk menghilangkan banyak rule yang sebenarnya menarik namun tidak terlalu berdampak pada konsep desain yang saya buat secara keseluruhan. Setelah itu dirasa tidak dapat dikurangi lagi namun masih belum memenuhi batas 1K, masih ada beberapa cara yang bisa dilakukan untuk meminimisasi ukuran CSS, berikut saya rangkumkan diantaranya:

1. Satukan beberapa selector yang sebagian besar atau seluruh nilai propertiesnya redundant

Sebagai contoh, lihat kesamaan rule antara kedua selector ini:

h1 {
    color: red;
    font-weight: bold;
    text-align: center;
}
h2 {
    color: blue;
    font-weight: bold;
    text-align: center;
}

dengan menyatukan kesamaannya, kita dapat menyederhanakannya menjadi:

h1, h2 {
    color: red;
    font-weight: bold;
    text-align: center;
}

h2 {
    color: blue;
}

2. Manfaatkan CSS shorthand untuk menyatukan properties setipe yang bisa disatukan

Beberapa shorthand antara lain font, background, margin, padding, list-style, dst. Sebagai contoh:

font-family: sans-serif;
font-size: 12px;
line-height: 20px;

padding-top: 5px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 10px;

dapat disederhanakan menjadi cukup

font: 12px/20px sans-serif;

padding: 5px 10px 15px;

3. Gunakan selector equivalen yang terpendek yang paling mungkin

Ada banyak cara untuk menunjukkan sebuah elemen, apakah itu melalui id, class, atau attribute. Gunakan mana yang paling pendek diantara kesemuanya. Sebagai contoh misalkan ada sebuah elemen HTML seperti ini

<a id="faisalman" class="anchor" href="#">a link</a>

pada CSS kita dapat menunjukkan elemen ini dengan banyak cara

#faisalman {}
a.anchor {}
a[href="#"] {}
a[customattr="apapunlah"] {}

kita dapat memilih salah satu diantara kesemuanya, meskipun tidak selalu yang terpendek bisa dipilih karena tergantung lingkup selector yang diinginkan juga.

4. Hapus semicolon paling akhir di setiap rule

Titik koma di akhir bersifat optional, sehingga pada contoh di bawah ini

h1 {
    margin: 0 5px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
}

kita bisa hilangkan tanda titik koma di ujungnya menjadi

h1 {
    margin: 0 5px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent
}

5. Hapus whitespace yang tidak perlu

Spasi dianggap sebagai sebuah karakter yang termasuk dalam 1KB, karena itu salah satu cara termudah untuk meminimisasi adalah dengan meminimalkan penggunaan spasi. Sebagai contoh

h1 {
    margin: 0 5px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent
}

bisa dituliskan menjadi

h1{margin:0 5px;padding:0;border:0;outline:0;background:transparent}

namun perhatikan bahwa ada spasi yang tidak boleh diabaikan karena untuk memisahkan 2 nilai seperti pada property margin di atas.

6. Unit dengan nilai 0 tidak perlu menggunakan satuan px

Sebagai contoh

box-shadow: 0px 0px 1px #000;

cukup dituliskan dengan

box-shadow: 0 0 1px #000;

7. Angka 0 di depan titik boleh tidak dituliskan pada unit bertipe floating point

sebagai contoh

transition: all 0.1s linear;

cukup dituliskan tanpa angka 0

transition: all .1s linear;

8. Gunakan list-style dibandingkan list-style-type jika tidak menggunakan custom image atau posisi pada list

Masih berhubungan dengan CSS shorthand, jika kita hanya menset nilai tipenya

list-style-type: none;

cukup tuliskan shorthandnya saja

list-style: none;

9. Gantikan nilai none dengan 0 dimana bisa

Salah satunya pada property border, dimana kita dapat menggantikan

border: none;

dengan

border: 0;

karena pada property border, masih berhubungan dengan bahasan CSS shorthand, keduanya merujuk pada property yang berbeda, dimana

border: none;

merupakan kependekan dari

border-style: none;

sedangkan

border: 0;

merupakan kependekan dari

border-width: 0;

Namun karena pada akhirnya keduanya menghasilkan efek yang sama, menggunakan 0 jelas lebih singkat dari none bukan?

10. Persingkat nilai hexa warna hingga ke 3 digit terdekat

Untuk menghemat karakter kita bisa melakukan antara lain dengan mengubah ke nilai terdekat yang sama untuk setiap #RRGGBB sehingga cukup dituliskan #RGB, tentu saja dengan kompensasi berupa warna yang tidak sesuai asalnya lagi meskipun mirip. Sebagai contoh

color: #f3e597;

nilai tiap warna terdekatnya bisa kita tuliskan menjadi

color: #ffee99;

sehingga cukup dituliskan nilai ekuivalennya

color: #fe9;

Selain itu, yang menarik ada definisi warna yang cukup singkat yaitu warna merah dimana kita cukup menuliskan

color: red;

lebih singkat penulisannya (3 karakter) dibandingkan jika kita menuliskan nilai hexanya (4 karakter) yaitu

color: #f00;

11. kalau jumlah direct child hanya 2, kita bisa mengganti last-child selector dengan adjacent selector

Misalnya, jika a sebagai child dari li hanya berjumlah 2, maka

li > a:last-child { }

adalah equivalen dengan

li > a+a { }

12. kalau jumlah direct child hanya 1, cukup ganti tipe elemen child tersebut dengan tanda bintang saja

Karena tipe child sudah dapat dipastikan, kita tidak perlu menuliskannya, sehingga

article > section:hover { }

secara pasti bisa kita ganti dengan

article > *:hover { }

13. Dan lain-lain

Masih banyak lagi sebenarnya tips lain yang mungkin belum tercakup disini hanya saja belum kepikiran.. :P Akhirul kalam, mohon maaf kalau ada salah-salah kata, dan kalau ada yang ingin berbagi trik-trik lain dalam hal menghemat karakter CSS silakan tambahkan lewat kolom komentar dibawah ;)

Beberapa referensi dan tautan lain yang mungkin berhubungan dengan bahasan ini:
CSS1K @Github
– The 30 CSS Selectors you Must Memorize
– Introduction to CSS Shorthand



Satu tahun lebih empat bulan sudah blog ini ditelantarkan, selama itu pula praktis blog ini hanya mengapprove komen-komen yang termoderasi dan belum bisa membalas satu-persatu selain karena memang sangat banyak, malas pula hehe :D kalau ada yang mau bales-balesin sih saya akan sangat berterima kasih dan sebagai gantinya akan saya berikan ucapan terima kasih :lol:

Sebenarnya ingin mengupdate lagi, tapi.. apa daya? apa yaa? seperti dijelaskan pada judulnya, “Tunggu aksi saya!™”.




Ikuti

Get every new post delivered to your Inbox.

Bergabunglah dengan 184 pengikut lainnya.

%d bloggers like this: