Archive for the 'JavaScript / AJAX' Category

Javascript Testing Talk in Oakland

Published by andy on March 8, 2010 in Agile, JavaScript / AJAX, Software Design, Speaking and Testing. 0 Comments

Next week at EBig Jonah and I are wrapping up our world tour of talking about Javascript testing. March 17th in Oakland: ”Recent evolutions in Javascript testing frameworks now allow creating test suites, test-driving development, and running tests on a continuous integration server. This allows us to support more complex Javascript, have confidence in the implementation, and push more of the logic from the server into the browser, reducing the load on the server.” The focus of the talk is walking through a suite of tests we build for a real-world example.

For those of you who caught it last week at the SDForum, here are the links people requested:

To sign up for next Wednesday, go to the EBig site.

Test-Driven JavaScript with ScrewUnit and BlueRidge

Published by andy on February 25, 2010 in Agile, HTML, JavaScript / AJAX, Ruby (on Rails), Software Design and Testing. 0 Comments

Jonah and I are taking our presentation about Javascript Testing on the road next Tuesday at 6:30 in Palo Alto, at the SDForum

The teaser for it… Recent evolutions in JavaScript testing frameworks now allow creating test suites, test-driving development, and running tests on a continuous integration server. This allows us to support more complex JavaScript, have confidence in the implementation, and push more of the logic from the server into the browser, reducing the load on the server…

Hope to see you there.

Screw.Unit JS Testing in Maven: javascript-test-maven-plugin

Published by alex on February 24, 2010 in Agile, Deployment, Java, JavaScript / AJAX and Testing. 2 Comments

I’ve written a maven plugin to integrate Screw.Unit javascript tests into a maven build. The project is inspired by the Blue Ridge testing framework for Rails, but it’s a bit more light-weight by design.
Continue reading ‘Screw.Unit JS Testing in Maven: javascript-test-maven-plugin’

Unit testing JavaScript with Blue Ridge

Published by jonah on November 13, 2009 in JavaScript / AJAX and Testing. 0 Comments Tags: , .

My current rails project is using Blue Ridge and the tool set it bundles together (Rhino, env.js, Screw.Unit, and Smoke) to write test driven JavaScript. The ability to write tests of my JavaScript, in JavaScript, as efficiently as I can test other languages has forced me to rethink how I structure my work and I’m writing better code because of it.

There are a couple of different options for JS testing available at this point but Blue Ridge’s plugin is the first I have seen which made writing test driven code as easy as I have come to expect while still providing all the functionality I need. In particular;

  • Running my tests in a browser is fast. Refreshing fixture pages to rerun tests is dramatically more efficient than waiting for selenium tests to cycle.
  • I can debug my tests as they run against their fixtures pages and inspect or manipulate the DOM at any point.
  • I have mock and fake objects available to test behavior and stub out dependencies.
  • My JS tests run in continuous integration, just like all the other tests.

By writing fixtures pages and tests first I am immediately using all of my code in two locations and running it against slightly different DOMs. That has pushed me to encapsulate most of my code as jQuery plugins and think carefully about how much I depend on the page’s structure. I end up with terse selectors instead of using whatever attributes are readily available and a clear configuration point for my page’s behavior as I chain together plugin calls in $(document).ready().

We’d like to see what other developers have done and share what we have learned so far so Carbon Five is hosting an open discussion of JavaScript testing in our office this week.

Topic: Javascript Testing
When: Tuesday Nov 17
6pm: arrive/network
6:30 – 8 presentation and discussion
Where: Carbon Five office: 171 2nd Street, 4th Floor

Please RSVP if you would like to attend.

Agile Practices… visualized?

Published by andy on October 7, 2009 in Agile, CSS and JavaScript / AJAX. 3 Comments

Only pure agile devotees will find it interesting… Revisiting agile methodologies, I wanted to solidify my understanding of the differences between agile, scrum, XP, etc. I went through a mini-research project of reviewing the “canonical” sources of these practices, and then built a quick visualization to clarify my understanding:

http://ndpsoftware.com/agile_methods/agile_methods.html

Hint: Try dragging around the boxes to see how practices are related to each other.

Warning: If it doesn’t draw anything interesting for you, refresh your browser… there’s a large component of “randomness” to the algorithm and it can get stuck easily.

Warning II: Don’t leave it running in your browser, as it’s somewhat sluggish Javascript… this was a demo thrown together in a couple hours.

Evernote for the Palm Pre

Published by mike on June 24, 2009 in JavaScript / AJAX and Palm Pre. 0 Comments
The Pre, an innovative next generation smartphone from Palm Inc., recently launched with much fanfare. Access to the WebOS SDK was limited to a few select partners including Evernote, maker of a web, mobile and desktop applications for capturing and finding our memories, notes and inspirations.
The Pre and the app are getting a good amount press from tech heavyweights like lifehacker and ZDnet.
We worked with Evernote to develop the first release of Evernote for the Palm Pre using this new platform.

Convenient CSS and Javascript in Ruby on Rails

Published by andy on March 8, 2009 in CSS, JavaScript / AJAX and Ruby (on Rails). 2 Comments Tags: , , , , .

I get tired of hunting through a hierarchy of folders and files, from the views to the public folder, to locate a certain CSS or Javascript file. It’d be convenient to have them right with the markup, but embedding these definitions within your HTML markup is a bad idea for several reasons. For our current project, I proposed we put everything in the view directory so they are easy to find:

app/
  views/
    home/
      index.html.rb
      index.css
      index.js

The convention is clear: to add page-specific CSS code, just create a new file with the same name as the view, in the same folder. Easy to add, edit and remove. The alternative (using the public folder), usually leads to a parallel hierarchy and the inconvenience of that.

I also thought, that this being Rails and all, the files should be included automatically. It turned out to be pretty easy. Continue reading ‘Convenient CSS and Javascript in Ruby on Rails’

Absolutize for jQuery

Published by james on September 11, 2008 in JavaScript / AJAX. 3 Comments Tags: .

We’re using jQuery for one of our current projects. Today I found myself in an IE situation that could be solved by using the prototype librarie’s absolutize method. I couldn’t find any equivilent implementation that I liked in jQuery so I went ahead and ported absolutize from prototype to jquery.

Download Here

It can be used in the standard jQuery way, like so:

$('some-selector').absolutize()

Here’s the code:

jQuery.fn.absolutize = function()
{
  return this.each(function()
  {
    var element = jQuery(this);
    if (element.css('position') == 'absolute')
    {
      return element;
    }
 
    var offsets = element.offset();
    var top = offsets.top;
    var left = offsets.left;
    var width = element[0].clientWidth;
    var height = element[0].clientHeight;
 
    element._originalLeft = left - parseFloat(element.css("left") || 0);
    element._originalTop = top - parseFloat(element.css("top") || 0);
    element._originalWidth = element.css("width");
    element._originalHeight = element.css("height");
 
    element.css("position", "absolute");
    element.css("top", top + 'px');
    element.css("left", left + 'px');
    element.css("width", width + 'px');
    element.css("height", height + 'px');
    return element;
 
  });
}

Dojo drag and drop gotcha in IE

Published by mike on June 13, 2007 in JavaScript / AJAX. 3 Comments Tags: .

I have been working on a web app for one of our clients that includes a pretty interactive AJAX / Web 2.0 component within it. This component is essentially a simplified drag-and-drop book publishing tool, which allows users to upload images and then to arrange them on predefined templates in order to create a book.

We chose to use the Dojo Toolkit (version 0.4.2) for both the AJAX (ie: remote calls to the server) and the Widegtry side of the Web 2.0 style. It’s been working fairly well. Dojo has a lot of functionality, but also has a few areas that still need some refinement. The most interesting / infuriating to me so far has to do with Dojo drag-and-drop functionality within IE.

Dojo’s facility for drag-and-drop is essentially composed of three components:

  • Drag-and-Drop Manager
  • Drag Sources
  • Drop Targets

It intuitively makes a lot of sense. You create drag sources and drop targets and out of the box they actually work pretty well. Dojo uses a form of JavaScript inheritance to allow you to create drag copy sources or drag move sources, each of which have different behaviors. You can also reassign specific functions on your drag sources or drop targets in order to customize their behaviors.

I developed and debugged the app in Firefox and Firebug, as we all do. But when it came time to check that everything works in IE, I ran in to one bug in particular that stumped me for two entire days, and frustrated me to no end. At a certain point in using the app, my ability to drop objects on their drop targets was broken. It only happened in IE (I was using IE 6 for Windows), and the error I got was the always helpful “Unexpected error”.

What I found was that the following code, which creates a drop target, also registers the drop target with the Drag and Drop Manager. 

var imageTarget = new dojo.dnd.HtmlDropTarget(imageDiv, ['galleryImages']);
imageDiv.imageTarget = imageTarget;

As a matter of fact, the Drag and Drop Manager, which is a global singleton, keeps a registry of all drag sources and drop targets created. Later on in the flow of my application, some of these drop targets need to be re-rendered, and to do so I actually delete the DOM node and re-create it, using the following code: 

dojo.dom.destroyNode(pageContainerDiv);

The destroyNode() function is supposed to be memory-leak-friendly. But after I have done that, and created a new drop target where that one once was, when I try to drop another drag source on to it, I get the “Unexpected error” exception in JavaScript. And again, this only happens in IE. Firefox works fine. I finally realized that, even though the drop targets are automatically (and outside my knowledge for a long time) being registered with the Drag and Drop Manager, they must be explicitly unregistered before they are destroyed, otherwise this error occurs. I added the following code to do so. 

dojo.dnd.dragManager.unregisterDropTarget(imageDiv.imageTarget);

And now everything works perfectly!