After the Deadline

Can we use crowd sourcing to improve AtD?

Posted in Talking to myself by rsmudge on May 27, 2010

I’ve written about learning from AtD use in the past. The main ideas I had back then were to bring more data into AtD’s corpus and analyze ignored phrases to find gaps in AtD’s dictionary. I put some time into these ideas but the initial results didn’t look too promising, so I backed off.

Recently, the operator of Online Rechtschreibprüfung 24/7 contacted me. His website offers German spell and grammar checking services (with a beta version using AtD). Neat stuff. Being the nice guy that he is, he is also giving back. His users have the option of marking a spelling mistake as false. He has collected this data and made it available to improve the German After the Deadline dictionary.

This got me to thinking. What could I do to to help you, help me, improve After the Deadline‘s English checking.

Here are some ideas:

  1. Add a “Not Misspelled?” menu item for spelling errors. This could collect a list of words that are candidates to be added to AtD’s dictionary, similar to what Online Rechtschreibprüfung 24/7 does.
  2. Add a “Not an error?” menu item for grammar and style errors. This could collect the error and the context around it.
  3. Add a “Better suggestion?” menu item for grammar, style, and misused word errors. Here you could input a better suggestion for an error.

These three things are pretty trivial to do. I’d also like to find a way to let users highlight errors that aren’t caught. I don’t have any ideas for magically learning from these suggestions. Right now I’d have to analyze each of them and develop rules to catch these errors.

Maybe an option to highlight some text, click Suggest an Error, and complete a short survey about what type of error the text contains.

What are your thoughts?

A More Secure AtD Experience for the Browser

Posted in News by rsmudge on May 25, 2010

We’ve been hard at work and now AtD for Google Chrome 1.1 and AtD for Firefox 1.3 are now available. These updates feature an important addition for your security and privacy.

AtD started as a plugin for WordPress and everything it checked was going to be posted on a public blog anyways. Now that AtD is in the browser this has changed. To protect your information, both AtD/Chrome and AtD/Firefox now use SSL to communicate with the AtD service. This means your data is now encrypted when it’s sent to our service for proofreading.

If you’d like to know what else is new, you can read the change logs:

How to Update:

To update to the latest After the Deadline for Google Chrome, visit chrome://extensions and click Update Extensions Now. This will automatically download and install the update for you. No restart required.

To update to the latest After the Deadline for Firefox, visit Tools -> Add-ons and click Find Updates. This will download and install the update for you. Firefox will ask you to restart your browser.

Comments Off on A More Secure AtD Experience for the Browser

Towards a More Usable AtD with Content Editable

Posted in Talking to myself by rsmudge on January 12, 2010

Working on the web is quite exciting. Standards are evolving and the ideal ways of doing things keep coming closer to reality. Proofreading text areas with AtD isn’t as natural as I’d like. Clicking a button activates a proofreading mode. This mode places the contents of the text area into a DIV and inserts the After the Deadline markup with the text. Under this model, you click the highlighted errors to select a suggestion from a context menu. Once you’re done proofreading your text area is restored with the updated contents.

This model works OK. GMail uses it. uses it. I believe I’ve seen it in many other places.

Last night I decided to play with the new contentEditable attribute. This new(ish) attribute allows a developer to flag an HTML element as editable. This means the user can interact with the contents of the element in place. They can type text, move the cursor, and anything else they would do with a text area. It’s exciting stuff. Up until now web apps have achieved in-place editing by creating an iframe displaying a blank page with the design mode attribute set to true. This solution is a bit heavy.

I’m looking at using contentEditable with After the Deadline. I’m almost surprised we haven’t seen it in more places. It’s a harmless attribute to add to an application. If it works, users can interact with the div as if it’s the text area until the text area is restored. If it doesn’t work, then the user is stuck interacting with the div using the conceptual edit and proofread modes.

The only challenge is dealing with newlines correctly. When you press enter, the browser creates a line-break or a new paragraph (this is unspecified). When emulating a text area this is undesirable. So I either get to make the proofread mode swallow enter key presses or emulate text editing behavior by detecting which browser is in use and taking browser specific action to insert a newline at the cursor. I shouldn’t have to do this as my div’s set the CSS attribute white-space to pre-wrap. Under this mode a newline in a div will produce a line-break. It’d be nice if the contentEditable mode honored this.

Despite this small hang up, contentEditable is an exciting change and we look forward to bringing it to a proofreading plugin near you.

Add Grammar and Spell Check to Any WYSIWYG Editor

Posted in HOWTO by rsmudge on January 5, 2010

After the Deadline front-end libraries are available for jQuery and TinyMCE. You’ve asked what it would take to make AtD available in another WYSIWYG environment or even in a web-based word processor. In the past I’d answer that you’d need to study the code to either the jQuery or TinyMCE extensions, visit the mountains, meditate and wait for the answer to come.

Today I’m bringing the mountain to you. Much of the code that makes After the Deadline work in TinyMCE and jQuery is similar. Painfully similar. To the point where a bug in one is a bug in the other. I’ve refactored these extensions and created an After the Deadline Core UI module. This module is browser independent with no external dependencies. It provides functionality to parse the AtD XML into an error data structure, retrieve suggestions and other information given an error phrase and a word of context, and it also abstracts away the logic to traverse a DOM and insert the AtD markup for errors.

To test this module, I gave myself one working day to port After the Deadline to CKEditor. CKEditor is a WYSIWYG editor, similar to TinyMCE. I have never used CKEditor before and this was a challenge. Still, I was able to make it quite far and in this post, I’ll show you how to add AtD to an editor using the Core UI Module.

Here is what an After the Deadline editor plugin must do:

  1. The first step is to setup the AtD Core UI module:
    atd_core = new AtDCore();
  2. The next step is to define several functions that the AtD Core UI module expects. The module will use these functions to manipulate the DOM and find elements in the way that your environment expects. The full list of functions is documented in the AtD Core UI README. Here are a few of these functions from CKEditor:
    atd_core.replaceWith = function(old_node, new_node) {
       return new_node.replace(CKEDITOR.dom.element.get(old_node));
    atd_core.create = function(node_html) {
       return CKEDITOR.dom.element.createFromHtml( '<span class="mceItemHidden">' + node_html + '</span>' );
  3. Once these functions are defined you can set AtD-specific preferences like the list of strings to ignore and which types of errors to show.
    atd_core.showTypes('Complex Expression, Diacritical Marks, Double Negatives, Redundant Expression');
    atd_core.setIgnoreStrings('CKEditor, was thrown');
  4. When a user requests proofreading, it is up to you to extract the contents of the editor and post it to the After the Deadline service. Here is how I extract the editor contents in CKEditor:
    var editor_contents = editor.document.getBody().getHtml();
  5. You should receive an XML document from the server with an error message or a data structure containing the AtD data. To check the XML document for an AtD error:
    function ajax_callback(xml_response) {
       if (atd_core.hasErrorMessage(xml_response)) {
  6. If there are no errors then you’ll want to parse the XML into a data structure the Shared UI code can use. Use the processXML function to do this. It will return a JavaScript object that you will be using again.
    var results = atd_core.processXML(xml_response);
  7. Now, let’s say you want to highlight errors in your editor. Great! Extract the contents of the editor (should be an array of elements from the root element) and pass these to markMyWords. Using the prototypes you provided earlier, this function will walk through these nodes and highlight the errors. Be thankful that you didn’t have to write the code to do this.
    var nodes = editor.document.getDocumentElement().getChildren().getItem(1)['$'].childNodes;
    atd_core.markMyWords(nodes, results.errors);
  8. Earlier, I hope you attached a click or context menu listener to your editor. If you did you can use isMarkedElement on the event target when a click occurs in your editor. If this returns true, this is your clue that a user clicked on a marked error and you should display a menu offering them suggestions.To get the suggestions, call findSuggestion using the marked element. This will return a JavaScript object with the following members that may interest you: suggestions, description, moreinfo
    editor.contextMenu.addListener(function(element) {
       if (atd_core.isMarkedNode(element.$)) {
          var meta = atd_core.findSuggestion(element.$);
          var commands = {};
          addItem(editor, meta.description, function() { }, 0, commands, 'AtD_description');
          for (var x = 0; x < meta.suggestions.length; x++)
             addItem(editor, meta.suggestions[x], makeCallback(element.$, meta.suggestions[x]), x + 1, commands, 'AtD_suggestions');
          addItem(editor, 'Ignore', makeIgnoreCallback(element.$, element.$.innerHTML), 1, commands, 'AtD_ignore');
          addItem(editor, 'Ignore All', makeIgnoreAllCallback(element.$, element.$.innerHTML), 0, commands, 'AtD_ignore');
          return commands;
  9. For each suggestion, I use makeCallback to generate a function to attach to the menu item. This generated function calls applySuggestion in the Core UI Module. You should use applySuggestion as it’s smart enough to do what the suggestion asks. For example, the (omit) suggestion removes the word in question:
    var makeCallback = function(element, suggestion) {
       return function() {
          atd_core.applySuggestion(element, suggestion);
  10. You may want to add functionality to let the user ignore the current error or to ignore all occurrences of it. The “Ignore suggestion” menu item removes the marked node keeping its children. No need to call into the AtD Core UI module:
    var makeIgnoreCallback = function(element, word) {
       return function() {

    To ignore all occurrences of an error, you can use the removeWords function in the Core UI Module.

    var makeIgnoreAllCallback = function(element, word) {
       return function() {
          atd_core.removeWords(undefined, word);
  11. The last thing you should do is attach a listener to remove the After the Deadline markup when the contents of the editor are grabbed. You can remove the AtD markup using the removeWords function.

And that’s it. Add in the necessary scaffolding for your editor and you have After the Deadline integration. Here are some other things you can do:

  • Make an Ignore Always menu option save the user’s preference in a cookie or on your server. Resurrect this setting later with the setIgnoreStrings function.
  • Keep track of the user’s preference for what types of errors to show. Use showTypes to enable these for the user.

These are the kinds of things we do in WordPress to make AtD a first-class feature for our users. If you’re looking to port After the Deadline to another environment, the AtD Core UI module will save you a lot of time.

Coming up I’ll be releasing versions of the AtD/jQuery and AtD/TinyMCE Extensions using this shared module. The AtD/CKEditor extension is available now.

WordCamp NYC Ignite: After the Deadline

Posted in Talking to myself by rsmudge on December 17, 2009

I see that the After the Deadline demonstration for WordCamp NYC has been posted. This short five-minute demonstration covers the plugin and its features.

Before you watch this video, can you find the error in each of these text snippets?

There is a part of me that believes that if I think about these issues, if I put myself through the emotional ringer, I somehow develop an immunity for my own family. Does writing a book about bullying protect your children from being bullied? No. I realize that this kind of thinking is completely ridiculous.’’

[Op-Ed] … Roberts marshaled a crusader’s zeal in his efforts to role back the civil rights gains of the 1960s and ’70s — everything from voting rights to women’s rights.

The success of Hong Kong residents in halting the internal security legislation in 2004, however, had an indirect affect on allowing the vigil here to grow to the huge size it was this year.

These examples come from the After Deadline blog, When Spell-Check Can’t Help. You can watch the video to learn how After the Deadline can help and what the errors are. You can also try these out at

You can also view the WCNYC session on how embed After the Deadline into an application.