Scriptaculous Autocomplete Page Jump Using Arrow Keys

Good find Jason Gill!

I implemented a script.aculo.us Ajax.Autocompleter only to find a serious behavioral problem where the use of the arrow keys would cause the page to jump all over.

Jason found a nice and easy way to tame the wild beast.

The only negative to the fix is that the original controls.js source code needs to be modified, but until the bug is fixed in the main source stream, that is just fine with me. The only gotcha will be if the next update to script.aculo.us does not contain a fix for this problem, trying to remember that the source code needs to be modfied. This gotcha will still be an issue if an external fix would make a modification to the Autocompleter.Base for the patch would need to be removed when the code base is finally fixed. So it boils down to six of one or half a dozen of another; so my choice is to go with what Jason has since it works.

Once again, great find Jason!

References:

http://blog.gilluminate.com/2009/01/20/scriptaculous-autocomplete-page-jump-using-arrow-keys/
http://wiki.github.com/madrobby/scriptaculous/ajax-autocompleter
https://prototype.lighthouseapp.com/projects/8887/tickets/33-problem-with-scrolling-on-div-tags (The actual bug)

Please see http://www.partner-technology.com/the-web-glue

JavaScript: The Web Glue

By Scott Tabar

A Sticky Situation
The use of JavaScript has evolved over the last thirteen years since the first drafts of the standard were introduced in 1996. In the late nineties, and into the early years of the new millennium, I personally witnessed many amazing things that people were trying to do with JavaScript. Unfortunately I was not a casual observer, but instead I was stuck with trying to make them work which resulted in the formation of an opinion that it may be best to avoid JavaScript.

Plain and simple, JavaScript was difficult to work with and usually became the dysfunctional keystone of many projects that tried to place lofty demands upon a technology that few understood well, but were eager to try to exploit. There were many great challenges with cross-browser compatibility, debugging, and manipulations of the Document Object Model (DOM) along with HTML. Some projects did not place a high priority on JavaScript and therefore could not justify the fulltime dedication of one developer to work through all the issues. As a result, JavaScript's role on many projects was minimal.

Fortunately, JavaScript and the web development mindset have been evolving - today's web development landscape is very different from what it used to be. Now, open source projects are bringing together diverse resources and perspectives that are fueling the advancement and adoption of newer technology. We are now witnessing that standards are a driving goal for browser development, unlike almost a decade ago when the urge to add in those “killer” features inevitably led to incompatibility issues. Technological advances, no matter how great, cannot usher in new paradigm shifts if the masses cannot access it or utilize it. In web development, there has to be a commitment to implement the new technology, and without having a viable way to utilize it, the inertia of the development cycle could start to wane. With Web 2.0 there has been a driving demand to make use of newer technology and standards that are easily accessible for both the web developer and the end user. JavaScript is helping to make it happen now.

JavaScript Glues it Together
In many ways, JavaScript is the glue that holds the Web 2.0 together. It enhances many aspects of the web development environment and the client experience. On the server side, the benefits include smaller transactions that yield faster responses, less network traffic, and it effectively off-loads some of the processing to the client's computer. For the client, a few of the benefits are faster response times, dynamic content both in animation and in targeted content based upon the users real-time actions, and web pages that behave more like desktop applications. JavaScript allows the content to be client-driven, only requiring access to the servers for resources that are of interest to the user.

JavaScript glues together many aspects of the client's experience. It can manipulate how the CSS elements interacts with a page based upon user initiated events. JavaScript is able to navigate the DOM and work with the data elements on the web page, or it can use the DOM to directly modify the structure of the page. JavaScript is also capable of adding regular application functionality to web pages through the use of drag and drop, event monitoring and handling, and transparently connecting to remote resources. JavaScript frees the page from having to be a static representation of the content with Asynchronous JavaScript + XML (AJax). AJax can become the major backbone for most of the communications with the server, thus freeing the client from having to wait for the whole web page to reload when updating even the smallest bit of content.

With all of the possibilities of what JavaScript has to offer, one of its top strengths is that it provides an excellent opportunity for enhancement. The core fundamentals of the language can be dynamically enhanced without recompiling the execution kernel. By being an interpreted language with object oriented (OO) structure, it only simplifies what is possible. This flexibility results in a lower cost to implement and simplifies integration into an existing site. The ability to extend its functionality has allowed JavaScript to remain a key player in the Web 2.0 environment; otherwise, dependencies upon other external scripting environments would become a necessity. Numerous libraries have capitalized on the ease of working with JavaScript. The purpose of these libraries varies; they can be narrowly focused or very broad in scope. Some of these libraries are stand alone, while some build upon other libraries.

PrototypeJS is one such library that provides a framework that bridges the gap on cross-browser compatibility, provides convenient functionality to help simplify JavaScript programming, and provides a rich AJax interface. PrototypeJS is able to simplify many mundane and complex tasks, which leads to tighter code and fewer bugs. PrototypeJS's functionality bridges the three layers of architectural design: Behavior (JavaScript), Presentation (CSS), and Content (HTML and Data). PrototypeJS has implemented support for using the W3C's CSS Level 3 specifications, so it is trivial to manipulate a page based upon the use of CSS selectors even if the client's browser of choice does not support the CSS Layer 3 specifications. As a result of CSS Level 3 support, it becomes a trivial matter to stripe every other table row, select the nth element in a list, or even empty elements. PrototypeJS also excels with managing data with extended data types and rich tools sets. Utilizing JavaScript libraries prevents developers from reinventing the wheel and takes advantage of solutions that work in cross-browser environments.

Script.aculo.us builds upon PrototypeJS to focus on manipulating the Presentation layer to provide dynamic animation and transformations of web pages. Some examples includes drag-n-drop, fading content out or in, inserting a new element on the page, or just morphing content from one CSS entry to another. Script.aculo.us has a toolbox of many effects that can be combined in novel ways, very much like how video editing software utilizes transitions. It also has the infrastructure in place to utilize queues to allow multiple transitions to run concurrently, or sequentially. This allows websites to take on a life of their own through content that interacts with the user, instead of just being static.

With the added richness comes the price of development and learning how to take advantage of the strengths of what JavaScript has to offer. Usually the greatest challenges tend to deal with debugging and integration with the CSS and the DOM. There are tools that make it much easier to figure out where the bugs are or why something is not behaving correctly on all platforms. FireFox along with FireBug helps to address debugging and dynamic tweaking of content. Safari also has its own built in developer's menu that is able to accomplish many of the same things as FireBug. With the big three browsers (FireFox, Safari, and IE) focusing on standards compliance, it is becoming easier to develop cross-browser compliant pages. Today it is true that if it works in one browser you have better odds that it will work in the others.

Glue for the Glue
JavaScript is not perfect. There are still issues with compatibility between various browsers, but libraries such as PrototypeJS are helping to address some of those issues. Some tools provide better client-side debugging than others, but trying to incorporate an intelligent debugging tool that can interact with JavaScript, the DOM, and related CSS styles in a useful and an intuitive way may be more of a personal preference to the developer.

With the use of Ajax and other multiple threaded JavaScript tasks, a significant problem exists with thread contention since JavaScript is generally not thread-safe. If a website has multiple threads working to update content asynchronously there can be problems if each thread shares the same element or has the same targets. If many threads are run concurrently, events can be lost and critical functionality associated with the functions that are listening for those events will then go unprocessed. One possible solution is to implement your own MutEx in JavaScript so that you can mitigate concurrency issues through self-handled synchronization. JavaScript could benefit from the addition of thread-safe object handling, even if it could be enabled on demand.

Surprisingly, even though it appears like JavaScript itself has not undergone too many changes from when the first draft was published, it has been proven to be flexible and has become an integral component for most web pages. JavaScript has rendered static web pages obsolete. It has successfully glued the web together for our surfing pleasure.

Photosynth

Last Thursday I happened to stumble upon an interesting site that allows you to take multiple photos and combine them into a 3-D model. That happened to be the day they rolled it out to the general public. I was able to put together a synth that was 100% synthy on the first try which was beginner's luck and perhaps a little spoiling too.

Since then I have put together about 4 major synths, and I have tried to revisit each of them a few different times to try and get them to be 100% synthy.

NOTE: I will be expanding upon this in the next few weeks, please check back. This is not nearly complete yet, sorry...

There have been some challenges with Photosynth that I have come across and I have been able to address some of them too.

I'm just saying...

The phrase "I'm just saying..." is an interesting example of how we can get by with expressing almost anything that happens to be on your mind, without reaping the consequences. Or at least that is how it has been explained to me, usually with the addition of "I'm just saying..." of which I find to be a bit circular.

Every once in a while I have a few things pop in to my mind, of which if I happen to share of others, then tend to think the thoughts are rather deep in nature. Now, I am not tooting my own horn or trying to imply that that I have any delusions of grandeur, but I am just saying...

Please enjoy, where you can. ;-)


Little Minds mind little.
Big minds mine big.

This was an interesting creation that I enjoyed about six months ago. I do like the fact that it is a palindrome (when using words as a unit), but the meaning and enjoyment does go a bit deeper than just that. What I have noticed when I have shared this with others, is that initially they tend to overlook on the second line, the word "mine" instead of a repeat of "mind" as the pattern was setup in the first line. This still keeps it a valid palindrome, but to me, it makes it far more humorous in the nature that the individual to whom is speaking this is, in the first line, scolding folks with little minds, but then marvels about how large their mind is, which to me, confirms that that individual last the smallest mind of all. I personally read the first line's "minds" as a noun referring to the mental faculties and or opinion or views that someone has. The adjective of little both refers to the diminutive state of someones mental faculties, if you will, due to their warped perspective on humanity (see below), and their lack of caring. Of which the "mind" in line one is focused on the verb to be concerned about.

Now what got me thinking about this juxtaposition was that I have been a frequent observer (and dare I say complainer) about how little minded individuals tend to care (mind) that much for other or even that which is around them. They tend to be out for themselves at any cost. This could be reflected through racism, hatred, deception, criminal activities such as preying upon the elderly or under privileged, etc. I'll let you use your own imagination to fill in the examples on who might fit this build.


Another interesting palindrome that I just thought of a few weeks ago is...


Humanity is inhumane.

I think the likes of individuals such as Hitler, Chairman Mao, Stalin, and ect..., or events in modern history such as The Spanish Inquisitions, Salem Witch Hunts, or even events such as the Trail of Tears sums this up succinctly.

Interesting note, I just Googled this phrase and it appears to be fairly popular with 194 hits, but some are duplicates and circular too.

Microsoft's attempt to drive customers to buy macs

I must admit, if there is one feature that makes you scratch your head and wonder what the heck the folks at microsoft were smoking on the day they dreamed up that wonderful set of tools called Accessibility Options within XP.

It may be a great set of tools that for those who need them because of unfortunate handicaps, but the boneheaded folks at microsoft sure did goof on common sense interfaces.

It behaves like a virus for it can hose your computer without your knowledge and there is no way to permanently disable it. I am sure many of users have been burned by it.

I saw that I am not alone in this common snake pit, for the following person summed it up quite nicly:
http://www.classicdosgames.com/blog/?p=3

I think this one feature alone could cause many folks to seriously consider the Mac platform, if not for any reason other than a good grasp of the concept behind a common human interface design.

Or perhaps it could also be one of the greatest marketing ploys ever devised, MS to harward manufacturers: "Bundle our OS with your hardware and we will include a software feature that would be sure to increase sales due to physical abuse by users to their hardware."

Eclipse v3.3.x PermGen Memory Errors

Out-of-the-box Eclipse v3.3.x was giving me on average 12 to 16 crashes per day! I was even seriously considering dropping Eclipse altogether and finding something more stable.

I was using Eclipse v3.3.1 with the WST extension and tigris.org's subclipse v1.2.0 (since the v2.x has serious bugs that prevents it from installing) on a Windows XP Pro platform.

The short of the problems came down to a mistake in the eclipse.ini file that had the

--launcher.XXMaxPermSize

statement come before the

-vmargs

statement. It is a little more involved that that, one issue was that the duel-level launch configuration that Eclipse uses does not always do a great job of detecting Sun VMs, of which the

--launcher.XXMaxPermSize

only works with a Sun VM, which defaults the PermGen space to a size of 64MB.

The suggested fix is to remove

--launcher.XXMaxPermSize

and replace it with

-XX:MaxPermSize=256m

after

-vmargs

it should now pickup the change.

This change and usage of

-XX:MaxPermSize

is said to be universal (to some degree) to other VM's such as the mac.

An example of my config which works, which is "fairly" close to the original eclipse.ini:

-showsplash org.eclipse.platform
-vmargs
-Xms512M
-Xmx1028M
-XX:MaxPermSize=256M

One area of great disappointment with all of this, is that it appears like they were spending a fair amount of time arguing how and when to apply this fix or even announce this potential problem instead of just getting it done. I really do enjoy the Eclipse experience, but because of this problem, I was about to drop it and probably never give it another chance. Good thing I went snooping through their Bugzilla!

References
Eclipse's Bugzilla Entry on this bug

FireFox Add-On worth trying - FireBug

For the last few months I have been wishing that the PC version of Safari had the same full robust HTML and CSS debugging tools as the mac counterpart. Well, I have just found in the last week a tool that should make any Mac Safari user quite envious.

The tool's name is FireBug.

What is great about it? Here is a very short list:

• JavaScript Error Console


• JavaScript profiler


• View source code for HTML, CSS, JavaScript, Images, etc...


• HTML Source hover-highlighting


• Select an DOM element, and it can show the CSS styles that contribute to it, the Box model layout, and DOM hooks


• Dynamically modify CSS elements without modifying any source code or reloading the page to see the results


• Set JavaScript breakpoints for debugging


• See Network performance stats on object/page loads


• Review dynamic AJax calls: parms, headers, and response

This is a really useful tool. If you spend any time in HTML, JavaScript, CSS, this tool is well worth looking in to. I don't think many would be disappointed.

References
FireBug's Website

Prototype v1.6 Ajax.Updater and textarea in FireFox v2.x

There is a slight issue with how Prototype v1.6 (and prior) deals with textarea form elements when used in combination with Ajax.Updater. This appears to only be an issue with FireFox v2.0.0.x and not IE7 or Safari v3 for Windows. I have not tested to confirm if this is an issue on non-windows versions of FireFox or other browsers or platforms.

The problem enters when Updater is successful in putting the results content in to the textarea innerHTML, but the contents are not displayed. Most of the solutions that I have been able to find on the web suggests to use a onSuccess: callback then within there, pull the responseText from the response object and shove it in to the value of the textarea.

Example of a BAD use of Ajax.Updater with the textarea:

  <form id="formid">
    <textarea id="textareaid" />
  </form>
  Ajax Status: <div id="ajaxStatus"></div>
...
  new Ajax.Updater( 'textareaid', 'anSOAapp.jsp', {
      parameters: { id: anId, afield : avar },
      onFailure: function(){
          $('ajaxStatus').update('An error occurred.'); 
      }, 
      onSuccess: function(response) {
           $('textareaid').value = response.responseText;
           $('ajaxStatus').update( response.status ); 
   }});

How wasteful! Not only in redundant processing (the contents of the textarea is being updated twice!), but also in memory that JavaScript is now having to allocate and use. What is the point of using the Ajax.Updater function if you are just going to overwrite its output?! For small tidbits of data, it may not be noticeable, but for larger data sets, then you can not only risk the out of memory exceptions, but also a non-functional page.

The whole point of utilizing the Ajax.Updater function is to help streamline the whole data flow and to offset the needs to keeping the data in a variable or as a String in JavaScript, which is what occurs when using the responseText field.

There is an easy solution that helps to avoid these problems of redundancy and excessive memory utilization. It is actually quite simple.

Example of the correct use of Ajax.Updater with the textarea:

  <form id="formid">
    <textarea id="textareaid" />
  </form>
  Ajax Status: <div id="ajaxStatus"></div>
...
  new Ajax.Updater( 'textareaid', 'anSOAapp.jsp', {
      parameters: { id: anId, afield : avar },
      onFailure: function(){
          $('ajaxStatus').update('An error occurred.'); 
      }, 
      onSuccess: function(response) {
           if ( Prototype.Browser.Gecko ) {
              $('formid').reset();
           }
           $('ajaxStatus').update( response.status ); 
   }});

Notice that the key element was

$('formid').reset();

inside a conditional to ensure it only is performed for FireFox browsers.

Give it a try.

Resources
Prototype API Docs
Prototype's Form.reset() function API Docs