So you need a typeface?

Here is a cool poster designed by Julian Hansen that helps you find the right typeface for your project.

“So you need a typeface. Start out by choosing the kind of project that you’ll need your typeface for” version 2 launched!!

Just launched version 2 of my site for

6 months in development from concept to design to production. It boasts HTML5, css3 and Javascript.  The site is built on ModX CMS backend for easy updating.

The decision was made to go with ModX over drupal for its flexibility. With ModX, you are not limited on what you can do creatively as you are with drupal, joomla or even wordpress.

You might wonder why it took so long, but consider having no experience in front end development. The first month was spent designing the site. One month spent learning HTML5, another month learning CSS3, another month learning JavaScript, and 2 months learning the ModX system and PHP 5.0.

Let me know if you have any constructive feedback.

Javascript: OOP in javascript using Objects and prototypes

HTML5 PoweredJavascript does not support real oop and classes but you can fake it and get the similar effects using Objects and prototypes.

First, to create a “Car” class with some properties, make a function Car and set internal properties using “this” reference:

function Car(s, w) {
  this.speed = s;
  this.weight = w;

To add methods to your Car class, use the prototype to that class and assign then anonymous functions:

Car.prototype.go() {
 console.log("car speed is : " + this.speed);

Car.prototype.stop() {
  console.log("car weight is : " + this.weight);

Here is an example of your Car class being used:

var car = new Car(65, 2000);

If you are coming from actionscript or any other modern programming language, you are probably laughing, but this is how it goes and it is the future of the web.

Actionscript 3: Pass multiple parameters defined in external file to

There was a situation where the javascript function name and the number of parameters to it was defined in an external JSON file. Since the number of parameters was dynamic, we needed a way to have ExeternalInterface call with the correct number.

The solution is simple.

in the external file, pass in a string of the function name and all the parameters:


and in your actionscript code

	var myString:String = "myFunctionName,param1,param2,param3";				
	var paramArray:Array = myString.split(",");, paramArray);

The secret is the apply() method. All functions in actionscript is a type of object with couple of built in methods, and the apply() method allows you to pass in an array.

Test with a simple alert in your html wrapper

  function myFunctionName(value1, value2, value3) {
    alert("myFuncName fired : " + value1 + value2 + value3);

Another way is to pass an object with the paramters you need attached to it and cycle thru that in javascript.

TextMate: Proficiency tips for HTML/CSS development

The best code editor for the mac is textmate. It’s old, and outdated, but still the best due to its customizable bundles.

If you are doing html/css work, the one bundle you need is here:

After you download and install it, here are the most common used commands.

  • Command option period (this will finish your tag)
  • Option drag (make block selections)
  • Command / (this will make block comments)
  • Command T (global search in a project)
  • Control shift < (creates start and end tags)
  • Control shift W (wrap a selection in a new tag)
  • Control shift D (duplicate a line)

SVN: Set system wide ignore for os X

If you worked with svn client on macs, especially with FlashBuilder projects, you will notice all hidden project files shows up, and you have to remember not to commit them to the svn repository.

There is a simple way to set a system wide ignore setting to make your svn client always ignore certain files.

First, make sure you have “show hidden files” enabled, then go to your home folder to .subversion folder.
From there, open the “config” file. Open up that baby and scroll down to the line with # global-ignores =
You can add any file extension there for your svn client to ignore globally.

I added the following for flashbuilder specific files that I normally would not commit to svn:
.DS_Store .settings .flexLibProperties bin- debug .actionScriptProperties .project .flexProperties

It should look something like this:

Actionscript 3: Quick swipe logic for touch devices

If you are trying to simulate a swipe behavior like iOS devices, you would notice two things.

One is that if you drag a slide beyond the half way point, it will snap to the next slide, otherwise it will snap back to its original position.

Second is that if you do a quick swipe, it will go to the next position regardless if you passed the center point.

To achieve that quick swipe calculation, this is the logic you need.
First the variables:

private var xpos1:Number
private var xpos2:Number
private var time1:uint;
private var time2:uint;

Next is the mouse down event:

private function onMouseDown(event:MouseEvent):void
  this.stage.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
  this.addEventListener(Event.ENTER_FRAME, onEnterFrame);

  xpos2 = this.mouseX;
  xpos2 = this.mouseX;
  time1 = getTimer();
  time2 = getTimer();

Then in the EnterFrame:

private function onEnterFrame(event:Event):void
  xpos1 = xpos2;
  xpos2 = this.mouseX;
  time1 = time2;
  time2 = getTimer();

and the actual logic in the mouse up event;

private function onMouseUp(event:MouseEvent):void
  this.stage.removeEventListener(MouseEvent.MOUSE_UP, onMouseUp);
  this.removeEventListener(Event.ENTER_FRAME, onEnterFrame);

  var time:Number = (getTimer() - time1) / 500;
  var velocity:Number = (this.mouseX - xpos1) / time;

The velocity can now be used to find a good tolerance for the quick swipe.

Javascript: Best practice to linking external JS library

The best practice to link your html to popular Javascript libraries like jQuery, Dojo, mooTools is to use content delivery network.

Google CDN is a popular choice found at  Just choose the Library you need and grab the link.

To add the library to your page replace what you normally do:

<script src="jquery-1.6.1.min.js"></script>


<script src=""></script>

It would be better to leave out the “https:” so that your page will use either “https:” or “http” depending on the type of request the page is making.

<script src="//"></script>

The benefits of using CDN over hosting your own is that the browser will download the file in parallel with other js files if they are hosted on a different url. Also the file will be cached if the user has downloaded that file from visiting a different website.

There are other CDNs available including microsoft, but with google, you can use

<script src="//"></script>

just 1.6 in the path version name and you will get the latest in the 1.6x series. Or better yet, just “1” and it will always grab the latest before “2.x.x”

Printing to Ubuntu 10.10 shared printer from Windows 7.

First problem I ran into with my new Ubuntu 10.10 home server was trying to print to the printer attached to it from my windows 7.

The solution was to modify the smb.conf file.

1) Launch terminal
2) enter: gksudo gedit /etc/samba/smb.conf
3) Go to the “printing” section and add:
load printers = yes
printing = cups
printcap name = cups
and add
use client driver = Yes

it should look like this:

4) restart samba with :
sudo service smbd restart

Windows home server out, Ubuntu in.

With the unfortunate news about windows home server and the discontinued use of drive extender, I went ahead and replaced my home file server with ubunbu 10.10.

It has not been easy with several issues along the way. I will try to document problems and solutions for others who might be thinking of making the change. Hopefully its useful for non linux users to hear the experience from another non linux user.