Andrew Chaa, cha cha

jQuery basics

Andy — Thu, 17 May 2012 15:55:30 +0000

This is the summary of “Fundamentals of Great jQuery Development”, which is available at http://vimeo.com/18511621.

javascript is a functional language, not in a useful way, but because it treats function as its first-class citizen. It is also Object-oriented language, as it treats everything as object.

function declaration
This is what people use most of the time.

function foo(p1) {
    p1();
}

function expression
This doesn’t have name and is anonymous.

foo(function () {});

function expression with name

foo(function f1(), "test" {});

json literals

var o = {
    foo: 1,
    bar: "test",
    alpha: {
        damian: function () { }
    }
};

Here o is an object.

constructor
“new” means you create a new object based on its protytype.
If you mean a class, capitalise the first letter as convention.

function Animal() {
    this.breed = "domestic tabby";
    this.smellsLike = "candy";
}
Animal.prototype = {
    member1: function() { },
    member2: ""
};

var f = new Animal(); // create a new animal based on the prototype.
f.member1
var f = Animal(); // this makes breed and smellsLike global scope, possibly overriding other breed.

Scope
In javascript, a variable’s scope is function-level. A variable is accessible within a function, even though it is declared within a block

function () {
    var i = 0;
    for (var j = 0; j <= 10; j++) {
        var x = 'test'; 
    }
    x = 20; //this x is visible outside of the for block
}
x = 20: // x is not visible outside of function

Global variable or function is bad, because you cannot guarantee that only your javascript would run in the browser. You have multiple javascript from 3rd party, grease-monkey plugins, …

So, don’t declare a function in the global scope. Instead, create anonymous function and immediately execute it.

(function() {
    var i = 'test'; //as long as you use 'var', it is safe.
    this.alert('hi'); // this is global window
    
}())

//If you want to pass window object
(function (w) {
    var i = 'test';
}(window))

this

function foo() {
    this //this is an global object
}

function Foo() {
    this // not an global object, but this function.
}
var f = new Foo();


//this can be resued depending on the context.
function foo() {
    alert(this.hi); //In this case, this becomes the function, not global.
}
foo.call({ hi: 'test' });
foo.call({ hi: 123 });

Closure
A closure is a function that references a variable that isn’t contained within its own immediate scope.

// this variable is out of the scope;
function foo() {
    var myVar = 1;

    return function() { 
        return myVar.toString();
    };
}

var myFunc = foo();
myFunc(); //This access myVar, which is outside of the function boundary. This looks trivial, but event handler takes advantage of closure.

Rails Commands

Andy — Wed, 16 May 2012 06:41:18 +0000

Summary of various ruby commands

.erb: embedded ruby, the primary template system for including dynamic content in web pages.

Generation

$ rails generate integration_test static_pages

Undoing things

$ rails generate controller StaticPages home help
$ rails destroy  controller StaticPages home help

$ rails generate model Foo bar:string baz:integer
$ rails destroy  model Foo

$ rake db:migrate
$ rake db:rollback
$ rake db:migrate VERSION=0

Running tests

$ bundle exec rspec spec/requests/static_pages_spec.rb

Embedded Ruby template

<% provide(:title, 'About Us') %>


  
    Ruby on Rails Tutorial Sample App | <%= yield(:title) %>

Unix commands

mv: rename

$ mv app/views/layouts/application.html.erb foobar

Git commands

Commit, merge, and push

$ git add .
$ git commit -m "Finish static pages"
$ git checkout master
$ git merge static-pages
$ git push

RVM and bundler integration

$ rvm get head && rvm reload
$ chmod +x $rvm_path/hooks/after_cd_bundler
$ cd ~/rails_projects/sample_app
$ bundle install --without production --binstubs=./bundler_stubs

My Favourite Textmate Shortcuts

Andy — Mon, 14 May 2012 19:54:41 +0000

cmd + T: Go to file
ctrl + cmd + R: Reveal in a project
shft + cmd + N: new file in the current folder
cmd + Enter: go to the next line
cmd + W: close tab
shft + ctrl + D: duplicate the selection

to be continued …

Structuremap Basics

Andy — Fri, 04 May 2012 10:03:17 +0000

Define the instance for your interface

public class WiringModule
{
    public void Initialize(IInitializationExpression x)
    {
        x.For().Use();
    }
}

Call the wiring module within Application_Start() event in Global.asax.cs

protected void Application_Start()
{
    ObjectFactory.Initialize(wiringModule.Initalize);
}

To be continued

My ReSharper Keyboard Shortcuts

Andy — Mon, 30 Apr 2012 07:47:42 +0000

This is ReSharper’s comprehensive shortcuts. Yet there are a few things I favour.

Shft + F12: Go to previous error/warning/highlight. Handy, when you create a new type. You don’t have to press left arrow

jquery selection basics

Andy — Fri, 27 Apr 2012 10:49:43 +0000


$(':checkbox')          //If you want to select all checkboxes, 
$(':checkbox:enabled')  //Select all checkboxes enabled

$(':enabled, checkbox') //This works on Firefox and Chrome, but not on IE

To be continued…

show ajax loader image while making ajax request with jquery

Andy — Thu, 26 Apr 2012 15:01:27 +0000

You will need an image, first. Go to ajaxload.info and get one you like.

Put the html for the loader in the page.

Style the div element to position it on the centre of the browser.

Now, use javascript to fade it in and out, when an ajax request starts.

Reference: http://stackoverflow.com/questions/807408/showing-loading-animation-in-center-of-page-while-making-a-call-to-action-method

Windows 7 Bootcamp on mac Shortcut Keys

Andy — Wed, 25 Apr 2012 19:53:04 +0000

# Hash

It should be a simple thing, but dear!, I coundn’t find it. On Mac, you can use alt + 3. The combination is weird enough, but on windows 7, I couldn’t type it at all, … well until tonight.

Simply, it is right alt + 3. ##### hahaha.

To summarise all the key combinations

#: right alt + 3
Del: fn + <-
Home: fn + left arrow
End: fn + right arrow
Begging of a page: fn + up arrow
End of a page: fn + down arrow

Hope this post helps you out of your frustration with Windows 7 on Mac bootcamp.

Disable browser cache for ajax request on ASP.NET MVC

Andy — Wed, 25 Apr 2012 15:14:34 +0000

The application reloads the list of jobs, if any job is reposted or expired. We display different labels, such as “reposted”, “expired”, depending on the action. It worked well with browsers but IE 8.

Simply, IE was cacheing the part of html. Though we request the partial view by post.

update: function () {
    $.ajax({
        type: "GET",
        url: "MJobsB?p=" + list.cPg(),
        contentType: "text/html; charset=utf-8",
        dataType: "html",
        success: function (data) {
            $('#ct #cnt').html(data);
        },
        error: function () { alert("Error Loading Jobs"); }
    });
},

So, we brought in NoCache attribute. And made the action not cached on IE. We made it with attribute, as we want to cache other stuff, especially images.

This is NoCache attribute.

public class NoCacheAttribute : ActionFilterAttribute
{
    public override void OnResultExecuting(ResultExecutingContext filterContext)
    {
        filterContext.HttpContext.Response.Cache.SetExpires(DateTime.UtcNow.AddDays(-1));
        filterContext.HttpContext.Response.Cache.SetValidUntilExpires(false);
        filterContext.HttpContext.Response.Cache.SetRevalidation(HttpCacheRevalidation.AllCaches);
        filterContext.HttpContext.Response.Cache.SetCacheability(HttpCacheability.NoCache);
        filterContext.HttpContext.Response.Cache.SetNoStore();

        base.OnResultExecuting(filterContext);
    }
}

On controller, you just add the attribute.

[NoCache]
[HttpGet]
public ActionResult MJobsB(int cId, int? pg)
{
    return RenderJobListIn("_MJobsB", cId, Mode.List, pg, false);            
}

running sublime text 2 on ubuntu

Andy — Mon, 23 Apr 2012 14:42:54 +0000

You can download sublime text 2.

I created a directory, “Applications” under Home. I extracted the downloaded tar in there. Then I did “Make Link” of sublime_text executable and put it into /home/bin, where $Path includes. I renamed the shortcut (excuse my windows terminology) to “subl”, so I can just type “subl .” to launch the editor.

“Unable to locate theme engine in module_path: “pixmap”"
I run the editor and get this error.

sudo apt-get install gtk2-engines-pixbuf

Once you install gtk2…, the error will go away.