Kesalahan Slicing Image buat Web

Posted on July 1st, 2009 by Rio

Tidak selamanya slicing dengan ukuran kecil bisa membuat halaman web lebih cepat diakses, kita juga perlu memperhatikan banyaknya image yg di-slice dalam satu halaman. Jadi meski slice image-nya kecil namun jika banyak jumlah image-nya maka jumlah request ke server otomatis menjadi lebih banyak sehingga mempengaruhi performa juga.

Load fewer external objects. Due to request overhead, one bigger file just loads faster than two smaller ones half its size. Figure out how to globally reference the same one or two javascript files and one or two external stylesheets instead of many; if you have more, try preprocessing them when you publish them. If your UI uses dozens of tiny GIFs all over the place, consider switching to a much cleaner CSS-based design which probably won’t need so many images. Or load all of your common UI images in one request using a technique called “CSS sprites“.

Sumber: http://www.die.net/musings/page_load_time/

Cara menampilkan Widget di Facebook

Posted on June 15th, 2009 by Rio

Ada banyak cara menampilkan widget di Facebook seperti halnya widget di WordPress. Untuk menampilkan widget di Facebook, salah satu caranya adalah dengan menggunakan aplikasi Facebook bernama More Extended Info. Berikut caranya,

  1. Login ke Facebook dan buka http://apps.facebook.com/more_ei/ (halaman apllikasi More Extended Info)
  2. Klik Insert New Field dan pilih Lightweight Markup Lightweight Markup di More Extended Info
  3. Kemudian paste kode html kamu, HTML Markup dan klik Save Changes

WordPress Facebook Clone Theme

Posted on June 13th, 2009 by Rio

Facebook style WordPress theme from Nazieb is so Facebook :D but it needs more enhancements to make it more facebook. First, add this rules to your css file:

.textwidget p{margin-top:7px;}
.form_login{margin-bottom:7px;}
.current-cat{border-right:1px solid #D8DFEA;}
.archive{display:none;}
.post-text h2,.post-text h3{font-family:Arial, Verdana, sans-serif; font-size:14px}
.post-text h3{font-size:12px}
.post-text img{background:#ddd}
.post-text img.aligncenter{border:1px solid #ccc; border-color: #ddd #ddd #ccc #ccc; border-width:1px 1px 2px 1px; margin:20px 0; padding:10px}
.post-text ul,.post-text ol{line-height:normal; margin:0 0 20px; }
.post-text li{list-style:square; line-height:normal; margin:0 0 7px 12px; }
.post-text ol li{list-style:decimal; margin:0 0 7px 18px; }

This will fix the whitespace between the elements.

Yeah, my enhancements quite lame huh!? Just wait, I want to make something more on this, but I have some work to do now. Maybe next time :P