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);
car.go();
car.stop();

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 ExternalInterface.call()


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:

"myFunctionName,param1,param2,param3"

and in your actionscript code

	var myString:String = "myFunctionName,param1,param2,param3";				
	var paramArray:Array = myString.split(",");
	ExternalInterface.call.apply(null, 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

<script>
  function myFunctionName(value1, value2, value3) {
    alert("myFuncName fired : " + value1 + value2 + value3);
  }
</script>

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: http://minimaldesign.net/downloads/tools

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;
  trace(velocity);
}

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 http://code.google.com/apis/libraries/devguide.html.  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>

with:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></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="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></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="//ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></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.

New Year, New home work space.

New year needs a new work space. Thanks to IKEA.

You are seeing two table tops 59″ x 30″ x 1″ ($60 each). They were stained and covered polyurethane, and sanded with 220 grit for a smooth finish.

Attached with adjustable height legs for a 32″ lift. ($15 each).

Couple of book shelfs above that and you have a lot of space then what i had before.

HTC Incredible screen shot

Here is the screen shot of my HTC Incredible with the Sense UI 2.0, which allows 7 panels for the home screen.

HTC Incredible Screen Shot

The 3 panels on the left of the center home screen has all the most used widgets. Starting with the far left with the google calendar. Second to the left has the “dogg catcher” podcast widget, Tip calculator and “Key ring” widget. Third from the left has my quick profile widget and favorites.

Center screen has the default time and weather. Below that is the power strip widget for quick access to battery saving features. below are the apps that is sequential to the bottom four apps on the iPhone. Except the Phone icon on the left is replaced with “voice dialer” since the sense UI already had “Phone” on the bottom middle.

First screen to the right has all the apps that match the default home screen on the iPhone.

  • Messages
  • Calendar
  • Photos
  • Youtube
  • Stocks
  • Maps
  • Weather
  • Camera
  • Clock
  • Calculator
  • Notes
  • Settings
  • iTunes
  • AppStore
  • Contacts
  • Voice Memos

Notice, android does not have a pre installed “Notes” and “iTunes” app. So it was substituted with an equivalent app that I downloaded.

Second to the right, I added all the additional apps that was pre installed.

The last screen on the right has all the apps I downloaded and organized into its corresponding category.