Using Google Maps in Angular JS
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.
Using HTML view templates in Express JS framework
One of the worst things? Jade templates.
Here's how to get the Express framework to use HTML templates instead.
Managing website assets with Bower
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.
Scrolling to a page anchor in 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.
Parsing html data from an array inside an AngularJS view
One of those is parsing HTML strings within views using ng-repeat.
Recording your iPhone or iPad screen and audio to your Mac
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.
Incrementing a loop inside an angularjs view
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...
Resolving Gulp cannot find module errors
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).
Git shortcut for adding and committing changes
Here's a great shortcut when using Git to simultaneously add and commit changes to your repository.
Resolving public key permission denied errors with bitbucket
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?
The legacy of computer scientist Dennis Ritchie
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.
Creating a Google Play Developer account and uploading your first Cordova PhoneGap Android App
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...
Renaming a published Android App from CordovaApp to your App's project name
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:
Total time: 8 seconds
Built the following apk(s):
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...
Android directory naming convention caveat for PhoneGap Apps
MacOS Android publishing with Intel HAXM x86 hardware acceleration error
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...
Enabling Android Developer Options on an Android handset
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...
Resolving Android Emulator errors on Mac OS X when using 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...
Resolving Android versionCode float type publishing error with PhoneGap
Publishing a PhoneGap App to the Apple App Store Part 2
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...
Publishing a PhoneGap App to the Apple App Store Part 1
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!
Documenting Sass with SassDoc
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?
Resolving POST requests in 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?
Resolving NPM cannot install dependencies - asset locked errors
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...
Xcode 6 semantic issue with property StatusCode inherited from NSHTTPURLResponse
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...
Renaming Hello Cordova in an Ionic App
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...
jqPlot date rendering issues
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.
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.
Handling multiple ajax requests and callbacks with 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...
Mac developers do it better
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.
Securely copying files and directories with 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.
Automated website testing with CasperJS
Installing the Android SDK on Mavericks
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.
Setting the System Path for CasperJS on Windows
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.)
Optimising pyrocms for more streamlined website performance
Speed up your PyroCMS projects with the following optimisation tips for faster loading webpages:
Resolving CasperJS installation issues with PhantomJS not able to be found
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.
Browser data storage options for the front-end developer
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.
Fixing the mobile header height in jQuery Mobile for iOS7
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.
Resolving iOS 6 deprecation errors in cordova 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.
Installing Node and SaSS behind a proxy
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.
Growing up with the web
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.
Popcorn JS Tutorial
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.
Animating div height from bottom of container to the top instead of top to bottom
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.
Entity encoding and decoding with jQuery
Here's a nice little trick when parsing HTML entity encoded text with jQuery.
Learning Underscore JS - a quick introduction
Installing SVN on Mavericks OS X
Looking to install SVN on Apple's OS X Mavericks?
Saints at Play AIR App for the desktop released
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.