Sembang Programming - Sembangan mengenai pengaturcaraan

Masa peperiksaan atau ujian dibangku sekolah ataupun university, pernahkah anda menggunakan nota kecil yang terselindung sebagai rujukan?

Ha! Itulah cheatsheet. Sekeping kertas yang mempunyai nota ringkas mengenai sesuatu topik. Dalam pembangunan perisian ni, terlalu banyak perkara yang perlu dirujuk (HTML, CSS, Javascript, OOP, Domain Driven Design, dan sebagainya), kalau nak rujuk setiap satu topic pada buku, memang jenuh la nak membelek buku-buku tu.

Sekarang ni, dah banyak cheatsheet yang terdapat di internet, taip je apa kat pakcik Google, mesti ada punya. SVN? Git? Mercurial? CMS kegermaran seperti Drupal? Joomla? Semua ada cheatsheet.

Antara website yang saya selalu pergi untuk mendapatkan cheatsheet adalah Addedbytes (dulu dikenali sebagai ilovejackdaniels.com tapi lawyer Jack Daniels dok hantar cease and desist letter kat owner suruh tukar nama).
Antara Cheatsheet yang ada kat situ:

• HTML
• CSS
• PHP
• Python
• Subversion
• mod_rewrite
• Regular Expressions
• Ruby on Rails
• MySQL

Tak cukup? Nak lagi? Haaa ni dia, RefCardz (Free Cheatsheets for developers)
Print dan letak la kat cubicle anda supaya senang untuk dirujuk.

Selamat programming!

Apabila melihat feature baru yang terdapat didalam CS5, iaitu content-aware, agak kagum saya. Beberapa contoh gambar yang diaplikasikan feature tersebut dapat dilihat pada blog adobe.

Komen oleh user pada gizmodo mengatakan feature tersebut telahpun ada di GIMP, saya pun tak pasti. Photo editor yang saya selalu gunakan adalah Paint.NET.

Senarai ini telah wujud agak lama, baru sekarang saya teringat nak post kerana baru-baru ini saya terpaksa menggunakannya pada design yang memerlukannya.

Walaupun saya tak berapa gemar menggunakan hack-hack sebegini, tetapi terpaksa juga menggunakannya. Alternatif lain adalah mengeluarkan patch pada engine-engine browser (tu lagi susah!)

Sebelum menggunakan hack-hack ini, pastikan anda telahpun memasukkan css reset. Terdapat pelbagai jenis css reset, jika anda menggunakan CSS framework, ia pasti mempunyai file tersebut.

Baiklah, tanpa berlengah lagi, senarai css hack untuk browser.

/***** Selector Hacks ******/

/* IE6 and below */
* html #uno  { color: red }

/* IE7 */
*:first-child+html #dos { color: red } 

/* IE7, FF, Saf, Opera  */
html>body #tres { color: red }

/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }

/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }

/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho {  color: red }

/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
 #diez  { color: red  }
}

/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
 #veintiseis { color: red  }
}

/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece  { color: red  }

/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red  }

/* Everything but IE6-8 */
:root *> #quince { color: red  }

/* IE7 */
*+html #dieciocho {  color: red }

/* Firefox only. 1+ */
#veinticuatro,  x:-moz-any-link  { color: red }

/* Firefox 3.0+ */
#veinticinco,  x:-moz-any-link, x:default  { color: red  }

/***** Attribute Hacks ******/

/* IE6 */
#once { _color: blue }

/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }

/* Everything but IE6 */
#diecisiete { color/**/: blue }

/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }

/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }

/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */

Harap ianya dapat membantu. Selamat programming!

Sumber

• Browser CSS hacks

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!

Daripada Where does the programming effort go?

Less than 10% of the code has to do with the ostensible purpose of the system; the rest deals with input-output, data validation, data structure maintenance, and other housekeeping.

Kurang daripada 10% daripada kod yang dihasilkan dapat dirasai atau diperlihatkan kepada pengguna; yang selebihnya berkaitan dengan input-output, data validation, data structure maintenance, dan lain-lain kerja yang remeh tetapi bila digabungkan dan dilihat secara keseluruhan adalah zahir dan intipati sistem tersebut.

Keadaan begini menyebabkan pengaturcara selalu diganggu oleh pengurus-pengurus (manager) yang tidak mempunyai latar belakang dalam pembangunan perisian ataupun tidak cuba untuk memahami apa yang diperlakukan oleh pengaturcara.

“Ini je?” adalah antara penyataan yang kerap kali disuarakan.

Agak bingit dan sakit hati bagi para pengaturcara yang penat lelah menghasilkan kod dan sebagainya untuk menjadikan perisian tersebut yang terbaik, diperlekehkan hasil kerjanya sebegitu. Bagaikan sesuatu disentap didalam dada. Luntur segala semangat dan keazaman yang sebelum ini membuak-buak didalam hati.

Mereka yang tahu serba sedikit mengenai programming kerap kali akan menyukarkan keadaan kerana mereka mungkin dapat bayangkan 10% daripada kerja yang akan dilakukan daripada keseluruhan projek. Ini adalah perkara biasa yang kerap kali saya bertemu.

Kerja-kerja yang remeh beginilah yang perlu kita ketahui dan juga adalah peluru bagi kita sebagai pengaturcara untuk mematahkan serangan pihak musuh yang cuba mempertikaikan hasil kerja kita.

Berikut adalah contoh non-functional requirement yang ada didalam sesuatu projek.

Security
• Login requirements – access levels, CRUD levels
• Password requirements – length, special characters, expiry, recycling policies
• Inactivity timeouts – durations, actions

Audit
• Audited elements – what business elements will be audited?
• Audited fields – which data fields will be audited?
• Audit file characteristics – before image, after image, user and time stamp, etc

Performance
• Response times – application loading, screen open and refresh times, etc
• Processing times – functions, calculations, imports, exports
• Query and Reporting times – initial loads and subsequent loads

Capacity
• Throughput – how many transactions per hour does the system need to be able to handle?
• Storage – how much data does the system need to be able to store?
• Year-on-year growth requirements

Availability
• Hours of operation – when is it available? Consider weekends, holidays, maintenance times, etc
• Locations of operation – where should it be available from, what are the connection requirements?

Reliability
• Mean Time Between Failures – What is the acceptable threshold for down-time? e.g. one a year, 4,000 hours
• Mean Time To Recovery – if broken, how much time is available to get the system back up again?

Integrity
• Fault trapping (I/O) – how to handle electronic interface failures, etc
• Bad data trapping – data imports, flag-and-continue or stop the import policies, etc
• Data integrity – referential integrity in database tables and interfaces
• Image compression and decompression standards

Recovery
• Recovery process – how do recoveries work, what is the process?
• Recovery time scales – how quickly should a recovery take to perform?
• Backup frequencies – how often is the transaction data, set-up data, and system (code) backed-up?
• Backup generations – what are the requirements for restoring to previous instance(s)?

Compatibility
• Compatibility with shared applications – What other systems does it need to talk to?
• Compatibility with 3rd party applications – What other systems does it have to live with amicably?
• Compatibility on different operating systems – What does it have to be able to run on?
• Compatibility on different platforms – What are the hardware platforms it needs to work on?

Maintainability
• Conformance to architecture standards – What are the standards it needs to conform to or have exclusions from?
• Conformance to design standards – What design standards must be adhered to or exclusions created?
• Conformance to coding standards – What coding standards must be adhered to or exclusions created?

Usability
• Look and feel standards – screen element density, layout and flow, colours, UI metaphors, keyboard shortcuts
• Internationalization / localization requirements – languages, spellings, keyboards, paper sizes, etc

Documentation
• Required documentation items and audiences for each item

Bagi sesuatu projek web, sedikit penambahan seperti captcha untuk borang(form), cross-browser testing (dapat dipaparkan pada pelbagai jenis browser seperti chrome, firefox, opera, safari dan juga IE 7/8/9), etc.

Dengan berbekalkan maklumat sebegini, kita dapat memberi penjelasan dan menerangkan serba sedikit perkara yang dilakukan dan berlaku disebalik tabir, moga hati dan mindanya terbuka untuk menerimanya, kalau tak, susah sikit la.

Selamat Programming!

Lama betul tak menulis di blog ni. Banyak kerja, ke sana ke sini, tapi kini saya sudah kembali!
Saya akan kumpulkan hasil-hasil karya yang dapat dialihbahasa dan juga menghasilkan penulisan baru!

Berikut adalah contoh-contoh wiki yang dihasilkan untuk memudahkan pembangunan sesebuah perisian.

• OpenOffice
• Mozilla Wiki

Oleh kerana sekarang saya guna perl, saya cuba memperkenalkan Perl Coding Standard pada adik-adik fresh grad di syarikat sekarang ni dengan menulisnya didalam wiki untuk kegunaan semua developer.

Saya juga meluangkan masa untuk mengajar mereka yang ingin belajar memasukkan atau menyunting maklumat didalam wiki.

Code review juga adalah antara proses yang cuba saya perkenalkan tetapi agak terbantut untuk menerangkannya kerana terlalu banyak mindset yang berbeza untuk mengadaptasikan penjelesan saya.

Marilah berkongsi wiki-wiki menarik yang pernah anda gunakan (layari), kecuali wikipedia, harap maklum.

Dah lama pula tak post. Berikut adalah berkenaan dengan Technical Debt.

Berhutang atau lebih dikenali sebagai “Technical Debt” adalah metafor yang direka oleh Ward Cunningham didalam aktiviti pembangunan perisian.

Terdapat 2 jenis hutang, iaitu ianya dilakukan dengan sengaja atau tidak sengaja. Sila baca pautan-pautan yang diberikan diatas untuk makluman lanjut.

Satu senario yang biasa saya jumpa adalah dimana..

Abu: “Aku rasa kita kena buat SOP atau guideline untuk setup environment development kita ni”
Ahmad: “Kita tak ada masa, kita kena siapkan feature-feature ni dalam bulan ni”
Abu: “Bukan kita kena fokus terus buat SOP atau guideline ni, setiap kali dimana antara kita setup, kita tulis langkah-langkah dia pastu kita try la kalau ada tak betul kita tambah dan perbaiki, bukannya nak kena formal pun. Nanti orang baru masuk kita bagi benda ni terus boleh buat sendiri.”
Ahmad: “Ok, ok takpe, nanti ada masa nanti kita buat”

Kemudian, ada orang baru masuk dan perlukan persekitaran pembangunannya disetup. Ahmad pergi tolong, setup IDE nya dan web server. Apabila nak setup perisian, dia menunjukkan cara pembangunan di tempat kerja itu, dan sampai satu tahap untuk run test (unit testing), ada yang gagal. Sambil menggaru kepala, dia cuba debug. Selepas 1 jam, dia panggil Aiman, rakan sekerja nya.

Ahmad: “Aiman, test ni fail la. Aku tak pasti apa masalah”
Aiman: “Ok, meh aku tengok”

Selepas 1 jam.

Aiman: “Aku pun tak tau. Jap aku gi cari Ali.”
Ali pun datang.
Ali: “Erm, jap aku test… Macam ni takleh.. oh korang lupa nak tukar setting kat config dia nih. Jap aku tukar.”
Ali: “Ok, settle.”
Lalu mereka pun pulang ke tempat masing-masing untuk sambung kerja mereka.

Nampak tak apa masalah kat sini? Macam mana kalau ada orang baru lagi masuk? Takkan sampai 3 orang kena datang untuk menyelesaikan masalah akar sebegini. Takde guideline untuk setup persekitaran pembangunan. Bukan terhad pada isu begini sahaja, macam macam lagi isu seperti tiada piawaian untuk mengkod (coding guideline), nota-nota penyelesaian yang bertulis (dalam word pun ok) yang boleh dikongsi bersama.

Sedar tak sedar, ini semua adalah hutang. Dimana kadar faedahnya bertambah hari demi hari dan jika tiada kesedaran untuk membayar “hutang” ini, akan membawa padah (dari segi mental ataupun kewangan).

Jadi, marilah kita bersama-sama sedari akan hutang-hutang yang mengelilingi pinggang kita dan membuat persiapan untuk membayarnya dengan menjadi lebih peka.

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:

• Promote high level open source web application development skills in Malaysia.
• Enable local OSS web application development communities to grow and establish themselves.
• Encourage students to get involve in open source web application development and be well prepared for industry need.

Apa itu framework?
Framework adalah suatu koleksi teknik dan cara yang diambil daripada aktiviti dalam pembangunan sistem seperti DAL (Database Abstraction Layer), ORM, input validation, caching, templating, dan sebagainya.

Berikut adalah senarai framework untuk pembangunan web.

Mengapa perlu menggunakan framework?
Ia mengelakkan anda daripada perlu mengulangi aktiviti mengkod (ataupun menyelesaikan masalah yang telahpun anda selesaikan) yang berulang dengan menggunakan prinsip DRY (Don’t Repeat Yourself).

Framework menggalakkan anda supaya memisahkan kod persembahan, kod kawalan, dan logik perniagaan. Memudahkan penyelenggaraan pada masa akan datang, memudahkan aktiviti pengayahpijat (debug) dan pelbagai lagi bergantung pada objektif-objektif framework tersebut (contohnya CakePHP, salah satu kebolehannya adalah ianya dapat mempercepatkan pembangunan CRUD aplikasi web).

Framework juga mempercepatkan pembangunan perisian kerana ia menyediakan ‘helper’ dan ‘library’ yang biasa digunapakai dalam pembangunan perisian seperti ORM, Date Manipulation, Upload, Profiling, Unicode, etc (seperti yang saya nyatakan diatas).

Framework mana yang bagus?
Tiada satu framework yang bagus untuk semua. Semua mempunyai kelemahan dan kelebihan. Untuk mengetahui dengan lebih tentang kelebihannya adalah dengan memahami objektif framework tersebut, feature-feature dan juga dengan mencubanya.

Kesimpulannya, kepentingan framework adalah kerana ianya..

• menggalakkan ‘best practices‘
• mempercepatkan pembangunan aplikasi
• menyediakan modul, library dan helper untuk menyelesaikan permasalahan umum
• memisahkan kod persembahan daripada kod pemprosesan (logik perniagaan, akses pangkalan data, etc)
• memudahkan komunikasi (penggunaan istilah) diantara pengaturcara lain jika mereka menggunakan framework yang lebih kurang sama
• mempunyai komuniti untuk membantu anda (jika anda menggunakan framework sendiri, maka tiada komuniti)
• mempunyai pengaturcara khas untuk pembangunan framework tersebut maka anda tak perlu membangunkannya sendiri, hanya fokus pada aplikasi yang hendak dibangunkan

Itu adalah diantara yang dapat saya fikirkan buat masa ini, mungkin ada lebih lagi.

Dari sudut perniagaan, mengapa perlu menggunakan framework? Mempercepatkan prototaip, memudahkan penyelenggaran (mengurangkan error dan jika ada error lebih mudah untuk menjejakinya), memudahkan integrasi dengan aplikasi 3rd party (SAP, Peoplesoft, Facebook, Google Apps, Google Single Sign-on (SSO), dan bermacam lagi) bermaksud anda dapat melakukan lebih dalam masa yang singkat (berbanding tanpa menggunakan framework).

Masih kurang faham? Pilih satu framework, pilih satu projek (contohnya Pengurusan Tugasan (task management), Guestbook, Blog, etc) dan mula mengkod (berpandukan dokumentasi ataupun tutorial framework tersebut). Anda akan mendapat gambaran yang lebih jelas mengenainya apabila anda menggunakannya.

Selamat programming!

Sumber

• Define Framework
• Web Application Frameworks