Tune PHP to the Max | PHP | Android | JavaScript | HTML5

Friday, December 19, 2014

Assasins Creed: Pirates HTML5/JS/WebGL demo

Another demo that caught my eye is Assasins Creed: Pirates Demo made by the IE engineering team, with HTML5, JavaScript, WebGL and more specifically Babylon.js Here is a web page that explains how to start working with Babylon.js and create 3D virtual worlds in a browser.

I played the demo several times in Firefox 34 and I can say it looks fantastic coupled with nice pirate music. There are nine weather conditions between you can choose to play, and each has its own specifics, like day or night, rainy or sunny etc... Use A, D to keys to turn the ship left or right and W, S to speed up or slow down. Use V to switch camera from third person view to first person view and vice versa. Use mouse to rotate the camera around the ship.

Note: To enable and use these new browser technologies you must have IE11 and Windows 7 Service Pack 1 or other advanced browser like Google Chrome, Opera and Firefox. Safari 5.1.7 does not support WebGL.

More info here: https://www.modern.ie/en-us/demos/assassinscreedpirates
Other IE demos: http://ie.microsoft.com/testdrive/Default.html
Babylon.js Challenge: http://www.babylonjs.com/cyos/acpr/#OKULH#1

Assasins Creed: Pirates Demo

Intro Comic

Controls

WebGL lighting effect

Beautiful environment

I have won the game

First person view. Beautiful foggy effect

Moon shines

Rotate the camera with the mouse

Tuesday, December 16, 2014

List of JavaScript libraries

How many JavaScript libraries can you think of? :D http://en.wikipedia.org/wiki/List_of_JavaScript_libraries

Angular.js Web Apps
Backbone.js
Ext.js Web Apps
Jquery.js
Ember.js Web Apps
Express.js
Node.js Server side JavaScript
React.js
Underscore.js
Box2d.js
yui.js
SWFObject.js
Three.js 3D in Browser/WebGL
Modernizr.js
Jasmine.js
Dojo.js
Midori.js
Prototype.js
Create.js
PDF.js Decode PDF files in Browser with JavaScript
Spry Framework
Babylon.js 3D in Browser/WebGL
Gamepad.js
Mobify.js
Phantom.js
hapi.js
chai.js
thaw.js
parallax.js
cannon.js
kinetic.js
sprite.js
zepto.js
GSAP.js
Agile Toolkit
ScrollReveal.js
Superscrollorama.js
Sly.js
Transit.js
Slidr.js
physics.js
Matter.js
Box2Dweb Flash like 2D Physics engine in browser
ClickStream.js
Durandal.js

Useful links:

http://kangax.github.io/compat-table/es5/
http://blog.rodneyrehm.de/archives/27-Dialog-for-Unsupported-Browsers.html
https://github.com/es-shims/es5-shim
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode
http://www.sitepoint.com/ie11-developer-tools/
http://www.amazon.com/Pro-Internet-Explorer-Development-Applications/dp/1430228539
http://msdn.microsoft.com/en-us/library/ie/hh673549%28v=vs.85%29.aspx
http://msdn.microsoft.com/en-us/library/ie/bg182636%28v=vs.85%29.aspx
http://www.vcaa.vic.edu.au/Documents/vass/Windows7-IE10.pdf
http://code.tutsplus.com/tutorials/documenting-javascript-with-yuidoc--net-25324

Links for testing web apps on different browsers and mobile devices:

http://www.sitepoint.com/building-the-best-browser-test-suite/
http://blogs.adobe.com/browserlab/2013/03/13/browserlab-is-shutting-down-on-march-13-2013/
http://browsershots.org/
https://github.com/yui/yui3/wiki/Graded-Browser-Support
http://www.browserstack.com/start?cbsid=browserlab
http://saucelabs.com/
http://sauceio.com/index.php/2013/03/sauce-labs-welcomes-adobe-browserlab-customers/
https://creative.adobe.com/products/inspect
https://www.blackbaud.com/files/support/guides/infinitydevguide/content/webshell/webshelagradebrowsers.htm
https://spoon.net/browsers/
http://www.my-debugbar.com/wiki/IETester/HomePage

Sunday, December 14, 2014

Cube Slam

Nice demonstration of available technologies that exist in todays browsers. It is a game called Cube Slam. Technologies used in this game are: WebRTC, Web/HTML5 Audio API, WebGL and CSS3, Google Cloud Platform.

"If you play Cube Slam on Chrome or Firefox, you’ll see real-time 3D rendering enabled by WebGL and three.js. If you don’t have WebGL, you can still play Cube Slam in 3D thanks to CSS3, with the same game engine running under the hood. All the graphics run on your GPU, freeing the CPU for other tasks."

"Cube Slam is built entirely on Google Cloud Platform. The app is hosted on Google App Engine with a backend written in Go, and the Channel API is used to set up the connection with your opponent. If one of the players is behind a firewall, the game uses a STUN/TURN server hosted on Google Compute Engine to exchange data. PageSpeed helps things load quickly, and AppCache lets you play offline."

The game is not complete as you can play until level 4, right at the moment when it gets interesting :)
Also I reccomend closing other tabs that might download data, because it might break the connection oppened for the game. It happened on Firefox several times.
It also worked on Safari 5.1.7 without using WebGL but with CSS 3 3D alike tricks

For more info on the details check this link https://www.cubeslam.com/tech

Level 1

Breaking an object that holds a video area

Beautiful effect of blurring the window when you loose

Cube Slam - Main menu

The game is working with CSS3 instead of WebGL in Safari 5.1.7

Thursday, December 11, 2014

HTML5 Audio API

Several years ago this wasn't really possible without Flash. A fully functional sound spectrum visualizer player made fully in HTML5 and JavaScript/WebGL

3D audio spectrum visualizer

A web based piano made with HTML5/JavaScript. Well done!


HTML5/JavaScript piano

Old timer russian radio replica made with HTML5 and JavaScript

Old timer russian radio device replica.

Meow Peow player in a browser

Fully functional MP3 player in a browser.

Face Detection/Analytics with HTML5 video tag

Face Detection/Analytics with HTML5 Video from Daniel Goodwin (@dsg) on Vimeo.

https://developer.mozilla.org/en-US/demos/detail/facial-recognition-and-analytics-with-html5s-video/launch

Monday, December 8, 2014

Canvas Mark 2013 - test your browser performance

Check out this nice tool that tests your browser performance: Canvas Mark 2013
Github Source

Tests the HTML5 <canvas> rendering performance for commonly used operations in HTML5 games: bitmaps, vectors, shapes, text, shadow, alpha blending, pixel blur, Math, canvas shapes, polygon fills, image transformations, getImageData, putImageData.

So the tests should be made on the five most popular browsers: Firefox, Chrome, Opera, IE9/IE10, and Safari. You can run them one by one, closing all other applications that might drain CPU/GPU processing power. Also you should run these test on the same machine as running them on different machines will produce different results. The browser window should not be minimised.

I couldn't find a flag called GPU VSync in chrome://flags (Chrome 40) so I couldn't disable it. Apart from that, all other GPU related flags were disabled except One-copy-rasterizer.

I am using Firefox 34, Opera 26.0, Chrome 40, IE9 and Safari 5.1.7 on Windows 7.
Also I am using middle class Asus laptop. Ask me for more hardware details (not sure if I should share this information).

Note: not sure why but the tool detects that Opera 26.0 is actually Chrome 39. I have tested other similar tools and they also say that Opera 26.0 is Chrome 39. Perhaps it is something with the engine of Opera.

Note: running the test twice in the same browser without refresh uncovers a bug, so the second run might go until the blur image test and stop there. Therefore I recommend closing and opening the browser after each test.

The results from my testing are:

Safari 5.1.7 with 7034
Chrome 40 with 6072
Opera 26 with 5787
Firefox 34 with 4790
Internet Explorer 9 with 4504

Canvas Mark 2013

Tower Diffence web game

Turns out you can build fully featured HTML5/JavaScript games.
Check this demo of a Tower Diffence web game. Made with WebGL and three.js

Browsers: Firefox 34, Chrome 40, Opera 26.0, Internet Explorer 9 and Safari 5.1.7

On Opera, Firefox and Chrome it worked perfectly, while on IE9 and Safari it just displayed white area where the game should happen. I finsihed the game and on Opera and Firefox it used about 40% of the processor power while on Chrome it had two processes that worked hard, on 30% and on 40%. Not sure why? Maybe Chrome works that way.

The game is not a proper test for HTML5 audio API since it doesn't have a single sound effect or music.

IE 9


Safari 5.1.7

Opera 26.0

Chrome 40

Two working processes for Chrome

Utilizing WebGL and three.js

Last wave finished on Chrome 40

about

Account Slider

Account slider. I cannot recall making a sliding accordion before, without using Flash. This is made with HTML5/JavaScript. Well done!

Browsers: Firefox 34, Chrome 40, Opera 26.0, Internet Explorer 9 and Safari 5.1.7

On Opera/Firefox/Chrome works perfectly. On Safari works but it is a bit sluggish. On IE9 it shows a bulleted list instead of accordion.

Geometric Photo Filter - Web browser application

Fantastic web browser application Geometric Photo Filter by http://zd3n.com http://satori.sk
I run this application in Opera 26.0 on my Asus middle class laptop. It was run on 100 steps per frame and it performs well, not overloading the processor. Give it a day maybe it will redraw the complete image.

You can run this application on Firefox, Chrome and Opera perfectly. I have Firefox 34, Chrome 40, and Opera 26.0 I also tried on Safari 5.1.7 and Internet Explorer 9. Turns out they do not support File API and Filereader.

Safari 5.1.7

IE 9

Wednesday, December 3, 2014

HTML 5 3D, 2D canvas demos

Wednesday, November 19, 2014

JavaScript notes - Part 2

This post is in continuation of this one http://tunephp.blogspot.com/2014/11/javascript-notes-part-1.html. It will contain notes about JavaScript Inheritance, Arrays, Regular Expressions, Style, Beautiful Features, Awful parts and Bad Parts.

Inheritance

JavaScript being a loosely typed never casts. What matters about object is what it can do, not what it is descended from.
Every function gets a prototype object because the language does not provide a way of determining which functions are intended to be used as constructors. The constructor property is not useful, it is the prototype object that is important.
If all of the state of an object is private then the object is tamper-proof. Properties in the object can be replaced or deleted, but the integrity of the object is not compromised.
If we create object in functional style and all of the methods of the object make no use of "this" or "that" then the object is durable. A durable object is simply a collection of functions that act as capabilities. A durable object cannot be compromised.

Arrays

JavaScript has an object that has some array like characteristics. It converts array subscripts into string that are used to make properties. It is significantly slower than a real array.
Arrays have useful set of built in methods than objects.
Arrays in JS can contain any mixture of values. example: var myArray = ['', 0, undefined, "hello", null, {'key': 'value'}, [0, 1, 2, 3]];
Every array has a length property and length is not an upped bound. If you store an element with a subscript that is greater than or equal to the current length the length will increase to contain the new element. There is no array bounds error.
The length is the largest property name in the array plus one, but not necessarily the number of properties in the array. example: var myArray = []; myArray[1000000] = true; myArray.length = 1000001; // myArray contains one property
The length can be set explicitly. Making then length larger does not allocate more space for the array. Making the length smaller will cause all properties with a subscript that is greater than or equal to the new length to be deleted. A better way to add new element is to use push() function.
Arrays are objects so the delete word can be used to delete element in an array. That leaves a hole but you can use splice() method to cleanly remove it from an array or to replace it with new one.
Since arrays are objects "for in" statement can be used to iterate over the elements. The order is not necessarily incremental, so properties from the prototype chain can be dredged up. Use "for" statement instead if the order is important.
Common rule when property names are small sequential integers is to use array, otherwise use object.
JavaScript cannot differentiate between arrays and objects since arrays are objects. Also we can add custom functions to Array.prototype
It is not useful to use Object.create() on arrays since it creates object but not array. It will not have the length property or other functions that have arrays.
You can use Array.prototype.slice() method to create shallow copy of a portion of an array into a new array object. example: var myNewArray = myOldArray; myNewArray is not new object containing the same values from myOldArray, it is just a reference to the same myOldArray in memory. That means, changes to myNewArray affect myOldArray. To create new array object with the same values of myOldArray use this command: var myNewArray = myOldArray.slice(0);

Regular Expressions

Many JS features were borrowed from other languages. The syntax is from Java, functions from Scheme, prototypal inheritance from Self. JS regular expressions were borrowed form Perl.
Regular expressions have significant performance advantage over equivalent string operations in JavaScript.

Style

If a program is able to clearly communicate its structure and its characteristics it is less likely to break when it is modified in the never too distant future.
JS code is often sent directly the the public. It should always be of publication quality.
Put spaces around all infix operators except for dot (.) and square bracket ([) because they have higher precedence.
Put space after every comma and colon.
Put at most one statement per line. If statement doesn't fit in one line break it after comma or binary operator.
Always use blocks {} with structured statements like while and if because it is less error prone.
With JS you should always use Kernighan and Ritchie style, putting the { at the end of a line instead of the front because it avoids a horrible design blunder in JS's return statement.
Declare all variables at the top of each function. JS doesn't have a block scope but it has a function scope.
Never allow switch cases to fall trough to the next case.
Use single global variable to contain one application or library. Every object has its own name-space. Use of closure provides information hiding increasing the strength of your modules.

Beautiful Features

JS good stuff includes: functions as first class objects, dynamic objects with prototypal inheritance, object literals and array literals.
Features have a specification cost, a design cost and a development cost. There is a testing cost and a reliability cost. The more features there are the more likely one will develop problems or will interact badly with another.
In software systems there is a storage cost which become negligible but in mobile is becoming significant again. (Ascending performance cost because Moor's Law doesn't apply to batteries). Features have documentation cost which increases training cost.

Awful Parts

A global variable is a variable that is visible in every scope. Because global variables can be changed by any part of the program at any time they can complicate the behaviour of the program. Use of global variables degrades the reliability of the programs that use them.
JS requires global variables. JS doesn't have a linker. All compilation units are loaded into a common global object.
Always use var keyword before declaring a variable. It links the new variable with the global "this" if var is not present.
Always out { after return since JS will try to add semi colon after return which can produce bugs. There is no warning, return will return undefined value.
If you have a need to name properties or objects using reserved words use quotes or brackets {} like this object = {case: value}
JS characters are 16-bit wide. Today Unicode contains characters that can be 32-bit wide. JS considers them as two distinct characters.
typeof null returns 'object'. A better check is my_value === null. null is falsy, all objects are truthy.
typeof /a/ returns 'object' or maybe 'function', it should return 'regexp' but it doesn't.
Always provide parseInt() with radix parameter. example: parseInt("08", 10); It stops when it sees nondigit so parseInt("16") and parseInt("16 tons") produce the same result 16.
The plus (+) operator can concatenate and can add numbers. If you plan to add numbers make sure both operands are numbers.
0.1 + 0.2 is not equal to 0.3. This is a consequence to having adopted the IEEE Standard for binary floating point arithmetic (IEEE 754). Fortunately integer arithmetic in floating point is exact, so decimal errors can be avoided by scaling.
NaN is a special quantity defined by IEEE 754. It stands for Not a Number. If NaN is operand in arithmetic operation than NaN will be the result. NaN === NaN returns false while NaN !== NaN returns true.
JS does not have real arrays. There is no need to give them a dimension and they never generate out of bound errors. But their performance can be considerably worse than real arrays. The typeof operator thinks that arrays are objects.
The arguments array is not an array. It is an object with length property and it lacks the array specific methods.
undefined and NaN are not constants. They are global variables and you can change their values. That should not be possible, yet it is. Don't do it. :D
hasOwnProperty() of Object.prototype is a function and it can be replaced with different function or with value that is not a function. Don't do it :D

Bad Parts

Don't use == and !=, use === and !== instead. == and != do a type coercion while === and !== do check the type of operands but don't do type coercion.
"with" statement was intended to provide shorthand when accessing properties of an object. Its results can be unpredictable so avoid it.
eval is evil, don't use it.
Don't use continue
Never leave a fall trough in switch statement.
Avoid using ++ and --, use += and -= instead.
JS is rarely used for bit manipulation. Bitwise operators are far from the hardware and their result is processed slower than in other languages.
Avoid using "new Object" and "new Array", use {} and [] instead. Don't use "new Boolean", "new Number" and "new String"
Avoid using "new" keyword. If you forget to create new object with "new" keyword, the new object will be bound to the global name-space, which is bad.
Avoid using void keyword.

Friday, November 14, 2014

"JavaScript: The Good Parts" - book review

In this post I'll explain my thoughts on "JavaScript: The Good Parts" written by Douglas Crockford. It is fairly old book written in 2008 but still does the good job of teaching you what to use and what not to use from JavaScript. As the author says, this book has lot of information packed in about 150 pages, which means you have to read at least twice each chapter. Yes I passed each chapter twice and also spent some time writing the code from the book in Firefox/Firebug just to see how it goes. I think more examples to practice would be much better for the book as it lacks them. But in the end you would certainly need to read another book to learn how to code proper JavaScript modules, patterns, etc... I am planning to read another book because this one is not enough to get you going with JS. My recomendation for next book would be this one: "JavaScript Patterns" - by Stoyan Stefanov, it has about 240 pages which is enough.

The book is structured in 10 chapters and with 5 appendices, A-E. My suggestion is to read all chapters includding the appendices. Appendix D is just the railway diagrams, so you may skip it.
Chapters:

Good Parts. This chapter contains basic info about JS and how to set up testing ground for other code examples in the book. Don't skip it.
Grammar. Contains basic information about reserved keywords in JS, data types, expressions, functions etc...
Objects. Explain how to work with Objects in JavaScript, how to create new object, how to retrieve infrormation from object, object prototype, reflection, enumeration, delete operator, etc...
Functions. Dives into JavaScript function basics. How to create new function, how to invoke a function, this and arguments objects of a function, its connection with objects. Each function is an object so you can add a function to its prototype. Function scope, closure, function modules, cascade (builder pattern), curry and memoization.
Ineritance. Inheritance types, implementing standard OOP in JS (pseudoclassical) inheritance, prototypal and functional inheritance. Very important chapter, don't skip it.
Arrays. Array basics, length property, useful array methods, delete operator, enumeration, etc...
Regular Expressions. Dives into JS regular expressions, what are they and how to use them. Couple of basic rules how do RE work. Very useful thing, especially when processing strings.
Methods. This chapter explains implemented methods that come with JavaScript itself. You may want to skip this chapter but it would be helpful if you read it.
Style. This chapter explains some techniques how to write error prone JavaScrtipt code. My suggestion is to not skip this chapter.
Beautiful features. Read this chapter to learn what are the best parts of JavaScript that you should use. Functions as a first class object, Dynamic objects with prototypal inheritance and Object litrals and array literals.
Appendix A. Awful Parts. Explains all of the worse parts in JS and how to avoid them.Global variables, scope, semicolon insertion, reserved words, unicode, typeof operator, parseInt function, + operator, floating point, NaN, phony arrays, falsy values, hasOwnProperty function and Object.
Appendix B. Bad parts. Things you can live with but still should avoid. == vs === operators, with statement, eval function, continue statement, switch fall trough, block-less statements, ++ and -- operators vs += and -= operators, bitwise operators, function statement vs function expression, typed wrappers, new operator, void keyword.
Appendix C. JSLint. An online tool build by Douglas himself. Use it whenever possible to debug your JS code. You may find this tool also useful, http://jsbeautifier.org/
Appendix D. Syntax Diagrams. If you are beginner at programming, these railway diagrams will help you get going.
Appendix E. JSON. Explains what is JSON, JSON syntax, how to use it securely and a complete script of JSON parser in JavaScript.

I think this book is not recommended for beginner programmers, but it is good if you are learning JavaScript. Still it lacks more code examples and practices, so you have to read another JS book. My opinion of this book is 4.5/5. It does the job for what is meant to do, aka teaching you pros and cons of JavaScript and how to use or avoid them. You must read this book if plan to code JS programs in future.

Tuesday, November 4, 2014

JavaScript notes - part 1

Hello. In this post I will share some notes I made while reading this book JavaScript: The Good Parts by Douglas Crockford. So it is nothing new or special, this post will serve simply to cover the most important properties of JavaScript. The notes are taken, copied or modified from the book itself. I didn't write them, Douglas did. :)

For part two visit this link: http://tunephp.blogspot.com/2014/11/javascript-notes-part-2.html

Good Parts

I can be a better programmer by using only the good parts of a language and avoiding the bad parts.
The API of the browser, Document Object Model (DOM) is quite awful and JavaScript is unfailry blamed.
JavaScript is a language with enromous expressive power. It is even better when you know what you are doing.
Very good ideas on which JS is build upon are: functions, loose typing, dynamic objects, and an expressive object literal notation. Bad ideas include global variables.
JavaScript has more in common with Lisp and Scheme than with Java. It is List in C - clothing.
JS compilers are unable to detect type errors because JS is loosely typed.
Objects can be created by listing their components (inspired by object literal notation mainly for the creation of the JSON format).
JS has class free object system in which objects inherit properties directly from other objects (prototypal inheritance).
Implementing classical design patterns in JS can be frustrating but using prototypal inheritance can be rewarding.
JS depends on global variables for linkage. All top level vars are tossed together in a common namespace called global object.

Grammar

JS supports two types of comments, block comments made by /* .. */ charaters and line - ending comment made by two forward slashes // . Comments should be updated and should always describe accurately what the code does. Obsolete comments are worse than no comments.
Block comments should be avoided as it is unsafe to comment out a block of code. Use line ending comments instead.
The list of reserved words should include theese: undefined, NaN and Infinity but unfortunately it doesn't have them. It is not permited to use reserved word as a name of a variable. Be careful with the three mentioned above.
JS has a single number type. Internally it is represented as a 64 bit floating point number, same as Java's double number type. There is no separate number type, 1 and 1.0 are the same thing.
1e2 = 100 = 1 * 10 ^ 2
NaN is a number value produced as result of operation that cannot produce normal result. NaN is not equal to any value including itself. You can detect a NaN value with isNaN(value) function, or you can use isFinite(value) function which returns false if the value is +Infinity, -Infinity, or NaN (Not-a-Number), otherwise it returns true.
Infinity represents all values greater than 1.7976931348623157E+10308
Numbers have methods. JS has Math object that contain set of methods to work on numbers.
A string literal can be wrapped in single or in double quote. (\) backslash is the escape character.
All characters in JS are of 16 bit character set (JS was built when Unicode was 16 bit). There is not character type. Today Unicode has more than 65536 different characters represented by 32 bits. Be aware that JavaScript decodes them as two characters instead of single one.
The \u convention allows specifying characters numerically. "A" === "\u0041";
Strings have length property. A string is immutable constant. Once set a new value you cannot change it. However new strings can be made by concatenating two separate strings with + sign.
Unlike many other languages blocks of code surrounded by curly braces {} do not create a new scope, so new variables should be defined at the top of the function, not in blocks.
Falsy values in JS are: false, null, undefined, the empty string '', the number 0, the number NaN. All other values including true, the string 'false' and all objects are truthy.
Use object.hasOwnProperty(variable) function to determine whether the property name is truly a member of the object or was found instead on the prototype chain.
The = operator is used for assignment. Do not confuse it with equality operator ===.

Objects

The simple types of JS include numbers, strings, booleans, null and undefined. All other values are objects.
Numbers, strings and booleans are object like and they have methods but they are immutable.
Objects in JS are mutable nested collections of properties. In JavaScript arrays are objects, functions are objects, regular expressions are objects and of course objects are objects.
Objects in JS are class free. Objects can contain objects.
JS includes prototype linkage, which allows object to inherit properties from another objects. When properly used prototype linkage can reduce object initialization time and memory consumption.
The quotes around a property's name in an object literal are optional if the name would be legal and not a reserved word. Quotes around "first-name" are required but optional around first-name.
If a string expression is a constant and a legal JS name and not a reserved word than the dot ( . ) notation can be used instead.
Attempting to retrieve undefined values from object will throw a TypeError exception.
If there is already a property with given name in an object, new value will just replace the old value. If the propery does't exist the object is augmented with new property.
Objects are passed around by reference, they are never copied.
Every object is linked to a prototype object from which it can inherit properties. All objects created from object literal are linked to Object.prototype.
The hasOwnProperty() method does not look at the prototype chain of an object.
The "for in" statement can loop over all of the property names in an object. It will include functions and prototype properties as well. The order of the properties/functions listed using "for in" is not necessarily incremental. If the order is important use "for" statement instead. "for" does not cover the prototype properties.
delete operator can be used to remove a property from an object. It will not touch any of the objects in the prototype linkage. So removing a property from object may uncover a property from the prototype object with the same name.
Avoid using global variables. Better create your own application namespace by creating your own global variable in which all your application structure will reside so that it will not interfere with objects/properties from other applications in the global namespace.

Functions

Functions are the best part in JavaScript. They are commonly used for code reuse, information hiding and composition. Functions in JS are objects linked with Function.prototype which is linked to Object.prototype
Functions can be stored in variables, objects, arrays. Functions can be passed as arguments to function and functions can be returned from functions. Also since functions are objects they can have methods too. Unlike other objects in JS, functions can be invoked.
Function literal has 4 parts. The first is the word "function". The second optional is the name of a function (used by debbugers to identify a function). Function without a name is called anonymous function. The third part is a set of parameters wrapped in braces (). The fourth part is a set of statements wrapped in curly braces {} (The body of a function).
In addtion to the list of parameters in braces (), each function gets two additional params: this and arguments.
There are four patterns of invoaction in JS: method invocation, function invocation, constructor invocation and apply invocation (the patterns differ in how the bonus parameter "this" is initialized).
There is no runtime error when the number of arguments and the number of parameters do not match. If there are too many argument values, the extra args are ignored. If there are too few arguments, the missing ones will be substituted with undefined. There is no type checking on the argument values, any type of value can be passed to any parameter.
When a function is invoked with function invocation pattern, it is bound to the global object. If the language would have been designed correctly, the function would be bound to "this" of the outer function. A consequence of this error is that a method cannot employ an inner function to help it do its work because the inner function does not share the method's access to the object as its "this" is bound to the wrong value.
If a function is invoked with the new prefix, then a new object will be created with a hidden link to the value of the function's prototype member and "this" will be bound to that new object.
Functions that are intended to be used with the new prefix are called contrustors. By convention they are kept in variables with a capitalized name. If a contructor is called without the new prefix very bad things can happen without a compile time or runtime warning, so the capitalization convention is really important. The best way to cope with this is to not use new prefix at all.
arugments array gives the function all the arguments that were supplied with the invocation, including excess arguments that were not assigned to parameters.
Because of design error, arguments is not really an array. It is an array-like object. It has the length property but it lacks array methods.
A function always returns a value. If the return value is not specified then undefined is returned.
If the function was invoked with the new prefix and the return value is not an object then "this" (the new object) is returned instead.
A try statement has a single catch block that will catch all exceptions. If your handling depends on the type of the exception, then the exception handler will have to inspect the name to determine the type of the exception.
Unfotunatelly JS does not currently provide tail recursion optimization.
JavaScript doesn't have a block scope but it has function scope. That means all variables should be declared as soon as possible or at the top of the function body.
The good thing about scope is that inner functions get access to the parameters and variables of the functions they are defined within (exception are "this" and arguments object). This is called Closure.
A module is a function or object that represents an interface but that hides its state and implementation.
By using functions to produce modules, we can completely eliminate our use of global variables thereby mitigating one of the worst JS features.
Use of module pattern can eliminate the use of global variables.
JavaScript does not have a Curry method.
Function can use objects to remember the results of previous operations making it possible to avoid unnecessary work. This optimization is called memoization.
By devising functions that produce other functions, we can significantly reduce the amout of work we have to do.

Friday, October 10, 2014

Screen Capture tutorial with FFMPEG on Windows

Beautiful tutorial video.
Links:
https://trac.ffmpeg.org/wiki/Capture/Desktop
http://antumdeluge.wordpress.com/2014/02/19/recording-screen-windows-desktop-using-ffmpeg/

Sunday, September 14, 2014

SQLite 3.7.9 notes

In this post I will share my thoughts about SQLite database engine. You can search the net for tutorials and info and it seems lot of sites copy most of the documentation from the original site, so therefore in this post there will be my experiences with it.

You cannot output create statements with ".schema" command on attached database. It is only possible on the main and temp databases. So therefore you have to exit sqlite prompt and then enter it again using a line: "sqlite3 your-db-name.db" so that your database is now the main database.
You cannot use ALTER sql command to change a column in a table. It is only possible to rename a table and to add new column to an existing table. DROP COLUMN and ADD CONSTRAINT sql commands are also not supported.

RIGHT OUTER JOIN and FULL OUTER JOIN are not supported. Only LEFT OUTER JOIN is implemented.
SQLite database is CASE SENSITIVE. For example GLOB and glob have different meaning in SQLite statements.
The data type of a value is associated with the value itself, not with its container. Each value stored in SQlite database has its "Storage class": NULL, INTEGER, REAL, TEXT, BLOB.
SQLite, technically, has no data types, there are storage classes in a manifest typing system. Everything, internally, is stored as text.
SQLite supports the concept of type affinity on columns. Type affinities: TEXT, NUMERIC, INTEGER, REAL, NONE.
Comments can be added with double hyphen "--" in front of a line of text or using C-like comment blocks with /* some text here */
Dot commands should not be terminated with semicolon (;)
Autoincrement keyword can be applied to a column only if that column is of type INTEGER
Any column in an SQLite version 3 database, except an INTEGER PRIMARY KEY column, may be used to store a value of any storage class.
SQLite does not have a separate Boolean storage class. Instead, Boolean values are stored as integers 0 (false) and 1 (true).
The type affinity of a column is the recommended type for data stored in that column. The important idea here is that the type is recommended, not required.
Sorting of data types is achieved like this: (NULL < NULL or NULL < any other type), (INTEGER or REAL) < (TEXT or BLOB), (between INTEGER and REAL types a numerical comparison is used), (TEXT < BLOB), (between TEXT values a collating sequence is used), between two BLOBs a memcmp() function is used
Use this SQL construct to insert multiple rows into a table in one go: INSERT INTO 'tablename' ('column1', 'column2') SELECT 'data1' AS 'column1', 'data2' AS 'column2' UNION SELECT 'data3', 'data4' UNION SELECT 'data5', 'data6' UNION SELECT 'data7', 'data8';
Use ".header on", ".mode column" and ".width" dot commands to refine the output of the queries.
Use this command: select sql from sqlite_master where type='table' and tbl_name='table_name'; to select schema of the specified table. Much like ".schema" command shows create statements for the whole database, this shows only give table.
sqlite_master table contains 5 columns named in order: type, name, tbl_name, rootpage and sql
GLOB is a logical operator used to compare value to similar values using wild card operators. Also it is case sensitive unlike the LIKE comparison operator. GLOB uses "?" for one character and "*" from many, while LIKE uses "_" and "%" wild-cards correspondingly.
|| operator adds two different strings and make new one aka concatenate.
Bitwise binary operators are: & (AND), | (OR), ~ (complement), << (left shift) and >> (right shift)
Values NULL, 0.0, 0, 'english' and '0' are all considered to be false. Values 1, 1.0, 0.1, -0.1 and '1english' are considered to be true.
The IS and IS NOT operators work like = and != except when one or both of the operands are NULL.
To use a string in a query you should use single quotes as the SQL standard specifies. Check image 4, using text="text" is identical to saying select * from proba where text=text; which is always true, so all rows will be returned.
To escape a single quote in a string use another single quote, like this insert into table_name (my_string) values ('it is nine o''clock');
In the docs I couldn't find nor using .help command told me how to see current sqlite version. I however tried command .version which worked. Check image 5.

1. sqlite_master table contents after some sql coding. Mode is column and header is on

deleting column from existing table with temporary table in sqlite

2. Deleting a column from existing table using sqlite transation and temporary table to save the data


3. I tried round(X,Y) function with value 9.95 and without Y parameter it gave correct result


4. To use a string in a query you should use single quotes as the SQL standard specifies

5. Use .version dot command to check current sqlite version

Pages