Cross Browser Testing For All Versions Of IE (Internet Explorer)

IE 1.5

Ever had the urge to test your site or your client’s site on all versions of IE? Me either! Introducing IE Collection. You can download the .exe that will install all the versions of IE that are compatible with your version of windows all the way back to IE 1! So whether your are feeling nostalgic or just need to get some testing done, download it from FileForum or Softpedia

To celebrate this blog post on this year’s Programmer’s Day, here is a this blog post as seen through IE 2′s eyes. How meta ; )
blog post rendered in IE 2

Rhino and Envjs

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&gt; 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&gt; Envjs.scriptTypes['text/javascript'] = true;
true
js&gt; window.location = "http://mikegrace.s3.amazonaws.com/geek-blog/rhino-envjs.html"
http://mikegrace.s3.amazonaws.com/geek-blog/rhino-envjs.html
js&gt; jQuery("p").text();
Question: What is the answer?
js&gt; 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

rhino javascript debugger

Installing statsd on Ubuntu Server 10.04

Installing StatsD on an Ubuntu server (10.04) was surprisingly easy. Here are the steps that I took. These will work from a fresh install of Ubuntu server 10.04 or after having installed and started graphite.

# INSTALL NODE.JS
sudo apt-get update
sudo apt-get upgrade
sudo apt-get install python-software-properties git-core
sudo add-apt-repository ppa:chris-lea/node.js
sudo apt-get update
sudo apt-get install nodejs
 
# CLONE THE STATSD PROJECT
git clone https://github.com/etsy/statsd.git
 
# CREATE A CONFIG FILE
cd statsd
cp exampleConfig.js dConfig.js
# edit config file your settings
sudo vim dConfig.js
node stats.js dConfig.js
 
# START STATSD
node stats.js dConfig.js

When you start StatsD, it will probably give you a warning like

(node) process.compile should not be used. Use require(‘vm’).runInThisContext instead.

but it is still working as expected so you can ignore it.

You can then test to make sure StatsD is working. Edit and run this simple PHP script to throw some stats at your StatsD.

<?php
 
StatsD::increment("testing.increment");
StatsD::timing("testing.timing", 2345);
 
class StatsD {
    public static function timing($stat, $time, $sampleRate=1) {
        StatsD::send(array($stat => "$time|ms"), $sampleRate);
    }
    public static function increment($stats, $sampleRate=1) {
        StatsD::updateStats($stats, 1, $sampleRate);
    }
    public static function decrement($stats, $sampleRate=1) {
        StatsD::updateStats($stats, -1, $sampleRate);
    }
    public static function updateStats($stats, $delta=1, $sampleRate=1) {
        if (!is_array($stats)) { $stats = array($stats); }
        $data = array();
        foreach($stats as $stat) {
            $data[$stat] = "$delta|c";
        }
        StatsD::send($data, $sampleRate);
    }
    public static function send($data, $sampleRate=1) {
        $sampledData = array();
        if ($sampleRate < 1) {
            foreach ($data as $stat => $value) {
                if ((mt_rand() / mt_getrandmax()) <= $sampleRate) {
                    $sampledData[$stat] = "$value|@$sampleRate";
                }
            }
        } else {
            $sampledData = $data;
        }
        if (empty($sampledData)) { return; }
        try {
            $host = [your graphite host here];
            $port = [your graphite port here 8125?];
            $fp = fsockopen("udp://$host", $port, $errno, $errstr);
            if (! $fp) { return; }
            foreach ($sampledData as $stat => $value) {
                fwrite($fp, "$stat:$value");
            }
            fclose($fp);
        } catch (Exception $e) {
        }
    }
}
 
?>

Be sure to edit the $host and $port settings towards the bottom with the appropriate graphite settings.

When you run this script, you can run a tcpdump on the receiving machine to see if the UDP packets are getting to the machine.

sudo tcpdump -tn port 8125

If your StatsD is installed on a different machine/IP than Graphite, you can also watch StatsD send of the data by running

sudo tcpdump -tn port 8125 or port 2003

This is especially helpful if you have not properly set up your Amazon EC2 security group settings. Be sure to open a UDP port for the traffic coming through.

How-to Install Graphite on Ubuntu

UPDATED TO WORK WITH GRAPHITE 0.9.9!!! (10/13/2011)

The new release of Graphite 0.9.9 includes an experimental Flot JavaScript graph. Awesome!

Steps to installing Graphite on Ubuntu -> gist.github.com
Ubuntu Graphite install screencast -> youtube.com

 If you are looking for a how-to on graphite one (CAD) or statsd this is not the place.

A few months ago I blogged abou how much I love stats. One of the things that I shared in that post was a blog post done by the etsy developer team about statsd and graphite to track everything.

This week I was able to get graphite setup on a dedicated Ubuntu 10.04 on my Mac using VMware Fusion. I thought I would share the steps I took so others might be able to save some time in their setup. In setting up apache I just copied over the default virtual host settings since graphite will be the only thing running on the server. If you are planning on having multiple virtual hosts on the machine then you will want to configure the virtual hosts differently.

####################################
# BASIC REQUIREMENTS
# http://graphite.wikidot.com/installation
# http://geek.michaelgrace.org/2011/09/how-to-install-graphite-on-ubuntu/
# Last tested & updated 10/13/2011
####################################
 
sudo apt-get update
sudo apt-get upgrade
 
wget http://launchpad.net/graphite/0.9/0.9.9/+download/graphite-web-0.9.9.tar.gz
wget http://launchpad.net/graphite/0.9/0.9.9/+download/carbon-0.9.9.tar.gz
wget http://launchpad.net/graphite/0.9/0.9.9/+download/whisper-0.9.9.tar.gz
tar -zxvf graphite-web-0.9.9.tar.gz
tar -zxvf carbon-0.9.9.tar.gz
tar -zxvf whisper-0.9.9.tar.gz
mv graphite-web-0.9.9 graphite
mv carbon-0.9.9 carbon
mv whisper-0.9.9 whisper
rm carbon-0.9.9.tar.gz
rm graphite-web-0.9.9.tar.gz
rm whisper-0.9.9.tar.gz
sudo apt-get install --assume-yes apache2 apache2-mpm-worker apache2-utils apache2.2-bin apache2.2-common libapr1 libaprutil1 libaprutil1-dbd-sqlite3 python3.1 libpython3.1 python3.1-minimal libapache2-mod-wsgi libaprutil1-ldap memcached python-cairo-dev python-django python-ldap python-memcache python-pysqlite2 sqlite3 erlang-os-mon erlang-snmp rabbitmq-server bzr expect ssh libapache2-mod-python python-setuptools
sudo easy_install django-tagging
 
####################################
# INSTALL WHISPER
####################################
 
cd ~/whisper
sudo python setup.py install
 
####################################
# INSTALL CARBON
####################################
 
cd ~/carbon
sudo python setup.py install
# CONFIGURE CARBON
####################
cd /opt/graphite/conf
sudo cp carbon.conf.example carbon.conf
sudo cp storage-schemas.conf.example storage-schemas.conf
sudo vim storage-schemas.conf
### edited storage-schemas.conf to be the following
[stats]
priority = 110
pattern = .*
retentions = 10:2160,60:10080,600:262974
###
 
####################################
# CONFIGURE GRAPHITE (webapp)
####################################
 
cd ~/graphite
sudo python check-dependencies.py
sudo python setup.py install
 
# CONFIGURE APACHE
###################
cd ~/graphite/examples
sudo cp example-graphite-vhost.conf /etc/apache2/sites-available/default
sudo cp /opt/graphite/conf/graphite.wsgi.example /opt/graphite/conf/graphite.wsgi
sudo vim /etc/apache2/sites-available/default
# moved 'WSGIImportScript /opt/gr..' to right before virtual host since it gave me an error saying
# WSGIImportScript cannot occur within <VirtualHost> section
# if this path does not exist make it!!!!!!
# /etc/httpd/wsgi
sudo mkdir /etc/httpd
sudo mkdir /etc/httpd/wsgi
sudo /etc/init.d/apache2 reload
 
####################################
# INITIAL DATABASE CREATION
####################################
cd /opt/graphite/webapp/graphite/
sudo python manage.py syncdb
# follow prompts to setup django admin user
sudo chown -R www-data:www-data /opt/graphite/storage/
sudo /etc/init.d/apache2 restart
cd /opt/graphite/webapp/graphite
sudo cp local_settings.py.example local_settings.py
 
####################################
# START CARBON
####################################
cd /opt/graphite/
sudo ./bin/carbon-cache.py start
 
####################################
# SEND DATA TO GRAPHITE
####################################
cd ~/graphite/examples
sudo chmod +x example-client.py
# [optional] edit example-client.py to report data faster
# sudo vim example-client.py
sudo ./example-client.py

Original installation instructions -> http://graphite.wikidot.com/installation

Looking to run an Ubuntu instance on EC2? Check out http://uec-images.ubuntu.com/releases/10.04/release/

Now you are ready to install StatsD!