Monthly Archives: December 2012

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

Internationalization and localization

language preferences

As a developer with Traditional Chinese mother tongue, to deliver an app that targets users with different languages takes more considerations, especially the issue of internationalization (i18n) and localization (L10n). An employee of US based company in Taiwan using an English Windows can subscribe services or contents from all over the world, eg. local weather forecast, local news, and/or web pages with Japanese contents.

In Windows 8, the diversity of the issue can be summarized as follows:

  • Language preferences
    • display language
    • Input method
  • Home location for services/contents
  • Date and time formats
  • Number and currency

Before passing the app certification, Bruce’s nLabs Blog Reader – Release 2 failed twice again because of screenshots of localization. If your app supports multi-language, take justifiable screenshots and write your app description well in your Windows Store App dashboard. It’s quite common for app testers to fail your app certification because of localization. For Windows Store App developers to test the localized user interface of an app, developers can change the language sequence or override the display language in the language window.

Override display language  specified in the language window

Override display language specified in the language window

Adjust Home location to see localized app description in the Windows Store

Home location for services and contents

Bruce’s nLabs Blog Reader, Release 2 Passed Certification

Bruce's nLabs Blog Reader - Release 2

Bruce’s nLabs Blog Reader – Release 2

Bruce’s nLabs Blog Reader – Release 2 passed the certification and is now available in the Windows Store. This application is an RSS/ATOM reader which subscribes to some feeds from Bruce’s nLabs Blog by default. Users can read posts from Bruce’s nLabs Blog and his favorite collections, subscribe to up to 5 feeds from other web sites (custom feeds), unsubscribe custom feeds, receive subscription indication from live tile badge, roam the list of subscriptions to the cloud with Microsoft Account, read posts in snapped or fill view and share posts with friends. This application supports English, Traditional Chinese, and Simplified Chinese, requires internet access and Microsoft Account. It supports both RSS and ATOM feeds.

This release supports the following features:

  1. subscribe to feeds from Bruce’s nLabs Blog
  2. subscribe to up to 5 feeds from other sites (custom feeds)
  3. unsubscribe custom feeds
  4. roam the list of subscriptions to the cloud with Microsoft Account
  5. refresh subscriptions manually
  6. indicate the number of subscriptions with live tile badge
  7. share posts with friends
  8. support snapped and fill view
  9. support English (en-US), Traditional Chinese (zh-TW), and Simplified Chinese (zh-CN)
  10. support RSS and ATOM feeds

Install Bruce’s nLabs Blog Reader and Subscribe the following syndication now:

Bruce’s nLabs Blog Reader, Release 1 Passed Certification

Bruce's nLabs Blog Reader on the Windows Store

My first Windows Store App, Bruce’s nLabs Blog Reader – Release 1, passed the certification and is now available in the Windows Store. This application retrieves posts from Bruce’s nLabs Blog and Bruce’s favorite sties. The list of subscriptions or feeds, however, is maintained by Bruce and so, it is read-only currently. Its features are summarized as follows:

  • retrieve posts (ATOM feeds) from Bruce’s nLabs Blog
  • share posts with friends
  • localized user interface for English (en-US) and Traditional Chinese (zh-TW)

I got a good start from the MSDN tutorial, Part 6: Create a blog reader (Windows Store apps using JavaScript and HTML) (Windows). If you are interested in developing Windows Store Apps, read and study the materials from Dev Center – Windows Store Apps. It’s informative.

Concerning the app certification process, I was rejected twice before passing the certification because of privacy information, certification language and screenshots:

  • Developers must provide privacy information or policy in the app, usually an About or Privacy page in the settings charm.
  • The strings in an app must be stored in the resource file (say, in the path /strings/en-US/resources.resjson) so that the app can load the right string based on the user’s locality. Android developers take it for granted and feel happy about this because it’s a convention and they are always doing so. (Microsoft should consider including a default language resource file in the project template just like what Android Development Tools in Eclipse does.)
  • Even though your app supports en-US only, you can select all the countries as your markets. en-Us is called certification language that is unrelated to your markets.
  • If your app supports multiple certification languages, you must describe your app in details with each language. These descriptions will be displayed on the Windows Store based on the user’s location and language. A wizard will guide you to complete this.
  • Take screenshots with the Visual Studio 2012 simulator and follow the image format that Microsoft specified. If your app supports multiple languages, provide enough or the maximum of 8 screenshots to prove your app is fully localized.

To sum up, the certification process is quite simple and efficient. Just read the Windows 8 app certification requirements, develop your app based on it, describe your app well and write a good notes for testers so as to communicate your app well and the certification process will be a happy experience.

TimeBroker Kills The Metro/Modern UI

My Windows 8 Start Screen (or metro/modern UI) was killed yesterday by the TimeBroker service. The Start Screen was repeatedly frozen for minutes and intermittently released for few seconds. If it happens, the windows application log should complain an error as follows:

Log Name: Application
Source: Application Error
Event ID: 1000
Level: Error
Keywords: Classic
Description:
Faulting application name: svchost.exe_TimeBroker, version: 6.2.9200.16420, time stamp: 0x505a9a4e
Faulting module name: KERNELBASE.dll, version: 6.2.9200.16451, time stamp: 0x50988aa6

Chances are that some timer-related Windows Store Apps, say reminder, scheduler, stop watch and the like, might negatively impact the low-level timing operations. According to Noori, he suggests the Tile Time app might have caused problems.

This costs me for 10 work hours to solve it. If you are suffered from the same problem, don’t waste your time blindly uninstalling the apps you’ve installed or examining, upgrading or re-installing the devices, or rebooting again and again. Just disable the TimeBroker service and reboot your Windows 8 to uninstall the problematic timer-related Apps. Since we don’t know which app is the killer, so uninstall suspicious Apps and reboot to test the result one by one. However, the Tile Time app is the number one to be killed!

To be reminded, even though the Start Screen got frozen, the system is still responsive, slowly though. The following is the how to rescue your Windows 8:

  • Upon logging in, click the Desktop tile in 2 seconds to switch to the traditional desktop environment that is more responsive. If you are not succeeded, keep pressing the Windows key and you would win a few seconds when the system is responsive.
  • Press the shortcut combination: Windows key + R, type in “cmd” and click OK.
  • In the command window, type in “regedit” and hit enter
  • Search and navigate to the registry key:
    HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\TimeBroker
  • Modify the “Start” value to “4” (4 for disabled; 3 for manual).
  • Reboot the system and the Start Screen should work normally for you to uninstall Apps.
  • Click the Market tile to uninstall the suspicious timer-related Apps and reboot to test the result one by one until the problem is solved. (You don’t need to use PowerShell to uninstall Apps as stated in the reference 2, it’s for your information only.)
  • Restore the “Start” value to “3” and reboot.
  • done!

Good luck to you!

TimeBrokerErrorLog

The error log

DisableTimeBroker

Modify TimeBroker Start Type

jQuery’s .bind(), .live(), .delegate() and .on()

<this is a draft>

DOMTree