CoffeeScript is nice. It provides syntactic sugar and adds tremendous functionality to the web developers tool-chest. Those who appreciate terse, yet readable and well formatted code; CoffeeScript will seem like a manna from heaven. I find that I am already looking at my JavaScript and refactoring it in my head to CoffeeScript.

On long road trips I generally have a few hours to kill while the rest of the family is asleep. I generally take this time to fire up some podcasts and/or tutorials and to learn as I drive. I actually look forward to this time as I can almost totally focus on the content.

This trip I decided to load my Galaxy Nexus with a metric ton of CoffeeScript screen casts (just audio) and podcasts. My intention was to get the basics out of the way and I accomplished that objective.

Since I’ve returned home, I have decided to stick with CoffeeScript and add a few more. I have decided that my code needs to tested more throughly. CoffeeScript has made testing a complete breeze.

I’ve also become a believer in dedicated, deliberate practice. One can constantly reuse the same patterns and never really push themselves to get better. However, those who deliberately practice techniques and patterns they are not comfortable with generally begin to excel faster than those who just put in the hours haphazardly.

I used this code kata with CoffeeScript and Jasmine.

Click the post image to see the passing tests!

Here is my solution:

The Spec’s in CoffeeScript

describe "StringCalc", ->
  describe "constructor with null", ->
    beforeEach ->
      @mystrCalc = new StrCalc()

    it 'replaces null with 0', ->
      (expect @mystrCalc.firstNum).toEqual 0

  describe "constructor with zero ", ->
    beforeEach ->
      @mystrCalc = new StrCalc('0')

    it 'replaces "0" with 0', ->
      (expect @mystrCalc.firstNum).toEqual 0

  describe "constructor with multiple numbers", ->
    beforeEach ->
      @mystrCalc = new StrCalc('1, 2, 3')

    it 'matches first arg to firstNum', ->
      (expect @mystrCalc.firstNum).toEqual 1

    it 'matches second arg to secondNum', ->
      (expect @mystrCalc.secondNum).toEqual 2

    it 'matches third arg to thirdNum', ->
      (expect @mystrCalc.thirdNum).toEqual 3

  describe "add method", ->
    beforeEach ->
      @mystrCalc = new StrCalc('2, 4, 6')

    it 'adds three arguments of StrCalc', ->
      (expect @mystrCalc.total).toEqual 12

  describe "add method with bigger numbers", ->
    beforeEach ->
      @mystrCalc = new StrCalc('20\n40, 60')

    it 'adds three arguments for big numbers and wacky delimiters', ->
      (expect @mystrCalc.total).toEqual 120

The implementation in CoffeeScript:

window.StrCalc = class StrCalc

  constructor: (myStr = 0) ->
    if myStr is '0' or myStr is 0
      @firstNum = 0
    else
      @parseMyNum myStr

  parseMyNum: (myStr) ->
    pattern = /(\d)+.*?(\d*)/gm
    result = myStr.match pattern
    @firstNum = parseInt result[0]
    @secondNum = parseInt result[1]
    @thirdNum = parseInt result[2]
    @add()

  add: ->
    @total = @firstNum + @secondNum + @thirdNum

Paste the CoffeeScript here to see what it looks like in JavaScript.

See, to me it makes perfect sense to do as much as one possibly can on the client. Knowing that the least amount of work one can do to get the best results is the perfect amount of work. I have always set out to get the maximum “bang-for-my-buck” as it were.

We are now seeing lots of posts titled: Should your web application be rich-client from day one? and decoupling front ends. Great reads to be sure, but to me this is common wisdom. However, I haven’t been a developer for as long as many of these developers so I don’t have the experience or historical perspective.

I do feel that this is a prime time for indie-developers, like me, to make a dent in the development world. If front end developers have invested a little time to become proficient with JavaScript they will have very little trouble transferring to the newer thick-client architecture paradigm. In other words, a front end developer can now realistically get a big project off the ground without a massive backend effort in parallel.

Don’t get me wrong, a masterfully crafted RESTful API is indeed a thing of beauty and generally bomb-proof. However, geting a “working” web app out the door without knowing the nuts and bolts of a massive server-side framework is within closer reach than ever before. Exciting!!!!

I would be lying if I told you this wasn’t exciting to me on a personal and professional level. I have been really focused on mobile and web for the last year and I hope some exciting opportunities extend from my efforts.

Example:

<ul data-role="listview"  data-bind="foreach: watched">
            <li data-role="list-divider"> Repo: <h3 data-bind="text: name"></h3>
                <ul data-role="listview" data-bind="foreach: watched">
                    <li><h4>Description:</h4>
                        <p data-bind="text: description"></p>
                <span class="ui-li-count">Forks: <span data-bind="text: forks"></span> - Issues: <span
                        data-bind="text: open_issues"></span>
                                          - Watchers: <span data-bind="text: watchers"></span></span>
                        <p> <h4>Language: </h4>
                        <p data-bind="text: language"></p></p>
                        <p> <h4>Owner:</h4>
                        <p data-bind="text: owner"></p></p>
                        <p> <h4>URL:</h4>
                        <p data-bind="text: url"></p>
                    </li>
                </ul>
            </li>
        </ul>

You will have to read the documentation as it makes some assumptions in regards to your project scaffolding and what-have-you. Seriously, read the documentation. You don’t have to trust me when I say its worth it, but it is.

So now that I found this script, I want to use it on every project. Once everything is set-up it is just so easy to run. I have forced myself to use it on trivial tests and what not. My lab page is a total work-in-progress and made with Twitter bootstrap. I thought I would show you how I integrated h5bp ant-build-script with it.

A screen shot of my folder structure inside webstorm:

As you can see, I mimicked the file structure that h5bp recommends in the documentation (RTFM, right?)

I then modified the project. properties file to include the changes you see here:

# project.properties file defines overrides for default.properties

# Explanation: This file should be created by each user as and when he or she needs to override particular values.
# Consequently, it should not be placed under version control.

# Stylesheets
#
# Note: Stylesheets will be concatenated in the order they are listed in the file.stylesheets property (i.e. the last
# file listed will be at the end of the concatenated file), so it probably makes sense to have the main style.css file
# as the first entry
# Example:
# file.stylesheets  = style.css, lightbox.css, plugin.css
#
file.stylesheets  = bootstrap.css, style.css

# Web Pages
#
# These are the pages (files) that will be served to users (.html, .php, .asp, etc). Files in this property will
# be minified / optimised and have any stylesheet or javascript references updated to the minified examples
#
# The paths need to be relative
#
# Files can be added in a comma separated form
file.pages        = toolbox.html, vacapp.html 

# Excluded files and dirs
#
# Add any files or directories you add to the project and do not want to be copied to the publish directory as a
# comma separated list
# These files are ignored in addition to the default ones specified in default.properties.
# Example: file.exclude = badfolder/**
file.exclude      = js/tests/**, style/less/**, 

# Bypassed JavaScript files and dirs
#
# Add any files or folders within the mylibs directory that you want to be copied to the publish directory as a
# comma separated list
# These files will not be concatenated or minimized and will simply be copied over as is.
# Note: you cannot declare an empty file.bypass property, it would exclude the entire mylibs folder
# Example:
# file.js.bypass = widgets.js, gadgets.js, gidgets.js
file.js.bypass = cafflab.js

# Directory Structure
#
# Override any directory paths specific to this project
#
# dir.publish
# dir.js
#dir.js.libs = js/bootstrap
#dir.js.mylibs = js/bootstrap
dir.css = style/css
# dir.img

Note: I’ve only included the actual changes to my file. The actual project.properties is a bit denser.

I haven’t gone all-the-way with the power of the build script thus far. As you can see, I am not fully concatenating my javascript and css files. However, they are fully linted, hinted and compressed which is better than nothing, I suppose. I will keep working and making refinements to this process, but I’ve seen the light with an intermediate build step in deployment. It is so full of win, that I can’t imagine doing it another way.

If you simply use build like I have, you will save a tremendous amount of time optimizing your pages for production. Once you see this in action… You will have a hard time turning back as well, I reckon.

Todo: Work out how to force the build script into nested directories for the manifest. Maybe even get a wild hair and attempt to write a pre build-build that analyzes the project structure.

I was having so much fun with the Github Api and my new found love of Git && Github that I to make something mobile!

It is definitely a work in progress. Don’t put in your API token. As of now I don’t have any features enabled that require it. So without further ado, have a play here:

The project comes with a heap of customization options and a full complement of Less files which compile down to CSS. If you haven’t checked out Less, you really ought to as it makes CSS dev much saner.

I have set-up a lab page for experiments, tests, projects-that-are-not-quite-done and my foray into game development. The Caffeine lab is built with Twitter bootstrap and is definitely a work in progress.

Check it out

HERE

aside – The result below is a real-time demo using the jinX wp plugin to inject javascript into posts

$( document ).ready( function () {
 
  var html = "";
  $.ajax( {
    url : "https://api.github.com/users/MichaelMartinez/watched",
    dataType : "jsonp",
    success : function ( returndata ) {
      $.each( returndata.data, function ( i, item ) {
        html += '<li>' +
          '<h3><a href="' + this.html_url + '">' + this.name + '</a></h3>' +
          '<ul>' +
          '<li>' + 'Description: ' + this.description + '</li>' +
          '<li>' + 'Language: ' + this.language + '</li>' +
          '<li>' + 'Updated: ' + this.updated_at + '</li>' +
          '<li>' + 'Owner: ' + this.owner.login + '</li>' +
          '</ul>' +
          '</li>';
      } );
      $( '#result' ).append( html );
    }
  } );
} );

Result:

Most of us deal with some aspect of our job/career that isn’t directly under our control. For those who do not know, I am a firefighter for a medium to large metropolitan fire department that is located 1.5 hours south of Phoenix, Az. There are many of aspects in my job that I have very little control over.

Recently, I was charged for three days of vacation time that I did not take. I have to admit that I caught the error by mistake as I generally glance at the number of hours without much thought. When I realized the error, I decided to go back and inspect the last six months and I found two more errors… Which prompted another 6 months of inspection and one more error.

I really don’t want to painstakingly evaluate and cross reference my pay stub to our staffing software for correctness every two weeks. That isn’t exactly my idea of a good time. So I wrote this little application that should, in theory, be my ever watchful vacation hour sentry. As a great by product of writing this app, I investigated several javascript MV* / MVVM frameworks and various libraries.

The libraries used for this app are:

1. Phonegap / Cordova – Phone version
2. Knockoutjs – MVVM Framework / Data Binding
3. jQuery Mobile – 1.0
4. jStorage – localStorage
5. Momentjs – JavaScript Date Library
6. Mobiscroll jQuery Mobile plugin
7. Zend Framework GData Library – PHP

The file tree and code are completely UGLY and it is not my prettiest work to be sure. So when you go snooping around the src remember I’ve been HACKING on this like crazy. I have three or four implementations of this app contained within the asset/www file so be sure to snoop around and look at the backbone version and vanilla jQuery mobile version.

I chose to go with Knockout for a variety of reasons for the main app. The big reason was that it works with my brain and I was able to accomplish a ton with very little boilerplate. I really eff’ing hate boilerplate. I watched several Backbone tutorials and I read countless lines of Backbone code and I was (am?) still pretty much lost. It made me work way too hard to get basic functionality. I had several “aha” moments with Backbone… only to have them stuffed in my pie-hole minutes later. Not a good experience but I plan on re-visiting Backbone in the future.

I’ll have several follow on posts regarding this app in the coming days. I will also spend some time styling this app as its is default to a fault right now using non-standard icons and Adobe Fireworks. I can post that as a tutorial if there is interest.

Here is the fully functional app (tested with Safari 5+, Firefox 9, Chrome 16 on Mac):