Typical

On getting sidetracked, and learning a few new tricks

Last week, just when I was looking into getting some tickets for a flight to LA, I stumbled across this article, about the best time to buy airline tickets. The author suggested not to buy tickets to far in advance. In fact, you're probably best of if you buy tickets just 45 days or six weeks in advance.

Whenever something involves a date, I Ctrl-Option T to Fantastical. However, this time Fantastical wasn't able to make any sense of the things I tried.

six weeks before July 15
> Nothing

Now, the easiest thing I could have done, and probably should have done, is to open the calendar, and just manually page six weeks back to find the date when I should book my flight. But I didn't. It just felt like something that should be easy, and I couldn't stand doing it 'the hard way'. So I decided to do it 'the easy way', and create an application that mimics some of the things Fantastical does, but includes support for resolving:

six weeks before July 15

Typical

So I created Typical. In Typical you enter a moment in time, optionally preceded by what you want to do around that time. Once Typical recognizes it, it offers you a way to add that event to your calendar.

And where's the fun in doing it using the tools you're most familiar with? I decided that if I wanted to do it, I should at least learn about a couple of new things. Here are some of the things I learned.

Jade

I pushed for using SCAML on my current project. It's Scala's approximation of Ruby's HAML, which I already used a couple of a years ago. In case you don't know it, you better give it a try.

What I found: Jade is supposed to be drier than HAML (and therefore also SCAML). I found I could get used to the syntax quite easily. The only thing that didn't really seem to make an awful lot of sense is that the examples use commas , to separate attributes inside tags. That's weird, considering Jade's claim to be ultimate DRY template language.

meta(name='…', content='…)

The SCAML version would have been:

%meta(name="…" content="…")

The thing I did like about Jade is the way it handles layouts. Definitely a lot more readable than the SCAML version.

Brunch

Brunch is my new preferred tool for building my web projects. Here are some of the reasons why I prefer Brunch over Grunt.

  • It's a better name.
  • It's way easier to configure; in fact, there's hardly any configuration involved at all.
  • Getting some type of task included (like SASS compilation) is normally as easy as an npm install -S <some package>. And that's it.
  • It relies on Bower for dependencies of my client side artefacts. That means I can add a dependeny on Foundation by typing bower install -S foundation, and be done by it. All CSS and JavaScript is getting concluded automatically.
  • And since Brunch knows about all of these dependencies and all of the files it produces, building an appcache is easy: as easy as typing npm install -S appcache-brunch.
  • It will continously update a running application with every change you make to your application, and also reload it in your browser.

Some of these things are also supported in Monkeyman, but Brunch is faster and much more streamlined.

A couple of things that I didn't really like:

  • Finding the plugin that does what you want is hard. (In my case, I didn't really care about Jade plugins being compiled to JavaScript and included in my JavaScript files. Finding a plugin that didn't do that turned out to be hard.)
  • Changing the layout of a Jade plugin doesn't automatically reload or invalidate the file using the layout. I can see why: Monkeyman has the same issue. But still, it would have been nice if it would have been aware of that dependency.
  • Occasionally, I had to restart Brunch without really understanding why that was needed.

Brunch skeleton

The first thing you need when starting a Brunch project is find a skeleton: the basic layout of your Brunch project. There are quite a few out there, but of course none of them completely meets your needs. (Insert a line about the not-invented-here-syndrom here.)

So I started out booking a flight, but now I felt like I needed a Brunch skeleton, and I definitely needed my own. Ended up creating one, and it's now here, called Light Brunch. It includes only Jade and CoffeeScript compilation and Foundation.

Date parsing library

I figured I wanted to have something that is as simple as possible, so if there was a date library already out there taking care of some of the hard bits, that would be great.

I looked into a bunch of options:

Eventually I picked Sugar.js. I don't like the fact that it augments the existing dates built into JavaScript, but it had the parsing routines that took care of some of the hard bits, and had better support for it than the other libraries. One of the nasty surprises it had that the operations to change the date a couple of hours, weeks, days or months forward or backward were actually modifying the underlying date object. Ugh. Is it because I got used to immutability so much now I didn't see it coming? In any case it took me a while to figure out what was going on.

Icons

I needed some icons. I wanted to have the ability to install the application on the home screen of my iPhone and iPad. But that required an icon. Finding which icons I need to have was quite hard. And then finding a tool that would bake me the versions I needed was even harder.

I first purchased Icon Slate, since it was recommended by the guy who invented Markdown. It's no good. For some reason, it refused to generate the images on the scale I needed. I kept trying it over and over, until I figured I needed a solution and didn't need spending hours on figuring out how to use Icon Slate, when really all I wanted was to figure out when to book my flight. So I purchased iConvert Icons, which worked instantly.

icons