NodeJS Dependencies

  • using the npm utility to manage node.js packages
  • dependencies are saved in packages.json
  • dependencies in package.json get installed whenever you run npm install without any arguments
  • run npm install –save to persist dependencies in package.json
  • run npm install -g [package] to install package to a folder that is in the PATH environment variable
  • run npm install [package] to install package to the project folder, node_modules
  • the project-level folder, node_modules, should be ignored in version control. (add a line containing node_modules to .gitignore in git)

Bruce Passed MS Exam 70-480

IMAG0401

Bruce passed the Microsoft Exam 70-480: Programming in HTML5 with JavaScript and CSS3 on Jan 5th, 2013. This exam is quite straightforward. I found the following materials helpful:

Key points for sending JSON data with AJAX

ajaxMessage

ajax, contentType and data

  • be noted that the ajax call defaults to application/x-www-form-urlencoded
  • always convert and put a string in the data field to prevent auto data conversion to the default format
  • explicitly specify the contentType field: application/json; charset=utf-8

The right way

[sourcecode language=”javascript” wraplines=”false” collapse=”false”]
var myData = { firstName: "Bruce" };
$.ajax({
type: "POST",
url: "/webService/service1",
contentType: "application/json; charset=utf-8", //Content-Type
data: JSON.stringify(myData), //Request Body
dataType: "json", //Accept: application/json, text/javascript, */*; q=0.01
success: function (data) {}
});
[/sourcecode]

WRONG! contentType not match to data

[sourcecode language=”javascript” wraplines=”false” collapse=”false”]
var myData = { firstName: "Bruce" };
$.ajax({
type: "POST",
url: "/webService/service1",
contentType: "application/json; charset=utf-8", //Content-Type
data: myData, //not a string, converted to application/x-www-form-urlencoded
dataType: "json", //Accept: application/json, text/javascript, */*; q=0.01
success: function (data) {}
});
[/sourcecode]

Typical ajax call: application/x-www-form-urlencoded

[sourcecode language=”javascript” wraplines=”false” collapse=”false”]
var myData = { firstName: "Bruce" };
$.ajax({
type: "POST",
url: "/webService/service1",
data: myData, //not a string, converted to application/x-www-form-urlencoded
dataType: "json", //Accept: application/json, text/javascript, */*; q=0.01
success: function (data) {}
});
[/sourcecode]

  • contentType: When sending data to the server, use this content type. contentType must match to the actual type of data. Default is “application/x-www-form-urlencoded; charset=UTF-8”, which is fine for most cases. If you explicitly pass in a content-type to $.ajax(), then it’ll always be sent to the server (even if no data is sent). If no charset is specified, data will be transmitted to the server using the server’s default charset; you must decode this appropriately on the server side.
  • data: data to be sent to the server. It is converted to a query string, if not already a string. It’s appended to the url for GET-requests. See processData option to prevent this automatic processing.
  • processData: by default, data passed in to the data option as an object will be processed and transformed into a query string, fitting to the default content-type “application/x-www-form-urlencoded”. If you want to send a DOM Document, or other non-processed data, set this option to false.
  • dataType: the type of data that you’re expecting back from the server. If none is specified, jQuery will try to infer it based on the MIME type of the response.
POST http://localhost:18232/api/web HTTP/1.1
User-Agent: Fiddler
Host: localhost:18232
Content-Type: application/json
Accept: application/xml
Content-Length: 91
[{“id”:1,”FirstName”:”Bruce”,”LastName”:”Wu”},{“id”:2,”FirstName”:”Jack”,”LastName”:”Lee”}]

  • encodeURIComponent

encodeURIComponent escapes all characters except the following: alphabetic, decimal digits, - _ . ! ~ * ' ( )

To avoid unexpected requests to the server, you should call encodeURIComponent on any user-entered parameters that will be passed as part of a URI. For example, a user could type “Thyme &time=again” for a variable comment. Not using encodeURIComponent on this variable will give comment=Thyme%20&time=again. Note that the ampersand and the equal sign mark a new key and value pair. So instead of having a POST comment key equal to “Thyme &time=again“, you have two POST keys, one equal to “Thyme ” and another (time) equal to again.

For application/x-www-form-urlencoded (POST), per http://www.w3.org/TR/html401/interac…m-content-type, spaces are to be replaced by ‘+’, so one may wish to follow a encodeURIComponent replacement with an additional replacement of “%20” with “+”.

CSS Positioning schemes

PositioningScheme

In CSS 2.1, a box may be laid out according to three positioning schemes:

  1. Normal flow. In CSS 2.1, normal flow includes block formatting of block-level boxes, inline formatting of inline-level boxes, and relative positioning of block-level and inline-level boxes.
  2. Floats. In the float model, a box is first laid out according to the normal flow, then taken out of the flow and shifted to the left or right as far as possible. Content may flow along the side of a float.
  3. Absolute positioning. In the absolute positioning model, a box is removed from the normal flow entirely (it has no impact on later siblings) and assigned a position with respect to a containing block.

An element is called out of flow if it is floated, absolutely positioned, or is the root element. An element is called in-flow if it is not out-of-flow. The flow of an elementA is the set consisting of A and all in-flow elements whose nearest out-of-flow ancestor is A.

Event dispatch and DOM event flow

DOM Level 3 Events Event Flow

DOM Level 3 Events Event Flow

DOM Events

Legacy mode (DOM Level 0) DOM Level 2
Event Type onclick click
Event Listener on HTML element attribute
<button onclick=”run”>run</button>
or  object property
run.onclick = function(e){};
register by calling addEventListener(“click”,function(e){},false)The 3rd argument, useCapture (false in the example above) determines to direct the event flow from parent to child or to bubble up from child to parent. Refer to the example.
this pointer event handler becomes a method of that document element lack of standardization. All known implementations invoke handlers registered with addEventListener() as if they were methods of that object.
Event Disposition <a href=”#” onclick=”return false;”>click me</a>  preventDefault();
Event Propagation  function (e) { e.cancelBubble = true; }   function (e) { e.stopPropagation(); }
  1. HTML DOM Events
  2. DOM Event Architecture
  3. jQuery: Event Object

JavaScript Intellisense Not Working on Visual Studio 2010

We are using JavaScript to manipulate the HTML document or more specifically, the DOM (document object model). jQuery as a JavaScript framework now seems to be the first choice of developers for efficiency and productivity. You can use NuGet to install the jQuery package in the Visual Studio 2012, which supports JavaScript intellisense very well.

To be reminded that we are programming against an HTML document with JavaScript or jQuery, just remember to establish some kind of connection between the HTML document and the JavaScript files or the JavaScript intellisense won’t work properly. You would receive the following message:

intellisense was unable to determine an accurate completion list for this expression, The provided list contains all identifiers in the file

If you installed jQuery from NuGet and JavaScript intellisense won’t work, do either of the following:

  • in the HTML document, add the <script> tag  to import your JavaScript file or
  • at the beginning of your JavaScript file, add a remarked reference to the HTML document you’re working with
    /// <reference path=”../default.html” />
    You can drag and drop the HTML document into the JavaScript file if you are using Visual Studio 2012

JavaScriptIntellisenseHTML JavaScriptIntellisensSource