Web Developer - Code and Info

JQUERY CODE EXAMPLE: Site with Non-Scrollable Scoreboard as Header

added on Oct 29, 2013

JQUERY CODE EXAMPLE: Basic code for flashcards using jquery widgets

added on Sep 8, 2013

REDBEAN CODE EXAMPLE: Basic code for SQLite access with Redbean

added on Sep 5, 2013

Basic code for SQLite access with Redbean

Uncomment out the following lines to see how you can read and write to an SQLite database.

//test_createBean();
//echo test_getSingleBean();
//echo test_getCountRecords();
//echo test_getMultipleBeansByIdList();
//test_executeQuery();
//echo test_getMultipleRecords();
//echo test_getMultipleRecordsWithParameterBindings();
//echo test_getSingleRecord();
//echo test_getSingleColumn();
//test_setColumnWithVariables();
test_createMultipleBeans();

R..close();

function test_createBean() {
    $comparisonBean = R.dispense('comparisons');
    $comparisonBean->categories = 'member,backbone';
    $comparisonBean->whenCreated = '2013-05-31 04:30:06';
    $comparisonBean->score = 23;
    $comparisonBean->body = "Ember's sweet spot is applications where the user will keep the application open for long periods of time, perhaps all day, and interactions with the application's views or underlying data trigger deep changes in the view hierarchy. Ember is larger than Backbone, but thanks to Expires, Cache-Control this only matters on the the first load. After two days of daily use that extra 30k will be overshadowed by data transfers, sooner if your content involves images. Backbone apps focus more on brief or casual interactions, that are often just small sections of a larger static page: airbnb, Khan Academy, Foursquare's map and lists.";
    R@@DOUBLE_SEMICOLONstore($comparisonBean);
}

function test_getSingleBean() {
    $comparisonBean = R@@DOUBLE_SEMICOLONload('comparisons', 1);
    echo $comparisonBean->body;
}

function test_getCountRecords() {
    $r = '';
    $r .= R@@DOUBLE_SEMICOLONcount('comparisons');
    return $r;
}

function test_getMultipleBeansByIdList() {
    $r = '';
    $comparisons = R@@DOUBLE_SEMICOLONbatch('comparisons', [1, 2]);
    if (count($comparisons) > 0) {
        $r .= '<ul>';
        foreach ($comparisons as $comparison) {
            $r .= '<li>' . $comparison->body . '</li>';
        }
        $r .= '</ul>';
    }
    return $r;
}

function test_executeQuery() {
    R@@DOUBLE_SEMICOLONexec('UPDATE comparisons SET categories="changed" WHERE id=2');
}

function test_getMultipleRecords() {
    $r = '';
    //$comparisonRecords = R@@DOUBLE_SEMICOLONgetAll('SELECT * FROM comparisons WHERE id>2');
    $comparisonRecords = R@@DOUBLE_SEMICOLONgetAll('SELECT * FROM comparisons WHERE body LIKE "%javascript%"');
    if (count($comparisonRecords) > 0) {
        foreach ($comparisonRecords as $comparisonRecord) {
            $r .= '<li><b>'. $comparisonRecord['id'] . '</b>: '. $comparisonRecord['body'] . '</li>';
        }
    }
    return $r;
}

function test_getMultipleRecordsWithParameterBindings() {
    $r = '';
    $searchText = 'also';
    $comparisonRecords = R@@DOUBLE_SEMICOLONgetAll('SELECT * FROM comparisons WHERE body LIKE :body', [':body'=>'%'.$searchText.'%']);
    if (count($comparisonRecords) > 0) {
        foreach ($comparisonRecords as $comparisonRecord) {
            $r .= '<li><b>'. $comparisonRecord['id'] . '</b>: '. $comparisonRecord['body'] . '</li>';
        }
    }
    return $r;
}

function test_getSingleRecord() {
    $r = '';
    $comparisonRecord = R@@DOUBLE_SEMICOLONgetRow('SELECT * FROM comparisons WHERE id=6');
    $r .= '<b>'. $comparisonRecord['id'] . '</b>: '. $comparisonRecord['body'];
    return $r;
}

function test_getSingleColumn() {
    $r = '';
    $ids = R@@DOUBLE_SEMICOLONgetCol('SELECT id FROM comparisons WHERE id > 3');
    $r .= join($ids,',');
    return $r;
}

function test_setColumnWithVariables() {
    $id = 2;
    $fieldName = 'body';
    $fieldValue = 'the body was changed for record with id='.$id;
    $comparisonBean = R@@DOUBLE_SEMICOLONload('comparisons', $id);
    $comparisonBean->setAttr($fieldName, $fieldValue);
    $idAffected = R@@DOUBLE_SEMICOLONstore($comparisonBean);
    echo 'record with id '.$idAffected. ' changed';
}

function test_createMultipleBeans() {

    $comparisonBeans = R@@DOUBLE_SEMICOLONdispense('comparisons',2);
    if (count($comparisonBeans) > 0) {
        foreach ($comparisonBeans as $comparisonBean) {
            $comparisonBean->setAttr('categories', 'newone');
        }
    }
    R@@DOUBLE_SEMICOLONstoreAll($comparisonBeans);
    echo 'created';
}

JQUERY CODE EXAMPLE: Site with JQuery Page Switching and URL Rewriting

added on Jun 14, 2013

Site with JQuery Page Switching and URL Rewriting

This site contains everything you need to create a menu and "page area" with links which switch the page and also update the URL and page title.

index.php

<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script src="js/jquery.history.js"></script>
        <script src="js/jquery.getUrlParam.js"></script>
        <script src="js/site.js"></script>
        <link href="css/main.css" rel="stylesheet"/>
        <script>
            var CONFIG = {
                pageIdCodes: [
                    'pageNews',
                    'pageEvents',
                    'pageInfo',
                    'pageCourses',
                    'pageHelp'],
                pageTitles: [
                    'News',
                    'Events',
                    'Info',
                    'Courses',
                    'Help'
                ],
                defaultPageIdCode: 'pageEvents'
            };

            $(document).ready(function() {
                SITE.initialize();
            });

            function displayText(text) {
                text = text === undefined ? 'defaultValue' : text;
                console.log(text);
            }
        </script>
    </head>
    <body>
        <ul id="nav">
        </ul>
        <div id="pageNews" class="pageArea">
            <p>This is the news page which will have lots of news. This is the news page which will have lots of news. This is the news page which will have lots of news.</p>
            <ul>
                <li>one</li>
                <li>two</li>
                <li>three</li>
            </ul>
            <p>And more text.</p>
        </div>
        <div id="pageEvents" class="pageArea">
            <p>This is the news page about all the events.</p>
            <ul>
                <li>Event #1</li>
                <li>Event #2</li>
                <li>Event #3</li>
            </ul>
            And here is a <a href="?page=pageNews">link to the news page</a>, which shows you that you can have both kinds of links: javascript and browser reload.
        </div>
        <div id="pageInfo" class="pageArea">This is the info page.</div>
        <div id="pageCourses" class="pageArea">
            <p>This is a page with all the list of courses on it.</p>
        </div>
        <div id="pageHelp" class="pageArea">This is the help page with lots of help.</div>

    </body>
</html>

site.js

PHP CODE EXAMPLE: How to roll your own PHP routing

added on Jun 12, 2013

JQUERY CODE EXAMPLE: Simple and Smart Popups with PowerTip

added on Jun 7, 2013

JQUERY CODE EXAMPLE: JQueryUI Radio Buttons

added on Jun 4, 2013

BOOSTRAP CODE EXAMPLE: Basic, Interactive Bootstrap Site

added on May 30, 2013

Basic, Interactive Bootstrap Site

This is a site that is based on bootstrap (CSS file) and had jQuery added to it so that the menus are interactive.

html

<!DOCTYPE html>
<head>
    <title>btest</title>
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="js/site.js"></script>
    <script src="js/main.js"></script>

</head>
<body>
    <div class="container">
        <h1>The Title</h1>
        <div class='navbar navbar-inverse'>
            <div class='navbar-inner nav-collapse' style="height: auto;">
                <ul class="nav">
                    <li id="linkHome" class="active"><a href="#">Home</a></li>
                    <li id="linkInfo"><a href="#">Info</a></li>
                    <li id="linkAbout"><a href="#">About</a></li>
                </ul>
            </div>
        </div>

        <div id='content' class='row-fluid'>
            <div class='span9 main'>
                <div class="sitePage" id="pageHome">
                    <h2>Home</h2>
                    <p>...</p>
                </div>
                <div class="sitePage" id="pageInfo">
                    <h2>Info</h2>
                    <p>N...</p>
                </div>
                <div class="sitePage" id="pageAbout">
                    <h2>About</h2>
                    <p>...</p>
                </div>
                <div class="sitePage" id="pageSection1">
                    <h2>Nation States at the End of the 19th Century</h2>
                    <p>...</p>
                </div>
                <div class="sitePage" id="pageSection2">
                    <h2>1880-1910: Technological Inventions</h2>
                    <p>...</p>
                </div>
                <div class="sitePage" id="pageSection3">
                    <h2>Late 19th Century Japan</h2>
                    <p>...</p>
                </div>
            </div>
            <div class='span3 sidebar'>
                <ul class="nav nav-tabs nav-stacked">
                    <li><a id="linkSection1" class="sideLink" href='#'>Nation States at the End of the 19th Century</a></li>
                    <li><a id="linkSection2" class="sideLink" href='#'>1880-1910: Technological Inventions</a></li>
                    <li><a id="linkSection3" class="sideLink" href='#'>Late 19th Century Japan</a></li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

site.js

KNOCKOUT CODE EXAMPLE: Knockout list adding

added on May 27, 2013

JQUERY CODE EXAMPLE: Nice, cascading fade-in of multiple items

added on May 23, 2013

JQUERY CODE EXAMPLE: Flashcard example with clicks

added on May 23, 2013

KNOCKOUTJS CODE EXAMPLE: Knockout.js Button Click and Counter

added on May 21, 2013

KNOCKOUTJS CODE EXAMPLE: Hello World knockout.js

added on May 21, 2013

PHP CODE EXAMPLE: A PHP script that observes another and kills is process if it hangs

added on Feb 5, 2013

A PHP script that observes another and kills is process if it hangs

If you have a PHP script running on a linux server which hangs now and then, this is an example of a script that can observe that script and when it hangs, kills it, so the cronjob can restart it.

test.ThatHangs.php

class TestThatHangs {

    protected $keepalive_file_name = 'test_keepalive_info.txt';
    protected $test_phase = self:nnn:TESTPHASE_HANG;
    protected $number_of_seconds_to_run_before_hang = 10;

    const TESTPHASE_HANG = 1;
    const TESTPHASE_EXITCORRECTLY = 2;

    public function process() {
        $this->_createKeepAliveFile();
        $this->_display('started script');

        for ($index = 0; $index < $this->number_of_seconds_to_run_before_hang; $index++) {
            $this->_display('test output');
            sleep(1);
            $this->_touchKeepAliveFile();
        }
        if ($this->test_phase == self:nnn:TESTPHASE_HANG) {
            $this->_emulateHang();
        } else {
            $this->_exitCorrectly();
        }
    }

    protected function _exitCorrectly() {
        $this->_cleanUpKeepAliveFile();
        $this->_display('exited correctly');
        exit;
    }

    protected function _emulateHang() {
        $this->_display('emulating hang...');
        sleep(10000);
    }

    protected function _display($text) {
        echo $text . PHP_EOL;
    }

    protected function _touchKeepAliveFile() {
        touch($this->keepalive_file_name);
    }

    protected function _getKeepAliveFileLastTouchedAbsoluteSeconds() {
        clearstatcache();
        return filemtime($this->keepalive_file_name);
    }

    protected function _createKeepAliveFile() {
        file_put_contents($this->keepalive_file_name, getmypid());
    }

    protected function _cleanUpKeepAliveFile() {
        unlink($this->keepalive_file_name);
    }

    protected function _getCurrentAbsoluteSeconds() {
        return strtotime(date("Y-m-d H:i:s"));
    }

}

$testThatHangs = new TestThatHangs();
$testThatHangs->process();

testKeepAlive.php

class TestKeepAlive {

    protected $seconds_of_nonactivity_to_kill_script = 10;
    protected $keepalive_file_name = 'test_keepalive_info.txt';

    public function process() {
        $this->_display('keep alive script is observing keepalive file...');
        while (true) {
            sleep(1);
            $keepAliveFileLastTouchedAbsoluteSeconds = $this->_getKeepAliveFileLastTouchedAbsoluteSeconds();
            if ($keepAliveFileLastTouchedAbsoluteSeconds == 0) {
                $this->_display('the script is not running');
            } else {
                $currentAbsoluteSeconds = $this->_getCurrentAbsoluteSeconds();
                $touchedAgoSeconds = $currentAbsoluteSeconds - $keepAliveFileLastTouchedAbsoluteSeconds;
                $this->_display('script is running and keep alive file was touched ' . $touchedAgoSeconds . ' seconds ago');
                if($touchedAgoSeconds >= $this->seconds_of_nonactivity_to_kill_script) {
                    $this->_killProcess();
                }
            }
        }
    }

    protected function _display($text) {
        echo $text . PHP_EOL;
    }

    protected function _getKeepAliveFileLastTouchedAbsoluteSeconds() {
        if (!file_exists($this->keepalive_file_name)) {
            return 0;
        } else {
            clearstatcache();
            return filemtime($this->keepalive_file_name);
        }
    }

    protected function _getCurrentAbsoluteSeconds() {
        return strtotime(date("Y-m-d H:i:s"));
    }

    protected function _cleanUpKeepAliveFile() {
        unlink($this->keepalive_file_name);
    }

    protected function _getProcessId() {
        $lines = file($this->keepalive_file_name);
        if(count($lines) > 0) {
            return intval($lines[0]);
        } else {
            return 0;
        }
    }

    protected function _killProcess() {
        $processId = $this->_getProcessId();
        $this->_display('killing process ' . $processId);
        exec("kill $processId");
        $this->_cleanUpKeepAliveFile();
    }

}

$testKeepAlive = new TestKeepAlive();
$testKeepAlive->process();

run.sh

DIR=$( cd "$( dirname "$0" )" && pwd )
cd $DIR
if ps ax | grep "$1" | grep -v grep | grep -v "/bin/sh" > /dev/null
then
echo ""
else
php $1 $2 $3 $4 $5 $6
fi

cronjobs (crontab -e)

MAILTO="test@company.com"
#* * * * * ~/work/testing/run.sh testThatHangs.php >> /var/log/cronjobs/log_testThatHangs
#* * * * * ~/work/testing/run.sh testKeepAlive.php >> /var/log/cronjobs/log_testKeepAlive

(replace :nnn: with two colons)

JQUERY CODE EXAMPLE: List of elements with similar functionality

added on Jan 30, 2013

List of elements with similar functionality

Shows how to create a list of elements, each with a unique id, each element with similar funtionality.

<html>
    <head>
        <script type="text/javascript" src="systemJavascript/jquery-1.8.3.min.js"></script>
    </head>
    <body>
        <div id="infoItem_123" class="infoItem">
            <div class="menu">
                <span class="menuOne">one</span>
                <span class="menuTwo">two</span>
            </div>
            <div class="content">intro message</div>
            <div class="contentOne">you clicked one</div>
            <div class="contentTwo">you clicked two</div>
        </div>
        <div id="infoItem_456" class="infoItem">
            <div class="menu">
                <span class="menuOne">eins</span>
                <span class="menuTwo">zwei</span>
            </div>
            <div class="content">Introtext</div>
            <div class="contentOne">du hast auf eins geklickt</div>
            <div class="contentTwo">du hast auf zwei geklickt</div>
        </div>
    </body>

</html>
<script type="text/javascript">

    var INFOITEM = INFOITEM || {};

    INFOITEM.initialize = function(infoItem) {
        var elemMenuOne;
        var elemMenuTwo;
        var elemContent;
        var elemContentOne;
        var elemContentTwo;
        var itemId;

        this.defineVariables = function() {
            elemMenuOne = infoItem.find('.menuOne');
            elemMenuTwo = infoItem.find('.menuTwo');
            elemContent = infoItem.find('.content');
            elemContentOne = infoItem.find('.contentOne');
            elemContentTwo = infoItem.find('.contentTwo');
            itemId = infoItem.attr('id');
        }

        this.decorateElements = function() {
            elemMenuOne.css('background-color', 'beige');
            this.decorateAsLink(elemMenuOne);
            elemMenuTwo.css('background-color', 'beige');
            this.decorateAsLink(elemMenuTwo);
            elemContentOne.hide();
            elemContentTwo.hide();
        }

        this.functionalizeElements = function() {
            that = this;
            elemMenuOne.click(function(e) {
                that.displayText($('#'+itemId), elemContentOne.html());
            });
            elemMenuTwo.click(function(e) {
                that.displayText($('#'+itemId), elemContentTwo.html());
            });
        }

        this.displayText = function(clickedInfoItem, text) {
            clickedInfoItem.find('.content').html(text);
        }

        this.decorateAsLink = function(elem) {
            elem.css({
                'cursor' :'pointer',
                'text-decoration' : 'underline',
                'font-weight' : 'normal'
            });
        }

        this.defineVariables();
        this.decorateElements();
        this.functionalizeElements();
    }


    $('.infoItem').each(function(){
        INFOITEM.initialize($(this));
    });

</script>

UBUNTU BOOK NOTES: Ubuntu Unleased 2012 | 4.2

added on Jan 8, 2013

JQUERY CODE EXAMPLE: Base code to simply attach jQuery code to numberous like elements on page

added on Jan 8, 2013

JQUERY CODE EXAMPLE: A simple JQuery/AJAX form with PHP processing page

added on Nov 16, 2012

A simple JQuery/AJAX form with PHP processing page

This is a simple HTML/JQuery/AJAX form that sends data via AJAX to a PHP page and displays the results.

HTML Page:

<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>Testing - Test</title>
        <meta name="keywords" content="" />
        <meta name="description" content="" />
        <script type="text/javascript" src="systemJavascript/jquery-1.8.2.min.js"></script>
        <style type="text/css">
            #result {
                margin: 10px;
                background: #eee;
                padding: 10px;
                height: 40px;
                overflow: auto;
            }
        </style>
        <script type="text/javascript">
            $(function() {
                SMARTFORM.initialize($('form#form1'));
                SMARTFORM.initialize($('form#form2'));
            });
            var SMARTFORM = SMARTFORM || {};
            SMARTFORM.initialize = function(form) {
                var id = form.attr('id');
                var elemsTextBoxes = form.find('input[type=text]');
                var elemFirstField = form.find('input[type=text]').filter(':first');
                var elemButton = form.find('#formButton');
                var elemFieldFirstName = form.find('#firstName');
                var elemFieldLastName = form.find('#lastName');
                var elemResultArea = form.find('#resultArea');

                elemsTextBoxes.on('focus', function() {
                    $(this).css('background-color', '#eee');
                });
                elemsTextBoxes.on('blur', function() {
                    $(this).css('background-color', '#fff');
                });
                elemFirstField.focus();

                elemButton.click(function(e) {
                    e.preventDefault();
                    elemButton.blur();
                    elemFirstField.focus();
                    if(elemFieldFirstName.val() != '') {
                        $.post(
                        'testAjaxProcess2.php',
                        {
                            firstName: elemFieldFirstName.val(),
                            lastName: elemFieldLastName.val()
                        },
                        function( jsonString )
                        {
                            var data = $.parseJSON(jsonString);
                            elemResultArea.html(data['message']).hide().fadeIn('slow');
                            elemFieldFirstName.val('');
                            elemFieldLastName.val('');
                            elemButton.hide();
                            elemFieldFirstName.css('background-color', 'white');
                        });

                    } else {
                        elemFieldFirstName.css('background-color', 'red');
                    }
                });
            }

        </script>
    </head>
    <body>
        <form id="form1">
            <h2>Form1</h2>
            <div>First Name:<input type="text" id="firstName"/></div>
            <div>Last Name:<input type="text" id="lastName"/></div>
            <div><button id="formButton">Send</button></div>
            <div id="resultArea">
            </div>
        </form>
        <form id="form2">
            <h2>Form2</h2>
            <div>First Name:<input type="text" id="firstName"/></div>
            <div>Last Name:<input type="text" id="lastName"/></div>
            <div><button id="formButton">Send</button></div>
            <div id="resultArea">
            </div>
        </form>
    </body>
</html>

Processing Page:

<?php
$data = array();
$firstName = filter_input(INPUT_POST, 'firstName', FILTER_SANITIZE_STRING);
$lastName = filter_input(INPUT_POST, 'lastName', FILTER_SANITIZE_STRING);
$data['message'] = 'Thank you, '. strtoupper($firstName) . ' ' . strtoupper($lastName) . ' was processed.';
echo json_encode($data);

PHP CODE EXAMPLE: How to send multiple MySQL commands in one line from PHP

added on Jul 18, 2012

SQL CODE EXAMPLE: How to find doubles in SQL

added on Jul 7, 2012

LINUX BOOK NOTES: Macintosh Terminal Pocket Guide | 4.8

added on Jul 7, 2012

CLOJURE FORAY: setup and use clojure in ubuntu

added on Jul 4, 2012

JAVASCRIPT BOOK NOTES: The Linux Command Line | 5.0

added on Jul 4, 2012

CLOJURE BOOK NOTES: Programming Clojure | 4.5

added on Jul 4, 2012

Programming Clojure

If you are not familiar with functional programming, Java, then is a very abtract book.

- chap1,why, functional programming is simple, best of java, lisp for the jvm, short programs, simpler, defrecord Person[first-name last-name], lisp reloaded, improves on lisp syntax, commas are whitespace, not a pure functional language like haskell, threadsafe, contrast with imperitive languages, where explicit statements alter program state, functional programming is more urgent, uses software transcational memory, clojure dynamic typing (many functional language statically typed), simplifies concurrent programming (thread-safe), embraces JVM, via git, REPL, *1 and *2, libraries, (doc str) for documentation, conventions;skimmed;4.6

- chap2, exploring clojure, nice abbreviations, macros, callings java, no for loop, cons for construct, functions return lists;skimmed;4.1

- chap3,sequences, maps, lazy and infinite sequences, regex use java.util.regex, peek/pop, somewhat like javascript object literals;skimmed;4.0

- chap4, functional programming, "how to be lazy", self-recursion, currying () and partial application, Trampolining Mutual Recursion, expose sequences instead of functions;skimmed;4.0

- chap5, state, software transactional memory, atoms and refs, unified update model, java callback apis, snake game; skimmed;2.3-state issues abstract

- chap6,protocols and databases, "spit and slurp i/o functions", gulp and expectorate, ok now they have files such as "src/examples/protocols.clj", interfaces, can create java interfaces in clojure, macros;skimmed;4.1-some code for reading databases

- question: where are the touch points between clojure and java?

- chap7, macros, if you can write it as a function, don't write a macro, defmacro, java interop;skimmed;3.7-said not to write macros

- chap8, multimethods, associate function with set of inputs (like polymorphism), defmulti, clojure's inspector library uses swing; skimmed;3.9-the polymorphism reference made sense

- chap9, java down and dirty, clojure compiles to bytecode, exception handling easy, creating java classes in clojure, logging;skimmed;3.5-didn't really show how it calls java

- chap10,building application, running tests, the REPL, has example with html output, deploying: lien run, example of deploying at heroku;skimmed;2.4-not really sure what the application was

- question: not really sure how clojure is used in relation to java, is it used in conjunction with java, instead of java, or does it use java?

JAVASCRIPT BOOK NOTES: Learning Node | 5.0

added on Jul 4, 2012

WEB BOOK NOTES: Web Performance Daybook | 5.0

added on Jul 4, 2012

GIT BOOK NOTES: Getting Good with Git (2010) | 5.0

added on Jun 25, 2012

PHP CODE EXAMPLE: Base code to retrieve data from MySQL and display with PHP/mysql_connect

added on Jun 13, 2012

JAVASCRIPT CODE EXAMPLE: JavaScript Singleton Refactored

added on Jun 11, 2012

JAVASCRIPT CODE EXAMPLE: Basic JavaScript Singleton

added on Jun 8, 2012

Basic JavaScript Singleton

I needed a singleton in JavaScript in order to make a DataManager which is called multiple times, but I just want it to load its data only the first time it is called, then give pieces of the data out view public methods, never loading the initial data again.

<!DOCTYPE html>
<html>
    <head>
        <title>test singleton</title>
        <script type="text/javascript">
      var DatapodManager = (function() {
        var instantiated;
                that = this;

                //DEFINE INTERNAL VARIABLES HERE:
        var message = '';

        function init() {

          //LOAD DATA ONCE HERE:
          that.message = 'singleton message defined at: ' + getMilliseconds();

                    //ALLOW PUBLIC ACCESS TO SINGLETON DATA HERE:
          return {
            getMessage : function() {
              return that.message;
            },
            id : '1234'
          }
        }

        return {
          getInstance : function() {
            if(!instantiated) {
              instantiated = init();
            }
            return instantiated;
          }
        }
      })()

      function dowait() {
        for( x = 1; x <= 10000000; x++) {
          var y = 1000;
          var z = 2000;
          var b = y * z;
        }
      }

      function getMilliseconds() {
        var d = new Date();
        return d.getMilliseconds();
      }

      window.onload = function() {
        console.log('getting first singleton message at: '+getMilliseconds());
        console.log(DatapodManager.getInstance().getMessage());
        dowait();
                console.log('getting second singleton message at: '+getMilliseconds());
        console.log(DatapodManager.getInstance().getMessage());
        console.log('the static id is '+DatapodManager.getInstance().id);
      };
        </script>
    </head>
    <body></body>
</html>

JAVASCRIPT CODE EXAMPLE: Example of using prototype property to add functionality to a class

added on Jun 7, 2012

HTML5VIDEO FORAY: Make example of button jumping to middle of video and playing from there | 4.8

added on Jun 6, 2012

HTML5VIDEO CODE EXAMPLE: Example of HTML5 video that plays in modern browsers

added on Jun 6, 2012

Example of HTML5 video that plays in modern browsers

To make this example, I used ffmpeg to encode a .mp4 video into .flv, .ogg, and .webm. I used the video.js which makes the VIDEO element compatible in all modern browsers. One thing I couldn't get to work is the Flash fallback for IE7 and IE8, but here is how it looks in the other browsers. Notice you have to have an .htaccess file to serve the right mime types.

I haven't yet been able to get the get IE6, IE7, and IE8 to successfully play the Flash video, the way I understand, if you provide the .flv file, VideoJS should take care of this itself.

.htaccess

AddType audio/ogg oga ogg
AddType video/ogg ogv
AddType video/webm webm
AddType video/x-flv flv

index.htm

<!DOCTYPE html>
<html>
  <head>
    <link href="videojs/video-js.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

  <script type="text/javascript">
    $(init);

    function init() {
      setSmallSize();
      $('button#buttonSmallSize').click(function() {
        setSmallSize();
      });

      $('button#buttonLargeSize').click(function() {
        setLargeSize();
      });
    }

    function setSmallSize() {
      $('video#my_video_1').css('width','512px');
      $('video#my_video_1').css('height','288px');
      $('div#videobox').css('width','512px');
      $('div#videobox').css('height','322px');
      $('button#buttonSmallSize').attr('disabled', true);
      $('button#buttonLargeSize').attr('disabled', false);
    }

    function setLargeSize() {
      $('video#my_video_1').css('width','768px');
      $('video#my_video_1').css('height','432px');
      $('div#videobox').css('width','768px');
      $('div#videobox').css('height','468px');
      $('button#buttonSmallSize').attr('disabled', false);
      $('button#buttonLargeSize').attr('disabled', true);
    }

  </script>
  <style type="text/css">
    div#buttonRow {
      margin: 0 0 12px 0;
    }
    .theButton {
      float: left;
      margin: 0 5px 0 0;
      cursor: hand;
      cursor: pointer;
    }
    .theMessage {
      float: left;
      margin: 0 5px 0 0;
      font-family: arial;
      color:#fff;
      font-size: 14pt;
    }

  </style>

  </head>
<body style="background-color: #888">
  <div id="videobox" style="border-radius: 5px; width: 513px; padding: 10px; border: 1px solid #fff;background-image:url('images/chrome.jpg');;box-shadow: 10px 10px 5px #555">

  <div id="buttonRow">
  <button id="buttonSmallSize" class="theButton">Small Size</button>
  <button id="buttonLargeSize" class="theButton">Large Size</button>
  <div id="message" class="theMessage"></div>
  <div style="clear:both"></div>
  </div>
  <video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="512" height="288" data-setup="{}">
   Your browser is currently not supported.
   <source src="videos/damconnect.mp4" type='video/mp4'>
   <source src="videos/damconnect.webm" type='video/webm'>
   <source src="videos/damconnect.ogg" type='video/ogg'>
   <source src="videos/damconnect.flv" type='video/x-flv'>
  </video>

  </div>
</body>
</html>

MAGENTO BOOK NOTES: The Definitive Guide to Magento (2009) | 1.9

added on Jun 5, 2012

The Definitive Guide to Magento (2009)

This book is written for a designer (assumes you don't know php, html, css, says it will "hold your hand" as it goes through the code) and is a very rough overview, good to skim if you know nothing about Magento and just want to learn what it is and what are the moving parts are.

- chap1, introduction, opensource ecommerce platform, zend framework, two versions, began 2007, Varien, multiple websites with one admin, mulitple shipping addresses, etc;done;2.1

- chap2, installing, only linux, safe mode off, database, file permissions;4.2

- chap3, public interface walkthrough, most important: product page, upsell products, compare products, cms pages, checkout, billing;done;3.1

- chap4, admin walkthrough, basics, url rewrite management, ratings and tags, newsletter, reports, transaction emails;2.1;done

- chap5, products, many kinds of products: single, grouped, configurable, virtual, bundle, downloadable;2.1;done

- chap6, customers, checkout as guest, new customers, import, groups;1.8;done

- chap7, development, orders, creating invoice, but still from interface, not code, canceling, order on hold, deleting;2.8;done

- chap8, configuring, meta keywords, default home page, setting up transactional emails, setting up payment, sql script to remove all records;3.1;done

- chap9, customizing appearance, PHTML (from Zend) have basic structure plus the XML layouts from Magento, football metaphor: xml layouts = playbook, phtml = football players, skin=jersey colors, positive sides: global changes easy, MVC, potential problems: object-oriented steep, deep file structure, talks about themes, template path hints, shows xml layouts and phtml files, css file, blank theme,

- chap10, extensions, same: extensions, modules, plugins, i.e. extensions are packaged modules, extension key for pear files, how to build a module, hello world module, "Unfortunately, Magento's documentation is lacking.", then a random products module, overrides _toHtml(), then connects everything in config.xml, turning module into extension, make sure /var/pear exists, just filling out forms, you have to create a Magento Connect account, dependencies;2.1

- chap11, API, setting up magento for web services, using xml-rpc (pear client), using soap,

- chap12, tips and tricks, importing products with CSV, quickbooks invoices, how to truncate all tables (sql script);1.7

JQUERY BOOK NOTES: jQuery Recipes (2010) | 5.0

added on Jun 4, 2012

JQUERY CODE EXAMPLE: JavaScript module that displays quotes every couple seconds

added on Jun 4, 2012

JavaScript module that displays quotes every couple seconds

This is a Javascript module which displays quotes. It is self-contained so it won't conflict with other code (everyone under the namespace SMARTQUOTES). You can define the quotes and control the speed of the quotes through parameters, and you can control the layout of the quotes with CSS.

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>smart quotes</title>
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="js/smartquotes.js"></script>
    <script type="text/javascript">
      $(function() {
        SMARTQUOTES.init();
        SMARTQUOTES.quotes = new Array(
        'It\'s tempting to augment prototypes of built-in constructors such as Object(), Array(), or Function(), but it can seriously hurt maintainability.',
        'We come from XHTML backgrounds, so we will close all tags, use lowercase, and use quotation marks around attributes.',
        'Checking to see if a value exists inside an array is always a bore in JavaScript.',
        'JavaScript classes have the same effect on some people that garlic has on Dracula.',
        'Mixins are not supported natively by CoffeeScript, for the good reason that they can be trivially implemented yourself.',
        'Using a single var statement at the top of your functions is a useful pattern to adopt.',
        'Using the Function() constructor is as bad as eval()',
        'Any obstacle that I\'ve encountered during my development by placing JavaScript at the bottom of the page has been easily overcome and well worth the optimization gains.'
        );
        SMARTQUOTES.duration = 5000;
        SMARTQUOTES.start();
      });
    </script>
    <style type="text/css">
      div#quoteWrapper {
        border: 1px solid #999;
        padding: 10px;
        background: #eee;
        color: navy;
        width: 300px;
        border-radius: 5px;
        font-style: italic;
        font-family: arial;
        font-size: 12pt;
        text-align: center;
      }

    </style>
  </head>
<body>
  <div id="quoteWrapper">
    <div id="SMARTQUOTE"></div>
  </div>
</body>

smartquotes.js

HTML5VIDEO FORAY: use videojs to get three different formats (mpg, ogg, webm) playing in all browsers

added on May 30, 2012

HTML5 BOOK NOTES: Dive into HTML5 (2010) | 5.0

added on May 29, 2012

HTML5 BOOK NOTES: HTML5 Canvas (May 2011) | 5.0

added on May 29, 2012

HTML5 BOOK NOTES: HTML5 Video (2010) | 3.0

added on May 29, 2012

HTML5 Video (2010)

- chap1, history, video table mentioned 2005, implemented 2007, IE joined march 2010, also: 1998: HTML+Time (but only for IE), 1997: SMIL (never supported by any browser accept as part of HTML+time), before video element, you could use embed or object, 2005: macromedia bought by adobe, 2007: mpeg supported in flash in particular H.264, goal: baseline codec, you have the ogg container which contains the theora video and vobis audio format, VP8 is on par in video quality with H.264, so it has a big chance of achieving baseline codec status, microsoft was positive to VP8, apple refrained from comment;done;4.8

- fc: which video containers typically contain which codecs?;WebM typically contains VP8 and Vorbis. Ogg typically contains Theora, Vorbis, Speex, or FLAC, and there are defined mappings for VP8 and Dirac, though not many such files exist. MP4 typically contains MP3, AAC, and H.264.

- fc: which video format did wikipedia choose?;Ogg Theora

- quote: although the video codec format should correctly be called "Ogg Theora/Vorbis", in common terminology you will only read "Ogg Theora".

- fc: what were the baseline HTML video/audio formats in 2007;Ogg Theora (video) and Ogg Vorbis (audio), however, apple supported H.264 in safari based on quality, h.264 supported by Nokia, Microsoft, ITU and ISO/IEC

- fc: what are the advantages of H.264 over Ogg Theora?; 1. better encoding quality, 2. youtube uses Flash with MP4 H.264/AAC support, 3. iphone/ipad/ipod hardward supports H.264

- fc: how is theora better than H.264?;less complex and therefore requiring less dedicated hardware support (good for mobile)

- fc: what is WebM?; an audio/video format to solve the stalemate of Ogg/Theora vs. MP4/H.264. WebM is a video container that contains VP8 video codec and Vorbis audio codec.

- fc: what is x264?; a free software library for encoding video streams into the H.264/MPEG-4 AVC format (steve jobs wrote to x264 developer asking opinion on VP8 codec)

- chap2, audio and video elements, examples all online here: http://html5videoguide.net, child elemetns: source, track + fallback content, safari/ie=mpeg, firefox/opera=webm/ogg, chrome=webm/ogg/mpeg, opera poster bug, put in width/height, audio support in browsers: ie=mp3, safari=wav/mp3, firefox/opera=wav/ogg, chrome=wav/ogg/mp3 (you need to provide ogg and mp3 in order to reach all browsers), codecs in source, shows a test of the video element, profiles in mp4 files, encoding ogg, encoding webm, mp3 and ogg vorbis, streaming with rtp and rtsp, rtsp (real video) will probably not be supported extensively, no real need for it, adaptive http streaming, %%2.4

- recon: look at javascript video libraries: mwEmbed1 (small), Video for Everybody (looks good), Sublime Video3 (small), or VideoJS (good), controls seem to be native,

- recon: xhtml5

- quote: The aim here is to continue using normal web servers without any software extensions and to push the complexity of streaming into the client software.

- quote: Key to the usability of progressive download is the ability to seek into not-yet downloaded sections by asking the web server to stop downloading and start providing those future data chunks.

- chap3,

- chap4,

- chap5,

- chap6,

- chap7,

- chap8,

- chap9,

- chap10,

PHP FORAY: on virtual win7 machine, setup: xampp, eclipse, svn, php, zend, debugging, xdebug | 4.8

added on May 27, 2012

DEVELOPER FORAY: get a system going for having a library of ubuntu and win7 machines in virtualbox | 4.5

added on May 27, 2012

ZEND BOOK NOTES: Beginning Zend Framework (2009) | 4.9

added on May 27, 2012

JAVASCRIPT BOOK NOTES: Backbone.js Applications (April 2012) | 5.0

added on May 27, 2012

Backbone.js Applications (April 2012)

- chap1, deep talk about mvc, history of it, var buildPhotoView = function( photoModel, photoController ){ , backbone, spine, then mvp,

- quote: The benefit of MVP over MVC is that it increases testability and provides cleaner separation between view and model, however, MVP lacks data binding support.

- quote: Use MVP if you have complex views with a great deal of user interaction since solving this in MVC may mean spreading this logic over many controllers.

- quote: since in MVP presenters communicate with views through interfaces, developers can create presenters before designers have created the views

- quote: there's quite a difference between opting for MVP for a JavaScript project over one for say, ASP.NET

- quote: JavaScript developers don't view MVC and MVP as being mutually exclusive

- quote: some developers feel that Backbone.js better fits the description of MVP than MVC

- quote: the V in MVC and the P in MVP can both be accomplished by Backbone.View

- fc: name three javascript mvc frameworks; Ember.js, JavaScriptMVC, and of course Backbone.js

- quote: In Backbone, controller logic is shared between Backbone.View and Backbone.Router.

- fc: what is the difference between mvc and mvp?;

- quote: Backbone is maintained by a number of contributors, most notably: Jeremy Ashkenas, creator of CoffeeScript, Docco and Underscore.js.

- chap2, the basics, Model.get(), Listening for changes to your model, talks about el, Collections are sets of Models, routers, Backbone.history, namespacing, scaffolding, documentcloud uses only one router;4.6

- fc: what are the top contenders for javascript templating?;Mustache, jQuery-tmpl (also look at handlebar.js as alternative to mustache)

- quote: The key to building large applications is not to build large applications in the first place.

- chap3, REST applications, with node.js, express, mongoose, mongodb, and jade, technical details, then: backbone with ruby, sinatra, mongodb, haml, how to install all;4.8;good intro to new technologies

- fc: what is jade; template engine influenced by haml, supports express

- fc: what is sinatra; a simpler ruby on rails, ties specific urls to blocks of ruby code, uses splats, redirection, halting, passing,

- quote: Haml looks more like CSS than it does traditional markup.

- quote: I personally found developing APIs with Sinatra a relatively painless experience.

- chap4, modular javascript, requirejs and AMD,

- foray: get requirejs running;4.8

- chap5,

- chap6,

- chap7,

JQUERY CODE EXAMPLE: Simple JavaScript to show time counting with setTimeout()

added on May 24, 2012

HTML5 BOOK NOTES: HTML5 Developer's Cookbook (Dec 2011) | 5.0

added on May 24, 2012

HTML5 Developer's Cookbook (Dec 2011)

- intro, WHATWG worked on web forms 2.0 and web applications 1.0 which merged to form html5, in 2006 W3C left xhtml and picked up on html5 and called it "html 5", whatwg is much faster than w3c, in 2009 w3c stopped xthml, now html5 is primarily developed by whatwg and w3c reviews it, html5 backward compatible, html5 tells browsers to handle errors, very few recipes use third-party libraries, but they use standard javascript

- fc: what is html5; umbrella term for: html, css, javascript apis and events

- fc: name 12 html5 features: semantics, forms, canvas, drag/drop, local storage, page-to-page messaging, desktop notifications, video/audio, web sockets, geolocation (not technically part html5), history, microdata

- fc: is css3 part of html5?; no, it's just new and cool like html5

- checkout: html5doctor.com

- chap1, 20 new elements, doctype, charset, , js and css links, google analyzed class names to get new elements, header, does not have to be at top, multiple per page, hgroup, article and section, aside, footer, example as news page,

- quote: We come from XHTML backgrounds, so we will close all tags, use lowercase, and use quotation marks around attributes.

- quote: the HTML5 specification suggests that author information is more suited to the footer element

- question: what about backwards compabitility?

- quote: There is a big accessibility win when using the nav element.

- quote: A section can contain article elements, and article elements can have their content split into sections.

- quote: A common mistake in early HTML5 uptake is using a section to wrap entire sites.A common mistake in early HTML5 uptake is using a section to wrap entire sites.

- quote: The HTML5 specification says the footer element can include links to related documents.

- recon: tryout HTML5 outliner extension plugin for chrome: http://code.google.com/p/h5o/;3.7;15m

- codex: page 23, example article using new html5 elements;4.5;20m

- chap2,grouping, figure/figcaption, time element, address, details, mark (highlight), s element (inaccurate or irrelevant), ol has been redefined (interesting), now has reversed, the dl element, small for e.g. copyright info, i means "alternative voice or mood", now only abbr (not acronym), hr is now a "break after a paragraph", applet is gone, in HTML5 you can wrap a number of elements in the anchor element, jquery calendar, polifils, shims and libraries,

- quote: The i element was, in HTML 4, for styling text in italics. Now, though, it represents text that is in an alternative voice or mood.

- fc: what are the 5 HTML5 microdata attributes; itemid, itemprop, itemref, itemscope, and itemtype

- quote: You can actually combine Microdata with Microformats, and although Microdata is the emerging standard, Microformats is currently more popular.

- fc: what does WAI-ARIA stand for; Web Accessibility Initiatives Accessible Rich Internet Applications

- codex: modernizer, p62

- recon: check out these sites: http://findmebyIP.com, http://caniuse.com, http://html5test.com, http://html5readiness.com

- chap3, CSS Media Queries,

- recon: http://selectivizr.com), an easy-to-use JavaScript utility that makes Internet Explorer understand the new CSS selectors.; 3.2

- chap4,

- chap5,

- chap6,

- chap7,

- chap8,

- chap9,

- chap10,

- chap11,

- chap12,

- chap13,

- chap14,

- chap15,

JQUERY CODE EXAMPLE: Minimal start page for HTML5/JQuery

added on May 24, 2012

JAVASCRIPT BOOK NOTES: Little Book on CoffeeScript (Jan 2012) | 4.8

added on May 23, 2012

JAVASCRIPT CODE EXAMPLE: How to use prototype to add a method to a function/object

added on May 22, 2012

JAVASCRIPT BOOK NOTES: JavaScript Patterns (2010) | 5.0

added on May 22, 2012

JavaScript Patterns (2010)

- chap1,patterns, oop, no classes, prototypes, one way to reuse code, ECMAScript 5 (dec 2009), console;2.1

- foray: jslint

- quote: JSLint will hurt your feelings, but only in the beginning.

- chap2, essentials, lots of tips that experienced javascript developers know, the problem with globals, don't forget var, access to global, single var pattern, hoisting (multiple vars), avoid eval(), not on parseInt() with radix number, white space, indentation, jslint;4.4

- quote: Using a single var statement at the top of your functions is a useful pattern to adopt.

- quote: it's also a good practice initialize the variable with an initial value at the time you declare it

- quote: Technically, you can also use for-in to loop over arrays, but it's not recommended.

- quote: So it's preferable to use normal for loops with arrays and for-in loops for objects.

- quote: It's tempting to augment prototypes of built-in constructors such as Object(), Array(), or Function(), but it can seriously hurt maintainability.

- recon: http://code.google.com/p/jsdoc-toolkit

- fc: two documentation tools for javascript: jsdoc, yuidoc

- chap3,literals and constructors, two ways to create same object, the new keyword (no reason to use it), shows the that pattern to enforce new, another solution: self-involing constructor, two ways to make arrays;4.7

- quote: when you forget new, this inside the constructor will point to the global object, JSON, regex, literal and primitives,

- quote: ECMAScript 5 defines a new method Array.isArray()

- fc: name javascript's primitive types;there are 5: number, string, boolean, null, undefined (the first three have primitive wrapper objects)

- chap4, functions, named and anonymous functions, functional hoisting, callbacks, return a function (closure), self-defining function (lazy function definition), parameters to immediate functions, configuration objects, curry (talks about apply), or without an array, currying (partial list of arguments),

- quote: Using the Function() constructor is as bad as eval()

- codex: do callback example, page 63;4.8

- quote: an immediate function allows you wrap an amount of work you want to do without leaving any global variables behind

- chap5, object creation patterns, shows how to avoid globals, namespaces, upfront declaration of variables in functions, private/public methods, priveleged prototype method, talks about method pattern and how it is not that recommended.

- codex: page 107, do wrapped function, and on next page, the constructor;4.8

- chap6, code reuse, ;4.8;this chapter explains the classical/modern approach to programming javascript with classes and not,

- quote: We call "modern" any JavaScript patterns that do not require you to think about classes.

- quote: Saying 'constructor function' instead of 'class' is longer, but it's accurate and not ambiguous.

- quote: It's important to remember that the prototype property should point to an object, not a function

- todo: use this chapter for talking about approaches to javascript in terms of objects, video

- chap7,

- chap8,

JAVASCRIPT BOOK NOTES: Oreilly Learning JavaScript Design Patterns (May 2012) | 5.0

added on May 19, 2012

CSS3 CODE EXAMPLE: How to use :nth-child(3n+1)

added on May 19, 2012

JQUERY CODE EXAMPLE: How to allow user to press keys to affect objects on screen

added on May 18, 2012

JQUERY CODE EXAMPLE: How to determine how long JQuery various selectors take to process

added on May 18, 2012

JQUERY CODE EXAMPLE: Basic template code for JQuery using an init() function

added on May 18, 2012

JAVASCRIPT CODE EXAMPLE: Basic template code for HTML/JavaScript using the onload attribute in BODY

added on May 18, 2012

JAVASCRIPT CODE EXAMPLE: Basic template code for HTML/JavaScript using window.onload

added on May 18, 2012

JQUERY CODE EXAMPLE: Basic template code to load JQuery remotely with setOnLoadCallback

added on May 18, 2012

HTML5 CODE EXAMPLE: Basic example of using canvas in HTML5

added on May 18, 2012

JQUERY CODE EXAMPLE: How to make a simple interactive shooter game

added on May 18, 2012

How to make a simple interactive shooter game

This is the minimal code to make shooter/invader game interaction. There is a ship, you can move the shooter with the arrow keys, and the up arrow shoots. If the laser hits the ship, it disappears.

<!DOCTYPE html>
<html>
    <head>
        <title>test</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function() {
                var winWidth = $(document).width();
                var duration = 1000;
                $(document).keydown(function(e) {
                    var keyCode = e.keyCode || e.which;
                    var keyMap = {left: 37, up: 38, right: 39, down:40};
                    switch(keyCode) {
                        case keyMap.left:
                            $('img#shooter').animate({
                                left: '-=50'
                            }, 200);
                            break;
                        case keyMap.right:
                            $('img#shooter').animate({
                                left: '+=50'
                            }, 200);
                            break;
                        case keyMap.up:
              var shooterLeft = $('img#shooter').offset().left;
              var shooterTop = $('img#shooter').offset().top;
              $('div#laser').offset({left: shooterLeft+12, top: shooterTop-30});
              $('div#laser').show();
              $('div#laser').animate({top: 10}, 1000, function() {
                var laserLeft = $('div#laser').offset().left;
                var shipLeft = $('img#ship').offset().left;
                if(laserLeft > shipLeft && laserLeft < shipLeft+80) {
                  $('img#ship').hide();
                }
                $('div#laser').offset({left:0, top:0});
                $('div#laser').hide();
              });
                            break;
                    }
                });
            });
        </script>
        <style type="text/css">
            body {
                background-color: #bbb;
            }
            img#ship {
                position: absolute;
        top: 10px;
        left: 200px;
            }
            img#shooter {
                position: absolute;
        top: 90%;
        left: 20%;
            }
            div#laser {
                position: absolute;
                width: 3px;
                height: 30px;
                background-color: orange;
        display: none;
            }
      p#instructions {
        position: absolute;
        top: 92%;
        color: #777;
      }
        </style>
    </head>
    <body>
    <p id="instructions">use arrows to move and shoot</p>
        <img id="ship" src="images/ship.png" alt=""/>
        <img id="shooter" src="images/shooter.png" alt=""/>
        <div id="laser"></div>
    </body>
</html>

JQUERY CODE EXAMPLE: How to make a click park an image in the corner by using .animate()

added on May 18, 2012

JQUERY CODE EXAMPLE: How to display a mouseover message which when clicked disappears

added on May 18, 2012

How to display a mouseover message which when clicked disappears

This example shows a bar on the top, you click it to make it disappear, then click anywhere to make it reappear. There is also a mouseover effect.

<!DOCTYPE html>
<html>
    <head>
        <title>test</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('div#message').click(function(e) {
                   e.stopPropagation();
                   $('div#message').fadeOut('fast');
                });
                $('div#message').mouseover(function(e) {
                   e.stopPropagation();
                    $('div#message').css('color', '#999');
                    $('div#message').css('background-color', '#ccc');
                });
                $('div#message').mouseout(function(e) {
                   e.stopPropagation();
                    $('div#message').css('color', 'black');
                    $('div#message').css('background-color', 'orange');
                });
                $(document).click(function(e) {
                   $('div#message').fadeIn('fast');
                });
            });
        </script>
        <style type="text/css">
            div#message {
                background-color: orange;
                width: 100%;
                text-align: center;
                font-size: xx-large;
                cursor: hand;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div id="message">This is the message.</div>
    </body>
</html>

JQUERY CODE EXAMPLE: Basic template code with (document).ready syntax

added on May 18, 2012

JQUERY CODE EXAMPLE: How to save values on a function

added on May 18, 2012

JQUERY CODE EXAMPLE: How to move a DIV to the right when you click it

added on May 18, 2012

CSS CODE EXAMPLE: How to create colored div icons with text centered vertically and horizontally

added on May 18, 2012

How to create colored div icons with text centered vertically and horizontally

If you want to have different colored icons with dynamic text in the middle, this code will get you started.

<html>
    <head>
        <style type="text/css">
            body {
                width: 400px;
            }

            div.item {
                margin: 0 0 20px 0;
            }

            div.iconArea {
                float: left;
                margin: 0 5px 0 0;
                width: 70px;
                height: 70px;
                font-size: 10pt;
                position: relative;
            }

            div.iconArea div.iconText {
                height: 20px;
                position: relative;
                top: 50%;
                text-align: center;
                margin: -10px auto 0 auto;
            }

            div.infoArea {
                margin: 0 0 0 75px;
            }

            div.infoArea div.title {
                font-weight: bold;
            }

            div.clear {
                clear: both;
            }

        </style>
    </head>
    <body>

        <div class="item">
            <div class="iconArea" style="background-color:pink"><div class="iconText" style="color:purple">Info</div></div>
            <div class="infoArea">
                <div class="title">This is an Info</div>
                <div>This is the description which will be wrapping around. This is the description which will be wrapping around. This is the description which will be wrapping around. This is the description which will be wrapping around. This is the description which will be wrapping around.
                </div>
                <div class="clear"></div>
            </div>
        </div>

        <div class="item">
            <div class="iconArea" style="background-color:lightgreen"><div class="iconText" style="color:brown">Flashcard</div></div>
            <div class="infoArea">
                <div class="title">This is a Flashcard</div>
                <div>This is the description which will be wrapping around2. This is the description which will be wrapping around. This is the description which will be wrapping around. This is the description which will be wrapping around. This is the description which will be wrapping around.
                </div>
                <div class="clear"></div>
            </div>
        </div>

        <div class="item">
            <div class="iconArea" style="background-color:navy"><div class="iconText" style="color:yellow">Question</div></div>
            <div class="infoArea">
                <div class="title">This is a Question</div>
                <div>This is the description which will be wrapping around2. This is the description which will be wrapping around. This is the description which will be wrapping around. This is the description which will be wrapping around. This is the description which will be wrapping around.
                </div>
                <div class="clear"></div>
            </div>
        </div>
    </body>
</html>

JAVASCRIPT CODE EXAMPLE: How to write a recursive function

added on May 18, 2012

JQUERY CODE EXAMPLE: How to use the .addClass() method in jQuery

added on May 18, 2012

JQUERY CODE EXAMPLE: How to put JavaScript/JQuery at end of Body

added on May 18, 2012

JQUERY CODE EXAMPLE: How to use insertBefore(), .length, and .filter()

added on May 18, 2012

JQUERY BOOK NOTES: Wrox Professional jQuery (April 2012) | 4.1

added on May 18, 2012

Wrox Professional jQuery (April 2012)

- chap1, getting started: some useful tools;1.1

- chap2, javascript primer;2.6

- basics, scope, applying modules, prototype, best practicies, ajax post

- chap3, jquery core;2.3

- structure, basics, utility functions: isFunction, noop, makeArray(),map() like each(), unobstrusive javascript, anonymous functions, chaining,how jquery is more consise, looks into jquery code, looks how $.ready() works, using jquery with other libraries, nice url reference at end

-lookup: cody lindley

- chap4, DOM Element Selection and Manipulation;2.2

- shows how jquery is quicker, $ and JQuery, uses html5 doctype, has easier selection: http://code.jquery.com/jquery-1.7.1.js, selecting elements by class, ancestor decendent, var allDivs = $('div[id^="area"]');, also $("[attributeName*='value']");, selecting by position, shows :input, and all those like :checked, etc., and p:contains, also var allDivs = $('div:contains("ok")');, shows :has(), and :parent, even white space is considered children, custom user selectors, how to use find:, shows var secondEl = listElements.get(2);, shows index(), shows toArray(), good example with fitler/end, shows andSelf(), shows text() which combines text of all elements, text() works with both XML and HTML, and html() only first matched element, removeAttr(), and appendTo().

- chap5, Event Handling;3.4

- good history of DOM level 0, 2, and IE model, netscape navigator 2, stopPropagation() and such, microsoft did bubbling different, shows bind(), you can also use live() (if element does not exist), live() cannot be chained, also unbind(), die(), undelegate(), for clicking only once one(), shows that bind and click can do same thing, good example of fadin, fadout, has form example, $(function(){...); as you'll recall is equivalent to using .ready(), good example of .each building a LI list, new event api with 1.7, instead of .bind() and .unbind(), .live() and .die() and set .click() and .blur(), you have .on() and .off(), two ways to use on()

- chap6, html forms;5.0

- data, and ajax: jQuery's .data() method, which stores arbitrary data for an element with a meaningful key, shows setField, talks about microsoft's three technologies, shows how to use modernizr, shows control types URL, email, telephone, etc. in HTML5, jquery place holder prjoect, this is also a focus example, shows raw ajax, then shows .ajax (we used .post), shows how to parse a document coming via ajax, also shows how to do it with getJSON, there is unfortunately no postJSON(), shows how .get(...) is shorthand for .ajax(), and .post() which is what I use in my language apps, also .load() is useful and is attached to element, then does form with placeholder="First Name" and required as attributes, modernizr makes sure they are present which is an example for load.

- chap7, animations and effects;4.8

- shows how to animate a box moving right on click, then shows offset(), talks about hide() and show(), talks about slideDown, slideUp, has example of this, uses height() and width() so that the px does not come with it, shows how to animate with animate, has a little space invader game, talks about canvas, recommended http://diveintohtml5.info/canvas.html.

- chap8, jquery UI making look slick;4.2

- shows how to setup jqueryui, prettier buttons, tabs, accordian, but doesn't really tell how to set them up, autocomplete, datepicker, lots of parameters, dialog, progressbar, slider

- foray: try to get all jqueryui examples to work here; 3.2

- chap9, jquery UI mouse interactions;4.1

- dragging and dropping, has example, sorting with example, you can resizing with example, selectable wiht example,

- foray: try to get all jqueryui examples to work here; 3.1

- chap10, writing effective jquery code;2.9

- best practices, minimize dom updates (reflows and repaints), has speed test (tables/rows), leverage dom hyperspace (do all in javascript), careful with $.each, use Array.ForEach(), caching objects, document.querySelectorAll is fast, careful of jquery-unique selectors e.g. :file, give selectors a context, skip jquery selectors and simply use e.g. document.getElementById('baz').href, Don't Repeate Yourself, use e.g. javascript singleton, ***code in framework structure, code for "dashbaord module", using html5 data attributes instead of css classes and ids, use $.data(), something about data API

- todo: do number of examples with $.each();4.3

- todo: do code example with .this and .that and learn background;3.2

- todo: learn hasClass();4.5

- read: https://developer.mozilla.org/en/Writing_Efficient_CSS; classic article on efficient css;2.1

- todo: do code example of all jquery selectors e.g. ":file", ":odd", etc.; 4.3

- todo: do code examples of javascript patters e.g. singleton;4.3

- todo: set up simple framework as in this chapter, page 209;4.5

- foray: get old framwork code, set it up again and get into github;2.3

- foray: crack github get project in, fork, etc.;4.9

- foray: learn module pattern and record as code example: http://www.yuiblog.com/blog/2007/06/12/module-pattern;4.3

- foray: get example with $.data() going;4.2

- chap11, jquery templates;2.1

- mentions template engines Freemarker or Mustache, this looks like a good chapter on a good pattern for jquery development, jquery templates started out in march 2010, as of april 2011, activity on the jquery template plugin stopped, leaving it permanently in that beta state, mentions Templating, Data Link, and Globalization, seems work has stopped but "it's therefore sensible to leverage the existing plugin until the newer effort is mature enough to supplant it", uses , also in javascript with $.template(), shows how, shows how to apply with $.tmpl(), using remote data, adding log to templates like if/then and each, ends with an example how to do one

- foray: spend 30 minutes with http://freemarker.sourceforge.net;2.9

- question: what is the sense or a use case for javascript/jquery templates?;4.3

- chap12, writing jquery plugins;3.1

- naming convention jquery.pluginName.js, two patterns to extend: jquery.fn and jQuery.extend(), jquery ui widget factory, $ should point to jquery, return jquery object whenever possible, best practices, provide public access, widget factory again,

- quote: to do a basic version doesn't mean it's easy to do it right;3.1

- todo: spend 1 hour looking through the jquery source and take notes;3.6

- quote: semicolons are your friend;javascript;4.1

- quote: Relying on implicit insertion can cause subtle, hard to debug problems. Don't do it. You're better than that.;38;javascript

- foray: create a jquery plugin (just do the one on page 259 here);4.3

- chap13, advanced asynchronous programming with jquery deferred;1.1

- $.deferred, introduced in version 1.5, is a chainable utility object that provides ? ne-tuned control over the way callback functions are handled, a promise is a proxy for the result of an action, has example, gets quick complicated

- chap14, unit testing;2.1

- introduces qunit, differences between xunit and qunit, asynchronous tests, using Using asyncTest, mocking ajax requests, has good example of test suite

- foray: get qunit up and running: http://docs.jquery.com/QUnit;3.6

- fc: two unit testing apps for jquery;xunit and qunit;3.1e

- todo: do test suite here page 300;3.1

EXTJS CODE EXAMPLE: Mimimum extjs4 application

added on May 16, 2012

JQUERY BOOK NOTES: Oreilly jQuery Cookbook (Nov 2009) | 4.8

added on May 16, 2012

JAVASCRIPT CODE EXAMPLE: JavaScript example of simple arrays and interating through arrays and object properties

added on May 16, 2012

JavaScript example of simple arrays and interating through arrays and object properties

Notice how to define multiple line variables with '\' at the end of the line.

index.htm

<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
    <style type="text/css">
      div#content {
        width: 300px;
        background-color: #eee;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
      }
      div.firstLine {
        padding: 0 0 5px 0;
      }
      div.line {
        padding: 0 0 5px 0;
        border-top: 1px solid #ccc;
      }
    </style>
  </head>
  <body>
    <div id="content"></div>

    <script type="text/javascript">

      //insert text in element
      var message = 'hello';
      displayIt('first line', 'firstLine');

      //simple arrays
      var names = [ 'jim', 'joe', 'john' ];
      displayIt('and the names are ' + names.join(', '));
      displayIt('the second name is ' + names[1] + ' and there are ' + names.length + ' names');

      //iteration
      displayIt('the names are listed here:');
      for(var i = 0; i <names.length; i++) {
        displayIt(names[i]);
      }

      //array object
      names_object = {
        0 : 'hal',
        1 : 'hank',
        2 : 'howard'
      }
      displayIt(names_object[1]);
      for(var key in names_object) {
        var obj = names_object[key];
        displayIt(key + '/' + obj);
      }

      function displayIt(text, className) {
        var text = arguments.length < 1 ? '(default text)' : text;
        var className = arguments.length < 2 ? 'line' : className;

        var elContent = document.getElementById('content');
        elContent.innerHTML += '<div class="'+className+'">' + text + '</div>';
      }
    </script>
  </body>
</html>

PHP BOOK NOTES: Smarty (2006) | 3.5

added on May 15, 2012

JAVASCRIPT BOOK NOTES: Packtpub ExtJS4 First Look (Jan 2012) | 3.9

added on May 15, 2012

DEVELOPER BOOK NOTES: Version Control for Web Developers (Mar 2012) | 3.8

added on May 7, 2012

Version Control for Web Developers (Mar 2012)

- chap1, wamp server 2, how to set up, windows, mac, uses mamp, mamp pro $59, also shows ubuntu;4.8

- chap2, explains version control, history sccs 72, rcs 82, branches, pvcs 85, cvs 1990, clearcase 92, vss 94, perforce, accurev, bitkeeper;2.6

- chap3, SVN, Git, Mercurial (current players), svn 2000, mercurial 2005, git 2005, talks about compiling, explains svn, windows, mac, xcode, also homebrew for mac, then ubuntu, gets svnX, then explains mercurial, how to compile it, sude make install clean, create new repository, explain mercurial: windows, mac, ubuntu, how git is different: git used to be hard on windows but not msysgit, on mac, ubuntu and compiling from source;4.9

- chap4, mentions ways of doing version control: dropbox, external drives, etc., ability to work on different machines, history, clients will want past versions, comments, merging, branching, bridging (between svn and git);3.8

- chap5, non command line options: tortoisesvn, much about it, revert, etc., Syncro SVN client, Versions (for Mac), blame, cornerstone, UNIX: RabbitVCS, then Mercurial: TortoiseHg, Hg Workbench, Mac: MacHg, SourceTree, Git GUI is not the best, windows, no automatic change detection, TortoiseGit, GitHub for Mac, tower, mentions stash

- chap6, version control not for all files, zovo.co not free, amazon cloud drive, also dropbox, sharepoint, magnet svn for office docs,

- try: zovo.co, cloud storage;2.7

- try: amazon cloud drive, free 5GB;4.8

- try: zumodrive.com;3.3

- lookup: pixelnovel, photoshop, adobe drive 3 ;3.8

- try: evolphin.com, version control for other files;3.9

- chap7, svn with notepad++, visual studio, textmate and svn, Coda, BBEdit on mac, neither eclipse nor aptana have version control by default, latest version of aptana comes with git support baked in, can install mercurial manually, netbeans, sublime text 2,

- lookup: Coda;3.1

- foray: setup SVN on Netbeans;4.4

- chap8, shows how to deal with conflicts in all three apps

- chap9, vi and nano on mac and linux, how to do everything on command line, good chapter, lots of detail; 4.6

- foray: setup ubuntu in virtual machine;4.9

- chap10,

- chap11,

- chap12,

- chap13,

- chap14,

- chap15,

JQUERY BOOK NOTES: jQuery Mobile Up and Running (Feb 2012) | 4.1

added on May 7, 2012