At this point you’ve probably been seeing it around a bit, but if you haven’t  you should probably start placing

"use strict";

at the top of every js file you write.

So why should you use it?

The big win for me has been catching all the time I fail to define a local variable before assigning to it.  For those of you unaware, writing a = ‘b’; when a is undefined used to create a globally scoped variable a.  With strict mode, it throws an exception.

In the past, I’ve spent many an hour debugging errors I’ve created by this mistake.  Now, I just get exceptions and all is happy.

There are several other ways ‘use strict’ can make your coding life easier, but this feature alone has made it a life saver for me.

In Fact, if you aren’t ready to use it globally in your project yet.  you can use it locally at a function level but placing the statement in the first line of the function like so:

function(){
 
    "use strict";
 
    //other code
 
   }

What is the best part about “use strict”?

The best part about using “use strict” is that for all practical purposes, browser support doesn’t matter.  Compared to all of the other shiny new features emerging for javascript, ‘Strict Mode’ gets the biggest bang for its buck when it’s available for the browser you the developer use.  After all, you’re the one creating and testing the bugs it’s going to catch.  This is a case where ‘Runs On My Machine’ is almost all you need; ‘Runs On My Bosses Machine’ might be handy as well tho.

Earlier this week, I discovered that Safari doesn’t support dates in ISO 8601 UTC combined format:  “2010-06-19T03:11Z”.  This was a problem as my production system was delivering me a json file with dates in this format and my project was simply a new UI for the existing server.  A quick round of googling found DateJS a powerful chainable Date extension that enables both unified parsing and mask based date rendering.  I’d only played with it for a few minutes before I was completely hooked on it.  Just look at what it can do.

   1: // What date is next thursday?

   2: Date.today().next().thursday();

   3:  

   4: // Add 3 days to Today

   5: Date.today().add(3).days();

   6:  

   7: // Is today Friday?

   8: Date.today().is().friday();

   9:  

  10: // Number fun

  11: (3).days().ago();

  12:  

  13: // 6 months from now

  14: var n = 6;

  15: n.months().fromNow();

  16:  

  17: // Set to 8:30 AM on the 15th day of the month

  18: Date.today().set({ day: 15, hour: 8, minute: 30 });

  19:  

  20: // Convert text into Date

  21: Date.parse('today');

  22: Date.parse('t + 5 d'); // today + 5 days

  23: Date.parse('next thursday');

  24: Date.parse('February 20th 1973');

  25: Date.parse('Thu, 1 July 2004 22:30:00');

And Yes It supports ISO 8601 UTC combined format!.

A quick replacement of my existing date toolkit in the project and my bugs were fixed.

Wiki’s are amazing and powerful tools, unfortunately their dependence on specialized markup creates a huge barrier to their general adoption in many organizations.  This is a first step at building a wysiwyg editor for wiki markup.  While I will be focussing on the syntax unique to the popular MediaWiki platform, these techniques should be applicable to any wiki system.

The general flow of the converter is as follows:

1. Converter is passed the root node of an html fragment to translate.
2. Converter recurses through each of the child nodes and converts them.
3. Root node tag is replaced with wiki markup.

There’s really only 2 key components involved in this first pass. A converter object and the recursive method.

The Converter Object

The converter object is little more than a collection of name value pairs.  The name corresponds to an html tag.  The value is a Prototype template to use in the direct replacement of the given node. By convention we’ll write all of the tag names for the converter object in lower case.

var Converter = {
strong: new Template("'''#{body}'''"),
b:  new Template("'''#{body}'''"),
em: new Template("''#{body}''"),
i:  new Template("''#{body}''"),
h1: new Template('=#{body}='),
h2: new Template('===#{body}=='),
h3: new Template(‘===#{body}===’),
h4: new Template(‘====#{body}====’),
h5: new Template(‘=====#{body}=====’),
h6: new Template(‘======#{body}======’)  }

The Converter Function

The Converter function always performs 2 checks before attempting to convert a given node.  First it ensures that the node is in fact a node and not a stray function from the Prototype enhanced object.  Next it verifies that a converter exists for the tag.  The toLowerCase() on the tagName is necessary due to the inconsistent behavior browsers demonstrate with this attribute.  While all browsers return the variable in all caps for traditional html, they are not reliable about returning lower case values for xhtml markup.

function convertToWiki( textNode ){
//make sure textNode isn't a function on the object
if( typeof textNode != 'function'){

//provide a way to stop execution on select sub trees
if( !textNode.hasClassName( 'stop')){
$(textNode).childElements().each( convertToWiki );
}

//make sure a converter exists for the given tag
if( liteConverter[ textNode.tagName.toLowerCase() ] ){

//replace the text node with a converted version of itself
textNode.replace( liteConverter[textNode.tagName.toLowerCase()]
.evaluate({body:textNode.innerHTML}));
} } }

Let’s face it, prototyping and mock-ups are a pain in the rear. I’m always looking for ways to streamline the early phases of the design process. Today I found one that is simply brilliant.

Meet GUIMags: Simple, whiteboard magnets of common UI components.

Now you can do mockups on the whiteboard with high fidelity symbols that photograph well. Instead of sketching out the entire design for each iteration, you can simply rearrange elements and erase / rewrite labels as you collaboratively work through a design. When you’re done. You can simply take a picture of the whiteboard and start coding your mockup.

You can find GuiMags here:

http://www.guimags.com/index.php

pi.debugger is a new debug console that acts as a graceful counterpart to firebug.  I’ve  and Firebug is an awesome tool for debugging, hands down.  Unfortunately, it is Firefox specific and has to be installed on the clients machine.

Firebug lite is great, but it is extremely limited and provides little more than a logging console.  pi.debugger sits somewhere in between.  It’s not as full featured as firebug, but it does provide the ever useful evaluation console as well as a DOM browser.

Check it out here:

http://code.google.com/p/pi-js/

And test drive it here:

http://kodfabrik.com/app/pi.debugger/

I’m pleased to announce a preview release of Blueprint Layout Tool 0.4. This version marks the migration of BLT to its own site at http://www.blueprintlayouttool.com and a focus on dramatic improvements to the source view. Unfortunately, the current development version only supports Firefox, IE, Opera & Safari support will be coming soon.

Key Features:

• Improvements to style and polish of the interface
• Dramatic improvements to source view (Powered by CodePress & PHPTidy)
  • Generated Source is well formatted and polished
  • Generated Source is Syntax Highlighted
  • Generated Source is cleaned of most extraneous markup

Known Issues:

• Source View does not work in Safari and Opera
• Formatting is off in IE
• Generated source contains several Mozilla specific tags that still need to be cleaned.

I would also like to take a few moments and draw your attention to Christian Montoya’s Blueprint Constructor application. He takes a different approach to the interface and design of the Layout Tool and has created something quite useful and fun to use. We will be working together to try and achieve similar conventions between our apps.

Check out Constructor at http://lab.christianmontoya.com/construct/

You can read about his design process on his blog at http://www.christianmontoya.com/2007/12/08/construct-01-alpha/

Today I’m pleased to announce the release of SilkSprite 2.0.  Everything about SilkSprite stays the same but the decompressed file size drops by an astounding 46%.

Key Improvements

• 11% decrease in size for sprite.css
• 50% decrease in size for sprites.png

My special thanks go out to Andrew France for achieving such amazing compression of the png file.

You can find the new version here:

http://www.ajaxbestiary.com/Labs/SilkSprite/ 

Much like Google’s GWT, Microsoft’s new Volta project compiles .net assemblies into client side ajax interfaces without requiring a line of javascript.

From the press release:

You architect and build your application as a .NET client application, assigning the portions of the application that run on the server tier and client tier late in the development process. You can target either web browsers or the CLR as clients and Volta handles the complexities of tier-splitting. The compiler creates cross-browser JavaScript for the client tier, web services for the server tier, and all communication, serialization, synchronization, security, and other boilerplate code to tie the tiers together. In effect, Volta offers a best-effort experience in multiple environments without requiring tailoring of the application.

Check it out at labs.live.com/volta/

Outsource your charting to Google!  Yesterday I discussed my initial experiences with the Flot charting library.   Today, I’m going to give you a brief introduction to the excellent new Google Charting API.How it works, simply embed an image tag in your source that references the google chart API location followed by a set of parameters specifying the actual chart.  Google then renders the chart as a PNG that can be displayed in the browser.Features:

Most of us are familiar with Firebug, the powerful & straightforward debugging extension for firefox.  You may not be familiar with it’s little brother, Firebug lite.

Firebug lite is exactly as it sounds, a light-weight firebug console for any browser.  Simply include the firebug script tag in any page and you’re console.log(); operations will work on any browser (IE, Safari, Firefox & More).  What’s more, if Firebug is installed in Firefox, it logs to the full Firebug console.  You can pull up the console by hitting F12 or CTRL + SHIFT + L at any time.

Don’t want to bother with hitting F12 every time you reload?  Just attach a debug=”true” attribute to the html element (<html debug=”true”> ).

But wait, There’s more.

Firebug Lite has an even littler sibling called Firebugx.  Replace the call to firebug.js with a call to firebugx.js and you neutralize any console calls in your code without having to hunt them down or find / replace.  Something that would have saved me a whole heap of trouble with the last BLT deployment.

Download Firebug Lite at:

http://www.getfirebug.com/lite.html