Bedah CSS: Tombol Barunya Gmail


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! 😉

Iklan

Ganti Alamat ke Faisalman.com


Ada yang berbeda di address bar ketika mengunjungi blog ini kembali? yap, dari judul postnya aja udah ketebak haha 😆 blog ini sekarang berganti alamat menjadi https://faisalman.com/ dari alamat lamanya yang ada di subdomain wp.com https://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. 😀

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 https://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)

Konversi Angka ke Format Rupiah di JavaScript


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