This book is an introductory usage guide to Node.js. It has two parts: one is practical "up and running" part with three chapters, the other is reference part with API, Data access, external modules etc five chapters.
In the first part, it gives quick introduction about Node.js, and how to install, how to build a chat server and twitter, also explains event loop, how to build robust node applications (patterns, error handling, and using multiple processors). Following the examples or code snippet, it is very easy to get node.js up and running. Also reader can get an introductory idea about what is node.js, how does it work, and what does it can do.
In the second part, it deep dives core APIs, helper APIs, Data Access, external modules, extending node. Event, http, I/O related APIs are core to build a web application using server side javascript. DNS, Crypto, and processes related help APIs are regularly useful for writing applications. In chapter 6, the books goes through a bunch of data stores from CouchDB, Redis, MongoDB, MySQL, PostgreSQL and also RabbitMQ. The last two chapters explore node modules, including popular Express (MVC framework), and Socket.IO (websocket), as well as extending node by building modules or creating packages.
nodejs.org has below definition:
Node.js
is a platform built on Chrome's
JavaScript runtime
for easily building fast, scalable network applications.
Node.js
uses an event-driven, non-blocking I/O model that makes it
lightweight and efficient, perfect for data-intensive real-time
applications that run across distributed devices.
Node.js
provides an unique opportunity for server side javascript to build
scalable web or network applications, using one language on both client
and server sides. High performance and high scalability application is the design goal of node, and its active community and extensive modules make programming javascript on server side very promising and attractive. After we deep understand Nodes' event-loop architecture, non-blocking I/O and event-driven model, using established design patterns, building node.js application will be a fun journey.
Next step, try out more node.js codes, and read Node.js in Action book.
Thursday, May 31, 2012
CSS position property
The CSS position property takes 5 values.
position: absolute
An absolute positioned element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is <html>. It is removed from normal flow. Sometimes we float columns with clear, instead of using relative position and absolute position.
position: relative
A relative positioned element is positioned relative to its normal flow, using top, right, bottom, and right. It also it establishes a context for position:absolute. It still occupies that original space in the normal flow.
position: fixed
An element with fixed position is positioned in relation to the browser window. It is removed from normal flow as absolute positioned element. It is common to see fixed position for twitter-like header, though IE6 needs some hack.
position: static
This is the default value if no CSS position specified. The element is not positioned, and is part of the normal flow of the page.
position: inherit
The element uses the position of its parent. The value from parent element position can be one of static, relative, absolute and fixed.
position: absolute
An absolute positioned element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is <html>. It is removed from normal flow. Sometimes we float columns with clear, instead of using relative position and absolute position.
position: relative
A relative positioned element is positioned relative to its normal flow, using top, right, bottom, and right. It also it establishes a context for position:absolute. It still occupies that original space in the normal flow.
position: fixed
An element with fixed position is positioned in relation to the browser window. It is removed from normal flow as absolute positioned element. It is common to see fixed position for twitter-like header, though IE6 needs some hack.
position: static
This is the default value if no CSS position specified. The element is not positioned, and is part of the normal flow of the page.
position: inherit
The element uses the position of its parent. The value from parent element position can be one of static, relative, absolute and fixed.
Wednesday, May 23, 2012
Viewport
The definitive article
If you want to understand Viewport, read this excellent article A tale of two viewports. The two viewports are layout viewport and visual viewport. The article has detailed explanation and diagram illustration, is well organized, informative, easy to understand. I took some notes here as my reading notes.
Two viewports
Viewport is exactly equal to the browser window. The viewport is not an HTML construct, so you cannot influence it by CSS. It just has the width and height of the browser window on desktop. On mobile, there are the visual viewport and the layout viewport. The visual viewport is the part of the page that’s currently shown on-screen. The layout viewport is considerably wider than the visual viewport. The CSS layout are calculated relative to the layout viewport.
CSS pixel and device pixel
CSS pixel indictates how your style sheet is rendered, and device pixel is used to measure user's screen which never changes. At zoom level 100% one CSS pixel is exactly equal to one device pixel. Zooming to 200% makes one CSS pixel grow to four times the size of one device pixels. If the user zooms in you get less available space in the window (so window inner width/height is decreasing).
screen.width and screen.height are measured in device pixel. They contain the total width and height of the user’s screen (never change).
window.innerWidth and window.innerHeight are measured in CSS pixel. They are the inner dimensions of the browser window, tell exactly how much space the user currently has available for the CSS layout. They include scroll bars.
window.pageXOffset and window.pageYOffset are measured in CSS pixel. They contain the horizontal and vertical scrolling offsets of the document.
document.documentElement.clientWidth and -Height always gives the viewport dimensions, regardless of the dimensions of the <html> element. They don't include scroll bars.
document.documentElement.offsetWidth and -Height gives the dimensions of <html> element.
So basically we have 5 different views, namely screen > window > viewport -> scrolling -> html
Viewport width on mobile
For layout viewport width, different browsers have different value. Safari iPhone uses 980px, Opera 850px, Android WebKit 800px, and IE 974px. The <html> element takes the width of the layout viewport initially, and CSS is interpreted as if the screen were significantly wider than the phone screen. This makes sure that your site’s layout behaves as it does on a desktop browser.
The layout viewport width is always the same. If you rotate your phone, the visual viewport changes, but the browser adapts to this new orientation by zooming in slightly so that the layout viewport is again as wide as the visual viewport. (?? don't fully understand this because layout viewport width is expected to be wider than visual viewport) Web developers don’t care about the height, only about the width.
document.documentElement.clientWidth and -Height contain the layout viewport’s dimensions.
window.innerWidth and window.innerHeight contain the visual viewport's dimensions. Obviously the measurements change when the user zooms out or in, since more or fewer CSS pixels fit into the screen.
Event coordinates
pageX/Y is still relative to the page in CSS pixels
clientX/Y is relative to the visual viewport in CSS pixels (?)
screenX/Y is relative to the screen in device pixels
Media Query
There are two relevant media queries: width/height and device-width/device-height.
Use width and forget device-width — on desktop
Meta viewport
<meta name="viewport" content="width=320">
If you want to understand Viewport, read this excellent article A tale of two viewports. The two viewports are layout viewport and visual viewport. The article has detailed explanation and diagram illustration, is well organized, informative, easy to understand. I took some notes here as my reading notes.
Two viewports
Viewport is exactly equal to the browser window. The viewport is not an HTML construct, so you cannot influence it by CSS. It just has the width and height of the browser window on desktop. On mobile, there are the visual viewport and the layout viewport. The visual viewport is the part of the page that’s currently shown on-screen. The layout viewport is considerably wider than the visual viewport. The CSS layout are calculated relative to the layout viewport.
CSS pixel and device pixel
CSS pixel indictates how your style sheet is rendered, and device pixel is used to measure user's screen which never changes. At zoom level 100% one CSS pixel is exactly equal to one device pixel. Zooming to 200% makes one CSS pixel grow to four times the size of one device pixels. If the user zooms in you get less available space in the window (so window inner width/height is decreasing).
screen.width and screen.height are measured in device pixel. They contain the total width and height of the user’s screen (never change).
window.innerWidth and window.innerHeight are measured in CSS pixel. They are the inner dimensions of the browser window, tell exactly how much space the user currently has available for the CSS layout. They include scroll bars.
window.pageXOffset and window.pageYOffset are measured in CSS pixel. They contain the horizontal and vertical scrolling offsets of the document.
document.documentElement.clientWidth and -Height always gives the viewport dimensions, regardless of the dimensions of the <html> element. They don't include scroll bars.
document.documentElement.offsetWidth and -Height gives the dimensions of <html> element.
So basically we have 5 different views, namely screen > window > viewport -> scrolling -> html
Viewport width on mobile
For layout viewport width, different browsers have different value. Safari iPhone uses 980px, Opera 850px, Android WebKit 800px, and IE 974px. The <html> element takes the width of the layout viewport initially, and CSS is interpreted as if the screen were significantly wider than the phone screen. This makes sure that your site’s layout behaves as it does on a desktop browser.
The layout viewport width is always the same. If you rotate your phone, the visual viewport changes, but the browser adapts to this new orientation by zooming in slightly so that the layout viewport is again as wide as the visual viewport. (?? don't fully understand this because layout viewport width is expected to be wider than visual viewport) Web developers don’t care about the height, only about the width.
document.documentElement.clientWidth and -Height contain the layout viewport’s dimensions.
window.innerWidth and window.innerHeight contain the visual viewport's dimensions. Obviously the measurements change when the user zooms out or in, since more or fewer CSS pixels fit into the screen.
Event coordinates
pageX/Y is still relative to the page in CSS pixels
clientX/Y is relative to the visual viewport in CSS pixels (?)
screenX/Y is relative to the screen in device pixels
Media Query
There are two relevant media queries: width/height and device-width/device-height.
Use width and forget device-width — on desktop
Meta viewport
<meta name="viewport" content="width=320">
Subscribe to:
Posts (Atom)