HTML5 Browser Support:
HTML5 browser support:
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:
https://nodejs.org/dist/v8.11.1/node-v8.11.1.tar.gz
tar xzvf node-v* && cd node-v* ./configure make make install
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
wget https://nodejs.org/dist/v8.11.1/node-v8.11.1-linux-x64.tar.xz
mkdir /usr/local/nodejs yum install xz tar -xJvf node-v8.11.1-linux-x64.tar.xz -C /usr/local/nodejs
# Nodejs export NODEJS_HOME=/usr/local/nodejs/node-v8.11.1/bin export PATH=$NODEJS_HOME:$PATH
.~/.profile
echo $PATH /usr/local/nodejs/node-v8.11.1/bin:/usr/local/sbin:/usr/local/bin:/sbin:/bin:/usr/sbin:/usr/bin:/root/bin
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:
Install and Update npm:
npm install -g npm
Some command lines of npm:
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
npm@3.10.6 C:\Users\anhvc\AppData\Roaming\npm\node_modules\npm
npm search <modulename>
npm install -g <modulename>
(Option: -g → global modules)
npm install
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.
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.
npm install -g bower
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 ...............................
bower init
bower install
bower install <package>
For example:
bower install good-form
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?
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.
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:
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.
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:
| 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.
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:
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:
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:
gem install sass gem install compass
Using sass:
sass --help
sass input.scss output.css
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
compass compile
Install User-defined language scss to edit with notepad++ :
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:
@nice-blue: #5B83AD; @light-blue: @nice-blue + #111; #header { color: @light-blue; }
output:
#header { color: #6c94be; }
.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.)
#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:
refer:
Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web
npm install -g grunt-cli
npm install
⇒ npm will look at the package.json file and automatically install the necessary local dependencies listed there
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:
Advantages of importing bootstrap.less:
.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
@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";
lessc style.less > style.css
refer: http://slicejack.com/bootstrap-with-less-workflow/
// 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%);
// 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:
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: