HTML5 and Javascript

HTML5 Browser Support:

• http://www.w3schools.com/html/html5_browsers.asp

HTML5 browser support:

• HTML5 is supported in all modern browsers.
• In addition, all browsers, old and new, automatically handle unrecognized elements as inline elements. Because of this, you can “teach” old browsers to handle “unknown” HTML elements.→for example: You can even teach stone age IE6 (Windows XP 2001) how to handle unknown HTML elements.

refer:

• https://nodejs.org/
• tutorials: https://www.w3schools.com/nodejs/default.asp

Node.js® is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.

Node.js makes it possible to write applications in JavaScript on the server. It’s built on the V8 JavaScript runtime and written in C++ — so it’s fast. Originally, it was intended as a server environment for applications, but developers started using it to create tools to aid them in local task automation. Since then, a whole new ecosystem of Node-based tools (such as Grunt and Gulp) has evolved to transform the face of front-end development.

To make use of these tools (or packages) in Node.js we need to be able to install and manage them in a useful way. This is where npm, the node package manager, comes in. It installs the packages you want to use and provides a useful interface to work with them. But before we can start using npm, we first have to install Node.js on our system.

Check node version:

node --version

output:

v4.2.6

Install nodejs from source on linux:

1. Step1: Get nodejs source

   https://nodejs.org/dist/v8.11.1/node-v8.11.1.tar.gz

2. Step2: Install

   tar xzvf node-v* && cd node-v*
   ./configure
   make
   make install

3. Error:

   WARNING: C++ compiler too old, need g++ 4.9.4 or clang++ 3.4.2 (CXX=g++)

Install nodejs from linux binary: https://github.com/nodejs/help/wiki/Installation

1. Step1: Get linux binay

   wget https://nodejs.org/dist/v8.11.1/node-v8.11.1-linux-x64.tar.xz

2. Step2: Unzip linux binary to /usr/local/nodejs

   mkdir /usr/local/nodejs
   yum install xz
   tar -xJvf node-v8.11.1-linux-x64.tar.xz -C /usr/local/nodejs

3. Step3: Set the environment variable ~/.profile or ~/.bash_profile, add below to the end

   # Nodejs
   export NODEJS_HOME=/usr/local/nodejs/node-v8.11.1/bin
   export PATH=$NODEJS_HOME:$PATH

4. Step4:Refresh profile

   .~/.profile

5. Step6: Check environment:

   echo $PATH
   /usr/local/nodejs/node-v8.11.1/bin:/usr/local/sbin:/usr/local/bin:/sbin:/bin:/usr/sbin:/usr/bin:/root/bin

6. Step5: Test installation using

   node -v
   npm version

   output:

   v8.11.1
   { npm: '5.6.0',
     ares: '1.10.1-DEV',
     cldr: '32.0',
     http_parser: '2.8.0',
     icu: '60.1',
     modules: '57',
     nghttp2: '1.25.0',
     node: '8.11.1',
     openssl: '1.0.2o',
     tz: '2017c',
     unicode: '10.0',
     uv: '1.19.1',
     v8: '6.2.414.50',
     zlib: '1.2.11' }

refer:

• https://www.npmjs.com/
• https://www.sitepoint.com/beginners-guide-node-package-manager/

Install and Update npm:

• Install npm: Install nodejs ⇒ npm will be installed automatically
• Update npm:

  npm install -g npm

Some command lines of npm:

• help

  npm help

  output:

  Usage: npm <command>
  
  where <command> is one of:
      access, adduser, bin, bugs, c, cache, completion, config,
      ddp, dedupe, deprecate, dist-tag, docs, edit, explore, get,
      help, help-search, i, init, install, install-test, it, link
      list, ln, logout, ls, outdated, owner, pack, ping, prefix,
      prune, publish, rb, rebuild, repo, restart, root, run,
      run-script, s, se, search, set, shrinkwrap, star, stars,
      start, stop, t, tag, team, test, tst, un, uninstall,
      unpublish, unstar, up, update, v, version, view, whoami
  
  npm <cmd> -h     quick help on <cmd>
  npm -l           display full usage info
  npm help <term>  search for help on <term>
  npm help npm     involved overview
  
  Specify configs in the ini-formatted file:
      C:\Users\anhvc\.npmrc
  or on the command line via: npm <command> --key value
  Config info can be viewed via: npm help config
  
  [email protected] C:\Users\anhvc\AppData\Roaming\npm\node_modules\npm

• search node module:

  npm search <modulename>

• install node module:

  npm install -g <modulename>

  (Option: -g → global modules)

• install all node modules dependencies in package.json
  • install to the local node_modules folder

    npm install

  • install as global packages:

    npm install -g

refer: http://gruntjs.com/

In one word: automation. The less work you have to do when performing repetitive tasks like minification, compilation, unit testing, linting, etc, the easier your job becomes. After you've configured it through a Gruntfile, a task runner can do most of that mundane work for you—and your team—with basically zero effort.

A typical setup will involve adding two files to your project: package.json and the Gruntfile.

• package.json: This file is used by npm to store metadata for projects published as npm modules. You will list grunt and the Grunt plugins your project needs as devDependencies in this file.
• Gruntfile: This file is named Gruntfile.js or Gruntfile.coffee and is used to configure or define tasks and load Grunt plugins. When this documentation mentions a Gruntfile it is talking about a file, which is either a Gruntfile.js or a Gruntfile.coffee.

refer: http://bower.io/ Web sites are made of lots of things — frameworks, libraries, assets, utilities, and rainbows. Bower manages all these things for you.

• Install bower

  npm install -g bower

• Using bower to search all libraries which contain the word “jquery”:

  bower search jquery

  output

  ...............................
  jquery-autogrow-textarea git://github.com/bensampaio/jquery.autogrow.git
  jquery-formchecker git://github.com/eborio/jquery-formchecker.git
  inview-jquery-plugin git://github.com/vasanthk/InView-jQuery-Plugin.git
  good-form git://github.com/foundation-mts/jquery.form.js.git
  jquery-fivehundredpx git://github.com/denkfabrik-neueMedien/jquery-fivehundredpx.git
  ...............................

• Create bower.json from bower_components in project

  bower init

• Install all packages which were configured in bower.json to bower_components

  bower install

• Install single package to your project(You must install git before run bower install):

  bower install <package>

  For example:

  bower install good-form

refer: http://akdubya.github.io/dustjs/

Trong trường hợp ta có 1 bộ magamenu với HTML và javascript mẫu, làm thế nào bỏ megamenu vào design của mình?

• Step1: Ta đem nguyên bộ HTML và javascript này đem vào sử dụng trong website → Tiết kiệm được một khoảng thời gian dài để viết lại thuật toán phức tạp(Bao gồm layout, hiệu ứng javascript…) để hiển thị mega menu bằng javascript
• Step2: Ta chỉnh sửa css (màu sắc, layout) cho phù hợp với giao diện của mình

refer: https://www.airpair.com/js/javascript-framework-comparison

refer:

• http://backbonejs.org/
• http://backbonetutorials.com/organizing-backbone-using-modules/
• https://github.com/kjbekkelund/writings/tree/master/published
• https://github.com/ccoenraets/backbone-directory
• https://github.com/ccoenraets/nodecellar
• https://github.com/ccoenraets/backbone-cellar

Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.

refer: http://emberjs.com/

refer: https://angularjs.org/
AngularJS lets you write client-side web applications as if you had a smarter browser. It lets you use good old HTML (or HAML, Jade and friends!) as your template language and lets you extend HTML’s syntax to express your application’s components clearly and succinctly. It automatically synchronizes data from your UI (view) with your JavaScript objects (model) through 2-way data binding. To help you structure your application better and make it easy to test, AngularJS teaches the browser how to do dependency injection and inversion of control.
And it helps with server-side communication, taming async callbacks with promises and deferreds. It also makes client-side navigation and deeplinking with hashbang urls or HTML5 pushState a piece of cake. Best of all?? It makes development fun!

opensource apps base on angularjs:

• https://github.com/angular-app/angular-app
• ionic mobile framework base on angularjs: https://github.com/driftyco/ionic

refer:

• ionic: https://github.com/driftyco/ionic
• Ionic app with WordPress integration: https://github.com/scottopolis/wpIonic

Ionic is a powerful HTML5 SDK that helps you build native-feeling mobile apps using web technologies like HTML, CSS, and Javascript.

Ionic is focused mainly on the look and feel, and UI interaction of your app. That means we aren't a replacement for PhoneGap or your favorite Javascript framework. Instead, Ionic simply fits in well with these projects in order to simplify one big part of your app: the front end.

• https://github.com/driftyco/ionic
• https://github.com/tastejs/todomvc(http://todomvc.com/)
• https://github.com/jmcunningham/AngularJS-Learning

refer: http://underscorejs.org/
Underscore is a JavaScript library that provides a whole mess of useful functional programming helpers without extending any built-in objects

refer: http://requirejs.org/

refer: http://www.highcharts.com/

a web browser permits scripts contained in a first web page to access data in a second web page(Or cross domain) which Same-origin policy

refer: http://en.wikipedia.org/wiki/Same-origin_policy
In computing, the same-origin policy is an important concept in the web application security model. Under the policy, a web browser permits scripts contained in a first web page to access data in a second web page, but only if both web pages have the same origin. An origin is defined as a combination of URI scheme, hostname, and port number\\. Example:

This mechanism bears a particular significance for modern web applications that extensively depend on HTTP cookies to maintain authenticated user sessions, as servers act based on the HTTP cookie information to reveal sensitive information or take state-changing actions. A strict separation between content provided by unrelated sites must be maintained on the client side to prevent the loss of data confidentiality or integrity.

refer: https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy

A page may change its own origin with some limitations. A script can set the value of document.domain to a subset of the current domain. If it does so, the shorter domain is used for subsequent origin checks. For example, assume a script in the document at http://store.company.com/dir/other.html executes the following statement:

document.domain = "company.com";

After that statement executes, the page would pass the origin check with http://company.com/dir/page.html. However, by the same reasoning, company.com could not set document.domain to othercompany.com.

The port number is kept separately by the browser. Any call to the setter, including document.domain = document.domain causes the port number to be overwritten with null. Therefore one cannot make company.com:8080 talk to company.com by only setting document.domain = “company.com” in the first. It has to be set in both so that port numbers are both null.

refer:

• https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
• http://stackoverflow.com/questions/298745/how-do-i-send-a-cross-domain-post-request-via-javascript
• http://www.html5rocks.com/en/tutorials/cors/

The same origin policy is applicable only for browser side programming languages. So if you try to post to a different server than the origin server using JavaScript, then the same origin policy comes into play but if you post directly from the form i.e. the action points to a different server like:

<form action="http://someotherserver.com">

and there is no javascript involved in posting the form, then the same origin policy is not applicable.

refer:

• http://sass-lang.com/guide
• http://sass-lang.com/

Install:

• http://sass-lang.com/install

Sass is an extension of CSS that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized, and get small stylesheets up and running quickly, particularly with the help of the Compass style library.

Install sass with ruby:

1. Step1: download and install Ruby from http://rubyinstaller.org/
2. Step2: install sass with gem tool:

   gem install sass
   gem install compass

Using sass:

• display options of sass command:

  sass --help

• compile sass to css:

  sass input.scss output.css

• compass help:

  compass --help

  output

  Primary Commands:
    * clean       - Remove generated files and the sass cache
    * compile     - Compile Sass stylesheets to CSS
    * create      - Create a new compass project
    * init        - Add compass to an existing project
    * watch       - Compile Sass stylesheets to CSS when they change

• Using compass to compile sass to css(base on config.rb file):

  compass compile

Install User-defined language scss to edit with notepad++ :

1. Step1: download user-defined language for scss from https://github.com/marvinlabs/notepad-plus-plus-scss-syntax-highlighting
2. Step2: Go to Language→Define Your Language to import 2 xml files
3. Step3: go to your Notepad++ folder then to plugins/APIs/ and duplicate the css.xml and rename this file to SCSS-Light.xml or SCSS-Dark.xml

refer:

• http://lesscss.org/
• less editor: http://crunchapp.net/

Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themable and extendable.

Less(less.js) runs inside Node, in the browser and inside Rhino. There are also many 3rd party tools that allow you to compile your files and watch for changes.

Install less:

npm install -g less

Compile less file to css:

lessc styles.less > styles.css

Basic about less language:

• Variables: less content

  @nice-blue: #5B83AD;
  @light-blue: @nice-blue + #111;
   
  #header {
    color: @light-blue;
  }

  output:

  #header {
    color: #6c94be;
  }

• Mixins:Mixins are a way of including (“mixing in”) a bunch of properties from one rule-set into another rule-set. So say we have the following class:

  .bordered {
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
  }And we want to **use these properties inside other rule-sets**. Well, we just have to drop in the name of the class where we want the properties, like so:<code css>
  #menu a {
    color: #111;
    .bordered;
  }
   
  .post a {
    color: red;
    .bordered;
  }

  The properties of the .bordered class will now appear in both #menu a and .post a. (Note that you can also use #ids as mixins.)

• Nested rules: Less gives you the ability to use nesting instead of, or in combination with cascading. Let's say we have the following CSS:

  #header {
    color: black;
  }
  #header .navigation {
    font-size: 12px;
  }
  #header .logo {
    width: 300px;
  }

  In Less, we can also write it this way:

  #header {
    color: black;
    .navigation {
      font-size: 12px;
    }
    .logo {
      width: 300px;
    }
  }

  The resulting code is more concise, and mimics the structure of your HTML. You can also bundle pseudo-selectors with your mixins using this method. Here's the classic clearfix hack, rewritten as a mixin (& represents the current selector parent):

  .clearfix {
    display: block;
    zoom: 1;
   
    &:after {
      content: " ";
      display: block;
      font-size: 0;
      height: 0;
      clear: both;
      visibility: hidden;
    }
  }

refer: http://compass-style.org/

refer:

• http://css2less.cc/
• https://github.com/jonschlinkert/grunt-refactor
• https://github.com/thomaspierson/libcss2less
• https://github.com/sickill/css2less

refer: https://github.com/theintern/intern

refer:

• http://getbootstrap.com/
• http://www.helloerik.com/bootstrap-3-less-workflow-tutorial
• http://slicejack.com/bootstrap-with-less-workflow/
• http://www.helloerik.com/bootstrap-3-grid-introduction
• http://www.lavishbootstrap.com/

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web

1. Step1: Install npm tool by install nodejs to d:\tools\nodejs
2. Step2: Install grunt(Package Manager for Javascript):

   npm install -g grunt-cli

1. Step1: Navigate to the root /bootstrap/ directory, then run below command:

   npm install

   ⇒ npm will look at the package.json file and automatically install the necessary local dependencies listed there

2. Step2: Regenerates the /dist/ directory with compiled and minified CSS and JavaScript files

   grunt dist

You can create a custom navbar class(navbar-custom), and then reference it to change the navbar without impacting other Bootstrap navbars..

<nav class="navbar navbar-custom">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">...
    </button>
    <a class="navbar-brand" href="#">Title</a>
  </div>
   ...
</nav>

CSS

.navbar-custom {
    background-color:#229922;
    color:#ffffff;
    border-radius:0;
}
 
.navbar-custom .navbar-nav > li > a {
    color:#fff;
}
.navbar-custom .navbar-nav > .active > a, .navbar-nav > .active > a:hover, .navbar-nav > .active > a:focus {
    color: #ffffff;
    background-color:transparent;
}
.navbar-custom .navbar-brand {
    color:#eeeeee;
}

Using Less, especially with Bootstrap 3, gives you a few advantages that really make it a awesome choice

Advantages of less language:

• Changing variables in one place can have wide-reaching effects, for super easy global customization
• Augment, shift, and change existing styles and variables, or roll your own
• Componentization. You can break your Less up into smaller files for very easy editing and separation, great for applications where you’re using version control like GitHub

Advantages of importing bootstrap.less:

• Have a clean, customized singular CSS file
• You can easily comment out any part of Bootstrap you don’t need or want, right down to the single line
• Easily override Bootstrap variables/mixins/classes with your own
• We can easily reused the variables and mixins of bootstrap in new styles, for example

  .main-content {
    .make-row();
    .sidebar {
      padding: 20px;
      @media(min-width: @screen-desktop) {
        padding: 30px;
      }
      h2 {
        font-size: 20px;
        @media(min-width: @screen-desktop) {
          font-size: 30px
        }
      }
      .make-sm-column(2);
      .make-md-column(3);
    }
    .content-area {
      line-height: 1.2em;
      @media(min-width: @screen-desktop) {
        line-height: 1.6em;
      }
      h1 {
        font-size: 30px;
        @media(min-width: @screen-desktop) {
          font-size: 40px;
        }
      }
      .make-sm-column(10);
      .make-md-column(9);
    }
  }

We create the new less file and using less tool to rebuild new less file

1. Step1: Create style.less which import bootstrap and other changes in nav.less, header.less, footer.less

   @import "bootstrap/bootstrap.less";
   @import "font-awesome/font-awesome.less";
    
   @import "variables.less";
   @import "mixins.less";
   @import "nav.less";
   @import "header.less";
   @import "footer.less";

2. Step2: create files variables.less, mixins.less, nav.less, header.less, footer.less which contain your changes
3. Step3: Using less tool to compile style.css

   lessc style.less > style.css

refer: http://slicejack.com/bootstrap-with-less-workflow/

1. Step1: create custom-variables.less:

   // Single primary color that all mixins use. Str8 ballin.
   @primary:        hsl(202, 100%, 50%);
    
   // Primary Variants -
   @primaryLight:   hsl(hue(@primary), 100%, 70%);
   @primaryDark:    hsl(hue(@primary), 60%, 40%);
   @primaryFaded:   hsl(hue(@primary), 60%, 65%);
    
   // 180degree Variants
   @variant:         spin((@primary), 180);
   @variantLight:    hsl(hue(@variant), 100%, 70%);
   @variantDark:     hsl(hue(@variant), 60%, 40%);
   @variantFaded:    hsl(hue(@variant), 60%, 65%);
    
   // 90degree Variants
   @corner:         spin((@primary), 70);
   @cornerLight:    hsl(hue(@corner), 100%, 70%);
   @cornerDark:     hsl(hue(@corner), 60%, 40%);
   @cornerFaded:    hsl(hue(@corner), 60%, 65%);

2. Step2: create styles.less which import custom-variables.less and other less files of bootstrap(We create this file by editing content of bootstrap.less):

   // Core variables and mixins
   @import "boostrap/variables.less";
   @import "boostrap/custom-variables.less";
   @import "boostrap/mixins.less";
    
   // Reset and dependencies
   @import "boostrap/normalize.less";
   @import "boostrap/print.less";
   @import "boostrap/glyphicons.less";
    
   // Core CSS
   @import "boostrap/scaffolding.less";
   @import "boostrap/type.less";
   @import "boostrap/code.less";
   @import "boostrap/grid.less";
   @import "boostrap/tables.less";
   @import "boostrap/forms.less";
   @import "boostrap/buttons.less";
    
   // Components
   @import "boostrap/component-animations.less";
   @import "boostrap/dropdowns.less";
   @import "boostrap/button-groups.less";
   @import "boostrap/input-groups.less";
   @import "boostrap/navs.less";
   @import "boostrap/navbar.less";
   @import "boostrap/breadcrumbs.less";
   @import "boostrap/pagination.less";
   @import "boostrap/pager.less";
   @import "boostrap/labels.less";
   @import "boostrap/badges.less";
   @import "boostrap/jumbotron.less";
   @import "boostrap/thumbnails.less";
   @import "boostrap/alerts.less";
   @import "boostrap/progress-bars.less";
   @import "boostrap/media.less";
   @import "boostrap/list-group.less";
   @import "boostrap/panels.less";
   @import "boostrap/responsive-embed.less";
   @import "boostrap/wells.less";
   @import "boostrap/close.less";
    
   // Components w/ JavaScript
   @import "boostrap/modals.less";
   @import "boostrap/tooltip.less";
   @import "boostrap/popovers.less";
   @import "boostrap/carousel.less";
    
   // Utility classes
   @import "boostrap/utilities.less";
   @import "boostrap/responsive-utilities.less";

refer:

• https://startbootstrap.com/template-categories/all/
• http://bootswatch.com/: https://github.com/thomaspark/bootswatch
• http://www.bootstrapzero.com/: https://github.com/iatek/bootstrap-zero
• http://wrapbootstrap.com/
• https://github.com/no-dice/django-bootstrap-themes
• http://builtwithbootstrap.com/
• http://startbootstrap.com/
• http://bootsnipp.com/

Create below script to build all less file in bootswatch(Base on https://github.com/no-dice/django-bootstrap-themes):

#!/bin/sh
 
set -e
 
cd bootstrap_themes/static/bootstrap/themes
for theme in *; do
  if [ -d "$theme" ]; then
    mkdir -p "$theme/css"
    lessc "$theme/less/bootstrap.less" > "$theme/css/bootstrap.css"
    recess --compress "$theme/css/bootstrap.css" > "$theme/css/bootstrap.min.css"
  fi
done

Respond.js: https://github.com/scottjehl/Respond

Modernizr – http://modernizr.com/

refer:

• http://designmodo.github.io/Flat-UI/docs/getting-started.html
• https://github.com/designmodo/Flat-UI

refer:

• http://bootflat.github.io/
• https://github.com/bootflat/bootflat.github.io