Yannis Kolovos: November 2011

Tuesday, 29 November 2011

Ruby on Rails on DreamHost Installation

Ruby on Rails on DreamHost Installation
http://www.fogel.ca/2009/02/10/ruby-on-rails-on-dreamhost-installation/

Monday, 28 November 2011

Play framework (Java)

git clone git://github.com/playframework/play.git
&&
cd play/framework &&
ant
&&
cd ..
&&
./play new myApp
&&
testApp
&&
./play run myApp/

In myApp/confing change the port to 9999 (default it 9000)

http://www.playframework.org/documentation/1.2.3/ide

Play and scala

http://www.jamesward.com/2011/10/19/running-play-framework-scala-apps-on-heroku

--> http://blazing-sunset-9132.herokuapp.com/application/sayhello?myName=say+hello

Sunday, 27 November 2011

demos

http://css-tricks.com/downloads/

jquery plugin http://lab.smashup.it/flip/

Saturday, 26 November 2011

template

class my_page
{
    public function template($name=null)
    {
        static $template = 'templates/page.html';
        if ($name) $template = "templates/{$name}.html";
        else return $template;
    }
}

$p = new my_page;
$p->template('product');
include $p->template();

php timeago

<?php
## alex at nyoc dot net
## Feel free to better for your needs

function timeago($referencedate=0, $timepointer='', $measureby='', $autotext=true){    ## Measureby can be: s, m, h, d, or y
    if($timepointer == '') $timepointer = time();
    $Raw = $timepointer-$referencedate;    ## Raw time difference
    $Clean = abs($Raw);
    $calcNum = array(array('s', 60), array('m', 60*60), array('h', 60*60*60), array('d', 60*60*60*24), array('y', 60*60*60*24*365));    ## Used for calculating
    $calc = array('s' => array(1, 'second'), 'm' => array(60, 'minute'), 'h' => array(60*60, 'hour'), 'd' => array(60*60*24, 'day'), 'y' => array(60*60*24*365, 'year'));    ## Used for units and determining actual differences per unit (there probably is a more efficient way to do this)
   
    if($measureby == ''){    ## Only use if nothing is referenced in the function parameters
        $usemeasure = 's';    ## Default unit
   
        for($i=0; $i<count($calcNum); $i++){    ## Loop through calcNum until we find a low enough unit
            if($Clean <= $calcNum[$i][1]){        ## Checks to see if the Raw is less than the unit, uses calcNum b/c system is based on seconds being 60
                $usemeasure = $calcNum[$i][0];    ## The if statement okayed the proposed unit, we will use this friendly key to output the time left
                $i = count($calcNum);            ## Skip all other units by maxing out the current loop position
            }       
        }
    }else{
        $usemeasure = $measureby;                ## Used if a unit is provided
    }
   
    $datedifference = floor($Clean/$calc[$usemeasure][0]);    ## Rounded date difference
   
    if($autotext==true && ($timepointer==time())){
        if($Raw < 0){
            $prospect = ' from now';
        }else{
            $prospect = ' ago';
        }
    }
   
    if($referencedate != 0){        ## Check to make sure a date in the past was supplied
        if($datedifference == 1){    ## Checks for grammar (plural/singular)
            return $datedifference . ' ' . $calc[$usemeasure][1] . ' ' . $prospect;
        }else{
            return $datedifference . ' ' . $calc[$usemeasure][1] . 's ' . $prospect;
        }
    }else{
        return 'No input time referenced.';
    }
}


$gmtimenow = time() - (int)substr(date('O'),0,3)*60*60; 


echo timeago($gmtimenow);

Friday, 25 November 2011

css tools web2

tools: http://pelfusion.com/tools/7-useful-css3-code-generators/

css 3 selectors:
http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/

How to save your youtube videos with javascript

index.php

<?php 
/**
* Save favorite youtube links in one place
 *
* @author Ioannis Kolovos
 * @version $Id$
* @copyright netWorks Inc!, 25 November, 2011
 * @package default
*javascript link: javascript: var l = window.location;  var t = escape(document.title); window.location ="HOST/?l="+ l + "&t="+t+"&h=02ce4c679b9a06815a8644a5d911e46b";
**/



$date = date('l jS \of F Y h:i:s A');
$url= $_GET[l];
$tmp= str_replace("::", " " , $_GET[t]);
$title = str_replace("- YouTube", "", $tmp);
$hash= $_GET[h];
$vdb = "videos.txt";
$line = file_get_contents($vdb);
$host = "/";
$validation = "02ce4c679b9a06815a8644a5d911e46b";
$cache ="./cache/";
$cache_imgs = scandir($cache);

 
function getImage($id)
{
 global $cache_imgs, $cache;

 if (in_array($id .".jpg", $cache_imgs)){
  return $cache.$id .".jpg";
 }


 else {
  $thumb = "http://img.youtube.com/vi/". $id. "/0.jpg";
  $get_image = file_get_contents($thumb);
  $local_image = $cache.$id.".jpg";
  file_put_contents($local_image, $get_image, FILE_APPEND | LOCK_EX);
  return $local_image;

 }



}



if (isset($hash) && $hash == $validation) {

 parse_str( parse_url( $url, PHP_URL_QUERY ), $getdata );
 $data = $getdata['v'];

 if ( preg_match( "/^" . $data . "/", $line ) )
 {
  print "<b>Video posted allready</b><br/>";
  exit();
 } else {
  $stringData = $title . "::" . $data . "::" . $date . "#";
  file_put_contents($vdb, $stringData, FILE_APPEND | LOCK_EX);
  echo"<meta http-equiv=\"refresh\" content=\"0; url= $host\">";
  echo "<div style=\"text-aling:center\"><h1>Video saved :)</h1></div>"; 



 }
}

else {


 ?>

 <!doctype html public "â�°">
  <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" >
  <title dir="ltr">:: Emergency Favorite Songs ::</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  <link rel="stylesheet" media="screen" href="style.css?v=2" >
  <script src="http://code.jquery.com/jquery-latest.js"></script>

 <!--http://johnkolovos.blogspot.com/2011/11/how-to-save-youtube-links-in-your-page.html -->
 </head>
 <body>

  <?php

 $info = explode("#", $line);
 array_reverse($info);
 $size = count($info)-1;

 $i = 0;
 echo $i;

 foreach ($info as $value) { 
  if ($i<$size) {

   $video = split("::", $value); 
   ?>

   <div class="box">
    <!-- <h1><?php echo $video[0]; ?></h1>-->


   <?php 



   ?>

   <a  href="#"><img   id="<?php echo  $video[1]; ?>" style="height: 200; width: 200px"  src="<?php echo getImage( $video[1]); ?>" /></a>

   <p id="<?php echo  $video[1]; ?>_p" title="@<?php echo  $video[2]; ?>"><?php echo $video[0]; ?></p>



   <div id="<?php echo  $video[1]; ?>_" style="display:none">
   <object style="height: 200; width: 200px" >
    <param name="movie" value="http://www.youtube.com/v/<?php echo $video[1]; ?>?version=3&feature=player_detailpage&autoplay=1">
   <param name="allowFullScreen" value="true"><param name="allowScriptAccess" value="always">
    <embed src="http://www.youtube.com/v/<?php echo  $video[1]; ?>?version=3&feature=player_detailpage&autoplay=1" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="200" height="200"></object>

   </div>


   </div>





   <?php }

   $i++; 

  }}


  ?>


  <script>
  $('img').click(function () {   
   var id =$(this).attr('id');
   $(this).fadeOut("fast");
   $('#'+id+'_p').css("display", "none");
   $('#'+id+'_').css("display", "inline");
   return false;

  });
  </script>

style.css

.video {
     text-shadow: 1px 1px 3px #888; /* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */
-webkit-box-shadow: 0px 0px 4px #ffffff; /* Saf3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
     -moz-box-shadow: 0px 0px 4px #ffffff; /* FF3.5 - 3.6 */
          box-shadow: 0px 0px 4px #ffffff; /* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */
text-align:center;
padding-top:10px;

  background-color: #444444;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10+, Saf5.1+, iOS 5+ */
  background-image:    -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
  background-image:     -ms-linear-gradient(top, #444444, #999999); /* IE10 */
  background-image:      -o-linear-gradient(top, #444444, #999999); /* Opera 11.10+ */
  background-image:         linear-gradient(top, #444444, #999999);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); /* IE6-IE9 */

 -webkit-border-radius: 12px; /* Saf3-4, iOS 1-3.2, Android <e;1.6 */
     -moz-border-radius: 12px; /* FF1-3.6 */
          border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
  -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; 
padding-bottom:20px;

 
  font-family:Georgia
}

p{

margin-top:-35px;
padding-bottom:10px;
font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
  
}
 

h1 {
padding-top:-35px;
font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
 

}

body{
background:#D1D1D1;
color:#323232;
 
 
  
 text-align:center;
 text-shadow:0 1px 0 #FFFFFF;
font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
 font-size: 13px;


}

.video {
     text-shadow: 1px 1px 3px #888; /* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */
-webkit-box-shadow: 0px 0px 4px #ffffff; /* Saf3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
     -moz-box-shadow: 0px 0px 4px #ffffff; /* FF3.5 - 3.6 */
          box-shadow: 0px 0px 4px #ffffff; /* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */
text-align:center;
padding-top:10px;

  background-color: #444444;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10+, Saf5.1+, iOS 5+ */
  background-image:    -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
  background-image:     -ms-linear-gradient(top, #444444, #999999); /* IE10 */
  background-image:      -o-linear-gradient(top, #444444, #999999); /* Opera 11.10+ */
  background-image:         linear-gradient(top, #444444, #999999);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); /* IE6-IE9 */

 -webkit-border-radius: 12px; /* Saf3-4, iOS 1-3.2, Android <e;1.6 */
     -moz-border-radius: 12px; /* FF1-3.6 */
          border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
  -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; 
padding-bottom:20px;

 
  font-family:Georgia
}

p{

margin-top:35px;
 
font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
  
}
 

h1 {
padding-top:-35px;
font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
 

}

body{
background:#D1D1D1;
color:#323232;
 
 
  
 text-align:center;
 text-shadow:0 1px 0 #FFFFFF;
font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
 font-size: 13px;


}

.box {
float:left;
width: 200px;
     text-shadow: 1px 1px 3px #888; /* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */

height: 200px;
margin:10px;

 
 
}

javascript: var l = window.location;  var t = escape(document.title); window.location ="HOST/?l="+ l + "&t="+t+"&h=02ce4c679b9a06815a8644a5d911e46b"

drag drop link in bookmark : Save video

http://www.net-works.gr/music/

UPDATE:
javascript:%20var%20l%20=%20window.location.href.replace("#","").replace("!",%20"");;%20%20var%20t%20=%20escape(document.title);%20window.location%20="HOST/?l="+%20l%20+%20"&t="+t+"&h=02ce4c679b9a06815a8644a5d911e46b"

Monday, 21 November 2011

window.localStorage

// See if the property that we want is pre-cached in the localStorage
if ( window.localStorage !== null && window.localStorage.gameDict ) {
  dictReady( window.localStorage.gameDict );

// Load in the dictionary from the server
} else {
  jQuery.ajax({
    url: cdnHREF + "dict/dict.js",
    dataType: "jsonp",
    jsonp: false,
    jsonpCallback: "dictLoaded",
    success: function( txt ) {
      // Cache the dictionary, if possible
      if ( window.localStorage !== null ) {
        window.localStorage.gameDict = txt;
      }

      // Let the rest of the game know
      // that the dictionary is ready
      dictReady( txt );
    }
    // TODO: Add error/timeout handling
  });
}

scripts

Moment.js

http://momentjs.com/
http://listjs.com/examples/standard.html
http://gitlabhq.com/index.html

http://dhtmlx.github.com/message/

animate.css
http://daneden.me/animate/#cta
http://peerbind.com/

http://simplemodal.plasm.it/#examples

fire and assert key combination strings against elements and events
http://keithcirkel.co.uk/jwerty/
https://github.com/keithamus/jwerty/blob/master/README-DETAILED.md

https://github.com/jeresig/jquery.hotkeys

image class
http://imagine.readthedocs.org/en/latest/index.html
http://stefangabos.ro/php-libraries/zebra-image/

imagemapster
http://www.outsharked.com/imagemapster/
https://github.com/jamietre/ImageMapster
map->
http://socrtwo.info/image_map.htm
http://sourceforge.net/projects/inkscapemap/

http://www.boutell.com/mapedit/

add sliding (aka "floating") panel functionality to your web page
http://simianstudios.com/portamento/

restler
http://luracast.com/products/restler/
https://github.com/Luracast/Restler
http://singmood.com/Source.zip

http://www.webresourcesdepot.com/15-must-have-bookmarklets-for-web-designers-and-developers/

alert -->sticky
http://thrivingkings.com/sticky/
http://thrivingkings.com/apprise/

form
http://thrivingkings.com/formly/

css-->
http://lea.verou.me/chainvas/

read-->
http://perfectionkills.com/
http://ejohn.org/category/blog/page/2/

http://kangax.github.com/fabric.js/demos/

READ---->http://jsninja.com/

jquery.transit

http://ricostacruz.com/jquery.transit/

Sunday, 20 November 2011

Geolocation

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  <title>Getting the user location via  IP Geo lookup</title>
  <link rel="stylesheet" href="http://yui.yahooapis.com/2.7.0/build/reset-fonts-grids/reset-fonts-grids.css" type="text/css">
  <link rel="stylesheet" href="http://yui.yahooapis.com/2.7.0/build/base/base.css" type="text/css">
  <style type="text/css" media="screen">
  body,html{
    background:#333;
    color:#ccc;
  }
  #doc{
    background:#f8f8f8;
    color:#333;
    border:1em solid #f8f8f8;
    font-family:georgia,serif;
  }
  h1{
    font-size:180%;
    color:#363;
  }
  h2{
    font-size:150%;
    color:#393;
  }
  h3{
    font-size:140%;
    color:#696;
  }
  p,li{font-size:130%;}
  ul{margin:0 0 0 1.5em;}
  li{padding:.2em 0;}
  li strong{
    width:8em;
    float:left;
    display:block;
  }
  a{color:#363;}
  #ft p{
    font-size:80%;
    text-align:right;
  }
  #map{
    height:300px;
    width:300px;
    position:relative;
  }
  #map span{
    height:280px;
    width:280px;
    background:rgba(0,0,0,.5);
    color:#fff;
    display:block;
    position:absolute;
    top:0;
    left:0;
    font-size:200%;
    padding:10px;
    overflow:hidden;
  }
  #map span strong{display:block;color:#0f0;}
  </style>
</head>
<body>
<div id="doc" class="yui-t7">

  <div id="hd" role="banner"><h1>Getting location from IP</h1></div>
  <div id="bd" role="main">
    <h2>Map and info</h2>
       <div class="yui-g">
         <div class="yui-u first"><div id="map"></div>
      </div>
      <div class="yui-u" id="info"></div>
    </div>

    <h2>Thanks</h2>
    <p>Thanks to <a href="http://www.maxmind.com">Maxmind</a> for the Geo IP database.</p>
  </div>
  <div id="ft" role="contentinfo"><p>Written by <a href="http://wait-till-i.com">Chris Heilmann</a></p></div>
</div>
<script type="text/javascript" src="http://j.maxmind.com/app/geoip.js"></script>

<script>
(function(){

  var info = document.getElementById('info');
  var lat = geoip_latitude();
  var lon = geoip_longitude();
  var city = geoip_city();
  var out = '<h3>Information from your IP</h3>'+ 
            '<ul>'+
            '<li>Latitude: ' + lat + '</li>'+
            '<li>Longitude: ' + lon + '</li>'+
            '<li>City: ' + city + '</li>'+
            '<li>Region: ' + geoip_region() + '</li>'+
            '<li>Region Name: ' + geoip_region_name() + '</li>'+
            '<li>Postal Code: ' + geoip_postal_code() + '</li>'+
            '<li>Country Code: ' + geoip_country_code() + '</li>'+
            '<li>Country Name: ' + geoip_country_name() + '</li>'+
            '</ul>';
  info.innerHTML = out;
  var url = 'http://maps.google.com/maps/api/staticmap?center='+
            lat+','+lon+'&sensor=false&size=300x300&maptype=roadmap&key='+
            'ABQIAAAAijZqBZcz-rowoXZC1tt9iRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxQQBCa'+
            'F1R_k1GBJV5uDLhAKaTePyQ&markers=color:blue|label:I|'+lat+
            ','+lon+'6&visible='+lat+','+lon+'|'+(+lat+1)+','+(+lon+1);
  var map = document.getElementById('map');
  map.innerHTML = '<img src="'+url+'" alt="'+city+'">';
  
})();
</script>
</body>
</html>

http://isithackday.com/hacks/geo/js-location.html

JavaScript_syntax

alert(a || b);    // When a is true, there is no reason to evaluate b.
alert(a && b);    // When a is false, there is no reason to evaluate b.
alert(c ? t : f); // When c is true, there is no reason to evaluate f.

alert(a || b); // if a is true, return a, otherwise return b
alert(a && b); // if a is false, return a, otherwise return b

var s = t || "(default)"; // assigns t, or the default value if t is null, empty, etc.  



str = "ab" + "cd";   // "abcd"
str += "e";          // "abcde"
 
str2 = "2"+2         // "22", not "4" or 4.


// SWICH: 

switch (expr) {
   case SOMEVALUE:
     //statements;
     break;
   case ANOTHERVALUE:
     //statements;
     break;
   default:
     //statements;
     break;
 }  




var z;
var  x= z || 1;


switch (x) {  
   case 2:  
    alert("");
     break;  
   case 1:  
    alert(x);

   default:  
     //statements;  
     break;  
 } 



//IN:

 

for (var property_name in some_object) {
   //statements using some_object[property_name];
 } 

var person={fname:"John",lname:"Doe",age:25};

for (x in person)
{
alert(person[x] + " ");
}


//Object literals and array literals allow one to easily create flexible data structures:

var myStructure = {
  name: {
    first: "Mel",
    last: "Smith"
  },
  age: 33,
  hobbies: ["chess", "jogging"]
}; 

 --------------------



var myStructure = {  
  name: {  
    first: "Mel",  
    last: "Smith"  
  },  
  age: 33,  
  hobbies: ["chess", "jogging"]  
};   


for (x in myStructure)
{
alert(myStructure[x] + " ");
}

//Object
//33
//chess,jogging




alert(myStructure.name.first);

//Mel



alert(myStructure.hobbies[0]);
//chess

Javascript Object Literals


// Object Literals

timObject = {
 property1 : "Hello",
 property2 : "MmmMMm",
 property3 : ["mmm", 2, 3, 6, "kkk"],
 method1 : function(){alert("Method had been called" + this.property1)}
};

timObject.method1();
alert(timObject.property3[2]) // will yield 3

OR------------------------
 
 
 
 
 
person = new Object()
person.name = "Tim Scarfe"
person.height = "6Ft"

person.run = function() {
 this.state = "running"
 this.speed = "4ms^-1"
}
 
 
http://mckoss.com/jscript/object.htm

Protype js example

 

function A()

{

    this.x = 1;

}

A.prototype.DoIt = function()    // Define Method

{

    this.x += 1;

}

function B()

{

    this.x = 1;

}

B.prototype.DoIt = function()    // Define Method

{

    this.x += 2;

}

a = new A;

b = new B;

a.DoIt();

b.DoIt();

document.write(a.x + ', ' + b.x);

Plain Javascript

// Object Literals

timObject = {
 property1 : "Hello",
 property2 : "MmmMMm",
 property3 : ["mmm", 2, 3, 6, "kkk"],
 method1 : function(){alert("Method had been called" + this.property1)}
};

timObject.method1();
alert(timObject.property3[2]) // will yield 3

var circle = { x : 0, y : 0, radius: 2 } // another example

// nesting is no problem.
var rectangle = { 
 upperLeft : { x : 2, y : 2 },
 lowerRight : { x : 4, y : 4}
}

alert(rectangle.upperLeft.x) // will yield 2 

 //With comments

/* Finds the lowest common multiple of two numbers */
function LCMCalculator(x, y) { // constructor function
    var checkInt = function (x) { // inner function
        if (x % 1 !== 0) {
            throw new TypeError(x + " is not an integer"); // throw an exception
        }
        return x;
    };
    this.a = checkInt(x)
    // ^ semicolons are optional
    this.b = checkInt(y);
}
// The prototype of object instances created by a constructor is 
// that constructor's "prototype" property.
LCMCalculator.prototype = { // object literal
    constructor: LCMCalculator, // when reassigning a prototype, set the constructor property appropriately
    gcd: function () { // method that calculates the greatest common divisor
        // Euclidean algorithm:
        var a = Math.abs(this.a), b = Math.abs(this.b), t;
        if (a < b) {
            // swap variables
            t = b; b = a;  a = t; 
        }
        while (b !== 0) {
            t = b;
            b = a % b;
            a = t;
        }
        // Only need to calculate GCD once, so "redefine" this method.
        // (Actually not redefinition - it's defined on the instance itself,
        // so that this.gcd refers to this "redefinition" instead of LCMCalculator.prototype.gcd.)
        // Also, 'gcd' == "gcd", this['gcd'] == this.gcd
        this['gcd'] = function() { 
            return a; 
        };
        return a;
    },
    "lcm"/* can use strings here */: function() {
        // Variable names don't collide with object properties, e.g. |lcm| is not |this.lcm|.
        // not using |this.a * this.b| to avoid FP precision issues
        var lcm = this.a / this.gcd() * this.b; 
        // Only need to calculate lcm once, so "redefine" this method.
        this.lcm = function() { 
            return lcm; 
        };
        return lcm;
    },
    toString: function () {
        return "LCMCalculator: a = " + this.a + ", b = " + this.b;
    }
};
 
//define generic output function; this implementation only works for web browsers
function output(x) { document.write(x + "
"); }
 
// Note: Array's map() and forEach() are defined in JavaScript 1.6.
// They are used here to demonstrate JavaScript's inherent functional nature.
[[25, 55],[21, 56],[22, 58],[28, 56]].map(function(pair) { // array literal + mapping function
    return new LCMCalculator(pair[0], pair[1]);
}).sort(function(a, b) { // sort with this comparative function
    return a.lcm() - b.lcm();
}).forEach(function(obj) {
    output(obj + ", gcd = " + obj.gcd() + ", lcm = " + obj.lcm());
});

 

 
//--------------------------------------------


function A()
{
    this.x = 1;
}
 
A.prototype.DoIt = function()    // Define Method
{
    this.x += 1;
}
 
function B()
{
    this.x = 1;
}
 
B.prototype.DoIt = function()    // Define Method
{
    this.x += 2;
}
 
a = new A;
b = new B;
 
a.DoIt();
b.DoIt();
document.write(a.x + ', ' + b.x);

.blind

     
     
     

.blind handles event(s)

 

 

$('#foo').bind('mouseenter mouseleave', function() {
  $(this).toggleClass('entered');
});

$('#foo').bind('EVENT1 EVENT2', function() {
//what it will happens
}); 

 

OR

$('#foo').bind({
  click: function() {
    // do something on click
  },
  mouseenter: function() {
    // do something on mouseenter
  }
});

$('#foo').bind('click', function() {
  alert($(this).text());
}); 

 

 

passing data

var message = 'Spoon!';
$('#foo').bind('click', {msg: message}, function(event) {
  alert(event.data.msg);
});
message = 'Not in the face!';
$('#bar').bind('click', {msg: message}, function(event) {
  alert(event.data.msg);
}); 

 

 

 

function foo(e) {

 console.log(e.type);

};

$('li').bind({

  'click': foo,

  'mouseover': foo,

  'mouseout': foo

});

Load example with images

    
     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title>Getting pictures!</title>
<style>
* {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'helvetica neue', arial, helvetica;
}

a img {
  border: 0;
}

img {
/*  border: 5px solid #000;*/
/*  margin: 10px;*/
}

ul {
  width: 315px;
  height: 100%;
  overflow-y: auto;
  white-space: nowrap;
  list-style: none;
}

li {
  display: block;
  float: left;
  height: 75px;
  cursor: pointer;
}

#loadingStatus {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  padding: 5px 10px;
  background: #c00;
  color: #fff;
}

#main {
  position: fixed;
  left: 360px;
  top: 50px;
}

#main div {
  border: 10px solid #000;
  height: 400px;
  width: 400px;
  font-family: georgia;
  color: #fff;
  text-shadow: 1px 1px 0 #000;
  background: rgba(0,0,0,.3);
  font-size: 38px;
  text-align: center;
  line-height: 400px;
}

#main img {
  border: 10px solid #000;
  position: absolute;
  top: 0;
  left: 0;
  width: 400px;
}

#next { margin: 20px; }

/* via https://github.com/ubuwaits/css3-buttons */
button.cupid-blue {
  background: #d7e5f5;
  background: -moz-linear-gradient(top, #d7e5f5 0%, #cbe0f5 100%);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d7e5f5), to(#cbe0f5));
  border-top: 1px solid #abbbcc;
  border-left: 1px solid #a7b6c7;
  border-bottom: 1px solid #a1afbf;
  border-right: 1px solid #a7b6c7;
  -moz-border-radius: 12px;
  -webkit-border-radius: 12px;
  border-radius: 12px;
  -moz-box-shadow: inset 0 1px 0 0 #fff;
  -webkit-box-shadow: inset 0 1px 0 0 #fff;
  box-shadow: inset 0 1px 0 0 #fff;
  color: #1a3e66;
  font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
  font-size: 11px;
  font-weight: normal;
  line-height: 1;
  padding: 6px 0 7px 0;
  text-align: center;
  text-shadow: 0 1px 1px #fff;
  width: 150px;
}

button.cupid-blue:hover {
  background: #ccd9e8;
  background: -moz-linear-gradient(top, #ccd9e8 0%, #c1d4e8 100%);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ccd9e8), to(#c1d4e8));
  border-top: 1px solid #a1afbf;
  border-left: 1px solid #9caaba;
  border-bottom: 1px solid #96a3b3;
  border-right: 1px solid #9caaba;
  -moz-box-shadow: inset 0 1px 0 0 #f2f2f2;
  -webkit-box-shadow: inset 0 1px 0 0 #f2f2f2;
  box-shadow: inset 0 1px 0 0 #f2f2f2;
  color: #163659;
  cursor: pointer;
}

button.cupid-blue:active {
  border: 1px solid #8c98a7;
  -moz-box-shadow: inset 0 0 4px 2px #abbccf, 0 0 1px 0 #eee;
  -webkit-box-shadow: inset 0 0 4px 2px #abbccf, 0 0 1px 0 #eee;
  box-shadow: inset 0 0 4px 2px #abbccf, 0 0 1px 0 #eee;
}


</style>
</head>
<body>
<div id="loadingStatus">Loading</div>
<p><button id="next" class="cupid-blue">Next group</button></p>
<ul id="pictures">
  <li><img src="http://farm5.static.flickr.com/4132/5176187907_25d26f48f0_s.jpg"></li>
  <li><img src="http://farm5.static.flickr.com/4133/5176793736_d071069871_s.jpg"></li>

<li><img src="http://farm5.static.flickr.com/4148/5176790372_c5a6a3cc7a_s.jpg"></li>
  <li><img src="http://farm5.static.flickr.com/4103/5176188725_397e641c7f_s.jpg"></li>
  <li><img src="http://farm5.static.flickr.com/4110/5176791934_bb21e4b523_s.jpg"></li>
  <li><img src="http://farm5.static.flickr.com/4130/5176184917_92e4b89148_s.jpg"></li>
  <li><img src="http://farm5.static.flickr.com/4083/5176794362_c7543d2e29_s.jpg"></li>
  <li><img src="http://farm5.static.flickr.com/4128/5176189635_4030795e8d_s.jpg"></li>
  <li><img src="http://farm5.static.flickr.com/4129/5176789954_4f4e5edd2f_s.jpg"></li>
  <li><img src="http://farm5.static.flickr.com/4132/5176187515_27853af67d_s.jpg"></li>
  <li><img src="http://farm5.static.flickr.com/4128/5176792872_c146b28478_s.jpg"></li>

<li><img src="http://farm5.static.flickr.com/4107/5176790750_8c1471a753_s.jpg"></li>
  <li><img src="http://farm5.static.flickr.com/4110/5176789130_0d876b8489_s.jpg"></li>
  <li><img src="http://farm5.static.flickr.com/4132/5176788284_a98e4e92a0_s.jpg"></li>
  <li><img src="http://farm5.static.flickr.com/4147/5176789562_ed5e339f57_s.jpg"></li>
  <li><img src="http://farm5.static.flickr.com/4145/5176786398_d8fef3b0e1_s.jpg"></li>
  <li><img src="http://farm5.static.flickr.com/4147/5176181843_8c58178ea9_s.jpg"></li>
  <li><img src="http://farm5.static.flickr.com/4106/5176184049_bc11cbb7a9_s.jpg"></li>
  <li><img src="http://farm5.static.flickr.com/4126/5176767160_27d7c6346b_s.jpg"></li>
  <li><img src="http://farm5.static.flickr.com/4107/5176784060_3a55131a91_s.jpg"></li>

</ul>
<div id="main">
  <div>Click on a picture</div>
</div>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script>
var flickrURL = 'http://api.flickr.com/services/rest/?method=flickr.photos.search&page=%page%&per_page=20&api_key=18702ea1538bc199e2c7e1d57270cd37&user_id=38257258%40N00&tags=fullfrontalconf&format=json&jsoncallback=?';

var $pictures = $('#pictures'),
    $main = $('#main'),
    $next = $('#next'),
    html = [],
    page = 1;

// $pictures.find('img').click(function () {
$pictures.delegate('img', 'click', function () {
  $('#loadingStatus').fadeIn();
  var src = this.src.replace(/_s/, '');
  $('<img>').attr('src', src).load(function () {
    $main.empty().append(this);
    $('#loadingStatus').stop(true, true).fadeOut();
  });
});

function getPage(page) {
  $.getJSON(flickrURL.replace(/%page%/, page), function (data) {
    html = [];
    $.each(data.photos.photo, function (i, photo) {
      html.push('<li><img src="http://farm' + photo.farm + '.static.flickr.com/' + photo.server + '/' + photo.id + '_' + photo.secret + '_s.jpg" /></li>');
    });

    $pictures.empty().append(html.join(''));
    $('#loadingStatus').hide();  
  });
}

$next.click(function () {
  getPage(++page);
});

</script>
</body>
</html>

Load example

 

$(function () {
  

//Textfield's event

$('#name').keyup(function () {

 

//where to store      --Load from the server   --where to store again --params 

$('#results ul').load('load-example.php #results ul li', { name : this.value });
//Load load-example.php from the server and store it in #results ul with this params 

//{name:this.value} with is this inputs value  

 

 });
});

 

 

 

 

 

http://www.yensdesign.com/tutorials/contentajax/

parse and load html :)

</fieldset>
    </form>
    <div id="results">
        <h2>Results</h2>

<ul>
            <li>Nothing found for "tahoma"</li>
        </ul>
    </div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
   $('#name').keyup(function () {
       $('#results ul').load('load-example.php #results li', { name : this.value });
   });
});
</script>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>jQuery load example</title>
<style type="text/css" media="screen">
<!--
body { font: 1em "Trebuchet MS", verdana, arial, sans-serif; font-size: 100%; color: #000; padding: 20px;}
input, textarea { font-family: Arial; font-size: 100%; padding: 3px; margin-left: 10px; }
#wrapper { width: 600px; margin: 0 auto; }
</style>
</head>
<body>
<div id="wrapper">
    <h1>Font Finder</h1>
    <form action="load-example.php" method="post" accept-charset="utf-8">
        <fieldset>
            <legend>Find a font</legend>
            <label for="name">Name</label><input type="text" name="name" value="tahoma" id="name" />
            <input type="submit" value="Search &rarr;" />
        </fieldset>
    </form>
    <div id="results">
        <h2>Results</h2>
        <ul>
            <li>Nothing found for "tahoma"</li>
        </ul>
    </div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
   $('#name').keyup(function () {
       $('#results ul').load('load-example.php #results li', { name : this.value });
   });
});
</script>
</body>
</html>

jQuery Clone

jQuery After and before

<!DOCTYPE html>
<html>
<head>
<style>
p { background:yellow; }
</style>
<script src='http://code.jquery.com/jquery-latest.js'></script>
</head>
<body>
<p>I would like to say: </p>
<script>
$("p").after("<b>Hello</b>");
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
p { background:yellow; }
</style>
<script src='http://code.jquery.com/jquery-latest.js'></script>
</head>
<body>
<b>Hello</b><p>I would like to say: </p>
<script>
$("p").after( $("b") );
</script>
</body>
</html>

BEFORE

<!DOCTYPE html>
<html>
<head>
<style>
p { background:yellow; }
</style>
<script src='http://code.jquery.com/jquery-latest.js'></script>
</head>
<body>
<p> is what I said...</p>
<script>
$("p").before("<b>Hello</b>");
</script>
</body>
</html>

jQuery Serialize

[{name:"first",value:"Rick"},
{name:"last",value:"Astley"},
{name:"job",value:"Rock Star"}]

Note: Because some frameworks have limited ability to parse serialized arrays, we should exercise caution when passing an obj argument that contains objects or arrays nested within another array.
In jQuery 1.4 HTML5 input elements are serialized, as well.
We can display a query string representation of an object and a URI-decoded version of the same as follows:

var myObject = {
  a: {
    one: 1, 
    two: 2, 
    three: 3
  }, 
  b: [1,2,3]
};
var recursiveEncoded = $.param(myObject);
var recursiveDecoded = decodeURIComponent($.param(myObject));

alert(recursiveEncoded);
alert(recursiveDecoded);

The values of recursiveEncoded and recursiveDecoded are alerted as follows:
a%5Bone%5D=1&a%5Btwo%5D=2&a%5Bthree%5D=3&b%5B%5D=1&b%5B%5D=2&b%5B%5D=3
a[one]=1&a[two]=2&a[three]=3&b[]=1&b[]=2&b[]=3

Example : Serialize a key/value object.

<!DOCTYPE html>
<html>
<head>
<style>
div { color:red; }
</style>
<script src='http://code.jquery.com/jquery-latest.js'></script>
</head>
<body>
<div id="results"></div>
<script>
var params = { width:1680, height:1050 };
    var str = jQuery.param(params);
    $("#results").text(str);
</script>
</body>
</html>

=========================================================================

<!DOCTYPE html>
<html>
<head>
<style>
body, select { font-size:12px; }
  form { margin:5px; }
  p { color:red; margin:5px; font-size:14px; }
  b { color:blue; }
</style>
<script src='http://code.jquery.com/jquery-latest.js'></script>
</head>
<body>
<form>
    <select name="single">
      <option>Single</option>
      <option>Single2</option>
    </select>

<br />
    <select name="multiple" multiple="multiple">
      <option selected="selected">Multiple</option>
      <option>Multiple2</option>

      <option selected="selected">Multiple3</option>
    </select>
<br/>
    <input type="checkbox" name="check" value="check1" id="ch1"/>

    <label for="ch1">check1</label>

    <input type="checkbox" name="check" value="check2" checked="checked" id="ch2"/>

    <label for="ch2">check2</label>
<br />
    <input type="radio" name="radio" value="radio1" checked="checked" id="r1"/>

    <label for="r1">radio1</label>
    <input type="radio" name="radio" value="radio2" id="r2"/>

    <label for="r2">radio2</label>
  </form>
  <p><tt id="results"></tt></p>
<script>
function showValues() {
      var str = $("form").serialize();
      $("#results").text(str);
    }
    $(":checkbox, :radio").click(showValues);
    $("select").change(showValues);
    showValues();
</script>
</body>
</html>

Wednesday, 16 November 2011

TextMate Bundle for Ruby on Rails Development

mkdir -p ~/Library/Application\ Support/TextMate/Bundles
cd ~/Library/Application\ Support/TextMate/Bundles
git clone git://github.com/drnic/ruby-on-rails-tmbundle.git "Ruby on Rails.tmbundle"
osascript -e 'tell app "TextMate" to reload bundles'

Last login: Wed Nov 16 22:18:21 on console
You have new mail.
ioannis-kolovos:~ ioannis$ mkdir -p ~/Library/Application\ Support/TextMate/Bundles
ioannis-kolovos:~ ioannis$ cd ~/Library/Application\ Support/TextMate/Bundles
ioannis-kolovos:Bundles ioannis$ pwd
/Users/ioannis/Library/Application Support/TextMate/Bundles
ioannis-kolovos:Bundles ioannis$ git clone git://github.com/drnic/ruby-on-rails-tmbundle.git "Ruby on Rails.tmbundle"
Cloning into Ruby on Rails.tmbundle...
remote: Counting objects: 1961, done.
remote: Compressing objects: 100% (664/664), done.
remote: Total 1961 (delta 1426), reused 1748 (delta 1250)
Receiving objects: 100% (1961/1961), 1.21 MiB | 395 KiB/s, done.
Resolving deltas: 100% (1426/1426), done.
ioannis-kolovos:Bundles ioannis$ osascript -e 'tell app "TextMate" to reload bundles'
ioannis-kolovos:Bundles ioannis$

UPDATE

Get with GitHub for Mac
Clone it to your ~/Library/Application Support/TextMate/Pristine Copy/Bundles
In TextMate choose the menu item… Bundles / Bundle Editor / Reload Bundles
If node is not installed in your PATH, go to TextMate → Preferences → Advanced → Shell Variables and add /usr/local/bin, basically the path to where node lives on your machine (which node).

UPDATE

defaults write com.macromates.textmate OakShellVariables -array-add "{ enabled = 1; variable = PATH; value = '$PATH'; }" && open "/Applications/TextMate.app"
ioannis-kolovos:~ ioannis$ defaults write com.macromates.textmate OakShellVariables -array-add "{ enabled = 1; variable = PATH; value = '$PATH'; }" && open "/Applications/TextMate.app"
ioannis-kolovos:~ ioannis$ echo $PATH
/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin:/usr/X11/bin:/usr/local/git/bin/
ioannis-kolovos:~ ioannis$

Tuesday, 15 November 2011

Management

http://adam.heroku.com/past/2011/4/28/scaling_a_development_team/

Big pipe

http://www.juhonkoti.net/bigpipe/example.php

https://github.com/msroot/bigpipe

Tuesday, 8 November 2011

window host