Shonzilla, a pattern-seeking animal

Life is a game of patterns and chance, and those who play well will win.


Twitter

See also (via Entrecard)

programming coupons powered by RetailMeNot.com

Sun Oct 31

Command-line JavaScript beautifier implemented in JavaScript

Intro

In the the world of web programming where more things gets done in JavaScript, most of this JavaScript is directly available online. An exception is the server-side JavaScript like the one used in node.js or, less commonly known, in a OpenSocial container like Apache Shindig. Unless the license says otherwise, all this JavaScript code is free for anyone to download, fiddle with and fork/hack/improve/refactor.

For different reasons, the code is frequently post-processed in a way making it impossible to read. Enter JavaScript beautifiers. There’s plenty of them. However, they’re all on the web. Have you asked yourself “is there’s no command-line JavaScript beautifier?” so that you can most of the work from hacker’s favorite development environment. If you were looking for CLI JavaScript beautifier and haven’t found one, you came to the right page.

Ingredients

Here’s the DIY guide on how to create your own CLI JavaScript beautifier.

First, you’ll need a command-line JavaScript interpreter. Say Mozilla Rhino, JavaScript interpreter implemented in Java. I’ll assume you already have a working Java installation on your machine. Since Rhino works with any JDK 1.4 or higher, if you have any Java on your machine - you’re surely fine already.

Secondly, JavaScript beautifying itself is implemented in JavaScript just as most of the online JavaScript beautifiers rely on client-side process implemented JavaScipt. This JavaScript piece of the puzzle fits perfectly in the previous one - the JavaScript interpreter. I recommend jsbeautifier.org - JavaScript unpacker and beautifier since it’s the only I’ll use here as an example.

The last piece of the puzzle is a shell script to tie it all together.

DIY guide

Follow this steps to DIY:

  1. Download the latest stable Rhino and unpack it somewhere, e.g. ~/dev/javascript/rhino
  2. Download beautify.js which is referenced from aforementioned jsbeautifier.org then copy it somewhere, e.g. ~/dev/javascript/bin/cli-beautifier.js
  3. Add this at the end of beautify.js (using some additional top-level properties to JavaScript):
    // Run the beautifier on the file passed as the first argument. print( j23s_beautify( readFile( arguments[0] )));
  4. Copy-paste the following code in an executable file, e.g. ~/dev/javascript/bin/jsbeautifier.sh:

    #!/bin/sh

    java -cp ~/dev/javascript/rhino/js.jar org.mozilla.javascript.tools.shell.Main ~/dev/web/javascript/bin/cli-beautifier.js $*

  5. (optional)  add the folder with jsbeautifier.js to PATH or moving to some folder already there.

Usage

If you have the above script (jsbeautifier.sh) in PATH like I do, you can run it from any folder to format a JavaScript or JSON file by adding the file as the first argument: 

jsbeautifier.sh some-minified.js

where you replace some-minified.js with some JavaScript or JSON file that no normal web developer wants to read.

Outro

I see no reason why wouldn’t the same technique repurposed for other JavaScript-based services currently only found online. Some ideas come to mind: JavaScript comressing/uglifying… maybe even running YQL from the command-line.

Note that I haven’t actually tried those nor checked if there are stronger dependencies on the client-side requiring more work to repurpose the JavaScript code from the web browser into Rhino runtime.

Wed Mar 25
Fri Mar 20

Great stuff that your Google Chrome browser can do… most experiements won’t look as good or as fat in other web browsers. 



Have in mind that everything is implemented in HTML, JavaScript and CSS. :-)



Verdict: this is one great viral marketing campaign!



Thanks to Raša for letting me know about this and bashing Tetris within a web browser as a bleak achievement. ;-)

Great stuff that your Google Chrome browser can do… most experiements won’t look as good or as fat in other web browsers.

Have in mind that everything is implemented in HTML, JavaScript and CSS. :-)

Verdict: this is one great viral marketing campaign!

Thanks to Raša for letting me know about this and bashing Tetris within a web browser as a bleak achievement. ;-)

Fri Nov 2

Google OpenSocial API premature review

This short review has been based on an early sample using the inofficial release of long-awaited Google OpenSocial API. Thanks to Gaurav for pointing it out.

The sample is a mash-up of a MySpace page and author’s Flixster account using OpenSocial API. Better said, parts of it. I’ll explain why.

What can be learned from this sample is that OpenSocial API is a JavaScript library. The above sample uses (probably) a partial OpenSocial API core that is squeezed in a single JavaScript file (peculiarly called Person.js) together with some Google general-purpose JavaScript utility classes and methods. There are two other files (MySpaceContainer.js and MySpacePerson.js) that implement MySpace-specific Open Social connectivity.

From the OpenSocial part, what can be noticed is the concept of Containers. Yesterday, Marc Andreessen of Ning and Netscape fame wrote about Containters and Apps. Therefore, Apps is missing, which is might make sense at this early stage because this example does not require generic App connectivity (i.e. full-blown OpenSocial API that is able to interoperate with several applications since only Flixster is used here).

The following concepts can be noticed in this early sample:

  • Person - central concept of a Container user (i.e. social networking system account)
  • Container - (partially) open window to social networking system itself
  • DataRequest - this is where the most of interesting interaction between Containers can be seen (dealing with Persons, Groups a.k.a. friends, ProfileDetailTypes, FilterTypes, new friend requests etc.)
  • Activity - action that can be performed from inside Container with any of the Apps (that’s my assumption)

The main action involves MySpaceContainer, while interaction happens using DataRequest and DataResponse JavaScript classes that encapsulate you-guess-what.

For now, I’ll avoid going deeper since its 2:15am in Belgrade now and I expect/hope an official OpenSocial API together with documentation will appear online.

Conclusions:

  1. First impressions are that OpenSocial API itself, the JavaScript code, seems intruiging, conceptually correct and in line with the expectations. It does allow rather clean interaction between different Containers and Apps.
  2. What is evident - Google has definetely done a great PR and extremely quickly crossed the tipping point by getting strong partners on their/open side of the fest.

MODIFIED (Nov 2, 9:15): Now it’s sure - the offical name is not Open Social (as Marc Andreessen was writing) but it’s a developer and search engine-friendly one word OpenSocial. :-)