How I built Progress App – Time Tracker

Identify the Problem

I’d like to think that I’m no different than most of the developers out there. We identify a problem that we encounter and automatically begin thinking of possible solutions.

My problem was a simple one, this time. I wanted to start a side-project ( if you must know – it failed half way through ), but this time, after reading a couple of articles about side-projects, I decided to pay attention to how much time I spend on my side-projects. And I’ve always wanted to know just how much time does something take up exactly. It’s easy to think “ohh it will take me just 3 days”, then spend almost 2 weeks on a project (like when building this application), and finally just loose track of your time completely ( for example now I have no idea how long did it actually take me to build the Progress App ), sure I can do some simple date-hour-calculation “I worked from A date to  B date about C hours a day, which means that I worked D hours”, but that is just not good enough, and it gets even worse when you have a very flexible schedule (like I’ve always had), because you manage your own work. I don’t want to repeat the “3 days to 2 weeks” mistake ever again! Without simple time tracking, I know that I will get lost again and again. This just had to stop!

Search for a Time Tracker

If I would build an application for each problem that I encounter, I would have a lot of problems and close to no solutions. Instead I use the search and gladly buy solutions. My initial search was on the Android Market, because I own a Samsung Galaxy S3 ( we’ll come to the “How did an Android app become an iPhone app?” question later ), and I was confused. Not a single application did that seemingly simple thing. Sure, there are time trackers for all sorts of things, egg timers, running-tracker buddies, freelancer time trackers (like harvest), etc. I didn’t need all that complexity. I wanted a couple of labeled chronometers. Was it too much to ask ? I guess so.

I must admit, that I might have ignored a couple of applications out there. But even if I have, it just means that I reached a certain level of frustration and decided not to bother anymore. Moreover, they probably didn’t fit to my “Simple application” criteria,  because really, I was going to give somebody a 1$ for a simple application, nobody wanted my $.

Define a Solution

After all the frustration, the defining the solution was easy. A simple application that lets me  time my projects/tasks. Emphasis on simple. And of course I should be able to delete tasks, edit the labels and reset their timers.

Right now I’m timing how long does it take me to write this article. I called the timer “Writing Article”. When I’m done with writing, I’ll just stop the timer and see how long did it take me to write all this. The next time I’ll write an article, I’ll reset the timer and see how long is that article going to take. And so on. This was the solution I was looking for.

Fixing The Problem

For the past year I’ve been building applications with Appcelerator Titanium, which has been a very… let’s say “dynamic” experience, but I’ll talk about that another time. For now – all you need to know is that Titanium promises a solution to build cross-platform applications, and because I’m no good in Objective-C (and because I have an Android phone) I decided to build my application in Titanium (with JavaScript). So I did.

Android Idea, iPhone App

What started out as an idea for the Application for my Android phone had just shifted into an iOS Application idea. How? It’s simple, really.

From my experience Android market is a poor place (in comparison with Apple App Store). Applications just don’t sell, users are dissatisfied a lot more, and paid applications aren’t popular. Even further (I know I said I wouldn’t talk about it here) Titanium is just no good for Android. All that combined, and I just didn’t see the value of investing another 25$ for a marketplace membership (which isn’t expensive at all, after Apple’s 99$). 

Even further. Android applications require a lot more work, not just because of Titanium, but because of Android. Android is a nice, open operating system, but it comes with it’s own set of problems. For example if you think responsive design is hard, try doing responsive apps, that have to account for all the different screen sizes and systems that the application should be run on. I have no idea how real android developers actually get by.

So I had an idea for Android App, I built it for iOS, and I’m using it alone (with 2 other peeps) on my Android, because after all, I wanted to track my time!

 

Conclusion

My girlfriend is a Designer/Illustrator, so I had it easy. I asked her to make a nice icon/splash screen and the UI Design. We gave the design a lot more thought than I initially anticipated, but in the end, I think we built a nice little application.

At this point, I’m not sure if I am ever going to publish the application on Google Play store, because of (again) Appcelerator Titanium, the application isn’t just as responsive as I’d like it to be (as in – you have to wait a few ms until a tap event is registered) . I believe that the application should provide value if it’s being sold, and I think that the slight lag (that I’m okay with, but I didn’t buy the application from someone else) defeats the feel of the application a bit. But releasing it for free on Android market wouldn’t just be fair to iOS users, so – Android, you lost yet another app.

It took 6 days for App Store to approve my application, so here it is:

Progress App Icon 

Progress App: https://itunes.apple.com/us/app/progress-app/id594906155?ls=1&mt=8

 

Sublime Susy

Sublime Susy 0.1

I just uploaded my initial commit to Github with snippets for the Compass Susy Grid system.
This is version 0.00001, which means I have no idea if I’ve made spelling errors or forgot something, but we’ll fix them over time, right ?

I hope that in the future we can add in some auto-completion for Susy variables, etc, but for now, I hope that you’re going to like my Susy Snippets

Var_dump sucked.

Why I didn’t use var_dump() for a long time, even though it has very valuable information in it ?  You most probably guessed it. It looks terrible. Even when you fix it with adding <pre> tags around it, it’s still ugly.

Consider this code:

Well it is turned into this:

Plain var_dump

It’s ugly! It’s so ugly! There are no other words for it.

So I could never talk myself into using it, and because of that for the past few years, I did a print_r(), wrapped in those “pre” tags.

Until I saw a screencast by Jeffrey Way on Laravel, and I saw the single most beautiful var_dump in the history of mankind.

Pretty var_dump

Look at it! It’s so pretty! It’s the same data, but so much has changed!

So I wanted it too. After some googling, I found out, that it is a PHP Extension (that anyone can install) and not a Chrome extension (which was my initial guess). It’s called Xdebug, and you can get it at http://www.xdebug.org and you’ll probably want to read more about the installation ( http://xdebug.org/docs/install )

In addition, I initially thought, that I’d have some difficulties installing and setting Xdebug up, since I’m a MAMP user (I like graphical interfaces and all that good stuff, I just can’t help it, that’s why I am so excited about Xdebug after all). Turns out, that I was wrong (again).

Enabling Xdebug on MAMP (Pro) is as simple as, well – enabling Xdebug on MAMP (Pro). All you really have to do is:

  • Open MAMP
  • File -> Edit Template -> PHP -> PHP (your-version).ini
  • Go to the very bottom and uncomment the Xdebug extension (remove the semicolon at the beginning of the line), like so:

  •  Restart MAMP

And That’s it! Enjoy!

 

CoffeeScript Blows. Minds.

Was looking for a simple way to write an alternative of PHP’s in_array() function in JavaScript, and since I’m using actually writing CoffeeScript, decided to look there as well. And sure enough. Mind Blown.

 

Turns into

 

 

 

Get Attachment ID from media_sideload_image()

Problem

In this scenario,

The $image variable now returns the full HTML, like this (with single quotes for some reason)

Which isn’t so bad, unless we want to get Just the image URL, or maybe the Thumbnail URL, or just the attachment ID.
Here is how to do it.
More

FireSass with FireBug for FireFox.

Finally Nex3 released an “official update” in FireFox Addons. I’m not sure, but as far as I know the functionality still remains the same, and nothing actually had to be updated, except “FireFox compitability version” setting. There were “hacks” around (get the github version, change a line, be happy).

Crazy browser Versions

The Add-on was “outdated” for a while, just because FireFox is spitting new “major” versions every day now. I guess that is some bad influence of Chrome. In my opinion the “higher number” doesn’t really matter in the browser version, and if someone were to argue that it does, then I’d say that FireFox is still 8 versions behind chrome at the moment (what an outdated browser, meh?). Version updates (like from Version 1 to Version 2, or 3) should be with some visible significance! It doesn’t apply to Chrome, as Chrome does it in the background anyway. It doesn’t ask you if you want chrome 18 or chrome 29 or chorme 441, it just updates, and doesn’t break your extensions!

Safari is now what, 5.4 ? I wouldn’t think for a second that Safari is an “outdated” browser (even though the version number is smaller than IE6).

Anyway. I think Mozilla got it wrong there, and I’m just ranting here, because it broke the plugin at the Extension Directory, and I was lazy enough to not to compile one for myself.

What is FireSass ?

By now, I’d expect you know what is SASS, and you probably have guessed I like SASS.

Well, in short – FireSass does this:

See on the right ? It says “_type.scss (line 40)“.

Well that is because of the FireSass plugin. I can now see where the selectors “actually” came from, so this really helps when debugging with SASS. It doesn’t even mention that the only CSS file I’m using is called “style.css”, because CSS at this point is useless (for development) as I use SCSS exclusively. When looking something up, I’m interested in where did something come from in SCSS, and FireSass helps a ton with that!

Great, how do I get FireSass ?

Easy as pie.

First, you download & install the addon (you have to have FireBug first of course)
Then you go to your project you want to use FireSass with and set it to “emit debug info“.

If you’re using an app to do that, great – use that. If not, then you can look in the FireSass github page what steps you should take.

Don’t worry. It’s supersimple.

Basically what the GitHub pae says is that if you’re using SASS from Terminal, you add “–debug-info” to the watch statement.
If you’re using Compass and SASS, find the config.rb file, and add:

Dashes and Underscores in Variables – SASS

“Why aren’t my variables working properly in SASS/Compass ?”

Well, one of the reasons could be Underscores and Dashes in SASS (and therefor Compass as well). In case you’ve missed it – a little quick tip.

Quick Example

Compiles to

Say what ?

In SASS it doesn’t matter whether your variable has an underscore or a dash – they work both ways. This is something to be aware about. Trying to get two different variables (one with a dash and the other with the underscore) would be a bad practice anyway, but now you know you actually can’t 🙂

Mixins, functions too…

This doesn’t apply only to variables. You can define your mixins and functions one way, and call them the other way.

But just because you can, isn’t a good enough reason to start doing that.

But CSS Doesn’t do that…

One might argue, that SASS (SCSS) is aimed to be as close to CSS as possible, and it is. A valid CSS file is a valid SCSS file as well. But dashes aren’t considered the same thing as underscores in CSS!

I think the answer is simple: “some people like underscores, some like dashes”. That’s it.

For example I use underscores most of the time, as it is much, much easier for me to copy-paste variables from one place to another (double-click variable name with underscores, selects the whole variable name, instead of just one part in Sublime Text)

In the end

I think this is actually very useful, as I can (for example) use the whole Compass framework using underscores instead of dashes (which are used by default in Compass), and everything will work properly, as it is meant to.

Ruby on Rails and MAMP PRO – It’s a jungle out there.

Introduction

If you’re looking for the how to, and have no intention reading my rambling, go on and scroll down a little bit 🙂

So I’ve started learning Rails for a while now. I’ve been exploring a lot in the world of ruby and rails. Found tons of interesting stuff, watched a lot of screencasts, graduated from Rails for Zombies, and much more, but now, about a week ago I decided to finally get my hands dirty on my own Mac OS X Lion, and thats where it all started. Finally, today I decided not to give up and finish setting up Rails.

MAMP PRO Is a pit of bugs.

I develop with PHP a lot, and MAMP Pro has worked for me flawlessly up until now. I love the nice graphical interface I get to manage my local domain hosts (myproject.dev/), etc. and probably because of that I’ve managed to overlook all the bugs (for example not being able to reboot/shutdown my mac, until I’ve force quitted MAMP), but this day changed my perspective a little bit. But that is not what this story is about.

 

MAMP PRO and Ruby On Rails

This is the part where it got bad. At first, I thought – hey – wouldn’t it be nice to run Rails with the same MySQL server as MAMP, but hey – MAMP has moved MySQL installation to their local directory. Not only that, but it is missing files, so I can’t compile Ruby gems to install with MAMP.

So I went ahead and searched. I found some useful posts, or at least at that moment I thought so, about MAMP And Ruby: [ Article 1 ] , and [ Article 2 ] , but all I did was screw up my system.

In the end, I wish in all the hours I spent on Google, that I found a blog post like this one. It turns out, installing MAMP Pro and Ruby On Rails, and setting them up is super-duper-easy.

 

How to install Ruby on Rails 3.2.1 with Ruby 1.9.3 and MAMP PRO 2.0.1

First of all. If you don’t already have MAMP or MAMP PRO on your system, and you don’t have any intention of using PHP, stop reading this article. You don’t need MAMP Pro. Period. Take a look at POW and Brew. That’s all you need.

For the less fortunate – I assume you already have MAMP Pro, and have tried running gem install mysql2 without any success.
I use RVM, and if you don’t then I guess you have to be careful, and before certain commands need a sudo (like sudo gem for example), I’ll be writing about the RVM process, and yours shouldn’t be much different, just tweak it a little accordingly.

First, make sure you get to this point:

[plain]

~ ruby -v
ruby 1.9.3p0 (2011-10-30 revision 33570) [x86_64-darwin11.3.0]
~ rails -v
Rails 3.2.1

[/plain]

Now that we’re on the same page this is what you do.

First install brew. Here is their installation documentation: https://github.com/mxcl/homebrew/wiki/installation
Basically all you need is this command:
[plain]mkdir homebrew && curl -L https://github.com/mxcl/homebrew/tarball/master | tar xz –strip 1 -C homebrew [/plain]

Now, MAMP stands for Mac- Apache, MySQL and PHP. I know you (and I) have MySQL already installed, but that isn’t going to cut it, as I said before – MAMP has moved MySQL to a different location. Even their mysql.sock file is somewhere else, so we’re going to install another MySQL on the system with

[plain] brew install mysql [/plain]

Now that you have MySQL – Just install the mysql2 gem

[plain] gem install mysql [/plain]

 

You also might want to make an alias for the mysql.sock file, which MAMP has also moved for us, by running:

[plain]sudo ln -s /Applications/MAMP/tmp/mysql/mysql.sock /tmp/mysql.sock[/plain]

 

I would also suggest that you take a look at POW, it is a great, tiny, rails server for local development. Here is some information on Stack Overflow.
Thats it. I hope this helps you with MAMP and Rails, it sure as hell would helped me.

Cheers.

 

 

 

 

Fix: MySQL MAMP PRO – Neverending “Loading”

So Today I encountered a weird bug in MAMP PRO 2.0.1:

After doing a restart of MAMP PRO, MySQL was loading, but didn’t load. None of the settings were accessible, even after I killed everything and restarted it. This happens when you add a new “host”, and don’t specify the file-path (“Disc Location”). To get out of the loop here is what you have to do:

  1. Start MAMP PRO
  2. Open Terminal
  3. Enter: /Applications/MAMP/bin/stop.sh

Whola!

p.s. Ohh, and if you’re not to happy about using a Terminal, easy pie. You just have to actually go to your MAMP folder in Applications, open up “bin” folder, and double clickaty on your “stop.sh”. (opening Terminal is a little quicker though…)

Blankwork 1.1

I’ve been working on the next step and bugfixes (yes, I found them) while working on the additional screencasts for Blankwork, and I’ve accidentally moved Blankwork to version 1.1

I really hope I will be able to publish it soon. Until then, – I’ve made the first (out of 3) screencast on Blankwork. This one is a “teaster trailer” kind of a video. I’m not doing much of explaining here, I’m rather just doing a quick show&tell how blankwork works.

Any feedback is very welcome on the video, so tell me if you have any thoughts about it :).