I create apps sparingly, so I don’t update the site very often. I go to Workflow above and follow the steps there to make my apps, since I forget the steps in between making apps. So those are the links I update the most.
In the links above, I updated the Helpful Links, Apple App Store app assets, and Workflow > Using Cordova CLI on Mac OS X to build iOS apps. The latter two match up with the latest way Apple does things.
I wanted to be able to share selected content in my app to several social media places, and not merely by copy/paste to an email client. Now my app can share contents of a <textarea> field to Facebook, Google+, Google Drive, Dropbox, a memo app, email, and so on. It was easier to do than I thought. Here is how I did it for Android.
This assumes you already have a Cordova project built and Android platform added. (Steps will be slightly different for iOS. I’ll add those steps to this page when I’m ready.)
My current environment:
Mac OS X El Capitan 10.11.6
cordova -v: 6.3.1
cordova platform ?: android 5.1.1 Continue reading
This article assumes you already have a Cordova project ready to use. So you will use CLI to build the project first as you normally would, including adding an Android platform to the project and running cordova build android. You’ll still need to use the steps outlined in my article to build Cordova apps, including steps for installing plugins, icons, and screens: https://iphonedevlog.wordpress.com/2014/06/20/using-cordova-3-5-cli-on-mac-os-x-mavericks-to-build-android-apps/
You’ll need the dependencies set up if you’ve never made a Cordova project before. See: https://iphonedevlog.wordpress.com/2014/10/30/setting-up-your-developmemt-environment-for-cordovaphonegap-android-projects/
https://developer.android.com/studio/install.html Continue reading
I am continuing to add to my grunt task runner process that I started in this post, https://iphonedevlog.wordpress.com/2016/10/31/how-to-use-grunt-to-automate-repetitive-tasks/ (At a minimum, you need to do steps 1-6 on that page.)
In this new article, I’ll add one more processors that I had already listed in the previous article:
d. npm install grunt-contrib-imagemin –save-dev (minimize images to make them faster loading)
I am adding it to the Gruntfile.js file already created in that article. So if you are doing grunt for the first time, you should read that page first — it is an introductory guide for the first-time user. Continue reading
Grunt is a task runner. What that means is that it will open a specified program, perform specified tasks on your files, close the program, move to the next task on the list, then repeat until the end of the list. For each project you might lint (proofread) your css and js files, concatenate all your js files so they’ll load once, minimize your css and js files to make them smaller and load faster, compress your image files so they’ll load faster, and create several sizes of a mobile icon. Grunt can automate this process — you no longer need to do each task manually one by one. In this article, we’ll completely set up grunt on our system and make it run one task for us. I’ll explain how I got each piece of the puzzle so we’ll know how to set up the other tasks. Continue reading
The Moust videoplayer plugin allows the app to play videos within the app in fullscreen mode.
Unfortunately, the video does not play according to its own proportional size, nor is it confined to the proportion of the div it’s in. It breaks out to fit in the device window. We are given two different options for scaling the video. The following were the results when viewing a 320x200px video in my Nexus 7:
SCALE_TO_FIT_WITH_CROPPING As noted, this doesn’t show the whole video. In landscape, the top/bottom are cropped. In portrait, the left/right sides are cropped. No pinch-to-reduce functionality included.
SCALE_TO_FIT (default) This will stretch/squeeze the video to fit the device’s screen, whether horizontal or vertical orientation.
It makes the most sense to use this player when you want to play back the videos in the same mobile device you shot them with; then they would play back in perfect proportion. If you want your videos to play back reliably across Android devices in their own proportion, I recommend trying Crosswalk. Continue reading
Why consider using Crosswalk? Android devices have different implementations of the webview, in which our PhoneGap and Cordova apps appear. Vendors have made their own tweaks of the webview, causing our code to render inconsistently. So our CSS and scripts will play differently across devices or not at all.
For instance, the HTML5 <video> tag won’t work across all Android browsers:
controls preload="auto" width="320" height="240">
<source src="video/myvideo-h264.mp4" type="video/mp4">
I'm sorry; your device browser doesn't support HTML5 video in MP4 with H.264.
But it will work in the Chromium webview provided by Crosswalk. By adding the Chromium webview to our app, we will have a unified Android playing field for our app. Continue reading