Interesting Stuff for June 2016

Windows:

To find which version of Windows you are running, enter the following commands in the Command Prompt or Powershell:

wmic os get caption
wmic os get osarchitecture
  • Web Development:
  • svg-sprite –  a low-level Node.js module that takes a bunch of SVG files, optimizes them and bakes them into SVG sprites
  • Grumpicon – The tool processes a set of SVG files, generates PNG fallback images for legacy browsers, and exports a demo page showing how to use the final icons.
  • svgo – SVG Optimizer is a Nodejs-based tool for optimizing SVG vector graphics files.
  • Android Development
  • jsonschema2pojo – Generate Plain Old Java Objects from JSON or JSON-Schema.
  • http://tools.android.com/tips/layout-designtime-attributes: Android Design Time Layout, display values in the designer, but not included in the build.
  • http://tools.android.com/: Android Studio Project Site

Location

Retrofit

Picasso

 

Mobile Safari Debugging

One of the biggest challenges with developing mobile web applications is the ability to debug them.  In general the work the same as the desktop browsers and you can use their development tools.  But other times it can be a true nightmare when something works everywhere except on the mobile platform.

Fortunately Apple now supports debugging of Mobile Safari on iOS6  through the debugger provided on the Safari 6.0 (Mac Only) browser.

  1. On the device, go to Settings -> Safari -> Advanced and enable Web Inspector
  2. On the Mac, go to Safari -> Preferences -> Advanced and enable “Show Develop menu in the menu bar”
  3. Physically attach the device to the Mac.  A device menu will appear under the Develop menu on Safari.
  4. Select your device and begin debugging.

More detailed versions can be found here:

 

Mobile Safari Home Icon – Unable to Launch App

As part of one of our web applications, we launch a separate iOS payment application on the handheld, process the payment, and then returns to the web application.  This is done by calling a special URL to launch the application with the format “app://StartPage/…”.

On Mobile Safari, everything works fine regardless of how the launch URL is opened.  It works through all of the normal methods:

  • window.open(url)
  • window.location.href = url,
  • As a link: <a href=”hybridpins1s1test:/StartPage/…”/>

However, If we do the same thing when the application was launched from a “Home Icon”, it only works if we use a link.  The other methods give an error “Cannot Open App, … The URL can’t be shown”.  This is apparently related to the popup blocker.

I found this on Stack OverFlow, Open External Website/Address From Sencha Touch Application,  to fake launching from a link.  It was originally from a post on the Sencha site: window.open() from toolbar button opens window, from list item a new tab??.

Ext.util.openLink = function(href) { 
  var link = document.createElement('a');
  link.setAttribute('href', href);
  link.setAttribute('target','_blank');
  var clickevent = document.createEvent('Event');
  clickevent.initEvent('click', true, false);
  link.dispatchEvent(clickevent);
 return false;
}

 

jQuery – Abort Ajax Requests

Aborting an Ajax Request

To abort a jQuery Ajax request, you simply call abort on the HTMLRequest that is returned by the $.ajax call.  For instance:

var xhr = $.ajax({
     type: "POST",
     url: "some.php",
     data: "name=John&amp;location=Boston",
     success: function(msg){
        alert( "Data Saved: " + msg );
     }
 });
 //kill the request
 xhr.abort()

From SO – Abort Ajax requests using jQuery

 Examples of monitoring the transaction in Chrome and Firebug

Aborted Ajax Transaction in Chrome

Aborted Ajax Transaction in Firebug

Reference:

 

HTML5 Signature Pad

 Signature Pad

Signature Pad is a jQuery plugin for assisting in the creation of an HTML5 canvas based signature pad. Records the drawn signature in JSON for later regeneration.  Here’s a demo.  And a nice video walk-through, Capture a Signature with jQuery and HTML 5.

This all looked great, and seems to be very nice, but it relies on FlashCanvas, which is an HTML5 Canvas for Internet Explorer via Flash.  This in turn relies on Flash which of course does not run on iPads, so its a non-starter.  Perhaps there’s a way to just use it directly with Canvas, but I didn’t look that closely.

Andrew Trice: Mobile Signature Capture

Next I found Andrew Trice’s Mobile Signature Capture Project (the JavaScript version) which is just a basic HTML5 Canvas signature capturing module.  It just captures the mouse or touch events, draws it on the canvas, and then can be saved as a .png file.  Here’s the demo.

It doesn’t save the strokes, like the one we developed for Windows CE, but its good enough for now.  I stripped out the Modernizr check to determine if it is a touch device and just used ‘ontouchstart’ in window to save some overhead, and I was in business.

This is also nicely written up in Capturing User Signatures in Mobile Applications.

 

Learning HTML5 Programming

I’ve been spending a lot of time over the last six months and I’ve had some requests for what resources I’ve been using to learn what to do.  So here’s my list.

Books:

Web Resources:

Other: