This Week Reads

What’s the Difference Between Width/Height in CSS and Width/Height HTML attributes?

I save you time if you prefer not to read this one. Presentational attributes (HTML attributes) have weaker (or lesser priority) compare to CSS attribute of the same function.

---

23 lesser known VS Code Shortcuts as GIF

You probably have seen a lot of similar posts, but this explains the shortcut in animated GIF, which is easier to understand!

---

ES6 vs ES2015 – What to call a JavaScript version?

Confuse with JavaScript version? You’re not alone. This will explain the difference between ES6 and ES2015. Hint: they are the same.

---

Get Hired: A New Series

This is a series of posts about getting hired, how to prep resume and go to interview. If you are looking for a job, it’s worth the time to invest in the preparation.

---

How to avoid infinite nesting callbacks

Ever seen (or written) JavaScript function with bunch of nested callbacks? The new `async` `await` will help you avoid that.

---

Saturday Reading List

CSS Can Do This… And It’s Terrifying!

I never thought CSS could be used to this, it’s amazing actually. From keylogger to turing, it’s all done using CSS (and in some cases, JavaScript).

---

Swiftly understand what versions of .NET are supported on Azure App Service

Want to know what version of .NET is supported in your Azure App Service? Check this tips out. And while you there, check out hundreds of other tips as well.

---

Demystifying containers, Docker, and Kubernetes

Getting started on Kubernetes? This is a must-read, cover the basic building block of Kubernetes. No code involves, just the knowledge you need to understand Kubernetes.

---

Azure and .NET Code Samples

You need to bookmark this link right now if you are building application using Azure, .NET, Microsoft Graph or Power Platform, especially if you don’t know how to start building application for your project. There are many available code samples for all kind of applications.

---

Should I use === or == equality comparison operator in JavaScript?

Ahh.. the JavaScript tricky question. There’s actually a difference between `===` and `==` and why you should use one in some cases and not the other.

---

More Comprehensive Naming Convention

Indentation

Indentation

Indentation must be used if the line is associated with the previous line. When indentation is needed, use conventional indentation (one “Tab”).

Example 1:

<div id="content">
    <table>
        <tr>
            <td class="control_title">
            </td>
        </tr>
    </table>
</div>

Example 2:

public string indentation
{
    get
    {
        return _indentation;
    }
    set
    {
        _indentation = value;
    }
}

Wrapping Lines

Avoid lines longer than 120 characters. When an expression will not fit on a single line, break it with conventional indentation in new line.

Example:

string _xmlData = "<?xml version=\"1.0\"?>" + "\r\n" +
    "<!DOCTYPE ddtp=\"http://dtd.wctp.org/wctp-dtd-v1r1.dtd\">" + "\r\n" +
    "<wctp-Operation wctpVersion=\"wctp-dtd-v1r1\">" + "\r\n" +
    "<wctp-SubmitRequest>" + "\r\n" +
    "<wctp-SubmitHeader submitTimestamp=\"" + _timestamp + "\">" + "\r\n" +
    "<wctp-Originator senderID=\"application@chron.com\"/>" + "\r\n" +
    "<wctp-MessageControl messageID=\"001\"/>" + "\r\n" +
    "<wctp-Recipient recipientID=\"" + recipient + "@arch.com\"/>" + "\r\n";

 

Naming Convention (Server Code)

Identifier Naming Convention

Identifier	Case	Examples	Rules
Comment			Clear, short and descriptive.
Class	PascalCase	Person BankVault ImageSprite	Acronyms of 3 or more letters should use pascal case instead of all caps. Avoid abbreviations (unless it is widely used, like URL, HTML). Keep names simple and descriptive. No underscores. Nouns.
Method(Private)	PascalCase with “_” prefix	_UpdateScore(…) _UpdateUrl(…) _UpdateID(…)	Acronyms of 3 or more letters should use pascal case instead of all caps. Avoid abbreviations (unless it is widely used, like URL, HTML). No underscores. Verbs.
Method(Public)	PascalCase	UpdateScore(…) UpdateUrl(…) UpdateID(…)	Acronyms of 3 or more letters should use pascal case instead of all caps. Avoid abbreviations (unless it is widely used, like URL, HTML). No underscores. Verbs.
Method for Ajax (Private and public)	PascalCase following text “Ajax”	SavePeopleAjax GetPropertyAjax _DeleteGroupAjax	Method for ajax is a method that only called with ajax. For private, prefix with “_”.
Common Method (Private and public)	PascalCase following text “Common”	GetStateCommon _GetAnswerCommon _SaveStateCommon	Common method is a method that could be use in different controllers/pages. For private, prefix with “_”.
Namespace	PascalCase	Chronicle.IT.BasicFunctions Chronicle.IT.Ftp Chronicle.IT.Xml	Acronyms of 3 or more letters should use pascal case instead of all caps. Avoid abbreviations (unless it is widely used, like URL, HTML). No underscores. Use $lt;company_name$gt; as root.
Interface	PascalCase with “I” prefix	IDisposable IWidgetXml IUserID	Acronyms of 3 or more letters should use pascal case instead of all caps. Avoid abbreviations (unless it is widely used, like URL, HTML). No underscores.
Parameter	camelCase	recordID personName previousUrl	Acronyms of 3 or more letters should use pascal case instead of all caps. Avoid abbreviations (unless it is widely used, like URL, HTML). No underscores. Optional object type can be added. See “Object Type Naming Convention” section.
Property / Variable (Private)	camelCase with “_” prefix	_backColor _internalXml _userID	Acronyms of 3 or more letters should use pascal case instead of all caps. Avoid abbreviations (unless it is widely used, like URL, HTML). No underscores (except the prefix). Optional object type can be added. See “Object Type Naming Convention” section.
Property / Variable (Public)	PascalCase	BackColor InternalXml UserID	Acronyms of 3 or more letters should use pascal case instead of all caps. Avoid abbreviations (unless it is widely used, like URL, HTML). No underscores. Optional object type can be added. See “Object Type Naming Convention” section.

Object Type Naming Convention

Additional object’s type can be added to precede some identifiers in order to distinguish the object type. If the object’s type is added, abbreviate the object type according to the following rules:

Object Type	Abbreviated Object Type	Examples
Array	arr	_arrBackColors _arrInternalXml arrUserID
String	str	_strBackColor _strInternalXml strUserID

 

Naming Convention (Client Code)

CSS & HTML

Identifier	Case	Examples	Rules
Class	dash-separated	sort-column portlet-header portlet-content	Acronyms of 3 or more letters should use pascal case instead of all caps. Avoid abbreviations (unless it is widely used, like URL, HTML). Keep names simple and descriptive. No underscores. Nouns. All lowercase.
HTML Element	camelCase	ddlPropertyType txtName	Start with 3 letters of specified element.
HTML Element (For)	PascalCase	Group Property People.FirstName	For is html element generated by mvc html helper that bound to the specific property.

JavaScript

Identifier	Case	Examples	Rules
Comment			Clear, short and descriptive.
Parameter	camelCase	dashboardResult peopleResult currentUrl	Acronyms of 3 or more letters should use pascal case instead of all caps. Avoid abbreviations (unless it is widely used, like URL, HTML). No underscores. Optional object type can be added. See “Object Type Naming Convention” section. Nouns.
Property / Variable (Private)	camelCase with “_” prefix	_savePreference _currentUrl _parent	Acronyms of 3 or more letters should use pascal case instead of all caps. Avoid abbreviations (unless it is widely used, like URL, HTML). No underscores (except the prefix). Optional object type can be added. See “Object Type Naming Convention” section. Nouns.
Property / Variable (Public)	PascalCase	SavePreference CurrentUrl Parent	Acronyms of 3 or more letters should use pascal case instead of all caps. Avoid abbreviations (unless it is widely used, like URL, HTML). No underscores (except the prefix). Optional object type can be added. See “Object Type Naming Convention” section. Nouns.

Json

Identifier	Case	Examples	Rules
Name	PascalCase	Person Status Parent Children	Acronyms of 3 or more letters should use pascal case instead of all caps. Avoid abbreviations (unless it is widely used, like URL, HTML). Keep names simple and descriptive. No underscores. Nouns. Avoid using two words or more.

Naming Convention Sample

Following is a sample of naming convention sample for HTML and CSS. Although this can be used for HTML and CSS, it’s best optimized for ASP.Net MVC project.

CSS Rules

• All custom CSS rules go into <Project>\Content\<filename>.css
• To avoid conflict, target by Class name is preferable than ID.
• Don’t-fix-what’s-working philosophy: don’t style unless it’s necessary which means no gold-plating.

 

CSS Class Name

• Application hierarchy structure should follow ASP.NET MVC namespace.
• Class name is lower case dash-separated for each word.
• Class name should be hierarchical according to application structure. This means when we look at the class name, we immediately know at what level the rule is applied to.
  • If the class targets a specific element in a View, class name should follow this convention:
    .stack247-<area>-<controller>-<view>-<description>
    • For example: .stack247-agent-prospect-details-input-box, .stack247-agent-prospect-details-hide-text
  • If the class targets elements in a Controller, class name should follow this convention:
    .stack247-<area>-<controller>-<description>
    • For example: .stack247-agent-prospect-input-box, .stack247-agent-prospect-hide-text
  • If the class targets application-wide View, class name should follow this convention:
    .stack247-<view>-<description>
    • For example: .stack247-details-input-box, .stack247-details-hide-text
  • If the class targets application-wide Controller, class name should follow this convention:
    .stack247-<controller>-<description>
    • For example: .stack247-prospect-input-box, .stack247-prospect-hide-text
  • If the class targets application-wide element, class name should follow this convention:
    .stack247-<description>
    • For example: .stack247-input-box, .stack247-hide-text
  • <description> can be the target element or a purpose but it should be very short.
• When overriding framework CSS rules (jQuery Mobile, Kendo UI, etc), the specificity must be hierarchical according to application structure.
  • When overriding, the more specific, the better. More about CSS Specificity: http://css-tricks.com/specifics-on-css-specificity/
  • If the overriding rule targets a specific element in a View, specify class to only that element in the View:
    • For example: .stack247-agent-prospect-details .k-grid-header
  • If the overriding rule targets elements in a Controller, specify class to only elements in the Controller:
    • For example: .stack247-agent-prospect .k-grid-header
  • If the overriding rule targets elements in an Area, specify class to only elements in the Controller:
    • For example: .stack247-agent .k-grid-header
  • If the overriding rule targets application-wide element, specify class to those elements:
    • For example: .k-grid-header
• Use your best judgment: if the CSS rule is re-usable across a View / Controller / Area or if it’s re-usable across the application, use class name and specificity that apply to targeted section.

 

HTML ID

Since CSS styles sometime target a specific HTML element by its ID, the following naming conventions apply to naming the HTML element ID.

• HTML ID should be lower case of 3 letters (or less) of the element type + camelCase short description
  • For example: #divDashboardResult
• The following are element type and its abbreviation:
  

  Element	Abbreviation
  <div>	div
  <input type=”textbox” />	txt
  <input type=”checkbox” />	cb
  <input type=”radio” />	rb
  <input type=”button” />	btn
  <span>	spn
  <ul>	ul
  <li>	li
  <a>	a
  <form>	frm
  <table>	tbl
  <thead>	thd
  <tbody>	tbd
  <th>	th
  <td>	td
  <tr>	tr

MVC Bundle Not Working with Release Configuration (Debug is False)

I encountered problem with Scripts and Styles bundle when deploying ASP.Net MVC 4 application to Windows Azure. The site loaded without CSS and JavaScript and developer tools show bunch of URL bundles returning 404 errors.

Solution was to add the following code to web.config

<system.webServer>
  <modules runAllManagedModulesForAllRequests="true">
    <remove name="BundleModule" />
    <add name="BundleModule" type="System.Web.Optimization.BundleModule" />
  </modules>
</system.webServer>

When deploying with Release configuration manager, <compilation> debug is set to false and MVC minify all CSS and JavaScript files.

If run with debug="true" output is the following HTML.

<link href="/Content/themes/base/jquery.ui.core.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.resizable.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.selectable.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.accordion.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.autocomplete.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.button.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.dialog.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.slider.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.tabs.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.datepicker.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.progressbar.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.theme.css" rel="stylesheet"/>

But if run with debug="false", output is the following instead:

<link href="/Content/themes/base/css?v=LJDigUf9DCM1N7CIVASNPsU78xE9F_Int_B2M79n8CI1" rel="stylesheet"/>

CSS Language: SASS vs {LESS} vs xCSS

 

My take is {LESS}. That’s the short answer.

Kind of longer (and boring) answer:

There is only slight difference between the two. The biggest challenge is syntax learning curve, everything else (IDE plugins, features, requirements, etc) is much or less the same.

One consideration is how heavy will we (or the consultants) use the framework? When used heavily, syntax and language can be complicated and hairy, hard to understand. New comers will have significant learning curve. However, either way with SASS or LESS, we will have the learning curve.

I want to say we should go with framework that we most comfortable to develop with. At the end of the day, we use this framework to deliver product, so the more we comfortable with the framework, the more we can beautify the site and deliver product. This also true for consultants we hire to do the UX piece. But, consultants leave us with their code which bring us to maintainability subject. And the question for that is: which one we are more comfortable to maintain?

But what makes me really pick LESS is not because I am more comfortable with them. Instead, it’s more because of the community support (and usage for that matter) for this particular framework. SASS used to have more active development but lately LESS has taken the spot despite being newer that SASS. Community’s acceptance and implementation of LESS is also increasing rapidly as shown in StackOverflow.com’s tags counts and BuiltWith usage statistic. Not only this means LESS is gaining momentum, but also support level that we can expect outside of official documentation.

Comparison

	Sass	{less}	X-CSS
Age	Oldest (v 3.2.5 as of this writing)	Newer (v 1.3.3 as of this writing)	Newest (v 1.0.1 as of this writing)
Active Development	Open Issue 5/16/12: 84 Open Issue 1/12/13: 83 Pending pull request 5/16/12: 3 Pending pull request 1/12/13: 7 Commits count 5/16/12: 35 Commits count 1/12/13: 14	Open Issue 5/16/12: 392 Open Issue 1/12/13: 112 Pending pull request 5/16/12: 86 Pending pull request 1/12/13: 10 Commits count 5/16/12: 11 Commits count 1/12/13: 84	N/A
Requirements	Ruby Each rule in one line (SASS syntax) Proper indentation (SASS syntax) Compiler	Compiler	PHP-enabled server
Documentation	Online – Excellent SO: 1431 tags	Online – Good SO: 1260 tags	Online – Good SO: 0 tag
Key Features	Inheritance Nested rules Variables Mixins (set of styles in a variable) Function and operation File ‘includes’	Inheritance Nested selectors Variables Mixins Math operations File ‘includes’ Namespace Interpolation (string & selector) Scope	Inheritance Nested selectors Variables Math operations File ‘includes’
Language Type	Compile	Compile Run-time compile (with JavaScript)	Run-time compile
Pro	Support 2 syntax (SCSS – CSS-like syntax and SASS – Ruby-powered)	Syntax matches CSS convention Usage is common
Cons	SASS syntax is learning curve (contrast to CSS convention)		Tedious and quirky setup Variables definitions decrease readability

Some sources and links

Comprehensive comparison: http://css-tricks.com/sass-vs-less/
BuiltWith {less} Counts: http://trends.builtwith.com/websitelist/LESS
BuiltWith {less} Trends: http://trends.builtwith.com/javascript/LESS

My First Hand on Kickstrap and Less

Kickstrap is cool and all, make your life easy when it comes to installing app, theme and ui widget. It allows you to drop in a folder (depend on its purpose, it contains CSS file, JavaScript file, and a Kickstrap configuration file) to add an app / theme / bootstrap UI to your site. All you need to do to activate this app / theme / bootstrap UI is edit the Kicktrap setting file and it will show up in your site. No more need to add each app / theme / bootstrap UI ‘s CSS and JavaScript files to your HTML markup.

One downside of using Kickstrap is it’s using .less extension. LESS is a new way to write CSS, introducing variables, operations, and functions. Think about programming language to generate CSS. LESS is compiled to .css in browser using {less} JavaScript. You can also compile .less file to CSS using third party app like LESS.app (Mac OS) and WinLess (Windows).

Although .less is promising, the application and usage in developer community is still yet to be proven. I myself encounters problems with .less file extension when trying to run Kickstrap. Firstly, you can’t run your HTML file, that contains link to LESS, locally anymore. This is because, to compile LESS to CSS, a browser will need LESS JavaScript (LESS.js) and LESS JavaScript will not run locally. In another words, you have to set up a web server (IIS, Apache, etc) to see how your HTML page looks like.

“That’s ok.”, I convince myself. “I will set up my IIS to host my HTML file that contains link to LESS”. Well, after setting up the a web server (IIS in my case), the default site’s settings are not set to take LESS file extension. To do this, I have to add new MIME type to my site. See this post on how to solve this problem.

The same thing happens to .KS file, a configuration file for each app / theme / bootstrap UI in Kickstrap. I had to set my site’s MIME type to take .KS as well.

I mentioned before that you can compile LESS to CSS with third party tools. The idea is to develop CSS in LESS-way, easier and faster, then compile it to CSS to be included in HTML file. Some developers choose to include LESS file the HTML files instead and have LESS JavaScript to compile it on the browser, but this adds another point of failure, in addition to page load time. The decision is yours to make. Although you can compile LESS to CSS, you can’t do this with Kickstrap’s LESS files. Kickstrap is depended upon LESS file, mainly to set its root directory and apps to run (see this Kickstrap Setting link).

Kickstrap is still in beta version (as of this writing) but it’s already look very nice and bright. Whether to use this in your production environment is another question.

Background Gets Cut Off – Set CSS Element to 100%

When setting background container’s (<div>) height to 100% in CSS, what I see is this:

The background doesn’t fill up to the whole screen although I have set my background div container to 100%. The page looks ok when the window is smaller:

In order to solve this problem, I will have to set the parent’s container to 100% and the background container to min-height instead of height. In my case, my background container (<div>) is under <body>. So, here my css:

body
{
    height: 100%;
}
#background
{
    min-height: 100%;
}

Fixed Background Image with CSS

CSS has attribute to set your background image fixed, meaning the background will be still, not moving even you scroll up and down.

body
{
    background: url("../images/BackgroundPattern.jpg");
    background-attachment: fixed;
}

By setting the background attachment to fixed, your background will be static and only your content will be moving when the page is scrolled.

Keep Footer at Bottom of the Page with CSS

If you design a web page which content is not fill up the whole height of user’s screen, you probably will face the same problem like I did. When a page is not fill up user’s screen, you will end up with your footer floating in the middle of their screen. There will always going to be page that doesn’t have much content.

To keep the footer at, well, bottom, this guy has a good CSS trick! His name is Matthew James Taylor. Some other CSS tricks from Matthew that I like are:

iPad CSS layout
Imagine the headache dealing with iPad horizontal / vertical orientation, and iPhone too! Well, you guess it, Matthew got it all.

Floating boxes with CSS
This is one of the ways to create a liquid layout, or more modern terminology: responsive web design. And the examples.