Don't Worry, Be Happy

Web HotPot

Posted on | In |

keep on programming –> make a living –> marry a girl –> raise a child –> teach him to program !~

Web Hotpot. Source code can be found in our github.
We always see a lot of cool websites. Also, we heared about website elements, such as servers: wamp, lighttpd, frameworks: web.py, twisted, javascripts: angularJS, BootStrap, and some other website techniques. This time, My friend Zhiyue Zu and I want to build our own website systematically, from front to end, from interface to database. We are willing to share our knowledge with others. Also, we’ll appreciate that someone tell us amazing techniques or frameworks.

Ths website is a simply a navigation website, we call it WebTech Navigate. We desire to collect information about techniques that will be use when building a website.

vim

A lot of codeing is necessary to build a website, so editor is important. I heared about emacs, but I’m still more customed in vim.

vim is a powerful editor because of brunches of plugins. Personally, I recommand vundle rather than pathogen because vundle is more advanced to manage the plugins. Excellent plugins can be found in VimAwesome. I have a .vim configuration in my github. So each time when I have to config a new linux machine, I’ll:

1 check if vim is well installed. If not, reinstall.

2 use scp, winscp or git to copy the .vim file.

3 Install vundle

1
$ git clone https://github.com/VundleVim/Vundle.vim.git ~/.vim/bundle/Vundle.vim

4 Launch vim and run

1
:PluginInstall

nginx

I used lighttpd to build my snake game. This time, we choose nginx which seems more professional. Nginx can provide basic HTTP or SMTP service. With fastcgi module, nginx can support all kinds of script files. But when nginx cooperate with nodejs which already has a server service, we will use nginx as a reverse proxy to control the load balance.

1 install nginx in Ubuntu

1
$ sudo apt-get install nginx

2 start the server

1
$ sudo ./usr/sbin/nginx

3 control the server. signals can be stop, quit, reload and reopen

1
$ nginx -s signal

4 revise the configuration file, at /etc/nginx/sites-enabled/

1
2
3
4
5
6
7
8
9
10
11
12
13
upstream myapp{
   least_conn;
   server IP:port_1;
   server IP:port_2;
   ...;
   keepalive 64;
}
server{
    listen 80;
    location / {
        proxy_pass http://myapp;
    }
}

As described in Using nginx as HTTP load balancer There are 3 ways provided by Nginx.

  • round-bin: requests to the application servers are distributed in a round-robin fashion
  • least-connected: next request is assigned to the server with the least number of active connections
  • ip-hashed: a hash-function is used to determine what server should be selected for the next request (based on the client’s IP address)

Load balance across multiple application instances is a commonly used technique for optimizing resource utilization, maximizing throughput, reducing latency, and ensuring fault-tolerant configurations.

Reverse proxy implementation in nginx includes in-band (or passive) server health checks. If the response from a particular server fails with an error, nginx will mark this server as failed, and will try to avoid selecting this server for subsequent inbound requests for a while.

Make sure nginx reload the configuration file, a simple reverse proxy is set up. It works!

node.js

node.js is an event-driven I/O server-side JS environment. It is brillant because with this we can use JS in frot, back and even the server. Node.js can solve the 10k problem easily.
Use nvm to install, manage or transfer node.js for different versions. Use npm to manage javascript packages.
Node provide a bunch of APIs, which can be seen in API Documentation.
Here just list some of them:

  • Console
  • HTTP
  • HTTPS
  • fs(File System)
  • Path
  • Modules

syntax for using modules:

1
const/var valuable = require('module_name');

For example:

1
2
3
4
5
6
7
8
const http = require('http');
http.createServer( (request, response) => {
  response.writeHead(200, {'Content-Type': 'text/plain'});
  response.end('Hello World\n');
}).listen(8124);
console.log('Server running at http://127.0.0.1:8124/');

Another important thing is module loading system.
Built in modules are core modules, use:

1
$ require('http');

user’s modules can be used in the way:

1
$ require(./a.js);

There are two ways to export:
1 Add functions and objects to the root of your module, you can add them to the special exports object.
circle.js

1
2
3
4
5
6
7
8
9
const PI = Math.PI;
exports.area = function (r) {
  return PI * r * r;
};
exports.circumference = function (r) {
  return 2 * PI * r;
};

foo.js:

1
2
const circle = require('./circle.js');
console.log( `The area of a circle of radius 4 is ${circle.area(4)}`);

2 If you want the root of your module’s export to be a function (such as a constructor) or if you want to export a complete object in one assignment instead of building it one property at a time, assign it to module.exports instead of exports
square module is defined in square.js:

1
2
3
4
5
6
7
8
// assigning to exports will not modify module, must use module.exports
module.exports = function(width) {
  return {
    area: function() {
      return width * width;
    }
  };
}

bar.js:

1
2
3
const square = require('./square.js');
var mySquare = square(2);
console.log(`The area of my square is ${mySquare.area()}`);

Way 1 is recommanded, so that it’s scalable.

###nvm
The usage of nvm can be found at Node Version Manager.
Install nvm with script:

1
$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.30.2/install.sh | bash

or with Wget:

1
wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.30.2/install.sh | bash

nvm repositry can be found at ~/.nvm
Install/use/run a certain version of node.js:

1
$ nvm install/use/run [version_num]

or to use the stable version

1
$ nvm install/use/run stable

Find the path of a certain version of node.js:

1
$ nvm which [version_num]

set default version of node.js:

1
nvm alias default [version_num]

use ls to check all the version installed, and the sversion of stable and default.

1
$ nvm ls

npm

npm is package manager for javascript, here we use it as the manager for node.js.
Search on npm website to find the package you need, and use the command to install the package:

1
$ npm install [package_name]

Moreover, it’s better to use the package.json. Inside the project, run:

1
$ npm init

If it’s a new project download from other place, already have the json file, just run the command, so the npm will install the dependencies automatically:

1
$ npm install

When install some package, which contain some global commands, such as express generator, run:

1
$ npm install [package_name] -g

When installing a package, which need to be record in the json, run:

1
$ npm install [package_name] --save

Update:

1
$ npm update

Uninstall:

1
$ npm uninstall [package_name]

Uninstall along with the json record:

1
$ npm uninstall --save [package_name]

express

Express is a web framework for node.js.
Install express inside a project:

1
$ npm install express --save

Or, we want to create a project based on node.js and express, we can use express generator directlly, like described in the Express application generator:

1
2
3
4
$ npm install -g express-generator
$ express [path] && cd [path]
& npm install
& npm start

Express has lots of APIs too. Express API 4.x.

application

1
2
var express = require('express');
var app = express();

There are several general functions:

1
2
3
4
app.set(name, value);
app.use([path,] function [, function...]);
app.get(name);
app.get(path, callback [, callback ...]);

router

example of basic route:

1
2
3
4
5
6
7
var express = require('express');
var app = express();
// respond with "hello world" when a GET request is made to the homepage
app.get('/', function(req, res) {
  res.send('hello world');
});

req and res can be treated as a data set or structure, they have many useful members
like req.ip req.hostname req.cookies req.secure.

mongoose

grunt

Javascript Tsak runner.
Grunt should be installed as global:

1
$ npm install -g grunt-cli

There are many grunt plugins which can support the js tasks. Use the way to install them and add into package.json in the developing environment.

1
2
$ npm install grunt --save-dev
$ npm install grunt-contrib-jshint --save-dev

Inside the folder, there would be a file named as Gruntfile.js or Gruntfile.coffee.
Example of Grunt file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
module.exports = function(grunt) {
  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        src: 'src/<%= pkg.name %>.js',
        dest: 'build/<%= pkg.name %>.min.js'
      }
    }
  });
  // Load the plugin that provides the "uglify" task.
  grunt.loadNpmTasks('grunt-contrib-uglify');
  // Default task(s).
  grunt.registerTask('default', ['uglify']);
};

options:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
grunt.initConfig({
  concat: {
    options: {
      // Task-level options may go here, overriding task defaults.
    },
    foo: {
      options: {
        // "foo" target options may go here, overriding task-level options.
      },
    },
    bar: {
      // No options specified; this target will use task-level options.
    },
  },
});

file compact:

1
2
3
4
5
6
7
8
9
10
11
12
13
grunt.initConfig({
  jshint: {
    foo: {
      src: ['src/aa.js', 'src/aaa.js']
    },
  },
  concat: {
    bar: {
      src: ['src/bb.js', 'src/bbb.js'],
      dest: 'dest/b.js',
    },
  },
});

Grunt can be used to:
1 copy the min.js in developing environment to ./public/javascript as same as css files.
2 compress your own js, css file into destination
3 watch the js files to see if there is syntax error.

Useful tasts:

mongodb

Front end

HTML

markup language. HTML is used to establish a page’s structure. It also lets us add text, links and images.

1
2
3
4
5
<!DOCTYPE html>
<html>
	<body>
    </body>
</html>

body contains the actual content of the web page.
general usage:
headings. h1 to h6. <h1>text</h1>
paragraph. <p>text</p>
Links. <a href="">text</a>
Images. <img src=" ">
Lists.

1
2
3
4
<ul>
	<li></li>
    <li></li>
</ul>

CSS

CSS is used to control the design and layout of the page.
use the syntax to load css to a html:

1
<link rel="stylesheet" href="xxx.css">

####rules
Start with selector, inside the brace, are property and value pairs.

1
2
3
h1 {
	color:red;
}

1
2
3
4
5
6
7
8
9
10
<div class = "my_class">
.my_class {
	color: blue;
}
or be more specific
.my_class p {
	color: green;
}
1
2
3
4
5
<input type='button' id = 'Return To Top'>
#Return To Top {
	color:#ffffff;
}

####colors

  • Word: red
  • RGB: 0 to 255. rgb(102,153,0)
  • Hex: 00 to ff. #9933CC

general

font-family
font-size (pixels, ems, or rems),px, em
background-color
background-image

layout

padding; border; margin; position

not found :P

####selector
CSS selector

jQuery

jQuery is a Javascript Library. write less, do more
For a comparison, STL(standard temlate Library) in C++, which provide convenient functions by encapusulationg the lower leverl of C++.
We can know jQuery API fron official website. Also can learn from codeacademy and w3schools.
jQuery library contains the following features:

  • HTML/DOM manipulation
  • CSS manipulation
  • HTML event methods
  • Effects and animations
  • AJAX
  • Utilities

####Syntax:

1
$(selector).action()

Like the css selector:

1
2
3
$("p").hide() - hides all <p> elements.
$(".test").hide() - hides all elements with class="test".
$("#test").hide() - hides the element with id="test".

The document ready event:

1
2
3
4
5
6
7
8
9
10
11
12
13
$(document).ready(function(){
   // jQuery methods go here...
});
or
$(function(){
   // jQuery methods go here...
});

Event

  • Mouse
    click; dbclick; mouseenter; mouseleave;
  • Keyboard
    keypress; keydown; keyup;
  • Form
    submit; change; focus; blur;
  • Document/Window
    load; resize; scroll; unload;
    pass a function to the event:
1
2
3
$("p").click(function(){
  // action goes here!!
});

Effect

Hide/Show; Fade; Slide; Animate; … See the syntax on the API.

Manipulate HTML/CSS

Get content
Set content
Add or remove
change the css attrbite
…

jQuery AJAX

AJAX = Asynchronous JavaScript and XML.
AJAX is about loading data in the background and display it on the webpage, without reloading the whole page

The load() method loads data from a server and puts the returned data into the selected element:

1
$(selector).load(URL,data,callback);

eg:

1
2
3
4
<h2>jQuery and AJAX is FUN!!!</h2>
<p id="div1">This is some text in a paragraph.</p>
$("#div1").load("demo_test.txt");

The jQuery get() and post() methods are used to request data from the server with an HTTP GET or POST request:

1
2
$.get(URL,callback);
$.post(URL,data,callback);

But generally, modern framework like AngularJS, react, they have their own mechanism to update certain DOM.

AngularJS

sementicUI

domain name

AWS EC2

Extra

###Disqus

###Google analysic