Sembang Programming - Sembangan mengenai pengaturcaraan

Sebelum ni, ada tempat yang tidak membenarkan saya untuk download daripada Sourceforge. Bila saya gunakan Tor, ia tidak dapat menyekat saya daripada download kerana sumber data yang datang dan pergi adalah bukan daripada/kepada sourceforge, ianya datang daripada rangkaian Tor.

Oleh kerana data melalui rangkaian Tor, ianya akan menjadi agak perlahan. Terpaksa berkompromi lah kalau nak akses kepada benda-benda yang di halang (youtube, facebook, etc).

Ada beberapa cara untuk menggunakan Tor (apabila anda telah install), dan cara yang paling mudah adalah dengan menggunakan plugin firefox, Torbutton.

Setakat ni tidak berkesempatan untuk mencubanya ditempat-tempat yang menghalang website seperti youtube dan facebook. Kerana bergantung juga pada cara website-website tersebut dihalang. Jika trafik HTTP dihalang secara “traffic analysis“, maka tak boleh juga la.

Ada discussion dalam BM kat ubuntu malaysia.

Selamat memuat turun!

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

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:

• Reset form with jQuery
• Form reset retain default value

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!

Bagi mereka yang hanya hendak burn CD, tanpa segala benda lain (CD Label Designer, etc) yang tak diperlukan, saya cadang menggunakan Infra Recorder. Ianya percuma dan sumber terbuka (open source).

Saiznya yang kecil (3.27MB) juga membuatkannya senang untuk digunakan di mana sahaja (download je bila nak guna).

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.