Friday, September 4, 2015

Sass Basic

Sass uses the $ symbol to make something a variable

Sass will let you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML.

Partials (_partials.scss)
A partial is simply a Sass file named with a leading underscore. This is a great way to modularize your CSS and help keep things easier to maintain.

CSS has an import option that lets you split your CSS into smaller, more maintainable portions. Sass partials are used with the @import directive.


A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. A good use of a mixin is for vendor prefixes. To create a mixin you use the @mixin directive and give it a name. After you create your mixin, you can then use it as a CSS declaration starting with @include followed by the name of the mixin.

Using @extend lets you share a set of CSS properties from one selector to another.


Doing math in your CSS is very helpful. Sass has a handful of standard math operators like +, -, *, /, and %.

Thursday, September 3, 2015

Ad Blocking Extensions for Chrome and Firefox

  • AdBlock for Chrome 
  • AdBlock Plus for Chrome/Firefox
  • AdBlock Pro for Chrome
  • Adguard for Chrome/Firefox
  • AdRemover for Chrome
  • Ghostery for Chrome/Firefox
  • Simply Block Ads! for Chrome
  • SuperBlock AdBlocker for Chrome 
  • µ Adblock for Firefox
  • µBlock Origin for Chrome/Firefox  
Based on the performance test report from, they recommend
Firefox:   µBlock origin, µ AdBlock
Chrome:  µBlock Origin, Ghostery and Adguard

Wednesday, September 2, 2015

Javascript detect Chinese Character

Here is the function to detect Chinese Chracters. However, we need do more research about CJK (Chinese, Japanese, Korean) about the unicode character range.

function isChineseCharacter(str) {

    var re1 = new RegExp("^[\u4E00-\uFA29]*$"); //Chinese character range
    var re2 = new RegExp("^[\uE7C7-\uE7F3]*$"); //non Chinese character range
    str = str.replace(/\s/g, '');

    if (!re1.test(str) || re2.test(str)) {
        console.log("Oops, Please input Chinese character.");
        return false;

    console.log('Chinese character');
    return true;

Chrome throws SecurityException when access sessonStorage or localStorage


Under Settings > Privacy > Content settings, change the cookies' settings to "Allow local data to be set" or the second option. Also don't check "Block third-party cookies and site data".

When the option checked, Iframe in Chrome will throw error: Uncaught SecurityError: Failed to read the 'sessionStorage' property from 'Window'.

My understanding is: site data can be sessionStorage or localStorage. Suggest Chrome changes the section title from "Cookies" to "Cookies and site data".:-)

When "Block third-party cookies and site data" is checked, iframe site will be considered third-party.