Custom file uploader buttons

About a year ago in my work project,  one requirement that arised was to make custom file upload buttons. Of course our friendly neighborhood Google made it easier these days to research on how to go about it. Then came a page where I was taught of hidding the browse button idea. I termed it "the magic" as I introduced it to my colleagues. 

The technique was to hide the two browse buttons atop the fileupload button image via CSS. Though I used YUI for simplicity on fileupload mechanism, the complexity started to loom when I had to hide the whole uploading process, and that was through iframe. If without iframe, the uploading will need to refresh the AJAX page, which will logout the user from the server session. One option was to open a new child window, but was readily rejected by the product team.

So, for a few months, the iframe-hidden-fileupload or "the magic" worked for the requirement, until we discovered that in IE one of the two browse buttons when used to upload any file, tends to transport the same file repetitively. Actually the one placed higher in terms of screen location, was the one having this issue, inspite of a JS code written to supposedly erase any previous path in the file input field.

As a solution, I recently made the iframe refresh after every fileupload process, to repaint again the fileupload form as a whole.

Mushups?

Ok, before peeping into wikipedia, how do I define mushups. Can you imagine the Yahoo! site, exactly, www.yahoo.com ... It's called a portal, right? Composed of portalets, one managing the advertisements, another managing users different accounts(mail, yahoo biz subscriptions, etc.). Currently a lot of sites are emerging as mushups, specially that the term "webservices " is at the top of the list of tech terms now-a-days. Simple example, I can create a cool mushup, an AJAX application that can send SMS to my contacts currently located in Marikina, and next to send IM to those located in California, utilizing Googlemap API and a local service provider's(sample PLDT's webservice) API for sending SMS. Cool, right? Yes, it's a mushup of different data coming from different sources. The cartographic data from Google, and contacts data from my PLDT subscription, as an example. ;)

tinyMCE 3.2

From my tests last Thursday, apparently all possible known issues in the AJAX app I'm working on are to be resolved by this new version. Now I'm into integrating it ... And hopefully it will fit well .. 

If you ever need it just visit http://tinymce.moxiecode.com/download.php it will surely make your blogging/editing web app experience a facinating one ;)

COO

Why not, if that will be a blessing, a manifestation, a beginning of a fullfilment of my innermost longing for more wealth ... Welcoming even the mere thought (where all things begin) is quite exciting, thrilling, even as the details continuosly flow and somewhat worrisome ... but as the Audio BOOKS say, "... don't bother about the details, what your responsibility is to ask what you want, leave the details to the Universe ...". So I'll just do that, ... 

Then next maybe owning one big global enterprise supplying the world with alternative algae fuel, why not? What does having a scientist Uncle for, time to cultivate the enterprising Pinoy within. 

JQuery?

I'm now intrigued by JQuery's popularity and power in comparison to PrototypeJs. I came across a stat that says JQuery is second among tech surveys, and so it is becoming highly appreaicted as compared to about a year ago. Hmmm .... will look definitely into it's features and capabilities this coming days.

Making Google Chrome fast

First of, make sure to download Google Chrome, my favorite browser!

I came across Shafqat Ahmed's site yesterday about Google Chrome, and I believe it make sense choosing the option how you like Chrome consume your computer's memory.

The three options are as follows:

1. --process-per-site 
   
2. --process-per-tab 
   
3. --single-process
   

You may opt to have three different shortcuts for each of the options like:

"C:\Documents and Settings\Papa\Local Settings\Application Data\Google\Chrome\Application\chrome.exe" --single-process

... as how I set it up for one of my shortcut to Chrome. 

As explained in Marc Chung's page as to why process model is important,

"The short answer is robustness.  A web application running in your browser, is a lot like an application running on your operating system, with one important distinction:  Modern operating systems[1] run applications in their own separate process space, while modern browsers[2] run web applications in the same process space. By running applications in separate processes, the OS can terminate a malicious (or poorly written) application without affecting the rest of the OS.  The browser, on the other hand, can't do this.  Consequently a single rogue application can suck up mountains of memory and eventually crash your entire browser session, along with every other web application you were using at the time."

JavaScriptMVC, Singleton Pattern ....

It has been a while since I last posted, and now I'm yet to be a Java certified guy :) 

AJAX has and still is occupying more than 60% of my life. I recently touchbased again with JavaScriptMVC honcho, and he seem to be one of the very qualified person to talk to regarding JS. Inspired as you may put it, I'll try my best to put this blog into use as a media for my recently learned techniques, work-arounds, etc. for the purpose of giving back to the tech gurus who made my days every-now-and-then, and paying forward as well.

Starting of with JavaScriptMVC coupled with Singleton pattern. Make sure those of you guys who are into AJAX applications, starting or already doing production level should look into JavaScriptMVC and tandem it with singleton pattern. Honestly, I owe this two best-practice principle when it comes to the organized AJAX application we currently have. We were able to separate the three parts, model, view, and controllers, though with a little bit of tweeks to fit our requirements. I hope to give some details later for more clarified discussion.

Regarding singleton as described by Pro JavaScript Design Pattern 2008: "The singleton is one of the most basic, but useful, patterns in JavaScript, and one that you will probably use more than any other. It provides a way to group code into a logical unit that can be accessed through a single variable. By ensuring that there is only one copy of a singleton object, you know that all of your code makes use of the same global resource. Singleton classes have many uses in JavaScript. They can be used for namespacing, which reduces the number of global variables in your pages. They can be used to encapsulate browser differences through a technique known as branching, which allows you to use common utility functions without worrying about browser sniffing. Most importantly, they can be used to organize your code in a consistent manner, which increases the readability and maintainabil- ity of your pages. This pattern is extremely important in JavaScript, maybe more so than in any other lan- guage. Using global variables in your pages presents a huge risk, and a namespace created with a singleton is one of the best ways to remove those global variables. This alone would make the singleton worth knowing, but this pattern can be used for many different purposes. We cover the most useful ones in this chapter."

In our apps, we made use of three major namespaces, $m, $v, and $c and branching them according to the needed subfunctions. Examples, 

$v.setElementAttribute(elementObj, attribute, newValue);

$m.im.sendMessage();

With this, codes are organized also based on functionality.