Polymer and Angular – A new adventure

For sometime now I have been building out a web app using AngularJS, It’s a great framework and you can build out web applications in no time at all once you overcome the initial and quite steep learning curve. However with all the chat around drastically different Angular v2, the web communities endorsements of Facebook’s react.js and my interest in the Material Design movement pioneered by Polymer, I decided to take a look at these in comparison to Angular.

Facebooks React was a complete departure from Angular and has its own XML like markup which in all honesty I couldn’t really buy into although many praise this feature. Long story short I decided to move on after creating some simple applications.

Polymer was next, as a framework to build entire applications it’s not quite as complete as Angular. Angular does things like routing, application structure, dependency injection very well. Polymer on the other hand is great at creating reusable components, Angular also has directives for this but in my option Polymer components are a lot easier to build/read and test. Over the next couple of weeks I am going to continue experimenting with using Angular for the application structure and business logic, and migrate directive to polymer components.

Hopefully I can get the chance to be a lot more active on this blog during this transition and provide some helpful insights to anyone else who might be partaking on this journey.


Angular with JQuery

JQuery Plugins with AngularAngular is a powerful framework for creating single page applications, it boasts bi-directional data-binding and use of directives (ala web components). Angular comes with an initial learning curve with its own syntax and custom elements. In the past I have used Angular when starting out new projects, usually simple web apps and was always impressed with how quickly it allows you to develop new features, and keeps the structure of the code clean and straight forward. A problem often faced when writing plain JS or JQuery apps.

Having said that I recently tried to convert a site to Angular, this site included many JQuery plugins for various UI components, all of which seemed to get initialised on document ready several times. I started the conversion and everything went smoothly. I hit the first problem trying to initialize a JQuery UI plugin on a template view. What I mean by template view is a partial view that is replaced at runtime by angular and the data is bound to the view from the $scope. The problem was that the plugin init code was being called before angular had finished the DOM manipulation. A Quick search online confirms this is a common problem, there is also plenty of suggestions. All of them less than ideal. I wont discuss each solution as a Google search will return them in more detail.Here are the two solutions I found to be the best, its very much the best of a bad bunch

 function () { return element.html()},
 function (newValue, oldValue) {
     if (newValue !== oldValue) {
            autoPlay: 3000, //Set AutoPlay to 3 seconds
            items : 4,
            navigation: false

The watch method takes the directive element and watches for any changes within it, this is especially useful if you have data-binding within the directive that you need to initialise after angular has finished binding. This is my preferred method as its fairly self explanatory, my only concern is the performance implications of having many directives that have this watch function, but I have yet to notice anything substantial.

The other method is to use a timeout to initialise the plugin, similar to watch however you use $timeout and regardless of data change you say execute the init after 300ms for example, my issue with this is that you have to guess how long its going to take get/bind the data.

As I encounter more JQuery plugins and attempt to initialise them sometimes in partials/templates or the controller it gets harder to keep the code clean and the structure simple. My advice would be if facing a project that uses many JQuery plugins on the UI then maybe think twice about Angular, or the plugins that you are using on the site, if you can. Mixing JQuery and Angular isn’t nice.

Grunt – Optimisation of Front End Code

After my adventures with Yeoman I have grown to love the quick scaffolding it offers, but through Yeoman you are introduced to Grunt a task runner for Javascript, which takes more of the pain out of repetitive tasks. Below I will comment on some of the most useful ways to use Grunt to optimise/fix front end code.

In this short post I will give a quick introduction to some of the ways you can improve the performance of your application using really quick and simple techniques.

Performance Optimisation

Below I will list some of the really easy things you can do to speed up your applications, with a little help from Grunt.

1. Folder Structure

This doesn’t have a direct effect on performance of your application, but will aid in making any changes that will. When working with existing or older projects this is often a problem. If your Web application has a ROOT/js folder that has lots of uncompressed development grade javascript files, think about creating a distribution folder for the LIVE version of the app (ie ROOT/dist/js). In here you can also create folders like images, css/styles where you can compress those assets.



One of the first Grunt tasks that I used and probably the most useful. With Uglify you can point it to the folder that contains all your js files, Grunt will then go off minify them and write them to a chosen destination folder with your chosen extension.

For the minified versions I recommend having a common location for all compressed, production ready scripts/assets, It is helpful to separate the two locations as ideally you don’t want to be debugging minified js in dev environments. So this means you can alter the development grade scripts and have Grunt minify them for use in the application.

Question : Do I need to manually run the Grunt task to see my changes locally ?

Answer : No, There are multiple ways you can get around this, my favourite is by setting up a watcher. Watchers wait for changes on certain files (in this case the dev js) when a file is changed it can trigger a task (in this case Uglify), Using this method means every time you change the development JS its automatically compressed and written to the dist location.

So changing ROOT/js/app.js would create a compressed equivalent in ROOT/dist/js/app.min.js

Next Time – Setting up project for Grunt & Uglify

Yeoman – Nimble Workflow

I came across Yeoman around a year ago and never really paid it much attention, recently I started ramping up the amount of web development I was doing and decided to go back and see what all the fuss was about. Im glad I did, Yeoman is a great way to speed up how you work and reduce the time to get projects up and running


1. Great when starting projects

Something I used to do often was copy my old boilerplate code, add all the plugins I needed, edit the html file structures to match and then deploy to a local development server where I would start development. This wouldn’t take a long time somewhere in the realm of 20/30 minutes. Yeoman makes this so simple within 2 minutes I can have a boilerplate Bootstrap website running locally ready for development.

Above and beyond this it has a live-reload feature of Grunt which is part of the Yeoman feature this means that you can have the webpage running and when you change the source code the browser will refresh with your latest changes.

Grunt can also be used to lint your JS, make sure your tests pass before deployment and generally enforce good solid code is being written locally.

It might not seem that this stuff would be hard to do manually but the time it saves is really quite visible, in-fact if it wasn’t I probably wouldn’t be writing this post.

The power lies within creating custom generators specific to the tasks you need automated, Addy Osmani has some generators that remove unused css from your application on compile. You can also write your very own, maybe to switch between local and production environment systems.

I am currently just opening the box to Yeoman and looking forward to exploring the power of Grunt and Bower much more, I really insist you take a look.

Android Studio – Importing Library Projects

So Recently I moved to using Android Studio as my primary development environment for Android of course. The switch was simple and Studio has some really nice productivity feature to help you write code quickly. However I did find that importing library projects a little tricky initially especially having little to no knowledge of Gradle and how it works. So I thought I would write up a short post describing how.

Steps to Import Android Library to your Project

  1. Create folder in top level called libraries (same level as target,.idea)
  2. copy the library project into this folder
  3. Open Project Structure (Right-Click on Top Level Project)
  4. Click + icon towards top left
  5. Import Module
  6. Import the module you copied into libraries
  7. Click on the library name (left hand nav bar)
  8. If the library you are using has any dependencies that your project uses you can remove these on dependency tab (i.e Support Libs)
  9. Click on your project in the left hand nav bar
  10. Select dependency tab and add the new library module to your project, Apply and close

Thats the basic setting to apply a module to your project running the project will probably result in Gradle errors at this stage, because Gradle cant build the project or even find it. Edit the following files


include ':libraries:library-name',':project_name'


add in

    compile project (':libraries:view-pager')


If building the code at this point still gives you gradle errors your library project probably cant be built because it doesnt have an appropriate build.gradle using this template build file should help you get the project building.

buildscript {
    repositories {
    dependencies {
        classpath 'com.android.tools.build:gradle:0.5.+'
apply plugin: 'android-library'

dependencies {
    compile 'com.android.support:support-v4:13.0.+'

android {
    compileSdkVersion 17
    buildToolsVersion "17.0.0"

    defaultConfig {
        minSdkVersion 8
        targetSdkVersion 16
    sourceSets {
        main {
            manifest.srcFile 'AndroidManifest.xml'
            java.srcDirs = ['src']
            res.srcDirs = ['res']

Hopefully this short guide will help anyone that faced the same problems I had at the beginning

I’m Back!

Its been a few months since I last posted mainly due to work commitments. During this time however I have also been working on a solo project called WeightMate an app currently available on Android. This post is just a welcome back and intro to my new project.



Focussing on good UX Design the aim was to create an application that would stand out in the Weight Tracker category as a “nice looking application” that hopefully people will be attracted to use. It also serves a purpose as an experiment to see if first impressions count when downloading apps. WIll users download an app with less functionality because it looks and feels better ? Will they be more patient because the app looks better ? Many questions I aim to find some answers to with this application.

Most importantly it serves as my dive back into android development after over a year hiatus. I love the design and development process and focussed on how best to do this. Being a developer we are classically tagged as not being able to design but thats not true sometimes we just don’t have the correct tools or knowledge of the correct tools (Il cover in another post). So I spoke to colleagues and friends about how they approach UX design in mobile apps. I looked around the market seen what other apps did and worked backwards from the negative comments to come up with a vision/concept of how I wanted it to look visually I then ran this by friends and family iterating over their feedback to come up with my final design.

From the development perspective I wanted to try something new I had recently read The Lean Startup and once of the concepts mentioned is the Build,Measure,Learn  cycle and MVP(Minimum Viable Product ) which I will discuss in a future post also.


I have quite a few posts I want to cover in the next few days so I figure if I commit to them here I will have to write them

  • Lean Agile Principles
  • Lean Startup
  • Android Studio – Librarys
  • UX Tools for Developers
  • Development Best Practice

CSS3 – Animating the DOM – Part 2

Have a look at this JSFiddle to see what we will be creating in this section JS Fiddle with all 4 effects. So last post (see here) we spoke about basic transitions using ease-in-out. In this post we will look at other transitions, transitional properties and maybe some transformations too.

Last time we used ease-in-out to create some basic transformations using the opacity levels of an image to fade it out. Lets start by looking at other kinds of basic transitions available to use.

Basic Transitions

ease-in-out is considered a timing function this states how the animation will play out. Here are some other stock functions you can play with.

  • ease – steady pace of animation
  • ease-in  – slowly build up
  • ease-out – start fast and slow towards the end
  • ease-in-out – slowly build up and slowly come to end
  • linear – same momentum throughout time

You can use these timing functions to modify the execution of your animation based on the time you have specified. Playing around with these alone allows you to create animations and interactivity that most websites today cant offer. You can however build more advanced timing functions using this tool Ceaser Transition Creator however use advanced animations with caution.

TIP – Avoid Motion Sickness in your app.

A tip I have found useful when creating web apps. Once you are comfortable with animation in CSS/HTML the overwhelming urge is to animate everything in your application. You start to look at the static DOM elements as boring because they have no life or activity. Depending on the context of your application start by picking one element that you think “That would be really cool if that moved like this when I done this … that would be impressive”. Take that element and animate it, spend time getting the animation fluid and in keeping with the app i.e no photoshop style sliding text with car engines sounding as it speeds across the screen. If you do this you will find clients and users of your application will notice that one singular animation, and it stands out rather than drowned in a sea of flying divs.

I hope this section has covered the basic concept around transitions and how they work. I could have went into more detail around timings and delays but feel they are pretty self explanatory if there are any gaps let me know im happy to add some detail in. To see a list of all properties that can be animated look here


So now you should be comfortable with transitions lets add some transformations to the mix. There are commonly 2 type of transforms 2D and 3D lets start with 2D.

4 Examples of 2D transforms



#div1 {
transition:all 1s ease-in;
perspective: 400px;
perspective-origin: 50% 100px;
#div1:hover {


Skew a square with CSS
Skew a square with CSS


Code: change the hover code to match below

#div1:hover {



Code: change the hover code to match below

#div1:hover {

The following link will show all 3 effects in action with code side by side


Hopefully this give you an insight into how to add transforms to you html elements and you can now link these to the transitions as explained in part 1 to create some interesting layouts and effects.