Links: JavaScript Dev and a Ruby-to-JS Tool

Firebug on browsers other than Firefox? Use Firebug Lite. Also, quick scripts to view generated source and stacktrace.

Red - Ruby to Javascript translator

Links: Games written in JavaScript

A few games written in JavaScript recently came to my attention, and these aren't your run-of-the-mill video games either. They're pushing the boundaries of what can be done inside your browser.

Of note is two Defender-style games: Spacius! A Space Adventure (with variable/expandable playing field, and nice sound via SoundManager 2); and, Defender of the Favicon (which renders the full game in the page's favicon, no kidding.)

Also, there's WolfenFlickr 3D which mashes up browser-bound Wolfenstein 3D with Flickr images, and Rockford the Invincible, the dysfunctional Boulder Dash clone written in only 20 lines of JavaScript.

Previously,
Links: Wolfenstein 3D in JavaScript

Link: Firefox 3's Awesome Bar in JS

JavaScript implementation of Firefox 3's "Awesome Bar".

Mapping resources: Yahoo! HTTP Geocoder API, Geohashes and Browser-based Geolocation

Links:

• Webmonkey takes a look at Yahoo! Geocoding API
  

  Geocoding is the process of converting human-readable place data -- a city name, ZIP code, or address -- to latitude and longitude points that can be easily plotted on a map.



• Tips & Tricks with Geohashes, another geocoding service, which provides a geohash with gradual precision degradation - instead of latitude and longitude - from human-readable address data.
  
  Not to be confused with xkcd's Spontaneous Adventure Generator.
  
  
  


• Geolocation Redux and a JS Library, a proposal for browser-based geolocation functionality with a JavaScript library to start getting your hands into it. Looks interesting.

Other posts in this series:
Mapping Resources: Google Maps .NET Control, GeoRSS with WCF
Mapping Resources: Mapstraction, Geocommons, GeoCoder.us with C#
Mapping Resources: OpenLayers and OpenStreetMap

Another C# to JavaScript cross-compiler

Just when C#'s update to 3.5 felt like it's turning into JavaScript (well, a little bit, especially with the new Lambda capabilities), ECMAScript 4 started to feel like JavaScript was heading into C# territory, with more advanced types, and type and objects support, and then some. Anyway, I digress. What I'd wanted to say was what I'd found today, in a rather roundabout kind of way (via John Resig's post about writing ECMAScript 4 with Mascara which recompiles the new ECMAScript standard into classic JavaScript). It's this: JSC, an MSIL to JavaScript recompiler. You write C# code, and I quote, and the application magically appears!

Almost as cool as Script#.

Somehow related,
Ruby love in the browser
ParenScript for the javascript universal runtime

Partial rendering without UpdatePanel

Performance on the Visual Studio development web server was slower than I expected. I don't have any benchmarks, but I thought the boss' initial yawn when I tried to show him the prototype was sufficient. So, after not getting much perceived performance gain even with the LINQ queries all tightened up, I stumbled onto the AJAX-ed UI templating sans Upload Panel technique as Scott Guthrie posted on his blog about some time ago. I thought this technique was quite suited to my application since it used a lot of custom user controls. So, I put it in and it worked. It felt a little faster than before.

Along the way, I discovered that I couldn't implement PageMethods in the user control, but that I could get the user control to call PageMethods defined in the containing page. So in my best effort not to have my logic strewn all over the place, I put the PageMethod in a base page which each containing webpage would inherit from. I didn't want to use web services. Of course, you wouldn't understand any of this unless you read Scott's post.

In any case, I was pleasantly surprised to find out that ASP.NET 3.5 performance, particularly with LINQ was not as bad as I had experienced after deploying to a staging server. A case of premature optimization, that's all.

Links

Reading EXIF data with Javascript; And downloading binary streams with JS.

Links

John Resig's pure JavaScript HTML parser complete with SAX style parser, XML Serializer, and DOM builder; A JavaScript color fading effects script; And lastly, more JavaScript esoterica, JavaScript compression using Canvas and PNG-embedded data

Links

Have ASP.NET WebMethod called from jQuery; Create an ASP.NET 3.5 AJAX control extender; and, Dynamic Text Replacement with JavaScript and C# ASP.NET.

On my current preoccupation with LINQ programming, and more specifically, my current problem involving dynamic querying, these came up rather interesting - although I ended up denormalizing the data structures out of the dynamic querying: dynamic methods via LINQ expressions; Using an extension method to combine query predicates; and, dynamic queries and LINQ expressions.

From the Three Helpful JavaScript Libraries article, Fluently (for method chainability), MOP JS (for metaprogramming), and Collection JS (for collections and stuff).

And finally, some JavaScript miscellania: Running Java in JavaScript; and, a (partial, canvas-dependent implementation of) Wolfenstein 3D in JS.

Links

RubyJS, a Ruby implementation in JavaScript, now goes mobile, and we're not talking about the HotRuby previously blogged about here

The new Microsoft Live Maps and Virtual Earth is released, with reports of the overhaul coming in that it's fairly impressive.

Use your Google account with OpenID, and the reasons why your killer app should already support OpenID.

Links

Advanced obfuscated JavaScript analysis
Advanced JavaScript Debugging Techniques (besides tips and techniques, also mentions tools like JSLint, Firebug Lite, Debug Bar, Fiddler, HTTP Live Headers, Web Development Header, and the IE Developer Toolbar)

and, also

John Resig's commentary (Embedding and Encoding in JavaScript) on the 14k media-loaded JavaScript implementation of Super Mario. John's blog always is on the cutting edge of JavaScript, you don't know what you're missing if you haven't yet rolled him into your daily feed reading.

Links

modules.js
Super Mario in 14kb Javascript

Ruby love in the browser

I'd heard of HotRuby before but thought it was merely a browser-based Ruby interpreter written in JavaScript. A second look at it, via John Resig's post yesterday brought this to the fore:

1. Script finds <script type="text/ruby"></script> tags and extracts the inline Ruby code from them.


2. The Ruby code is sent to the server via an XMLHttpRequest.


3. The server-side CGI script (in Ruby, using Ruby 1.9) compiles the incoming Ruby into its associated opcodes and serializes it into a JSON data structure.


4. The browser consumes the opcodes, translating it into JavaScript, and executes it.

Interesting, and according to John's post, this round-about approach still shows pretty impressive performance benchmarks.

To look at it from another perspective, we can also do browser-based Ruby with Silverlight, in the upcoming version 2 anyway. This would be managed Ruby code running on Silverlight's DLR, all on the (plugin-enabled) browser, without the round-trip that the HotRuby approach requires. I wonder how the performance benchmarks for such an approach, and how it stacks up against HotRuby.

Links

Cool JavaScript bounce animation

Another interesting link from John Resig, from his upcoming JS ninja book: Simple JavaScript Inheritance.

Thinking about going to ReMix08, looking at 16th May in Singapore or 27th May South East Asia (please make it Kuala Lumpur).

An RSS ActiveDesktop with JavaScript

Home for the Chinese New Year, I decided to put together an RSS wallpaper for my parents.

Not exactly power users, my parents use the home XP computer mostly for games (FreeCell, WordZap etc), IM and streaming radio. They have the desktop all laid out nicely, so on the right side you get the IM applications area (Yahoo! Messenger and Skype, so they can easily contact me or my brother when we're not around) and games area on the left side. This leaves about 45% of screen space on the bottom left hand corner, which I intended to use for my feeds wallpaper.

I remembered stumbling onto an Instructables tutorial on turning your desktop into an RSS reader, which I'll be using for this purpose. (Note: This only works for Windows XP machines.)

As per the directions in Step 1 (from the Instructables site), create the HTML layout. This should be something that can work well as a wallpaper with words. You want to be able to read the headlines properly, so style the fonts to contrast with the background for best results. Give some thought to laying out the feed area. I used a two column table for mine, one labeled "for mum" and the other "for dad".

Then, as in Step 2, insert the http-equiv="refresh" meta tag into the <head> section of your HTML document. This makes the webpage (your desktop) refresh itself periodically.

<meta http-equiv="refresh" content="600">

Step 3 is where I deviate from the Instructables tutorial. Instead of using Feed2JS to pull the RSS headlines onto the desktop, I'll be using a combination of Google Reader and Yahoo! Pipes' JSON output.

In Google Reader (which I use daily), tag the feed you on your desktop, and from the Settings page, make it public. This will create a public Reader page for the tag complete with its own RSS. It even has its own JavaScript widget, which you can stick into your HTML right away. However I wanted full control of how and what was displayed so I used Pipes which gave me full access via JSON. Connect the public RSS into Yahoo! Pipes using the Fetch Feed module. And then output it, selecting the JSON format.

On the HTML end, I wrote a simple callback method in JavaScript to show the headlines. Of course, since you have access to all the feed objects data via JSON, you could also display the description.

<script>
// The callback, which will be called 
// after the JSON has been loaded
function showDad(obj){
 // Make sure the returned object is valid
 if((obj != null) || obj.count == 0) {
  return;
 }
 var output=[];
 var items=obj.value.items;
 // Loop through the feed items, construct HTML
 for(var i in items) { 
  var item = items[i];
  output.push('<li><a href="');
  output.push(item.link);
  output.push('">');
  output.push(item.title);
  output.push('</a>'); 
 }
 // Output into the designated areas
 document.getElementById('for_dad_area').innerHTML =
  output.join(''); 
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_id=mypipeid&_callback=showDad">
</script>

Follow Step 5 from the Instructables tutorial on how to setup Active Desktop, and that's it!

Mum loves cooking, so I hooked her up with Simply Recipe's feed, while my dad got a soccer news feed from ESPN. And the beautiful thing is, Google Reader lets me control what feeds go on my parent's wallpaper remotely. I just need to tag the feeds accordingly, I don't even have to be home to do this!

FBJS Animation

The Facebook dev team yesterday released a JavaScript animation library under a modified BSD license. The JavaScript library works in Canvas pages and Profile boxes, and also outside of Facebook! That means you can grab a copy of the library and, since it's been decoupled from the FBJS core, you can use it to add animations to your own webpages.

From the dev wiki, it looks simple enough to use, with FBJS's jQuery-style chainability really shining through when applied to the ordering of animation and effects sequences. The library also allows advanced techniques like checkpoints with callbacks and custom easing.

Cool. I'm definitely gonna' have to find some time to check out the library.

Related posts:
AppJet your Facebook application
Behind the scenes with Facebook Beacon's JavaScript
No JavaScript for Facebook mobile platform
AJAX wrapper for FBJS
Lessons in FBJS
How I created a Facebook application with FBJS
Facebook releases FBJS

Track user interaction in Facebook Profile with FBJS

Since fb:google-analytics only works in Canvas pages, you need to code Profile user interaction (which is, like, 95% of the action) tracking right into your backend. Joel Neubeck posted how you can achieve the same tracking effect on the profile with client-side FBJS. He does this by wiring onclick events on links in the Profile to post AJAX calls to an external server, which then logs the action. View the post for more information.

AppJet your Facebook application

Here's a link to a guide on writing, deploying and hosting full (client-side and backend-complete) JavaScript Facebook applications with AppJet.

Some time ago, I wrote a simple Facebook application completely in FBJS. It used DOM-based dynamic user interface updates and AJAX data retrieval (via Yahoo! Pipes). As I've mentioned, it was written completely in client-side JavaScript, and I hosted the static HTML file on Google Apps. There were no backend data stores although theoretically, I could've used AJAX calls with freely available services like Openomy and Amazon S3 (or its recently limited beta launched SimpleDB) for this. Well, you can now do all of this easily with AppJet. Check it out (also, the online reference).

Related posts,
Creating RESTful JSON services with AppJet

Creating RESTful JSON services with AppJet

The newly launched AppJet makes it extremely easy to host your own JSON services. Firstly, hosting is free. Secondly, serialization of objects (which are in JavaScript, to start with) into JSON is almost equally effortless.

Just to show how easy it is to do this, I've created a simple Contacts List service hosted at http://contactsapi.appjet.net/ (view the source). The API exposes CRUD operations on a Contacts List. This list is a collection of simple contacts, each containing only a Name and an Email.

AppJet let's you write and host JavaScript web applications. (That's right, server-side JavaScript programming, and from inside your browser.) Besides full-fledged applications with flashy UIs, I've found it works just as well for bare-bones web services. If you haven't yet checked it out, I suggest you do, it rocks!

How I created the services:

• I called page.setMode("plain"), so I could output what I needed - in this case, JSON representation of Contact objects - and nothing more, no default xhtml document structures.


• AppJet doesn't support PUT and DELETE, so I relied on POST and GET only to design a REST-styled API interface. I wired up Controller-esque URL-routing using patternDispatch() with request.isGet and request.isPost to come up with the necessary CRUD operations over HTTP.


• Finally, for the GET requests, I return serialized JavaScript data resources by simply calling Print() on the Contacts objects and arrays. This works for about 96% of the serialization I used in this example (Print() auto formats some of the objects into HTML tables), and I suspect using a ported version of the JSON stringifier found on json.org will close this gap.

Adding client-side JavaScript callbacks to the JSON results? No-brainer, just output a query-specified callback to the end of the returned JSON. Email validation for the contacts? A quick Google search yielded this regex match test.

I forgot to mention I used AppJet's excellent persistent storage classes to store the Contact List. Couple features like that with the remote-web-request-capable wget() and wpost() and you have a wonderful zero-configuration, fast-deploy, mashup-ready platform.