Sunday, February 22, 2015

Subjective and Objective Claims

Objective claim (empirical knowledge) is things out in the physical world that can be sensed or measured

Subjective claim is things that based on personal opinion, value, judgement and preferences.  These are claim that gives one purpose and meaning of life.

Knowledge

Knowledge is justified true belief:
(1) one believe it is the case
(2) with a basis or reason
(3) and it is in fact true

Belief + desire -> action

Knowledge does not equal to fact!

Bifurcation

Given a starting population with a certain reproduction rate and a death rate, we can predict (calculate) the population for specific generations.  If we plot the population by generation with a given birth rate, the trajectory will be linear in a straight line.

If we add an additional rule to confine the population by a carrying capacity, the trajectory changes to a point until it become impossible to predict.  In other words, a small variation in birth or death rate, the population for a specific generation will not be close together but may attain a very diverse value

The above can be modeled bu a logistic map formula.  We combine the birth rate with the death rate into a variable called R.  The carrying capacity is replaced by a variable called fraction of carrying capacity x. Logistic map is represented by the following formula: Xi+1    = R*Xi *(1-Xi )

(1) For a small value or R, e.g. 2, x will converge to a single value after a few generations.
(2) When R increases to a value of 3.1, the trajectory evolves to an oscillation of 2 values.  \
(3) As R increases further, the oscillation changes to among 4, 8 values etc.
(4) The spread of oscillation increases rapider and rapider as R picks up gradually.
(5) When R reaches about 3.569946, the trajectory becomes chaotic.  Even a small difference in the value of x (e.g. at the 10 decimal point) will produce a completely different trajectory.  In other words, the trend becomes unpredictable.

Because of this property, the logistic map is used as an algorithm to generate pseudo-random number.

Among the chaos, there are 2 universal characteristics observed:
(1) The trajectories follow a period-doubling (bifurcation) route to chaos. From a single value to 2, to 4, to 8 etc.
(2) As R increases, their bifurcation points move closer and closer. The rate of convergence is found to be a constant value of 4.6692016. This is called the Feigenbaum constant.

JavaScript functions and methods

Both do similar things.  Method is a different way to organize code.

JavaScript Anonymous Functions

Functions that are declared as they run and with no name.  For example,

(function () { ... });

One purpose of using anonymous function is to create a scope for local variables.

JSON (JavaScript Object Notation)

JSON is a format for representing data.

{
"plane" : [
"economy",
"business",
"first"
]
}

Rendering Engine in Browsers

The rendering engine creates the page appearance in browser.  There are a few rendering engines currently used in the market:

Firefox - Gecko
IE - Trident
Chrome, Safari, IOS and Android - Webkit
Opera - Presto

Types of JavaScript

(!) Inline JavaScript

about

(2) Embedded JavaScript



(3) External JavaScript

Specifying CSS in HTML

(1) Inline CSS refers to the use of style attribute in the HTML.  Inline CSS clauses are commonly generated by program logic such as JavaScript.  An example of inline CSS as follow,


">
(2) CSS can also be link to using a special HTML statement

abc

Saturday, February 21, 2015

HMTL5 Sections

Older HTML uses division
to structure the web pages into different sections.  HTML5 introduces new element such as
,

Friday, February 20, 2015

JavaScript Event Handler

Event handler allows specified Javascript function to be called when an event such as mouse click, happens.  Event handler must be hung onto a DOM tree.  For example,

var button = document.geElementById("submitbutton");
button.onclick = function() {...};

Event handler always starts with "on-something".  Each element can only has 1 event handler attached to it.  If you need to have 2 event handlers, for instance to validate the form and submit to server, you need to use event listener instead.

Changing structure of HTML

JavaScript provide calls to add and remove node from a HTML DOM.

createElement()
createTextNode()
appendChild()
removeChild()

For example,

var tagid = document.getElementById("about");  /*position to the tag*/
var p = document.createElement("p"); /*create a new element but not hang to the DOM tree yet*/
var textblk = p.creatTextNode("This is a newly created text block"); /*wrap it under a text node*/
tagid.appendChild(textblk); /*hang to the DOM tree*/

Once you have position to a node, you can use these calls to move around the position:

parentNode
previousSibling
nextSibling
firstChild
lastChild

For example,

document.getElementById("about").parentNode.setAttribute("class")

DOM Text Node

Text node refers to the text content under a tag.  JavaScript provide calls to manipulate the text block in HTML

document.getElementById("text-serction-id"),innerHTML = "new text here"

DOM Attribute Node

Attributes exists in HTML tag.  For example, class attribute in below tag

/local/small.jpg/' id=

JavaScript has the following call to manipulate the attribute in a specific tag.

hasAttribute() tests if the attribute exists in the tag
getAttribute() retrieve the value of the attribute such as "show" above
setAttribute() set a value to the attribute
removeAttribute() remove the attribute from the tag

For example,

document.getElementById("pic").getAttribute("class")

Prisoner's Dilemma

Two prisons accused on a crime are kept in separate confinement.  If A testifies against B and B keep silent, B would get a life sentence and vice versa.  If both testify against each other, both would get 10 years of imprisonment.  If both keep quiet silent, both would be charged with a lesser crime and get 5 years of imprisonment.  What would you do?

The prisoner's dilemma was postulated in 1950s during cold war to study how to achieve international cooperation.  Traditionally, most people believe one can only achieve cooperation unless there is a central effective governing bodies.  That is the backdrop of UN.  The prisoner's dilemma is to study how to cultivate cooperation without that.

Most people tend to choose defection (testify against).  However, if the game is play multiple rounds. the behavior will be affected by past result.  Different algorithms are used to simulate the game play for the best result.  And the best algorithm is called TIT for TAT.  In other words, the player will go for cooperation but if the other party defects, the player will defect to punish the other parties until the other parties cooperate again.  A good algorithm generally is nice and forgiving but also retaliatory - punish an opponent immediately.

One extension to the game is to add social norm.  Each player has a specific value of defect (boldness) and probability to punish a defective (vengefulness).  When a player defect and is witnessed by some other players, he may be punished.  If the vengefulness value is low (no social norm), defection will dominate tje community.  However, vengefulness is not sufficient to maintain cooperation reliably.  Adding punisher to punish player that does not punish defector will on the other hand promote cooperation.  The punisher is playing the role of metanorm.  For example, people giving leering look to parents that does not control their children.

Another extension is to add spatial consideration in the game.  Each player (in a grid) only interact with players around it.  Simulation found that cooperation and defect exist indefinitely without the need for norm or metanorm.

Thursday, February 19, 2015

DOM Element Nodes

By tagging an element node with an id, we can search directly to the specific node in the DOM tree via JavaScript functions:

document.getElementById("header") will position the access to


To access a particular type of element, use documnet.getElementByByTagName.  For example, to access the first paragraph in the document,

document.getElementByTagName("p")

The function returns a Nodelist.  To find out how many elements in the Nodelist:

document.getElementByTagName("p").length

Jump access over the list elements:

document.getElementByTagName.item(0) or document.getElementByTagName[0] for the first element item in the list.

Element can also be access via the CSS class name using getElementByClassName()

For example


DOM

HTML document is organized into a DOM (Document Object Model) tree.  This allows the HTML document to be manipulated programmatically.

A DOM tree consists of the following node types:

document node - the root of the tree
element nodes - HTML elements such as , , etc</p> <p> text nodes - the textual content of an element, for example the text between the <p> tags of <p> text node</p> </p> <p> attribute node - non-displayable attributes</p> <p> <br></p> <p> Both text nodes and attribute nodes are end or leaf nodes which no children.  They are also accessed using different methods in JavaScript.</p> <p> <br></p> <p> <br></p> <p> <br></p> <p> <br></p>

Sunday, February 8, 2015

Perfect Fifth and Forth

A perfect fifth is 7 semitones from the root note.   A perfect forth is 5 semitones from the root note.  If we inverted the perfect forth (i.e. lower it one octave and drops it below the root note), the perfect forth and the root note will form a perfect fifth interval.  Likewise if we invert the perfect fifth, we will get a perfect forth interval with the root note.

Therefore, the 3 notes have very strong relationship.

Progressive Enhancement and Graceful Degradation for Web Frontend Design

Web frontend refer to the webpages delivered to web browser.  Web frontend is typically rendered with a mixture of HTML, CSS and Javascript.  Progress enhancement is a concept to functionally separating the frontend into 3 layers.

Layer 1 defines the structure of the web pages .  This is achieved by using HTML.  The web page content is organized into different divisions or frames.  The areas can be tagged with an id.

Layer 2 defines the presentation layer.  Using CSS, the content of the web pages can be rendered according to the design.

Layer 3 defines the behaviour layer.  User interaction is enhanced using Javascipt.

A key point on the progressive enhancement design is to allow graceful degradation.  This means the user experience can degrades gracefully from higher layer to lower layer if the user platform does not support the upper layer feature used such as Javascript is disabled.  A web frontend designed with graceful degradation in mind will ensure the web pages can still be used by user meaningfully without the upper layer.