Bourne Shell Script Commands

Here's a bunch of bourne shell script commands I use on a regular basis
Using variables

VARNAME=3
echo The value is $VARNAME

Concatenating a list of text files
This is most useful when the list of files is long.

files=(
a.txt
b.txt
c.txt)
for p in "${files[@]}"; do cat "$p"; done > output.txt

Check to see if file exists

if [ -f filename ];
then
echo "OK"
else
echo "ERROR: File not found"
exit
fi

Note that the spaces before the -f and after the filename are essential. Can be irritating if you forget!

Check to see if a directory exists

if [ -d directoryName ];
then
echo "Directory OK"
else
echo "ERROR: Can't find directory"
exit
fi

Checking a script is running on a particular machine

if [ "`hostname`" == "myhost.calvium.com" ];
then 
echo "this is the right server";
fi;

Note that the spaces around the [, == and ] are ESSENTIAL. This gets me every time..

Pop up a list of options - iPhone SDK

Here's a quick snippet for popping up a list of options using the UIActionSheet in iPhone OS.

What's slightly confusing is that the index of the 'cancelButton' is 1, and 'destructiveButton' is 0, even though 'cancelButton' is listed first in the initWithTitle selector. This gets me each time!

// place this code in a UIViewController subclass

- (void)debugButtonPressed:(id)sender
{
 UIActionSheet* action = [[UIActionSheet alloc] 
        initWithTitle:@"Menu" 
        delegate:self 
        cancelButtonTitle:@"Continue"
        destructiveButtonTitle:@"Quit" 
        otherButtonTitles:@"Debug",nil ];
 [action showInView:self.view];
 [action release];
}

- (void)actionSheet:(UIActionSheet *)actionSheet clickedButtonAtIndex:(NSInteger)buttonIndex {
 switch (buttonIndex) {
  case 0: // Quit
   NSLog(@"Quit");
   break;
 case 1: // Continue
   NSLog(@"Continue");
   break;
  case 2: // Debug
   NSLog(@"Debug");
   break;
 }
}

Converting between rgb and hex colors in javascript

Recently I've need to be able to convert between rgb and hex colors.

Here's the javascript functions I used.

function hex2Rgba(hexColor, opacity) {
            // Only accepts #123456 format for now
            if (color[0] === '#' && color.length === 7) {

                var r,g,b;
                r = parseInt(color.substring(1,3), 16);
                g = parseInt(color.substring(3,5), 16);
                b = parseInt(color.substring(5,7), 16);

                // 
                return "rgba("+r+","+g+","+b+","+opacity+")";
            }
            return null;
        }

Obviously this is pretty basic, and doesn't support the #123 format.

For converting in the other direction I found this code on stackoverflow..

function rgb2hex(rgb) {
 rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
 function hex(x) {
  return ("0" + parseInt(x).toString(16)).slice(-2);
 }
 return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}

Profiling Javascript Performance in Safari 5

We're currently in the process of building some pretty large and complex javascript apps here at Calvium. One of the parts of the system was running rather slower than it should have, so I took it upon myself to find out why. It turned out that all of the tools I needed to track down the performance problems were available right in the browser I was using - Safari 5 (and also Chrome, which shares the same engine) has an excellent Javascript Profiler available in the Inspector.
Using it is as simple as opening the page you want to profile, and in Safari, going to Develop / Web Inspector.
Once there, click the Profiles button and select 'enable profiling for this session'.

You can control the profiler by clicking the black circular 'record' button at the bottom left. When you stop recording you'll get a breakdown of the percentage of the time spent in each function. This can be handy, but often what you really want is to profile a very specific part of your app, for instance the process kicked off when a particular button is pressed.

Luckily there are some console commands you can insert into your Javascript to start and stop the profiler automatically.

Here's an extremely simple example. Here the goal is to find out which function is causing the slow operation of this script - is it slowFunction, or fastFunction? Guesses on a postcard please..

<html>
<head>
  <script type="text/javascript">
      setTimeout(function() {
          // start profiling
          console.profile("why so slow?");
          slowFunction();
          fastFunction();
          // stop profiling
          console.profileEnd();
      }, 2000);

      function slowFunction() {
          for(var i=0; i < 100; i++) { stuff();}
      }

      function stuff() {
          var count = 0;
          for (var i=0; i < 1000; i++) {
              for (var j=0; j < 1000; j++) {
                  count = count + 5;
              }
          }
      }

      function fastFunction() { var j = 23; }
  </script>
</head>
</html>

When you open this page in Safari and run the profiler you get the following output:

The entries in the 'self' column shows the percentage of the profile time the execution of that particular function took - excluding time taken executing other sub-function calls made in that function. Here we can see that 'slowFunction' only took 0.02% itself, but 'stuff' took 99.93%. Looks like 'slowFunction' itself doesn't need any optimisation.
The 'total' column shows the time including any sub-function calls made, and here we can see that 'slowFunction' takes a massive 99.95% of the program execution. We can discover why this is easily using the Profiler tool. (I know its obvious in this case, but imagine with a huge complex app!).

You can change the way the results are displayed from the default 'Heavy (bottom up)', which shows each function individually, to the 'Tree (Top Down)' view. The tree view shows the call stack, and the time taken for each function along the way. Using this we can quickly drill down to discover that 'slowFunction' calls 'stuff', and that's why it takes so long. You can also see how many times each function is run.

Using this technique, you can easily discover the parts of your app that need optimisation. I manage to speed up the screen loading of a part of our application by a factor of six by identifying one particularly slow function that was called a huge number of times.

There's more info on using the 'console' javascript API on the apple developer site

SVN Commands I Actually Use..

I thought that I should paste in a bunch of SVN commands I actually use on a regular basis, mostly so I don't lose them. Also, perhaps they'll be useful to someone one day..

See which files are changed in my working copy

svn status

See which files would be changed if I were perform an update (I call this 'query update).

svn status -u

Make SVN ignore a directory, such as an output or build directory
First cd to the directory contains the directory you want to ignore..

svn propset svn:ignore directoryToIgnore .

Show the last 5 log entries

svn log -l 5

Perform a commit of all changes in this folder, with a message

svn commit -m 'made app 20% betterer'

Add a file containing an @ symbol.

This is essential when adding hi-res iPhone 4 graphics to an XCode project, as these have the format myImage@2x.png, where the original file was called myImage.png. Essentially just add a @ to the end of the filename

svn add myImage@2x.png@

Using Lawnchair to save config data in a web app

Lawnchair, created by PhoneGap's Brian Leroux, is a simple wrapper to various local storage technologies such as the HTML5 local storage system or even cookies. You can store and retrieve Javascript objects or arrays with just a few lines of code.

We use Lawnchair quite extensively at Calvium. We currently have a few web apps for internal use designed to be run directly from the file system (I'll probably write some more blogs about this subject as it is quite an interesting problem). This is great as it means the web app can read local files using Ajax calls, but due to cross-domain restrictions it cannot send anything to a server. So we can't store anything such as user preferences on the server, so we need to store it locally.
This is where Lawnchair comes in..

The docs don't make a few things very clear, such as how you specify the 'adaptor' to use. This is how you tell the system where data should be stored - cookie, database etc. Here's where my example hopefully may help!



Here's an excerpt of the HTML file. You need to include Lawnchair.js (obviously), and LawnchairAdaptorHelpers.js, and the adaptor you wish to use (in this case WebkitSQLiteAdaptor).

<html>
<head>
   <!--lawnchair-->
    <script type="text/javascript" src="js/libs/Lawnchair.js"></script>
    <script type="text/javascript" src="js/libs/LawnchairAdaptorHelpers.js"></script>
    <script type="text/javascript" src="js/libs/WebkitSQLiteAdaptor.js"></script>
</head>
<body>
   <input type="text" id="myConfigInput"/>
</body>
</html>

(Note: here's a really handy little site for converting HTML example code into a format you can copy into blogger)

Here's the javascript..

 // create the lawnchair object, telling it to create a table called myapp, using the 'WebkitSQLListAdaptor'.
    var _lawnchair = new Lawnchair({table: "myapp", adaptor: "webkit"});

    // create the javascript object with my default data in it.
    var _config = {"userSetting":"", "key": "config"}; 
    // key is the string used to get the data out in the 'get' call below.

    // Load the config
    _lawnchair.get("config", function(r) {

        // If there isn't an item in the database with the 'config' key set, you'll get null. Make sure we don't overwrite the default!
        if (r !== null) {
            _log("LoadFileDialog: config loaded.");

            // TODO: might be better to merge..
            _config = r;

            // Update interface with the values we've loaded.
        }
    });
 
   // Note that the get function is asynchronous, so the get may not have completed by this point.

Conditional Compilation in HTML

I'm currently building a large and fairly complicated app using JQuery'd Javascript, HTML and CSS. To keep the javascript code manageable and maintainable, I've arranged everything into classes, with one class per javascript file, and the filename of the JS file matching the class name. CSS files quickly become unwieldy too, so I have a similar approach with these.
This makes remembering which file contains the code I want very easy, but of course it means my app has dozens of JS and CSS files. As all web developers know - lots of files means lots of requests to the server means a sloooow site.

So, obviously, the answer is to concatenate all your JS files into one long file, and then use a tool like Yahoo's Compressor to shrink the javascript file into a fraction of it's former size.

I make a shell script like this:

jsfiles=(
trees.js
toast.js
armchair.js
)

for p in "${jsfiles[@]}"; do cat "$p"; done > code.js

java -jar yuicompressor.jar -o release/code-min.js codejs

So this is all great, but it left me with an issue. While I'm developing and debugging, it's essential my page links to the dozens of original javascript files so I can trace errors back to the source files, and set breakpoints more easily. But I need a version of the HTML page which links only to the minified version of the javascript and css files.. For a while I did keep two versions of the HTML, but as the page got more complicated keeping two files up to date wasn't practical.

My solution was to implement a basic 'conditional complication' system - where I could mark parts of the HTML file as being debug-only, and other parts as release-only. I knocked together a build script that would take the original HTML, knock out the debug parts, and uncomment the release only sections.

<head>
    <!--DEBUG-->
    <script type="text/javascript" src="js/trees.js"></script>
    <script type="text/javascript" src="js/toast.js"></script>
    <script type="text/javascript" src="js/armchair.js"></script>
    <link rel="stylesheet" type="text/css" href="css/trees.css"/>
    <link rel="stylesheet" type="text/css" href="css/toast.css"/>
    <link rel="stylesheet" type="text/css" href="css/armchair.css"/>
    <!--ENDDEBUG-->

    <!--RELEASE
    <script type="text/javascript" src="code-min.js"></script>
    <link rel="stylesheet" type="text/css" href="style-min.css"/>
    ENDRELEASE-->
</head>
<body>
</body>  

Here's an example. Note that the release section is commented out - this means I can open the page directly and be in 'debug mode' with full access to all the script and css files via my browser's inspector.

Then it's a case of running a simple regex script (I used 'jsc', the javascript script engine built into Safari) to make the release version.

var i = arguments[0]; // the first parameter - e.g. the content of the HTML file

// Replace debug block with nothing..
i = i.replace(/<!--DEBUG[\s\S]*?ENDDEBUG-->/g, ""); // /g ensures EVERY match is replaced, not just the first. *? means use the smallest match (default is largest)
 
 // Remove comment around production
i = i.replace(/<!--RELEASE([\s\S]*?)ENDRELEASE-->/g, "$1");

Simple hey?

Syntax Highlighting in Blogger Posts

Code examples on web pages work so much better if you have syntax highlighting. Blogger.com doesn't have this feature enabled by default but it's easy to add.

Without..

 function foo(a,b,c) {
    return "Ugly!"
}

With..

function foo(a,b,c) {
    return "Good hey?"
}

Here's the tutorial I used. Thanks Luka Marinko.

PhpStorm - the best web development IDE out there

Back in my HP days I used to use a great plugin for Visual Studio called Resharper. It made a huge difference to my productivity - adding great code navigation tools (I could open a file, and jump to the function I wanted with just a couple of keypresses), code generation (Pop! There's another property with getters and setters. Pop! there's a try-catch-finally statement to wrap the 'dangerous' code I just wrote).
Since then loads of other IDEs (eclipse, netbeans) have added similar features to this, but none I've tried have been as smooth to use as Resharper was. For this reason I was quite excited when the company behind Resharper, JetBrains, launched PhpStorm and WebStorm. WebStorm is for Javascript, CSS, and HTML developers while PhpStorm includes everything in WebStorm but adds (predictably) PHP development.

Of the many, many cool features, here are some of my favourites:

• Super-clever code highlighting for Javascript. Every IDE does syntax highlighting, but WebStorm lets you know not only that something is a variable, but if it's global, local, a parameter, or even an implicitly-defined one (please avoid these, readers!). Very cool - and very handy for tracking down errors too.

• Code Navigation. You want to go to the function called 'doStuff' in the file called 'things.js'. You could use the mouse, scroll through your list of files, click the file, then scroll through to find the function you want... Or, you can press CMD-SHIFT-N, and type the first couple of characters of the filename, hit enter, then press CMD-7, and type the first couple of characters of the function name. Hit enter and you're done! With a bit of practice you'll be flying through your code. I'm a bit of a keyboard shortcut junkie - so this app is great!

I won't bore you with all the other cool things it does, but suffice to say I tried the demo, and liked it so much I bought copies for everyone in the company.

At the time of writing Jetbrains are doing a 'startup discount plan' where you get a 50% discount for new companies - this saved us a LOT of money so it's worth poking them if you take the plunge.

http://www.jetbrains.com

Equivalent to foreach in javascript

I happily developed in C# for a number of years during my time at Hewlett-Packard Labs. One of my favourite basic language features was the foreach function, for quickly iterating through the items in any type of collection.

foreach (MyObject ob in myObjects) {
   ob.doSomething();
}

I started developing seriously in javascript a few months back, and eventually discovered a similar function..

var list = ["a","b","c"];
for( var i in list) {
    console.log( list[i] );
}
// outputs a b c 

Now it's not quite so neat as the C# version, as you get the index of the element in the array, rather than the element itself. This means you need to use the index to get the element out of the array - the array[i] part here.

You can also iterate all the properties of an object too.

var ob = {a:1,b:2,c:3};
for( var name in ob) {
   alert( ob[name] );
}
// outputs 1 2 3

Run it here

However, there's a nasty gotcha with this approach. If someone anywhere in your javascript app, or any of the libraries it uses, or any code eval'd at runtime adds any properties or functions to 'Object' or 'Array' then your for in loop will return that property too!
This is of course, insane, but it's just how Javascript works. There's a great example of this problem if you use jsfiddle, a fab site for testing ideas using the 'holy trinity' of HTML, CSS, and Javascript. The libraries it uses add a whole bunch of stuff to Array including their own 'foreach' function.

Click here to see

Happily, there's a simple solution - just use the 'hasOwnProperty' method on an object to check that a property is not one inherited from the base class.

var foo = [1,2,3];
for( var i in foo) {
    if (foo.hasOwnProperty(i)) {
    alert( foo[i] );
    }
}​

Click here to see

This is just one of the odd things in Javascript that can mess you around quite badly if you don't know about it!

You need an answer to a development question, but you only have five minutes...

If you are a developer like me, you'll constantly be coming against new problems. Maybe there's a bug in an API you're using, or perhaps the documentation for a system just doesn't make it clear how to achieve a certain effect. If a google search doesn't suffice, then I tend to use an excellent site I stumbled across a while back.

http://stackoverflow.com

It's a collaboratively-edited programming question and answer site. You post a question (like 'How do I get the focussed element on a page using JQuery?', and people post answers. On the surface it appears just like yet another forum, but I reckon it's much better. The key thing the designers added is a points system - every user has a rating that is shown next to every question, comment, or answer. If you ask a question deemed sensible or useful to other developers - you get points. If you post an answer, and it's marked as the best answer to the question, you get more points.
This feature obviously appeals to the competitive / slightly obsessive compulsive among us - people literally race to answer your question as quickly as possible!
For example, my slightly thorny iPhone UITableView question was answered correctly in three minutes!

There's an equivalent to stackoverflow for server admins too http://serverfault.com. It doesn't seem quite so active as stackoverflow, but it's still a great resource.