Skip to Content

Jun 22, 2010

Flash Player installer without the cruft

John Welch explains that if you look into the package contents of the Flash Player installer you will find the true installer at the following location:

/Contents/Resources/

This installer will not force you to quit all of your browsers.

(via John Gruber)

flash, mac

Feb 22, 2010

JavaScript Tips

Ternary Operator

When you have a simple if...else statement like the following:

var a = true;
if (a == true) {
 alert("True");
}
else {
 alert("False");
}

It may be best to use the ternary operator.

var a = true;
//(Test) ? (if) : (else);
(a == true) ? alert("True") : alert("False");

References: Javascript (JS) Tutorial - Ternary Operators code, syntax ccondition, JavaScript Ant - The Conditional Operator (Ternary Operator)

JavaScript

Feb 15, 2010

Parse class values: Retrieving custom meta data from an HTML element's class name

The problem

I had HTML that had class information on each object that signified how deeply it was indented (e.g. "indent-5"). I needed to use the value of the indent to make various comparisons in another. To solve this problem I created a simple utility function.

NOTE: All functions were written with a dependancy on jQuery.

Original

I created an array of the object's classes by splitting the string at the instance of a space. I made the assumption that the indent class would always be the first and accessed the first element of the object class array I created. I then took this string and removed the "indent-" part and parsed the rest as an integer. The result was an integer I could use for numeric comaprisons in my main function.

function parseObjLevelNumber(obj) {
    var objClass = $(obj).attr("class");
    var objClassArray = new Array();
    objClassArray = objClass.split(" ");

    var objLevel = parseInt(objClassArray[0].replace(/indent-/, ""));

    return objLevel;
}

Revision 1 - RegEx

When I looked at my code again I realized that my original function could be made more generic so that it could be a general purpose utility function. Since the new function could not assume an object class array position or the string that should be removed I made these two values arguments to the function.

When first writing this I ran into a minor problem when trying to use the RegEx string as a normal string. Apparently you need to convert a string into a RegEx variable if you want it to be used as a variable.

function parseClassValueRegEx(obj, pos, attrName) {
    var objClassArray = $(obj).attr("class").split(" ");
    var attrNameRegEx = new RegExp(attrName);
    var classValue = objClassArray[pos].replace(attrNameRegEx, "");

    return classValue;
}

Revision 2 - JSON

As much as the RegEx version of the function was better it still forced one to make assumptions about what position in the array the item you wanted was. I removed position as an argument and tried to find a way one could access the class attribute by name. For example if you wanted the "indent" level of an object you would only need to ask for "indent."

I decided that the best way to do this would be to create a JSON object that contains all the class attributes a element has.

I first set up my empy JSON array. I then loop through the values in the object's class array (e.g. "indent-1") and I split those values against the "-" to create another array called "keyValue." Then I push values into the JSON array with the assumption that the prefix, "[0]," will always be the key and the suffix, "[1]," will always be the value.

function parseClassValue(obj, attrName) {
    var objClassArray = $(obj).attr("class").split(" ");
    var objClassValues = { };

    for (var i in objClassArray) {
        var keyValue = objClassArray[i].split("-");
        objClassValues[keyValue[0]] = keyValue[1];
    };

    var classValue = objClassValues[attrName];

    return classValue;
}
JavaScript, JSON, RegEx

Jan 18, 2010

Prevent the loss of unsaved data with OnBeforeUnload

Sometime last year I learned about the onUnload event, which is available on the "window" object. Today I thought I could use it to prevent a user from leaving a web page if, for example, there is unsaved data that will be lost. I quickly realized that it would not work. The "onunload" event happens after the user has already "unloaded" the page. I needed an event that fired before the user action and naturally came upon, "onBeforeUnload."

The onBeforeUnload event is Microsoft specific and is not included in the W3C specification but fortunately seems to be a de facto standard in the modern web browsers. Support is in the latest versions of FireFox, Safari, Chrome and Internet Explorer. Below is a code example and screenshots of resulting dialog boxes in Safari and Google Chrome.

window.onbeforeunload = function() { return "There is unsaved data on this page."; }

Safari Dialog
Safari

Chrome Dialog
Chrome

Safari's dialog default formatting is close to an exact match of all other browsers. Google Chromem however, displays a much smarter dialog. It didn't take much thought to realize that they did this for their web applications. If for example, you try to reload an unsaved e-mail in Gmail you will trigger an "onBeforeUnload" event.

To clear the beforeUnload event just set the value of it to null as follows:

window.onbeforeunload = null;

See the example.

JavaScript

Oct 4, 2009

The Billion Dollar Gram

Great visualization of what is being spent where.

Highlights:

  • Walmart revenues ($352b) vs. Walmart Profits (11b)
  • Total cost of financial crisis to US government to date ($2800b) vs. The New Deal ($500b)

May 3, 2009

It only took several years

I've finally redesigned and relaunched CreativeBOX (everything isn't perfect yet - but if I waited until then this relaunch would never happen.) I can't even count how many years this has been delayed. A lot has changed since my last real updates to the site, the most significant being my graduation from college (woot!) and my job at OHO Interactive.

This site used to be my GUI playground back in the golden age of Mac interface customization (raise your hand if you can vividly remember MacPlaza, MacOSZone, GUI Junky, ResExcellence, IconFactory's PixelPalooza etc.) It was a fun time and was what partially inspired me to go into the design field. On CreativeBox I offered custom desktop pictures, startup screens, Kaleidoscope schemes, icons, and even software developed by my younger brother. I loved the GUI community so much that I even ran a site called MacCommunity for a while that reported on the releases of new GUI goodies. Yea, I was very much a Mac geek. As a matter of fact I still am but my priorities have changed.

I eventually got exhausted creating icons and desktop pictures but I never tired of running web sites. While trying to re-imagine CreativeBox I ran several web sites during college for student organizations. I just couldn't stay away from the marketing, analyzing web analytics, brainstorming, designing and development that was involved. There is a beautiful complexity in building and running a web site and with this, the new CrativeBox, I hope to share some of it.

Jan 28, 2009

Open During Construction

Yup. I am back and ready for another go at running the Creative[BOX]. While under construction I will be posting, designing, configuring, and learning how to manage this Drupal system. It should be a fun ride.

thebox
Syndicate content