Random thoughts & observations

From the mundane to the profound and everything in between here’s what’s rocking our world

Using Google Maps in Angular JS

Posted: March 10, 2015
Written by: Saints At Play
Category: AngularJS

Angular JS, once you switch from a jQuery mindset, makes building out web apps relatively quick and thanks to the growing number of available plug-ins you can be sure to find a solution to fit your development needs.

One such need might involve implementing Google Maps which is what we are going to look at through this tutorial.

More »

Using HTML view templates in Express JS framework

Posted: February 22, 2015
Written by: Saints At Play
Category: Express JS

One of the great things about working with the MEAN stack (MongoDB, Express JS, AngularJS and Node - for those not in the know!) is its relative simplicity: JavaScript is the common thread tying all the components of the stack together, so the learning curve is relatively shallow.

One of the worst things? Jade templates.

Seriously.......Jade sucks.

Here's how to get the Express framework to use HTML templates instead.

More »

Managing website assets with Bower

Posted: February 21, 2015
Written by: Saints At Play
Category: Bower

There's no denying that front-end development as a discipline has grown rapidly in the last 5 to 6 years with an ever increasing number of competing technologies, particularly in the JavaScript world with an explosion of different libraries and MVC oriented frameworks.

Managing these front-end assets, in addition to development oriented tasks, can be a real hassle, particularly where new software releases are concerned.

This is where Bower steps in to help.

More »

Scrolling to a page anchor in Ionic Framework

Posted: February 17, 2015
Written by: Saints At Play
Category: Ionic Framework

If you've been working with the Ionic Framework you'll be familiar with setting up AngularJS routes for your controllers and view templates which are then triggered with hyperlinks used within your App. The combination of Ionic and AngularJS makes this easy to implement but when it comes to scrolling to a particular anchor inside a view template things get a little trickier.

More »

Parsing html data from an array inside an AngularJS view

Posted: February 16, 2015
Written by: Saints At Play
Category: AngularJS

There's no denying that AngularJS is a fantastic framework to develop with but if you're coming from a jQuery/traditional JavaScript background there are certain aspects of Angular based development you might initially struggle with.

One of those is parsing HTML strings within views using ng-repeat.

More »

Recording your iPhone or iPad screen and audio to your Mac

Posted: February 14, 2015
Written by: Saints At Play
Category: Apple

In this tutorial we'll take you through capturing screen and audio content from your iPhone or iPad and recording that to your Mac with a fantastic little App called X-Mirage.  

More »

Incrementing a loop inside an angularjs view

Posted: February 14, 2015
Written by: Saints At Play
Category: AngularJS

If you've been using AngularJS for some time you might find there are occasions where you want to display the incremented value of a loop counter inside a view instead of calculating/returning that from within the controller logic.

Doing this is incredibly easy...

More »

Resolving Gulp cannot find module errors

Posted: January 27, 2015
Written by: Saints At Play
Category: Gulp

If you're not using a task runner like grunt or gulp to automate your front-end development workflow then you're missing out on some incredibly powerful tools that can help simplify and improve your productivity.

That said this is the world of software development and not everything always runs as smoothly as we might like.

After updating a pre-existing gulp installation we came across the following errors when trying to execute the task runner (that had been working perfectly beforehand).

More »

Git shortcut for adding and committing changes

Posted: January 15, 2015
Written by: Saints At Play

Here's a great shortcut when using Git to simultaneously add and commit changes to your repository.

More »

Resolving public key permission denied errors with bitbucket

Posted: January 15, 2015
Written by: Saints At Play

You've set up your remote Bitbucket repository and the corresponding SSH keys have been generated. You're making your first commit and the terminal application displays the following error:

Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

Not sure what's happening or how to begin resolving this?

More »

The legacy of computer scientist Dennis Ritchie

Posted: January 14, 2015
Written by: Saints At Play
Category: Key People

October 5th 2011 and reports of Apple co-founder Steve Jobs’ death was headline news throughout online media outlets in every country around the world. Websites, blogs, twitter feeds, Facebook pages and news portals were filled with tributes, plaudits and commemorations (many of which were truly deserved - whether you’re an apple fanboi or not - and some that were just plainly ridiculous) and wherever you went it seemed, thanks to the media, that the man was larger in death than he ever was in life.

Yet on October 8th 2011 another important pioneer in the early days of the computing industry passed away, his name generating very little media attention despite his contributions being every bit as significant as those of Job’s, possibly, and even arguably, more so.

His name? Dennis Ritchie.

More »

Creating a Google Play Developer account and uploading your first Cordova PhoneGap Android App

Posted: December 18, 2014
Written by: Saints At Play
Category: Android

The beauty of being a developer in the second decade of the 21st century is the sheer range and diversity of platforms, tools and environments you can develop with and for. It's no exaggeration to say that, on this score, we really are spoiled for choice and nowhere does this hold truer than developing for the Android platform.

In this tutorial we're going to guide you through the following steps:

  • Setting up a Google Play publisher account
  • Generating, signing and optimising an APK file
  • And, finally, uploading your APK file for distribution on Google Play... 

Read on...

More »

Renaming a published Android App from CordovaApp to your App's project name

Posted: December 16, 2014
Written by: Saints At Play
Category: Android

Here's an interesting quirk when using the Ionic framework (version 1.2.13) with Cordova PhoneGap (version 4.1.2) to create an Android App build. You run the following command:

ionic build --release android

And once the build process has successfully completed the CLI displays the following output:

BUILD SUCCESSFUL
Total time: 8 seconds
Built the following apk(s):
    /Path-to-your-project/platforms/android/ant-build/CordovaApp-release-unsigned.apk

The only problem? The built apk file is named as CordovaApp and NOT as the name of your project.

Resolving this involves a few steps to work through...

More »

Android directory naming convention caveat for PhoneGap Apps

Posted: December 15, 2014
Written by: Saints At Play
Category: Android

Here's an interesting 'gotcha' when developing Android Apps with Cordova PhoneGap and Ionic Framework...

More »

MacOS Android publishing with Intel HAXM x86 hardware acceleration error

Posted: December 14, 2014
Written by: Saints At Play
Category: Android

There you are ready to publish your PhoneGap App to your Android Handset with the following command:

cordova run android --device

Or, if you're using the Ionic framework CLI instead:

ionic run android

Only to be presented with the following error message AFTER being informed that the build was successful:

emulator: ERROR: x86 emulation currently requires hardware acceleration!
Please ensure Intel HAXM is properly installed and usable.
CPU acceleration status: HAX is not installed on this machine (/dev/HAX is missing).

Resolving this is, thankfully, quite simple...

More »

Enabling Android Developer Options on an Android handset

Posted: December 10, 2014
Written by: Saints At Play
Category: Android

Ready to publish your PhoneGap App to your Android handset for testing? Developing on a Mac and struggling to get the handset registering on your machine?  Read on...

More »

Resolving Android Emulator errors on Mac OS X when using Ionic Framework

Posted: December 9, 2014
Written by: Saints At Play
Category: Ionic Framework

Developing an Android App on Mac OS X? Using the Ionic framework from the command line to trigger the Android Emulator? Seeing the following error returned?

ERROR Unable to load VM from snapshot

Thankfully the fix for this error is quite simple...

More »

Resolving Android versionCode float type publishing error with PhoneGap

Posted: December 7, 2014
Written by: Saints At Play
Category: Ionic Framework

There you are ready to build your Android project - Cordova PhoneGap, Ionic Framework, Ant and the Android SDK are all successfully installed and configured correctly - you've opened up your command line and typed out the following instruction:

ionic build android

You press Enter and wait for the command to run only to be greeted with a failed build message akin to the following...

More »

Publishing a PhoneGap App to the Apple App Store Part 2

Posted: November 30, 2014
Written by: Saints At Play
Category: PhoneGap

If you haven't done so already make sure you read part 1 of this series where we discussed setting the initial foundations for a PhoneGap App. In this second instalment we're going to take a look at setting up the necessary accounts for you to be able to publish your iOS Apps to the Apple App store...

More »

Publishing a PhoneGap App to the Apple App Store Part 1

Posted: November 29, 2014
Written by: Saints At Play
Category: PhoneGap

In this tutorial we're going to take you through the process of publishing a PhoneGap App to the Apple App store. Due to the number of steps involved this tutorial will be broken over a number of different blog entries:

  1. Setting up your Environment
  2. Registering for an Apple Developer account
  3. Creating App Certificates & Profiles
  4. Publishing your App

There's a lot to get through so let's get started!

More »

Documenting Sass with SassDoc

Posted: November 28, 2014
Written by: Saints At Play
Category: Sass

So you've been working with Sass for some time now; creating functions and mixins for use in your team projects but now you've got a new developer picking up where you've left off - how to get them up to speed on working with the code you crafted?

Enter SassDoc...

More »

Resolving POST requests in AngularJS

Posted: November 1, 2014
Written by: Saints At Play
Category: AngularJS

There you are using AngularJS for posting form data to a remote server and you come across the most perplexing bug: despite the data being captured properly it just isn't posted. You double check both your Angular script and server side script but can't find the source of the issue - the code is bug free and should work but it isn't.

What to do?

More »

Resolving NPM cannot install dependencies - asset locked errors

Posted: October 17, 2014
Written by: Saints At Play
Category: Node JS

Here's a frustrating error you may have encountered when trying to install software using the npm command: NPM cannot install dependencies - Attempt to unlock xxxx which hasn't been locked.

Thankfully the fix is really simple, providing you don't mind getting your fingers dirty at the command line...

More »

Understanding JavaScript hoisting

Posted: October 11, 2014
Written by: Saints At Play
Category: Javascript

Part of JavaScript's popularity is its flexibility but this can also present challenges for even the most seasoned developers, particularly when trying to understand the role of hoisting and its impact on scripting.

More »

Dealing with Leap Years in JavaScript

Posted: October 4, 2014
Written by: Saints At Play
Category: Javascript

Date handling with JavaScript can be a tricky business to get right, particularly when it comes to calculating leap years. Thankfully, once you understand the principles behind accomplishing this, the task becomes relatively easy...

More »

Xcode 6 semantic issue with property StatusCode inherited from NSHTTPURLResponse

Posted: September 24, 2014
Written by: Saints At Play
Category: PhoneGap

After recently updating to Xcode 6.0.1 we found the following warning when publishing a Cordova PhoneGap App we're in the midst of developing:

  • Semantic Issue 'atomic' attribute on property 'statusCode' does not match the property inherited from 'NSHTTPURLResponse'

Thanks to this helpful post we found a much needed solution...

More »

Renaming Hello Cordova in an Ionic App

Posted: September 6, 2014
Written by: Saints At Play
Category: Ionic Framework

The Ionic Framework is a powerful and developer friendly framework for building Mobile Apps with Cordova PhoneGap. The combination of AngularJS and a component rich library makes development so much easier and faster.

The initial downside?

Every iOS App you create is called HelloCordova.

Here's how to change that...

More »

jqPlot date rendering issues

Posted: September 5, 2014
Written by: Saints At Play
Category: jqPlot

If, like most front-end developer's you've ever needed to implement graphing or charting functionality you'll probably have come across jqPlot.

As a solution for providing charts and graphs across a range of formats it's a pretty powerful plug-in but there are some gotchas. One of the more frustrating ones that we experienced was while working with dates...

More »

Documenting JavaScript with YUIDoc

Posted: August 16, 2014
Written by: Saints At Play
Category: YUI Doc

You either love it or you loathe it but as developers we all need to do it: documenting our code.

Given the ever increasing need for more complex JavaScript apps the ability to quickly understand what is going on (and more importantly, why) in the scripts we use can be helped along with the right kind of documentation.

Enter YUIDoc...

More »

JavaScript development in the browser console

Posted: August 10, 2014
Written by: Saints At Play
Category: Javascript

One of the great things about modern website development is the range of tools available to developers and nowhere is this truer than within modern website browsers. In fact, one of the most powerful and often under-utilised tools is that of the browser console.

More »

Handling floating point numbers in JavaScript

Posted: August 2, 2014
Written by: Saints At Play
Category: Javascript

If you've been working with JavaScript for some time you're probably familiar with data type conversions and number formatting. Standard run-of-the-mill tasks for sure but things can get quite interesting when you start to play with floating point numbers...

More »

Handling multiple ajax requests and callbacks with jQuery

Posted: July 30, 2014
Written by: Saints At Play
Category: jQuery

If you are like most front-end developers you'll no doubt be familiar with using jQuery to parse AJAX requests when handling data such as JSON or XML.

Here's a quick and easy way to handle multiple AJAX requests with jQuery...

More »

Mac developers do it better

Posted: July 20, 2014
Written by: Saints At Play
Category: Apple

No matter what your opinion of the Apple Mac platform; whether you love or loathe it there's no denying the passion behind developers who create the software.

More »

Securely copying files and directories with Unix

Posted: July 19, 2014
Written by: Saints At Play
Category: Unix

If, like a lot of developer's, you're working with the Apple Mac platform then you not only get the benefits of a well designed GUI but you also get to take advantage of the powerful features provided by the underlying Unix core. 

In this tutorial we're going to take you through one of those features: securely copying files.

More »

Automated website testing with CasperJS

Posted: July 17, 2014
Written by: Saints At Play
Category: Casper JS

As front-end development continues to grow as a discipline in its own right so do the number of tools, technologies & processes available (not to mention the volume of platforms and devices to cater for). In this article we're going to take you through automated website testing with a sample CasperJS script. If you've never tested your website with JavaScript before you're going to love CasperJS

More »

Installing the Android SDK on Mavericks

Posted: July 17, 2014
Written by: Saints At Play
Category: Android

Installing the Android SDK for Cordova PhoneGap mobile development can seem a little involved and challenging at first glance but in the following tutorial we're going to take you through how to do just that.

More »

Setting the System Path for CasperJS on Windows

Posted: July 11, 2014
Written by: Saints At Play
Category: Casper JS

We've been doing a lot of testing with the fantastic CasperJS library lately and have needed to work with this on both Mac and Windows platforms. This article takes you through installation and configuration on a Windows platform (predominantly XP, believe it or not, with some pointers on managing the same on Windows 7.)

More »

Optimising pyrocms for more streamlined website performance

Posted: July 1, 2014
Written by: Saints At Play
Category: PyroCMS

Speed up your PyroCMS projects with the following optimisation tips for faster loading webpages:

More »

Resolving CasperJS installation issues with PhantomJS not able to be found

Posted: July 1, 2014
Written by: Saints At Play
Category: Casper JS

If you've tried running a test script from the command line and experienced the following error with CasperJS:

Fatal: [Errno 2] No such file or directory; did you install phantomjs?

Then here's how to go about fixing this on a Mac system.

More »

Browser data storage options for the front-end developer

Posted: June 28, 2014
Written by: Saints At Play
Keywords: html5,
Category: HTML5

With universal support in modern browsers for HTML5 related technologies such as Local Storage front-end developers now have more options than ever when it comes to client-side data storage. In this article we're going to take a look at what those options are and how they stack up.

More »

Fixing the mobile header height in jQuery Mobile for iOS7

Posted: June 3, 2014
Written by: Saints At Play
Category: PhoneGap

If you're developing Phonegap applications with jQuery Mobile for devices running iOS7 then you're probably going to experience some issues with the placement of items within the application header. As Apple have changed how the header behaves in iOS7 you'll need to make some adjustments in your code to accommodate this.

More »

Resolving iOS 6 deprecation errors in cordova phonegap

Posted: May 28, 2014
Written by: Saints At Play
Category: PhoneGap

Having recently upgraded to Cordova Phonegap 3.5 we started seeing the following iOS6 deprecation warnings when publishing our App for testing:

  • Deprecations: ’dismissModalViewControllerAnimated:' is deprecated: first deprecated in iOS 6.0
  • Deprecations: 'presentModalViewController:animated:' is deprecated: first deprecated in iOS 6.0

Thankfully, resolving these is a relatively simple process.

More »

Installing Node and SaSS behind a proxy

Posted: May 24, 2014
Written by: Saints At Play
Category: Server

If you find yourself working behind a corporate web proxy server chances are you'll be running into issues when trying to install SaSS and using the Node Package Manager (npm). Thankfully these issues are easy to resolve with a little command line magic.

More »

Growing up with the web

Posted: May 22, 2014
Written by: Saints At Play
Category: Miscellaneous

We got into designing for the web around the turn of the century, shortly after the bursting of the dot-com bubble. 13 years on and it's quite surprising to see the pace of change that has occurred within the industry since then and some of the major shifts in technology and approaches that have also taken place during this period.

More »

Popcorn JS Tutorial

Posted: May 17, 2014
Written by: Saints At Play
Category: Popcorn JS

Mozilla's Popcorn JS library allows developers to bring richer functionality to HTML 5 video. In the following tutorial we're going to take you through developing a single page web app with Popcorn JS.

More »

Animating div height from bottom of container to the top instead of top to bottom

Posted: May 16, 2014
Written by: Saints At Play
Category: CSS

We came across some interesting behaviour while building a charting application with HTML, CSS and jQuery. When it came to animating the individual bars of the charts that we were generating the height would always grow downwards! As bizarre as this behaviour seemed fixing it proved to be relatively straightforward.

More »

Entity encoding and decoding with jQuery

Posted: May 11, 2014
Written by: Saints At Play
Category: jQuery

Here's a nice little trick when parsing HTML entity encoded text with jQuery.

More »

Learning Underscore JS - a quick introduction

Posted: May 7, 2014
Written by: Saints At Play
Category: Underscore JS

If you work with JavaScript on a regular basis there’ll be times when you find yourself wondering why certain methods aren’t built into the language as default. Whether it’s certain types of data manipulation in arrays or custom objects you’ll need specialised helper functions to accomplish these ends. Writing such functionality can be tedious, prone to cross-browser issues and quite often, frustrating.

This is where Underscore JS excels as it provides a set of built-in utilities for working with JavaScript objects (whether they be Arrays, Objects [associative arrays in JavaScript], Functions, Strings or Numbers).

More »

Installing SVN on Mavericks OS X

Posted: May 1, 2014
Written by: Saints At Play
Category: Server

Looking to install SVN on Apple's OS X Mavericks?

More »

Saints at Play AIR App for the desktop released

Posted: April 3, 2014
Written by: Saints At Play
Category: Adobe AIR

Over the last month we've been working hard in the background of day-to-day projects on a brand new AIR App for our business. Leveraging the power and flexibility of the AIR platform with jQuery Mobile and AngularJS we are pleased to finally launch the updated and vastly improved desktop App for Saints at Play.

More »

Latest Tweets