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
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
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
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
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
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
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
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
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
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
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
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
More »
MacOS Android publishing with Intel HAXM x86 hardware acceleration error
Posted: December 14, 2014
Written by: Saints At Play
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:
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
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
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
More »
Publishing a PhoneGap App to the Apple App Store Part 2
Posted: November 30, 2014
Written by: Saints At Play
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
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:
- Setting up your Environment
- Registering for an Apple Developer account
- Creating App Certificates & Profiles
- 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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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 »