While developing the Facebook app for Novena, I’d discovered this reference about using CI with Facebook’s latest Graph API. Its quite intuitive… Hence shared out here to our fellow colleagues… 
Source here
Archive for the ‘Uncategorized’ Category
Develop Facebook Apps with Code Igniter and Facebook Graph API
Wednesday, June 16th, 2010Yet Another Cross Browser Issue
Thursday, March 18th, 2010Yes, along the way we develop websites/apps with more customized requirements, we discovered more cross browser issues that might not be significant. Okay, here’s the scenario…
A form has a textarea (not textbox) and it is required to have max characters limitation imposed. Textareas do not support “maxlength” property. Thus, the only way is via Javascript to check the texts input upon “onkeyup” event.
Now, here comes the issue. IE/Opera and Firefox/Chrome treats newlines differently…. lets say you typed 5 characters and then enter newline once. IE/Opera will calculate as (5 chars + \r\n + 5 chars), so total 12 chars… But Firefox/Chrome treats newline as 1 char, so? 11 chars it reads. Quite odd… but this issue could be a major chaos especially if you are to store the value of textarea into DB with specific length…
Thus, the only way to work around is using JavaScript to detect the browser type and play around with the character lengths.
Here’s a snippet on how to perform character limits for textarea:
var charLen = 500; // Maximum word length
function checkLength(obj, event) {
var str = obj.value;
var strLen = 0;if (!str) {
strLen = 0;
}
else {
var lns = str.match(/\r|\n|\r\n/g);if (lns) {
if (navigator.userAgent.indexOf(’MSIE’) != -1 || navigator.userAgent.indexOf(’Opera’) != -1) {
strLen = str.length - (lns.length / 2);
}
else {
strLen = str.length;
}
}
else {
strLen = str.length;
}
}if (strLen = 37 && keyCode <= 40) || (keyCode == 8 ) || (keyCode == 46))
return true;
else
return false;
}}
function checkPasteLength(obj) {
var str = obj.value;
var strLen = 0;if (!str) {
strLen = 0;
}
else {
var lns = str.match(/\r|\n|\r\n/g);if (lns) {
if (navigator.userAgent.indexOf(’MSIE’) != -1 || navigator.userAgent.indexOf(’Opera’) != -1) {
strLen = str.length - (lns.length / 2);
}
else {
strLen = str.length;
}
}
else {
strLen = str.length;
}
}if (strLen<= charLen) {
obj.value = str;
return true;
}
else {
obj.value = str.substring(0, charLen);
return false;
}}
onkeypress=”return checkLength(this,event)”
onchange=”return checkPasteLength(this)”
It’s IE 6 again…
Friday, January 22nd, 2010Recently quite a few giant corporates were being attacked by “cyber guerrillas” , notably Google… Apparently the attacks were vulnerable against IE 6 due to an “unknown security hole”. This seems to be quite a big issue as we knew quite a lot of corporates still rely on IE especially version 6 to perform daily tasks. Microsoft is working over the clock to fix this but I believe it’s still risky to continue using older version as technology moves on and demands follow the trend shift. Even Germany is urging their people not to use IE for security also… But I think making the change is going to take some time and not too sure if more vulnerabilities will emerge as we had seen how capable those “cyber guerrillas” are… IE 6, a really problematic child?
jQuery AJAX + JSON with CI
Saturday, September 26th, 2009Recently saw a simple video tutorial teaching on how to link CI with jQuery AJAX and JSON. Quite useful indeed…
Be-aware of Memory Leaks
Tuesday, August 4th, 2009Recently encountered a relatively interesting, yet annoying issue… Memory Leaks… I can say that it is an invisible bomb to developers, especially dealing with IE and JQuery.
So, what is memory leak? In simple words, it means your system’s physical memory cannot be released or recovered after usage. How does it affects applications? Well, if memory continuously being consumed, your app will become slower… the worse, KOed… Detailed explanation here.
IE already has a history of memory leak issues, especially working with AJAX and JavaScripts. But, how does this happen? Well, IE’s garbage collection mechanism is the main culprit… IE employs separate garbage collector: 1 for DOM and 1 for Javascript. Subsequently, jQuery’s memory management does not adapt with IE’s way of garbage collection. Jquery relies on DOM and it works by bonding DOM objects with events. Thus, after the usage of javascript, the garbage collector cannot efficiently release events from DOM (Since DOM Gargabe Collector is separated from JS’)… unless you refresh the entire page then they will be released.
So, to fix this we have to alter JQuery library to clean DOM events. A solution by Kossovsky Alexander fixes the .remove() method of jQuery to effectively manage memory consumption.
Now another problem comes in… AJAX… If memory can only be released on page unload or refresh, how about AJAX loaded contents? In such case, we have to be wary of utilizing AJAX methods in IEs.
Below are some tips in handling memory leak:
1. When creating DOM objects dynamically, remember to remove them when not needed.
2. When loading dynamic contents via AJAX, remember to unload them when not needed.
3. Clear variables when not necessary needed.
Any more to add in?
The Pain of Vertical Alignments with CSS
Friday, July 24th, 2009When it comes to vertical alignments for web contents, CSS 2.0 doesn’t help as it was not supported by its nature. There are quite a few Vertical Alignment with CSS hacks out there but frankly speaking, none of them are clean cut and most importantly, works awkwardly in IE.
I’d been dealing with such problem quite a while and also coping with strict customer requirements such as IE6 and minimal structural modifications on HTML. Luckily, an example from Katz Web Services came to the rescue. It was the best solution I see so far (with minimal codes). The original example was encapsulated into a JQuery plugin which can be easily implemented. Anyway, what I want to mention is that, the core sets the “margin-top” CSS property by calculating the distances between the element and the element’s parent, then halved.
In my scenario, instead of applying JQuery, I created a new class defining the “margin-top” property, then apply the class across elements to be vertically aligned. I utilized CSS expression to dynamically calculate the selected element’s and its parent’s height, then do the calculations.
.valign-center
{
margin-top:expression(((this.parentNode.clientHeight-this.clientHeight)/2) +”px”);
}
I found that CSS “expression” property is quite handy when dealing with situations such as non fixed widths and heights. Too bad that such property works only on IE (Though I only need to deal this on IE6). So, to deploy such method for cross browser compatibality, the best way would still be applying the JQuery plugin by Katz Web Services. Anyway, it’s still a lovely solution that eases my pain.
Oh yeah, CSS3 is going to support for vertical alignments. Just hope that future web browsers could adopt it well…
IE’s Market Share Tumbles?
Tuesday, May 5th, 2009As a web developer, we are constantly looking at the trend of web browsers usage from time to time because we need to ensure our web applications developed fits the majority users. Recently stumbled upon a statistics report (conducted on April 2009) regarding Internet browser version market share and I would like to share it out to everyone!
Well, IE still holds the crown despite market shares being crunched by Mozilla Firefox as well the emerging Safari and Google Chrome. I was quite amazed as yet IE6 came in 3rd place. Well, I believe many of us agrees that IE6 tends to be quite fussy as its cross-browser compatibility issues always haunt designers and developers. Nevertheless, I think we still have to work hard on it despite it is a cold hard fact that people still uses it. I also think that since various new web browsers are emerging, it could also be a challenging environment for developers in the future in order to cope for cross browser compatibality. Well, I think it’s going to be fun as we continue to learn newer technologies!
Hello world!
Monday, May 4th, 2009Welcome to TAC Blogs. This is your first post. Edit or delete it, then start blogging!