Monthly Archives: July 2013

Css selector and its style rules are not picked up

Published July 23, 2013 11:38 am

When building a WinJS based windows store, many a times I run into the issue – css rule is not getting picked. then, begins the debugging to figure out what is going wrong. Sometimes, it has been quick and get to the solution; sometimes end up pulling hairs and decide to take it up some other day; sometime eliminate the problem by removing it thinking about ROI; sometimes strike a reasonable workaround.

Here is the listing of things that have come handy some time or the other:

  1. Seriously checking that css file is included in the html file; The path of the css file is indeed correct and does not have any typo. For example: today, I hit a case where I missed one directory in the folder path of the css file in a big size project.
  2. class names or the id name in the css selector does not match with what is mentioned in the html file. Following a naming convention reduces the probability of this cause over a period of time. For example – I happen to use some of these rules a) use camel casing for id b) use ‘-‘ as word separators in class names c) try to keep class names to 2-3 words d) pick class names that are intuitively represent the element
  3. Use VS->Debug->windows-> DOM Explorer -> select element and look through the styles and trace style for the desired element.
  4. Keeping the common css rules across projects into default.css.
  5. Prefixing the css selector long enough that it does not conflict with rules in other pages. For example – I happen to use a convention to give a unique class name for each page in the fragment element and use '.mypage.fragment' prefix in the css rules for the page.
  6. Layout rules have been most challenging at least in the beginning when using display: -ms-grid or display: -ms-flexbox . Over a period of time, there is understanding of how it works. Debugging issues here require a separate post though.
  7. Using WinJS builtin styles whenever possible since they are well tested and work for multiple layouts of the page. For example: .win-type-ellipsis to auto-ellipse the text if it is too long for the space. win-ring win-medium for a medium size progress ring. msdn pages for each control and skimming though the ui-light.css gives access to such classes.
  8. There can be many more items. but need to get back to work. Today I found this nice article that explains how a multiple rules fight over a given css selector in the section “cascading order”.

More later.

Adding asserts to WinJS application

Published July 8, 2013 2:49 pm

I have been coding without asserts Windows store application in javascript (WinJS based). Amidst making progress on frameworks for the next application, looking into this was at the back burner. One day, it pinched enough to look around for the solution.

I had been using chai.js for the assertions in the nodejs server code. It is expected to work in browser. hence, gave it a try to use it in WinJS application. It works; the library has right set of apis for the assertions in javascript.

What needs to be done:

  1. download chai.js for browser from here.
  2. Add the file to the vs project
  3. Add script entry into default.html
  4. Add a global variable – assert – in default.js
  5. Use the assert apis in code.

default.html:

<!-- WinJS references -->     
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />     
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>     
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

<!-- external js libs -->     
<script src="/js/chai.js"></script>

<script src="/js/default.js"></script>

default.js:

 
(function()
{
    ...
    assert = chai.assert;
})();
var assert;

Examples:

 
    assert.isObject(this.options);

    assert.isString(this.options.parameter1);

    assert.deepEqual({ tea: 'tea' }, { tea: 'tea' });
    //  for more examples - refer http://chaijs.com/api/assert/