Elastic, Responsive and Adaptive Design

Considering the terms, elastic, responsive and adaptive, when designing for web sites, many people are using them interchangeably. To help communicate with project members, it would be nice to define theses terms.

It would be a good practice to keep web designs to be elastic to screen size with a fluid layout, responsive to viewport with various layouts, and adaptive to device capacities with various layouts and/or contents.

  • Elastic
    Pages with a fluid layout are capable of rearranging elements properly when the screen or window size changes; a fluid layout defines element size in terms of percentage instead of pixels.
  • Responsive
    Pages are responsive by changing layouts when the viewport (or screen/window size) changes and the current layout cannot deliver and present contents effectively.
  • Adaptive
    Pages are adaptive by changing layouts and selecting contents according to the device capabilities; screen or window size is just one of the many device capabilities to consider. Flash animations, for example, may be delivered on desktops but filtered or hidden on mobile devices.

References

Advertisements

ASP.NET OpenAuth Login Failed in Facebook Page Tab

ASP.NET 4.5 supports Facebook authentication with OpenAuth. Developers who embed web applications into Facebook page tab may be faced with login failure because the page tab is rendered as an iframe and some browser will not submit cookies from iframes by default. Chrome, Firefox, Safari and Opera work fine but IE by default won’t send cookies from iframes and you will get some trouble when logging in from the Facebook page tab.

To solve this problem, you have to add the following p3p HTTP header to have IE send cookies from iframes:

Response.AddHeader(“p3p”, “CP=\”IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT\””);

Get Started to git

gitQucikStart

TFS service now supports git repository for source control, while on premise TFS will gain this support in the next major release of the product (no date available). The native TFS source control is good enough and the support for git is great. We’ve got used to the online centralized TFS source control repository. However, we got to work with the eclipse IDE in a recent project. Since TFS service supports git repository, we don’t have to setup new source control system for git now.

TFS as a git server supports git repository and any standard git client can connect to it. Visual Studio 2012 Update 2 CTP 2 supports git client. In the eclipse IDE, developers can install egit plug-in from the update site, say, http://download.eclipse.org/releases/juno. If you prefer to command line or file explorer shell extensions, Git for Windows and/or TortoiseGit are ideal candidates.

References:

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

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

WRONG! contentType not match to data

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

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

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) {}
});
  • 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 “+”.

Windows 8 Pro with Media Center is No Windows 8 Pro

Windows 8 Media Center Pack

Windows 8 Pro with Media Center is no Windows 8 Pro as they are activated by different class of product key. You can add Windows Media Center to Windows 8 Pro by requesting a product key from Microsoft for a limited time. As a developer, think twice to do so! The upgrade cannot be reversed and the only way to get your Windows 8 Pro back is to re-install it.

Given the following situation:
You have just upgraded your PC running Windows 8 Pro for software development to Windows 8 Pro with Media Center (with a new product key from Microsoft). Someday, there comes a new colleague and a new PC for him and you want to clone or restore images from your PC to the new one running Windows 8 Pro. Since your image is a Windows 8 Pro with Media Center, you need to request a new product key for media center from Microsoft to activate the new PC or you have to re-install from scratch. However, the upgrade is time-limited and it’s getting stricter to apply for extra keys because of some activation flaw. There is a good chance for you to re-install the who system and it’s not only annoying but wasting huge amounts of time.

It’s really unwise for Microsoft to remove Media Center out of Windows 8 Pro and not to disclose well that the Windows 8 Pro with Media Center is a completely different edition. This harmed my productivity seriously this week.

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.