Random thoughts & observations

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.

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.

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.

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.

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.

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.  

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...

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).

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

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?

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.

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...

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...

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

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...

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...

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...

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...

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...

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!

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...

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?

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...

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.

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...

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...

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...

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...

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...

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.

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...

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...

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.

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.

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! 

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.

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.)

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

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.

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.

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.

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.

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.

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.

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.

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.

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

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).

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

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.