Tambahan 1600++ baris code.

Assalamualaikum semua! Alhamdulillah, setelah bertungkus lumus selama 3-4 hari, saya telah (separuh) berjaya mengupload versi baru YourAgregator. Ya benar! post ini berkaitan dengan YourAgregator, kalau anda tak mau tau langsung tentang YourAgregator, bolehlah balik semula ke Facebook, atau jika anda tak tau apa itu YourAgregator, bolehlah melawat AgregatorTest iaitu agregator percubaan rasmi untuk projek ini.

Baiklah, mari kita mulakan dengan status update. Seperti yang ditulis dalam tajuk pada kali ini, update ini telah menambah lebih kurang 1600 baris kod (termasuk baris kosong), kedalam kod keseluruhan YourAgregator. Ya walaupun 1600 itu tidak sebanyak mana tetapi kepala saya agak stress mendesign kod tersebut, so kita highlightkan nombornye sikit. Walaubagaimanapun, 1600 kod tersebut merangkumi hanya dua file, yang bermakna, 1600 itu untuk satu update sahaja. Ya benar, untuk versi yang kali ini hanya ada satu ‘feature’ yang ditambah, yang lain hanyalah tweak dan bugfix. Apakah yang feature yang dilihat besar ini? Sabar… let’s save the best for the last. Dan mari kita mulakan dengan update yang kecil dahulu dengan satu snapshot frontpage YourAgregator.

Jadi, apa yang berubah? Kalau anda tak tahu apa yang berubah, tandanya anda baru pertama kali melawat frontpage YourAgregator, kerana frontpage ini dilengkapi dengan design yang baru. Walaupun tidak selawa mana, ataupun mungkin lebih tepat, tak lawa langsung, tetapi sekurang-kurangnya ada perubahan jugak. Penggunaan gradient itu mungkin keterlaluan, tetapi sekurang-kurangnya frontpage ini tidaklah terlalu plain.

Seterusnya, kita lihat pula pada salah satu page dalam manager interface iaitu page untuk edit ‘page’. Kalau anda tak tau apa itu ‘page’ tandanya anda ketinggalan post tentang update yang lepas, kerana dalam update yang lepas, benda baru yang saya letak di update yang lepas adalah ‘pages’ iaitu muka surat yang admin boleh buat untuk ditonjolkan di frontpage menu. Dan dalam update ini, kita dapat lihat, form untuk edit ‘pages’ sudah dilengkapi dengan rich text editor dan rich text editor tersebut di ‘theme’ dengan theme yang lebih seragam. Saya tau, perkara ini terlalu kecil sehinggakan tidak perlu untuk diletakkan di blog post, tetapi secara terus terang saya katakan, dalam update ini saya hanya ingat tiga perkara sahaja iaitu, design frontpage, form yang ini dan 1600++ baris code tesebut. Rasanya hanya tiga perkara itu yang saya buat untuk update ini.

Ok, tanpa kita membuang masa, mari kita melihat apa yang dimaksudkan dengan 1600++ code tesebut. Kita mulakan dengan screenshot AgregatorTest .

Ok, kalau anda tak pernah melawat AgregatorTest, mari saya terangkan apa yang berbeza, designnya. Designnya telah berubah. Itu gunanya 1600 kod tersebut? BUKAN! Fikir realistik sikit! 1600 baris tu! penat saya buat, dan akhirnya keluar begini aje? 1600 kod yang terlibat tersebut adalah sejenis css editor untuk agregator. Yakni, yang ni:

Ya bahagian yang kat atas tu. Saya bagi editor ini nama “Styler”. Ia berfungsi seperti blogger punye theme editor tetapi ia boleh digunakan terhadap mana-mana css selector. Of course, kamu takleh tekan apa yang kamu nak edit pastu boleh terus tukar background, css yang asal perlu diedit terlebih dahulu untuk meng-set selector mana yang boleh dan patut diedit dengan editor ini. Kalau anda tak faham, bukak agregator anda, tekan manage, pastu style, pastu  tekan edit css (bukan edit style using Styler), pastu tekan butang reset. Css anda akan di-reset dengan css yang default yang dilengkapi dengan comment khas diatas yang digunakan untuk menentukan element mana yang boleh diedit menggunakan Styler. Setelah di-reset, baru tekan ‘edit style using Styler”.

Kenapa saya tak bagi tekan terus element yang nak diedit? Sebab, css ini agak sensitive. Buat aje, display:inline, nantu jadi macam-macam, so bahagian menentukan element mana yang boleh diubah saya serahkan kepada designer yang berkemahiran, yakni yang faham css, dan css mereka, mereka boleh jadikan sesetengah element boleh diedit dengan Styler, so pengguna-pengguna novice bolehlah edit pakai Styler tanpa merosakkan layout.

Dengan menggunakan styler anda boleh mengedit lebih kurang 30 css property. Tapi, of course sebenarnya tak banyak mana, sebab sesetengah property ada dia punye ‘shorthand’ contohnya margin jadi margin-left, top, bottom, dan right so, ia dikira empat css property bukan satu. Antara css property yang saya suka adalah border-radius, box-shadow, text-shadow dan font-family. Of course, sesetengah browser yang lama (IE 8 kebawah), tak support css property tertentu, so pandai-pandailah korang.

 So, itulah feature baru untuk YourAgregator. Masih ada lagi banyak ‘rough edge’ dalam Styler. Tapi memandangkan sesuatu agregator itu bukannya selalu di-design, untuk update yang akan datang, saya akan lebih menekan tentang interaksi antara member, dengan buat satu page, untuk member edit description, letak gambar, message orang lain, dan mungkin ‘chat’. Anyway, jawatan designer sukarelawan masih lagi terbuka dengan luas, so, sesiapa nak tolong den, bolehlah comment atau email di asdacap@gmail.com. So, apapun, cau dulu ya! Assalamualaikum! bye bye!

This entry was posted in Projects and tagged . Bookmark the permalink.