P is for Programming

Debugging CoffeeScript Line-by-Line

Jaco Pretorius — Tue, 14 May 2013 14:00:04 +0000

One of the main arguments against using CoffeeScript is that of debugging. CoffeeScript is compiled down to JavaScript before being sent to the browser which means we can only debug the compiled JavaScript version of our code, not the original CoffeeScript. Until now, that is.

Michael Ficarra’s successful kickstarter project to create a ‘better CoffeeScript compiler’ now allows us to generate source maps for our CoffeeScript. Google Chrome already supports source maps, which means you can now debug CoffeeScript right in the browser.

Example

Here is some very simple CoffeeScript that I’m going to try and debug.

eat = (food) ->
  console.log food

eat(food) for food in ['toast','cheese','wine'] when food isnt 'cheese'

I’m going to use the CoffeeScript compiler that is packaged through npm to compile the example. Version 1.6 (or later) has native support for source maps.

To compile with source maps, you simply need to pass the -m flag.

coffee -cm example.coffee

This will generate 2 files – example.js and example.map. More importantly, the compiler will put a comment in the JavaScript file to indicate to the browser where to find the source map file.

/*
//@ sourceMappingURL=example.map
*/

I created some very simple HTML to load my JavaScript.



  


  Example of CoffeeScript Debugging

The last step is to enable source maps in Google Chrome. Open up the developer tools and look for the settings icon in the bottom right.

Now if you look in sources you should see your CoffeeScript file and be able to add break points, hover to view variables, etc.

The problem of debugging CoffeeScript, the most popular and strongest argument for not using it in the browser, has been solved! We still can’t type CoffeeScript into the console, but that day can’t be far off. Happy coding.

How to Create a Patch with Git

Jaco Pretorius — Mon, 13 May 2013 14:00:48 +0000

Today I needed to transfer a few commits from my pair’s laptop to my own. Since git is a distributed source control system you can actually pull commits directly from any git repo (including someone’s local repo) – as you would from GitHub. Unfortunately this requires SSH access which we didn’t have on the (corporate) network we were on. I really wanted something simpler – I wanted to create a patch.

This is actually really easy to do with git. Basically git allows us to use the result of a diff statement as a patch. For example, if you have some local changes which are not yet committed you can run a simple ‘git diff’ to see the changes. If you want to package these changes as a patch you can simply pipe the result into a patch file.

git diff > changes.patch

Now you can apply this patch to any other repo.

git apply changes.patch

By modifying the diff statement it’s very easy to create the patch you want. In my case I wanted to package the last 4 commits as a single patch.

git diff HEAD~4 > changes.patch

Happy coding.

Amend Multiple Commit Messages with Git

Jaco Pretorius — Fri, 10 May 2013 14:00:56 +0000

Today my pair and I were about to push multiple commits when I realized we had forgotten to add the story number to all of the commit messages. Basically when I was looking at my git log:

git log --oneline

I would see something like the following.

e16f24e Fourth Commit
b4bbd67 Third Commit
57a2ca3 Second Commit
3790b98 First Commit

Our usual convention is to add the story number to the commit message. I knew that I could amend a single commit with ‘git commit –amend’, but I’ve never had to rewrite the git history like this.

To do this, we need to do an interactive rebase.

git rebase -i HEAD~5

Git will now show you the commits you specified – the last 5 in my case – in reverse order.

pick a8b8553 Previous commit message
pick 3790b98 First Commit
pick 57a2ca3 Second Commit
pick b4bbd67 Third Commit
pick e16f24e Fourth Commit

You now need to specify the commits you wish to edit – in my case this was the last four commits.

pick a8b8553 Previous commit message
e 3790b98 First Commit
e 57a2ca3 Second Commit
e b4bbd67 Third Commit
e e16f24e Fourth Commit

Git will now step through each of the commits you specified and ask you to make your changes.

Stopped at 3790b98... First Commit
You can amend the commit now, with

        git commit --amend

Once you are satisfied with your changes, run

        git rebase --continue

In my case I simply needed to amend each commit to change the commit message.

git commit --amend

After the message is changed you need to tell git to continue.

git rebase --continue

Do this for each commit and your history is rewritten!

90644d6 [Story #15] Fourth Commit
87006ff [Story #15] Third Commit
83de86b [Story #15] Second Commit
d35b899 [Story #15] First Commit

Happy coding.

Custom Sorting in AngularJS

Jaco Pretorius — Thu, 09 May 2013 14:00:45 +0000

Today I had to implement custom sorting in AngularJS. As with most things in Angular it’s very simple once you figure out how.

AngularJS has an orderBy function which can be used to sort a list of objects by any property. A common use case is when we want to sort by one of a few pre-determined sort orders.

Sort by a Property

As an example, let’s create a list of contacts.

function ContactListCtrl($scope){
  $scope.contacts = 
  [
    { "name":"Richard", "surname":"Stallman", "telephone":"1234 98765" },
    { "name":"Linus", "surname":"Torvalds", "telephone":"2345 87654" },
    { "name":"Donald", "surname":"Knuth", "telephone":"3456 76543" }
  ];
};

I can now easily display these contacts in a table by using the ng-repeat directive.


  
    Name
    Telephone
  

  
    {{contact.name}}, {{contact.surname}}
    {{contact.telephone}}

Name	Telephone
{{contact.name}}, {{contact.surname}}	{{contact.telephone}}

Now let’s add a select with 2 different sort options. As per the documentation, we can specify a property to sort by and optionally a + or – to specify ascending or descending.

Because we are using ng-model here we also need to specify a default sort order in our controller.

$scope.sortorder = 'surname';

Now we simply need to specify the orderBy clause in the ng-repeat directive.

You can see the full example in this jsFiddle.

Sort with a Custom Function

The documentation also says that we can sort using a function instead of a simply property. Let’s see how that would work.

I’m going to use the same HTML and contacts as before, but I’m going to change the ng-repeat directive to the following:

Now I’m going to implement a function called randomSort which will be used to sort the objects.

$scope.randomSort = function(contact) {
  return Math.random();
};

The function takes a single parameter – a contact object. The value you return here will be used to sort on, so you could combine any properties on the contact object to do the sorting.

You can see the full example in this jsFiddle. Every time you run the example you should see a different sort order.

Sort by a List of Properties

The documentation also says that we can sort by a list of properties. I’m going to modify my original example to sort by surname first and name second.

Again, I’m going to change the ng-repeat directive to specify an array of properties.

That’s all we need to do. You can see the full example in this jsFiddle.

As with most things in Angular, sorting is very simple once you figure out how. Happy coding.

C99 Initializer Syntax in Objective C

Jaco Pretorius — Wed, 08 May 2013 14:00:39 +0000

This week a colleague sent me a snippet of Objective-C syntax I had never seen before.

self.imageView.frame = (CGRect){.origin=CGPointMake(0.0f, 0.0f), .size=image.size};

This is (apparently) called C99 Initializer Syntax. This type of syntax can be used to initialize any struct in C (and Objective C) which is especially useful when working with CGRect and CGPoint.

The Syntax

Let’s take a look at the standard way of defining a CGRect.

CGRect frame = CGRectMake(60, 80, 200, 300);

I’ve never really thought about this, but the syntax only makes sense if you already know the order of the parameters and what they mean. This is not really an issue with CGRectMake – since you use this so often it’s impossible not to know the parameters – but it’s not ideal.

Take a look at the equivalent in C99 syntax.

CGRect frame = (CGRect){
    .origin.x = 60, 
    .origin.y = 80, 
    .size.width = 200, 
    .size.height = 300
};

This is much more readable and would be especially helpful if you were passing expressions instead of contants.

CGRect frame = (CGRect){
    .origin.x = (x / 2) + 60, 
    .origin.y = (y / 2) + 80,
    .size.width = x * 2, 
    .size.height = y * 2
};

What’s really nice about this syntax is that it’s not only more readable, it’s actually a bit safer. We can also write the following:

CGRect frame = (CGRect){
    .size.width = 200, 
    .size.height = 300,
    .origin.x = 60, 
    .origin.y = 80
};

We can also change the order of the parameters in the original struct without having to change this code. Obviously I’m not expecting the definition of CGRect to change, but it could be useful for your own structs or those of a library. (Remember that this syntax works for all structs)

The best usage of this syntax (in my opinion) is for when we want to specify the size or origin as a single value. For example, it’s not uncommon to do something like this:

CGRect frame = CGRectMake(
    self.view.frame.origin.x, 
    self.view.frame.origin.y, 
    200, 
    300
);

However, with the C99 syntax we can now write this:

CGRect frame = (CGRect){
    .origin = self.view.frame.origin, 
    .size.width = 200, 
    .size.height = 300
};

Which is definitely much more readable.

Default Values

Any parameters which are not specified will default to zero. So the following statements are actually equivalent.

CGPoint point = (CGPoint){.x = 0,.y = 0};
CGPoint point = (CGPoint){};

Using this syntax we can actually rewrite the original snippet I was looking at:

self.imageView.frame = (CGRect){.size=image.size};

Pretty neat.

Actual Usage

C99 Syntax can definitely be helpful in the right situation. Used correctly it can improve readability, used incorrectly it can make your code overly verbose.

Happy coding.

Mobile Web versus Native Apps

Jaco Pretorius — Tue, 07 May 2013 14:00:38 +0000

The topic of mobile web versus native apps comes up quite often. The typical scenario is that of a company who already has a web presence and wants to bridge the gap to be more engaging to mobile users. The challenge is then to decide which platform (or platforms) to support.

The company is now left with the decision of native versus mobile web (which includes embedded web implementations such as PhoneGap).

The Argument for Mobile Web

There are 2 scenarios where a mobile web approach is often seen as more appropriate:

Multiple platforms need to be supported (iPhone and Android, for example)
There is already an existing web platform which can be leveraged in a mobile effort

The mobile web approach also offers several advantages over a native approach.

Possibly the greatest advantage is having a single codebase to maintain. One codebase, one technology stack. This also offers the implicit advantage that a single team of developers would be able to maintain the entire mobile codebase. Even better, web developers can often be skilled up in mobile web development pretty easily making resourcing less of a problem.

Another advantage is the ability to apply updates instantly to all users, even multiple times per day. Facebook engineering manager Dave Fetterman described the approach at f8, Facebook’s developer conference, in 2011:

Being able to write it once today and ship it tomorrow? That is something that Facebook is really good at and that we love doing, and that is at the center of being able to move fast. Move fast has an implicit third clause – move fast, break things, and fix things fast. That is very difficult to do if you have already shipped your binary to Apple or Android and they have to download another version of it.

The technologies involved in building a mobile web experience are also very popular at the moment. HTML5 is a massive buzzword and JavaScript frameworks are numerous – all making the mobile web approach very attractice.

The Argument for Native Support

With all the advances being made in HTML5 and JavaScript you would almost expect native apps to become less popular. But that hasn’t quite been the case.

This month LinkedIn became the latest company to publicly switch from a mobile web to native approach. FaceBook’s switch to a native iOS platform is also well-documented. FaceBook CEO Mark Zuckerberg even went so far as to say the mobile web approach was “one of the biggest mistakes [FaceBook] ever made”.

There are several reasons why I think a native approach is superior and will remain superior for the foreseeable future.

The first and foremost is the user experience. No matter how much effort is made to the contrary, the mobile web experience is simply not nearly as good as the native counterpart. Mobile web applications often try to mimic a native application, but I have found that you will very quickly reach the limits of the technology.

The second reason is platform conventions. Each mobile platform – iOS, Android, BlackBerry, Windows Phone – has it’s own convention in terms of what UI elements (buttons, toolbars, etc) look like how interactions (transitions, popups, etc) work. This is typically what gives each platform it’s unique flavor and while it’s possible to mimic this (to a certain extent) for a specific platform it’s incredibly difficult (or maybe impossible) to do so for multiple platforms. For example, if we try and mimic an iPhone application with our mobile web approach the app will look and feel broken to an Android user.

The bottom line is that a native approach leads to a better user experience. It’s difficult to argue with this.

Asking the Right Questions

There are obviously still scenarios where a mobile web approach makes sense. For example, if you’re reading this blog on your phone you’re doing so on a responsive design. I can think of several websites which are optimized for mobile devices and work very well – Amazon, CNN, Kayak, etc.

There are some good questions to ask when deciding between a mobile web and native approach.

Do we really need to support multiple platforms? This seems like an obvious question, but I’ve been surprised by how many times the answer is no. For example, a client may simply want to be able to showcase the web application on an iPad. If the answer is no, the argument for a native application becomes much stronger.

How important is the offline experience? It’s important here to understand the common connectivity scenario for users – will the app be used on the subway or in areas where there is limited network connectivity? Or will the app only be used in an office setting where a strong wifi connection is always available? The more important the offline experience, the stronger the argument for a native implementation.

When thinking of mobile, think audience first, and determine what’s most valuable: the convenience of the web or the robustness of an app. Happy coding.

10 CoffeeScript Features You Might Not Know

Jaco Pretorius — Mon, 06 May 2013 14:00:04 +0000

This week I’ve spent some time researching different CoffeeScript resources to be used for training at a client. In the process I’ve discover a few CoffeeScript features that I didn’t know about or are not that well known.

Iterations

You probably know the standard way of iterating through a list in CoffeeScript.

for name in ['Tom','Dick','Harry']
  alert "Hi, #{name}"

But did you know that by passing an extra argument, you can also get the current iteration index?

for name, i in ['Tom','Dick','Harry']
  alert "Hi, #{name} - you are number #{i}"

Splatting

JavaScript (and therefore CoffeeScript) doesn’t enforce that you pass the correct number of parameters to a function. In this example the last few parameters will just get dropped.

planets = (first, second, third) ->
  alert third
  
planets 'Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter'
# alert will be 'Earth'

But did you know that CoffeeScript supports splatting?

planets = (first, second, others...) ->
  alert others

planets 'Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter'
# alert will be 'Earth','Mars','Jupiter'

Comprehensions

CoffeeScript also supports comprehensions – a little bit like the map function in Ruby.

class Person
  constructor: (name, email) ->
    @name = name
    @email = email

userEmails =
  tom: 'tom@example.com'
  dick: 'dick@example.com'
  harry: 'harry@example.com'

contacts = for name, email of userEmails
  new Person(name,email)

Destructuring Assignment

Destructuring Assignment is just a fancy way of saying we can assign multiple variables at once. You can use it to switch the value of two variables in a single line.

one = 1
two = 2
[one, two] = [two, one]

You can also use this to assign variables to the result of a function.

date = ->
  [25,'April',2013]

[day, month, year] = date()

It even works with deeply nested objects!

person =
  name: 'John'
  email: 'john@example.com'
  address:
    street: [
      '123 Main Street'
      'Apt 8B'
    ]
    city: 'Gotham'
    zip: '8442'

{ address: { street: [_, apartment], city } } = person

Destructuring Assignment combined with Splatting

Destructuring Assignment also works when combined with Splatting, which gives you another powerful way of dealing with arrays of variable length.

daysOfTheWeek = "Monday,Tuesday,Wednesday,Thursday,Friday,Saturday,Sunday"

[first, rest..., last] = daysOfTheWeek.split ','

Chained Comparisons

CoffeeScript also allows us to do Chained Comparisons (borrowed from Python) – which allows us to easily test if a value fall within a certain range.

temperature = 72
niceDay = 82 > temperature > 68

Block Strings

You probably know that CoffeeScript supports string interpolation (using the same syntax as Ruby).

name = "John"
surname = "Doe"

greeting = "Hi, #{name} #{surname}"

But did you know that JavaScript supports block strings? This is very useful for formatted or indentation-sensitive text. The indentation level that begins the block is maintained throughout, so you can keep it all aligned with the body of your code.

html = """
       
       Hi, #{name} #{surname}
       
       """

Prototype Shorthand

You probably know that @ is the shorthand for accessing this in CoffeeScript. But did you know that CoffeeScript has a similar shorthand for accessing the prototype of a class?

String::pipeDelimited = ->
  @split '|'

alert "ABC|abc".pipeDelimited()

Binding Parameters to Properties

CoffeeScript allows us to bind parameters to properties directly by using the @ shorthand. For example, you often want to set properties in the constructor.

class Person
  constructor: (name) ->
    @name = name

But we can just bind this property in the function declaration. CoffeeScript is the only language that I know of that allows you to do this.

class Person
  constructor: (@name) ->

Class/Static Functions

The @ shorthand also allows us to define class functions.

class Number
  @random: ->
    return 4  # chosen by fair dice roll
              # guaranteed to be random
              
alert Number.random()

My random implementation is a reference to XKCD.

Happy coding.

Resources for Learning CoffeeScript

Jaco Pretorius — Fri, 03 May 2013 14:00:48 +0000

CoffeeScript is a little language that compiles down to JavaScript. I’m a big fan of JavaScript, but it’s definitely a very quirkly language. CoffeeScript eliminates some of those quirks and brings JavaScript’s syntax more in line with languages like Ruby and Python.

The Little Book on CoffeeScript

If you’re just starting out with CoffeeScript a great resource is The Little Book on CoffeeScript. This book will only take about an hour to read but will step you through the ideas behind CoffeeScript, the syntax, compilation and common pitfalls. It’s a great resource and it’s free.

Js2coffee

Next up you’ll probably want to start playing around with CoffeeScript. Js2coffee is a great resource here – it allows you to convert regular JavaScript files to their CoffeeScript equivalents. This is an excellent sandbox where you can see the difference between JavaScript and CoffeeScript.

Js2coffee is also available as a NodeJS module – this is particularly useful if you’re migrating a project from JavaScript to CoffeeScript.

$ npm install js2coffee
$ js2coffee file.js > file.coffee

CodeSchool

If you’re looking a bit more structure to your CoffeeScript learning head over to CodeSchool. They have a 6-part series titled ‘A sip of CoffeeScript’ that guides through all the syntax and pitfalls of CoffeeScript.

I especially like this series because it really covers all of CoffeeScript. This is another great resource and it’s free to members.

CoffeeScript.org

The last resource for learning CoffeeScript is – no surprise – the official CoffeeScript website. Here you will find documentation for the NPM CoffeeScript module as well as an in-depth breakdown of CoffeeScript syntax.

CoffeeScript is a great language and it’s definitely worth it (and easy) to learn. Happy coding.

Switching to Mac – Two Years Later

Jaco Pretorius — Thu, 02 May 2013 14:00:42 +0000

Two years ago I became a Mac user.

It was a pretty bold move for me at the time. At that point I had been doing mainly C# development for almost 5 years – all of it on Windows. It was the combination of great hardware and software that convinced me to take the plunge and switch to the Mac platform.

I was in the market for a new laptop and the MacBook Pro was a very attractive prospect – both because of the aesthetics and because the hardware is so well-balanced. More importantly, I had been working on a Dell for the previous two years and I couldn’t stomach the thought of continuing in the same direction.

This was also at a time when I wanted to get serious about Ruby development. I had done quite a bit of Ruby already, but I was getting increasingly frustrated by the experience on Windows. Most of the tools were barely supported on Windows and the community was also heavily focused on the Mac/Unix platforms.

I’m going to look at 3 categories of use for my laptop – as a development environment, as a general workstation and for gaming.

Development Environment

The Mac is the most versatile development environment available. I feel pretty confident in this statement – the only real contender here is Unix, but OSX is required for iOS development. In the past two years I have done Ruby, Rails, JavaScript, Python, Haskell and iOS development on my MacBook. I even did 6 months of C# development via Bootcamp!

In my experience the performance on a Windows machine will generally degrade over time. The more applications you install, the slower it gets. OSX doesn’t seem to suffer from the same problems. Startup time is still lightning fast – on the rare occasions that I do need to restart. I also don’t miss the 5-minute startup time on Visual Studio.

General Workstation

Apart from doing development there is obviously a multitude of other tasks I do on my laptop – blogging, reading, watching movies, listening to music, online chat, etc. Ten years ago you might have struggled to find OSX-versions of some of the software you use, but not today. Even Microsoft Office is available on OSX – and works really well too!

The only culprit (that I can think of) is Skype. Skype for OSX is simply terrible – and unfortuntely every update seems to make it worse. Perhaps Microsoft believes that at some point we will all abandon OSX in order to use Skype on Windows.

Gaming

I’m not a very avid gamer, but I still like to kick back and kill some monsters once in a while. Luckily for me my favourite game is Diablo 3 – which is available on OSX. Unfortunately for pretty much everything else you need to use Windows. I don’t think I would recommend a MacBook Pro to a hardcore gamer.

My Next Laptop

My next laptop will be a 15″ MacBook Pro Retina. No doubt about it. I know it’s an expensive machine, but in my experience it’s worth it. I can’t even imagine using anything else.

Two years ago I became a Mac user. I’ve never looked back. Happy coding.

P is for Programming

Debugging CoffeeScript Line-by-Line

Example

Example of CoffeeScript Debugging

How to Create a Patch with Git

Amend Multiple Commit Messages with Git

Custom Sorting in AngularJS

Sort by a Property

Sort with a Custom Function

Sort by a List of Properties

C99 Initializer Syntax in Objective C

The Syntax

Default Values

Actual Usage

Mobile Web versus Native Apps

The Argument for Mobile Web

The Argument for Native Support

Asking the Right Questions

10 CoffeeScript Features You Might Not Know

Iterations

Splatting

Comprehensions

Destructuring Assignment

Destructuring Assignment combined with Splatting

Chained Comparisons

Block Strings

Prototype Shorthand

Binding Parameters to Properties

Class/Static Functions

Resources for Learning CoffeeScript

The Little Book on CoffeeScript

Js2coffee

CodeSchool

CoffeeScript.org

Switching to Mac – Two Years Later

Development Environment

General Workstation

Gaming

My Next Laptop

Top Reads for April