Greasemonkey UserScript

// ==UserScript==
// @name           test
// @namespace      test
// @include        http://www.facebook.com/johnny.k.sunny
// @exclude        
// ==/UserScript==



document.getElementById('headerArea').innerHTML = 'Life is out!';

Big Pipe

test.js


test2.js




prototypepatch.js


bigpipe.js



html



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

nice name for event

$tartup

design

http://www.premiumpixels.com

http://formalize.me/

http://formalize.me/

gallery

http://www.webdesignerwall.com/demo/decorative-gallery/decorative-gallery-index.html?TB_iframe=true&height=550&width=840

http://grids.heroku.com/

http://grids.heroku.com/

nodejs.org

backbone

documentcloud.github.com/backbone/#Introduction

presentation

http://imakewebthings.github.com/deck.js/

js

var classicModulePattern = function(){
var privateVar = 1;
function privateFunction(){
alert('private');
}
return {
publicVar:2,
publicFunction:function(){
classicModulePattern.anotherPublicFunction();
},
anotherPublicFunction:function(){
privateFunction();
}
}
}();
classicModulePattern.publicFunction();

http://christianheilmann.com/2008/02/07/five-things-to-do-to-a-script-before-handing-it-over-to-the-next-developer/ 

font: 12px/18px "Monaco","Courier New","Courier",monospace; }

code {

    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);

    border-radius: 3px 3px 3px 3px;

    color: #FFFFFF;

    padding: 2px 3px;

    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);

}

drop-in-modals #3 (line 181)

code, pre {

    color: #E33100;

    font: 12px/18px "Monaco","Courier New","Courier",monospace;

}

deep linking

http://www.thetutorialblog.com/demos/jQueryDeepLinking/#/test2

animate css

http://daneden.me/animate/slider/

css3 rebbons

 h1{
        text-align: center;
        position: relative;
        color: #fff;
        margin: 0 -30px 30px -30px;
        padding: 10px 0;
        text-shadow: 0 1px rgba(0,0,0,.8);
        background: #5c5c5c;
        background-image: -moz-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
        background-image: -webkit-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
        background-image: -o-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
        background-image: -ms-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
        background-image:  linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
        -moz-box-shadow: 0 2px 0 rgba(0,0,0,.3);
        -webkit-box-shadow: 0 2px 0 rgba(0,0,0,.3);
        box-shadow: 0 2px 0 rgba(0,0,0,.3);
    }

    h1:before, h1:after
    {
        content: '';
        position: absolute;
        border-style: solid;
        border-color: transparent;
        bottom: -10px;
    }

    h1:before
    {
        border-width: 0 10px 10px 0;
        border-right-color: #222;
        left: 0;
    }

    h1:after
    {
        border-width: 0 0 10px 10px;
        border-left-color: #222;
        right: 0;
    }

php debuging

echo "<pre>";
var_dump(get_defined_vars());
exit;

grid system layout / template

http://960.gs/


http://grids.heroku.com/

css3 buttons

http://hellohappy.org/css3-buttons/CSS - http://hellohappy.org/css3-buttons/

Collapse All
Expand All

http://hellohappy.org/css3-buttons/
http://hellohappy.org/css3-buttons/css/buttons.css
http://www.webdesignerwall.com/demo/css-buttons.html


http://tutorialzine.com/

jquery slider

http://jqueryfordesigners.com/demo/simple-spy.html


http://janne.aukia.com/zoomooz/

url clean

def clean(string)
  string = string.strip
  string = string.tr(' ', '_')
  string = string.tr("'", "")
  string = string.tr("$", "")
  string = string.tr("&", "")
  string = string.tr("<", "")
  string = string.tr(">", "")
  string = string.tr("*", "")
  string = string.tr("@", "")
  string = string.tr(".", "")
  string = string.tr(":", "")
  string = string.tr("|", "")
  string = string.tr("~", "")
  string = string.tr("`", "")
  string = string.tr("(", "")
  string = string.tr(")", "")
  string = string.tr("%", "")
  string = string.tr("#", "")
  string = string.tr("^", "")
  string = string.tr("?", "")
  string = string.tr("/", "")
  string = string.tr("{", "")
  string = string.tr("}", "")
  string = string.tr(",", "")
  string = string.tr(";", "")
  string = string.tr("!", "")
  string = string.tr("+", "")
  string = string.tr("=", "")
  string = string.tr("-", "_")
end

ruby arrays

ruby arraysArrays are ordered, integer-indexed collections of any object. Array indexing starts at 0, as in C# or Java. A negative index is assumed to be relative to the end of the array-that is, an index of -1 indicates the last element of the array, -2 is the next to last element in the array, and so on.

Creating a new array

array = Array.new
# or
array = []

Adding array elements By position

array = []
array[0] = "first element"

To the end

array << "last element"
# This adds "last element" to the end of the array
# or
array.push("last element")
# This adds "last element" to the end of the array

To the beginning

array = ["first element", "second element"]
array.unshift("before first element")
# This adds "before first element" to the beginning of the array

Retrieving array elements

By position

array = ["first element", "second element", "third element"]
third_element = array[2]
# This returns the third element.

By positions

second_and_third_element = array[1, 2]
# This returns a new array that contains the second & third elements

Removing array elements

From the beginning

array = ["first element", "second element"]
first_element = array.shift
# This removes "first element" from the beginning of the array

From the end

last_element = array.pop
# This removes "second element" or the last element from the end of the array

Combining arrays

To a new array

array = [1, 2, 3]
array.concat([4, 5, 6, 7])
[1, 2, 3, 4, 5, 6, 7]
#or
new_array = array + [4, 5, 6]
# Using the "+" method returns a new array, but does not modify the original array

Modifying the array

array.replace([4, 5, 6])
[4, 5, 6]

Pairing items

array = [1, 2, 3]
new_paired_array = array.zip([4, 5, 6])
[[1,4],[2, 5],[3, 6]]
# This creates an array of arrays

Flattening array of arrays

array = [1, 2, 3]
new_paired_array_flattened = array.zip([4, 5, 6]).flatten
[1, 4, 2, 5, 3, 6]

This flattens the arrays of arrays into one Array.

Collecting array elements

array = [1, 2, 3]
array.collect {|x| x * 2 }
[2, 4, 6]

Invokes block once for each element of self. Creates a new array containing the values returned by the block.

Iterating over arrays

[1, 2, 3, 4] .each {|x| puts x}
1
2
3
4

Filtering arrays

[1, 2, 3, 4, 5, 6] .find {|x| puts x > 5}

This returns the first element that matches the block criteria.

Querying arrays

array.find_all {|item| criteria }

This returns a new array containing all the elements of the array that match the block criteria.

array.size

This returns the number of elements in the array.

array.empty?

This returns true if the array is empty; false otherwise.

array.include?(item)

This returns true if the array contains the item; false otherwise.

array.any? {|item| criteria }

This returns true if any item in the array matches the block criteria; false otherwise.

array.all? {|item| criteria }

This returns true if all items in the array match the block criteria; false otherwise
Hopefully if you are new to the Ruby or you have been doing some Rails work but have not really dug into Ruby, this very basic overview will spark deeper interest into the powerful (and very fun) world of Ruby.
http://carlosgabaldon.com/ruby/ruby-arrays/

books

• Software Architecture: Foundations, Theory, and Practice
• Pragmatic Thinking and Learning: Refactor Your Wetware (Pragmatic Programmers)
• The Passionate Programmer: Creating a Remarkable Career in Software Development
• Mastering the Requirements Process
• Absolute FreeBSD: The Complete Guide to FreeBSD
• Apache Cookbook: Solutions and Examples for Apache Administrators
• From Geek To Peak: Your First 365 Days As A Technical Consultant — wish I had this book when I started consulting
• The Back of the Napkin: Solving Problems and Selling Ideas with Pictures — great book for selling your idea to your client
• JavaScript: The Good Parts
• TextMate: Power Editing for the Mac
• The Ruby Programming Language
• Programming Erlang: Software for a Concurrent World
• Practices of an Agile Developer: Working in the Real World
• The Well-Grounded Rubyist

osx tools

http://carlosgabaldon.com/2010/05/30/rubyist-os-x-dev-setup/

Rails Common Commands

rvm ruby-1.9.2-p0 - ruby version manager; switches to Ruby 1.9.2
rvm --default ruby-1.9.2-p0 - ruby version manager; sets 1.9.2 as default
rvm system - ruby version manager; switches to Ruby 1.87
rails new - creates a new Rails application
rails server [s] - launches WEBrick web server
rails generate [g] - lists available generators
rails generate controller --help - provides usage documentation
rails generate model --help - provides usage documentation
rails generate migration --help - provides usage documentation
rails destroy controller [Name] - undo generate controller
rails destroy model [Name] - undo generate model
rails generate scaffold [Name] --skip --no-migration - scaffold skipping existing files
rake db:migrate - runs database migrations
rake db:test:clone - clones current environment's database schema
rake db:test:purge - empties the test database
rake routes - list of all of the available routes
rake -T - list of rake commands
git init - creates git repo
git add . - adds all files to working tree
git commit -m "Initial commit" - commits files to repo
git status - status of the working tree
git push origin master - merges local repo with remote
git checkout -b new-dev - creates topic branch
git checkout master - switches to master branch
git merge new-dev - merges new-dev branch into master branch
git checkout -f - undo uncommitted changes on working tree
git branch - list branches
git branch -d modify-README - deletes branch
git mv README README.markdown - renames files using move command
heroku create - creates app on Heroku servers
git push heroku master - pushs app on to Heroku servers
heroku rake db:migrate - runs database migrations on Heroku servers
heroku pg:reset --db SHARED_DATABASE_URL - deletes database file
heroku db:push - transfer an existing database to Heroku.
rails console - command line interface to Rails app
rails dbconsole - command line database interface
bundle install - installs gems from Gemfile

a nice sinatra tutorial

http://carlosgabaldon.com/ruby/singing-with-sinatra/

Compass CSS Authoring Framework.

http://compass-style.org/install/

Sintra quick realod on request

require 'rubygems'
require 'sinatra'

configure :development do
Sinatra::Application.reset!
use Rack::Reloader
end

Mouseover DOM Inspector,

Bookmark DOM Inspector



http://slayeroffice.com/tools/modi/v2.0/modi_help.html

JavaScript Reference

JavaScript Reference


https://developer.mozilla.org/en/JavaScript/Reference

.oh-my-zsh

https://github.com/brucespang/dotfiles

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/

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

demos

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


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

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);

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"

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/

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

    
1
    
2
    
3
    
4
    
5

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

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>

 

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

1. Get with GitHub for Mac

2. Clone it to your ~/Library/Application Support/TextMate/Pristine Copy/Bundles
3. In TextMate choose the menu item… Bundles / Bundle Editor / Reload Bundles
4. 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$

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

window host

var script = document.createElement('script');
script.setAttribute('type', 'text/javascript');script.setAttribute('src','http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js');
document.getElementsByTagName('head')[0].appendChild(script);




$(function() {


    var host =$(location).attr('host');

    var json = {
        "bwired": {
            "sites": [{
                "domain": "http://jsfiddle.net",
                "server": "blah"},

                {
                    "domain": "http://johnkolovos.blogspot.com",
                    "server": "sleeps.on.my.server",
                    }]
                }
            };





            $.each(json.bwired.sites, function(i, v) {
                if (v.domain == "http://"+host) {
                    alert(host + " lives on: "+ v.server);
                    return;
                }

            });
        });

Vic's mate paste

open a new file in TextMate and write this 3 lines:

tomato
basil
garlic


now do:

 select: tomato and press: command + c
 select: basil and press: command + c
 select: garlic and press: command + c

one command + c for each line ok?

now do:

 command + v
 command + shift + v
 command + shift + v

:)

ah ?

if google, apple, twitter and facebook joined forces and went non profit

Could you imagine?
That would save the world.

Goal Settings

Here are the twelve steps in goal setting.
The first step is desire
The second step is belief
The third step is to write the complete goal in detail
The fourth step is to determine how you will benefit from accomplishing your goal
The fifth step is to analyze your current status
The sixth step is to set a deadline
The seventh step is to identify the obstacles you will have to overcome to achieve your goal
The eight step is to clearly identify the knowledge you will require in order to accomplish your goal
The ninth step is to identify the people, groups and organizations whose cooperation and assistance you will need to attain your goal
The tenth step is to take all the details you have identified in the last three steps and make a plan
The eleventh step is to get a clear mental image of your goal as already attained
The twelfth step is to back your plan with determination, persistence and resolve to never give up

5 Black and White Photography Tips

http://best-photoshop-tutorials.blogspot.com/2008/12/create-professional-black-and-white.html

http://www.digital-photography-school.com/5-black-and-white-photography-tips

Mr. Data Converter

http://www.shancarter.com/data_converter/index.html

Bash Array

An array is a variable containing multiple values may be of same type or of different type.  There is no maximum limit to the size of an array, nor any requirement that member variables be indexed or assigned contiguously. Array index starts with zero.
In this article, let us review 15 various array operations in bash.

This article is part of the on-going Bash Tutorial series. For those who are new to bash scripting, get a jump-start from the Bash Scripting Introduction tutorial.

1. Declaring an Array and Assigning values

In bash, array is created automatically when a variable is used in the format like,

name[index]=value

• name is any name for an array
• index could be any number or expression that must evaluate to a number greater than or equal to zero.You can declare an explicit array using declare -a arrayname.

$ cat arraymanip.sh
#! /bin/bash
Unix[0]='Debian'
Unix[1]='Red hat'
Unix[2]='Ubuntu'
Unix[3]='Suse'

echo ${Unix[1]}

$./arraymanip.sh
Red hat

To access an element from an array use curly brackets like ${name[index]}.

2. Initializing an array during declaration

Instead of initializing an each element of an array separately, you can declare and initialize an array by specifying the list of elements (separated by white space) with in a curly braces.

Syntax:
declare -a arrayname=(element1 element2 element3)

If the elements has the white space character, enclose it with in a quotes.

#! /bin/bash
$cat arraymanip.sh
declare -a Unix=('Debian' 'Red hat' 'Red hat' 'Suse' 'Fedora');

declare -a declares an array and all the elements in the parentheses are the elements of an a


3. Print the Whole Bash Array
There are different ways to print the whole elements of the array. If the index number is @ or *, all members of an array are referenced. You can traverse through the array elements and print it, using looping statements in bash.

echo ${Unix[@]}

# Add the above echo statement into the arraymanip.sh
#./t.sh
Debian Red hat Ubuntu Suse

Referring to the content of a member variable of an array without providing an index number is the same as referring to the content of the first element, the one referenced with index number zero.

4. Length of the Bash Array

We can get the length of an array using the special parameter called $#.
${#arrayname[@]} gives you the length of the array.

$ cat arraymanip.sh
declare -a Unix=('Debian' 'Red hat' 'Suse' 'Fedora');
echo ${#Unix[@]} #Number of elements in the array
echo ${#Unix}  #Number of characters in the first element of the array.i.e Debian
$./arraymanip.sh
4
6

5. Length of the nth Element in an Array

${#arrayname[n]} should give the length of the nth element in an array.

$cat arraymanip.sh
#! /bin/bash

Unix[0]='Debian'
Unix[1]='Red hat'
Unix[2]='Ubuntu'
Unix[3]='Suse'

echo ${#Unix[3]} # length of the element located at index 3 i.e Suse

$./arraymanip.sh
4

6. Extraction by offset and length for an array

The following example shows the way to extract 2 elements starting from the position 3 from an array called Unix.

$cat arraymanip.sh
Unix=('Debian' 'Red hat' 'Ubuntu' 'Suse' 'Fedora' 'UTS' 'OpenLinux');
echo ${Unix[@]:3:2}

$./arraymanip.sh
Suse Fedora

The above example returns the elements in the 3rd index and fourth index. Index always starts with zero.

7. Extraction with offset and length, for a particular element of an array

To extract only first four elements from an array element . For example, Ubuntu which is located at the second index of an array, you can use offset and length for a particular element of an array.

$cat arraymanip.sh
#! /bin/bash

Unix=('Debian' 'Red hat' 'Ubuntu' 'Suse' 'Fedora' 'UTS' 'OpenLinux');
echo ${Unix[2]:0:4}

./arraymanip.sh
Ubun

The above example extracts the first four characters from the 2nd indexed element of an array.

8. Search and Replace in an array elements

The following example, searches for Ubuntu in an array elements, and replace the same with the word ‘SCO Unix’.

$cat arraymanip.sh
#!/bin/bash
Unix=('Debian' 'Red hat' 'Ubuntu' 'Suse' 'Fedora' 'UTS' 'OpenLinux');

echo ${Unix[@]/Ubuntu/SCO Unix}

$./arraymanip.sh
Debian Red hat SCO Unix Suse Fedora UTS OpenLinux

In this example, it replaces the element in the 2nd index ‘Ubuntu’ with ‘SCO Unix’. But this example will not permanently replace the array content.

9. Add an element to an existing Bash Array

The following example shows the way to add an element to the existing array.

$cat arraymanip.sh
Unix=('Debian' 'Red hat' 'Ubuntu' 'Suse' 'Fedora' 'UTS' 'OpenLinux');
Unix=("${Unix[@]}" "AIX" "HP-UX")
echo ${Unix[7]}

$./arraymanip.sh
AIX

In the array called Unix, the elements ‘AIX’ and ‘HP-UX’ are added in 7th and 8th index respectively.

10. Remove an Element from an Array

unset is used to remove an element from an array.unset will have the same effect as assigning null to an element.

$cat arraymanip.sh
#!/bin/bash
Unix=('Debian' 'Red hat' 'Ubuntu' 'Suse' 'Fedora' 'UTS' 'OpenLinux');

unset Unix[3]
echo ${Unix[3]}

The above script will just print null which is the value available in the 3rd index. The following example shows one of the way to remove an element completely from an array.

$ cat arraymanip.sh
Unix=('Debian' 'Red hat' 'Ubuntu' 'Suse' 'Fedora' 'UTS' 'OpenLinux');
pos=3
Unix=(${Unix[@]:0:$pos} ${Unix[@]:$(($pos + 1))})
echo ${Unix[@]}

$./arraymanip.sh
Debian Red hat Ubuntu Fedora UTS OpenLinux

In this example, ${Unix[@]:0:$pos} will give you 3 elements starting from 0th index i.e 0,1,2 and ${Unix[@]:4} will give the elements from 4th index to the last index. And merge both the above output. This is one of the workaround to remove an element from an array.

11. Remove Bash Array Elements using Patterns

In the search condition you can give the patterns, and stores the remaining element to an another array as shown below.

$ cat arraymanip.sh
#!/bin/bash
declare -a Unix=('Debian' 'Red hat' 'Ubuntu' 'Suse' 'Fedora');
declare -a patter=( ${Unix[@]/Red*/} )
echo ${patter[@]}

$ ./arraymanip.sh
Debian Ubuntu Suse Fedora

The above example removes the elements which has the patter Red*.

12. Copying an Array

Expand the array elements and store that into a new array as shown below.

#!/bin/bash
Unix=('Debian' 'Red hat' 'Ubuntu' 'Suse' 'Fedora' 'UTS' 'OpenLinux');
Linux=("${Unix[@]}")
echo ${Linux[@]}

$ ./arraymanip.sh
Debian Red hat Ubuntu Fedora UTS OpenLinux

13. Concatenation of two Bash Arrays

Expand the elements of the two arrays and assign it to the new array.

$cat arraymanip.sh
#!/bin/bash
Unix=('Debian' 'Red hat' 'Ubuntu' 'Suse' 'Fedora' 'UTS' 'OpenLinux');
Shell=('bash' 'csh' 'jsh' 'rsh' 'ksh' 'rc' 'tcsh');

UnixShell=("${Unix[@]}" "${Shell[@]}")
echo ${UnixShell[@]}
echo ${#UnixShell[@]}

$ ./arraymanip.sh
Debian Red hat Ubuntu Suse Fedora UTS OpenLinux bash csh jsh rsh ksh rc tcsh
14

It prints the array which has the elements of the both the array ‘Unix’ and ‘Shell’, and number of elements of the new array is 14.

14. Deleting an Entire Array

unset is used to delete an entire array.

$cat arraymanip.sh
#!/bin/bash
Unix=('Debian' 'Red hat' 'Ubuntu' 'Suse' 'Fedora' 'UTS' 'OpenLinux');
Shell=('bash' 'csh' 'jsh' 'rsh' 'ksh' 'rc' 'tcsh');

UnixShell=("${Unix[@]}" "${Shell[@]}")
unset UnixShell
echo ${#UnixShell[@]}

$ ./arraymanip.sh
0

After unset an array, its length would be zero as shown above.

15. Load Content of a File into an Array

You can load the content of the file line by line into an array.

#Example file
$ cat logfile
Welcome
to
thegeekstuff
Linux
Unix

$ cat loadcontent.sh
#!/bin/bash
filecontent=( `cat "logfile" `)

for t in "${filecontent[@]}"
do
echo $t
done
echo "Read file content!"

$ ./loadcontent.sh
Welcome
to
thegeekstuff
Linux
Unix
Read file content!

In the above example, each index of an array element has printed through for loop.





http://www.thegeekstuff.com/2010/06/bash-array-tutorial/

wget

1. Download Single File with wget

The following example downloads a single file from internet and stores in the current directory.

$ wget http://www.openss7.org/repos/tarballs/strx25-0.9.2.1.tar.bz2

While downloading it will show a progress bar with the following information:

• %age of download completion (for e.g. 31% as shown below)
• Total amount of bytes downloaded so far (for e.g. 1,213,592 bytes as shown below)
• Current download speed (for e.g. 68.2K/s as shown below)
• Remaining time to download (for e.g. eta 34 seconds as shown below)

Download in progress:

$ wget http://www.openss7.org/repos/tarballs/strx25-0.9.2.1.tar.bz2
Saving to: `strx25-0.9.2.1.tar.bz2.1'

31% [=================> 1,213,592   68.2K/s  eta 34s

Download completed:

$ wget http://www.openss7.org/repos/tarballs/strx25-0.9.2.1.tar.bz2
Saving to: `strx25-0.9.2.1.tar.bz2'

100%[======================>] 3,852,374   76.8K/s   in 55s    

2009-09-25 11:15:30 (68.7 KB/s) - `strx25-0.9.2.1.tar.bz2' saved [3852374/3852374]

2. Download and Store With a Different File name Using wget -O

By default wget will pick the filename from the last word after last forward slash, which may not be appropriate always.
Wrong: Following example will download and store the file with name: download_script.php?src_id=7701

$ wget http://www.vim.org/scripts/download_script.php?src_id=7701

Even though the downloaded file is in zip format, it will get stored in the file as shown below.

$ ls
download_script.php?src_id=7701

Correct: To correct this issue, we can specify the output file name using the -O option as:

$ wget -O taglist.zip http://www.vim.org/scripts/download_script.php?src_id=7701

3. Specify Download Speed / Download Rate Using wget –limit-rate

While executing the wget, by default it will try to occupy full possible bandwidth. This might not be acceptable when you are downloading huge files on production servers. So, to avoid that we can limit the download speed using the –limit-rate as shown below.
In the following example, the download speed is limited to 200k

$ wget --limit-rate=200k http://www.openss7.org/repos/tarballs/strx25-0.9.2.1.tar.bz2

4. Continue the Incomplete Download Using wget -c

Restart a download which got stopped in the middle using wget -c option as shown below.

$ wget -c http://www.openss7.org/repos/tarballs/strx25-0.9.2.1.tar.bz2

This is very helpful when you have initiated a very big file download which got interrupted in the middle. Instead of starting the whole download again, you can start the download from where it got interrupted using option -c
Note: If a download is stopped in middle, when you restart the download again without the option -c, wget will append .1 to the filename automatically as a file with the previous name already exist. If a file with .1 already exist, it will download the file with .2 at the end.

5. Download in the Background Using wget -b

For a huge download, put the download in background using wget option -b as shown below.

$ wget -b http://www.openss7.org/repos/tarballs/strx25-0.9.2.1.tar.bz2
Continuing in background, pid 1984.
Output will be written to `wget-log'.

It will initiate the download and gives back the shell prompt to you. You can always check the status of the download using tail -f as shown below.

$ tail -f wget-log
Saving to: `strx25-0.9.2.1.tar.bz2.4'

     0K .......... .......... .......... .......... ..........  1% 65.5K 57s
    50K .......... .......... .......... .......... ..........  2% 85.9K 49s
   100K .......... .......... .......... .......... ..........  3% 83.3K 47s
   150K .......... .......... .......... .......... ..........  5% 86.6K 45s
   200K .......... .......... .......... .......... ..........  6% 33.9K 56s
   250K .......... .......... .......... .......... ..........  7%  182M 46s
   300K .......... .......... .......... .......... ..........  9% 57.9K 47s

Also, make sure to review our previous multitail article on how to use tail command effectively to view multiple files.

6. Mask User Agent and Display wget like Browser Using wget –user-agent

Some websites can disallow you to download its page by identifying that the user agent is not a browser. So you can mask the user agent by using –user-agent options and show wget like a browser as shown below.

$ wget --user-agent="Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.3) Gecko/2008092416 Firefox/3.0.3" URL-TO-DOWNLOAD

7. Test Download URL Using wget –spider

When you are going to do scheduled download, you should check whether download will happen fine or not at scheduled time. To do so, copy the line exactly from the schedule, and then add –spider option to check.

$ wget --spider DOWNLOAD-URL

If the URL given is correct, it will say

$ wget --spider download-url
Spider mode enabled. Check if remote file exists.
HTTP request sent, awaiting response... 200 OK
Length: unspecified [text/html]
Remote file exists and could contain further links,
but recursion is disabled -- not retrieving.

This ensures that the downloading will get success at the scheduled time. But when you had give a wrong URL, you will get the following error.

$ wget --spider download-url
Spider mode enabled. Check if remote file exists.
HTTP request sent, awaiting response... 404 Not Found
Remote file does not exist -- broken link!!!

You can use the spider option under following scenarios:

• Check before scheduling a download.
• Monitoring whether a website is available or not at certain intervals.
• Check a list of pages from your bookmark, and find out which pages are still exists.

8. Increase Total Number of Retry Attempts Using wget –tries

If the internet connection has problem, and if the download file is large there is a chance of failures in the download. By default wget retries 20 times to make the download successful.
If needed, you can increase retry attempts using –tries option as shown below.

$ wget --tries=75 DOWNLOAD-URL

9. Download Multiple Files / URLs Using Wget -i

First, store all the download files or URLs in a text file as:

$ cat > download-file-list.txt
URL1
URL2
URL3
URL4

Next, give the download-file-list.txt as argument to wget using -i option as shown below.

$ wget -i download-file-list.txt

10. Download a Full Website Using wget –mirror

Following is the command line which you want to execute when you want to download a full website and made available for local viewing.

$ wget --mirror -p --convert-links -P ./LOCAL-DIR WEBSITE-URL

• –mirror : turn on options suitable for mirroring.
• -p : download all files that are necessary to properly display a given HTML page.
• –convert-links : after the download, convert the links in document for local viewing.
• -P ./LOCAL-DIR : save all the files and directories to the specified directory.

11. Reject Certain File Types while Downloading Using wget –reject

You have found a website which is useful, but don’t want to download the images you can specify the following.

$ wget --reject=gif WEBSITE-TO-BE-DOWNLOADED

12. Log messages to a log file instead of stderr Using wget -o

When you wanted the log to be redirected to a log file instead of the terminal.

$ wget -o download.log DOWNLOAD-URL

13. Quit Downloading When it Exceeds Certain Size Using wget -Q

When you want to stop download when it crosses 5 MB you can use the following wget command line.

$ wget -Q5m -i FILE-WHICH-HAS-URLS

Note: This quota will not get effect when you do a download a single URL. That is irrespective of the quota size everything will get downloaded when you specify a single file. This quota is applicable only for recursive downloads.

14. Download Only Certain File Types Using wget -r -A

You can use this under following situations:

• Download all images from a website
• Download all videos from a website
• Download all PDF files from a website

$ wget -r -A.pdf http://url-to-webpage-with-pdfs/

15. FTP Download With wget

You can use wget to perform FTP download as shown below.
Anonymous FTP download using Wget

$ wget ftp-url

FTP download using wget with username and password authentication.

$ wget --ftp-user=USERNAME --ftp-password=PASSWORD DOWNLOAD-URL

If you liked this article, please bookmark it with delicious or Stumble.


http://www.thegeekstuff.com/2009/09/the-ultimate-wget-download-guide-with-15-awesome-examples/