07 12 / 2011

I wanted to give CoffeeScript a try and decided to give it a go on current jQuery project. Below is a sample of the code.

CoffeeScript Code
$ ->	 
	### 
	--- Variables Init
	### 
	menuStatus = false
	newAlertsMenu = false
	### 
	--- Show Main Menu
	### 
	$("a.showMenu").live 'tap', ->
		if !menuStatus then $(".ui-page-active").animate
			marginLeft: "165px", 280, ->  
				menuStatus = true 
				return false	 
		else 			
			$(".ui-page-active").animate
				marginLeft: "0px", 280, ->  
					mentuStatus = false
					return false
	return 		
	### 
	--- Show New Alerts Panel
	###
	$("a.headerAlerts").live 'tap', ->
		if !newAlertsMenu then $("body").addClass("activeMenu"); $("#newAlerts").css("display", "block"); $(".ui-page-active").animate
			left: "-200px", 280, ->  
				newAlertsMenu = true
				return false

		else
			$(".ui-page-active").animate
				left: "0px", 280, ->  
					newAlertsMenu = false; 
					$("body").removeClass("activeMenu"); 
					$("#newAlerts").css('display','none');
					return false
	return



Generated jQuery Code
  $(function() {
    /* 
    	--- Variables Init
    */
    var menuStatus, newAlertsMenu;
    menuStatus = false;
    newAlertsMenu = false;
    /* 
    	--- Show Main Menu
    */
    $("a.showMenu").live('tap', function() {
      if (!menuStatus) {
        return $(".ui-page-active").animate({
          marginLeft: "165px"
        }, 280, function() {
          menuStatus = true;
          return false;
        });
      } else {
        return $(".ui-page-active").animate({
          marginLeft: "0px"
        }, 280, function() {
          var mentuStatus;
          mentuStatus = false;
          return false;
        });
      }
    });
    return;
    /* 
    	--- Show New Alerts Panel
    */
    $("a.headerAlerts").live('tap', function() {
      if (!newAlertsMenu) {
        $("body").addClass("activeMenu");
        $("#newAlerts").css("display", "block");
        return $(".ui-page-active").animate({
          left: "-200px"
        }, 280, function() {
          newAlertsMenu = true;
          return false;
        });
      } else {
        return $(".ui-page-active").animate({
          left: "0px"
        }, 280, function() {
          newAlertsMenu = false;
          $("body").removeClass("activeMenu");
          $("#newAlerts").css('display', 'none');
          return false;
        });
      }
    });
  });

16 11 / 2011

I have been wanting to find something to build with Sencha Touch latest release which is till in preview mode. I decided to use Yelps API to find listings of taco places near you. 

Tacofindr

Demo (still a work in progress)

25 5 / 2011

Here is a collection of resources for anything to do with mobile design and development:

Github Resources:

  • TouchScroll is a JavaScript- and CSS 3-based scroller for devices using Webkit Mobile (jQuery Plugin)
  • Zepto.js is a minimalist inlinable framework for mobile WebKit browsers