Sass Basic

Variables
Sass uses the $ symbol to make something a variable

Nesting
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.

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

Mixins
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.

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

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

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 https://www.raymond.cc/blog/10-ad-blocking-extensions-tested-for-best-performance/, they recommend
Firefox:   µBlock origin, µ AdBlock
Chrome:  µBlock Origin, Ghostery and Adguard

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

chrome://settings/content


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.