[trick] Load CSS dan JS di Github

Bismillah…

Trick ini digunakan untuk menghemat bandwith dan meload data js/ css berdasarkan server terdekat, tanpa langsung ke hosting kita, yang mengakibatkan ‘high load trafic‘ dengan memanfaatkan github kita bisa menambahkan kecepatan dan kehematan sekitar 25% lebih, berdasarakn web tools pingdoms.

https://tools.pingdom.com/

Caranya?

  1. Siapkan File CSS/ JS.
  2. Buat akun github, upload file CSS/ JS yang sudah siap.
  3. Copy file URL dari github, baik css/ js.
  4. Paste file URL ke rawgit
  5. Selesai

Simple kan!?nah, ternyata ada kelebihan dan kekurangannya…

Kekurangan:

  1. Data menjadi public jika diset jadi public (free version).
  2. Setiap perubahan content file, harus men-generate ulang ke rawgithub
  3. Sourcecode HTML bisa dipakai orang lain.

Pasti ada kelebihan:

  1. Load trafic hosting kecil.
  2. Load data website cepat
  3. Kita fokus ke content data.
  4. dll

Itu aja sih yang gw tahu, dan sepengalaman ajah…

Have A Nice Day!

Credit:

  1. Github.com
  2. RawGit.com
  3. Tools.pingdom.com

 

[share] Cara Membuat Icon Tambahan Untuk Bootstrap

Bismillah…

Kali ini gw sedikit mau share kayak trick sih.. yang gw dapet dari link ini:

http://favbulous.com/post/1006/create-custom-icons-for-twitter-bootstrap-easily

Dari web tersebut kita akan disuruh membuka beberapa web sebagai tools/ alat pembuat icon diantaranya:

  1. http://www.famfamfam.com/lab/icons/silk/      <- ini icon sets
  2. http://spritegen.website-performance.org/    <– ini untuk generator css nyah

Langkah I, download icon set, bisa dari link diatas atau icon lainnya.. kurang lebih isi icon kayak gambar dibawah ini:

icon-1

Langkah II, upload semua icon ke link ke-2 kita ubah icon itu ke sprite (file image utuh) … nanti akan di generate sendiri oleh web itu menjadi code code css…  akan tercipta 2 file , png dan css nyah… kurang lebih hasilnya kayak gini:

sprite

Langkah III, kalo dari tutorial diatas kita disuruh perhatiin bbrpa point diantaranya:

  1. Gambar yang dibuat (generate) horizontal
  2. Horizontal Offset 5px
  3. Vertical Offset 5px
  4. Css Prefix rsp (terserah)

Kalo udah maka scriptnya akan keluar kayak gini:

.lang {
    background-image: url('image/url');
    background-repeat: no-repeat;
    display: block;
}
.lang-id { width: 16px; height: 11px; background-position: -5px -5px; }
.lang-us { width: 16px; height: 11px; background-position: -31px -5px; }

Langkah IV, kita mau integrasiin ke bootstrap,,, berikut codenyah (diambil dari script bootstrap):

/* icons */
[class^="rsp-"],
[class*=" rsp-"] {
  display: inline-block;
  width: 17px;
  height: 16px;
  *margin-right: .3em;
  line-height: 14px;
  vertical-align: text-top;
  background-image: url("icons/bahasa.png");
  background-position: 14px 14px;
  background-repeat: no-repeat;
}
[class^="rsp-"]:last-child,
[class*=" rsp-"]:last-child {
  *margin-left: 0;
}

.lang-id { width: 16px; height: 11px; background-position: -5px -5px; }
.lang-us { width: 16px; height: 11px; background-position: -31px -5px; }

DONE!

Gampang kok… kalo mu demo langsung aja ke sumber nyah … ini demo dari sumbernyah:

http://favbulous.com/demo/twitter-bootstrap-custom-icons/