Phine Solutions web work notes

I am preparing to add WYSIWYG editor to one of my project and looking for some library code to use. The selections narrowed down to FCKEditor and TinyMCE. Both of them look great and perform nicely in the demo. Now comes to the question which one to pick. This article has a nice comparison between the two.

Just found out that default editor in Wordpress is also based on TinyMCE, which is quite an endorsement. I particularly like the capability to resize the editor’s size in TinyMCE.

Being a website builders, I constantly need the images for my sites. There are several ways that I have used to get the images. Some of them worked out well and some were quite disappointing.

Stock image sites - where you can buy

I use a couple of sites to buy images: stockxpert.com and istockphoto.com. You can get both jpeg or vector images from these sites. Stockxpert.com offers are a little bit cheaper. In my experience, istockphoto.com’s images have slightly better quality.

This has been my best method to aquire the vector images for icons and logos. If you know a little bit about Adobe Illustrator, you should be able to get some vectors files and use them in different places with some simple tweaks.

Use a local graphic designer

Originally I was looking to get some local talent to help me out but it never worked out. I once worked with a graphic designer who work on some design projects for fortune 500 companies on a logo design. Her draft work was just some pensil scribbles on a piece of paper and her rate will double as soon as she touches a computer. Plus she tried to get me to sign a contract so any future change has been done by her only. A friend told me the best way to go is to hire someone just out of school but I haven’t tried that myself.

Use ODesk to hire some designers

ODesk.com is a place to hire the freelancers. You can create your project and get people to bid on it. Since the people for hire are from all over the world often time you can find some talent with very cheap rate.

My ODesk experience was a mixed bag. I worked with someone who had tons of hours (total hiring hours by ODesk) but the work was at most mediocro. Sometimes it appeared he didn’t even read my requirements in the email. And he was never shy about asking for good ratings at the end of the project. Once he even IMed me to “request” better rating because it affects his ODesk rating history. Mind you I wasn’t even the one who gave him the one star that he probably deserves. He was FOR SURE blocked from my GTalk.

I also worked with some designers who made great work for one project but came up short on the other.

My advise on hiring on ODesk is to find someone who’s new or hasn’t many hours accumulated yet.

Get free images online

Although Google image search can find a lot of images, they are mostly copyrighted and it is illegal to directly use them on your websites. This site: yotophoto.com , can find the free-to-use images for you.

When a use visits a web page and enter some information into a form, he may intentionally or unintentionally leave the page without clicking on the submit button. It is a good usability effort to remind the user of the possible changes that have happened.

We can use a javascript to implement this.

/** checkChange.js **/ 

var alertLeavingPage = false; /* flag to turn on the alert */
var pageInputChanged = false; /* the flag of changes made */

// The onbeforeonload is called before the page is changed. It is not a standard
// method. But it is supported by IE and FF.
window.onbeforeunload = function(theEvent) {
   if (pageInputChanged == true && alertLeavingPage == true) {
      if (typeof theEvent == 'undefined') {
         theEvent = window.event;
      }
      if (theEvent) {
         theEvent.returnValue = "You have made some changes on this page, please click OK to discard the changes or Cancel to stay on the page.";
      }
   } else {
      return;
   }
}

/*
 * The method should be called on the page where the change needs to be tracked.
 * The form ID needs to be provided so the change event can be registered on certain form elements.
 */
function trackChange(formId) {
   var formElem = document.getElementById(formId);
   if (formElem) {
      for (var i=0; i<formElem.elements.length; i++) {
         var inputElem = formElem.elements[i];
         if (inputElem.type) {
            var inputType = inputElem.type.toLowerCase();
            if (inputType == 'text' || inputType == 'radio' ||
                inputType == 'checkbox' || inputType == 'select-one' || inputType == 'textarea') {
               inputElem.onchange = setChangedFlag;
            }
         }
      }
      // turn on the alert flag
      alertLeavingPage = true;
   }
}

/*
 * The method which is tied to a change event.
 */
function setChangedFlag(evt) {
   pageInputChanged = true;
}

Of course you will need to include this script to the web page. Besides that, you also need to call the trackChange() method to register the form elements that we want to track. So a form Id needs to be set in order to register. A sample html page look like following: 

<html>

<form id="the_form_id" action="" onsubmit="alertLeavingPage=false; /* no reminder for submission */"> 

</form> 

<script type="text/javascript">
<!– //
trackChange('the_form_id');

// –></script>

</html> 

Once they are added into the page, the user should see this prompt when they leave the page with un-submitted inputs. 

The method only detects whether there has been any change activity and it won't be able to tell whether there is change being made. For example, if someone checks a checkbox and unchecks it the script will think there has been change made.