Ionic, Cordova, Android

The Ionic docs describing development on Android are a bit out of date.
These steps worked for me on Windows 10.
  1. Assuming Java, JDK, and Ant are installed with `ANT_HOME` set to the directory containing `bin/ant`, and `JAVA_HOME` is set.
  2. Install Android Studio.
  3. Run Android Studio, select the `Configure` drop down, select `SDK Manager`, use it to install the relevant SDK (1.7.1 for me) and the `Android API`.
  4. Copy the `Android SDK Location` displayed at the top of the that Stuio window (eg `C:\Users\$username\AppData\Local\Android\Sdk`) into the env var `ANDROID_SDK`.
  5. Add to `PATH` the values `$ANDROID_SDK/tools` and `$ANDROID_SDK/platform-tools`.
  6. Sset mobile to Debugging mode (`Settings` > `About Phone`, and tap `Build number` seven times). Turn on `USB Debugging`.
  7. Connect phone to PC via USB. Grant access rights and install Windows drivers for the mobile phone when prompted/donwload drivers from vendor’s site.
  8. On PC, run `adb devices` and check the mobile is listed, if not visit SO.
  9. Finally, launch the app with one of these methods:
    1. In MS VSC, add `Cordova Tools` and add debug targets in `launch.json`
    2. ionic cordova run android --livereload

Common problems seem to be:

  • not having driver software on the PC — it often goes by the name of a ‘bridge’ or ‘connectivity’
  • ‘phone USB connection being in ‘charge’ mode rather than ‘media connection’ mode

Credit Card Details Storage

Avoid liability: why not  encrypt them and have the client store them for latest display and stateless use of the serer?

Probably because all forms of local storage are an out-of-sync mess (no pun intended).

Perhaps Mozilla’s localforage is the answer? Though not through its messed-up Backbone ‘driver’.


Over the weekend I had a go at three.js and Conway’s Game Of Life — I’m sure I can get it to make music somehow, but am disappointed to learn that the shapes appear not to be photosensitive, and ray tracking in JS is not fast.

Three.js is great for someone like me, who has never programmed 3D graphics — the shader language looks interesting.

Used require.js again — this time set up with Yo and Bower — the wiring of require took about five minutes. Nice workflow, I’m sticking with it. Tests were in Qunit, sadly, but maybe I’ll write a Yo generator for requirejs, bower, and mocha.

How to welcome new staff

I’ve worked at more than 15 companies in the past 15 years — I enjoy the variety and the choice of ‘holiday’ time to spend with my little kids.  From these 15+ companies, I can certainly say without the slimmest doubt, that there is a right way and a wrong way to welcome new staff, even if only a contractor. I’ll keep with the

Know when your new member of staff is arriving, and meet them at reception. Sounds obvious, but I’ve had to wait for thirty minutes for an interview with a chap at the one place.

Show them around the office. Offer a cup of tea, coffee, water as you show them the facilities.

Show them the fire exists — you are legally obliged to do so, at least in the EU.

Please have their personal computer ready, with monitors, and any licence keys. Again, this may sound obvious, but most companies do have a computer for me when I join, even though their ‘policy’ prevents me using my own machine.

Please prepare an account for them on all relevant servers.

Give them something to read to help them settle in — your technical documentation is better than your corporate blurb.

Show them your product, show them your code. You are probably very busy, you probably have a sprint ending or a release due (which is probably why you got to hire a contractor), but to leave the new member of the team alone, unattached to a team, without but SCM access, is a false economy — more efficient is to pair the newbie with a senior dev for a day and a bit.

Show them around, set up what needs to be set up, introduce them to who they will need to know, and let them join the sprint as it starts.

Next time, a guide on starting a new contract (in short: expect nothing, and be polite!).

Angular Mixer

A coupe of years ago, whilst working away from home, I started writing a sound mixer in MooTools. All went went, until I hit looping bug in Firefox and then my l-system project caught my eye again…

Now I’m looking for something to work on with Angular, shortly after being handed a bunch of mp3 tracks split from a Logic session, so …

Why Angular?

In 1997 I wrote a clone of PacMan for Netscape Navigator, moving DIV elements with CSS. Although I have largely earned my living as a server-side developer since then, I have written many JavaScript applications, using MooTools, jQuery, and avoiding libraries altogether: at every hand-over meeting, I have had to spend hours explaining what have become to me fundamental concepts in JS, borrowed from my server-side work, such a views, bindings, injection, controllers, routes — and to those who are familiar with these concepts, I have had to explain my own implementations of these. I’m actually quite proud of my own implementations: they’re clean and efficient, but repeatedly explaining them is a bit of a drag. A library that can do the same things, and more, as well as offering reasonable documentation and community support, removes from me the burden of general documentation and education, as well saving a lot of start-up time.

Where to start

My last, and first, Angular project was a single-page application to add subtitles to video files. It took a couple of half-days to write, and served as a great introduction to the way Angular works. But it rook me hours to find a clean entrance, and the chosen Angular seed on GitHub modularised in a way I didn’t find constructive for my project, being functional rather than conceptual, rather at odds with the OO approach I prefer.

When recently spent some time updating some code for Symbox in the UK, I came across a Backbone project that used grunt and bbb. Since the last release of bbb was some years ago, I brought the project’s gruntfile up to date, which negated the need for bbb, but did show me that Yeoman had finally taken off. So this time, I’ll start with Yeoman.


From the Yeoman homepage, set-up looks quite straight forward:

npm install -g generator-angular  # install generator
yo angular                        # scaffold out a AngularJS project
grunt test                        # test your app
grunt serve                       # preview your app (formerly `grunt server`)

Looks like we get bonus HTML5 boiler plate, and a reasonable staring point in js files. Now I can think about my application.

Application Requirements

Other than being testable, package-able, and easy to read, the application needs to:

  • play multiple audio files
  • play local or remote audio
  • start and stop playing individual tracks at discrete points
  • loop specific points in tracks for specific periods
  • muting of tracks
  • changes to pan
  • changes to volume
  • recording and playback of mute/pan/volume events

In Agile style, best to start simple, with an object representing a single audio track.

In my previous attempt, I had a container for tracks that visually represented time, but found — as in any sequencer — milliseconds an unnatural unit for music. So this time, I’ll work in units based on the size of audio files, placing the burden of timing on the creator of the audio files. After all, the intention is to remix existing multi-track recordings.

Prototype, Trains, Marketing

I was asked the other day if I’d ever used Prototype.js, and I completely forgot that I had used it in Train Game — the library is such a natural extension to JavaScript that its use did not stick in my mind. Although, having now looked again, I do wonder what it is doing with my error messages….

The reason I forgot Train Game is that I never got past the round of development. The idea is simple — allow a child to build a train track, with points, and watch the trains — this could keep a three- or four-year old boy amused for an hour, and it’s not hard to program, as it is all grid-based.

Thing is, I then thought about extending the game to allow varied size pieces of track, and selling the software to those who make the Thomas And Friends tracks. It’s a great idea — design your layout from track in their catalogue, and order online with a single click: so simple, a three- or four-year old child could do it.

But I have no idea how to sell this, where or how to raise capital: all I know is how to program, hire a and run a development team, apply graphics. I think I could even have a selected number of track pieces lay themselves out in a number of patterns dreamt up by the computer.

It would take six months to publication.


JavaScript Poster Text

A year or so ago, I wrote some client-side JavaScript to allow allow input text to flow around images — it worked perfectly, and was optimized through a server-side process that produced a mask map from the image, which could be sent as JSON with the choice of image being mapped. Whilst optimised, it was non-dynamic — there were no uploads of user-supplied images, nor any provision in the client to analayse such images, tough that would be only a few lines of code. The purpose of the project was to allow users to create their own type-wrapped postcards, and that worked perfectly.

The next version of the library will have a version that allows not the wrapping of text to an image, but the automated sizing of text such that every line is fully justified (flush from margin to margin), with lines of less characters generally using bigger font sizes to till the line.

The user will be able to enter text with or without manual line breaks, and real-time editing should be supported.

It should be easy to program all of this within a day, perhaps two. My only concern would be cross-platform DOM manipulation, because I have used MooTools, jQuery and such libraries for so long now, that my DOM API is rusty. Then again, there are few places where node creation is actually necessary, so it will not be long-winded enough to justify use of any library.

Day two

Cards - 2013-10-22_14.46.35This morning I managed to tweak the existing e-card code to automatically scale free text, preserving line breaks. This afternoon, I should break it away from the input UI.


My First Facebook Applicaiton

This Timeline Word Cloud is my first Facebook application, written in about 16 hours — most of which were spent dealing with horrendous problems within the Facebook JavaScript SDK.

On the whole, it is a pleasant SDK, with clear documentation and plenty of Stack Overflow examples (some ugly, some neat).

What did bugged me was that WebKit-based browsers get very upset when Facebook’s ‘Login’ button/dialogue inserts an IFRAME with an https scheme when its images are hosted on a server with an http scheme. This would have been less of an issue had OSX Chrome actually reported the issue.

(JPEG Image, 519 × 519 pixels)

After writing my own Facebook log-in routine, everything worked like a charm — up to converting the beautiful d3 word cloud SVG to PNG, when Chrome freaked out that I was manipulating Blob and Object URIs. I updated my use of the word cloud to render directly to a canvas from which I could gather pixels to create a URI for my image.

I would have liked to have written the app to use a Facebook ‘canvas’ — to appear within the Facebook site itself — but my host, Vision Internet, require a modest £50 a year for a usable SSL certificate, which this application really doesn’t justify, yet.

I was pleased enough with the results to use the Graph API to produce word clouds of friend lists activities, too — which took about two hours.

What’s the point?

I’ve learnt how to tie-in with Facebook, which was no big deal. I’ve learnt how tight Chrome is, which was news.

Can it pay? No, I doubt it — but when I was developing the first prototype (an hour’s code), I was using d3 bubble graphs, and it might be interesting to see those bubbles filled with images from a paying agency — particularly if the agency had a friend list of news providers: instant and up-to-date promotional posters for current affairs. That would be fun.