Recent Posts

Getting up and running with Amber

published Dec 08, 2011

I was quite excited by Yehuda Katz’ announcement of Amber.js this morning. I had been intrigued by SproutCore, but hadn’t really liked how big it felt. So, when Yehuda said “If you played with SproutCore and liked the concepts but felt like it was too heavy, give Amber a try”, I listened.

The following is mostly just notes of what I learned. It’s not at all complete, but it should get you up and running and get you something to play with quickly.

Getting it on your machine

Assuming that you have git, Ruby 1.9.2 and a recent version of bundler installed, this is pretty straightforward. So, use rvm use 1.9.2 or the rbenv equivalent if you need to. These commands should do it:

    git clone https://github.com/amberjs/amber.js.git
    cd amber.js
    bundle install
    rake dist

This will create sproutcore.js and sproutcore.min.js in the dist directory.

Creating Hello World

Now that we’ve got the Javascript files, we can make a new project skeleton for a hello world app. We want to end up with an helloworld.html file where we put our HTML, and a javascripts directory where we put some JS files to include.

mkdir hello_world
cd hello_world
mkdir javascripts
touch helloworld.html
cd javascripts
wget http://code.jquery.com/jquery-1.7.1.js
ln -s jquery-1.7.1.js jquery.js
ln -s <path-to-sproutcore.js>
cd ..

Okay, we’re all set now.

The first thing we’re going to do is create a SC application (it’s still called SC right now, presumably this will be renamed to Amber sometime soon) and a Planet model. We’ll then instantiate an instance of this model and show it off on the page.

Edit helloworld.html to look like this:

<html>
<head>
<title>Hello World</title>

<!-- JavaScript includes -->
<script type="text/javascript" src="javascripts/jquery.js"></script>
<script type="text/javascript" src="javascripts/sproutcore.js"></script>

<script type="text/javascript">
HelloWorld = SC.Application.create();

HelloWorld.Planet = SC.Object.extend({
  name: null,
  star: null,
  position: 0
});

HelloWorld.currentPlanet = HelloWorld.Planet.create({name: 'Earth', star: 'Sol', position: 3})
</script>

</head>
<body>

<script type="text/x-handlebars">
  Hello {{HelloWorld.currentPlanet.name}}!
</script>

</body>

</html>

Let’s go through that step-by-step.

First, we load up jquery.js and sproutcore.js. Make sure to load jquery.js first or things will blow up.

Next, we set up our SproutCore (again, presumably soon to be Amber) application with

HelloWorld = SC.Application.create();

For now, I’m thinking of this as a name-space for the app.

Next, we make our Planet class.

HelloWorld.Planet = SC.Object.extend({
  name: null,
  star: null,
  position: 0
});

This sets up a planet with name, star and position attributes. The values of the hash are the default values.

Finally, we create an instance of a planet with HelloWorld.Planet.create, passing in a hash of attributes and assigning it to HelloWorld.currentPlanet.

That’s the end of the script.

Now comes the crazy part. We put a Handlebars template in the body tag, and it gets processed by Amber and stuck in to the DOM. The part inside the double-curly-braces gets replaced with what you would expect: the name of the planet we created. Also, it is bound to HelloWorld.currentPlanet, so any time the name of the planet changes, our view will change.

Play around with the demo.

Try opening up your JavaScript console and changing the name of the planet (hint: HelloWorld.currentPlanet.set('name', 'Venus')).

Hooking up a form

Okay, that’s useful, but we can’t expect our users to open up JavaScript consoles. Let’s hook our model up to a form.

To do this, we’ll create a view and a template. Notice that we’re taking a short-cut here and skipping the ‘C’ part of the MVC triumvarate. This is not a good idea, of course, but I’m getting tired and I don’t want to make this post too long.

The view is going to be a simple text field, so we’re going to extend SC.TextField. Put this at the bottom of your script block in the head of the HTML:

HelloWorld.PlanetNameView = SC.TextField.extend({
  insertNewline: function() {
    var value = this.get('value');
 
    if (value) {
      HelloWorld.currentPlanet.set('name', value);
      this.set('value', '');
    }
  }
});

And put this below the handlebars template in the body of the HTML:

<br />
<script type="text/x-handlebars">
Rename the planet: {{view  HelloWorld.PlanetNameView id="planet-namer" placeholder="Pluto"}}
</script>

Here’s a demo to play around with.

I think that’s it for now. So far, this is looking pretty fun and magical.

Speeding up Jekyll Generation

published Nov 18, 2011

One of the only complaints you’ll see out there about Jekyll is that when sites get bigger, it starts to slow down.

Luckily, this is easy to fix. Unfortunately, it’s apparently not obvious as you still see people complaining about it. Here’s my attempt at proselytizing for Jekyll :).

If you run jekyll --help, you’ll see that there’s a --limit_posts option. If you set this to 1, then you’ll only re-generate your most recent post when you save. This is usually exactly what you want. If you’re working on a slightly older post, then bump it up to 3 or 4.

Like this:

 jekyll --limit_posts 1

I’ve put this in a rake task

    namespace :jekyll do

      desc "start the jekyll server in auto mode"
      task :server, :num_posts do |t, args|
        num_posts = args[:num_posts]
        cmd = "jekyll --auto --server --pygments"
        cmd += " --limit_posts #{num_posts}" if num_posts
        puts "running #{cmd}"
        exec(cmd)
      end

    end

So I can start Jekyll like this:

rake jekyll:server[1]

and only see the current post, and it’s blazing fast.

Opening up ports to your security group on EC2

published Nov 18, 2011

Say you have a cluster of EC2 instances that you want to be able to talk to each other, but you don’t want everyone in the world to be able to join in on the conversation. For example, I was just setting up a typical cluster of servers:

A rails app server
A DB server
A daemon server
A DB slave

I want all of these servers to be able to talk to each other over port 3306 (the MySQL port), but I don’t want the whole world to be able to connect over port 3306.

You need two things:

A security group
Your EC2 user id.

Assuming you have your ec2 command line tools set up already, here’s how you would do it. This will create a group called yoursecuritygroup with ports 22 (ssh), 80 (http) and 443 (https) open to the world, but with all other ports only open to other computers in the same security group.

$> ec2-create-group --description "yoursecuritygroup production" yoursecuritygroup
$> ec2-authorize yoursecuritygroup -p 22
$> ec2-authorize yoursecuritygroup -p 80
$> ec2-authorize yoursecuritygroup -p 443
$> ec2-authorize yoursecuritygroup -o yoursecuritygroup -u 1234-1234-1234

You need to add your user id here in place of 1234-1234-1234. You can find this by going to https://aws-portal.amazon.com/gp/aws/developer/account?ie=UTF8&action=access-key and scrolling to the bottom. You want your AWS Account ID.

Now when you spin up your instances, make sure to start them in the yoursecuritygroup group using the --group argument:

ec2-run-instances --key your-key --group yoursecuritygroup --block-device-mapping /dev/sda1=:100:false --instance-initiated-shutdown-behavior stop --disable-api-termination --instance-type m1.small  ami-a7f539ce

And you should be all set.

Multiple Google Analytics Tracking Codes on one Page

published Nov 11, 2011

Say I want to make it so that Leanpub authors can get Google Analytics information about visits to their page while still sending the info to our Leanpub analytics account. This is pretty easy to do, but finding out how took me a bit of googling.

Your google analytics script for a normal, single tracking code looks something like this:

      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-1234567-1']);
      _gaq.push(['_trackPageview']);

      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();

That’s all fine and dandy, but what if you want to have two codes in there?

Turns out it’s pretty simple. You add another set of _gaq.push lines, right after the current ones and before (function() {. Something like this:

      _gaq.push(['account2._setAccount', 'UA-1234567-1']);
      _gaq.push(['account2._trackPageview']);

The account2 part can be anything you want. In fact, you can stick in a bunch of them if you want, resulting in something like this:

      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-1234567-1']);
      _gaq.push(['_trackPageview']);
      _gaq.push(['account2._setAccount', 'UA-1234568-1']);
      _gaq.push(['account2._trackPageview']);
      _gaq.push(['account3._setAccount', 'UA-1234569-1']);
      _gaq.push(['account3._trackPageview']);
      _gaq.push(['account4._setAccount', 'UA-1234570-1']);
      _gaq.push(['account4._trackPageview']);

      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();

Nice!

More info can be found here: http://code.google.com/apis/analytics/docs/tracking/asyncUsageGuide.html#MultipleCommands.

How big is a Googol, anyway?

published May 14, 2011

A friend of mine told his son that a Googol is a huge number. My kids caught on, so now I hear googol used in conversation all the time.

You know, like this:

I could eat 100 chocolate Easter eggs!

I could eat 1000!

Oh Yeah? Well, I could eat a googol!

A googol is 10¹⁰⁰. That’s 1, followed by 100 zeroes. It’s a ridiculously big number. It’s a number purely designed to awe the imagination. It’s not really useful in real life.

After hearing googol-bombs dropped all the time like this, you sort of get inured to it. A couple of days ago, though, I started thinking about how big a googol really was. My friend (the same one who brought googol in to my life) and I tried to think of something where googol was a reasonable scale, and came up blank.

Huh.

So, the question I want to ask is: is there anything that has a googol of it in the universe?

Let’s start with some standard “big quantity” things.

The number of grains of sand on the earth.

I don’t really care about accuracy here. So, I’ll just google it. The first answer says

There are seven quintillion five quadrillion grains of sand on all the beaches of the world. That’s a 75 with 17 zeros following!

So, in scientific notation that’s 7.5 x 10¹⁸. It’s a big number, but we’re nowhere near close.

How many stars are there?

Okay, let’s up the ante a bit. Another quick google search yields this answer:

With this simple calculation you get something like 10²² to 10²⁴ stars in the Universe. This is only a rough number, as obviously not all galaxies are the same, just like on a beach the depth of sand will not be the same in different places.

Obviously, these numbers are nowhere near big enough. Surely the number of atoms is going to be bigger.

How many atoms are in the universe?

From the Wikipedia article on the Observable Universe (which is a wealth of numbers for making these kinds of calculations):

two approximate calculations give the number of atoms in the observable universe to be close to 10⁸⁰.

We’re getting closer!

Well, it may feel like it, but we’re still ridiculously far off. We’re off by a factor of 10²⁰. That’s part of the mind-bend of playing around with googol. The biggest number we’ve come up so far with is 10⁸⁰. That means we’d need 10²⁰ universes just like ours to have a googol of atoms. Yikes!

How many particles are in the universe?

So, if we ask how many particles are in the universe, the number of fermions (things that make up matter, like protons and neutrons and electrons) isn’t going to get much larger than the number of atoms. Most of the universe is made of hydrogen, which has one proton and one electon. Even if we pretended that the atoms in the universe were made of some heavy element (say, Uranium), and then break the protons and neutrons up into their component quarks, we’d only add two or three orders of magniture to the number.

Okay, so what about photons and neutrinos and stuff like that? Well, I found something here:

Of course, besides material particles there are also lots of photons and neutrinos flying around the Universe. It is estimated that there are about 1e9 times as many photons and neutrinos as atoms in the Universe.

So, that gives us ~ 10⁸⁹. Closer, but still off by a factor of 10¹¹.

It looks to me like our initial goal of finding something tangible that had more than a googol of it has failed.

Just for fun, let’s make one more calculation.

Packing the universe with sand

Okay, let’s go crazy here. Remember the grains of sand in the earth question we started with? Let’s pretend we pack the whole universe with grains of sand. Yeah, the whole thing. Ignore questions of gravitational collapse and turning the whole universe into a giant black hole of what used to be sand and all that.

So, from that same Wikipedia page on the observable universe:

The observable universe is thus a sphere with a diameter of about 28 billion parsecs (93 billion, or 9.3 × 10¹⁰, light years). Assuming that space is roughly flat, this size corresponds to a comoving volume of about 3 × 10⁸⁰ cubic meters.

Cool! So that means, based on our number of atoms in the universe number above, there’s 1 atom for every three cubic meters in the observable universe. That’s not enough! Let’s see what happens if we pack the whole thing with sand.

This page here gives a reasonable estimate for the size of a grain of sand. The number they come up with is 8 per cubic millimeter. Let’s make life easier and round that up to 10. That means we’ll get 10 grains/mm³ X 10⁹ mm³/m³ = 10¹⁰ grains/m³. Multiplying that by the volume of the universe (and if you’re feeling bored, think about how crazy that phrase is…) gives us 10⁹⁰ grains of sand.

That’s right, if we fill the entire universe with grains of sand we’d still need 10¹⁰ universes to get a googol grains of sand.

Hmph. Okay, but how many atoms would that be?

To make things easier, let’s just make the universe one giant silicon crystal. Silicon has a density of 2.3 g/cm³ (again, Wikipedia is our friend), or 2.3 x 10⁶ g/m³. Silicon has an atomic mass of 28 g/mol (the stable isotope of Silicon has 14 protons and 14 neutrons).

So, a cubic meter of silicon has

 2.3 x 10⁶ g/m³ / 28 g/mol X 6.022 10²³ atoms/mol

 = 

 4.95 X 10²⁸ atoms/m³

Ooo, we may be on to something here.

Multiply that by the volume of the universe:

 4.95 X 10²⁸ atoms/m³ X 3 × 10⁸⁰ m³ = 1.48 X 10¹⁰⁹ atoms

= 1.48 X 10⁹ googol atoms!

We did it!

We had to make a ridiculous assumption that could never happen, but in the end managed to get a number that was bigger than a googol.

Phew.

What did I miss?

Thanks for reading this far.

If you’re interested, upvote it on hacker news.

What did you think? Is there any reasonable number of real-live countable things in our current universe that has more than a googol? Perhaps if we include gravitons, or dark matter, or something like that?

Also, this post was written in about an hour in a coffee shop, so I’m sure I’ve made errors. Let me know if you find any!

scottpatten.ca