Categories
HTML5

HTML5: Javascript shiv library

IE doesn’t understand, and doesn’t know how to render the newest HTML5 elements. But if there is a “document.createElement(‘section’)”, you will be able to display now section element in IE old browsers, and even style it. shiv library does that for you.

In those cases, this is what you need:

https://github.com/aFarkas/html5shiv/

Along with this:

<!–[if lte IE 8]>

<script src=”html5.js”></script>

<![endif]–>

Categories
JavaScript

Javascript: functions, apply, call, and context. prototype and Constructors.

Everytime you call a function, an arguments property object gets generated. You can call it directly to see how many arguments you have passed to the function:

arguments.length

Remember that arguments is not a real array, even though it behaves like one, but you can always use the power of prototype and apply to make it behave like one:

Array.prototype.slice.call(arguments, 1)); // Tricking slice() to take arguments as a real array here

function range(start, end) { if (arguments.length < 2) { end = start; start = 0; }

The other thing that gets implicitly passed to functions is “this”, as the context of the function

apply is just a way to pass context to a function. But it also allows you to pass the context of “this” as an argument. Same with call, examples:

function run(from, to) { 
   alert("The ", this.adjective, " rabbit runs from ", from, " to ", to, "."); } 
   run.apply(whiteRabbit, ["A", "B"]); 
   run.call(fatRabbit, "the cupboard", "the fridge");
} // Both produce the same result, apply passes an argument

So, when you create an object using the “new” keyword. The function name will also have its own prototype space, on top of the already inherited Function object:

function Rabbit(adjective) { 
  this.adjective = adjective; 
} 
// functions in the prototype namespace will be present in all objects you spawn with new Rabbit("arg1");
Rabbit.prototype.speak = function(line) { 
  echo("The ", this.adjective, " rabbit says '", line, "'"); 
};
Some things to take into account:
1) Defining functions the "traditional" way, will result on those functions being a method of the window (Global) object. By traditional I mean not as part of another object, straight out as:
function noModule() { return this; }
now: window.noModule is defined.
2) Now, the beauty of this: if you define an object, and assign noModule to it, the context of 'this' change to the context of the object the function is attached to:
myDefinedObj.noModule = noModule;
noModule(); // Will return myDefinedObj instead of window
3) When you want to switch the context of 'this' from window to another object, but don't want to attach your function as a permanent method in the object at hand, you can use call() or apply():
noModule.call(myDefinedObj); // Will return myDefinedObj, or used internally for any definitions inside the function
4) Don't forget functions have an implicit constructor object, if you use it, at runtime you will generate a brand new 'this' associated with the function:
var newFunction = new noModule(); // Even if there was no implicit return, you will be returning 'this' as the internal context of the new instance of the function just created, not window
Note: convention calls for noModule to be NoModule when used this way. Just as a reminder this is a constructor, not a function. Also, if you find yourself returning something in the function, this may not be a good candidate for a Constructor, since the idea of a constructor is to return "this" implicitly.
5) Meet bind(). This is a function that takes an object as an argument, and makes sure that object will be the context everytime a function is called:
noModule.bind(myDefinedObj); // From now on, noModule returns noModule instead of window
bind also takes arguments to be binded to the function, not only the 'this'. But performance is poor, in which case you may as well use call or apply if you can.
curry() is simmilar to bind, but does not take 'this' or any object to define context. It just binds arguments to a function.
Categories
JavaScript

JavaScript: control structures

While loop:

var currentNumber = 0; 
while (currentNumber <= 12) { 
   print(currentNumber); 
   currentNumber = currentNumber + 2; 
}

For loop (everybody knows it, but here it is):

for (var number = 0; number <= 12; number = number + 2) 
print(number);

Breaking out of loops:

for (var current = 20; ; current++) { if (current % 7 == 0) break; }

If / else:

if (variable == "value1") action1(); else if (variable == "value2") action2(); else if (variable == "value3") action3(); else defaultAction();

Switch statement:

switch(prompt("What is the weather like?")) { 
   case "rainy": print("Remember to bring an umbrella."); 
      break; 
   case "cloudy": 
     print("Go outside."); break; 
  default: print("Unknown weather type!"); break; 
}

Recursion:

function power(base, exponent) { 
  if (exponent == 0) return 1; else return base * power(base, exponent - 1); 
}
Categories
JavaScript

Javascript: cast variables

To convert variable types in JS:
Boolean(value) – casts the given value as a Boolean
Number(value) – casts the given value as a number (either integer or floating-point)
String(value) – casts the given value a string

Categories
General JavaScript

Javascript: modulo

As an arithmetic operation, use it to find out if a number is divisible by another one, with no reminder afterwards. Basic stuff, but important.

Categories
Contracting

General: Interview questions

Front End (JavaScript):
1) Difference between setTimeOut and setInterval. setTimeOut will call the function in order just once, setInterval will call it multiple times. The latest Firefox will only call once per second. Since what happens in the called function may take longer to execute than the next time interval, it is recommended to use setTimeOut and wait for the execution to finish in the following fashion:

(function loop(){
setTimeout(function(){
// logic here

// recurse
loop();
}, 1000);
})(); // This way you know loop() finish executing before it gets called again

2) Iterations, and array sorting (see Array Sorting for details. Very important.

3) There are recurring themes of the kind of teasers candidates are asked to complete. You  know you know your stuff, but you may be a bit nervous and not in the best position to think things through, so make sure you review the following:

– Write a program that determines if a string is a palindrome

– Write a program that tells you what is the fastest path down a binary tree

4) Memoization: it is simply keeping a cache of results inside functions that perform expensive calculations, so they don’t have to be repeated over and over again.

Memoization

Categories
CSS HTML5 JavaScript

Definition: polyfills

Scripting to make up for missing CSS or HTML features in legacy browsers. Not ideal, but sometimes necessary.

Categories
Rails

Ruby on Rails – Jasmine: place where you include the js files you need for testing

jasmine.yml

Basic one, I should have known. Making sure I will not forget…

Categories
CSS

CSS3: Background gradients

background: #0000FF; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#3399CC’, endColorstr=’#0000FF’); /* for IE */
background: -o-linear-gradient(#333366, #eee 50%, #99CC99);
background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#FFF)); /* for webkit browsers */
background: -webkit-linear-gradient(#333366, #eee 50%, #99CC99);
background: -moz-linear-gradient(top, #333366, #eee 50%, #99CC99); /* for firefox 3.6+ */

height: 100%; /* To ensure the entire page gets covered if you are applying this to the entire body */
margin: 0;
padding: 0;

You can also have only two colors in there, the 50% indicates the position of the third color (in the middle of the screen).