Permalink | Leave a comment  »

You can get all this goodness and the full source code at http://github.com/kvangork/OOJS-Presentation

OOJS.pdf Download this file

Permalink | Leave a comment  »

In my talk on Object-Oriented Javascript yesterday, time constraints prevented me from going through the nuts and bolts of how I like to build up class hierarchies. I wrote this after reading more sources than I can remember, so credit goes to the entire javascript developer community.

There are a ridiculous number of comments embedded, and if you want to discuss it further, please (yes, even you there in the back) feel free to email me at kvangork at gmail dot com. I love this stuff and I'm always happy to talk about it if I've got time.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

//this function applies all the properties to the object
function mixin (obj, props) {
    if(obj && props && typeof props == 'object') {
        for(var property in props) {
            obj[property] = props[property];
        }
    }
}

/* extend is more complicated than it looks. The first step is to set up a constructor function
 * either a passthrough to the superclass constructor, or explicitly specified. This constructor function
 * is the basis of a class in javascript, and can be invoked with the NEW keyword.
 * 
 * We then create an instance of the superclass, and use this instance to modify the subclass prototype
 * so that all the members of the superclass will be present in all subclass instances.
 * 
 * After housekeeping tasks to make the superclass constructor available for invocation from the subclass,
 * we apply any override properties (which may be data or functions) to the subclass prototype and return
 * the new subclass constructor.
 */

/* USAGE:
 * Project.BaseClass = function(){}; //empty class constructor just for example here
 * Project.ChildClass = extend(Project.BaseClass, {
 *		constructor: function(){
 *			//add child constructor logic here
 *			Project.ChildClass.superclass.constructor.apply(this, arguments); //call superclass constructor
 *		},
 *		newChildFunction: function(){
 *			//function logic here
 *		}
 * });
 */
function extend (superclass, overrides) {
    var subclass = overrides.constructor != Object.prototype.constructor ? //if the overrides object has an explicit constructor specified
                        overrides.constructor : //then use the specified constructor
                        function(){superclass.apply(this, arguments);}; //else, pass all constructor arguments to the superclass

    var intermediary = function(){}; //empty class intermediary prevents subclass modifications from affecting the superclass
    
    intermediary.prototype = superclass.prototype;
    //a new instance of intermediary would now be an instance of superclass, containing all its properties
    
    subclass.prototype = new intermediary(); //subclass's prototype now contains all the properties of superclass
    
    //we want the sub and super class instances to have explicit constructor references
    //although in practice we'll always want a subclass constructor to invoke the superclass constructor,
    //there is no way to make this process automatic.
    subclass.prototype.constructor = subclass;
    if(superclass.prototype.constructor == Object.prototype.constructor) {
        superclass.prototype.constructor = superclass;
    }
    
    //give subclass a reference to the superclass. Combined with the superclass' constructor reference from line 58,
    //this will let the subclass constructor invoke the superclass constructor on itself
    subclass.superclass = superclass.prototype;
	//if we did this:
	//subclass.prototype.superclass = superclass.prototype;
	//and tried to use this.superclass, we'd get tripped up with a second level of extension
    
    //with all the housekeeping done, we copy the override properties onto our subclass prototype
    mixin(subclass.prototype, overrides);
    
    return subclass;
}

Permalink | Leave a comment  »

I experienced a near panic this morning as my Blackberry Google Talk client stopped functioning and the official download site at http://www.blackberry.com/googletalk/ gave me a “Sorry, your device does not meet the system requirements that are needed to support Google Talk” message when I tried to reinstall it, both over the air and on my desktop.

If this happens to you, you may experience a deep sense of loss, of disconnection from the entire world. The sensation may resemble claustrophobia or being marooned.

Do not panic.
Remain calm.
All is well.

Just open up the software abomination known as Blackberry App World, search for and download Google Talk, and enjoy being restored as it ignores the incorrect dependency checking code the official site is using.

For you detail-oriented folk (and Google) this was tried out on a Sprint Blackberry Curve 8330 running OS v4.5.0.77.

Permalink | Leave a comment  »

Permalink | Leave a comment  »

Permalink | Leave a comment  »

This frustrated me for 45 minutes tonight, and hopefully this post can save someone else from similar pain.

[MyRepo (master)]$ git push origin master Permission denied (publickey). fatal: The remote end hung up unexpectedly

I followed all the instructions at http://github.com/guides/providing-your-ssh-key and http://github.com/guides/addressing-authentication-problems-with-ssh and verified my connection was working via the ssh git@github.com command, but kept receiving the Permission Denied (publickey) error when trying to push to github. Eventually I stumbled onto a workaround. In your local repository, remove and re-add the remote link. These commands worked for me, but YMMV:

git remote rm origin git remote add origin <remote url>

Replace the remote url with your github clone url (looks like "git@github.com:<username>/<reponame>.git") and try your push again. If it doesn't work for you, please post a comment below and let me know why and what you did instead.

Permalink | Leave a comment  »

I've been a Grand Central user since the summer of 2007, and Google Voice is a great next step, adding SMS, Voicemail Transcription, and Conference Calling. I think the service is still just a preview of a real solution to the problem of routing voice communications. GV gives you one number, and incoming calls (and SMS) to that number will ring all the phones you tell it to. The problem is that your various phones still have their own real numbers, and to make outgoing calls that show up with your GV number for the recipient, you need to go online and initiate the call from the google voice web interface.

Permalink | Leave a comment  »

Permalink | Leave a comment  »

Permalink | Leave a comment  »

I'm still recovering from the after party and it'll be a few more days before coherent thoughts emerge, but if anyone is interested in my raw notes, they are available here:

Warning: These probably won't make sense without some serious editing on my part, and even then keep in mind that I'm hardcore nerd material, so all you cool designers I met will be bored to tears by most of the contents.

http://evernote.com/pub/kvangork/WDN09Notes

Permalink | Leave a comment  »

I'm thrilled with a new communication tool called Yammer, which is basically a private, enterprise twitter. Go directly to their site and sign up to create or join your company's network, or if you aren't convinced yet see my writeup at Yammer: Twitter Goes To Work.

Permalink | Leave a comment  »

SVN is one of my absolute favorite tools. It’s hands-down easier to use than TFS or (gasp) SourceSafe, which have been the other common version control systems in my industry. If you aren’t using it, you’re missing out (quiet down all you GIT-heads in the back… keep using it for a few more years and we’ll accept that it isn’t just a fad).

In any project of significant complexity you’re going to use libraries of some kind. These libraries frequently end up being copied into the project tree under a lib subdirectory and compiled or included in a project deployment from there. Most of my projects rely on open source libraries, and as we make changes to a library those changes have to be propagated from project to project using patch files or simple copy/paste. This time-consuming process opens up the possibility of human error and versioning confusion, but there is a better way.

SVN Properties
First, some basics: using Subversion, you can specify metadata properties on any directory or file. These can be used for your own custom purposes, or more often to control how the SVN client treats certain files. One commonly used property is svn:ignore, which (unsurprisingly) tells SVN to ignore particular files when looking for changes in a working copy. My new favorite property is svn:external, which when set on a directory, allows you to define subdirectories and point them at any other SVN path, even to a particular revision. You can set an SVN property using the official command-line client, but I’ll leave the syntax for that to the official documentation and show how to do it in my favorite SVN client, TortoiseSVN.

1. Check out a working copy of your project.
2. Right-click the parent folder of where you want your library subdirectories placed. On the TortoiseSVN context menu, chose Properties.
3. In the properties dialog, click New, then select a property name from the drop-down menu.

svn:externals
In the new properties dialog, select svn:externals, and then we’ll enter a value in the multi-line edit box provided. First, if you’re using an SVN client before version 1.5, upgrade and have everyone on your team upgrade. If you’re stuck using pre-1.5 clients the syntax is different so see the official documentation for the details.

In modern clients the syntax looks like this:
External_Path@RevisionNum SubDir_Name

• External Path: This can be a fully qualified SVN url like “svn://svn.example.com/skin-maker” or you can use symbols to specify a relative URL.
  • ../ Relative to the URL of the directory on which the svn:externals property is set
  • ^/ Relative to the root of the repository in which the svn:externals property is versioned
  • // Relative to the scheme of the URL of the directory on which the svn:externals property is set
  • / Relative to the root URL of the server on which the svn:externals property is versioned
  I only use one SVN server for my project and libraries repositories, so I generally have external paths in the form of /libraries/libraryName without the protocol and server.
• Revision Number: Regular integer revision number of the libraries repository. Here’s  a great note from the SVN Book:
  You should seriously consider using explicit revision numbers in all of your externals definitions. Doing so means that you get to decide when to pull down a different snapshot of external information, and exactly which snapshot to pull. Besides avoiding the surprise of getting changes to third-party repositories that you might not have any control over, using explicit revision numbers also means that as you backdate your working copy to a previous revision, your externals definitions will also revert to the way they looked in that previous revision, which in turn means that the external working copies will be updated to match the way they looked back when your repository was at that previous revision. For software projects, this could be the difference between a successful and a failed build of an older snapshot of your complex codebase.
• Subdirectory Name: usually “lib” - the name of the directory underneath the directory with the svn:externals property set, which will be mapped to an external repository URL.

My projects follow a traditional trunk-branches-tags folder structure, with a /source directory under trunk. I set the svn:externals property on that source directory and end up with repository_root/trunk/source/lib pointing at an external library directory.

After setting the property, update and commit, and you should see the external library source downloaded during the update process. Commit will make sure all your team members get the property set in their working copies and their next update will likewise download the external library.

That’s all I have for now. Fire away in the comments if you see a mistake or something isn’t clear.

Permalink | Leave a comment  »

Like designers, if you give a programmer a problem with parameters, they'll apply every bit of genius they have to solve it in the best possible way. If you tell them how to do it, you'll suffer the wrath of an angry God.

Permalink | Leave a comment  »

Browser incompatibilities are going to be with us for the foreseeable future. This can lead to lots of ugly and inefficient browser detection branches in javascript functions.

function foo(bar) {   if(navigator.userAgent.toLowerCase().indexOf('msie') > -1) {   //do Internet Explorer Stuff   }   else {   //do Firefox Stuff   } }

Instead we can take advantage of scoping and first-class functions to rewrite the function during the first execution, allowing each subsequent execution to skip the branching.

function foo(bar) {   if(navigator.userAgent.toLowerCase().indexOf('msie') > -1) { //if Internet Explorer   //rewrite foo to only execute the internet explorer code   foo = function (bar) {   //do Internet Explorer Stuff   };   }   else {   //rewrite foo to only execute the firefox code   foo = function(bar) {   //do Firefox Stuff   };   }     //after rewriting the function, call it so the original caller   //receives what they need   return foo(bar); }

Permalink | Leave a comment  »

Here's a simple trick I found while looking at some JS library source code today.

If you need to specify a url such as "http://domain.tld/path" in javascript code, some parsing engines may error out with an unterminated string exception after they hit the // and switch into comment mode.

To prevent this, split the string into two parts as shown below. var url = "http:/" + "/domain.tld/path";

Permalink | Leave a comment  »

My favorite things so far are a pair of bookmarklets:
http://www.sprymedia.co.uk/article/Design - overlay, grid, and measuring tools.
http://westciv.com/xray/ - mini firebug inspector. Click any element and see style details.

Permalink | Leave a comment  »

Follow up to: Zenburn For Aptana

Here's another file for import into Aptana's ScriptDoc Editor Colors panel to make documentation look right.

Also, under Preferences->General->Editors->Text Editors I set Line Number Foreground to RGB:133,172,141

The end result should match the attached screenshot.

Aptana_ScriptDoc_ZenBurn.col Download this file

Permalink | Leave a comment  »

Client-side persistent apps now have a library to support the ActiveRecord ORM pattern against Google Gears, Adobe Air, and future browser storage mechanisms (HTML5).

The library ships in a single file, has no external dependencies, and runs client side in all major browsers with or without access to a SQL database

Permalink | Leave a comment  »

Static typing is like introducing yourself and having to explain who your grandparents are before you can talk about the weather.

Permalink | Leave a comment  »