Laporan pengujian CSS3, Web Performance dan Responsive Web

Bismillahirahmanirahim, agak lama tidak menulis dalam ruangan blog. Amber sibuk dengan pelbagai tugasan namun pencarian ilmu tidak terhenti begitu sahaja. Dalam meredah kesibukan yang menimbung, masih sempat menyelitkan pencarian tentang web design. Berikut adalah beberapa perkara yang amber uji beberapa minggu lepas.

* Catatan ini merupakan nota untuk diri sendiri dan rakan-rakan yang ingin belajar tentang Web Dev. Sila beritahu amber sekiranya ada kesilapan fakta dalam penulisan artikel di bawah.

Pageslide + Foundation.zurb.com 3.1.1

Amber sangat tertarik dengan teknik “ off canvas” yang digunakan oleh laman facebook dan google. Jika tuan/puan mempunyai telefon pintar seperti android atau iphone, sila buka laman facebook atau laman google.

Butang tiga jalur baris mewakili Menu, apabila klik pada jalur baris tersebut. Ia akan keluarkan side bar yang telah disorok. Seperti dalam gambar di bawah.

Setelah puas mencari solusi yang amber fikir bagus untuk amber belajar, walaupun pada ketika ini Foundation 3.1.1 ada menyediakan off canvas mereka sendiri. Jadi amber buat gabungan antara pageslide http://srobbin.github.com/jquery-pageslide/ dan Foundation. Boleh cuba hasilnya. Mungkin lepas ini, mahu cuba pada Bootstrap Twitter pula

http://dl.dropbox.com/u/62861063/foundation.7z

Image to CSS3 vs base64

Dalam proses mencari dan mempelajari tentang CSS3, terjumpa satu laman yang menerangkan kaedah convert image kepada CSS3. http://romainberger.com/lab/image-to-css3 . Ia menukar setiap pixel image kepada CSS . Jika tuan puan mahu menguji aplikasi ini, di nasihatkan supaya menggunakan pixel size 5×5 ke atas.

Dalam masa yang sama, semasa membedah siasat laman Google Mobile http://pastebin.com/QzVSi7BR . Terjumpa base64 code dalam CSS.

background:url(“data:image/png;base64,iVBORw0KGgoAAAANSUhEU….

Dua atau tiga tahun yang lepas, memang ada terbaca tentang base64, teknik ini pada ketika itu masih kurang sesuai kerana terdapat browser yang tidak menyokong teknik ini.

Mana lagi bagus ?

Masalah apabila guna teknik CSS3 image, apabila menggunakan setting 1px by 1px, kod css yang dihasilkan sangat besar melebihi saiz gambar tersebut. Ini sebenarnya tidak bagus dari segi loading dan server akan bekerja keras untuk menghantar fail ini kepada client / browser.

Manakala teknik base64 pula dilihat bersesuaian dengan trend terkini, namun file yang besar menghasilkan kod yang panjang serta saiz file akan bertambah besar. Sila baca artikel ini http://davidbcalhoun.com/2011/when-to-base64-encode-images-and-when-not-to sekiranya tuan/puan mahu menggunakan teknik base64.

p/s : Dengan menggunakan kod base64 atau css di atas, image tidak perlu di upload ke server seperti kaedah tradisi. Kod di embed terus ke dalam file html/php/css.

Full Image Backgroud – in framework

Seterusnya amber ulangkaji pula tentang CSS3 background, vendor prefixed dan grid yang bersesuaian. Tahun 2012, menyaksikan skrin komputer telah berkembang dan maju. Dari sekecil-kecil skrin hingga ke sebesar-besar skrin. Dahulu, semasa skrin 1024×768 banyak digunakan, 960px grid merupakan satu pilihan, namun sekarang, webdev mesti mengambilkira trend pemakaian monitor terkini, 1140px grid bersesuaian dengan trend semasa.

The 1140 grid fits perfectly into a 1280 monitor.

Oleh kerana, amber tidak mampu untuk menggunakan skrin monitor yang terkini dan besar. Ada beberapa tool yang digunakan untuk membuat ujian pada laman web.

Vendor prefixed yang digunakan tidak cukup untuk membelai manja browser IE, kena masukkan sintax khas dan oleh kerana amber tidak ada IE, dan webshot.org pula tidak membenarkan file html dari dropbox untuk discan. amber guna http://netrenderer.com/

background: url(../images/warisan9x.jpg) no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	-ms-background-size: cover;
	background-size: cover;
	 margin-top: 0px;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/warisan9x.jpg',sizingMethod='fixed');
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/warisan9x.jpg', sizingMethod='fixed')";

http://dl.dropbox.com/u/62861063/site/back/index.html

Combo Hendler YUI3 & Pagespeed

Dua kaedah untuk mempercepatkan loading external css yang dibangunkan oleh dua buahSyarikat Gergasi Internet. Yahoo dan Goolge.

Combo YU3 yang digunakan oleh Yahoo merupakan teknik yang sangat baik kerana ia akan mengumpulkan semua file css dalam satu tag dan file js dalam satu tag. Bagi pengguna YUI, tuan/puan boleh gunakan kaedah ini

http://yuiblog.com/blog/2008/07/16/combohandler/

ada disediakan CDN

http://www.stevesouders.com/blog/2008/07/17/yuis-combo-handler-cdn-service/

Begitu juga dengan mod_pagespeed yang dikelola oleh pihak Google. Sekiranya kita mempunyai server sendiri atau VPS, teknologi mod_pagespeed ini boleh digunakan untuk melajukan lagi page load.

https://developers.google.com/speed/docs/mod_pagespeed/filter-css-combine

Cara lain ? https://developers.google.com/speed/docs/best-practices/rtt#CombineExternalCSS