ADOBE, Adobe, adobe...

Two quick notes on Adobe. First, They've revamped their website...and damn does it look sweet. Check it out. Second, I noticed a side note in the Flex 3 tracking log a couple weeks ago that mentioned something about "Blaze DS". The name sounded pretty intriguing to me at the time but I didn't have any details to go on. Today they finally issued a press release, it appears Blaze DS is an open source Data Service manager, a Lifecycle Data Services-Light (that's a mouthful). The platform will provide Remote Object access to new server-side languages (PHP, Ruby, etc.), basic data-push, and syncing functionality to Flex 3 (still in beta). No word on its level of integration with Flex 2, the most current full-release of Flex. This should open the door to a larger "open source" crowd that might have been dissuaded from using Flex without an integrated server-side component. Looks like another solid move by Adobe to bolster their development ranks, we'll see how it plays out as more information becomes available.

Cheers,
Todd

PS - This information comes from a number of scatter sources so forgive any misinformation I might be spreading.

Pier Developer Blog Listing...

Developer Post Round-Up:

• Flex 3 SDK Development
• Dealing with Build Times in AIR
• Creating and using an mx_internal style Namespace
• Debugging Basics in Flex 3 (beta)
• Error Logging with AJAX
• HTML Reporting in AIR

Not all these posts are mine but most of them are.

Cheers,

Todd

The Gmail Upgrade Has Arrived...

...at least for me. I'm not sure if everyone can see it yet. Below is a sneak peek ofa the new Contact Manager. If you're working in a small shop it looks like it can be a decent little CRM.
As for the main interface, not a whole lot has changed except for the inclusion of a dropdown menu.
The interface changes are nice but the main upgrade is speed. You'd almost think this is running on the desktop, near seamless experience. They actually prompted me to shut off Firebug just so it wouldn't ruin the experience. The Net Monitor intercepts all the incoming requests slowing things down a bit.

I'm sure I'm missing a couple items but that's all I have to report for now. Hope you get to check it out soon!

Cheers,
Todd

Basecamp JS Injection

I've used Basecamp on and off for a couple years now. Generally, I thought it was a great application: secure, well-designed, simple & efficient. That is until I ran into this little beauty today.


In case you can't figure out what you're looking at, thats a lightbox with an Iframe pointing to pierinc.tickspot.com. No, that's not a new feature for Basecamp that you missed out on. One of my colleagues, today, noted that he could enter HTML into the Todo list. Immediately, I was like uh-oh...I wonder if I can....out come the <script> tags. You can insert html script tags right into the Todo list and it doesn't get sanitized. A little scary if you use Basecamp for larger projects, perhaps with a developer you don't completely trust.

After a little inspection of the DOM and playing around, I "mashed up" tickspot, our time tracking application, with basecamp so I can kill two birds w/ one stone. Beyond the security risk, this could actually be kinda fun. Tossing anything I want onto my Basecamp page for easy access. I still think Basecamp is a great application but this a serious no no. I had higher expectation from the 37Signals folks than this (perhaps its a feature...lol).

Cheers,
Todd

PS-I don't have a picture of it but the first thing I did was animate all the <div> tags. I had them flying all around the page...great way to freak out your boss ;)

***Update***
37Signals Support responded with this message:

Basecamp intentionally allows HTML (and JavaScript) because many ofour
users find great value in being able to use that. We're fullyaware that this
allows for XSS attacks, but Basecamp is based on thenotion of trusted parties.
You should only allow people into thesystem that you believe won't hack your
system (just as you shouldonly invite people into your office that you don't
believe will stealfrom you). If your friend becomes a foe, you can revoke their
accountand change your login credentials. Just like you would simply not letthem
into your office.

If this was a public system, it would definitely be different. You can't
have a public forum today without carefully dealing with XSS issues.

In the 3+ years we've operated Basecamp, we've never had a single suchcase
occur, though. So it doesn't seem like it's a big problem. And I know many of
our customers would scream murder if we removed the option to use HTML in their
messages, as they've become accustomed toover the past 3+ years.

I'm not sure I total agree with the sentiment of leaving security up to your users but its certainly a refreshing change from the pervasive concept of the "low-trust" internet.

==>If you're into javascript...hack away!

Shakakai.com

If you're wondering why I haven't been posting here as often as I used to, I've been tied up on my new website Shakakai.com. Its a site that was created with two main goals:

1. To aggregate all the content I'm generating over the web, be it blog posts, tweets, del.icio.us or digg tags, and a host of social website content.
   
2. As an experiment into using Google as Content Delivery Network ( commonly referred to as a CDN)

The former point isn't particularly groundbreaking, everyone is cranking out mashups nowadays. The latter is a radical restructuring of how a website is built. Rather than construct and consume services for my own view layer, I'm capturing all the dynamic content for the site in RSS feeds. Then using Google's AJAX feed API, I'm using request the content from Google rather than my own server. As long as I optimize my JavaScript code, I should see a massive reduction in the bandwidth consumed per visit (in theory). This loose coupling of data from the view also serves to enforce proper MVC development practices while moving much of the application logic to the client.

There's a couple things I need to watch out for taking this approach:

1. Accessibility - When building out the view, you need to actively review the accessibility of the markup you're using. Its very easy to blow off the standards when you're waist deep in JavaScript.
2. Load Time - Minimize the amount of JS that gets loaded up front so the initial load time appears extra snappy. Then switch over to on-demand loading for any additional functionality (e.g. a "donate now" button)

The site is still in its infant stages but I hope to make a major dent in the development effort by the end of the weekend. So check in sometime next week: www.shakakai.com

Cheers,
Todd

The Developer Blog's Alive!

We've got some hot post action over at the Pier Dev Blog. Swing over and check it out.

http://developers.pierinc.com/

Pier Interactive Developer Blog

My company, Pier Interactive, just launched a developer blog. We're still working to fill out the content but if you're looking for more advanced articles on Flex and AIR it should be a superb resource. I currently have two posts up:

• HTML Reporting in Adobe AIR
• Client-Side Error Logging with AJAX
  

Speaking of developer articles, was anyone else let down by the extremely basic tutorials up on the new Adobe Developer Connection? I know AIR is still technically "new" but Flex definitely isn't. Where's the Enterprise-grade development posts? --> http://developers.pierinc.com (that's right I plugged it twice, I'm shameless).

Cheers,
Todd

RIP CFDJ

If you're a ColdFusion developer, then its a safe assumption you've visited the ColdFusion Developer's Journal on Sys-Con. Over the past year, their frequency and quality of posts has been on the decline (perhaps in conjunction with their readership). Adobe took notice and recently pulled their support from the publication. Apparently that was the final nail in the coffin because Sys-Con just announced CFDJ has been axed.

The quality of their content aside, I'm a little surprised Adobe allowed this to happen. CFDJ was the premier ColdFusion publication and really the only one that comes to mind as I'm writing this article. Is this a reflection of Adobe's commitment to CF or just a fitting end to a subpar journal? I don't mean any offense to the authors of CFDJ. There's a long list of great reads from the journal, over the years, but lets face facts. Sys-Con's user experience is probably the worst of any website I'll admit to frequenting. Perhaps a new blog with a better format and design will fill its place (hint, hint). Check in with pierinc.com in the next week for all the info.

Cheers,
Todd

Client-Side Error Logging

If you've done any amount of server-side scripting (CF, PHP, RoR, .NET, etc.), you already know the benefits of error handling. It allows you to capture unusual, sometimes unforeseen, errors that can occur in your script and handle them gracefully so your users get proper feedback on what just happened. No matter how great a programmer your are, something out of your control will break your code. Its your responsibility to build in a safety net so your users don't break their neck when they step off the correct path.

Since most developers would generally agree with my sentiment, why don't you see AJAX applications properly handling and logging client-side errors. The application that sticks out for me is Gmail. At least once a week I'll see a host of non-fatal errors pop up. Why? Can't errors that bubble up to the application scope be captured? Yes.

Be better than Google. Here's how:

var ErrorLogger = Class.create();
ErrorLogger.prototype = {
 initialize: function(url, opts){
  this.url = url;
  this.active = true;
  this.opts = opts;
  window.onerror = this.onError.bind(this);
 },
 onError: function(msg, URI, line){
  try{
   if(this.active){
    var body = 'URI=' + escape(URI) + '&line=' + line + '&msg=' + escape(msg) + '&brw=' + escape(Object.toJSON(Prototype.Browser)) + '&pv=' + escape(Prototype.Version);
    if('onError' in this.opts)this.opts.onError.apply(this, arguments);
    var opts = {
     onSuccess : this.onSuccess.bind(this),
     onFailure : this.onComplete,
     postBody : body
    };
    new Ajax.Request(this.url, opts);
   }
  }catch(e){
   this.onFailure();
  }
  return true;
 },
 onSuccess: function(){
  if('onSuccess' in this.opts)this.opts.onSuccess.apply(this, arguments);
 },
 onFailure: function(){
  this.active = false;
  if('onFailure' in this.opts)this.opts.onFailure.apply(this, arguments);
 }
};

What's it doing? Well, first off this is a Prototype Class so you need to include prototype.js in order to use it. Here's the breakdown:

1. The window.onerror event is set to call ErrorLogger.onError. When an unhandled error bubbles up to the window scope, onError will be called to handle it.
2. Three arguments are passed into the onError function ( msg, URI, line ) and an Ajax request with some additional browser information is constructed and posted to the URL specified in the constructor.
3. Lastly, the onError function returns true so the browser knows to disregard the error.

Can you just show the syntax for use? No prob.

<html>
<head>
 <title>Logger Test</title>
 <script type="text/javascript" src="prototype.js"></script>
 <script type="text/javascript" src="ErrorLogger.js"></script>
 <script type="text/javascript">
  var er;
  var init = function(){
   er = new ErrorLogger('TestResult.html',
   {
    onSuccess : function()
    {
     $('btn').setStyle({'backgroundColor' : 'red'});
    },
    onError : function()
    {
     alert('An error occurred on the page. Run for your life!');
    }
   });
  };
 </script>
</head>
<body onload="init()">
 <button id="btn" onclick="nonExistentFunction()">Throw Error</button>
</body>
</html>

When you click on the button labeled "Throw Error", the ErrorLogger class will gracefully handle the error and post some useful debug information to your server. From there you can do whatever you want. Personally, I just toss it in a log file that I monitor. All that in less than 1KB, not bad.

I've tested it on IE6/7 and FF2. Its definitely not production ready quite yet but I'll throw an update up with my final version in a day or two.

Cheers,
Todd

Add A Blog Search Feed to Google Reader

If you're like me your Google Reader RSS Feed Reader is filled with great blogs site ( Lifehacker, Mashable, Techmeme, etc.) While I'm not ditching any of my favorite web filters, sometimes I want to get my information direct from the source, or just another source. Here's a handy trick to keep you ahead of the curve.

Go to Google's Blog Search. Note the RSS/ATOM links on the side. Toss those in your Feed Reader and you're ready to go.

Oh, did I say this was difficult and time consuming? Definitely not.

Very useful? You know it.

Cheers,
Todd

PS - Depending on the search query, you may run into some spam. Play around w/ the advanced search options to get things working right.

Got Some Free Time?

Great list of top notch Flash sites: http://flashprayer.blogspot.com/

Steer clear during work hours...lest your lose your whole day (which may or may not be a good thing).

:)

Cheers,
Todd

PS - AIR Tour on Friday in Boston.

Designer//Slash//Model

Simply awesome.


Enjoy!


Check out the source.

Code Highlighting

If you're in the market for a code highlighter, I just ran into a good one that handles PHP, Java, Javascript, Perl, SQL, HTML, and CSS. To rock this on your blog/website, all you need to do is include the javascript source in you page header and add a textarea tag like so:

<textarea id="myCpWindow" class="codepress javascript linenumbers-off">
// your code here
</textarea>

Notice the language to be highlighted is included in the class declaration. There's a couple other useful features (such as copying code to the user's clipboard) that can be found here. To make life even easier, I've written up a quick ColdFusion custom tag to create the textarea declaration and include the appropriate content (sorry, non-CF users). Here's the code:

<CFSETTING enablecfoutputonly="true">
<CFIF ThisTag.ExecutionMode eq "Start">
<cfparam name="attributes.language" type="string"><!--- Language to Highlight --->
<cfparam name="attributes.file" type="string"><!--- relative file path --->
<cfparam name="attributes.readOnly" type="boolean" default="false">
<cfparam name="attributes.lineNumbers" type="boolean" default="true">
<cfparam name="attributes.autoComplete" type="boolean" default="false">

<cfset attriList = "language,file,readOnly,lineNumbers,autoComplete">
<cfset attriKey = StructKeyList(attributes)>

<CFTRY>
 <CFFILE action="read"
   file="#ExpandPath(attributes.file)#"
   variable="fileResult">

 <CFCATCH type="any">
  <CFTHROW detail="Double check the file location. The error occurred trying reading the specified filed.">
 </CFCATCH>
</CFTRY>

<CFOUTPUT><textarea class='codepress</CFOUTPUT>
<CFIF attributes.readOnly><CFOUTPUT> readonly-on </CFOUTPUT></CFIF>
<CFIF NOT attributes.lineNumbers><CFOUTPUT> linenumbers-off </CFOUTPUT></CFIF>
<CFIF NOT attributes.autoComplete><CFOUTPUT> autocomplete-off </CFOUTPUT></CFIF>
<CFOUTPUT>'</CFOUTPUT>
<CFLOOP from="1" to="#ListLen(attriKey)#" index="aIndex">
 <CFIF NOT ListFindNoCase(attriList, ListGetAt(attriKey,aIndex))>
  <CFOUTPUT> #ListGetAt(attriKey,aIndex)#='#attributes[ListGetAt(attriKey,aIndex)]#' </CFOUTPUT>
 </CFIF>
</CFLOOP>
<CFOUTPUT>>#fileResult#</textarea></CFOUTPUT>

</CFIF>
<CFSETTING enablecfoutputonly="false">

You can use the tag like so:

<cf_syntaxify <-- whatever you name the tag -->
   language="ColdFusion"
   file="test.cfm"
   id="testID" />

Any attribute you define in the tag that is not param'ed at the top of the custom tag will be passed onto the <textarea> tag. Note the id attribute in the above example.

There are a couple other code highlighters available, most notably the one released by Google, but the simplicity of CodePress is immediately apparent once you check out the docs. Let me know if you run into any problems w/ the custom tag (I haven't tested it extensively yet).

Cheers,
Todd

The Cross-Over Point AKA FU Money

Hackzine has a great post on money management. They discuss the often sought after (little talked about) situation known as FU Money. The point where you earn more in interest on your investments than you spend in living expenses. Its a really simple concept that most people don't think about until they're old and gray (Hackzine begs to differ).

I've come up with a new response to "What's fueling this whole Web 2.0 frenzy?" FU Money, obviously!

Have a great weekend.

Cheers,
Todd

CF8 Logos...

Rey Bango just posted a bunch of CF8 logos. If you're working on a ColdFusion 8 powered project (I know I am), then you may want to snag one of these. I'm hoping to have some info on my *hush* *hush* AIR derby project by Monday.

Cheers,
Todd

Ning :: Full Source Access

API's are great from a security standpoint but creativity takes a backseat in the process. What happens when you come up with an idea/concept that the original developer never thought of? With a standard web service, nothing. With Ning, you can write your own API .

http://www.ning.com/help/faq-developers.html

Perhaps I'm blurring the truth a little bit. Ning doesn't really provide an "API" like other web applications, they've created an application layer that ANY community user can edit. Their API is exposed via PHP, a very untraditional approach to open development that begs the question: if Ning can do it, why can't you? or me? or Google?

If you could provide all your company's information/resources in a system like Ning, would you?

Drag & Drop in AIR

I just ran into a great article by Alastair outlining the use of Native Drag & Drop functionality in AIR (w/ a little RoR mixin). The documentation for Native D&D is very spotty, there are more mistakes then anything else. So, if you haven't learned the hard way yet, let me make your life a little easier: http://blog.vixiom.com/2007/06/29/merb-on-air-drag-and-drop-multiple-file-upload/

Here's a simple test application you can use to get started:

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init(event)">

<mx:Script>
<![CDATA[
import mx.events.DragEvent;
import flash.desktop.DragManager;
import flash.desktop.DragActions;
import flash.events.NativeDragEvent;
import flash.desktop.TransferableFormats;
import flash.filesystem.File;

private function init(e:Event):void
{
 //add the event handlers
 this.addEventListener(NativeDragEvent.NATIVE_DRAG_ENTER, onEnter);
 dropPanel.addEventListener(NativeDragEvent.NATIVE_DRAG_DROP, onDrop);
}

public function onEnter(event:NativeDragEvent):void
{ 
 //Check to see if the drag item is the right format
 if(event.transferable.hasFormat(TransferableFormats.FILE_LIST_FORMAT))
 {
  DragManager.acceptDragDrop(dropPanel);
 }
}

public function onDrop(event:NativeDragEvent):void{
    trace("dropped");
 // Cast the drag & drop data as an array
 var files:Array = event.clipboard.dataForFormat(flash.desktop.ClipboardFormats.FILE_LIST_FORMAT) as Array;
 for each (var f:File in files)
          {
             // check out the file URL
    trace(f.url);
          }
}
]]>
</mx:Script>

<mx:Panel id="dropPanel"
 top="10"
 left="10"
 height="100"
 width="100"
 title="Drop Files Here"
 backgroundColor="#FFF">


</mx:Panel>

</mx:WindowedApplication>

Also worth a read: http://coenraets.org/blog/2007/06/air-to-desktop-drag-and-drop-two-simple-utility-classes/

I'll let you know why I'm reading up on D&D in a couple days :)

Cheers,
Todd

***Updated for AIR Beta 2***

CT-CFUG Presentation

Just a quick heads up. JB and I are giving a presentation on Adobe AIR at the Connecticut ColdFusion User Group on Tuesday night (July 24th, 2007). If you're in the area and up on technology, you might want to think about stopping in for our jam session. I hear there's going to be some free Adobe swag in it.

Cheers,
Todd

Nokia Didn't See This Use Case Coming

Adam Prestin pointed me to this crazy picture earlier today and I had to re-post it.

No this phone wasn't modded out by some MAKE afficionado. Its actually a terrorist/insurgent/{insert political spin here} bomb timer from Iraqi, apparently a very common one too.

Its a good thing they missed the call.

(Thanks Adam)

Bubblemark Animation Test Confirms It

Alexey Gavrilov compiled a nice set of performance tests for all the major RIA development platforms (Flex, Silverlight, JavaFX, AJAX). Flex (aka Flash) performed like a champ in the browser arena, which isn't horribly surprising considering how long its been around. Both Flex & Actionscript are up to, or on the way to, version 3.0 and Flash is rocking numero nine. I do have to admit that I'm impressed by Microsoft's progress on Silverlight. After the Flex 2.0 release, they must have recognized the enterprise level development capabilities that Flex brought to the table and jumped right on the issue. If they had taken a look at the crazy flash apps Pier was doing back in 2001, they might have foreseen this RIA trend long in advance.

Here are a couple surprises:

• JavaFX is 4.4 times slower than Flash.
• Firefox + Silverlight (CLR) — 99 fps
• Flex and AIR peform at the same speed (as I previous reported)

While it looks like Silverlight is going to be a strong contender from a performance standpoint, I'm going to hold my opinion until they release the first non-Windows version.

Check out the complete results here.

PS- I also enjoyed reading Alexey's initial experiences w/ Flex. I distinctly remember dealing with each one of the issues he mentioned. Good times.