Month: December 2011

YourAgregator 2nd TODO list.

• Build a layout system
• Add a blog (main blog not agregator blog)
• Heavy design work on the main page.
• Terms and Policy
• Add a system where moderator can ask question to new member.
• Feedback to moderator.
• Documentation.
• Ability to rearrange page order in menu.
• Manage interface redesign.
• Moderator can host media file.
• Category
• Add error status when cannot get rss.
• Redesign top menu
• Different color for post with different rating.
• Ability to make agregator, public/private.

Hai! Assalamualaikum semua! Ok, so today, I’m going to try to write in english. That’s because currently, YourAgregator has been indexed in Google, and at the same time, this blog seems the most referenced blog about YourAgregator. Because YourAgregator does not have an About page (yet), and anything about YourAgregator will be referenced to this blog, I’ll be talking in english from now on, on anything that involve YourAgregator, because YourAgregator is (currently) written in english.

It must be because of the domain. I should’ve also buy domain for numerologyprobability.

Ok, so the purpose of this post is to help me to visualize the future of YourAgregator and also to help me stay on track on YourAgregator. So, you can say that this is the second TODO list for YourAgregator. Ok, so let’s get started, so first let’s see what we currently have in YourAgregator, and at the same time, review what is YourAgregator actually is.

The logo….. I’m not good at designing so don’t say a word.

Agregator test is an agregator that is used for testing YourAgregator.

The nice button

Anyone into designing?

Inspite all that, the biggest problem is that YourAgregator is hosted on Google App Engine, with all it’s mighty restriction. To make it worst, paypal cannot convert MYR to USD, and to make a foreign currency in the local bank, the minimum deposit is RM1000. I’m a poor kid! Local hosting provider in another hand, do provide RM 35 to RM100 a year for a shared hosting. But that’s with a maximum processor speed of 50Mhz to 100Mhz. That’s 26X slower than my computer! I can’t imagine it ran django with mongo db. That will need at least 256MB ram to run. So, the plan was to use Amazon Ec2 free trial. Unfortunately, I do not have a credit card to verify, so currently I’m stuck with Google App Engine. 

The red bar is the result of 7 blog submission.

GAE or not, YourAgregator is still online, and I intend to keep it that way. And the plan is to make it mature enough, make some money with it and pay hosting with that money! And to do that, we need to make sure It is user friendly, from the frontpage!

Obviously, this will need a lot of work. A little notice ‘Hi! It’s seems that you are not logged in. (More message will be written)’ shows a lot. This frontpage should show “Welcome to YourAgregator!, a site for news based community. Login or Signup to create or join agregators!” or semething like that with ton’s of graphics. Ok, so the user logged-in….

The login page is probably the most beautiful page in YourAgregator. Probably because of the login providers logo. Other than that, there is the confusing, request password reset and register a new account.

Hai! Assalamualaikum semua! Dalam post ini saya akan membentangkan tentang update youragregator yang terbaru. Sebenarnya dari pagi tadi lagi dah siap segala upload, tapi pasal ada program harini, jadi pengumuman ini dihasilkan pada hari ini.

So, apa yang terbaru dalam YourAgregator? Yang pertama sekali ialah perubahan domain, yakni:

Itu sahaja. Disebabkan perubahan ini, sesetengah authentication (Facebook) sudah misconfigured, menyebabkan korang takleh login menggunakan service provider tersebut. Tapi takpe, masalah ini masalah kecil, dan mungkin sudah diselesaikan pun.

Yang kedua, kemunculan chat support dalam YourAgregator:

Yes, chat support sudah wujud. Ia tidak menggunakan shoutbox atau segalanya, just plain python, datastore and google channel api. Dan disebabkan itu, dan juga kerana youragregator di-hostkan atas free quota, hanya ada 100 orang boleh daftar chat sehari. Kalau kamu refresh, kamu dikira mendaftar semula. So, kalau kamu refresh 100 kali, orang lain takleh chat.

Selaindaripada itu, ada banyak caching yang dilakukan dibelakang tabir. Dan juga, search sudah dimatikan. Kenapa? Kerana:

Yang merah to.

Apabila search di-onkan, youragregator hanya boleh terima dalam 7 blog submission, pastu quota habis. Jadi disebabkan itu, search dimatikan.

So of course saya rasa ada benda yang pelik, memandangkan sampai 50,000 database ops hilang begitu aje. Ok, mungkin pasal ada 2 additional write untuk setiap additional indexed property, tapi kalau satu blog pakai 50 write sekalipun, patut boleh submit 1000 blog. Apapun, setelah search dimatikan, sekarang dia boleh terima 75 blog submission. Kira ok-lah kan? So, buat masa nie, just terima seadanya ok?

So… that’s it-lah. Tak ada apa-apa yang lain pun, Twitter authentication dah boleh pakai, dan caching patut melajukan keadaan (agaknya). So, bye-bye lah. Assalamualaikum.

Ok, so harini saya akan mengupdate tentang upload terbaru YourAgregator. Pada upload yang kali ini, kebanyakannya adalah bugfix dan feature yang dianggap baru pun, yang baru dibuat sejam lepas adalah Feedback form.

So, apakah yang menyebabkan saya mengupload YourAgregator yang ini? Cerita nye begini…..

Pada suatu hari…di pagi yang indah… seorang geek sedang membuka chrome, untuk melihat status google app engine. Kemudian, dia melihat di section log, untuk mengenal pasti sebarang server error yang wujud. Alangkah terkejutnya budak tersebut apabila terdapat masalah apabila seseorang telah cuba untuk melogin menggunakan account twitter tetapi gagal! Setelah mencuba mendebug-debug masalah tersebut, budak tadi masih lagi tidak berjaya menyelesaikan masalah tersebut ;-( sob…sob…sob…

 Sedih kan cerita tadi? Dan disebalik itu, ada masalah-masalah lain yang antaranya yang paling kritikal ialah masalah dalam javascript untuk kita punya AJAX pages yang menyebabkan pengguna takleh join….dan login…..Saya tau, itu masalah yang sangat besar. Begitu juga dengan masalah lain seperti form untuk create agregator tak berfungsi…Masalah besar lagi. So, disebabkan serangga-serangga itu, saya mengupload YourAgregator dengan fix-fix berkenaan. So sekarang kalau korang login (dah boleh dah), korang akan jumpa login page yang lebih cantik seperti ini:

Yang pasal masalah twitter tu, saya masih lagi sedang mencuba, mungkin dah boleh dah (CeTry sekarang). Kemungkinan besar, masalah tu timbul sebab domain kepada login page tu tak diubah, yakni :

Takleh gini bang.

So twitter tak kasi sebab token yang diregister kat twitter berdaftar kat domain youragregator.appspot.com, bukan subdomain-nye. Tapi sampai sekarang takleh jugak. Kenape? Ntah. Masih lagi menjadi misteri. So buat masa ni, korang kena login pakai Facebook atau Google atau Yahoo lah. Nak buat macam mana….

Banyak ruang tu! Boleh komen banyak-banyak!

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!

Assalamualaikum semua! Apa khabar! Ya! benar! say masih hidup lagi haha!

OK, so macam biasa selepas baru upload versi YourAgregator yang baru saya akan buat blog post tentangnya. Memandangkan kali ini saya mengambil masa lebih daripada 3 hari untuk mengupload versi kali ini, pasti banyak benda baru kan? SALAH!!! Tidak banyak benda baru yang diletakkan. Kebanyakan benda-benda yang baru pun di-commit pada hari ini. Jadi apakah yang menyebabkan delay yang sebegini?

 Selalunya kita dengar tentang jQuery kan? Tapi kita jarang dengar tentang Dojo. So satu hari saya cuba try tengok webpage dojo. WOW! adalah pendapat saya yang pertama tentang dojo. Membandaingkan dojo dengan jQuery ibarat membandingkan Qt dengan gtk. Dojo membunyai BANYAK kebolehan seperti Deferred dan Object Store dan yang paling hebat (bagi saya) ialah senarai widget-widget nye yang nampak sangat professional! Maka timbullah satu semangat dalam diri saya untuk memasukkan dojo ke dalam YourAgregator dan kemudian baru saya faham kenapa jQuery lebih famous berbanding dojo.

Satu perkara yang saya sangat suka tentang dojo ialah dia punye Rich Text Editor. Seperti yang tertulis di YourAgregator TODO list, salah satu benda baru yang saya nak letakkan di YourAgregator ialah kebolehan untuk submit hanya satu post, bukannya rss. Dan disebabkan description post tersebut sepatutnya boleh ada benda-benda seperti ‘link’ dan ‘bold’, tugas meng-edit description tersebut paling sesuai dilaksanakan oleh Rich Text Editor. Maka mulalah perjalanan saya untuk meletakkan dojo-punye rich text editor kat submit_page. Namun setelah meletakkan Tab Layout (dari dojo) satu masalah timbul. Tab layout takleh auto resize macam jQuery punye Tabs. SO kita kena letak fixed height kat Tab Layout. Ok, boleh diterima. Saya letak fixed height. Kemudian baru saya letak dojo Editor. Ok, so far so good. Editor keluar cantik. TAPI editor takleh diletakkan di tempat textarea.  Saya fikir, takpe…takpe…editor dia cantik…Nanti kits buat manual post ok. Test-test ada masalah lain yang keluar. Error ‘the id=’bla-bla’ has already been registered’ (lebih kuranglah). Ha? Ape ke heh? dojo Editor tak keluar? And so mari kita debug masalah ni, masalahnya ialah YourAgregator telah menggunakan teknik ajax untuk load submit page (yang saya cerita kat post lepas). Dari situ, tekan ‘back’ akan menyebabkan dia load agregator pakai ajax, dan memusnahkan page yang lepas. Tapi segala javascript object masih lagi intact. Tambah lagi dengan dojo framework yang sangat integrated itu. Namun apabila kita bukak balik submit page tersebut, kita cuba register editor dengan id yang sama, dengan yang dah ada dalam dojo punye registry. So keluar error tersebut dan editor tak keluar. Begitu juga dengan tab layout (kalau tak silap saya). Tapi takpe…takpe… dojo punye Editor cantik… So saya pun buat macam-macam, publish-subscribe event dan akhirnya keluarlah editor tersebut dengan berfungsi.

….must…..resist…dojo….

Of Course saya tak cerita pasal lima error yang keluar setiap kali saya bukak page tersebut, tapi bila dia dah render elok, kita biar ajelah. Saya jugak tak cerita pasal masalah dojo.require kat dalam Ajax page yang mana membuatkan saya men-dojo.require kat agregatorbase walaupun widget tersebut tidak dipakai. Tak termasuk dengan kelajuannya yang ‘mendebarkan’. Tapi satu yang pasti. Lawa kan? Nampak professional, jika dibandingkan dengan sekarang….

something is not right.

Ok, mungkin tabnye nampak lawa sikit, tapi form-nye tak seragam. Kemudian, saya cuba untuk pakai dojo DataGrid. tapi ada masalahnya pasal itu dan itu dan kemudian, dua hari berlalu. Bottomline…Banyak giler problem! Dan disebabkan tak ramai yang pakai dojo, tak banyak maklumat tentang dojo kat internet. Documentationnye pun tak membantu sangat. So saya fikir, wow susah giler. Highly unconfigurable. Banyak benda yang terpaksa di buat-hack. So akhirnya saya berhenti menggunakan dojo dan revert balik pakai plain HTML dan jQuery serta JWYSIWYG editor.

So itulah ceritanya yang membuatkan saya lambat. Hujung minggu ni banyak masa dibuang dengan memahami dojo, mencari solution di internet dan Battlefield Play4Free. Tapi, bukan takde perubahan langsung.

Pertama, member boleh submit post sahaja bukan rss (seperti di atas).
Kedua, admin boleh buat page sendiri, siap dengan ajax loading. dan menu.

Ketiga, kat main webpage, ada senarai agregator yang berdaftar.

“Description? Do you need it?” kalau agregator ni masuk kat google, kat bawah link nanti keluar “Description? Do you need it?”. Description digunakan (atau akan digunakan )  sebagai meta description.

Sudah tentu, kalau anda try untuk buat ‘page’ yang baru anda akan rasa sangat kecewa dengan form yang sangat mengelirukan serta tidak kena pada tempatnya. Jangan risau, tiga hari yang akan datang didedikasikan untuk bugfix dan design. So, itu sajalah perubahan yang boleh dilihat. Antara perubahan lain adalah sedikit optimization yang sepatutnya membuatkan agregator load cepat sikit.

So, itu sahaja! Dengan itu, bye-bye sesiapapun yang sedang membaca! googlebot pun boleh! Assalamualaikum!