Stay focused and get stuff done

Programming with babyA little over two months ago my wife and I had our first child. I has been an amazing experience, and has changed my life forever. The biggest thing that has changed for me is I don’t have any time or energy anymore! I used to be able to work all day, hang out with the wife, get back to programming, get to bed about 2 am and wake up at 7 or 8 am and do the whole thing all over. Now it seems like 8 pm hits and I am ready for SLEEP. This lack of time and energy has actually been a huge eye opener for me, and I feel like I am more focused, and actually getting more done in less time. I wanted to share my simple strategies for staying on task, and hopefully they can help you out.

Write out your tasks

It doesn’t matter if you are planning on working 1/2 hr or 12 hrs, write out what you need to accomplished. I work in an agile dev environment so I’m used to having my user stories/ tasks laid out, but I never planned out my day in this way. It is extremely helpful and having a  plan helps me stay focused. It also makes me feel like I’m getting stuff done when I can cross stuff on my task off.

Try to remove distractions

I work from home, and when I’m in my office and the door is closed its like I’m not in the house. There are obvious exceptions, like if the baby became a poop/vomit fountain and my wife needs assistance or the house is on fire, but if its something small it can wait until work is done.

Reddit (Your internet weakness)

I have a serious reddit addiction, and its crazy how fast minutes can turn into hours and hours into days browsing reddit. It’s not just reddit though, working as a web developer and being online all day can be challenging  especially if you are self employed, work from home, or don’t have a boss that is able to see your screen. There is a great chrome extension called stay focused that can block sites and is really configurable.

Don’t forget to take some time off

One of the worst things that can happen to your productivity and overall mental well being is getting brunt out. This is one of the most challenging things for me to do. I am always thinking about work, and wanting to get a little extra work in to help get ahead in a project. I’ve found that when I do take one or two days off I am focused and ready to get work done.


Building mobile apps with AngularJS: Ionic Framework powered by Angular

A couple weeks ago when wondering the web I came across an exciting new HTML 5 mobile framework that is powered by angular, and looks pretty cool! Its called the Ionic framework. It’s still in alpha, but it looks very promising, and here are some of the highlights from their website.

  • Fast and responsive
    With minimal DOM manipulation, zero jQuery, and hardware accelerated transitions, one thing is for sure: you’ll be impressed.

  • Powered By AngularJS
    Gives a great MVC architecture to you apps! I’m a huge fan of angular and this really is the reason I’m trying out this framework.

  • Built with SASS
    Easily style you app with sass!

  • Documentation / Guide
    Has complete documentation  and guide that will help you get up to speed quickly.

  • Yeoman Generator for Ionic
    Yeoman is a great scaffolding tool to make your app development even quicker!

I haven’t been able to get into a complex app yet, but just playing around with it and creating basic demos I’m very impressed. Definitely check it out if you get a chance.

Sencha Touch | A look back at my first year

sencha-tools-250The last year and a half has allowed me to really focus on front end development, more specifically front end development with html5 for mobile devices. I wanted to share my experiences to hopefully help developers choose the right framework if they are considering using Sencha Touch or building a HTML 5 hybrid app. I started out by choosing between 3 front end mobile frameworks that I had heard a lot about which were: Dojo Mobile, jQuery Mobile and Sencha Touch. I choose Sencha Touch because it seemed like it is the most full featured mobile framework, used a MVC architecture, had good docs, a ton of pre built components to use, and a lot of good demos.

Here’s what I didn’t like:

Fist I should probably disclose that due to project requirements I had to build the app inside of IBM’s Worklight platform, which definitely made development life more difficult, and the app not perform as well. Worklight is IBM’s version of Cordova/Phone Gap that runs a server and provides a method for talking to a backend and returning data to and from your app, sounds like a great idea, but it was terrible and clunky to work with. Anyway back to Sencha.

  • The framework is really big:
    The uncompressed version of the framework is over 90,000  lines of code(2.9 MB). That’s a lot of javascript, and thats a lot of code to be loaded into memory on a mobile device. The compressed version of the framework is 139 kb which isn’t too bad, but its not great. This also lead to some really weird javascript debugging, which lead to hours of tinkering following break points and stepping through this enormous code base.
  • There is a steep learning curve:
    It took a  couple of months working full time in the framework to get really comfortable with it, and have the confidence to be able to say “Ya sure we can do that!” or “I don’t think that would be possible”
  • Performance was always an issue:
    It seemed like everything we did had to be reworked and optimized just to get decent performance, from screen transitions, scrolling on long pages and even getting button or tab taps to be responsive. Again Worklight might have played some role in performance issues but, you could definitely tell you were in a hybrid app. I have seen posts about how Sencha’s performance can be awesome, like the facebook vs fastbook (sencha html5 rebuild). I will be the first to admit that it was probably something that I was doing causing the performance issues, but I would like a framework to be robust enough to have great performance without having to optimize every single line of code, or be required to have the same understanding of the framework as the engineers that built it.
  • iOS 7 release issues
    When iOS 7 was first released there were significant issues with inputs and different ui elements that delayed the release of the app until they were fixed, which took weird css hacks and tinkering in the source code. Here is a great article on the issues that sencha faced This to me is a pretty big issue. I want the apps that I build and spend years of my life working on to work, and work great.

Here is what I liked:

  • Theming
    Sencha’s themes are built with compass, and make it super easy to theme and customize your apps. If you have any background with sass, compass or less you will have no problem in styling you apps. The docs have great guides on getting started with theming, and when you want to style specific components the docs display available mixins and variables that you will need to use!/api/ This also comes with a down side I guess, if you don’t want to use compass, then sencha is definitely not for you, trying to theme an app without compass would be a huge pain. There are also default themes for a number of different operating systems (iOS, Android, Windows Phone) which can get you started quickly.
  • Docs
    The documentation is really thorough and very helpful. They have guides on getting started, tutorials, and demo apps. You end up relying on the docs for a lot for everything from what events are available to a component, styling, and component properties and methods.
  • Components
    There is a lot of functionality already built out for you, you can take a look at all the different components available in Sencha’s Kitchen sink app. This made it easy to quickly build a html 5 app that had the look and feel of a native app. Once you got over the learning curve components make a lot of sense and are pretty easy to use and create your own.
  • Architecture
    I like the MVC approach to building apps. It made it easy for our team to work together and we didn’t have to worry about structuring out app.
  • Cross Platform
    This was the reason for building a hybrid app in the first place, it allowed us to use a single code base and deploy to multiple markets. It also cuts down in development time.

Overall thoughts

Overall I think Sencha definitely has its uses and has some great ideas on HTML 5 app development but if I had to do it all over again I  would not use Sencha. For a cross platform hybrid app I would lean more towards an Angular, Ember or Backbone because you have more freedom to tweak  you app to exactly how you want it. I just don’t have the confidence that building the app with Sencha will preform well enough or will break if an OS update comes out. I understand when building a hybrid app you can’t expect 100% native app performance, but you when it effects your user’s experience all the benefits of using the framework really don’t count for anything. Hope this helps, let me know if you have any questions!

Create angularJS filter!

Lately I have been playing with AngularJS and I am in love with it. Angular has these really cool components called filters which are described as:

[custom_blockquote style=” grey”] A filter formats the value of an expression for display to the user. They can be used in view templates, controllers or services and it is easy to define your own filter. [/custom_blockquote]

hodorLets Get Started

So game of thrones season 4 will be here in a couple of months so I thought we should build a Hodor filter to honor the great and noble Hodor. 

Our filter will take a string and translate it into Hodor.

Since this is just a demo, we are going to set up a super simple app that has a controller which looks like this:

		My Custom Filter


{{pageHeading | hodor}}

As you can see this is a pretty simple angular app with a single controller that sets our page heading data. We display our pageHeading property and add our hodor filter. We also attach our pageHeading model to the textarea so we can see the filter in action!

Now lets move on to the filter. We are going to want to use this in all our projects so we need create a new module just for our filter, and call the filter service.

angular.module('hodor-filter', []).filter('hodor', function(){

	return function(input){
		var hodor = [
			' '

		var stringPos = 0;
		var hodorString = "";
		for (var i = 0; i <input.length; i++) {
			var chr = hodor[i%6];
			hodorString = hodorString + chr;

		return hodorString;


  • Lets take a look at whats going on here:
  • – Declare our hodor-filter module and hodor filter
  • – Return a function that gets passed an input parameter
  • – Set up a Hodor array we will use this to replace characters in the input string
  • – Loop through all the characters and replace them with the correlating Hodor character
  • – Return the new hodorString

And thats it! Creating a filter is that easy! If you would like to download the project it is available on GitHub Hodor-Angular-Filter