Thats the same thing as saying “You know that iPhone app won’t work in IE.” It’s a completely obvious statement.

The web is a platform just like iOS and Android are both platforms (obviously). I (and many others) consider the modern web to be a subset platform to the web.

It makes sense that if you’re creating a web app for the web then you need to support IE which is a major player on that platform. However if you are creating a web app for the modern web then you don’t even need to consider that platform because IE9 is still not a serious player and won’t be for quite some time.

Developers who create native applications for iOS and Android are not bound by what IE can support. They are able and expected to use the latest and greatest apis available. If you want your web application to compete with modern native apps then you must write modern web apps which means not even caring how it works in IE.

CAVEAT: You probably work for someone who isn’t as forward leaning as you and can’t make the complete leap of faith. That’s completely understandable. This message is more directed at personal projects that you want to see have explosive growth.

The engaged masses who will swarm your server like locusts from the cloud and push your app over the tipping point are not using IE—they are using a modern web browser. So meet them half way by building ridiculously kick ass web apps with modern apis.

No tags

In javascript conditional expressions are decided by the result of truthy or falsy statements. Here I intend to list all of the falsey values.

A way to test if a value is truthy or falsey is to run it through an if else statement and see which path it takes.

  if (condition) {
    console.log("truthy");
  } else {
    console.log("falsey");
  }

Here are a list of all falsey values. Please let me know if I missed any.

1. undefined
2. false
3. ”
4. 0
5. null
6. NaN

Open your dev console and then click on any of the buttons below to run that value through the above if statement to see whether it’s truthy or falsey.

• undefined
• false
• ”
• 0
• null
• NaN

No tags

I know that this has been documented many places before but I wanted to do it again to better help myself remember. Here are a few deliciously quirky things about javascript.

typeof(null)

There are 2 bottom values in javascript that don’t inherit from the object prototype. They are undefined and null. However when you check the typeof(null); it returns object.

console.log(typeof(null)); // logs object which is wrong

typeof(NaN)

NaN (not a number) is another bottom value in javascript. When you check it’s type in ultra counter-intuitive fashion you get “number.” Nice.

console.log(typeof(NaN)); // logs "number" which is epic

NaN == NaN && NaN !== NaN

When you compare NaN to itself with double equality operators you get false. When you confirm this by making sure NaN is not double equal to itself you get true.

Crockford recommends using the triple equality operator when comparing bottom values.

No tags

On the mysteries of HTML5 <audio>

In attempting to fully grok the potential of HTML5 audio I decided to further explore the API and document the behavior as much as possible. This series of posts will be that documentation. This post relates only to Chrome. I hope it serves you in some way.

I’ve already done a couple projects using the actual audio element but hadn’t actually spent any time messing around with the HTML5 audio API. The API is surprisingly robust and I look forward to hacking it.

Starting at the very beginning you can instantiate an audio object by calling the Audio(); constructor function.

var audioObject = new Audio();
console.log(audioObject);

Open your developer console and see an example here.

You’ll notice at this point the audio object doesn’t have a source. Kinda useless I know. We can fix that with one of two ways.

First we can access the audio object’s src property and change the value to be a path to an audio resource. Like so:

audioObject.src = "music/grace.mp3";
console.log(audioObject);

Open your developer console and see an example here.

Or we can accomplish this by passing in a path to an audio resource at the moment of instantiation. Like so:

var audioObject = new Audio('music.grace.mp3');
console.log(audioObject);

Open your developer console and see an example here.

There it is! If you look in the console you’ll see a pretty complex object. There is quite a bit going on there but right now we’ll just cover a certain property/value pair. Namely the networkState property.

The HTML5 spec describes the networkState as follows: As media elements interact with the network, their current network activity is represented by the networkState attribute. On getting, it must return the current network state of the element, which must be one of the following values:

NETWORK_EMPTY(numeric value 0)
The element has not yet been initialized. All attributes are in their initial states.
NETWORK_IDLE (numeric value 1)
The element's resource selection algorithm is active and has selected a resource, 
but it is not actually using the network at this time.
NETWORK_LOADING (numeric value 2)
The user agent is actively trying to download data.
NETWORK_NO_SOURCE (numeric value 3)
The element's resource selection algorithm is active, but it has not yet found a resource to use.

To start out I’d like to just explore this property a bit. To do that I created some code that creates a new audio object with no source and runs through a couple of the html5 audio api methods to check network state. Let’s explore this in detail.

window.onload = function() {
  // Create a new audio object with no source
  var audioObject = new Audio();
  console.log(audioObject);
  // Check the object's networkstate
  var audioInfo = audioObject.networkState;
  console.log("networkState with no src: " + audioInfo);
  // Give the object a source and again check it's network state
  audioObject.src = "music/grace.mp3";
  console.log("networkState with src: " + audioInfo);
  // Call the object's play method and again check it's network state
  audioObject.play();
  console.log("networkState playing: " + audioInfo);
  // Call the object's pause method and again check it's network state
  audioObject.pause();
  console.log("networkState after pause: " + audioInfo);
  // Get the button and give is a click event listener that logs the object's
  // network state to the console when clicked.
  var networkStateButton = document.getElementById("networkStateButton");
  networkStateButton.addEventListener("click",
          function() { console.log("networkState playing: " + audioInfo); }, 
          false);
}

But before we get there I’d like to point out the first oddity of the evening. If you’ve followed along you might have noticed that if you create the audio object and log it to the console outside of the anonymous function that is being assigned to window.onload then you will see the full object in the console.

If you create the audio object within the window.onload anonymous function and log it to the console you will only see the markup for the actual node. Why is this happening?

Moving on—if we remove the audio object constructor outside of the window.onload and run the script we notice that the first line in the console is:

<audio preload="auto" src="music/grace.mp3"></audio>

How did the console know what the source was when this console.log comes from line 4 and the audio objects source wasn’t assigned until line 9? The expected behavior is that at line 2 there isn’t a source so the element shouldn’t have a src attribute. Much less the actual file path as a value.

To make matters stranger we get the expected behavior if we go to the scripts tab and put breakpoints on lines 4, 7, 10, 13, 15. By the time you press the button to go past the last break point and then look at the console the first line DOES NOT show a src attribute and value. Strange.

Ok, remove those breakpoints and let’s get back to exploring the networkState property.

If you try the above code without passing in a source argument you’ll see that each time it logs to the console a network state code 0. This is telling us “The element has not yet been initialized. All attributes are in their initial states.”

Yet if you look at the audio object in the console you’ll notice that it’s network state code is reading 1. Another oddity.

We can however get our network state console logs to match the audio objects thankfully. When we pass in a source argument at object instantiation time it logs the correct network state code to the console—which is 1. YAY!

If we instantiate the object from within the window.onload anonymous funtion then it logs to the console a series of network state code 3s. It also changes the audio object that it logs out to just the markup of the node which prevents us from being able to check the actual audio object to see it’s network state property.

More soon.

audio

Earlier today I thought of a basic way to encrypt information on a 2D graph using logical XORs. Below is a brief explanation and example. This is just a thought exercise but if it helps you in anyway please take it and use it.

This could really prove useful if one could produce a QR code generator that both generates the encryption keys as well as decrypts encrypted QR codes on scan.

As always all code is free as in speech and free as in pizza under the MIT Open Source License

Putting a message on a 2D grid

While watching a font creation tool creating a bitmap cursive capital A I was struck by the fact that a letter is just a series of black and white squares on a grid. The higher the resolution means the more squares on the grid which leads to the human eye perceiving a smooth edge but extremely close it’s still squares on a grid.

That got me thinking along the lines of how to put some information on a grid and then jumble the squares to hide the message.

I started out by creating an 8×8 grid and putting a message on it:

Next I created a ‘key’. The key is just a random mixture of black and white squares also on an 8×8 grid. Here I used a checkerboard pattern to show a point in a moment.

Finally I laid the key on top of the message and did a square by square logical exclusive OR. If two squares were the same color the resulting square was white. If two squares were opposite colors the resulting square was black.

Above we have an encrypted message. Now simply pass it along with the key to whoever you wish to decrypt it and your message is safe from prying eyes.

Notice that the encrypted message forms a symetrical shape. This could be a clue to an attacker that you used a symetrical shape (such as a checkerboard) as the key and would be something to avoid. Also it’s assumed that since the key is traveling with the message that any man in the middle doesn’t know that the encryption algorithm is XOR.

No tags

In an attempt to brush up on my binary/oct/hex conversions as well as better understand ASCII I decided to write an extensive ASCII Table this weekend on paper. After getting about half way through the idea appeared to write a brief program in C that could print to the console a formatted ASCII table.

Because of the power of C this ended up being much easier than I expected. This table shows the ASCII character and value as well as the decimal, octal, and hexidecimal value. There is no binary conversion in the standard io library so this table lacks a binary conversion.

#include <stdio.h>
main() {
    int i;
    for(i = 33; i <= 127; ++i) {
    printf("ascii char: %c, decimal: %3d, hexadecimal: %x, 
    octal: %3o, ascii number: %3d\n", i, i, i, i, i); 
    }
}

Of special note is the printf output formatting function. Notice in the first argument after each %. C is able to take the value of i and convert it to multiple formats that easily.

%c renders the ASCII character. %d renders the decimal value. %x renders the %hexidecimal value. Finally %o renders the octal value.

All code is licensed under Creative Commons

No tags

Some recent announcements regarding ssl and the insecurity surrounding it have got me thinking about what could be a better solution.

Why can’t we generate ssl certs similar to the way that bitcoin prevents the bits from being double spent? Which happens to be similar to how Tor anonymizes your web traffic.

We could have one single ssl certificate authority that was completely open source and distributed. Anyone who wanted could fire up an ssl certificate server.

Every ssl certificate server on the network would have the complete history of every ssl cert ever issued. As long as n% of the servers have the same records we agree that the system is secure.

Possible?

No tags

Those who interact with me regularly know that I’ve recently often used the term ’SuperUser.’ A SuperUser is a privileged user with the powers to make sweeping and fundamental system wide changes. In the Matrix you can think of a SuperUser as God and any user can command that archetype with the proper knowledge.

To be a SuperUser means to follow the three Laws of Sudo:

1. With great power comes great responsibility.
2. Respect the privacy of others.
3. Think before you type.

Though on the surface seemingly simple these three Laws are extremely deep and profound. To be a true SuperUser is a life of contemplation and control.

There are surely SuperUsers who live amongst us. Like Jedis protecting the Digital Force these people reserve the command sudo for only the most extreme situations.

Recently I’ve been deeply struck by all the grave misuses that our great technology is being put to. We are witnessing the creation of more wealth and knowledge than at any point in history yet our people are poor and dumbed down. Worldwide entire nations are starving and at war over dwindling resources yet the wealthier nations waste so much that our landfills are overflowing.

Above all of this sits the industrialized world with our high technology. And behind that sits a sysadmin. It is that sysadmin who knowingly allow these things to happen on his/her system that I seek to label with the term ‘SuperAbuser.’

A SuperAbuser is someone who has attained the privilege of Sudo yet uses it to suppress information and oppress freedom. Like the Sith to the Jedi the SuperAbuser is the mirror opposite of a SuperUser.

SuperAbusers follow the 3 Laws of -Sudo:

1. With great power DOES NOT come great responsibility.
2. DO NOT respect the privacy of others.
3. DO NOT think before you type.

The next time you hear about the FBI reading your communications or a lawyer locking you out of your own DNA remember that at the end of that trail sits a sysadmin who is knowingly allowing that behavior. That sysadmin is a SuperAbuser.

You know who you are.

No tags

I finally made it to the legendary SF hacker space noisebridge on friday. Though I only recently became aware of it I feel like I’ve been looking for this place for a long time.

Walking in I got the feeling of what it must have been like to witness Stanford’s Artificial Intelligence Labratory under John McCarthy or Stanford’s Augment Research Center under Douglas Englebart in the 60′s. I witnessed an eclectic mixture of both men and women at the apex of technical skill. The room was a zeitgeist of the digital era with San Francisco’s counter culture and anti authoritarian view apparent.

The future is do it yourself and distributed. The future is free both gratis and libre. The future is analog and digital. The future is male and female. The future is highly technical. The future is about ubiqutious information and who controls it. I witnessed the future in that room.

No tags

Recently I got an Arduino Uno which I’ve been using to get a better understanding of electronics and hardware hacking. The Uno has given me a great respect for scarcity of resources and has caused me to look at programming in an entirely new light.

Having come to programming in my late 20’s I missed the era of slow computers with little memory. Of course I had a computer growing up but I used it mainly to surf the web and do homework and never experienced the wonder of Moore’s Law up close.

My first computer after becoming a coder was a Macbook and because the machine was so powerful and I was programming at such a high level I never even thought about what was happening on the hardware. In a way I feel fortunate because every facet of computing has come as a great surprise and discovery to me as I used each island of new found knowledge as a base to further my quest for discovery.

The Uno has been treasure trove with regards to lessons related to programming. Suddenly I’m in a world of 32k flash memory and 2k ram and I am forced to actually think about what’s going on in the memory.

To program the Uno you code in a watered down C. To better learn the language I have been reading The C Programming Manual. C is way more powerful then any language I’ve yet seen and I’m humbled by how much I have to learn.

Each morning my 2 year old son and I do multiplication exercises. We do 1–12 * 1–12. This morning after finishing our exercises I thought it would be good practice to create a C program that wrote the multiplication table to the console. It was fun and below is what I came up with. The bottom code works on the Arduino and will write to the Serial port.

/#include <stdio.h>


main() {
  /#define MAX 12
  /#define MIN 1
  int subbase;
  int i;
  int j;

for (i = MIN; i <= MAX; ++i) {
    for (j = MIN; j <= MAX; ++j) {
      printf("%3d ", subbase = i * j); 
    }

    printf("\n");
  }
}

Arduino Code

/#define MAX 12
/#define MIN 1
void setup() {
  Serial.begin(9600);
  for (int i = MIN; i <= MAX; ++i) {
    for (int j = MIN; j <= MAX; ++j) {
      Serial.print(i * j);
    }
    Serial.print("\n");
  }
}


void loop() {
}

All code is licensed Creative Commons Share Alike.

No tags