Archive for January, 2011

Cheat Sheet untuk Blueprint CSS Framework

Posted by mkhairul

Cheat sheet terbaru untuk blueprintcss dah dikeluarkan. Aku ni pengguna setia framework ni. Memudahkan kerja, tak perlu fikir implementasi grid pada browser yang berlainan dan pelbagai lagi.

Cuma jenis font je sekarang ni citarasa dah agak berubah. Lebih gemar “baskerville,palatino,’palatino linotype’,georgia,serif” untuk Title dan Header text, macam website jontangerine.com.

Pembayang (watermark/input hint) pada input box

Posted by mkhairul

Kalau ada input box sahaja, tak banyak membantu. Kena ada pembayang, apa yang harus aku taip pada input box ni, label sahaja pun kadang-kadang tak membantu, kalau boleh, user ni nak kita pegang jari dia tolong tekan kan untuk dia. Tapi melampau la kan, kita pun ada kerja lain.. so kita beri pembayang, tentang apa yang perlu dimasukkan.

Contohnya, input box dibawah

Memang simple habis. Tapi kalau ditambah, “hint” dibawahnya, jadi gini pulak..

Ok la tu.. ada hint. Tapi disesetengah situasi, nak kena hint tu ada DALAM text box tu. Macam ni..

Ni dia panggil watermark. Aku pun tak pasti apsal dia panggil watermark, aku lagi suka “input hint” tapi ape-ape je lah.

Jadi, watermark tu digunakan seperti berikut..


Haaaaa.. tu dia. Nanti ko mesti pasti teriak, TAPI APSAL DIA MACAM BIASA JE, TAK KELABU PUN WATERMARK TU. Aku, kalau ada sebelah ko, aku pasti akan membuat look of disapproval.

ಠ_ಠ

Ye lah, ko tak apply CSS dia, macam mana dia nak jadi kelabu. So, taruk nih.

.watermark{ color: #999999 !important; font-style: italic; }

Yang ni aku implement dalam aplikasi aku.

Ha, gitu lah kisahnya watermark dan “input hint” untuk setakat ni. Pembayang ni takde hal nak letak mana pun, bawah ke, dalam ke, asalkan ada. Baru nampak “canggih” sket. Haha.

Takde la, kadang-kadang benda kecik ni orang tak perasan, tapi kalau ada, ianya membantu. Dan benda-benda kecik ni memang banyak (sikit kat situ, sikit kat sini) dan aku kategorikan sebagai “remeh”. Tapi tu la, remeh ni la yang buat aplikasi jadi best. Macam sikit-sikit jadi bukit gitu. IT ALL ADDS UP TO DA TOTAL USER EXPERIENCE (walaupun usernya aku sorang je). Ha.. jadi setakat ni saja semoga berjumpa lagi untuk bersembang di post yang akan datang.

Parameter dan argument

Posted by mkhairul

Parameter dan argument ni selalu diperkatakan atau disebut-sebut apabila berkaitan dengan function call, procedure call dan method seperti tiada perbezaan diantaranya. Tak salah pun, tapi dari segi teknikalnya, agak kurang tepat la. Perbezaannya pun kecil je, bagi aku no problem je.

Jadi, apakah perbezaannya?

Bila kita mendefinasikan sesuatu function, pembolehubah (variable) yang diperlukan oleh function tersebut dipanggil parameter. So kalau rakan sekerja tanya,

“Oi, khairul, function janganKacau tu macam mana nak guna?”

Kebarangkalian besar aku akan jawab, “Eh, ko boleh tak, RTFC? Ni sumber terbuka ok, ko leh tengok kod, aku bukannya compile pun kod aku.” Haha. RTFC tu.. read the fabulous comment. Aku ni suka komen-komen ni, tu yang aku tak berapa gemar sangat tengok tv, bila ditemuramah dia kata “no komen”. Kenapa kau tak komen?! Macam mana orang nak tau kalau kau tak komen!! Argh!

Ok, berbalik kat soalan tadi. Dalam situasi ideal aku akan jawab, “janganKacau tu perlukan dua parameter. ID isu kau dan database connection object”. Kalau dia tak paham gak, aku soh dia isi borang pi masuk U balik. Takde la, gurau je. Aku ajar la dia sebaik mungkin sambil massage tengkuk dia dan membisikkan kata-kata pujian yang indah ditelinganya seperti, “Pergh, laju ko taip.. terbaek!” ataupun “Wow, banyaknya shortcut ko tau, hebatlah”.

Ok, itu parameter, kalau argument pulak adalah bende-bende yang dihantar apabila sesuatu function dipanggil. Bende tu kalau bukan didalam situasi dimana ianya digunakan didalam panggilan function, ianya adalah variable biasa, kalau dia digunakan dalam panggilan function ianya adalah argument.

Haa.. gitu lah ceritanya. Sebenarnya tak penting pun. Tapi kalau jumpa semantic nazi ke ape ke.. paham-paham je la nape tiba-tiba wajah dia berubah bila parameter dan argument digunakan dengan tak betul.

Apakah itu $() didalam Javascript?

Posted by mkhairul

Bila kita dok guna javascript, selalu nampak $(‘.kelas’), dan sebagainya. Tapi apakah itu $() ?

Suatu hari sedang berlegar-legar di ruangan opis, rakan sekerja ku bertanya. Apa benda simbol dollar ni? Terkedu sikit aku. Rasa macam nak call Robert Langdon pun ada, symbologist terkenal, untuk meminta pertolongan beliau didalam hal ini, tapi sekretari dia kata dia takdak la pulak.

Aku pun buka almari ku yang berhabuk dan bersawang dengan sarang tarantula gergasi dimana bermulanya pertempuran sebegini. Ngeri bai. Nasib baik aku dapat belasah labah-labah tu, level up sikit.

Peristiwa aku menyerang raksasa..

Ok, terbabas ke gaung jalan cerita ni. Dimana ya? Oh, $(). $() ni selalu digunakan didalam Javascript Library dan orang menggelarnya Factory Function1. Sebenarnya bukan $(), cuma simbol $ yang dijadikan function sebab tu jadi $(). $ ni macam satu gudang besar yang misteri. Kita masukkan lembu kedalam gudang tu, dia keluarkan rendang daging. Masukkan ayam, keluar jadi KFC. Haaaa… misteri sungguh gudang ni.

So anyway, simbol ni cuma shorthand untuk library yang memakainya. Kalau kita buat gini,

$('.some-class')

maknanya kita hantar argument “.some-class” ke function $, dan katakan disituasi ni kita pakai jQuery, kita hantar “.some-class” ke jQuery dan mintak dia tolong proseskan dimana jQuery akan amik semua elemen yang berkelaskan “some-class”. Adeh, aku pun makin konpius la. Takpe, satu lagi contoh.. katakan aku buat library javascript nama dia janganKacau.js, tapi aku ni hipster sikit, takmo mainstream-mainstream ni, jadi aku nak guna simbol lain yang menyusahkan!

var ಠ_ಠ = function(s){
  alert('ish, jangan la kaco');
};

So, kacau disituasi ni, kita nak panggil semua elemen berkelaskan “some-class”, kita buat macam ni.

ಠ_ಠ('.some-class');

Ish, nak panggil library ni pun dia dah kerut kening dia dengan pandangan yang penuh dengan ketidakselesaan. Pastu kita diberitahu supaya jangan kacau dia. Ok, ok, sorry bro, wa tak kacau lu lagi.

1 Johnathan C. and Swedberg K., Learning jQuery, Packt Publishing, 2007.

Framework “shootout” dengan CodeIgniter?

Posted by mkhairul

PHP Meetup 2011 akan diadakan oleh ahli-ahli php.net.my, bertemakan framework “shootout”. Macam koboi la pulak. Tapi kalau aku jadi presenter, nak kena shootout dengan framework lain, memang aku surrender dulu la, bendera putihku akan berkibaran meluncur angkasa.

Kenapa aku mengaku kalah?

Kalau lawan CodeIgniter..
Dari segi features, Zend menang. Dari segi kepantasan menghasilkan suatu web app, aku rasa CakePHP menang dari segi OO, Symfony la kot.. apa lagi.. entah lah. Apa yang CodeIgniter ada? Very small footprint (tapak kaki kecil lagi comel?), low barrier to entry, elegant toolset dan juga dokumentasi yang komprehensif! Sukar untuk diukur dan dipertandingkan! Takkan nak tayang dokumentasi atas pentas!

Lihatlah kalian semua, betapa moleknya kod ni, dokumentasi ini, bacalah.. aku bagi masa 10 minit. Amacam? Komprehensif?

Mampuih aku kena tendang keluar pentas. Akan tetapi, untuk meetup kali ni aku akan mengaku kalah, sebab tak bersedia (bak kata orang, tactical retreat). Tapi meetup seterusnya, aku akan bersedia (mungkin la) untuk memperlihatkan.. API MEMBARA YANG BAKAL MENYINARI DAN MEMBAKAR KOD! KOOOODDD IGNIIIITEEEE!!! TEBABOOO (sambil menyalakan lighter didepan skrin).

*ahem* Terlebih sound effect pulak.

Oleh kerana tarikh tak confirm lagi, aku pun takleh nak kata gerenti datang. So kita tunggu dan lihat, aku update kalau dah ada tarikh confirm, kita tengok macam mana ya.

Trend untuk tahun 2011?

Posted by mkhairul

Apakah trend untuk tahun 2011 ni didalam pembangunan perisian? Yang pasti adalah Javascript, tetapi terdapat banyak lagi yang bakal menjadi trend pada tahun ini, ada yang mengatakan NoSQL, Node.js, dan pelbagai lagi. Nak kejar trend ni memang leceh, tak terkejar bang oi, letih den. Jadi aku try kejar yang utama, Javascript dan pembangunan pada Android, yang lain cuma nak asahkan balik dan perbaiki, terutamanya Python. Lama betul tak develope betul-betul pakai Python, tahun lepas pakai pun sikit sangat.

Lek ah, pelan-pelan kayuh. Hehehe.

Oh, lagi satu, tahun ni nak tulis dengan gaya yang tak formal.

Rujukan

Refresh parent popup window

Posted by mkhairul

Sori la saya tak tau macam mana nak translate title post ni jadi bahasa melayu tanpa mengalami sakit kepala. Buat masa sekarang ni, banyak kod yang diubah daripada pengaturcara sebelum ni. Banyak betul la popup. Kalau banyak popup ni, selalunya org yang banyak buat sistem gomen (atau “enterprise”?). Mengundang bahana betul banyak popup ni, tab pada Chrome dah lebih 20. Takut satgi kejung terus, Hanging by a Moment.

So, flow dia gini, nak edit maklumat pengguna? Click pada nama pengguna, kemudian popup pun muncullah dengan secara mengejut bersama dengan form dan field-field nya. Edit.. edit, pastu UPDATE!
Kemudian, popup pun tutup dan window browser asal yang panggil popup tu pun refresh! Ye la, kalau tak refresh macam mana nak tengok maklumat yang dah dikemaskinikan.

Jadi bagaimana? Simple je, saya tulis ni pun untuk reference pada diri saya untuk masa akan datang.

window.opener.location.reload(false);

Ref: METHOD: Location::reload