Our company has released its first app!

First, get the app on iTunes. Next, show off your new diptych creations in the Diptic App Flickr pool. If you’ve questions, stop at the app’s website for instructions and FAQ. Get your friends to join in the fun and become a fan of Diptic on Facebook; while you’re at it you might as well become a fan of PeakSystems as well. Finally, if you’ve feedback or just want to sing our praises, then find us on Twitter.

YAY!

So according to the Facebook tracking guide the URL recommended for including the tracking script is: //ah8.facebook.com/js/conversions/tracking.js

This is potentially a very convenient way to include a script regardless of SSL (http vs https), which will cause an alert or warning on computers with common settings. Unfortunately, this method does not work in Chrome. IE6 and FF3 will redirect to the appropriate full path with http(s). Chrome will assume the link is a relative local file, adding the prefix “file://”.

I assumed this was a typo, but the implementation guide is very deliberate in the “http” omission. I was surprised to find this works in some browsers and I wish it was a great revelation, however it is entirely impractical.

Here’s two AS2 Flash prototypes that I use all the time. The search proto is probably from that genius sephiroth but I can’t remember since it’s been a while.  The shuffle prototype is from kingdavid.

Array Search Prototype

Array.prototype.search = function(needle, from, strict)
{
   if(from == undefined || from >= this.length) from = 0;
   strict = strict == undefined ? false : strict;
   for(var a = from; a < this.length; a++)
   {
      if(this[a] == needle)
      {
         if(strict)
         {
            if(this[a].__proto__ == needle.__proto__)
            {
               return a;
            }
         } else {
            return a;
         }
      }
   }
   return -1;
};

Array Shuffle Prototype

Array.prototype.shuffle = function() {

   var myArray = new Array();
   for (i=0; i<this.length; i++) {
      var control = true;
      while (control) {
         j = int(random(this.length));
         if (myArray[j] == undefined) {
            myArray[j] = this[i];
            control = false;
         }
      }
   }
   return myArray;
};

Inline-block is spectacular.

Check out this menu.

<div>
<p>
<a>Home</a>
<a>Products</a>
<a>Services</a>
<a>About Us</a>
<a>Contact Us</a>
<span></span>
</p>
</div>

CSS:
p { width:776px; text-align:justify; }

p a { height:18px; padding:10px 20px; display:inline-block; }

p a span { display:inline-block; width:50%; }

Now I get a menu that spans the container with automatic spacing. With justified text the last line is not stretched. To force the single line to expand I added an element that is well beyond enough width to force a carriage return. Note that inline block only works in IE if the element is inline by default. In FF 2.0 inline-block is not supported, but can be cheated like so:
display: -moz-inline-block;
display: inline-block;

So… good luck!

I just want to post a message about how clever I find this password input. I can thank Reddit for originally bringing this to my attention. I hope to implement this on my next project. If you decide to do the same, please give some credit back to the source site.

Chroma Hash Demo

When working on a shared computer, there is a lot of risk involved with personal data. For example, buying something online with a credit card. Best practice is to clear all saved data from the computer as one logs off. However, I am not convinced a majority of users know / remember to do so. The first idea that comes to a developer’s mind is to leverage the “autocomplete” attribute of form fields. Unfortunately, this does nothing other than prevent the auto-complete from appearing, not the browser from storing data; I would consider the auto-complete attribute worse than not, as it provides a false sense of security. The solution I’m thinking of is a small hack.

Correct me if I am wrong [andrew.hahn@peaksystems.com], but browsers do not store hidden form field data, only fields of input type “text”. My testing suggests that it does not.

So, the proposed hack is to create two forms. One form contains a dummy text field that will not be submit.

<form><input type="text" id="CCN_prop" /></form>

The second form will be actually submit. It will contain a hidden input and a submit button. When the submit button is pressed, javascript will update the hidden field (CCN) with the value from the dummy field (CCN_prop).
<form method="post" onsubmit="
    $('#CCN').val($('#CCN_prop').val());">
  <input type="hidden" name="CCN" id="CCN" />
  <input type="submit" />
</form>

For some reason I haven’t seen many examples of a horizontal scrolling div. These are commonly used for image slideshows (we have a number of photography clients).

CSS:
div {
width:380px;
height:80px;
padding: 15px 0 30px 0;
overflow-x:auto;
white-space:nowrap;
}

By default, img tags are display:inline, so you need only something like this:
<div>
  <img />
  <img />
  <img />
</div>

Your poor peepers. Too much white all day long. Not only should you do this, you should use Blackle instead of regular Google to save on energy (alternatively, you can use iGoogle and just pick a darker theme). I’ve gone through and replaced the backgrounds with black and white text with CCC. Some colors (009 and 00F) have been slightly adjusted (039 and 03F) for better contrast. Other than those, the greens, reds, oranges, etc are the same. Make sure to enable “Highlight Invalid Code” or lines containing unclosed tags and the like will change to black text. Screen cap

Backup “colors.xml” in the following folder.

Vista: C:\Users\<username>\AppData\Roaming\Adobe\Dreamweaver CS4\<language>\Configuration

Windows XP: C:\Documents and Settings\<username>\Application Data\Adobe\Dreamweaver CS4\<language>\Configuration

Mac OS X: Macintosh HD:<username>:Library:Application Support:Adobe:Dreamweaver CS4:<language>:Configuration

Then replace it with this: colors.rar. Should be ready to rock.

Oh, on a side note, the font Anonymous is great for coding, very easy to read. I like it on the smallest font size setting.

I was having a grand time writing some regex patterns in my Regular Expression Tester extension for FireFox. I needed to match some special characters because the site I was working on catered to international users. I would need to be able to validate strings containing acute, umlauts, etc. So, a pattern that I was happy with that would work in typical regex fashion:

[\u0021-\u007E
|\u00A1-\u00FF
|\u2013-\u2030
|\u20AC]

This matches exclamation to tilde, inverted exclamation to lower “y” with umlauts, en dash to per thousand sign, and the euro symbol. I allowed a couple non-html 4/4.01 characters just to keep the pattern within reason. Now, I’m a CFer and the typical format of escaping “u” followed by the unicode hex does not work. What I was not sure of was whether or not I could create a range of characters with Coldfusion’s CHR() business. True enough. Check your local ascii table for more info on which specific characters you want to match. Here’s some code testing the method:

<cfoutput>
<cfset pattern = "[#CHR(33)#-#CHR(126)#
|#CHR(161)#-#CHR(255)#
|#CHR(8211)#-#CHR(8240)#
|#CHR(8364)#]" />

#IsValid("regext","@",pattern)#
#IsValid("regext","Ñ",pattern)#
#IsValid("regext","€",pattern)#
</cfoutput>


yes yes yes

PS, sorry about how narrow the content section is; Some code won’t work because I added line breaks.

Here’s something I wasn’t aware of, if an associated array is populated by a named key, the length is not increased.


var someArray = new Array();
someArray['someKey'] = "someValue";
alert(someArray.length); // expected 1, got blank
alert(someArray['someKey']); // "someValue"


This is a problem if you’re trying to loop the array by jQuery.each(arr, function).


// Same array population
$.each(someArray, function(k,v) {
  alert(k + "|" + v);
});


This will not do anything as jQuery loops by the array length. Given the way our array is set, this WILL work:


// Same array population
for(var k in someArray) {
  alert(k + "|" + someArray[k]);
}


If we change our array to ditch the named key…


var someArray = new Array();
someArray.push("someValue");
$.each(someArray, function(k,v) {
  alert(k + "|" + v);
});


That will work, but that isn’t how I want to do it. This is where I was spacing another method, creating an object instead of an array.


var someArray = new Object();
someArray['someKey'] = "someValue";
$.each(someArray, function(k,v) {
  alert(k + "|" + v);
});


Ah ha! That’s how to rock it.
jQuery.each docs