User Tools

Site Tools


webdesign:html5-and-javascript

HTML5 and Javascript

Understand about HTML5

HTML5 Browser Support:

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.

Javascript tools

Node.js

refer:

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' }

npm(node package manager for javascript...)

refer:

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

Grunt(Javascript Task Runner)

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.

bower(package manager for the web)

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

Dust

Javascript Framework

Javascript and design Experience

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

Javascript framework comparison

ExtJs

backbone.js

refer:

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.

emberjs

angularjs

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:

Ionic framework base on angularjs

refer:

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.

Top Opensources which using javascript framework

Javascript library

underscore.js

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

requirejs

highcharts

Javascript with cross domain

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

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.

Relaxing the same-origin policy(Nởi lỏng rule gốc)

By Changing origin with document.domain property

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.

The Cross-Origin Resource Sharing method

Cross-document messaging

Jsonp

Web Sockets

form post cross domain

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.

CSS tools

Sass(CSS pre-processor which wroten with Ruby Language)

refer:

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

Less(CSS pre-processor which wroten with Javascript Language)

refer:

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;
      }
    }

Compat Framework

css to less

intern

Bootstrap

Build bootstrap from source with gruntjs

Install some basic tool before build

  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

Build Bootstrap

  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

Create custom style

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;
}

Create custom style for bootstrap with less

Advantages of this method

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);
      }
    }

Custom css with less file which don't change variables of bootstrap.less

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

Custom css with less file and change variables of bootstrap.less

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";

Themes and templates for bootstrap

Build less file in bootswatch

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

Javascript Resources which support for designer

Respond.js

Modernizr

Modernizr – http://modernizr.com/

UI Kits

Flat UI

Boot Flat

webdesign/html5-and-javascript.txt · Last modified: 2018/04/24 23:56 by admin