htc

HTC One M9 – I’d wait for something else…

I bought an HTC One m9. Having previously owned an M7 I thought I was in for a wonderful time. Nope.

The following has been my experience:

  • The camera is alright, but the M7 camera I felt was better. Even though this one shoots in 4k. Also, it’s extremely slow if you decide to save everything to a memory card instead of the internal memory.
  • It gets way too hot, as I write this my phone is asleep, I haven’t used it all all today. I’m not uploading or syncing…and my phone is still hot. It’s obviously working on something in the background that I can’t control, which means the battery will be dead in about 4 hours. Thanks HTC.
  • It’s slippery. The old brushed aluminum has been upgraded to polished aluminum, looks nice but the fucking thing is like a bar of soap when taking out of your pocket. Especially if you have dry hands.
  • The overall experience is slow. Animations are delayed, I have to wait about 2-5 seconds after waking my phone up before the screen appears. There is about a second delay between my tap and something happening on my phone.
  • Constant airplane mode. The only way I’ve found to keep my phone on all day is to put it on airplane mode (which means I can’t really use it). Basically, I can’t use my phone at all if I want it to last the 9 hours HTC said it will.

I’m so frustrated with the overall experience of my phone, that I may actually spend the money to just go back to iphone. I already used my upgrade on my htc, so I’ll have to pay full price. Even with all that it may ultimately be worth it.

HTC, you won me as a customer with the M7 and lost me with the M9, I’ll never take a risk on your phones again.

code

Browser Won’t Display SVG Locally?

Ok here’s the sitch.

You can pull in svg from a cdn and everything work. But when you try and use your local svg graphics, everything goes to shit.

It’s probably that you’re not serving svg in with the right headers, especially if you’ve saved your svg graphic from illustrator. There’s a great explanation here: http://kaioa.com/node/45

If you’re running XAMPP do the following:

pico /Applications/XAMPP/etc/httpd.conf

And add the following to: ”

<IfModule mime_module>

# add support for svg
    AddType image/svg+xml svg svgz
    AddEncoding gzip svgz

Restart XAMPP and you should be serving svg!

 

 

xcode

IOS Development Tips and Tricks

Ok, this will be on-going. Below you’ll find a collection of tips and tricks to get things up and running:

XCode

  • keep it up to date with the latest from app whenever possible
  • let XCode do all the work when setting up and provisioning profiles (Preferences –> accounts)
  • When your development environment is setup and working, export your developer profile (Preferences –> accounts –> [account name] –> settings icon –> export)

Member Center (Developer Portal)

  • Always visit this site on safari, never on google chrome (apple codes uses scripts that won’t compile under current v8 rules with chrome)

Publishing Your App

xcode

IOS Native App Dimensions

Been a while since I made a native app for IOS, this article is to refresh my memory and hopefully it might be useful to someone else. Forgot the screen dimensions but found a great resource here:

http://iosdesign.ivomynttinen.com/

The screen sizes are as follows:

iPhoneComparison

So for retina devices, you would multiply the dimensions of the image by 2 or three depending on the display resolution. So for iPhone 4s you would make a retina image the size of 1280 X 1920 etc. So for the iPhone 6+ you would do 3726 X 6624. Apple recommends you use a launch file/storyboard file for more images on iphone 6 and 6+.

 

 

 

 

 

 

javascript-site

A Difference Between JavaScript Arrays and Associative Arrays

I’ve been crunching a large government dataset for a project I’m working on. I had to key an array with the ids of some of the data. However, I noticed when I tried to stringify my array, it produced a ton of null values. It took me a second to realize this:

// an associative array in javascript is really just an object
var assoc = {};
// a numerical array is an object with an array constructor
var keyed = [];

// generate some random items for an array
for(var i = 0; i < 1000; i++) {
  var rand = Math.floor(Math.random() * 10000 + 1);
  assoc[rand] = rand;
  keyed[rand] = rand;
}

// count the number of items in the assoc array
var count = 0;
for(var name in assoc) {
  count++;
}

// log them out so we can see the difference
console.log("assoc length = " + count);
console.log("keyed.length = " + keyed.length);

See the Pen eNBNpz by Mike Newell (@newshorts) on CodePen.

 

 

You can see from the above you cannot key a javascript array with random values without the array constructor putting in the missing keys as null. Basically, this makes sense if you look at how arrays are stored in memory, it would be mayhem if you tried to store random keys. So in some cases, you’re better off using a javascript object in literal fashion and key it like you would the array. This way you only need to parse the items stored and not the missing keys.

javascript-site

Javascript Inheritance: Prototype not Available in Instances

Just for reference. You may be dealing with Javascript inheritance and wondering how the hell you can look things up? For instance, lets say I have a Javascript class for animal, then another for cat and finally one for a tabby cat. Let’s say I’ve defined some things in each and I want to know what methods I can call? Well, if you just log out the instance of the tabby named chester, you’ll see you done have a wonderful birds eye view of the tabby cat name chester. In fact, the only thing you’ll see is that you have public instance methods and properties. Where is the “meow” function? Where is the “walk” function?

function Animal(name, legs, species) {
	this.name = name;
  this.legs = legs;
  this.species = species;
  
	var walk = function() {
    console.log("pitter patter");
  }
  
  this.walk = walk;
  
}

function Dog(name) {
	this.name = name;
  this.legs = 4;
  this.species = "Canis lupus familiaris";
  
  this.bark = function() {
		console.log("woof woof");
  }
}

function Cat(name) {
  this.name = name;
  this.legs = 4;
  this.species = "Felis catus";
  
  this.meow = function() {
    console.log("meow!");
  }
}

Dog.prototype = new Animal();
Cat.prototype = new Animal();

function Tabby(name) {
	this.name = name;
  this.legs = 4;
  
  this.lookOutWindow = function() {
    console.log("sitting by the window staring at bugs");
  }
}

Tabby.prototype = new Cat();

var chester = new Tabby("Chester");
console.log(chester);

So how can we programmatically check to see if a method or property is available for us to use? Let’s say we have a cat with two legs (that can happen), now the method “walk” should be unavailable to us. You might try and use “hasOwnProperty”, but that would return false:

// does not have a species
console.log("chester.hasOwnProperty(\"species\") = "+chester.hasOwnProperty("species"))
// but obviously its working here:
console.log(chester.species)

So what do we do? Well, there are a couple options…

If you inspect an object in chrome, you will see there’s no property name prototype. That’s because prototype is used by javascript to construct the object, once its complete it’s not available as an object itself, however, you can still call “hasOwnProperty” on “hasOwnProperty” of a prototype (that’s confusing). There is a property of the object called “__proto__” but if you try to traverse it, you might find that property confusing (more here: http://stackoverflow.com/questions/9959727/proto-vs-prototype-in-javascript).

So let’s construct our methods a different way. Let’s say any time we call “new [Object]” we will also define a constructor and a parent. Then at the very least, we have something to reference inside our instances:

Cat.prototype = new Animal();
Cat.prototype.constructor = Cat;
Cat.prototype.parent = Animal.prototype;

Tabby.prototype = new Cat();
Tabby.prototype.constructor = Tabby;
Tabby.prototype.parent = Cat.prototype;

Now when we log out our instance of chester, we can see it’s fairly easy to call our parent. Now it’s fairly easy to tell how to access methods if you simple print out the object. Let’s put it all together:

function Animal(name, legs, species) {
	this.name = name;
  this.legs = legs;
  this.species = species;
  
	var walk = function() {
    console.log("pitter patter");
  }
  
  this.walk = walk;
  
}

function Dog(name) {
	this.name = name;
  this.legs = 4;
  this.species = "Canis lupus familiaris";
  
  this.bark = function() {
		console.log("woof woof");
  }
}

function Cat(name) {
  this.name = name;
  this.legs = 4;
  this.species = "Felis catus";
  
  this.meow = function() {
    console.log("meow!");
  }
}

Dog.prototype = new Animal();
Cat.prototype = new Animal();

function Tabby(name) {
	this.name = name;
  this.legs = 4;
  
  this.lookOutWindow = function() {
    console.log("sitting by the window staring at bugs");
  }
}

Tabby.prototype = new Cat();

var chester = new Tabby("Chester");
console.log(chester);


// does not have a species
console.log("chester.hasOwnProperty(\"species\") = "+chester.hasOwnProperty("species"))
// but obviously its working here:
console.log(chester.species)

// now lets check the prototype
console.log(chester.__proto__)
console.log("chester.__proto__.hasOwnProperty(\"species\") = " + chester.__proto__.hasOwnProperty("species"));
console.log(chester.__proto__.species)

// instance method
chester.lookOutWindow();

// now for the inherited methods:
// defined in cat
chester.meow();
// defined in animal
var walk = chester.walk;
walk();

See the Pen OVbLmY by Mike Newell (@newshorts) on CodePen.

Anyway, hope that clears things up a bit.

featured-site

Blow Up Doll High Five with Arduino and a Relay

We wanted to make a “high five” bot at work, because…

This was my first test, basically, an arduino runs a sonar range finder, when it detects an object within a certain distance, it activates a relay which allows current to flow into an air pump resulting in the blow up arm extending for a high five!

Here’s the code:

const int pump = 11;
const int pingPin = 7;

long in;

void setup() {
  Serial.begin(9600);
  pinMode(pump, OUTPUT);
}

void loop() {
  in = ping();
  
  if(in < 7) {
    digitalWrite(pump, HIGH);
    // fill the arm
    delay(2000);
  }
 
  digitalWrite(pump, LOW);
  delay(100);

}

long ping() {
  long duration, inches, cm;
  
  pinMode(pingPin, OUTPUT);
  digitalWrite(pingPin, LOW);
  delayMicroseconds(2);
  digitalWrite(pingPin, HIGH);
  delayMicroseconds(5);
  digitalWrite(pingPin, LOW);
  
  pinMode(pingPin, INPUT);
  duration = pulseIn(pingPin, HIGH);
  
  inches = microsecondsToInches(duration);
//  cm = microsecondsToCentimeters(duration);
  
  Serial.print(inches);
  Serial.print("in, ");
//  Serial.print(cm);
//  Serial.print("cm");
  Serial.println();
  
//  delay(100);
  
  return inches;
}

long microsecondsToInches(long microseconds)
{
  // According to Parallax's datasheet for the PING))), there are
  // 73.746 microseconds per inch (i.e. sound travels at 1130 feet per
  // second).  This gives the distance travelled by the ping, outbound
  // and return, so we divide by 2 to get the distance of the obstacle.
  // See: http://www.parallax.com/dl/docs/prod/acc/28015-PING-v1.3.pdf
  return microseconds / 74 / 2;
}

long microsecondsToCentimeters(long microseconds)
{
  // The speed of sound is 340 m/s or 29 microseconds per centimeter.
  // The ping travels out and back, so to find the distance of the
  // object we take half of the distance travelled.
  return microseconds / 29 / 2;
}

If you don’t know how to wire a relay, refer here: http://iwearshorts.com/blog/how-to-wirecontrol-a-relay-with-arduino-or-raspberry-pi/

I used:

  • a JZC-11F relay (5V vcc and 120V rating up to 5 Amps)
  • air pump from amazon
  • ping sonar finder
  • arduino
  • diode
  • leds (for effect)
javascript-site

Easily Embed Javascript into a Gif Header

ok, first off, don’t do this…

Let’s say you find a website where you can add “script” tags to a page. Well usually, you can’t do anything with it since browsers won’t let you execute a file from another site. To work around that, we can load a gif in the source:

<script src="something.gif"></script>

Well, your browser will think that’s fine, but it will also to to interpret the encoding of the image as javascript. So now all we need to do is insert some ascii chars…

mn has a good tutorial on how to finish this up over here: http://jklmnn.de/imagejs/

Here are some more resources:

Have fun!