====== HTML5 and Javascript ====== ===== Understand about HTML5 ===== 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. ===== Javascript tools ===== ==== Node.js ==== 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 [[webdesign:html5-and-javascript#grunt_javascript_task_runner|Grunt]] and Gulp) has evolved to transform the face of front-end development. **To make use of these tools (or packages) in Node.j**s we need to be able to install and manage them in a useful way. This is where [[webdesign:html5-and-javascript#npm_node_package_manager_for_javascript|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: - Step1: Get nodejs source https://nodejs.org/dist/v8.11.1/node-v8.11.1.tar.gz - Step2: Install tar xzvf node-v* && cd node-v* ./configure make make install - 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 - Step1: Get linux binay wget https://nodejs.org/dist/v8.11.1/node-v8.11.1-linux-x64.tar.xz - 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 - 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 - Step4:Refresh profile .~/.profile - 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 - 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: * 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 where 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 -h quick help on npm -l display full usage info npm help search for help on npm help npm involved overview Specify configs in the ini-formatted file: C:\Users\anhvc\.npmrc or on the command line via: npm --key value Config info can be viewed via: npm help config npm@3.10.6 C:\Users\anhvc\AppData\Roaming\npm\node_modules\npm * search node module: npm search * install node module: npm install -g (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 For example: bower install good-form ==== Dust ==== refer: http://akdubya.github.io/dustjs/ ===== 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 ==== refer: https://www.airpair.com/js/javascript-framework-comparison ==== ExtJs ==== ==== backbone.js ==== 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**. ==== emberjs ==== refer: http://emberjs.com/ ==== 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: * https://github.com/angular-app/angular-app * ionic mobile framework base on angularjs: https://github.com/driftyco/ionic ==== Ionic framework base on angularjs ==== 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. ==== Top Opensources which using javascript framework ==== * https://github.com/driftyco/ionic * https://github.com/tastejs/todomvc(http://todomvc.com/) * https://github.com/jmcunningham/AngularJS-Learning ===== 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 ==== refer: http://requirejs.org/ ==== highcharts ==== refer: http://www.highcharts.com/ ===== 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: ^URL^Outcome^Reason^ |http://store.company.com/dir2/other.html|Success| |http://store.company.com/dir/inner/another.html|Success| |https://store.company.com/secure.html|Failure|Different protocol| |http://store.company.com:81/dir/etc.html|Failure|Different port| |http://news.company.com/dir/other.html|Failure|Different host| 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) ==== refer: https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy === 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 === 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/ === 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:
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: * 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: - Step1: download and install Ruby from http://rubyinstaller.org/ - 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++** : - Step1: download user-defined language for scss from https://github.com/marvinlabs/notepad-plus-plus-scss-syntax-highlighting - Step2: Go to **Language->Define Your Language** to import 2 xml files - 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: * 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: #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 ==== refer: http://compass-style.org/ ==== css to less ==== refer: * http://css2less.cc/ * https://github.com/jonschlinkert/grunt-refactor * https://github.com/thomaspierson/libcss2less * https://github.com/sickill/css2less ==== intern ==== refer: https://github.com/theintern/intern ===== Bootstrap ===== 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 ==== Build bootstrap from source with gruntjs ==== === Install some basic tool before build === - Step1: Install **npm** tool by **install nodejs** to d:\tools\nodejs - Step2: Install **grunt**(Package Manager for Javascript): npm install -g grunt-cli === Build Bootstrap === - 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** - 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**.. 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 - 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"; - Step2: create files **variables.less, mixins.less, nav.less, header.less, footer.less** which contain your changes - 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/ - 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%); - 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 ==== 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/ ==== 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 ==== Respond.js: https://github.com/scottjehl/Respond ==== Modernizr ==== Modernizr – http://modernizr.com/ ===== UI Kits ===== ==== Flat UI ==== refer: * http://designmodo.github.io/Flat-UI/docs/getting-started.html * https://github.com/designmodo/Flat-UI ==== Boot Flat ==== refer: * http://bootflat.github.io/ * https://github.com/bootflat/bootflat.github.io