How To Install Google Play Store On Amazon Fire Phone

Update your Amazon Fire Phone to the latest OS first.

Then install the following APPs in this particular order:

Google Now Launcher on Fire Phone

(I don’t recommend this because in my testing it reduced the battery life by a lot.)

If you want to install the google now launcher on amazon fire phone then you need to install the “Google App” first. Launch the app after install and click through the “Get Started” steps. It is important that you go through the Setup Steps in Google App.

Tip: Turn off the “Ok Google” in Google App Voice Settings because this is a battery drain on your phone.

Once you have the Google App running, go back to the play store and download “Google Now Launcher” After you install it make it your default launcher.

Now you can click and hold anywhere on the screen to set widget or change background wallpaper.

How To Enable Scrolling In Ionic iOS Apps

Touch scrolling in apps built on Ionic Framework on iOS devices doesn’t work right. To fix this you have to wrap your content in ion-scroll element.

<ion-scroll zooming="false" direction="y" style="height: calc(100vh - 100px); ">
   <p style="height: 1500px; overflow-y: hidden;">some long text here</p>
</ion-scroll

The problem with this solution is that you have to set a static height for the inner element in order to get scroll to work properly. In this example I am dynamically calculating the scroll area using calc function.

I haven’t yet found a solution without setting a height of the inner element.

How To Vertically Align Div Element

There are many ways to do this (allegedly), but here’s how I’ve vertically aligned an element inside a div:

In CSS:

.center { 
    height: 200px;
    position: relative;
}

.center p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

In HTML:

<div class="center">
  <p>This should be centered</p>
</div>

How to use ng-disabled with multiple expression

You may have ran into this issue when trying to bind a submit button with multiple disable conditions. The easiest way to do this is to embed the variable checking in the html as follows:

Both variable must be false for the button to be disabled:

<button class="button" ng-disabled="(!data.var1 && !data.var2) ? false : true">
</button>

Either variable can be false for the button to be disabled:

<button class="button" ng-disabled="(!data.var1 || !data.var2) ? false : true">
</button>

How to Localize Your Ionic Project

How to localize, translate and support multiple languages in your Ionic / AngularJS project:

1. Install Angular Translate:

npm install angular-translate
npm install angular-translate-loader-static-files

2. In your index.html make sure you include the js files:

<!-- translations -->
<script src="js/angular-translate.js"></script>
<script src="js/angular-translate-static-files.js"></script>

If you cannot find these js files in your project folder then you can find them on the project github pages.

3. In your app.js add the translation loading

angular.module('starter', ['ionic', 'starter.controllers', 'pascalprecht.translate'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
      return StatusBar.hide();
    }
  });
})

.config(['$translateProvider', function ($translateProvider) {
  $translateProvider.useSanitizeValueStrategy('sanitize');

  $translateProvider.useStaticFilesLoader({
      prefix: 'locale/locale-',
      suffix: '.json'
  });

  $translateProvider.preferredLanguage('en');
}])

4. Create a locale json file

Create a file named locale-en.json and a locale folder
the file should be in your www/locale/locale-en.json
Do not include any //comments in the JSON file

{
  "HelloWorld": "Hello World!",
  "Name": "My Name"
}

5. Add localization in your html file

<label>{{ 'HelloWorld' | translate }}</label>

6. Translating within your javascript

Make sure you import $translate within your controller before using it.

 $translate('HelloWorld').then( function (translation){
    console.log(translation);
  });

Or if you need to translate multiple terms:

 $translate(['HelloWorld', 'Goodbye']).then( function (translations){
    console.log(translations.HelloWorld);
    console.log(translations.Goodbye);
  });

For more information visit https://angular-translate.github.io/docs/#/guide.

How To Open Chrome Device Debugger?

Last night I was trying to open the chrome debugger for an ionic app running on my ios device but could not remember the URL. This was a very simple thing but was nearly impossible to discover on the internet for some reason…

To do this: Open Chrome Browser and type chrome://inspect/ in the url field.

I don’t know why Chrome and Google make this so hard to discover.