The Chromebox and me

I had to take the macbook in for repairs and so I’m without it for a day or two. I set myself up with the chrombox we have in the office to see what it was like – not having files locally, developing in the cloud (with azure), and so on.

I don’t use a roller suitcase when I travel. I use aduffelwith a shoulder strap. And, my 15” macbook pro from 2012 is the difference between that bag being light and it being heavy. So, I’ve thought from time to time that a chromebook laptop could be a better computer for business trips.

Usingthe chromebox (desktop computer) for a day gave me the chance to see if I could get by on essentially little more than a web browser. I’ll describe two use cases here.

  1. Software development via github and azure.
  2. Writing this very post

Software dev (now this is cool)

This is more a demonstration of Microsoft Azure than anything else. I have my websites hosted there, because it’s really, really easy – especially for the amateur like myself. Also, it’s free because Chris and I have a BizSpark subscription from starting YourSigma.

One of these projects, College Itinerary, broke because I went fiddling around with the database structure (in MongoDB, hosted on MongoLab). Here’s what doesn’t work. You’re meant to add colleges that you want to follow by searching for their name:

Screenshot 2015-03-11 at 2.49.21 PM



Upon selecting that college, it should show up just below the search bar in a collection of colleges you follow. It should show the name, picture, and number of application requirements for that college. But, here’s what you saw instead, before I fixed it:

Screenshot 2015-03-11 at 2.49.37 PM



No good.

So, I don’t have my local files, my local github repo. I can’t create one, andI wouldn’t be able to run the app locally anyway – you can’t run node on a chromebook. Development has to happen in the cloud.

Step 1:

Go to azure and create a new website, I’m calling it “collegeitinerary-dev”. It’s so simple:

Screenshot 2015-03-11 at 3.26.56 PM

Then, go to “configure”:

Screen Shot 2015-03-23 at 10.31.37 AM



Go back to the dashboard and wait for a couple additional options to show up at the bottom of the “Quick Glance” menu:

Screen<em>Shot</em>2015-03-23<em>at</em>10<em>48</em>11_AM

Then, welcometo the awesomeness of visual studio online:

Screen<em>Shot</em>2015-03-23<em>at</em>11<em>00</em>02_AM

I’m pointing to the config file and reference (in app.js) because you have to add that file manually – it’s ignored by git. Assuming you’re not sharing all your secret keys and database passwords publicly on github.

Optimize azure dev?

I have a grunt script that will consolidate all my javascript, minify it, then “rev” it, meaning a random number gets added to the file name so the browser knows to get a different file, makes it hard to spot changes. The script will also bring all my templates/partials into one file and “rev” that too. Thisis important because angular (or the browser, I’m not sure actually) will cache partials and you won’t change the names of those files, so updated files won’t get fetched. But, it is pretty difficult to spot flaws in the production environment, which Azure is, by default (process.env.NODE_ENV == ‘production’).

My solution to this dilemma was this. Go back to the “configure” pane in Azure and create an “app setting” variable:

Screen Shot 2015-03-23 at 11.11.37 AM

Then, in app.js check for process.env.NODEENV or process.env.AZUREDEV before rendering the production html or ejs view.

Screen Shot 2015-03-23 at 11.11.21 AM

The reason not to just overwrite the NODE_ENV variable is that I still wanted to use the production database (there isn’t one at “localhost”), and so on.

Alright! Now that I’m going to make my changes, check them out athttp://collegeitinerary-dev.azurewebsites.net/, and when I’m satisfied, I’ll push it to git. The production site has a hook into github, so it will automatically pull changes, and I should quickly see the improvements at collegeitinerary.com.

Now I think that is awfully slick. Well done, Microsoft. I was talking to a representative of Google’s Cloud Platform at SXSW, and we agreed that it is a shame Google won’t cater to the NodeJS crowd, for one. I also applauded what Microsofthas done with Azure – they’ve definitely stepped up to the plate. Of course, we can thank Google or Amazon for raising the bar and making it a good fight.

I subscribe to the web service newsletters for the web services provided by Google, Amazon, and Microsoft, just to see them try to outdo each other, with features like Visual Studio Online or with price drops. It’s interesting to see – when one company drops prices, usually the others follow suit pretty quickly, in a matter of weeks.

Anyway! That was awesome. Not really a testament to the Chromebox. As a matter of fact, throughoutall the NODEENV and AZUREDEV talk, it was a small nuisance not having a caps lock key on the Chromebox keyboard. What?!

Writing this post

  1. To get the feature image for this post: went to dribbleand searched for “cloud freebies”; downloaded a psd from Max Bailey; since I can’t use Adobe photoshop on a chromebook, I went to the chromewebstore and searched for “psd”.Screenshot 2015-03-11 at 1.49.59 PM
  2. Had to relearn some shortcuts, because there is no “command” key on a chromebook. So that means googling things like “how to take a screenshot on a chromebook”.
  3. Then, with Pixlr Editor, I touched up a different image, also from Max Bailey.Screenshot 2015-03-11 at 1.48.46 PM
  4. I took a photo of my setup, shared it into dropbox, and because there’s no dropbox desktop app (like there is for Mac or Windows), I had to downloadit throughthe web app:Screenshot 2015-03-11 at 2.20.29 PM
    IMG<em>20150311</em>111314
  5. That’s it. Nothing too tedious, but not too seamless either.