My New Favorite Toys

OK, I’m going to admit it.  I tend to get really excited about Configuration Management (CM) type work and I have no idea why.  This is one of those.

Machine Images/Virtual Machines

Ok, these have been around.  If you don’t know what a machine image is, then stop and go download Oracle’s VirtualBox, because it is something that everyone should know.  These were revolutionary when they first were introduced.   So much so that most Operating Systems support some form of images (disk or machine) right out of the box.  Especially because a number of companies, including VMWare and Parallels, found out that they could manage your hardware better than the Operating System (which was originally supposed to do just that, but has really turned into something much more complex and more like a user interface). So, it turned out that if you used machine images, you could have a snapshot to a point in time. Sure, it still required some configuration after getting it going, but after that, it was cake. IT departments (and Dell/Norton, with their Ghost Image partition) were loving it. It really cut the mind-numbing monotony of setting up new boxes.

Puppet and Chef

Essentially, Puppet and Chef do the same thing.  Both start on the assumption that you have a base image installed on your box. Both represent a language that gives you the ability to install the software, users, and whatever else is necessary on a box to have it ready for tasking.  Both have claimed to support all major OS options.  This way, you could install the same users on the Windows boxes and Unix boxes in one script!  Of course the multiplatform argument is crap, but it still is a great option to finish what Machine Images started.

Take passwords for example.  Each OS handles this so completely differently that you would have to create a different module for the password for each OS.  Too much hassle.  Most companies are going to pick an OS and stick with it.  Heck, most are going to pick the same hardware too. This is the suggested use for almost all companies anyways.  Google, Yahoo, Amazon, etc. all use proprietary hardware.  But it’s THE SAME proprietary hardware.  Every machine has the same specifications.  (If you want, check out the Google server machines or the data center).  And I’m guessing most of them aren’t Windows boxes.  Just sayin’.

So, you create a new machine configuration for each type of machine.  One for your Web servers, one for the database servers, etc. Makes scripting all boxes that you might want to make really easy. Plus, in a cloud environment, like Amazon EC2 or privately held HDFS clusters, this makes setting up servers a breeze.

The difference between Puppet and Chef is their target audience.  Although they are technically competing products, both companies have pretty much stated that their real competition is the rats net of batch/shell scripts that you’ve probably written, or even better yet the documented instructions like the following.  We’ve all written these before.  And they even sometimes work.  Sometimes.

Vagrant

Another fun toy. So now, assuming you start using the Puppet/Chef to start requisitioning your servers, everything is great. Every server that gets started is always the same. Starts from the same image. Now you know that every server will run the same. Huzzah! But as every web developer knows, we don’t test enough for IE. Why? Because as a developer, I f’ing hate it. Because I don’t use it, I probably miss bugs.  Same applies to servers.  I’m missing bugs because I work in Windows or OS X, but deploy to a totally different environment.

Vagrant is a fun new tool that takes that really nice puppet script and image that you’d made, load it into a virtual machine, and run it in the background.  That way, you have the exact same environment that the server has, but on your local machine.  So, if you need to, you can ssh into it.  You can update your puppet scripts and push changes to it.  It also does port forwarding from your machine to your virtual machine, so that any exposed REST service or port is fully accessible via a web browser.  (If you want to play with it, the best install guide I found is here).

Now, you can avoid the annoying statement from your coworkers that is “Well… it works on my machine.”  Because I don’t care if it works on your machine.  Now, I only care that it works on the production environment.  You have it locally, so make sure to test it there.

Boxen

My new toys just got better.  Your IT department can now set up your computer for your project within minutes by using a new product called Boxen.  This is also based on Puppet and brought to you by the GitHub folks (who also brought you Hubot).  This software was originally designed to install project specific files and programs on OS X, but since Puppet is very much a OS independent tool, I’m guessing it will work on Linux (Good luck Windows guys.  Although Puppet might work, I doubt the tool will, but only time will tell.)

Overview

So, the tools are changing to help us stand up and deploy 1 to 1,000 servers with ease. Developers can run the exact same environment is working there. Now, we should wait and hope for Internet Explorer to give up on their web engine, much like Opera did (some say for performance reasons) and we might eventually get to a uniform presentation platform as well.  Wouldn’t that be nice?

ImpressNotes

A bunch of people enjoy the new Slide technologies that are coming out using HTML5.  You can check some of them out here at Html5Rocks.  Unless you are doing something fancy, though, you probably shouldn’t write all of the JavaScript to do this yourself.  This is for the same reason that you shouldn’t write a DOM manipulation tool yourself (cause #1 – don’t do work that you don’t have to do, and #2 - JQuery already did it and they did it better than you or I likely will.)  A little while ago, I posted about a friend using ImpressJS.  I got a chance to use it myself now.  It’s a really useful library that does the slide moving, using any number of 3D transforms (kinda like Prezi on crack*).  Also, my friend had coded against an older version.  The newer versions allow you to have triggers to kick off other pre/css and post/css, so if you want to do some cool transforms like Apple showcases, you can do that.

Also, something that my buddy noticed is that with any presentation anyone gives, you usually have notes to read from.  These are really helpful if you are the presenter and you need help remembering (that would be me) or for those viewing after the presentation has happened.  This is standard in a presentation tool like PowerPoint or Keynote.  I took some of the code that he wrote and modified it to be a bit less intrusive to the library, which follows a more Aspect Oriented approach.  So, if you ever need to use notes with your ImpressJs presentation, please feel free to use/modify the ImpressNotes project.  I still want to add a timer to it too, so I’ll probably tinker with it some more.

*Obviously, you’re going to still have to be a developer to use this, vs Prezi, which you can be non-technical.  So don’t get me wrong.  Not knocking Prezi.

SourceMaps are the new Sliced Bread!

What are SourceMaps?  Basically, it maps the code in your minified/obfuscated/compiled file to the original source code.

Think about that for a second.  If you are a JavaScript developer, you are constantly dealing with minified files, or in the case of some of the fun newer technologies, such as Google’s Closure Tools or CoffeeScript, you are actually compiling the code provided.  In each of these cases, it is changing from JavaScript to another form of JavaScript.  Most the time, once we start using the minified/obfuscated/compiled, we have no idea what’s going on and have to switch back to the “debug” version if we want to figure anything out.  And we assume that the Minifier/Compiler has done nothing wrong to our code in the process (sometimes a stretch, especially with some of the newer ones).

The SourceMap is a separate file that can be provided that will give general descriptions to help the browser map the files back to the original codebase.  That way, if you have issues in the compiled code, you step through the code, and the browser knows exactly where to put you in the debug code.  How sweet is that?

They are something simple that was developed by the Mozilla group (check out the mozilla SourceMap), that was gobbled up by Google Chrome as well because of how unbelievably useful it is.  Thanks to a fellow developer (Patrcik Gilmore) in Oslo, Norway, we now have this available in the Maven ClosureJavaScriptFramework Plugin.  So for anyone interested, feel free to start using the plugin.

Obviously, I didn’t provide a ton of information on how to use it.  Turns out there isn’t much out there yet either.  But, there is a nice link on how to use SourceMaps in your browsers at html5rocks.  Check that out and it should get you using it pretty quickly.  Another downside, it’s not supported by everyone yet.  But just you wait, everyone’s going to be jumping on this bandwagon.  There are just too many people that will find this useful.  So, if you are using some of these minifiers/compilers, put in a request to get that little .smap file added!

JavaScript primer

For those starting on JavaScript, I’m sorry.  This one’s going to hurt a little bit.  First off, I’d suggest you start with Pro JavaScript Design Patterns.  Learn everything about why it’s right.  Then throw it away.  Because you’ll never need the code presented in that book (it’s been done a hundred times in a bunch of libraries.)  But, the concepts in it are invaluable.  Also, it’s hard to find out what’s built in to all of the browsers.  I’d start here.  Hands down the best site for really learning JavaScript built in functions, though not as pretty as some of the others.  Then I’d move on to Mozilla, which is a lot to take in, but also amazing.

Typing in JavaScript is implicit and it is handled automatically.  All you do is say “var x = 5″ and it knows that x is an int.  It’s magic.  Magic that is hard to understand when stuff goes wrong.  Here’s an article on understanding type conversion in JavaScript.
http://jibbering.com/faq/notes/type-conversion/

Also, people in Java and C seem to love ternary operators.  I think it’s because everyone thinks it’s clever.  For a newbie, it’s hard to understand though, so I tend to avoid them in most cases.  However, JavaScript supports this, so you can be clever all you want in your code.  Heck, JavaScript allows you to be so clever that I know some folks that don’t know what their own code does once they are done with it.  Which is just awesome to support, by the way.  But I digress.  JavaScript also expands upon the ternary operator with the conditional-or (“||”) operator, which can be used in some pretty fancy ways.  For anyone interested in learning about the || operator in javascript:
http://addyosmani.com/blog/exploring-javascripts-logical-or-operator/

OK, a bunch of people don’t understand how scoping in JavaScript works.  One of the reasons for this is that most people are trained nowadays as Java developers (I myself was trained in C/C++, so I have my own set of issues…).  This is an article that explains closures, for all those that need help with it.  It includes the terrible “closure loop issue”.
http://robertnyman.com/2008/10/09/explaining-javascript-scope-and-closures/

Awesome site that allows you to code a little snippet and see if it works, as well as share with others. The coolest part is that you can include a bunch of the more commonly used libraries, such as JQuery, Dojo, ExtJS/Sencha, Underscore, and Raphael (plus a TON more, but I thought I’d throw out the big ones/my favorites).  You can even get a plugin or two for your IDE or text editor to throw it directly up there when having issues.
http://jsfiddle.net/

Well, that’s about it.  I just thought I’d share some resources for the beginners out there.

jQuery and ImpressJs

So my buddy did a JQuery rehash for people in our company.  In my opinion, it doesn’t need to be sold.  People like JQuery cause it is easy and the learning curve to do some things is easy.  It follows the old Perl mantra: “Try to make simple things easy, and complex things possible”.  Few folks can argue with that.

More interesting, in my opinion, than the subject material, was his choice of presentation tools.  He chose to use the Impress JS library. It functions like prezi, but with WAY more configuration options (pretty much anything you can think of doing to the DOM).

He posted his presentation on his website here and put the code up on GitHub here.

Maven WAR Filtering

So it looks like you can adjust your war plugin to use filtering, as such:

       org.apache.maven.plugins
       maven-war-plugin
       ${maven.war.version}
       
             ${deploy.directory}
             true
       

This will automatically scan your deployment discriptors, including web.xml.

So we put the following in a web.xml:

<web-app>
       <context-param>
             <param-name>ApiVersion</param-name>
             <param-value>${project.version}</param-value>
             <description>My API version</description>
       </context-param>
</web-app>

At which point you can use this in your JSP:

<% String apiVersion = getServletContext().getInitParameter("ApiVersion"); %>

This will then resolve in any jsp page you have, and you can just use the “apiVersion” variable in any way you want.