Ajax Bestiary: A Javascript Field Guide
 
Ajax Bestiary: A Javascript Field Guide
 
 

Entries Tagged as 'Misc Toolkits'

Date.js My New Favorite Javascript Date Library

Posted by Don Albrecht

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.

Expand your debugging aresnal with pi.debugger

Posted by Don Albrecht

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/

DamnIT Remote Javscript Error Reporting

Posted by Don Albrecht

Firebug and its kin are awesome for debugging javascript, but once our scripts are in the wild we really don’t have any feedback of any kind about the state of the browser.  DamnIT from JupiterIT attempts to alleviate this by providing an automated feedback system for javascript applications.

How it works:

  1. A box appears prompting you to describe your most recent actions:
  2. One of the following occurs:
    • you type something and click send
    • you click “close”
    • 10 seconds pass with you doing nothing
  3. DamnIT emails you the following information:
    • Browser
    • Page
    • HTML Content
    • Description (if you entered one)
    • Error message
    • File name, line number, and stack (if the browser supports them)

On the surface this is an incredible system.  In practice there are a few key issues that I think need addressed before the product is an ideal fit for every situation.  Basically, I have severe reservations about the email only nature of the system and its dependence on central management.  Both of these are key issues when dealing with sensitive information or large volumes of error messages and I’m sure will be addressed with future versions.  I am going to integrate the system into the next release of BLT and will be providing feedback from those efforts in the near future.  In the short term, you can check out DamnIT here:

https://damnit.jupiterit.com 

Helma, Server Side Javascript

Posted by Don Albrecht

Helma Logo Helma is an impressive server side environment for deploying javascript based applications.  Currently in version 1.6 it presents a powerful and useful way to construct web applications.

Key features:

  • Applications: Helma can serve multiple independent applications, each existing with its own global scope & code repository
  • Static Files: Helma can serve static files independently of applications.
  • Controller / Event Driven model
  • Powerful templating system
  • Hybrid Client / Server Object Model
  • Objects mapped to RDMS or stored in persistent XML object layer
  • Access to any Java package via addition of JAR to Classpath.

Although I haven’t played with it much yet, I’m excited to explore Helma as a way to build comprehensive web applications while focusing on my language of choice: Javascript.

Check out Helma at:

http://helma.org/ 

!! You’re True (or False)

Posted by Don Albrecht

Ok, so you probably know that Javascript like most other programming languages treats “0″ as false and any other numerical value as true in logic statements. Usually, this is sufficient, unfortunately, sometimes, you need a bit more consistent behavior. For example, ( 2 && 3 && true ) = 2.

Luckily there is a simple fix. Since, ! only operates on boolean data. !(0) is true and !( any other non-null value is false). Therefore, !! returns the boolean value of the original expression.

Another way of coding it, would be “Boolean ( expression );” and directly casting the expression to a Boolean. All things being equal, this would honestly be my preferred way of doing it. After all, legibility in code is one of the utmost considerations for most development, but since bandwidth is also a major consideration in javascript and !! is reasonably intuitive, I personally use it wherever necessary.

Meet Base2, A Javascript Reset from Dean Edwards

Posted by Don Albrecht

Base2 is exactly what the title says,  Unlike the major libraries that strive to enhance javascript with shiny new features, Base2 strives to achieve a clean, browser independent execution environment.  In many ways base2 does for javascript what Blueprint, Tripoli et al. do for CSS.

Key Features:

  • Inconsistent enumeration across platforms
  • instanceof doesn’t always work
  • typeof is inconsistent (RegExps identify as type “function” in Mozilla browsers)
  • Consistent object/platform detection
  • Other various bugs

And the sugar:

Playing with the library, it really is a breath of fresh air in many respects.  It’s lightweight (20kb compessed & 6kb) gziped and loaded with features that make day to day javascript development faster and easier.  Most importantly, it raises the bar for all browsers by providing Javascript 1.6 features to browsers other than Firefox.

You can get it online at

http://code.google.com/p/base2/ 

and there’s an excellent introduction at

http://dean.edwards.name/weblog/2007/12/base2-intro/ 

Robert Nyman’s DomAssistant 2.5 A Lightweight JS Library Powerful Enough To Take On The Big Boys.

Posted by Don Albrecht

Robert Nyman has announced the release of version 2.5 of his Dom Assistant framework. A light in size (6 kb gziped) but fully featured tool for streamlining Javascript development. He states in his announcement that:

“With this release of DOMAssistant, I feel that it can seriously compete with the major JavaScript libraries on the market.”

Although Mochikit, Prototype, Mootools, jQuery, YUI, Spry et. al. seem to indicate that the market for Open Source JS frameworks is a bit saturated. I’ve found that different projects frequently call for a different toolkit. Sometimes, the rich widgets & CDN’s of frameworks like YUI & Dojo make all the difference in delivery & performance. Sometimes the Dreamweaver & Coldfusion integration of Spry makes it a no brainer. Sometimes you need Mootool’s Flash, jQuery’s progressive enhancement or Prototype’s Ruby on Rails integration & extensibility. Dom Assistant is definitely another toolkit that fits into this ecosystem.

Dom Assitant’s Strengths:

Small Size:

At only 21KB compressed for the entire library, it’s small enough for just about any bandwidth constraint.

Legible Code:

Unlike frameworks that make extensive use of $, $$ or chaining. Dom Assistant based code is highly legible and approachable. Even for someone new to JS development. It does use the $ operator for selector support, but doesn’t encourage the development of long chains.

Rich Features:

Dom Assistant is fully featured toolkit for Ajax, Dom, CSS & Event manipulation.

Great Performance:

Dom Assistant is engineered to avoid memory leaks and run fast.

Drawbacks:

Dom Assistant currently lacks any widget or animation support.

You can find Dom Assistant here:

http://www.robertnyman.com/domassistant/

Read More About Dom Assistant here:

Robert Nyman Blog Post

Meet AppJet, A complete, javascript based web app system.

Posted by Don Albrecht

AppJet is now in beta and it’s pretty awesome.  Combining a server side rhino execution environment, an excellent API and a web based IDE, AppJet lets you build and deploy complex applications using only javascript for both client and server tiers.

Check it out today at: appjet.com

Amazing 3d JS Gallery Widget

Posted by Don Albrecht

Gallery Sequence
Here’s a pretty spectacular JS based image gallery with source.  The entire gallery is a 3d fish eye interface.  It’s incredibly easy to use, visually impressive and toolkit agnostic.  It’s performance isn’t as good as some flash based options & I personally find some of the translucency to be distracting rather than conducive to the design. All in all, this is a great gallery widget for those times you need something more impressive than traditional carousels & lighbox / thickbox implementation  Check it out here: http://www.dhteumeuleu.com/ via webappers 

Google Charts API

Posted by Don Albrecht

Yellow line chartOutsource 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:

 

Parameter Line chart Scatter plot Bar chart Venn diagram Pie chart 
Chart title Yes Yes Yes Yes Yes
Chart legend Yes Yes Yes Yes Yes
Colors Yes Yes Yes Yes Yes
Chart and background fill Yes Yes Yes Yes Yes
Multiple axis labels Yes Yes Yes    
Grid lines Yes Yes      
Shape markers Yes Yes      
Horizontal range markers Yes Yes      
Vertical range markers Yes Yes      
Line styles Yes        
Fill area Yes        
Pie chart labels         Yes