JavaScript: Aspect (AOP) in JavaScript

March 28th, 2011 by jeremychone | No Comments »

Great javascript lib for AOP: jQuery-AOP jQuery-AOP-Reference (just use the jQuery namespace)

before

jQuery.aop.before( {target: String, method: 'replace'},
  function(regex, newString) {
    alert("About to replace string '" + this +
           "' with '" + newString + "' using regEx '" + regex + "'");
  }
);

arround

jQuery.aop.around( {target: String, method: 'indexOf'},
  function(invocation) {
    alert('Searching: ' + invocation.arguments[0] + ' on: ' + this);
    return invocation.proceed();
  }
);

CSS3: Cool Twitter like Button (3D like)

March 23rd, 2011 by jeremychone | No Comments »

The Result:
CSS Button

The HTML:

<a href="#" class="btn"><span>Press this!</span></a>

The CSS:

.btn {
  display: inline-block;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  -webkit-box-shadow:
    0 8px 0 #1a74a1,
    0 15px 20px rgba(0,0,0,.35);
  -moz-box-shadow:
    0 8px 0 #1a74a1,
    0 15px 20px rgba(0,0,0,.35);
  box-shadow:
    0 8px 0 #1a74a1,
    0 15px 20px rgba(0,0,0,.35);
  -webkit-transition: -webkit-box-shadow .2s ease-in-out;
  -moz-transition: -moz-box-shadow .2s ease-in-out;
  -o-transition: -o-box-shadow .2s ease-in-out;
  transition: box-shadow .2s ease-in-out;
}

.btn span {
  display: inline-block;
  padding: 10px  20px;
  font-family: "cooper-black-std-1", "cooper-black-std-2", Helvetica, Arial, sans-serif;
  line-height: 1;
  text-shadow: 0 -1px 1px rgba(19,65,88,.8);
  background: #3194c6;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3194c6), to(#5bacd6));
  background: -moz-linear-gradient(#3194c6, #5bacd6);
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  -webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,.15);
  -moz-box-shadow: inset 0 -1px 1px rgba(255,255,255,.15);
  box-shadow: inset 0 -1px 1px rgba(255,255,255,.15);
  -webkit-transition: -webkit-transform .2s ease-in-out;
  -moz-transition: -moz-transform .2s ease-in-out;
  -o-transition: -o-transform .2s ease-in-out;
  transition: transform .2s ease-in-out;
}

.btn:active {
  -webkit-box-shadow:
    0 8px 0 #1a74a1,
    0 12px 10px rgba(0,0,0,.3);
  -moz-box-shadow:
    0 8px 0 #1a74a1,
    0 12px 10px rgba(0,0,0,.3);
  box-shadow:
    0 8px 0 #1a74a1,
    0 12px 10px rgba(0,0,0,.3);
}

.btn:active span {
  -webkit-transform: translate(0, 4px);
  -moz-transform: translate(0, 4px);
  -o-transform: translate(0, 4px);
  transform: translate(0, 4px);
}

Source: Type Study: An All CSS Button

JavaScript: Sort an array of objects

March 13th, 2011 by jeremychone | No Comments »

The data:

var myData = new Array();
myData[0] = {FirstName:"John", LastName:"Doe", Age:40};
myData[1] = {FirstName:"Fred", LastName:"Smith", Age:41};

The sort function:

function sortByFirstName(a, b) {
    var x = a.FirstName.toLowerCase();
    var y = b.FirstName.toLowerCase();
    return ((x < y) ? -1 : ((x > y) ? 1 : 0));
}

Sorting:

myData.sort(sortByFirstName);

Source: breakingpar.com: JavaScript Sorting

jQuery: How to test if an Object is a jQuery object

February 25th, 2011 by jeremychone | No Comments »
if (obj.jquery){
 //it is a jquery object (and .jquery is the version)
}else{
 //it is not a jquery object
}

source jQuery Forum

iOS: WebKit UIWebView remove tap/click highlight/border with CSS

February 10th, 2011 by jeremychone | No Comments »
*{
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-user-select: none;                /* disable text select */
-webkit-touch-callout: none;              /* disable callout, image save panel (popup) */
-webkit-tap-highlight-color: transparent; /* "turn off" link highlight */
}
a:focus{
  outline:0; // Firefox (remove border on link click)
}

Source: YUIBlog

Git: Ignoring a folder tree except a particular sub-folder

February 7th, 2011 by jeremychone | No Comments »

So, this will exclude any sub-folders form a but will include the sub-sub-sub-folder a/b/c and exclude the file a/b/c/file.xml

a/*
!b
a/b/*
!c
a/b/c/file.xml

jQuery: Bind and unbind the Esc key

February 4th, 2011 by jeremychone | No Comments »

Let’s say you want to allow your dialog boxes to be close when the user press “esc.”

$("body").bind("keyup.myDialog", function(event){
   // 27 == "esc"
   if (event.which == 27) {
      // TODO: close the dialog
      // unbind the event
      $("body").unbind("keyup.myDialog");
   }
});

Video: Free musics, sound track for presentations (powerpoint)

January 1st, 2011 by jeremychone | No Comments »

Free musics:

Paid musics (Royalty-Free):

OSX: How to trim a AVCHD, AVCLite (MTS or M2TS) on Mac without loss (i.e. rewrap vs transcoding)

January 1st, 2011 by jeremychone | No Comments »

It can be tricky, especially on Mac, to trim AVCHD videos (.MTS or .M2TS) without transcoding the videos. Most tools, such as Adobe Premiere, Adobe Media Encoder, Apple Final Cut Pro, and most sharewares, will require to convert before trimming, which is a slow and loss-full process.

On Windows, Canon provides a tool to directly trim .M2TS files without any re-encoding. However, on Mac it is more tricky, and I had to do some digging and spend some $ to accomplish about the same thing.

After much research, I found a way with two softwares:

  1. ClipWrap ($50): This allow you to convert your .MTS to .MOV without any re-encoding (just a “rewrap” as it is called). In short, it’s super fast (almost as fast a coping the file), completely loss-less, and you can play the new .MOV file with Quicktime.
  2. MPEG Streamclip (fully free): This free software allow to open video files (.mov, .mp4), trim them, and just save them (without transcoding). Make sure to use the “Save As,” as the “Export…” will do the transcoding. I wish it would support AVCHD format so that we would not need ClipWrap.
Anyway, it interesting that despite the perception that Mac is more for Media friendly, such basic tasks require so much work (and research). Also, iMovie ‘11 AVCHD support is very poor, as you cannot just drag and drop them in the tool and require an import (i.e. transcoding). Luckily, I am using Adobe Premiere CS5, which works seemlessly.
Hope this help. Feel free to add comment or email me if you have any comment or suggestion.

snowUI: Template to create a snowUI DAO

December 27th, 2010 by jeremychone | No Comments »
var MockUserDao = (function(){

    var somePrivateStuff = null;

	// Object function
	function MockUserDao(){};

	// ------ DAO Interface ------ //
	MockUserDao.prototype.getUser = function(objType,id){
	  somePrivateFunction();
	  ....
	}

	....
	// ------ /DAO Interface ------ //

	// ------ Privates ------- //
	function somePrivateFunction(){
	....
	}
	// ------ Privates ------- //	

	return MockUserDao;
})());

snow.dm.registerDao("user",new MockUserDao());