Posted by & filed under Uncategorized.

I think that everyone has one trope in fiction that they can’t stand and just breaks immersion for them.

Mine in the Mafia super soldier.

You see, we have a capitalist system. People involved in organised crime are, on some level, losers. They are using their willingness to engage in violence to compensate for their failures in other areas.

The best mobster fiction implicitly acknowledges this. Tony Soprano could have never succeeded in legitimate business. Michael Corleone’s efforts to legitimize the family ultimately failed.

I just can’t accept that an invincible semi supernatural super soldier decided that the best way to support himself was to work for some low level mobsters in North Dakota. You need to explain that shit.

Posted by & filed under Uncategorized.

First, the basics. Access video / audio using GetUserMedia.

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
window.createObjectURL = URL.createObjectURL || webkitURL.createObjectURL;
 
var video_el;
 
var showVideo = function() {
    video_el = $('#localVideo')[0];
    navigator.getUserMedia(
        {
            video: 'true',
            audio: 'true'
        },
        //successs
        function(stream){
            var url = createObjectURL(stream);
 
            video_el.src = url;
        },
        //error
        function(err) {
            console.error("Stream Error", err)
        }
    );
};
 
$(function(){
    $('#btnShowVideo').on('click', showVideo);
});

Key points: calling `navigator.getUserMedia` as `window.getUserMedia` will throw an illegal invocation error. `Function.prototype.bind` doesn’t seem to help.

<div><video id='localVideo' autoplay='true'></video></div>
<div><button id='btnShowVideo'>Show Video</button></div>

Just a video element and a button. Note the `autoplay=true`. Without that it will just load the first frame.

At this point you should be able to see the feed from your webcam in your browser.

To go farther we need two more functions, `RTCPeerConnection` & `RTCSessionDescription`

Naturally they are also prefixed….

var peerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || 
                    window.webkitRTCPeerConnection || window.msRTCPeerConnection;
var sessionDescription = window.RTCSessionDescription || window.mozRTCSessionDescription ||
                    window.webkitRTCSessionDescription || window.msRTCSessionDescription;

To mix things up, here’s the code on CodePen.io

Posted by & filed under Uncategorized.

Effective Angular.js

This post is about some strategies I’ve found with working with Angular.

First, it’s important to understand references and object lifecycle.

Programmers who come from back end web development frequently don’t have a solid grasp on these.

Look at the following code

 
app.factory('DataService', function($interval){
 
    var service = {};
    service.ticker = 0;
 
    $interval(function(){
        service.ticker++;
    }, 1000);
})
 
 
.controller('Controller1', function($scope, DataService){
    $scope.ticker = DataService.ticker;
});
 
.controller('Controller2', function($scope, DataService){
    $scope.DataService = DataService;
})
<div ng-controller='Controller1'>
{{ticker}}
</div>
<div ng-controller='Controller2'>
{{DataService.ticker}}
</div>

Obviously I trimmed some of the boilderplate.

What happens when you run this code?

The first div will show 0. The second div will start at 0 and tick up every second.

Why? The second controller is accessing the ticker value through a reference. So it’s the same as the variable in the service.

Now instead look at the following HTML.

<div ng-controller='Controller2'>
    <div ng-if="DataService.ticker % 2 == 0">
        <div ng-controller='Controller1'>
            {{ticker}}
        </div>
    </div>
</div>

What happens this time? Ticker increments by 2 every 2 seconds.

Why?

Because the controller is re-created every time ng-if switches from `false` to `true`.

So knowing this, here’s an important fact.

If you’re on mobile, where network connections have very high latency, you want to avoid fetching / storing data in your controllers.

Instead, keep your data in services in shared arrays. Angular’s dirty checking will take care of updating your scopes.

Posted by & filed under Uncategorized.

I was trying to use ng-animate in a new project. It’s always a tricky piece of software.

After the 1.2 re-write it works by adding and removing classes on timers for various directives. This can have some unexpected side effects.

Consider the following code on plunker

 
<!DOCTYPE html>
<html>
  <head>
    <script data-require="angular.js@*" data-semver="1.4.0-rc.0" src="https://code.angularjs.org/1.4.0-rc.0/angular.js"></script>
    <script data-require="angular-animate@1.4.0-rc.0" data-semver="1.4.0-rc.0" src="https://code.angularjs.org/1.4.0-rc.0/angular-animate.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>
 
  <body ng-app='myApp'>
    <div ng-controller='MainCtrl'>
      <button ng-click='nextSet()'>Swap List</button>
      <div ng-repeat='item in data_set' class='list-item'>
        {{item}}
      </div>
    </div>
  </body>
 
</html>
var sample_data = [
  [
    'one',
    'two',
    'three',
    'four'
  ],
  [
    'une',
    'deux',
    'trois',
    'quatre'
  ]
];
 
angular.module('myApp', ['ngAnimate']).controller(
  'MainCtrl', function($scope){
    var current_set = 0;
    $scope.data_set = sample_data[0];
    $scope.nextSet = function(){
      current_set = (current_set + 1) % 2;
      $scope.data_set = sample_data[current_set];
    }
  }  
);
.list-item {
  transition: transform .2s ease-in-out;
}
 
.list-item:hover{
  transform: translateZ(40px);
  color: blue;
}
 
body {
  perspective: 200px;
  perspective-origin:0% 50%;
}

You’ll notice an odd bug while playing with it. When you switch the lists there’s a delay in removing the old items.

If you remove the ‘ngAnimate’ injection then it goes away, and it works normally.

Odd, right?

What’s happening is that the classes / attributes ng-animate is adding are trigger the ‘transition’ css line and delaying removal by .2s.

What’s the fix? The following works.

[data-ng-animate].list-item {
  transition:none;
}

Plunkr

data-ng-animate isn’t documented, so it’s probably going to break in the future. If it does, use the Chrome “break on attribute changes” feature in chrome to inspect what’s happening and use appropriate new CSS.

Posted by & filed under Uncategorized.

This post is here to potentially save someone elses sanity.

MacOS 9 had a case insensitive file system that preserved case. So say you had ‘Foo.txt’. ‘vim foo.txt’ would open ‘Foo.txt’.

OS X, by default, still has this behaviour. You can create a case sensitive (CS) HFS+ partition if you want to, but it doesn’t ship with one.

This is important, because Mac installers occasionally fail on case sensitive filesystems. Trying to install X-Com from Steam on a CS drive left half the files in X-Com and the other half in X-COM.

In a subtle change, iOS is case sensitive.

So if you’re developing a Cordova / PhoneGap app, and refer to a file named “Foo.js” as “foo.js” it will work perfectly in browser. It will work perfectly in the simulator. It will fail on device.

Here’s another huge source of “fun”. Git won’t recognise case changes on a case insensitive file system without passing the correct options.

So you’ll change the case on one of your files, everything will work perfectly for you, and a linux user will check out your code and have files in different cases than you see on your local filesystem.

Be warned, this will bite you.

Posted by & filed under Uncategorized.

With the primaries in the US and the leadership race in Ontario someone needs to use the following speech idea…

Picture this, in response to a question about how you plan to win.

Let me be brief. In this campaign I need to appeal to the base, but also motivate and expand the base. And do you know why? Let me explain.

I’m all about that base. About that base. No treble.

Posted by & filed under Uncategorized.

Ok here’s an experiment I’d like to see someone run. First, find a group of Mac users who have never used XCode. Then run the following experiment.

Prep:

Disable internet on the laptop. Open XCode, create a new tab based iOS project. Double click on the storyboard to open it.

Now, hand the laptop to the subject. You are not allowed to open any panels for them prior to handing over the laptop.

Their goal is to add a 3rd tab screen to the app. They have as much time as they want. Offering a cash prize to the fastest person is recommended, as they are likely to give up after the first hour.

I have never seen someone do it without being shown or watching a youtube video.

XCode is the least discoverable GUI program I’ve ever encountered.

Posted by & filed under Uncategorized.

I caught the Toronto showing of Game of Thrones on IMAX last week. It was very impressive, I’m actually wondering how it was done…

GoT is shot using Arri Alexa cameras. Digital, 2880×1620.

So they couldn’t upsample to IMAX with a new film scan. I noticed that the VFX didn’t transition well. I could see compression artifacts on the opening sequence, and some of the digital effects were very obvious.

My best guess is that the IMAX crew had the raw 2880×1620 video, but the VFX were only ever rendered at 1080p.

Posted by & filed under Uncategorized.

I thought I’d add my view to the classic question.

I think the key point that people miss is the personalities of the animals involved. 

Horses are herbivores.  They aren’t vicious and they don’t engage animals many times their size of they can help it.

Ducks, however, are terrifying.

They’re direct descendants of dinosaurs.  They’re omnivorous. And their females have evolved multi chambered vaginas as a defense against rape. Because duck rape is that much of a problem.

In fact, gay duck necrophilia is a real thing.

So this is how I see things playing out.  One hundred duck sized horses would be like fighting one hundred rabbits, only with and smaller legs and teeth. They really can’t do anything, and they’ll scatter after you stomp on one or two.

The horse sized duck is a creature of nightmares. It’d be like fighting an ostrich – which can disembowel you with one kick. Only larger, and with a penchant for rape.  It would easily kill you. Then either eat or violate you.

Your only hope involves the way that scaling up a duck is done.  A duck’s hollow bones couldn’t support a horse sized body.  Its legs would shatter as soon as it tried to stand.

Beware ducks.