Aku rare dengan dak perempuan, if yang aku kenal tu, biasa bertegur, kira orang yang dikira lekat kat otak aku la tu. Kalo setakat main jeling-jeling kat CUBIC ke, kedai makan ke, susah la sikit nak ingat. Aku ni pun leh tahan jugak pemalu kadang-kadang. Tapi dengan dia ni aku natural jek, selamba jek leh korek hidung depan-depan, kiranya aku leh jadi true lah dengan dia. Seorang yang aku boleh percaya, even kalau diletak dalam hutan rimba bersama-sama, aku yakin dia tak akan gigit atau potong se-slice dua daging aku untuk jadikan stik ketika lapar. Kekasih? Takdelah. Kawan, mungkin lebih tepat kakak dan adik. Sebab aku kelihatan lebih muda dan kebudak-budakkan.

Sekarang dia tengah sakit.

Get well soon dear. Sorry for not being there when you need me the most. Like we used to said, you yake take (thanks wanjak!) care.

Its better to get a D rather than an E.

Bagi yang belum pernah melawat website dia, silalah lawat, if orang tanyakan aku apa patut rupa blog masa kini, aku cakap contohi blog Abang Ng. Hari ini aku nak bantu beliau sikit tentang macam mana nak buat simple button dengan menggunakan CSS.

Casenya macam ni la, korang nak buat link dengan menggunakan imej as background. Tapi perlu ingat, link ada 5 jenis condition (if ada lebih tolong tambah, aku suku pro):

1. a @ a:link
2. a:visited
3. a:hover
4. a:focus
5. a:active

So normally aku akan stylekan link secara default macam ni

a, a:visited {
	color: #0066cc;
	text-decoration: none;
	}

a:hover, a:focus{
	text-decoration: underline;
	}

perlunya untuk kita paham dulu stuktur link tu dulu sebelum kita pergi dengan lebih jauh. Untuk bracket pertama
a, a:visited adalah styling untuk condition awal link tersebut, a:hover dan a:focus adalah condition yang berbeza, tapi  aku kelaskan dalam satu bracket bersama sebab aku nak link aku akan berada dalam style yang sama bila aku mouse-over dan juga cursor-focus(hold-click) link tersebut. Dan kalau korang perasan aku abaikan a:active. Sebab aku malas. korang boleh baca kat w3schools untuk maklumat lanjut tentang CSS Pseudo-classes.

Pertamanya kita kena ada gambar button dahulu, aku dah buat kan untuk korang satu button sebagai contoh, dan aku pun sediakan PSD files untuk rujukan macam mana aku design button macam ni.

Untuk tutorial kali ini, aku sediakan 1 button yang bersaiz 220x100px. Aku buat dengan ukuran genap-genap untuk memudahkan pemahaman korang nanti. Ok, straightforward kita code macam ni.

a.example, a.example:visited {
		float: left;
		width: 220px;
		height: 50px
		display: block;
		text-indent: -999em;
		background: url(sample_btn.gif) 0 0 no-repeat;

		margin: 0;
		padding: 0;
		}
a.example:hover, a.example:focus{
	background: url(sample_btn.gif) 0 -50px no-repeat;
	}

Dari CSS yang aku sedialan di atas, aku buatkan 1 link yang bersaiz 220px*50px. Kenapa height 50px je sedangkan size background original button 100px? Sebab aku nak paparkan separuh jek dari image button yang aku sediakan tu. Separuh lagi aku nak display dalam state:hover.bagi yang follow tutorial aku yang sebelum ni CSS:Styling Your List, sikit sebanyak akan paham dengan background: url(sample_btn.gif) 0 0 no-repeat; dan url(sample_btn.gif) 0 -50px no-repeat; okay, kalau korang tengok ada Apx Bpx no-repeat tu, Apx Bpx tu sebenarnya adalah position background, yang mana ‘Apx tu distance background dari kiri dan ‘Bpx‘ tu distance background dari top. Korang boleh cuba adjust nanti dalam source yang aku sediakan.

Kenapa aku tak pisahkan button tersebut kepada 220px*50px, dua bahagian? Letak yang bahagian biru dalam state:hover seperti yang biasa kita buat? Okay, dulu aku pun pernah buat macam tu, pisahkan button kepada 2 bahagian, tapi dari teori aku, bila kita seperate 2 file, browser just load file button silver tu jek, bila kita hover button tu baru terhegeh2 nak load button biru. So pada UX (User Experience) aku, ianya macam merencatkan. Bila kita sekalikan, pada first-load page kita, browser dah load kedua-duanya, cuma display yang atas dulu, bila hover dia just ubah position jek untuk display yang bawah, tak perlu untuk load lagi.

Aku juga pernah terbaca artikel (malas dah nak cari, tanya abang Google) background adalah property yang last skali browser akan load, so pandai-pandai la kita optima kan size file button kita untuk percepatkan process load.

Enjoy! Live Demo | Download Source File With PSD (38k)

p.s: Ajib, ko buat sekarang!

IE6 is the new Netscape 4. The hacks needed to support IE6 are increasingly viewed as excess freight. Like Netscape 4 in 2000, IE6 is perceived to be holding back the web.
Jeff Zeldman, standart guru, http://www.zeldman.com/

kalau dah Jeff Zeldman pun smash IE6, bukan aku la orangnya nak lawan kata experts, tapi sejak aku bekerja dengan Optima, aku banyak ditekankan kepada compatibility dan user experience (UX). Kalau tak lepas IE6, jangan harap boleh cakap kerja aku dah siap. Banyak yang aku pelajari nak lawan IE6, kadang-kadang aku drawback kepada oldskol nya programming, iaitu penggunaan table. Tapi orang sekarang mana nak pakai meja-meja sekarang, nak pakai DIV aje. Secara mudahnya aku mix kan DIV+TABLE, secara tak langsung memudahkan kerja aku dan staff lain pun boleh paham. Bagi aku yang familiar dengan code environment, aku jarang pun untuk lihat result code aku tu kat panel VIEW dalam Dreamweaver, kadang-kadang aku SPLIT, namun bagi designer macam aku jugak, penggunaan TABLE memudahkan. Tapi of course la code macam lebih kacau sikit. Ah, malas nak citer pasal code kali neh.

Menurut statistik dari w3schools tentang statistik pemilihan browser tahun 2009-2002, memang tak disangkal penggunaan IE6 semakin drastik menurun. Tapi masih lagi ada orang pakai IE6, so kalau masuk bahagian accessibility, kita pun kena consider untuk group IE6 ini. Yep, aku akui nak bagi compatibility ni banyak makan masa dan code. Tapi c’mon la, kalau buat web tu mudah, mestila boring wat kerje camneh.

Kesimpulannya, dari pengalaman aku yang semi-pro ni la, if code kita lepas IE6, cross browser semua lepas dengan izin-Nya. Salam IE6.

p.s : lupa lak, aku support IE6! Even masih belum expert. http://www.saveie6.com/. Download la IE6 sementara masih ada, http://tredosoft.com/Multiple_IE.

Hidup sebagai web developer banyak menuntut komitmen, masa, idea, dan tenaga. Aku standby terajang dada sesape berani cakap buat web mudah. Aku juga banyak di dekati (approach) untuk buat web, bermacam-macam ragam pelanggan aku jumpa. Demand website nak Apple, budget ciput. So kebanyakkan masa aku fokus untuk projek aku dengan Hosptial Tengku Ampuan Afzan, Kuantan.

Bersama dengan Norazuan Che Nasen @ Matwe, banyak yang kami pelajari dalam bisnes IT, esspecially dalam pembangunan sistem. Surat tu, surat ni. Pening jugak mula-mula, dan aku rasa aku sangat bertuah abah aku banyak membantu dalam memberi petunjuk untuk dealing dengan pelanggan. Bile nak dapat duit neh. Haih.

Aku pun dah 3 bulan setengah dah berkerja di Optima Innovation. Banyak yang aku pelajari dan aku yakin aku dah banyak improve dalam HTML, CSS, jQuery, dan PHP. Kat Optima aku banyak ditekankan bahagian compatibility. Yang penting IE6 kene lepas dulu baru boleh proceed. Penat jugak mula-mula, kadang-kadang rasa nak lempang je monitor bila tengok result code aku macam-macam. Sekarang ni projek pun makin banyak yang aku handle, alhamdulillah boss and rakan-rakan sekerja percaya dengan kebolehan aku. Bulan ni aku pun dah dapat permanent status, tapi hati macam berdebar-debar tunggu panggilan boss aku untuk bincang pasal kontrak baru. Ada kenaikan katanya.

Gelisah aku dibuatnya.

Masuk minggu ni dah 3 minggu aku demam, selsema dan batuk. Doakan aku cepat sembuh dan kembali aktif dan riang seperti kanak-kanak laen.

Ok, untuk tutorial kali ini aku wat sample siap-siap, download neh untuk rujukan : Tutor CSS : Styling Your List(tutorA.zip)

Ok, tanpa membazirkan masa, kita tengok dulu html berikut :

Ikram Hakimi bin Mohd Zaki
Ahmad Faris bin Mohd Zaki
Farah Naquiah binti Mohd Zaki
Anis binti Mohd Zaki
Amirul Amin bin Mohd Zaki
Lorem Ipsum is simply dummy text of the printing and typesetting industry.

..dari HTML kat atas, kalau korang perasan aku ada buat 1 div (ID:#wrap) dan dalam div tu ada ul+li. Okay, kita stylekan div tu dulu macam yang berikut:

#wrap {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	color: #666;

	width: 350px;
	margin: 0 auto;
	padding: 0;

	background: #FF0;
	}

..dan macam nilah lebih kurang kalau kita nak lihat kesan awalnya. Bagi aku, aku lebeh suka setkan background-color pada #wrap tu supaya senang aku nak tengok area mana die dah disetupkan.

So, kalau korang tengok secara defaultnya, unordered-list akan display default styling iaitu bullet (bintat-bintat tu la). So kat situ target kita untuk kali ini, nak stylekan bullet tu. Okay, korang codekan CSS berikut bawah kepada #wrap tadi.

/* CSS Document */
ul.testA {
	width: 350px;
	float: left;

	padding: 0;
	margin: 0 0 20px 0; /*this will seperate this UL with another UL*/
	list-style-type: none;

	background: #0ff; /*as usual, a markup*/
	}

	ul.testA li {
		display: block;
		padding: 0 0 0 20px;
		margin: 0;

		background:url(images/ul_li.png) left no-repeat;
		}

Sekarang kita dah create class untuk ul, aku explain sikit dari pemahaman aku, ul.testA merujuk kepada ul yang classnya testA. Paham? Diam-diam tu paham la tu. Jangan risau, nanti bila masuk part implementation kat HTML nanti korang akan paham. Okay, see below HTML code yang mana aku dah applykan class testA kepada ul, ul class=”testA”

Ikram Hakimi bin Mohd Zaki
Ahmad Faris bin Mohd Zaki
Farah Naquiah binti Mohd Zaki
Anis binti Mohd Zaki
Amirul Amin bin Mohd Zaki
Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Kemudian korang akan dapat result seperti gambarajah dibawah. Okay, kalau korang perhatikan rapat-rapat, korang akan dapati ada slack@macam-tak-kena sikit kat result korang, esspecially kat bahagian yang aku dah tanda tu, paham-paham la kan.

..untuk fixkan position image tu, korang edit balik kat bahagian background image bagi list korang, yang asal :

ul.testA li {
		display: block;
		padding: 0 0 0 20px;
		margin: 0;

		background:url(images/ul_li.png) left no-repeat;
		}

kepada code yang berikut :

ul.testA li {
		display: block;
		padding: 0 0 0 20px;
		margin: 0;

		background:url(images/ul_li.png) 0 4px no-repeat;
		}

aku explain sikit pasal background:url(images/ul_li.png) 0 4px no-repeat;, okay, kalau korang tengok ada 0 4px no-repeat tu, 0 4px tu sebenarnya adalah position background, yang mana ’0′ tu distance background dari kiri dan 4px tu distance background dari top. Korang boleh adjust ikut suka hati korang position tu. Try it!

Okay, nak cabut dah, aku lampirkan sekali sample yang aku buat, leh la korang nak buat refer. Dalam contoh yang aku lampirkan ni korang boleh tengok efek dari margin yang aku setupkan kat UL, okeyh, enjoy!

Download untuk rujukan : Tutor CSS : Styling Your List

Okay, mula-mula kita create 1 class dulu, bagi nama bayang-text, dan letak properties class tu seperti berikut :

.bayang-text {
   font-family: Georgia, "Times New Roman", Times, serif;
   font-size: 24px;
   font-weight: bold;
   font-style: italic;
   line-height: 30px;
   color: #00aaff;

   text-shadow: 0px 1px 2px #555;
}

Ok, rajah di bawah explain sikit pasal text-shadow properties neh

..kita apply class tu kat span macam kat bawah ni.

hello world

and ini adalah result dia,

hello world

Cantikkan? Aku rasa style ni sangat cantik kalo kita apply kat text-logo(ehem-ehem, cek atas, ehem-ehem) atau headings. Selamat mencuba!

Owh, further reference :

• CSS3.info – Text-shadow, Photoshop like effects using CSS
• Line25 - Create A Letterpress Effect With CSS Text-Shadow

So aku juga cuba la apply kan konsep 960 ni kepada theme aku. Seperti yang anda lihat hari ini, macam tu lah result implementation dia. Takdela terbang-terbang, boleh la koho-koho.

Ulangkaji tambahan

• InfoMalaya - Ada Apa Dengan Grid?
• Kailoon – MyCSS Grid System (presenting his own 960 and implementation)
• WebDesignerDepot – The 960 Grid System Toolbox & Resources
• net.tutsplus – A Detailed Look at the 960 CSS Framework

Happy 960gs!

Okay, korang tak rock kalo machine (PC/Notebook) korang kalau tak install font Segoe UI, sebab hari ini aku telah twist sikit CSS aku untuk adapt dengan font yang tak berapa nak baru ini. Actually bagi pengguna Vista, font Segoe UI ni sebenarnya dah sedia ada, cuma dalam sedar tak sedar jek kewujudannya dalam computer korang. Namun tidak bagi mereka yang peka IT dan Art, font merupakan element penting dalam design, dan aku rasa ramai yang bersekepala bahawa takde font design tu takkan nak best.

Berbalik kepada tajuk posting, hari ini aku nak pass sikit penemuan aku hari ini dalam CSS, bagi font-style properties. Sebenarnya ia lebih kepada gamble untuk tetapkan font ni, if machine anda semua takde font Segoe UI, browser anda akan display font Trebuchet MS, kalau takde jugak, ia akan revert kepada Arial, and kalau takde jugak sila kapak machine anda.

Lebih kurang macam ni la implementation dia :

font-family: "Segoe UI", "Trebuchet MS", Arial, Helvetica, sans-serif;
/*wrote by : Ikram Hakimi */

daripada snippet code kat atas, aku rasa korang boleh paham ape yang aku explain dalam paragraph sebelum tu. Seperti yang aku katakan, ianya lebih kepada gamble, tak jumpa font Segoe UI, dia akan pergi kepada Trebuchet MS, dan seterusnya ke font Arial.

Bagi pengguna Adobe Dreamweaver CS4, korang akan dapat list yang panjang berjela (its called font-stack) untuk font yang available bila korang type css:font-family properties ni. Dari kajian aku jugak, font-font yang available tu disebabkan standart font yang dah establish seperti Lucida Console, Monaco, Trebuchet, dan banyak lagi. Ada jugak teknologi web yang dapat membantu korang untuk apply font yang berbagai kat web, sIFR (Scalable Inman Flash Replacement) adalah contoh yang terbaik yang sudah aku try, tapi tak pernah lagi apply kat mana-mana project sebab disyaki melembabkan proses loading (ek?).

Ulangkaji tambahan :

1. w3schools.com – CSS font-family Property
2. codestyle.org – Build better CSS font stacks
3. 24ways.org - Increase Your Font Stacks With Font Matrix
4. google.com – Search Result on “CSS : Font-Stack”
5. unitinteractive.com – Better CSS Font Stacks

Hari Sabtu lepas, Arsenal main last game, sampai jek kat kedai mamak Hakim, tengok Drogba dah skor winning gol. Haih. Pusing-pusing sekejap baru dapat seat, gila depan ngadap dengan skrin, nampak rumput sehelai-sehelai. Boleh datang lagi lain kali. Duduk jap komentator dah sibuk dok ulas game Man City & Blackburn. Masa tu aku support Blackburn. Lepas 3 minit jek semangat support aku tu dah hilang lepas Adebayor skor untuk City. Nasib.

Tepat jam 12am, Matwe mengadu tak larat dah nak bilang supporters dalam stadium tu. Aku bawak Matwe balik taktala perlawanan berbaki 10minit. Drive laju-laju pergi hantar and pusing balik ke Hakim. Seat panas aku masih available, duduk dan order teh tarik ke-5 aku untuk malam itu. Mamak tu tengok aku dengan unik.

Game Arsenal dah start. Yeah, tengok line-up Arsenal rasa lega sebab Alexandre Song main as defensive midfield, letak Fabregas & Denilson forward sikit. Memang patut Song main pun, and aku bet dia boleh jadi kunci DM Arsenal season neh. Sekali tengok formation 4-3-3 ala Barca pun ada. Formation yang biasa aku gunakan untuk tewaskan Pian, Garu, Matwe, and Ijad dalam game PES/PS2. Mamat belum kena lagi. Nak aku ulas panjang-panjang nanti berjella macam soccernet lak. Dengan defend Everton yang goyah, kena pulak Lescott tengah pening, set piece Arsenal kena-aje, Arsenal menang 6-1, Vermaelen skor pada game debutnya and Eduardo pun on target gak.

Yeah!

Balik tdur dengan hati puas-bangga-lega.

Hari ni aku baru jek launch theme yang tak berapa nak siap. So kiranya macam agak frust jugak lah. Da macam-macam grid da aku buat. Last-last jadik camtu jek. Ah, tunggu jelah update yang akan datang. Bukan aku nak buat posting perasmian theme baru aku pun. Ramai yang dok soksek-soksek, ape otak Ikram tu dah blank ke? Dah itam puteh ke?

Argh! Nevermind.

Dalam kalut-kalut aku tengah wat kerje kat ofis ni, aku bukak la WP-Stat aku, nak tengok berape ramai stalker aku (still tak leh calen pria nak pop aje, En Razif). Tapi dalam stat-stat tu, adelah terselit nama budak neh.

lowwanjak.com

Aku bingung la, ape neh masuk sini jugak neh! Hati aku tak berapa nak tenteram. Aku ni bukannya biasa bila hati aku dipermainkan neh. Aku pun try la type URL tu. Hah. Jumpe la jugak URL ni. Aku rasa kat Malaysia ni takdela sangat menteri-menteri @ jabatan-jabatan kerajaan (aku bukannya nak shoot dak gomen pun la) nak pakai nama tu. Padan la lama tak online. Beruang panda pun reti nak online siang-siang. Tapi aku tau ‘dia’ masih nak merahsiakan kewujudan ini.

Sampai bila Wan Jak?