Archive for the ‘Javascript/CSS’ Category

Tasks: setTimeout, setInterval, setImmediate, I/O, UI rendering

MicroTasks: Promises, Object.observe, MutationObserver

MicroTasks generate from the current task will be executed before the next task.


To create virtual host in Apache is very easy. In 2.4, it becomes easier because Apache will automatically process those and NameVirtualHost won’t have any effect.

I assume you have read this nice guide,

If it’s still not working, set your SELinux permissive.

The basic steps are already covered in Bootstrap website:

In you html head section, make sure the following lines are there

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src=""></script>
<script src=""></script>

Respon.js are required for media queries to be working in IE8. But please note that Respond.js works by requesting a pristine copy of your CSS via AJAX, so if you host your stylesheets on a CDN (or a subdomain), you’ll need to upload a proxy page to enable cross-domain communication.

So to avoid this, you should avoid CDN if you are going to support IE8.

How to copy HTML with CSS

Posted: November 27, 2013 in Javascript/CSS

We have one website designed and implemented by a third party using some CMS system and we want to use its header and footer in our other site.

My first approach is to copy the html via view page source and remotely include the page CSS. The problem is that I need spend time to fix those CSS conflicts with the existing css.

I found this great free Chrome extension SnappySnippet in Chrome web store.

Just right click the html element you want to copy and select Inspect Element, make sure you are inspecting the correct element, click the SnappySnippet tab and click “Create a snippet from inspected element”.

It will generate the HTML and CSS with new element ID, such as DIV_1, DIV_2 … , so that it won’t conflict with the existing css.


1. Facebook style Multiple select box with auto complete function: AutoSuggest

Official Site:

License: MIT and GPL

2. Facebook style auto resize textarea: elastic

Official Site:

License: MIT

3. Twitter style @ recipent in textarea: mentionsinput

Official Site:

License: MIT

4. Image Cropping: jcrop

Official Site:

License: MIT

5. File Uploader: fileuploader

Official Site:

License: MIT license, GNU GPL 2 or later and GNU LGPL 2 or later

6. Scrollbar enhancement: nicescroll

Official Site:

License: MIT

Background: we have a global css file that defines the UI style for common DOM elements, but sometimes we need override it in certain pages.

To override a CSS style, we need understand a selector’s specificity. W3C standard is very clear for this.

6.4.3 Calculating a selector’s specificity

A selector’s specificity is calculated as follows:

  • count 1 if the declaration is from is a ‘style’ attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an element’s “style” attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.)
  • count the number of ID attributes in the selector (= b)
  • count the number of other attributes and pseudo-classes in the selector (= c)
  • count the number of element names and pseudo-elements in the selector (= d)

The specificity is based only on the form of the selector. In particular, a selector of the form “[id=p33]” is counted as an attribute selector (a=0, b=0, c=1, d=0), even if the id attribute is defined as an “ID” in the source document’s DTD.

Concatenating the four numbers a-b-c-d (in a number system with a large base) gives the specificity.

Some examples:

 *             {}  /* a=0 b=0 c=0 d=0 -&gt; specificity = 0,0,0,0 */
 li            {}  /* a=0 b=0 c=0 d=1 -&gt; specificity = 0,0,0,1 */
 li:first-line {}  /* a=0 b=0 c=0 d=2 -&gt; specificity = 0,0,0,2 */
 ul li         {}  /* a=0 b=0 c=0 d=2 -&gt; specificity = 0,0,0,2 */
 ul ol+li      {}  /* a=0 b=0 c=0 d=3 -&gt; specificity = 0,0,0,3 */
 h1 + *[rel=up]{}  /* a=0 b=0 c=1 d=1 -&gt; specificity = 0,0,1,1 */
 ul ol  {}  /* a=0 b=0 c=1 d=3 -&gt; specificity = 0,0,1,3 */  {}  /* a=0 b=0 c=2 d=1 -&gt; specificity = 0,0,2,1 */
 #x34y         {}  /* a=0 b=1 c=0 d=0 -&gt; specificity = 0,1,0,0 */
 style=""          /* a=1 b=0 c=0 d=0 -&gt; specificity = 1,0,0,0 */
<STYLE type="text/css">
#x97z { color: red }
<P ID=x97z style="color: green">

In the above example, the color of the P element would be green. The declaration in the “style” attribute will override the one in the STYLE element because of cascading rule 3, since it has a higher specificity.

It used to be a Javascript best practice to use Array.join(“”) for string concatenation.

But in a world without IE7, things have been changed.

Please just use += statement. Array.join(“”) has serious performance drawbacks in latest browsers.

Please check the below test case. I also verified it in my own project.