Mera Byte

A Byte of My World

0 notes

Inserting JQuery into a live site.

Simply paste this on your console.log

    
    (function() {
  var el=document.createElement('div'),
   b=document.getElementsByTagName('body')[0];
   otherlib=false,
   msg='';
  el.style.position='fixed';
  el.style.height='32px';
  el.style.width='220px';
  el.style.marginLeft='-110px';
  el.style.top='0';
  el.style.left='50%';
  el.style.padding='5px 10px';
  el.style.zIndex = 1001;
  el.style.fontSize='12px';
  el.style.color='#222';
  el.style.backgroundColor='#f99';
  if(typeof jQuery!='undefined') {
 msg='This page already using jQuery v'+jQuery.fn.jquery;
 return showMsg();
  } else if (typeof $=='function') {
 otherlib=true;
  }
  // more or less stolen form jquery core and adapted by paul irish
  function getScript(url,success){
 var script=document.createElement('script');
 script.src=url;
 var head=document.getElementsByTagName('head')[0],
  done=false;
 // Attach handlers for all browsers
 script.onload=script.onreadystatechange = function(){
   if ( !done && (!this.readyState
     || this.readyState == 'loaded'
     || this.readyState == 'complete') ) {
  done=true;
  success();
  script.onload = script.onreadystatechange = null;
  head.removeChild(script);
   }
 };
 head.appendChild(script);
  }
  getScript('http://code.jquery.com/jquery-latest.min.js',function() {
 if (typeof jQuery=='undefined') {
   msg='Sorry, but jQuery wasn\'t able to load';
 } else {
   msg='This page is now jQuerified with v' + jQuery.fn.jquery;
   if (otherlib) {msg+=' and noConflict(). Use $jq(), not $().';}
 }
 return showMsg();
  });
  function showMsg() {
 el.innerHTML=msg;
 b.appendChild(el);
 window.setTimeout(function() {
   if (typeof jQuery=='undefined') {
  b.removeChild(el);
   } else {
  jQuery(el).fadeOut('slow',function() {
    jQuery(this).remove();
  });
  if (otherlib) {
    $jq=jQuery.noConflict();
  }
   }
 } ,2500);
  }
})();

There is also a bookmarklet that you can add to your browser directly. Check that out in the post link below.

Source: http://blog.reybango.com/2010/09/02/how-to-easily-inject-jquery-into-any-web-page/

Filed under javasciprt

0 notes

Prototyping Your Workflow

Filed under design

0 notes

Augmenting Types in Javascript

Definition of Augmenting:

Make something by adding to it.

Javascript allows you to augment a method or a property to any object using the prototype function. Like so:

    Object.prototype.abc = function() {
        console.log("abc");
    }

The abc function will now be available to any object you create. Similarly, you can augment methods to functions. That method will be available to all the functions you create. Example for the same can be:

    Function.prototype.moethod = function(name, func) {
        this.prototype[name] = func;
        return this;
    }

The above method method allows you to augment a method to any function without using the .prototype ugliness.

Source: Javascript: The Good Parts

Filed under javascript

1 note

Tail Recursion Optimization

To put it in word - “NO” - Javascript does not provide it. But wait; What is it?

To understand this, you ll have to go back to pre-medieval era (of the computer of course), when there were procedural programming languages and object oriented were just round the corner. During that time, there was a programming language called “scheme”. A time when functions were referred to as “procedural definition” and programs were written in prefix or postfix manner. There were two models in which a recursive function could be written.

1. Applicative Order

To evaluate a combination whose operator name primitive procedures where the interpreter evaluates the elements of the combination and applies the procedure (which is the computed value) and to the arguments (i.e. parameters to the function). This is the default behaviour of the interpreter. Lets see it in action.

Note: The language in which it is written is scheme. You can know more about it here.

Lets see a function to compute factorial of a number.

	(define (fact x)
		(if(= x 0) 1
			(* x (fact (- x 1)))
		)
	)

Now, the above function is NOT a tail recursive optimized code. What this basically does is :

	(fact 3)
	(* 3 (fact 2))
	(* 3 (* 2 (fact 1)))
	(* 3 (* 2 (* 1 (fact 0))))
	(* 3 (* 2 (* 1 1)))
	(* 3 (* 2 1))
	(* 3 2)
	6

What this basically means is, when we call the function for computing 3!, it basically substitutes the (- x 1) part everytime it calls itself until the last number and then start calculating backwards. Now, imagine, if the number were big enough, how many substitutions the interpreter would have to make - and not only that, how much memory it might need to remember all that substitution. H,mmmm, Not good. So, there is another way to do this.

2. Normal Order

	(define (fact x)
		(define (fact-tail x accum)
			(if (= x 0) accum
				(fact-tail (- x 1) (* x accum))))
		(fact-tail x 1)
	)

What this basically is doing is, instead of substituting and then computing, it is computing first and then substituting. Here, the interpreter has to keep track of the same amount of data and not depending how many time the function recurs.

Strucasdf	(fact 3)
	(fact-tail 3 1)
	(fact-tail 2 3)
	(fact-tail 1 6)
	(fact-tail 0 6)
	6

Sources:

Filed under javascript

0 notes

Function Invocations in Javascript

Firstly, remember, all functions are objects in Javascript. The difference is that Objects produced using the object literals are linked to Object.prototype and similarly, function objects are linked to Function.prototype which itself linked to the Object.prototype

Since functions are objects, they can be stored in variables, arrays or another objects. Thus, they can also be passed as an argument to other functions and then obviously, yes, they can also be returned just like a variable from a function. And beat this, since they are objects, they can themselves have methods

Basic difference between Function and Method: When an object’s property is defined as a function, it is called as a method.

	var myObject = {
		objProp: "abc",
		
		objFunc: function() {
			console.log("I am a method")
		}
	}
	
	// they are invoked like this:
	
	myObject.objFunc();		// displays: "I am a method"

Invoking

Invoking a function basically suspends the execution of the current function, passing control and parameters to the new function. By the way, every function apart from its declared parameters, have two additional parameters this and arguments The value of this is determined by how the function was invoked. There are 4 types of invocation patterns, namely:

  • Method Invocation Pattern
  • Function Invocation Pattern
  • Constructor Invocation Pattern
  • Apply Invocation Pattern

The invocation operator is a pair of parenthesis () that follow any expression that produces a function value. Basically what this means is that the syntax of the function should look something like this:

	function function_name(param1, param2) {			// params are optional
		...
	}
	
	// invoking a function
	function_name()
	// the function_name function has to be defined somewhere in your code.

Method Invocation Pattern

As mentioned earlier, a function stored as a property of an object, it is called as a method. When the method is invoked, it is bound to the object itself. Usually, you’ll be able to identify if a method is being invoked, when you see a “.” (period) right before the method name. Which means, it is being invoked from that object (see first set of code block above).

Function Invoking Pattern

When a function is not a property of an object, it is invoked as a function. But, there is a catch

myObject = { objProp:123 }

myObject.double = function(p) {
	var helper = function() {
		console.log(this.objProp + p)
	}

	// invoking helper as a function.
	helper()
}

// invoking as method
myObject.double(5)

// Surprisingly, this gives an error.

If you see, the double method contains an inner function called helper which is trying to access the object’s objProp property. But it is not able to do so. This a flaw in Javascript’s design itself. But there is a workaround for this. We simply assign the this to another variable, which then the helper function will be able to access, like so.

myObject = { objProp:123 }

myObject.double = function(p) {
	var that = this
	var helper = function() {
		console.log(that.objProp + p)
	}

	// invoking helper as a function.
	helper()
}

// invoking as method
myObject.double(5)

// will print 128

Constructor Invoking Pattern

Lets say you define a simple function like so:

	function myFunc(something) {
		this.something = something;
	}

Right now, myFunc is just a function. But you can create an object of myFunc, like so.

	var mf = new myFunc("hello World")
	
	console.log(mf.something)
	// prints "hello world"

Here, the this is bound to the new object mf. Lets create another object

	var mf2 = new myFunc("ignore world")
	
	console.log(mf.something)
	// prints "ignore world"

Thus, as you see, the function myFunc acts as a constructor. Now, lets add another method to myFunc, so that all objects can access that new method.

	myFunc.prototype.newMethod = function() {
		return this.something;
	}

By doing this, all objects that are already created i.e. mf and mf2 will have access to this newMethod automatically and surprisingly, it is in their own context. Try this console.log(mf.newMethod()) and see what you get. Also, try console.log(mf2.newMethod()). Thus, when you invoke a function prefixed with a new keyword, they are called as constructors and by convention, all constructors should have their first letter as capital (which I haven’t done) but you should.

Apply Invoking Pattern

Javascript is a functional-object-oriented language, which means, all functions are objects, thus, functions can have methods. Lets say you defined a function called add which look something like this:

	function add(a, b) {
		return a + b;
	}
	
	// create an array with 2 elements
	var array = [5, 4]
	
	// now you want to apply that add function to the array, you do that by:
	var sum = add.apply(null, array)
	
	// sum is 9
 

Similarly, you can also apply properties of one object to another. Like so

	// create first object
	var obj1 = function(something) {
		this.param = something;
	}
	// also lets add a method to obj1
	obj1.prototype.getParam = function() {
		return this.param;
	}
	
	
	// create another object
	var obj2 = {
		param: "Alpha"
	}
	
	// now, update obj1.param by applying obj2's param to it. We do that like so
	var newParam = obj1.prototype.getParam.apply(obj2)
	
	// newParam is now "Alpha"
 

Source: Javascripts, the good parts - O’Reilly

Filed under javascript

0 notes

Humanities majors may well learn a great deal about the world. But they don’t really learn career skills through their studies. Engineering majors, conversely, learn in great technical detail. But they might not learn why, how, or where they should apply their skills in the workforce. The best students, workers, and thinkers will integrate these questions into a cohesive narrative.
Peter Theil

Filed under quotes

0 notes

Upload File size Increase in php.ini

The location of this file on a Ubuntu operating system is: /etc/php5/apache2/php.ini

Run the following command to edit it

gedit /etc/php5/apache2/php.ini

If you want to increase the max file size upload limit, here are the variables you need to look at

  • upload_max_filesize = 2M
  • post_max_size = 8M

Filed under php

0 notes

Components & Containers in Sencha Touch

 aExt.ndLet’s start off by creating some components and containers in sencha touch. Open up your Main.js and within the launch function, write the following code

var panel = Ext.create('Ext.panel', {
  layout: 'hbox',
  fullscreen: true,
  html: 'Hello, I am your panel container'
});

Here, we created a panel component which contains a basic html text. Each component has its default set of properties. You can also include other component within this component - that is you can call this a container as well. Now this is saved into a variable called panel. This will yet not show up on your browser, thus, you need to add this to the viewport. Do this by adding this line after the panel has been defined.

    Ext.Viewport.add(panel);

Now, if you refresh your page, you will be able to see this component. Also, when you create a component, you get default setter and getter functions. Try this out

    panel.setHtml('I am content set from a setter function');
    Ext.Msg.alert(panel.getHtml());

Let us add some other components to this existing components

    var panel = Ext.create('Ext.Panel', {
        layout: 'hbox'  //for aligning horizontally
        fullscreen: true,
        
        items: [        //array of items to be added to this
            {
                xtype: 'panel',
                flex: 1,
                html: 'Left Panel 1/3rd of the total size',
                style: 'background-color: #5e99cc'
            },
            {
                xtype: 'panel',
                flex: 2,
                html: 'Right Panel 2/3rd of the total size',
                style: 'background-color: #759e60'
            }
        ]
    });

Here we added two new components within panel

Here, remember the xtype is a way to create new components without the hassle of writing the Ext.create( .. ) function.

Here is a list of xtypes in sencha-touch

Filed under mobile sencha

0 notes

Creating Sencha Touch Application

Downlaod the Sencha Touch SDK

Open command prompt and cd to your sdk folder and run the following sencha generate app command, like so

c:\sencha-touch-sdk>sencha generate app GS ../layout

Here, your application’s name is “GS”. You will see this within the model, view and controller files. You can give any name you want to here. Next to it is the location of the application where you want to create. Here, I chose to create it right parallel to the sencha-touch-sdk folder where I am currently in.

Once you have run this command it will generate an application architecture folder titled “layouts”. When you open the folder, the basic struture contains an index.html

file and some other folders. The folder we are interested in right now is the app folder. This contains the views, models, controllers, stores and the profiles folders. We will be creating/editing files within these folders itself.

For now, you can run the index.html file and see the sample application on the browser.

Filed under mobile sencha