Finally, the KPI System almost done.

Posted by mkhairul - September 6, 2008 at 03:09:49 am - No Comments

 Categories: Development, blog



I’ve almost finished a project that was started 3 months ago. It was actually a side project requested by a Consultant to help the HR Manager to handle the KPIs of all the employees.

So I did the project on and off in the last 3 months, I planned to spent at least 1 hour on the project every workday but didn’t manage to do it (lots of other important stuffs came up). Sometimes more than a week past by without me doing anything on the project. So after 3 months, I crammed all that is left into a week (last week) and try to finish it up.

Here’s my attempt to create a KPI system.
2807968569_d9064310de.jpg

 

I’m using lots of jQuery in this project. Here’s a list of the jQuery plugins that I use.

The interface is quite clean. Simple and minimalistic. Sometimes I think the system looks too simple that one might go through it and say, "Is that it?". The underlying mechanism on how the flow of certain actions executed is quite hard to develop (or maybe I’m just not thinking hard enough).

But anyway, I need to create a documentation on how the system works. Not a linear dull documentation, but the kind of documentation that have a sense of excitement (not too much) and yet explains it as simple as possible that is easy to understand. I’m not very good at technical writing but I will try to do my best by getting feedback from a few people in the office.

I have a few documentation in my mind to be used as an example to guide me:

Any suggestions on a few good docs is highly appreciated.

 

Focus on first input text in jQuery

Posted by mkhairul - September 4, 2008 at 01:09:46 am - No Comments

 Categories: Development, Tips, code

I’m doing a little bit of polishing while finishing up some forms. I got this fade-in effect and wants to get the first input text to be focused when the animation ends.

function show_form(formname)
{
    hide_all();
	$('#' + formname).css('opacity', 0).parent().show();
    $('#' + formname).animate({opacity: 1}, 'normal', function(){

		// focus on the first input in the form
		$('#'+formname+' input:text:first').focus();

		offset = $('#add_new').offset().top;
		$('html, body').animate({
                 scrollTop: offset }, 2000);
	});

    return false;
}

 There’s an additional effect in that function. It’ll scroll down to the form because there’s a list above the form, so, it’ll just scroll right pass it.

Javascript, hide paragraph

Posted by mkhairul - August 6, 2008 at 04:08:58 pm - No Comments

 Categories: Development, Troubleshoot

While I was developing a new app for use here at work. I tried to use javascript to hide an element and all of its contents.

PLAIN TEXT
JAVASCRIPT:
  1. function show_new(id_name)
  2. {
  3.     $('#category').hide();
  4.    
  5.     return false;
  6. }

To hide this html stuffs

PLAIN TEXT
HTML:
  1. <p id="category">
  2.             <label>Category</label><br />
  3.             </p><div class="select">
  4.                 <select class="medium" name="category">
  5.                     <option>-Select-</option>
  6.                 </select>
  7.                 <span class="moreinfo">Or add a <a onclick="return show_new('category');" href="#">test<span class="red">NEW CATEGORY</span></a> </span>
  8.             </div>
  9.             <div class="new">
  10.                 <input type="text" name="category" />
  11.                 <span class="moreinfo">Or add a <a href="#"><span class="red">NEW CATEGORY</span></a> </span>
  12.             </div>
  13.       <p>&nbsp;</p>

When I click on the link "NEW CATEGORY", it executes the javascript function but the only thing that it hides is the label. Everything else stays. I thought there was a duplicate or some shit, but no, there's none. Then I remembered that you cannot put block elements inside an inline element (thanks to weekly check using w3cvalidator on my blog).

On Estimation…

Posted by mkhairul - August 4, 2008 at 11:08:31 am - No Comments

 Categories: Development, Notes, Tips, blog

Here's an entry on the wiki on Estimation. Since we got a few new guys (some are trainee), I thought it might help them. Below is an example of an estimation writeup.

What is Online Trial Exam Form?

A small application to allow users to register (to participate in an online trial exam) and the admin to process the registrants.

Important: If asked to give an estimate on the spot, please, tell them you'll comeback later. Take at least 1-2 hours in breaking down tasks and estimation.

estimate.jpg

The user (we will use the term admin here, the person who request the application) requires the following function (user requirements) :

  • The user (potential students) can enter in their information to participate in a trial exam.
    • Get the fields required. Ask which field is mandatory and why if it is not obvious (one of the obvious field is email, of course email is mandatory or else how do the system inform the user how to participate in the trial exam). 30 minutes.
    • Each registration have a time-frame. i.e. Each day starts from 5am to 5pm. If a user registers on 30th August 2008 @ 5.01pm, it will count as the user registers on 31st August 2008.1 hour
  • The admin can view list of dates (or we can call a time-frame, as each day starts from 5am to 5pm, beyond that will spill into the following day's date) and total of registration for each date.30 minutes
  • The admin can view list of students in a given date. 30 minutes
  • The admin can process a given date.
    • The system will iterate through list of registrant and send an email containing the details required to use the online examination system. 1 hour
    • The admin can reprocess a given date (skips users who have been processed). 30 minutes

Continue reading On Estimation…...

On forgetting passwords..

Posted by mkhairul - July 25, 2008 at 11:07:59 am - No Comments

 Categories: Development, Tips

I have lots of web applications that I installed to try out and evaluate. Sometimes I come back to them to look up on some flows that are getting me stumped. And when that time comes, I usually forget the password and all that I can see in the tables is just hashes. All is lost? No. There is hope!

sc_7-25-2008-112808-am.jpg

So, what to do with the hash? Most probably your local application is using simple default password. If you still can't remember, just head over to GData: An Online MD5 Hash Database and put in your hash and it'll retrieve the original string. Easy.

If the hash is not stored in GData, you could always overwrite the hash by creating your own hash. For me I use PHP, and I use phpinteractive as a shell. Type in the commands for md5 and there it is, the hash. Copy the hash and replace it in the table field. New password!

Be aware that some application uses salt for creating passwords and you have to know how the password is salted, whether it uses the last 3 characters of the password and some stuff like that.

Mouse over Info on fields

Posted by mkhairul - May 22, 2008 at 12:05:10 am - No Comments

 Categories: Development, blog

I'm creating a simple web app similar to del.icio.us but focuses more on a specific task. One of the features that I put in is the mouse over on a field will reveal an info (not tooltip). Not as nice as Wufoo though.

This stuff is used with jQuery 1.2.3 and in the screenshot of the mouse over info I used Blueprint CSS Framework.

Here is a screenshot of the web application.

screencap_22-05-2008-15413.jpg

screencap_22-05-2008-15553.jpg

Continue reading Mouse over Info on fields...

phpMyFAQ, arabic display problem

Posted by mkhairul - May 14, 2008 at 09:05:49 pm - No Comments

 Categories: Development, Tips, blog

I've been using phpMyFAQ for the past few days. The drawback is the unicode support (which is probably a problem for most PHP application) but everything else is ok and well designed and implemented. I have no trouble going through the code, tinkering with the inner workings and stuffs unlike KOHA (documentation very poor) which is a horror to go through. Everytime I see KOHA I would like to cry. Or maybe the version we're currently using is horrible.

phpMyFAQ

Ok, one of the other drawback is the encoding. I know there's lots of languages that they try to support and I have come to learn very well that it is not an easy task. Recently I worked my way around trying to implement English/Arabic content for the system. Seperate CSS for each of the language (English is left to right, Arabic is right to left), to make the layout consistent.

The rest of the site displays perfectly in arabic (from the language file), but when I insert some content, it displays as html entities representation of the characters instead of the characters itself. I modified (real-time) the content a little bit by using firebug by adding a space (and removing it again), automagically it displays the arabic characters. After a refresh it is back to the entities.

Since this is the first time I'm handling unicode characters I'm not very familiar with the functions related to it. I noticed that everything that looks like it requires encoding it is passed to PMF_htmlentities, which runs it through htmlspecialchars. There's some data inside that gets run through the function twice which ultimately results in &amp; instead of & needed to display the html entity. Data that doesn't display correctly I pass it through html_entity_decode which makes it display all the characters correctly.

I still don't get it why it doesn't display the characters correctly, the html entities printed are all correct. It just doesn't display it correctly unless I use html_entity_decode. *shrugs*
I'd have to investigate this further in order to contribute.

References for Handling UTF-8 in PHP.

Handling UTF-8 with PHP

Character Sets / Character Encoding Issues

Common Problem Areas with UTF-8

How to develop multilingual, Unicode applications with PHP

Can't wait for PHP 6, more unicode support! Yeay!

Google App Engine static_dir workaround, windows

Posted by mkhairul - April 11, 2008 at 07:04:52 pm - No Comments

 Categories: Development, Tips, Troubleshoot, blog
appengine_lowres.jpg

There's two workaround for Google App Engine dev_appserver.py workaround regarding the app.yaml configuration file.

Change lines 2369-70 in <installdir>\google\appengine\tools\dev_appserver.py from:

PLAIN TEXT
PYTHON:
  1. regex = os.path.join(re.escape(regex), '(.*)')
  2. path = os.path.join(path, '\\1')

to:

PLAIN TEXT
PYTHON:
  1. regex = re.escape(regex) + '/(.*)'
  2. path = path + '/\\1'

or

PLAIN TEXT
PYTHON:
  1. regex = re.escape(regex) + '(.*)'
  2. path = path + re.escape(os.path.sep) + r'\1'

The latter works for me.

Powered by WordPress with GimpStyle Theme design by Horacio Bella.
Entries and comments feeds. Valid XHTML and CSS.