Archive for the ‘Web’ Category

* JavaScript Event Merging

Posted on July 14th, 2010 by Dave Johnson. Filed under JavaScript.


In a recent project I finally decided to write something to help with JavaScript event merging. There are often cases in JavaScript where you want some code to run but only after certain events have fired or other code run - in my case I wanted to execute a JavaScript function only after two different bits of code had executed. The most common use case for event merging I have come across has got to be on page load / DOM ready where you may need several conditions to be true before executing some JavaScript code.

Event merging generally helps you to better separate your concerns and not have unwieldy if conditions strewn throughout your code checking if certain condi.

If you have a basic JavaScript object called the “Subject” that has subscribe, subscribeOnce (events that auto-unsubscribe themselves after being fired the first time), and notify methods on them. You can use the following merge function to have all subscribed code executed only after each of the events passed to the merge function are fired. In this case I have explicitly used the subscribeOnce method on the event.

1
2
3
4
5
6
7
8
9
10
11
function merge(handler, events) {
       var i = events.length;
       var f = function() {
           if (!(--i)) handler();
       }
       for (var j=0; j<i; j++) {
           var e = events[j];
           (!e.fired?e.subscribeOnce(f):i--);
       }
       if (!i) handler();
}

When the merge function is called it iterates over all the events in the event array argument and checks if that event has already been fired or not by checking the “fired” property on the event - note that this makes it so that it doesn’t matter if merge is called before or after the events have fired. If the event has not been fired yet then a handler is attached using subscribeOnce where the handler checks a counter indicating how many of the events have been fired, once the counter hits 0 then the final handler for the merged events is called.

I have put up an entire event merging code on Github here.

Tags: .



* Crockford Facts

Posted on March 18th, 2010 by Dave Johnson. Filed under JavaScript.


Everything that you want to know (or not) about Douglas Crockford.

Or following things live on Twitter.

I contributed a few of my own like:

“Crockford doesn’t throw errors, he roundhouse kicks them.”

Andrew Lunny also directed me to this site with some Resig facts … hilarity!

Tags: .



* QUnit Server

Posted on March 1st, 2010 by Dave Johnson. Filed under Components, JavaScript, Testing.


QUnit is a great little JavaScript test framework written by none other than John Resig of jQuery fame.

I love how easy it is to write tests, especially asynchronous ones, with QUnit and so was quick to start using it for my JavaScript tests.

The one thing that I found it lacked was support for continuous integration products like Hudson, CruiseControl or Continuum. So I figured that I would change that.

For a long time I have been using JsUnit along with JsUnit Server to merge in client side JavaScript test results with a server side test integration workflow. Essentially, JsUnit Server is a Jetty server and JsUnit posts back a form with test results to that server, which logs the results to standard JUnit formatted test results files. Those files can then be read by most continuous integration products and included in their reporting.

What I decided to do was hack QUnit so that it too could submit test results back to the JsUnit Server in the same format that JsUnit submits results and could therefore continue using the same JsUnit Server workflow and simply change the client JavaScript test framework to QUnit. It worked like a charm!

I wrote a couple of simple function that in the background dynamically create an HTML form in the QUnit test page and add the results to the form as each test is run. When the tests are complete the page submits back to the JsUnit Server and the test results are logged as they were when I was using JsUnit.

It is some pretty simple changes but does make using QUnit that much better, especially if you were hesitant to switch just because the continuous integration support was not there for QUnit.

Check it out on GitHub.

Tags: , , , .



* HTML 5 and sessionStorage

Posted on February 19th, 2010 by Dave Johnson. Filed under JavaScript, quirks.


We came across a strange bug today that was being caused by our recent addition of sessionStorage to our application.

The Mozilla Developer Center says this about sessionStorage:

This is a global object (sessionStorage) that maintains a storage area that’s available for the duration of the page session. A page session lasts for as long as the browser is open and survives over page reloads and restores. Opening a page in a new tab or window will cause a new session to be initiated.

Emphasis mine.

What we found was that of the three different browsers that currently “support” sessionStorage, there are three different implementations. Go figure.

I looked at a few different ways of opening new windows or tabs and those included anchor tags with target values of “” and “_blank”, window.open() JavaScript calls with different targets, and context menu open in new window or tab.

Internet Explorer 8 is furthest from the spec, as one might expect. No matter how you opened a new window from the page, the sessionStorage is preserved in the new window.

Firefox is only slightly better in that it does not preserve the sessionStorage in new windows when the new window is created by choosing open in new window / tab from the context menu on an anchor.

Safari is more or less like Firefox except that it does not preserve the sessionStorage when the target on an anchor is “_blank”.

In short, if you are expecting that sessionStorage is tied to a single browser window then think again.

Tags: , .



* JavaScript Pub Sub

Posted on April 28th, 2009 by Dave Johnson. Filed under JavaScript, Uncategorized.


I was talking to someone the other day about the observer pattern in JavaScript and I was reminded about this JavaScript method that is part of Complete UI.

nitobi.Event.prototype.subscribeOnce = function(method, context) {
  var guid = null;
  var _this = this;
  var func1 = function() {
    method.apply(context || null, arguments);
    _this.unSubscribe(guid);
  }
  guid = this.subscribe(func1);
  return guid;
}

subscribeOnce is a special sort of event subscription that rather than being being executed every time the event fires, the handler function is only executed once and then automatically unsubscribed from the event. It is obviously most useful for initialization stuff in JavaScript. There is some more info on JavaScript pub sub over on Ajaxian too.

Tags: , , , .



* Eclipse Plugin Q&A

Posted on March 25th, 2009 by Dave Johnson. Filed under Web, phonegap, programming.


If you are one of the unfortunate few that has decided to, for profit or insanity, write an Eclipse plugin here are a few of the questions that I had during my ordeal and the answer or closest thing to an answer that I can come up with.

Q: How should I get started with Eclipse plug-ins?

A: Read a book. I did not do this and really regret it now I think. There are few different ones available that I assume explain all the intricacies. The Google can only help so much. Having said that, the approach that I took was to look at the code of another Eclipse plug-in and borrow from that :) Some of the better links I put up on Delicious.

Q: How do I make my plugin show up in the new project list?

A: This one seems like it should be easy to find out how to do but it actually wasn’t that easy. So it is pretty easy to get started using one of the samples in Eclipse like the file editor sample that creates a “New file” wizard. While that wizard does not launch from the “New project” menu it can be augmented to be a project creation wizard pretty easily. The important bit is setting project=”true” on your wizard in the plugin.xml file for the Eclipse newWizards extension.

<extension point="org.eclipse.ui.newWizards">
  <wizard
    project="true" ... />

Q: Now that I have a new project wizard how do I know that a project was created using that wizard or is that type of project so that you can create debug or run configurations accordingly?

A: This is where project “Natures” come in. A project can have different natures associated with it to support different functionality in Eclipse. You need to create a class that implements the IProjectNature interface.

public class PhoneGapProjectNature implements IProjectNature

You can reference that project Nature from the plugin.xml through the org.eclipse.core.resources.natures extension point.

<extension id="com.phonegap.phonegapnature" name="PhoneGap Nature"
  point="org.eclipse.core.resources.natures">
  <runtime>
    <run class="com.phonegap.project.PhoneGapProjectNature"/>
  </runtime>
  <builder id="com.phonegap.phonegapbuilder"></builder>
</extension>

This enables one to connect certain builders to a nature - in the case of PhoneGap we don’t actually use a builder since it is just HTML and JavaScript but we do set and read the nature from the plug-in code.

To set the nature of the project when it is created in the new project wizard we can set the project nature(s) on the project description like this:

IWorkspace workspace = ResourcesPlugin.getWorkspace();
final IProjectDescription description =
  workspace.newProjectDescription(newProjectHandle.getName());
description.setNatureIds(new String[] { PhoneGapPlugin.PHONEGAP_NATURE_ID });

In the case of PhoneGap, we use this project nature information in the properties of the Run and Debug configurations such that a developer can create configurations and choose the project that the configuration should launch when they click Run or Debug. In the configuration we iterate over the projects collection of the workspace and check if each project has the PhoneGap nature, if it does we add it to a combo box.

boolean bb = projects[i].hasNature(PhoneGapPlugin.PHONEGAP_NATURE_ID);
if (projects[i].hasNature(PhoneGapPlugin.PHONEGAP_NATURE_ID)) {
  projectCombo.add(projects[i].getName());
}

Q: How do I store preferences and configuration default values?

A: In your AddLaunch method of the LaunchAdder, which you call from the createProject method of your NewProjecWizard class like this:

SimulatorLaunchAdder.addSimulatorLaunch(projectHandle.getName(),
  projectHandle.getName(), "");

you will need have some code like this:

ILaunchConfigurationWorkingCopy wc = DebugPlugin.getDefault()
.getLaunchManager().getLaunchConfigurationType(
  "com.phonegap.debug.SimulatorLaunchConfigurationType")
.newInstance(null, DebugPlugin.getDefault()
.getLaunchManager().generateUniqueLaunchConfigurationNameFrom(projectName));
wc.setAttribute("KEY", "value");
final ILaunchConfiguration config = wc.doSave();

Q: How do I access resources like files to populate a new project with?

A: Put any files that you will want to copy to a project into a namespace like com.phonegap.resources then you can access it like this:

String rootContent = StreamUtils.readContent(
this.getClass().getResourceAsStream("/com/phonegap/resources/root.html"), null
);

Where StreamUtils is just a wrapper for doing the stream reading.

Q: I am getting a “class not found” error when I debug what should I do?

A: Get Eclipse 3.4 if you don’t already have it.

Q: I want to support the debug / run menus but to do that I need org.eclipse.debug.ui/core references - where do I find those?

A: Add them to the dependcies list in the plugin.xml visual editor. First add core then the ui one will be available.

That’s about all I can muster for the moment but will try to put up some more tips later!

Tags: , , , , , .



* Rich Mobile Applications

Posted on December 16th, 2008 by Dave Johnson. Filed under AJAX, phonegap.


Like the MiniDisc or the Atari Jaguar CD, web applications, rich internet applications to be specific, are a thing of the past. Yes a bold statement to be sure. Well maybe not a thing of the past but certainly in their current form.

I think that @PanMan summed it up best when he tweeted:

“Phonegap is definitely one of the most exiting developments for mobile developers these days…“

Yes the future is PhoneGap and the future is Rich Mobile Applications - RMAs for short. They can run on the phone native or as a web page but we of course think that being able to build applications using JavaScript and HTML rather than Objective-C and still having access to all the fun phone APIs like geolocation, mapping, calling / SMSing people, bluetooth etc is a very nice thing indeed.

Tags: , , .



* Asymmetric Follow In Pictures

Posted on December 12th, 2008 by Dave Johnson. Filed under Web2.0.


With James as my inspiration, I have been thinking more about asymmetric follow and how it applies to the web. I decided to make up some simple pictures to describe my thoughts on it.

Movie and music stars are really the definition of asymmetric follow. You buy their records, watch their movies, send in fan mail but you will probably never be acknowledged by the star nor will what you have communicated probably even be read by them or impact them. All follow no follow back. Purely asymmetrical. The stars don’t follow anyone else and everyone follows them. The number of people involved in these systems is very large - i.e. one star might have millions of fans.

Radio also has a huge audience and most people just sit there and listen so the right side is pretty high again. On the other hand some shows do allow people to call in or often talk to notable people in the field so there is, though relatively small, some follow back going on.

Email of course has become an important communication medium. With email you can receive it from anyone from close family or peers to random people and spammers. This picture I am least confident about but certainly some people get lots of unsolicited email while also having many people that they would consider to be “following”.

Finally, we have Twitter or other Web 2.0 social networks (like dopplr that James posted data from) where “friending” is not reciprocal by design. With things like Twitter we are approaching something symmetrical despite the fact that reciprocity is not enforced and I think there are few reasons for this that JP also touched on. The main idea being that Twitter reduces the barrier for people to engage in conversations.

Twitter actually increases the symmetry of traditional asymmetrical follow primarily by the fact that it is a smaller community than pop-culture at large and therefore the signal to noise ratio is considerably higher in general. This is helped further by the fact that interactions have to, by design, be succinct. At 140 characters there is only so much you can say and it is easier for other people to comprehend. Twitter is also very temporal in that if you are not around to get them you are generally fine to ignore them unless they are replies or direct messages. Finally, Twitter is public which helps to keep people and their conversations honest.

Asymmetrical follow is clearly a prominent pattern across all media, and maybe something that is being reduced through tools like Twitter, are there other patterns that while prominant in more traditional forms of media are somehow reduced in a Web 2.0 world?

Tags: , , .



* 13 Tips For A More Accessible Web

Posted on November 17th, 2008 by Dave Johnson. Filed under AJAX, Accessibility, JavaScript.


There are few web projects that I have worked on of late where accessibility has been a high priority. Of course having worked on the Complete UI Ajax framework that is generally used to build internal web applications we were always trying to make our components as accessible as possible, particularly through the use of the keyboard.

In general through there are a few simple things that you can do to make you web applications far more accessible to your users that may use screen readers like JAWS or have to divert from normal computer settings like just using larger than normal fonts or even using high contrast mode.

  1. Remember if something can get focus through the tab key, users with screen readers will find it and the screen reader will describe it to them.
  2. The first is something that I am sure you have heard a thousand times and may or may not have listened. Don’t use tables for layout. I think that I saw this great site about it through Dion. Amongst the many arguments against using tables for your layout is that they have semantic meaning for
    screen readers - that meaning is course that there is some tabular data to follow. So you can imagine it can be confusing when tables are found without any tabular data!

  3. When a screen reader finds a table, users generally assume that is has a header row with column headings - so use the <th> tag to specify the column headers and maybe even put that entire row in a <thead> element.
  4. Use the unordered (<ul>) and ordered lists (<ol>) when appropriate. Unordered lists should even be used for things like menus by setting the display to inline and the list-style-image to something to get rid of the normal bullet.
  5. Always set the alt attribute on <img> tags. When the image is inside of an anchor this attribute should describe the image as the anchor will bring focus to that HTML. If it is just an ornamental image then leave the value of the alt attribute empty rather than ignoring it (this was demanded by a client due to bugs in certain browsers / screen readers).
  6. Use CSS for all images. The previous issue with image tags that are purely ornamental should not happen since you should be using CSS to set background images on your HTML elements. Not to mention the fact that those images should be sprited using something like SmartSprite and so you have to use CSS.
  7. Form elements should always have an associated <label> element with the for attribute pointing to the element that the label is for.
  8. Try to put dynamic HTML (drop down menus etc) into the HTML tree where they appear
    visually such that tab index for focusable elements is maintained. If you generate a drop down but append it to the bottom of the HTML page and position so that it appears visually at the top of the page, you would have to set the tabIndex attribute on anchors in the menu to get the correct tabbing effect.

  9. Don’t use tabIndex.
  10. Any element that has an onclick event on it should be an <a> tag (or at least enclosed in one). This will ensure that it is focusable and the user can then use the enter key to activate the click event. This is also a good reason not to use onmousedown or onmouseup events since those will not be captured by the keyboard. Similarly, if you use onmouseover and onmouseout to do anything that is not visual then you may consider having onfocus and onblur to do the same thing.
  11. If you have headings then use the heading tags! Semantics, semantics, semantics.
  12. Use relative sizings like em for your fonts and other dimensions and check out how the site looks as you change the font size.
  13. Put in a hidden anchor (position absolute, x,y -5000px) near the top of the HTML that contains a message like “Skip navigation” with an href pointing to an another anchor that will skip down to the actual contents of the page such that screen reader users can skip any redundant links and header information.

If you follow that simple list you should make your web sites and applications much more accessible.

For Firefox users I recommend the Firefox Accessibility Extension, which makes testing your pages pretty easy.

Anything to add? Please leave a comment below!

Tags: , , , .



* Surfin’ Safari

Posted on October 9th, 2008 by Dave Johnson. Filed under AJAX, CSS, JavaScript, XML, completeui, quirks, safari.


For the past little while I have been busy fixing up Complete UI to work in Safari. The big problem for us in getting Complete UI working in the WebKit powered browser was that there was no client side XSLT JavaScript API until Safari 3.

So there were a few things I had to update to get things all working properly - and this more or less applies to Chrome now as well but I need to check on a few things.

XMLDocument::selectNodes

The first problem I came across was using the XMLDocument::selectNodes method. To get selectNodes working I had to implement my own NamespaceResolver which is usually handled for you by the browser.

I had to change the call to the XMLDocument:evaluate method a bit to look like this:

var oResult = this.evaluate(
  sExpr,
  (oContextNode?oContextNode:this),
  new MyNSResolver(),
  XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,
  null);

Where the MyNSResolver class essentially implements the lookupNamespaceURI method through a switch statement returning the appropriate URI for the specified namespace prefix. Pretty easy but kinda annoying to figure out!


function MyNSResolver() {};
MyNSResolver.prototype.lookupNamespaceURI = function(prefix) {
  switch (prefix) {
    case "xsl":
      return "http://www.w3.org/1999/XSL/Transform";
      break;
    case "ntb":
      return "http://www.nitobi.com";
      break;
    default:
      return null;
  }
}

XSLT Transformations

Then there was the actual act of performing an XSLT transformation. Doing the transformations was fine but getting the output node or string from the transformations - depending on if the <xsl:output /> was text, html or xml - was rather different than both Firefox and Internet Explorer. Go figure.

For transforming to an XMLDocument here is what I found to be the output of an XML transformation for the various output methods.

Text:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title></title>
  </head>
  <body>
    <pre>innerText</pre>
  </body>
</html>

XML:

<output>innerText</output>

HTML:

<html>
  <body>
    <output>innerText</output>
  </body>
</html>

XSLT Parameters

There is also one difference in how the Safari XSLT processor deals with parameters. Rather than casting true / false to 1 / 0 the Safari XSLT processor does not recognize true or false values and requires the inputs to be 1 / 0. I have started setting all my XSLT params like this:


oXsltProc.addParameter("paramName", val+0, "");

Events and Focus

There were some other small issues that I came across regarding implementing rich keyboard navigation and events in general.

For example, in our Grid component I had to change the HTML element that we used to “focus” the Grid so that we could capture key presses from a <DIV> to an <INPUT>. Apparently you can’t call Element:focus on a <DIV> element from JavaScript but you can on an <INPUT> (even with a tabIndex set but I try to avoid those for accessibility reasons anyhow).

However, that was not my only problem with keyboard navigation. The other problem was that the focusable element (the newly created <INPUT> in this case) was still not getting focus due to a small code snippet like this:


oMyInput.focus();
cancelEvent(evt);

That second line where I cancel the event (wrapped nicely in a cross browser library call) somehow prevents the <INPUT> from getting the focus. Never figured out a workaround aside from a browser check before calling cancelEvent.

CSS

Finally, in some of our components we also generate CSS using XSTL and dynamically insert it into the page. For example, the developer defined column widths in a Grid produce dynamically generated CSS. However, WebKit does not seem to support the bulk creation of stylesheets neither using the document.createStylesheet method of Internet Explorer nor the hacky way of doing in Firefox by creating a <STYLE&gt element and setting the innerText. Instead Safari requires that you use the uber slow DOM API for adding rules to stylesheets :(

Miscellany

You will often see the “xml namespace prefix mapped to wrong URI” error when working with XSLT in Safari.

Be careful that you are using double quotes in your XSLT for attributes etc and only use single quotes in attribute values.

Of course you also have to be very careful about the nodes that you are transforming / selecting as you are also likely to get the “WRONG_DOCUMENT_ERR” fairly frequently.

Oh yah and depending on the application expect a lot of random “Stack overflow” errors!

Tags: , , , , , , , .