“use strict”;

Tells the browser, please add some extra rules when you parse and try to execute my code.

The result is:
Object {}

With "use strict"; the result is:
Uncaught ReferenceError: perple is not defined

“use strict” says, you must declare a variable in order to use it. Which can be really helpful when you have mistyped errors, similarly spelled functions or objects and get squirrelly responses.

It can be used at the top of your file OR at the top of a function and must be on the first line.

What it does: (from Stack Overflow) –

  1. It catches some common coding bloopers, throwing exceptions.
  2. It prevents, or throws errors, when relatively “unsafe” actions are taken (such as gaining access to the global object).
  3. It disables features that are confusing or poorly thought out.

Angular Ionic Button State Override

Didn’t seem there was a real easy way to just add an “active” class and call it a day when trying to add a class with ng-class in my Ionic app. So in the provided css file from Ionic, (your-app/www/css) which btw, they have a gulp watch on – I added one single line with the !important rule, and gave it a background color a little darker than the regular button state and was done for now. I will be looking into this closer.

My next post will be exploring how to set a watch onto the my-app/sass/ionic.app.scss file. I want to be able to override directly on the scss file and not create a ton of !important rules in the .css file they provide.

Editing Arrays

Array manipulation: shift, unshift, pop, concat, length, join, push

.length is not from 0 index but 1

.join – the ‘joiner’ adds words between items

There is no joiner after the last item.

.push adds an index to the end of the array

.unshift adds named thing to 0 index

.shift removed first element of array (accepts no params)

.pop removes last item of array (accepts no params)

.concat concatenates arrays

.slice returns a shallow copy of a portion of an array into a new array object

.splice changes the content of an array by removing existing elements and/or adding new elements.

.every() method tests whether all elements in the array pass the test implemented by the provided function

.some() method tests whether some element in the array passes the test implemented by the provided function

Using The Ionic Framework

I am learning to use Ionic to build JavaScript and AngularJS powered multi-platform applications. I will be revisiting this with more tips, issues and shortcut snippets as I come upon them. At this point, I am still early in my career as a JS developer, in the meanwhile this is what I offer:

Why Hybrid:

To run web pages (web applications) through a native component called the ‘WebView’. This allows you to to run a js application (which needs a browser) through this component.

There are frameworks that make it easy to run a webapp in a webview. The most popular, known as Cordova (an open source project) and PhoneGap (owned by Adobe and based on Cordova) that offers features and services on top of it.

Ionic let’s you write a webapp the same way you would for a website and (html, css, js) and package it as a mobile app with Cordova. If you just wrote a webapp from scratch yourself and showed in a webview, users would notice a weirdness in the responsiveness and look… Ionic gives you many components that have the same look and feel as native components, using appropriate styles and behavior for each platform.

Ionic is a front-end SDK for mobile applications containing components that mimic the native platform. Many components are written in css, so adding classes gives you immediate native interface look. More complex interactive components such as navigation and swiping are written in AngularJS and JS. It also includes a collection of icons as a css @font-face declaration.

Using the Ionic CLI:

View – To share your application with other for testing without needing to compiling to native code first
Creator – lets you design the UI and export a working Ionic project
Push – for push notifications




$ cd /Users/username/Development/android-sdk-macosx/platform-tools
./adb logcat
./adb devices

Revoke USB Debugging on phone
Restart ADB Server:
adb kill-server
adb start-server

$ cd /Users/username/Development/android-sdk-macosx
tools/android sdk
tools/android avd


ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)”
brew install homebrew/versions/node4-lts

Create a new project:

-> new name -> template
$ ionic start new-app-name maps
$ ionic start new-app-name tabs
$ ionic start new-app-name blank

Run Project In Browser:

$ ionic serve


(Navigate to project then…)
$ ionic platform add android
$ cordova platform add android
$ ionic build android
$ ionic emulate android ———————————–


1) Attach phone via USB
2) Open settings -> Developer Options -> Check (or re-check) USB Debugging
3) Navigate to application in terminal and run:
4) ionic run android -l (the -l is for livereload)

Run as IOS (new proj comes with it by default):

$ ionic platform add ios
$ ionic build ios
$ ionic emulate ios
$ ionic run ios

Preparing config.xml, splash screen and icon images

Open config.xml in the ww folder.
Change widget id to reverse domain to ensure uniqueness.
name field will probably need to be chnaged as well.
Further edit description, email and so on.
View Cordova docs for more details.
Generate icon and splash screen images (Ionic to the rescue!)
Use ionic help resources for a list of helpers
Overwrite /resources/icon.png with your new image.
Next command: ionic resources --icon to auto generate from that file.
Repeat process for “splash” screen images ionic resources --splash.

Packaging For Release In App Stores

View publishing details here.
Use $ keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000
…to generate your key – change the path and alias to fit your needs
Keep your keystore certificate in safe place, you will need it for all app releases
CLI: ionic build --release android
It will create and UNSIGNED version, copy that version path and change the name to read “signed”
$ jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore HelloWorld-release-signed.apk alias_name

    The above needs editing:

  • point to your local keystore
  • change path name to “signed”
  • edit to use your new alias

Updating your App

As you develop your app, you’ll want to update it periodically.
In order for the Google Play Store to accept updated APKs, you’ll need to edit the config.xml file to increment the version value, then rebuild the app for release.
zipalign your App
Go through the upload process, which asks for many photos, information and more so be prepared.

Publishing To Apple

You will need to ask apple to generate a certificate for you.
As a part of the apple developer program, you will have access to the “Member Center” which has a list of certificates, identifiers, devices and provisioning profiles.
For this case, use ‘App Store and Add Hoc”

readyState of a document

The readyState of a document can be one of following:
Ripped from developer.mozilla.org

The document is still loading. TCP handshake is in progress.

The document has finished loading and the document has been parsed but sub-resources such as images, stylesheets and frames are still loading. The state indicates that the DOMContentLoaded event has been fired.

The document and all sub-resources have finished loading. The state indicates that the load event has been fired. When the value of this property changes a readystatechange event fires on the document object.

Stack overflow on the readystate numbers


Splice takes three arguments.
1) where to start removing items
2) how many to remove (zero removes nothing)
3) what to insert
It changes the original array.