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.
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.
Dah lama betul aku tak buat bahagian UI ni. Kali ni, bug pada dropdown menu. Tak perasan pulak dengan bug (Z-Index bug) ni. Tapi bukan bug ni sahaja, ada yang lain, macam :hover behaviour tak trigger. So aku guna jQuery untuk bug ni seperti berikut
if($.browser.msie)
{
$('.menu li ul').css('position', 'absolute');
$('.menu li ul').css('left', '0');
$('.menu li').css('z-index', '2000');
$('.menu li ul').css('z-index', '1000');
$('.menu li').hover(
function(){
$(this).find('ul').css('display', 'block');
},
function(){
$(this).find('ul').css('display', 'none');
}
)
}
Semoga dapat memperingatkan diri bila terjumpa balik bug ni.
Minify atau lebih dikenali sebagai ‘minification‘ adalah proses membuang segala character yang tak diperlukan tanpa mengubah fungsi skrip tersebut.
Kalau nak tau javascript tu telah di ‘pack‘ (atau minify), bila buka sumber kod dengan menggunakan text editor, dia keluar macam ni…
Ni contoh regex selector untuk jQuery.
jQuery.expr[':'].regex=function(elem,index,match){var matchParams=match[3].split(','),validLabels=/^(data|css):/,attr={method:matchParams[0].match(validLabels)?matchParams[0].split(':')[0]:'attr',property:matchParams.shift().replace(validLabels,'')},regexFlags='ig',regex=new RegExp(matchParams.join('').replace(/^\s+|\s+$/g,''),regexFlags);return regex.test(jQuery(elem)[attr.method](attr.property));}
Susah nak edit kalau dah pack (bukan mustahil, tapi memang susah dan tak disyorkan demi kesihatan jangka masa panjang)
Kita kena mencantikkan kembali kod tersebut (ataupun unpack) dengan menggunakan javascript beautifier.
Bila dah rupa macam ni, senang la kita mengubahsuai.
Post kali ini agak pendek, hanya untuk mencatatkan sesuatu tentang jQuery iaitu cara untuk reset borang. Reset borang adalah antara elemen-elemen yang dimasukkan kedalam borang (selain input validation, input constraint, etc) tetapi ianya bukanlah mandatori, bergantung pada jenis borang.
Jika tak kena cara, menambakah serabut dan rimas pada pengguna. Dibawah adalah contoh kod javascript yang menggunakan library jQuery.
$('#reset_button').click(function(){
$(':input','#myform')
.not(':button, :submit, :reset, :hidden')
.val('')
.removeAttr('checked')
.removeAttr('selected');
})
Tetapi terdapat kelemahan didalam cara diatas dimana jika sesuatu elemen mempunyai nilai lalai (default value), ianya akan dipadamkan sekali. Dibawah adalah contoh input yang mempunyai nilai lalai.
Maka cara terbaik adalah menggunakan function reset dimana nilai untuk elemen akan dikembalikan kepada nilai yang berada didalam attribute ‘value’.
$('#reset_button').click(function(){
$('#myform')[0].reset();
})
Tips: Jika anda menggunakan cara yang kedua (iaitu menggunakan function reset()), elakkan daripada mengguna ‘reset’ sebagai ID elemen anda. Nanti tak jadi!
Selamat programming!
Sumber:
Terdapat sebuah borang (didalam bentuk Word) yang diberikan pada saya dimana ia perlu ditukar kedalam bentuk borang html. Salah satu ruangan (input field) yang perlu di penuhkan oleh pengguna adalah tarikh dan masa.
Contoh terbaik yang saya ingat adalah Google Calendar seperti berikut
Saya terjumpa timepicker yang agak ringkas yang hampir serupa dengan google calendar timepicker. 
Untuk datepicker pula saya menggunakan jQuery datepicker tersebut.
Dengan menggabungkan kedua-dua plugin tersebut, ianya kelihatan sama seperti google calendar’s datetime picker.
Walaupun ianya adalah 2 ruangan yang berbeza (date start, time start), pada bahagian pemprosesannya (backend) saya menyambungkannya kepada satu string dalam bentuk timestamp. Mudah untuk digunakan dan dimanipulasi.
Contoh borang yang ditunjukkan disini kelihatan agak ringkas tetapi memerlukan 3 table untuk menyimpan data-datanya. Tetapi ianya memerlukan post yang baru untuk menunjukkan keseluruhan antara muka borang tersebut dan pemprosesan disebalik tabir.
Maka, setakat ini sahaja. Selamat Programming!
Perisian apa yang anda gunakan untuk menghasilkan screenshot? Saya menggunakan hoversnap untuk mengambil screenshot harian, tetapi menggunakan plugin khas untuk membuat screenshot laman web.
Ini kerana hoversnap tidak dapat mengambil keseluruhan isi kandungan laman web tersebut. Setakat yang hujung sahaja, kalau content bawah kena scroll dan ambil semula.
Mungkin anda menggunakan perisian lain, tetapi bagi tugasan sebegini, saya menggunakan Screengrab!, plugin firefox. Kelemahannya, ambil screenshot pada firefox sahaja.
Berikut adalah contoh screenshot yang diambil..
Berikut adalah cara untuk format table supaya mempunya ‘zebra stripe‘. Sesetengah orang kata, bantuan yang diberikan oleh zebra stripe ni hanyalah mitos dalam meningkatkan keboleh bacaan data dalam bentuk jadual (tabular). Data daripada kajian (Zebra Stripes: Does it really help?) yang dijalankan oleh Jessica Enders di A List Apart menyatakan yang ianya membantu. Pada diri saya, ia membantu, entahlah, lain orang lain cara dibantu.
Berikut adalah cara saya menggunakannya dalam bentuk javascript.
$(document).ready(function(){
$("table tbody tr:nth-child(odd)").addClass("odd");
})
Dimana ia akan memasukkan class ‘odd’ kedalam baris yang ganjil dan formatkan dalam bentuk berikut:
tr.odd{ background-color: #C3D9FF; }
Edit: Terlupa nak beritahu, anda memerlukan jquery.
Memandangkan saya banyak menggunakan Perl/CGI sejak kebelakangan ni, post ni adalah berkaitan dengan perl/cgi.
Terdapat pengaturcara yang memandang ringan aspek sekuriti dalam perisian (kebanyakannya tak tahu, ignorance is bliss, no?) dan mengabaikannya sehinggalah suatu hari dimana perisian tersebut perlu menembusi pasaran yang lebih besar dan perlu melalui proses “penetration testing” (singkatan pen test) yang akan merungkaikan segala kelemahan yang telah diabaikan selama ini didalam pembangunan perisian tersebut.
Apabila terjadi begitu, maka bermulalah operasi menampal perisian daripada lubang-lubang sekuriti tersebut. Bagi kebanyakan input daripada pengguna dalam Perl/CGI, menggunakan “placeholder” adalah mencukupi untuk menyimpannya dengan selamat dalam pangkalan data (database) mengelakkan daripada SQL Injection. Rujuk article di perlmonks untuk penerangan lanjut, Preventing SQL injection attacks: Placeholders are enough for MySQL, Postgresql and SQLite.
Apa bendakah itu “placeholder”?
Placeholder adalah nilai yang digunakan untuk menggantikan sesuatu nilai yang lain.
Berikut adalah contoh penggunaan placeholder.
$sth = $dbh->prepare( "SELECT name WHERE city = ? AND state = ?" ); $sth->execute( $city, $state );
Dengan menggunakan placeholder, modul DBI akan secara automatik menguruskan isu-isu “quoting” (escape single/double quote, e.g. \”) didalam nilai yang dihantar kepada pangkalan data.
Kekurangan “placeholder”
Walaupun semua jenis input selamat dimasukkan kedalam database dengan menggunakan placeholder tanpa mengakibatkan SQL Injection, ia masih perlu diperiksa kesahihannya. Anda masih perlu untuk mengesahkan (validate) input yang dimasukkan samada ianya integer, numeric, alpha, alphanumeric, dsbnya.
Jika input tersebut adalah berbentuk HTML, tukarkan semua character ke dalam HTML Entities, untuk mengelakkan daripada kes-kes XSS (Cross-site Scripting). Jika tiada HTML dibenarkan, gunakan HTML::Scrubber untuk sental semua html daripada input tersebut.
Berikut adalah contoh untuk menukarkan character-character ke bentuk HTML Entity
use HTML::Entities;
sub html_to_db{
my ($html) = @_;
$html = encode_entities($html);
$html =~ s/\r\n//gs;
return $html;
}
Marilah kita sama sama belajar mempertahankan diri daripada anasir-anasir yang tak diingini apabila membangunkan perisian.
Selamat programming!
Terdapat pertandingan yang akan diadakan oleh Kerajaan Malaysia sempena MyGOSSCON 2009 (Malaysian Government Open Source Software Conference).
Keterangan lanjut boleh didapati pada laman web acara tersebut.
Nampak macam menarik, tetapi jika saya memasuki pertandingan tersebut, aplikasi yang dibina rasanya tidak secanggih mana, kerana saya akan banyak fokus pada kebolehgunaan. Benda yang remeh-remeh seperti menu bantuan (help), tooltip, on-the-fly editable content (dengan menggunakan ajax), penerangan penggunaan aplikasi dan juga dokumentasi (yang memadai untuk pengguna).
Dengan kata lain, bergantung pada skop aplikasi web yang hendak dibangunkan, aplikasi yang dibangunkan dapat dijual setelah berlalu 24 jam pertandingan tersebut. Saya tidak tahu bagaimana pemarkahan akan diberi (ada tak info pada laman web mereka? Rasanya tiada), tetapi itulah yang akan saya lakukan. Sehaluan dengan matlamat pertandingan tersebut:
You are currently browsing the archives for the Web category.