Bootstrap Media Query Sizes

This is just a simple place for me to jot down the media query sizes from bootstrap as I always seem to go and google it when working on different client websites.

 

/* Mobile First Method */

/* Custom, iPhone Retina */ 
    @media only screen and (min-width : 320px) {
        
    }

 /* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) {

    }

 /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {

    }

 /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {

    }

 /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {

    }

OR
/* None-Mobile First Method */

/* Large Devices, Wide Screens */
    @media only screen and (max-width : 1200px) {

    }

    /* Medium Devices, Desktops */
    @media only screen and (max-width : 992px) {

    }

    /* Small Devices, Tablets */
    @media only screen and (max-width : 768px) {

    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (max-width : 480px) {

    }

    /* Custom, iPhone Retina */ 
    @media only screen and (max-width : 320px) {
        
    }

JQuery back button broke using cordova after ios 9 update

Recently an application I have been working on was ready for the App Store , but then came an iOS update and all of a sudden things went wrong. (big BOOOOO)

Android device still working so I knew it wasn’t the code base. The application had already been tested on iOS devices and was fine. I did a bit of googling and found a few people moaning about the iOS 9 update.

I had strange behavior where the back button wouldn’t work and also sometime the back button would take me to a different page that was unrelated to the state in the navigation history , uh!.

Ok so the simple fix is to add the following two lines.


$.mobile.hashListeningEnabled=false;
$.mobile.pushStateEnabled = false;

Reference for the solution (combo of the two)

http://stackoverflow.com/questions/32820224/jquery-cordova-history-issue-ios-9-history-broken
https://forum.jquery.com/topic/page-navigation-issues-under-ios9-beta

You can add some logic to determine when to put this in for iOS but I simple added a merge file specifc for apple as the settings shouldn’t be changed for Android as that doesnt have the issue.

Happy Bug Fighting!

Cheers

Neil

Reverse engineering Android APK

Recently at work I was asked to look into how easy it would be to get the source code of an Android APK.

I know this is nothing ground breaking to the world of developers, but its something that is worth yet again highlighting to all those new programmers whipping out mobile apps one after the other…..

So what did I find…..

A nice easy tool is available to download http://ibotpeaches.github.io/Apktool/

Simply save the jar file to your machine and make sure its in your system path (windows) and then you can run the following from the command prompt;

apktool d name-of-file-here.apk

This will then generate a folder with the name of the APK file and you can view all of the original source.

Ouch how easy was that….

Well a quick google and you can even simply use other services available that let you just upload the APK.

http://www.decompileandroid.com/

Or even download more free sophisticated tools ;

https://apkstudio.codeplex.com/

Holy Sh$$ – Don’t Panic!,

What do I do to protect my lovely source code….

Well I think follow a few basic rules;

Its nice to protect your source but any decent developer can pretty much copy it from looking and getting to understanding its features , whilst then trying to add on their own stamp.

And lets face it , a majority of what you want is out on the world wide web sitting in some open source project begging you to become part of its community.

Happy reverse engineering! :).

Apache where has my HTTP variable gone

I had a problem where for some reason my restful services protected by an api key were not working.

I couldn’t understand why mmmm what have I changed, oh yes I updated Apache so lets dig further.

After some debugging I found that the HTTP header variable I was sending was not there …..but hang on I’m sending it in the code I can see it…. variable ‘API_KEY’

I then looked up about the changes in Apache and you never guess what, later apache versions drop invalid header names that contain underscores.

Here is reference for anyone http://httpd.apache.org/docs/trunk/new_features_2_4.html

mod_cgi, mod_include, mod_isapi, … Translation of headers to environment variables is more strict than before to mitigate some possible cross-site-scripting attacks via header injection. Headers containing invalid characters (including underscores) are now silently dropped. Environment Variables in Apache has some pointers on how to work around broken legacy clients which require such headers. (This affects all modules which use these environment variables.)

and we can always look at the standards

http://tools.ietf.org/html/rfc7230#section-3.2 “3.2.6. Field Value Components”

If you want to work around it you can view some pointers provided by apache documents

but, for me I can live with this and simple rename my variables to have a dash instead (API-KEY) phew everything is working again…

Hope that helps.

Neil

Cordova WebView Issues Android 4.3.X and below ( pre kit kat)

Today @alexbergin and I had an issue with one of our mobile apps that simple is a cordova wrapper that loads a WebView to show a website formatted for mobile devices.

The application worked fine on all devices except for Android pre kit kat , so thats’ Jellybean and below. There was strange issues with SVG graphics , javascript menus that slided in were just going crazy, it just didn’t function as expected.

Why ?

Cordova on Android 2.3 all the way up to Android 4.3 uses the stock Android browser to display applications. Luckily I have two phones I use to test.

Samsung Galaxy S4 – Android 4.3 (Jelly Bean)
Nexus 5 – 5.0.1 (Lollipop)

We could see the issues loading the stock web browser so worked out it was something to do with the WebView being used by Cordova to render the page.

Ok So how do we fix it ?

Like most things we are not first to have issues, so a little bit of google-ing pointed us to the cordova plugin webview-plus

Installing the plugin by using the cmd line didnt seems to work at time of writing this so we opted for the manual method.

We had a couple of issues when trying to build;

Issue 1;

\build.xml:601: The following error occurred while executing this line: \plugins\com.ludei.webview.plus\android\build.xml:55: sdk.dir is missing. Make sure to generate local.properties using ‘android update project’ or to inject it through the ANDROID_HOME environment variable.

Making sure you set the ANDROID_HOME environment variable will fix that problem.

Issue 2;

\build.xml:601: The following error occurred while executing this line: \build.xml:542: Unable to resolve project target ‘Google Inc.:Google APIs:19’

This required some extra SDK compnents to be installed as per the following blog post

Issue 3;

We then had the app starting but then crashing before it would load anything up. This required that we did an ‘ant release’ on the plugins source as discussed in the webview project

This should then get your application up and running , we did notice we had some other error with SSL pages not showing that didn’t have a valid certificate but we simply removed https in these situations as it wasn’t important in our scenario.

Hope that helps someone else from going mad 🙂

URL Not Found Android Studio Install (Access Denied)

Normally I use eclipse for Android development but now that Android Studio looks to be the IDE of preference I want to make sure I star using it. Android Studio is built on intellij which is a bonus as I really love jet brains software.

First problem I have hit setting up on my lovely new Window 8 machine was an error with the SDK installing, which I have not had before so best to make a note now so I save time
when I have the problem again ( no doubt I will have to install windows more than once 🙂 ).

The error is as follows ;

Downloading Android SDK Platform-tools, revision 20
URL not found: C:\Program Files (x86)\Android\android-studio\sdk\temp\platform-tools_r20-windows.zip (Access is denied)
Downloading Android SDK Build-tools, revision 19.1

I guess its not enough that I work on my machine with an Admin account, UAC is disabled as much as it can be and yet still! I have to tell the program ‘Run As Administrator’! great :).

So if you hit the good old Access denied when installing the SDK, make sure you run the android.bat file as admin to make the problem go away.

Cheers

Neil
Reference that helped me realise what was wrong.

http://android.stackexchange.com/questions/74975/url-not-found-error-in-sdk-manager

JavaScript new Date() NaN on iPhone

This is one of those problems that in reflection is rather simple but at the time is very very (very!) annoying.

Background

I’m writing an application that synchronizes data to and from a mobile device and the application has a display that will tell you how long since you last synced. The application gives back the correct information on my Android device but on an iPhone I used for development ( well the wife’s phone , don’t want to admit to owning one :), that’s a  joke for you hardcore apple lovers, I was getting NaN (not a number).

Why the Problem ?

I’m getting the issues and other’s out there may also be for the same reason. I am passing a string to the Date object and is in the following format ;

yyyy-mm-dd hh:mm:ss

It turns out that The yyyy-mm-dd (ISO 8601) date format is not supported in Safari and IE. It is part of ECMAscript 5.

I wasn’t sure how to reproduce the issue at first as it was happening on the iPhone but realizing it may be rendering in Safari I downloaded the safari web browser to my windows machine.’

Example of Date Problem

Safari: Calling new date in Safari with the format I use in my application.

safari_newdate_err

Chrome: Exactly the same code and a Date object is created.

chrome_newdate
Getting around the problem

To get around the issue I check on the mobile if its running on a Apple product and then I simply reformat the date so it creates a new Date object in the following format ;

mm/dd/yyyy hh:mm:ss

Safari: new Date with altered format.

safari_newdate

I have used Phonegaps standard application object and added a function that checks for the device

var app = {

isAppleDevice: function() {
    if (navigator.userAgent.match(/(iPhone|iPod|iPad)/) != null) {
      return true;
    }
    return false;
  },.....etc

Then I can simple determine that when the application is running on iPhone/iPad I can alter the date (assuming myDate variable is in format mentioned at start of the post).

if (app.isAppleDevice()) {
var dateParts = myDate.substring(0,10).split('-');
var timePart = myDate.substr(11);
myDate= dateParts[1] + '/' + dateParts[2] + '/' + dateParts[0] + ' ' + timePart;
}

Hope that helps someone. I found a useful date library in my searches for the answer but the simplest solution was the one in my post :).

Hope that Helps

Thanks for reading.

Neil

Debugging Phonegap on Android With Chrome

I have been working on a project that involves phonegap at work and I was going crazy trying to sort out some of the strange design problems when publishing my application to a physical mobile device.

There are tools out there like ripple for emulating phonegap , you can even use the chrome tools to set the device and emulate it to a fashion, but it always looked different on the physical phone ( arrrrrrrrrrh! moments ).

So how do we solve this ?

Ok, lets first outline some of the prerequisites as I hate following a post to find that it wouldn’t work because I didn’t have the correct versions anyway.

Prerequisites

  • Phonegap 3.3 ( or higher)
  • Android Device (kitkat or higher)
    *note your device needs to be in developer mode.
  • USB Cable (normal charger cable)
  • Chrome (30 or higher)

Required project changes.

In your ‘AndroidManifest.xml’ you will need to make sure you are targeting the SDK version 19 (kitkat).

<uses-sdk android:minSdkVersion="15" android:targetSdkVersion="19" />

The ‘project.properties’ will also need to target the correct Sdk Version. Alter the target as follows;

target=android-19

Phonegap basically wraps your HTML into whats called a WebView, so the next step is to enable debugging for this special view.

Update your main java file (default activity) and include the following imports to the top of the file.

import android.os.Build;
import android.webkit.WebView;

Then within the onCreate method you can enable debugging buy checking for the build version and enabling debugging for the WebView;

if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
WebView.setWebContentsDebuggingEnabled(true);
}

You are ready to then build your project and publish it to your device.

Inspecting from Chrome.

Your can start your app on the mobile now or later , but you must make sure you have it connected via the normal USB cable.

In chrome type the following address to list the connected devices.

chrome://inspect/#devices

You should then see your device and project name shown after the WebView.

phonegap-chrome-debug

Clicking the inspect link then loads up the wonderful Chrome Dev tools we ahve all come to love and now you can see and change the HTML that is running within the Phonegap framework ( pretty cool ).

Happy Debugging…

Neil