Free project planner and estimator tool

I ran into interesting tool today, it is a project estimator, task breakdown tool.

Screen Shot 2015-02-02 at 10.55.09 PM

First it is free to use and interface is a little bit rought, yet it does work and breakdown of the tasks is really well done. Providing estimates is bonus on top of that. Honestly when you look at this, you realize that for realistic estimates you don’t really need significantly more then this.

Screen Shot 2015-02-02 at 10.57.06 PM

Taking into account how many projects get started with less then this amount of planning, I find this tool very useful.

Prototyping is fun with Bourbon, Neat and Slim

I am working on my super-secret-awesome-project and prototyping is something I do a lot lately. I can say, it is not as easy as it looks to others, but it is great joy to make prototypes.

Anyhow, I was trying to focus on mainstream frameworks, like Bootstrap and Zurb, and those are definitely awesome, however my attention slips often to smaller offers.

So, I am playing with Bourbon which is Sass css framework, very simple, very awesome. Often for prototype you don’t need anything crazy like Bootstap and Bourbon is just fine.

So on this Bourbon has it’s own grid that you can add and it is called Neat. Great thing about Neat is that semantic grid, which means you will not use grid_8 or some other weird class name in your divs. I personally never had problem with those, I like those things exposed in source, so I don’t have to look in 7 files to understand how layout is created. Still, it is semantic and awesome, and we don’t even have to say it anymore, responsive.

From now on, anyone making anything that isn’t ‘responsive’ should emphasize that, instead of having to say this is some competitive advantage to have websites responsive.

We are professionals, the same how sites had to work in all browsers, they still have to do that and work across devices, that is just what has to happen. If you site isn’t doing it, that means it is old, pre 2008/9 or so.

Anyhow, back to my simple and awesome setup for prototyping. On top of all this awesomeness with Bourbon and Neat, I added Slim, templating engine that is very similar to Haml, but has even less to write, more clean html. When you combine expressiveness and cleanliness of Slim with Bourbon, you get awesome html that just sings like Pavarotti. It is feast for your eyes seeing html.

So this is what occupies my attention these days.

Prototyping applications

I am big proponent and fan of prototyping apps before they are built, I find this practice helps a great deal focus project, shorten time, increase quality of the code and ensure all participants have more fun in the process.

So benefits are:

  • Focus on the problem
  • Shorter development time
  • Fun for participants
  • Higher quality of codebase and application

As a rule, prototyping should be done by any tool that you are comfortable with, however obviously some are better then others.

While some people will use Balsamiq for prototyping, and it is legitimate tool, as a developer I prefer to have clickable prototype. A lot improved in the meantime, in terms of tools that are available. In the past, I would start prototyping using html and usually grid framework like BluePrint or . This was great, however now things are even better today thanks to several new developments.

Let’s first quickly cover the process. Prototype development starts with basic requirements, then pages are built, shown to customer/client who is available to give quick feedback, which is then rapidly applied and cycle is repeated. That way, a lot of flaws and inconsistencies can be discovered earlier then when you already spend 1000 dolars on development. Side benefit is that development of such application is also significantly easier because everything is clear, and you already get all the forms with names etc.

Now let’s talk about tools used. There is a lot of excitement over release of Twitter Bootstrap, a set of styles and javascript behaviours that you can include in your app to get you started. This is obviously fantastic tool for prototyping, but things got much better then that. Not only that we have Twitter Bootstrap, there are few others that are as good and worth mentioning.

Before you start prototyping, you should have simple way to play with your prototype. I find John Long’s Serve to perform great for such purpose, it is built for ruby projects, you can use haml, sass and coffeescript, all the good stuff.

So before you start, install Serve and start your project ‘like a Bos!’

Then pick your poison, there is Twitter Bootstrap with it’s styling to aid you to assemble your pages and flow:

However, there are also other options. One really good is Skeleton, framework whose goal was to make your app look good both in browser and on mobile device, as of lately Bootstrap is doing that as well, Skeleton is probably a tiny bit better still at it and overall is very clean choice for prototyping, Bootstrap sites all look alike.

Latest choice that I became aware recently is Foundation CSS. It is solid framework made specifically for rapid prototyping.

So, these are some essential tools to use for prototyping. Having a set of common defaults help a great deal when you are thinking about what will application do, not how it will do it. Things looking good, also help a great deal.

So now that you learned about these fantastic tools, let’s get prototyping!