I don’t think it’s a good idea to leave

console.log

statements in production code, it’s a good idea to prevent your site from breaking if you accidentally do. I include this condition in the first script that loads on the page of most of my projects

if (typeof console == "undefined") {
    window.console = {
        log: function () {}
    };
}

This JavaScript simply defines an empty function if the console is not available in the browser so stray log statements don’t break production for your valuable customers.

In a recent project I wanted to be able to dynamically set a production flag in JavaScript. Doing so would allow me to keep my production analytics free from dev and staging environment events. Because my dev and staging environments don’t run on a .com domain extension I was able to go with this simple script

    var de = document.location.hostname.split('.');
    de = de[de.length - 1];
    window.prod = (de == 'com') ? true : false;

Then when I need code to only respond when in production it’s as easy as

    if(window.prod) {
        // do awesomeness
    }

Splitting up the domain in JavaScript to set the production flag has been working well and I’m quite happy with it so far. If you have suggestions or want to share what you have done, please share in the comments below.

Rhino is an open source implementation of JavaScript in Java and envjs is a simulated browser environment written in javascript. So what does all this mean? It means that you can load up a web page and execute the loaded page’s JavaScript in a browser simulated environment all without a browser! Let me demonstrate.

From the Rhino downloads page I downloaded rhino1_7R2.zip since R3 doesn’t work with Envjs at the time of this post.

I also downloaded the latest Envjs and placed it in the same location as the unzipped rhino folder.

Navigate in a terminal to the location of the unziped rhino folder and start up rhino.

java -jar js.jar

Then you will want to load the Envjs JavaScript that will emulate the browser environment. (location is relative to where the jar file is running from)

load("../env.rhino.js")

Then I tell Envjs to load external scripts found in the page. This is required because scripts running in Rhino with Envjs will have file system access.

Envjs.scriptTypes['text/javascript'] = true;

Then we navigate our emulated browser to the test page that I built.

window.location = "http://mikegrace.s3.amazonaws.com/geek-blog/rhino-envjs.html"

The test page that I built looks like this when you load it in a browser with JavaScript disabled

This is because the page content is built using jQuery

Rhino and Envjs Test<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script><script charset="utf-8" type="text/javascript">// <![CDATA[
    $(document).ready(function() {
      $(document.body)
        .append("
 
<h1>Header of the highest order</h1>
 
")
        .append("
 
Question: What is the answer?
 
")
        .append("<code>42</code>");
    });
 
// ]]></script>

Because Envjs will emulate a browser, we will be able to work with the page in Rhino like we would in a browser.

Getting the paragraph text is as easy as running some jQuery in the Rhino console

jQuery("p").text();

Awesome!

rhino1_7R2 mgrace$ java -jar js.jar
Rhino 1.7 release 2 2009 03 22
js> load("../env.rhino.js")
[  Envjs/1.6 (Rhino; U; Mac OS X x86_64 10.6.8; en-US; rv:1.7.0.rc2) Resig/20070309 PilotFish/1.2.13  ]
js> Envjs.scriptTypes['text/javascript'] = true;
true
js> window.location = "http://mikegrace.s3.amazonaws.com/geek-blog/rhino-envjs.html"
http://mikegrace.s3.amazonaws.com/geek-blog/rhino-envjs.html
js> jQuery("p").text();
Question: What is the answer?
js> jQuery("code").text();
42

If you are looking to debug your scripts in Rhino a bit better, you can launch the rhino console in the Rhino JavaScript Debugger using a command similar to this

java -cp js.jar org.mozilla.javascript.tools.debugger.Main

I recently released my “Old School Retweet” Kynetx app in the Kynetx app store for the newly released browser extensions. I super love the new extensions and all that they do for users and developers alike. Something that I forgot when I released the app in the app store is that the new extension are sandboxed.

Because the extensions are sandboxed, all of the scripts from the extensions run a bit differently than they used to in the previous Kynetx extensions. Without getting into the technical details too much, the previous extensions just injected JavaScript into the page and the new extensions run JavaScript in a sandbox which has access to the DOM but can’t access anything else on the page. Because of this change my retweet app broke since I was using the jQuery loaded by Twitter.com to bring up the new tweet box (I do this because Twitter.com used that library to bind a click event and to trigger that event it has to be from the same library that bound it). Thankfully, with the help of a friend, I was able to get a work around for both Firefox and Chrome’s sandbox environment.

How I did it…

If the app is run not inside a sandbox I can just access the jQuery that Twitter.com loads to open a new tweet box

$("#new-tweet").trigger("click");

From within the Firefox sandbox I can access the page outside of the sandbox

window['$']("#new-tweet").trigger("click");

If I am in the Chrome sandbox I can create a script element that has the JavaScript that I want to execute. Crude, but it works. : )

var trigger_click_script = document.createElement("script");
var fallback = "window['$']('#new-tweet').trigger('click');";
trigger_click_script.innerHTML = fallback;
document.getElementsByTagName("head")[0].appendChild(trigger_click_script);

Here is the JavaScript code that I ended up with that gets executed when a user clicks on the retweet button.

// get stuff to retweet
var tweet = $K(this).parents(".tweet-content").find(".tweet-text").text();
var name = $K(this).parents(".tweet-content").find(".tweet-screen-name").text();
 
// build tweet
var retweet = "RT @"+name+" "+tweet;
 
// open new tweet box
$("#new-tweet").trigger("click");
 
// hack for FF sandbox
if ($("#tweet-dialog:visible").length === 0) {
  window['$']("#new-tweet").trigger("click");
}
 
// put tweet in new tweet box
$K(".draggable textarea.twitter-anywhere-tweet-box-editor").val(retweet).focus();
$K("#tweet_dialog a.tweet-button.button.disabled").removeClass("disabled");
 
// hack for chrome sandbox
if ($("#tweet-dialog:visible").length === 0) {
  var fallback = "window['$']('#new-tweet').trigger('click'); ";
  fallback += "window['$']('.draggable textarea.twitter-anywhere-tweet-box-editor').val('"+retweet+"').focus(); ";
  fallback += "window['$']('#tweet_dialog a.tweet-button.button.disabled').removeClass('disabled'); ";
  var trigger_click_script = document.createElement("script");
  trigger_click_script.innerHTML = fallback;
  document.getElementsByTagName("head")[0].appendChild(trigger_click_script);
}