.

Browser

0. HTML5 Canvas

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

1. Caman JS

http://camanjs.com/

Orientation: Canvas Enhancement

(ca)nvas (man)ipulation

work on both browser and node

// browser

Caman("#canvas-id", "path/to/image.jpg", function () {
  this.brightness(5).render();
});

// data-attribute
 <img 
    data-caman="brightness(10) contrast(30) sepia(60) saturation(-30)"
    data-caman-hidpi="/path/to/[email protected]"
    src="path/to/image.jpg"
  >

// node

Caman("/path/to/file.png", function () {
  this.brightness(5);
  this.render(function () {
    this.save("/path/to/output.png");
  });
});

2. glfx.js

https://github.com/evanw/glfx.js

Orientation: Image Effects

canvas

var canvas = fx.canvas();
// convert the image to a texture
var image = document.getElementById('image');
var texture = canvas.texture(image);
// apply the ink filter
canvas.draw(texture).ink(0.25).update();
// replace the image with the canvas
image.parentNode.insertBefore(canvas, image);
image.parentNode.removeChild(image);

3. Filtrr2

https://github.com/alexmic/filtrr

Orientation: Image Effects

Dependency: jQuery

canvas

Filtrr2("#my-img", function() {
    this.brighten(50)
        .saturate(-50)
        .render();       //lazily apply
});

4. AlloyImage

https://github.com/AlloyTeam/AlloyImage

Orientation: image effects

Feature: photoshop-like, layer

var img = new Image();
img.src = "pic.jpg";
img.onload = function(){//素描效果
      AlloyImage(this)
      .act("灰度处理")
      .add(//添加一个图层上去
            AlloyImage(this)
            .act("灰度处理")
            .act("反色")
            .act("高斯模糊",5) , "颜色减淡"  
      )
      .act("锐化")
      .show();
};

5. Fabric.js

https://github.com/kangax/fabric.js/

Orientation: Canvas Enhancement

Feature: svg-canvas parser

// image
fabric.Image.fromURL('my_image.png', function(oImg) {
  oImg.scale(0.5).setFlipX(true);
  canvas.add(oImg);
});

//shape
var rect = new fabric.Rect({
  left: 100, top: 100, fill: 'red', width: 20, height: 20});

canvas.add(rect);

Node

1. node-opencv

https://github.com/peterbraden/node-opencv

Dependency: opencv

API style: callback

cv.readImage("./examples/files/mona.png", function(err, im){
  im.detectObject(cv.FACE_CASCADE, {}, function(err, faces){
    for (var i=0;i<faces.length; i++){
      var x = faces[i]
      im.ellipse(x.x + x.width/2, x.y + x.height/2, x.width/2, x.height/2);
    }
    im.save('./out.jpg');
  });
})

2. gm

https://github.com/aheckmann/gm

Dependency: GraphicsMagick and ImageMagick

API style: chaining

var fs = require('fs')
  , gm = require('gm');
gm('/path/to/my/img.jpg')
    .stroke("#ffffff")
    .drawCircle(10, 10, 20, 10)
    .font("Helvetica.ttf", 12)
    .drawText(30, 20, "GMagick!")
    .write("/path/to/drawing.png", function (err) {
      if (!err) console.log('done');
    });

3. jimp

https://github.com/oliver-moran/jimp

No Dependency / pure JS

API style: chaining & callback

var Jimp = require("jimp");
Jimp.read("lenna.png", function (err, image) {
    this.greyscale().scale(0.5).write("lena-half-bw.png");
});

4. sharp

https://github.com/lovell/sharp

Dependency: libvips (lightweight)

API style: chaining & promise

sharp('input.jpg')
  .rotate()
  .resize(200)
  .toBuffer()
  .then( data => ... )
  .catch( err => ... );

5. node-images

https://github.com/zhangyuanwei/node-images

No dependency / C++

API style: chaining API

var images = require("images");
images("input.jpg")
.size(400)
.draw(images("logo.png"), 10, 10)
.save("output.jpg", {quality : 50});

对象

JS中的对象是无序属性的集合，属性可以包括基本值、对象、函数。简而言之，JS中的对象就是一组键值对。

创建对象

工厂模式

工厂模式是用函数将创建对象的细节封装起来。

function createPerson(name){

var o = new Object();
o.name = name;
return o;

}

特点：显式地创建对象，有return
问题：无法解决对象识别的问题

构造函数模式

类似Object、Array等原生构造函数，我们可以自定义构造函数。

function Person(name){
this.name = name;
this.sayHello = function(){
alert('hello' + this.name)}
}

var person1 = new Person("Peter");
var person2 = new Person("Mike");

特点：不显式地创建对象，没有return，构造函数的首字母大写，不同实例之间具有相同的constructor属性。
问题：不同实例之间的同名函数不相等（具有不同的作用域链和标识符解析）
解决：将函数的定义移到构造函数外部。

function Person(name){
this.name = name;
this.sayHello = sayHelo;
}

function sayHello(){
alert('hello' + this.name)}
}

问题：sayHello定义在全局作用域，但实际上只能被某个对象调用。名不副实。2. 在需要定义很多方法的情况下，需要定义很多全局函数，违背封装的理念。
解决：原型模式

原型模式

每一个函数都有一个原型属性，这个原型是一个指针，指向一个对象。
这个对象包含同一构造函数所创建的所有实例所共享的属性和方法。

function Person(){
}

Person.prototype.name = 'Mike';
Person.prototype.sayHello = function(){
alert('hello'+this.name);
}

事实上，上文提到的constrcutor属性，也存在于原型对象中。
访问对象属性时，首先查找实例本身，然后查找原型对象。如果实例本身具有该属性，就会屏蔽原型对象中的同名属性。

用对象字面量来重写

function Person(){
}

Person.prototype = {
name:'Mike';
sayHello = function(){
alert('hello'+this.name);
}

此时

var mike = new Person
mike.constructor == Person //false
mike.constructor == Object //false

更正：

Person.prototype = {
constructor:Person
name:'Mike';
sayHello = function(){
alert('hello'+this.name);
}

进一步更正：

Object.defineProperty(Person.prototype,"constructor",{
enumerable: false,
value:Person
})

构造函数与原型模式组合

function Person(name){
this.name = name;
this.friends = ['a','b']}

Person.prototype = {
constructor:Person;
sayHello: function(){
alert('hello'+this.name)
}
}

优点：每个实例拥有自己的属性，不会互相干扰。

动态原型模式

function Person(name){
this.name = name;
this.friends = ['a','b']}

if(typeof sayHello != function){ // 只需判断一个
Person.prototyp.sayHello = function(){
alert('hello'+this.name)
}
Person.prototyp.sayBye = function(){
alert('Bye'+this.name)
}
}

优点：将所有信息封装在构造函数中，而只在第一次初始化时，添加原型方法。

寄生构造函数模式

在不改变某对象原型的情况下，添加新的方法。

function SpecialArray(){

var values = new Array();

values.toPipedString = function(){
return this.join('|');
}

return values;

}

缺点：对象与构造函数之间没有关系，不能使用instanof操作符。

稳妥构造函数模式

function Person(name){
var o = new Object();
o.sayName = function(){
alert(name)
}
return o;
}

var mike = Person('mike');

特点：不使用new操作符，实例方法中不引入this。
缺点：对象与构造函数之间没有关系，不能使用instanof操作符。

有话说

一直都觉得用issue写blog简直是懒人福音。
但是github issue的层级太深，一直不大像一个blog。
于是有了这个idea。

这个idea出来之后前后花了一天把它实现了。

做完还是挺有成就感的> <

关于安装

🌚

开始之前，你需要star本项目issvue （手动滑稽）

首先，你需要有node。

然后，你需要把项目下载或clone到本地。
$ git clone https://github.com/cogons/issvue.git

然后，安装相关包。
$ cd issvue && npm install。

然后，把./src/config.js中的配置改成你自己的。
$ vi ./src/config.js

然后，生成blog。
$ npm run build。

最后，把生成的dist文件夹部署到github-pages，once and for all。

项目你所能了解的

• vue-cli
• axios
• Promise
• sessionStorage
• Other minor things ..

为什么需要依赖注入：生产者的苦恼

一个car对象依赖于engine对象和tire对象，也就是说car对象内部存在对engine的“调用”。

那么就存在多种方法去引用engine：在内部创建，构造器注入，属性注入，方法注入等。

原始的办法：在类的构造函数中，直接实例化engine和tire。

export class Car {
  public engine: Engine;
  public tires: Tires;
  public description = 'No DI';
  constructor() {
    this.engine = new Engine();
    this.tires = new Tires();
  }
}

问题在于：如果engine和tire的实例化方法发生变化（例如，需要传进参数），那么不得不去修改car的构造函数。

我们将这个问题称为：car类过于脆弱，缺乏弹性，难以测试。

如何实现依赖注入：生产者的转变

改进方向：让car更强壮，有弹性，可测试。

改进方式：把car的构造函数改造成使用DI的版本。

constructor(public engine: Engine, public tires: Tires) { }

嗯？这是啥？

我们把依赖的定义移到了构造函数中。 “Car类不再创建引擎或者轮胎。 它仅仅‘消费’它们。”

嗯？什么意思？

我们看一下改进之后，我们如何创建一辆车。

let car = new Car(new Engine(), new Tires());

我们可以看到，只要满足API需求的engine和tire都可以传进来。

如果我们有一个新的engine，叫engine2。

class Engine2 {
  constructor(public cylinders: number) { }
}

此时我们创建带有engine2的车。

let car = new Car(new Engine2(12), new Tires());

通过依赖注入，我们可以很容易地在外部模拟出各类的engine和tire。

从而在不改变car的情况下，注入car，对car进行测试。

let car = new Car(new MockEngine(), new MockTires());

至此，我们大概了解了什么是依赖注入。

依赖注入是一种编程模式，它可以让类从外部获得他所依赖的东西，而不需要亲自创建他们。

巨型工厂：消费者的苦恼

在引入依赖注入以后，我们想创建一辆车，我们需要自己创建engine和tire。

我们自然而然地可以建造一个巨型工厂来帮助我们实现各种依赖实例的创建。

import { Engine, Tires, Car } from './car';

export class CarFactory {
  createCar() {
    let car = new Car(this.createEngine(), this.createTires());
    car.description = 'Factory';
    return car;
  }
  createEngine() {
    return new Engine();
  }
  createTires() {
    return new Tires();
  }
}

问题又来了：随着规模的增加，工厂方法之间的依赖会变得很复杂，维护起来困难。

问题的根源在于：

改进方向：如果能简单的列出想建造的东西，而不用定义该把哪些依赖注入到哪些对象中，那该多好！

改进方式：注入器（injector）

注入器

用这个注入器注册一些类，它会弄明白如何创建它们。

当需要一个Car时，就简单的找注入器取车就可以了。

injector = ReflectiveInjector.resolveAndCreate([Car, Engine, Tires]);
let car = injector.get(Car);

四个阶段

c++的编译过程

gcc -o hw.exe hw.c

大致可分为四个阶段：预编译、编译、汇编、链接。

1. 预编译 cpp

main.cpp --> main.i

cpp hw.c -o hw.i
gcc -E hello.c -o hello.i

对其中的伪指令（以#开头的指令）和特殊符号进行处理。

1. 宏 #define
2. 条件编译指令 #ifdef，#ifndef，#else，#elif，#endif等
3. 头文件include
4. 特殊符号 LINE FILE

2. 编译和优化 cc1/as

main.i --> main.s

cc1 hw.i -o hw.s
gcc -S hello.i -o hello.s

通过词法分析，语法分析，语义分析及代码优化，把预处理完的文件翻译成等价的中间代码表示或汇编代码。

编译单元：一个cpp文件和它include的头文件。当一个c或cpp文件在编译时，预处理器首先递归包含头文件，形成一个含有所有必要信息的单个源文件，这个源文件就是一个编译单元。

内部连接：如果一个名称对编译单元(.cpp)来说是局部的，在链接的时候其他的编译单元无法链接到它且不会与其它编译单元(.cpp)中的同样的名称相冲突。

外部连接：如果一个名称对编译单元(.cpp)来说不是局部的，而在链接的时候其他的编译单元可以访问它，也就是说它可以和别的编译单元交互。

3. 汇编 as

main.s --> main.o(依赖的其它 *.o)

as hw.s -o hw.o
gcc -c hello.s -o hello.o

根据汇编指令和机器指令的对照表一一翻译，将汇编代码转变成机器可以执行的命令。

编译后生成的文件，以机器码的形式包含了编译单元里的所有函数和数据、导出符号表、未解决符号表、地址重定向表等。

4. 链接 ld

main.o(依赖的其它 *.o) --> main可执行程序

ld hw.o -o hw.exe
gcc hello.o -o hello.exe

.out
linux:.so .o .a
windows:.dll .exe .obj .lib

.o 是一个最小的编译单元
.a 就是一组 .o文件打包了
.so 除了没有 main 函数，和一个可执行程类似了。

调用链接器ld, 链接程序运行所依赖的目标文件，以及所依赖的其它库文件，最后生成可执行文件。

链接过程是将单个编译后的文件链接成一个可执行程序。前面的预编译、汇编、编译都是正对单个文件，以一个文件为一个编译单元，而链接则是将所有关联到的编译后单元文件和应用的到库文件，进行一次链接处理，之前编译过的文件 如果有用到其他文件里面定义到的函数，全局变量，在这个过程中都会进行解析。

静态链接库(.lib)和动态链接库(.dll)都是共享代码的方式。如果采用了静态链接库，则无论你愿不愿意lib中的代码指令都被直接包含进了最终生成的.exe程序中。但若是使用了动态链接库，该DLL则不会被包含进.exe程序中，当.exe程序执行的时候，再“动态”的来引用或者卸载DLL。

参考资料：

http://blog.csdn.net/edisonlg/article/details/7081357
http://www.cnblogs.com/magicsoar/p/3840682.html
http://www.cnblogs.com/dongdongweiwu/p/4743709.html
http://blog.csdn.net/yinzhuo1/article/details/47069201
http://www.cnblogs.com/litterrondo/archive/2013/01/28/2880281.html
http://www.cnblogs.com/vamei/archive/2013/04/04/2998850.html

安装Homebrew

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

官网：https://brew.sh/index_zh-cn.html

安装Hadoop

brew install hadoop

查看安装路径：

brew list hadoop

配置Hadoop

前往安装目录（默认为/usr/local/Cellar/hadoop/2.8.0）

cd /usr/local/Cellar/hadoop/2.8.0/libexec/etc/hadoop/

修改相关配置文件

Core-site.xml

<configuration>
  <property>
     <name>hadoop.tmp.dir</name>  
     <value>/usr/local/Cellar/hadoop/hdfs/tmp</value>
    <description>A base for other temporary directories.</description>
  </property>
  <property>
     <name>fs.default.name</name>                                     
     <value>hdfs://localhost:9000</value>                             
  </property>                                                       
</configuration> 

mapred-site.xml.templete

<configuration>
       <property>
         <name>mapred.job.tracker</name>
         <value>localhost:9010</value>
       </property>
 </configuration>

hdfs-site.xml

<configuration>
    <property>
      <name>dfs.replication</name>
      <value>1</value>
     </property>
 </configuration>

运行Hadoop

格式化Namenode

cd /usr/local/Cellar/hadoop/2.8.0/bin
hadoop namenode -format

启动Hadoop

cd /usr/local/Cellar/hadoop/2.8.0/sbin
./start-all.sh

检查运行状态

Jps

jps

查看以下服务是否正常启动

94945 DataNode

95059 SecondaryNameNode

94853 NameNode

95318 Jps

95181 ResourceManager

95279 NodeManager

访问以下网址

Resource Manager: http://localhost:50070

JobTracker: http://localhost:8088

Specific Node Information: http://localhost:8042

创建服务

新建服务

import { Injectable } from '@angular/core';

@Injectable()
export class HeroService {
	getHeroes(): void {} // stub
}

为服务添加getHero方法。

通过getHero的不同实现，我们可以从任何地方（服务器、浏览器、模拟数据源等）获取数据，而无需对使用服务的组件进行修改。

导入数据源

import { Injectable } from '@angular/core';

import { Hero } from './hero';
import { HEROES } from './mock-heroes';

@Injectable()
export class HeroService {
  getHeroes(): Hero[] {
    return HEROES;
  }
}

至此，我们创建好了服务。

使用服务

服务可以导入到需要它的组件中。

import { HeroService } from './hero.service';

导入之后，我们就可以在组件中引用它。

引用之前，需要先将服务实例化。

// 不推荐的实例化方法
heroService = new HeroService(); // don't do this

// 推荐的实例化方法：依赖注入
constructor(private heroService: HeroService) { }

后者做了两件事情：
（1）添加一个构造函数，并定义一个私有属性。
（2）添加组件的providers元数据。

这样，当创建AppComponent实例时，Angular 知道需要先提供一个HeroService的实例。

同时，我们还需要告诉注入器如何创建这个服务。

我们在@component组件的元数据底部添加providers数组属性。

providers: [HeroService]

此时，就可以在组件中适用该服务了。

  getHeroes(): void {
    this.heroes = this.heroService.getHeroes();
  }

Over the years, I've seen a lot of confusion about JavaScript function invocation. In particular, a lot of people have complained that the semantics of this in function invocations is confusing.

这些年，我发现很多人都对JavaScript中函数调用感到困惑，对函数调用中的“this”更是一头雾水。

In my opinion, a lot of this confusion is cleared up by understanding the core function invocation primitive, and then looking at all other ways of invoking a function as sugar on top of that primitive. In fact, this is exactly how the ECMAScript spec thinks about it. In some areas, this post is a simplification of the spec, but the basic idea is the same.

在我看来，问题的关键在于需要去理解函数调用的核心语法，然后去观察其他基于这个核心语法实现的函数调用的语法糖。事实上，这也正是ECMAScript标准所做的。在某些方面，这篇博客就是标准的简化，但是基本观点是一致的。

核心语法 The Core Primitive

First, let's look at the core function invocation primitive, a Function's call method[1]. The call method is relatively straight forward.

首先，我们看一下函数调用的核心语法，函数的call方法。这个方法是相对来说比较直截了当的。

Make an argument list (argList) out of parameters 1 through the end
The first parameter is thisValue
Invoke the function with this set to thisValue and the argList as its argument list

1. 除去第一个参数，后面是一个参数列表argList。
2. 第一个参数是 thisValue
3. 用thisValue赋值的this和arglist构成的参数列表去调用函数。

For example:

function hello(thing) {
console.log(this + " says hello " + thing);
}

hello.call("Yehuda", "world") //=> Yehuda says hello world

As you can see, we invoked the hello method with this set to "Yehuda" and a single argument "world". This is the core primitive of JavaScript function invocation. You can think of all other function calls as desugaring to this primitive. (to "desugar" is to take a convenient syntax and describe it in terms of a more basic core primitive).

显而易见，我们调用了hello方法，参数为：this（赋值为“Yehuda”），以及单个参数“world”。

这是JS函数调用的核心语法。你可以将其他函数调用方法用这种基本核心语法来描述。

[1] In the ES5 spec, the call method is described in terms of another, more low level primitive, but it's a very thin wrapper on top of that primitive, so I'm simplifying a bit here. See the end of this post for more information.

在ES5中，这种call方法是用更基础的语法来描述的。

Simple Function Invocation

Obviously, invoking functions with call all the time would be pretty annoying. JavaScript allows us to invoke functions directly using the parens syntax (hello("world"). When we do that, the invocation desugars:

显然，如果从头到尾都用call来进行函数调用，是有点烦人的。还好JS允许我们直接使用parens语法来调用函数。

function hello(thing) {
console.log("Hello " + thing);
}

// this:
hello("world")

// desugars to:
hello.call(window, "world");

This behavior has changed in ECMAScript 5 only when using strict mode[2]:

// this:
hello("world")

// desugars to:
hello.call(undefined, "world");

The short version is: a function invocation like fn(...args) is the same as fn.call(window [ES5-strict: undefined], ...args).

Note that this is also true about functions declared inline: (function() {})() is the same as (function() {}).call(window [ES5-strict: undefined).

[2] Actually, I lied a bit. The ECMAScript 5 spec says that undefined is (almost) always passed, but that the function being called should change its thisValue to the global object when not in strict mode. This allows strict mode callers to avoid breaking existing non-strict-mode libraries.

Member Functions

The next very common way to invoke a method is as a member of an object (person.hello()). In this case, the invocation desugars:

var person = {
name: "Brendan Eich",
hello: function(thing) {
console.log(this + " says hello " + thing);
}
}

// this:
person.hello("world")

// desugars to this:
person.hello.call(person, "world");

Note that it doesn't matter how the hello method becomes attached to the object in this form. Remember that we previously defined hello as a standalone function. Let's see what happens if we attach is to the object dynamically:

function hello(thing) {
console.log(this + " says hello " + thing);
}

person = { name: "Brendan Eich" }
person.hello = hello;

person.hello("world") // still desugars to person.hello.call(person, "world")

hello("world") // "[object DOMWindow]world"

Notice that the function doesn't have a persistent notion of its 'this'. It is always set at call time based upon the way it was invoked by its caller.

Using Function.prototype.bind

Because it can sometimes be convenient to have a reference to a function with a persistent this value, people have historically used a simple closure trick to convert a function into one with an unchanging this:

var person = {
name: "Brendan Eich",
hello: function(thing) {
console.log(this.name + " says hello " + thing);
}
}

var boundHello = function(thing) { return person.hello.call(person, thing); }

boundHello("world");

Even though our boundHello call still desugars to boundHello.call(window, "world"), we turn right around and use our primitive call method to change the this value back to what we want it to be.

We can make this trick general-purpose with a few tweaks:

var bind = function(func, thisValue) {
return function() {
return func.apply(thisValue, arguments);
}
}

var boundHello = bind(person.hello, person);
boundHello("world") // "Brendan Eich says hello world"

In order to understand this, you just need two more pieces of information. First, arguments is an Array-like object that represents all of the arguments passed into a function. Second, the apply method works exactly like the call primitive, except that it takes an Array-like object instead of listing the arguments out one at a time.

Our bind method simply returns a new function. When it is invoked, our new function simply invokes the original function that was passed in, setting the original value as this. It also passes through the arguments.

Because this was a somewhat common idiom, ES5 introduced a new method bind on all Function objects that implements this behavior:

var boundHello = person.hello.bind(person);
boundHello("world") // "Brendan Eich says hello world"

This is most useful when you need a raw function to pass as a callback:

var person = {
name: "Alex Russell",
hello: function() { console.log(this.name + " says hello world"); }
}

$("#some-div").click(person.hello.bind(person));

// when the div is clicked, "Alex Russell says hello world" is printed

This is, of course, somewhat clunky, and TC39 (the committee that works on the next version(s) of ECMAScript) continues to work on a more elegant, still-backwards-compatible solution.
On jQuery

Because jQuery makes such heavy use of anonymous callback functions, it uses the call method internally to set the this value of those callbacks to a more useful value. For instance, instead of receiving window as this in all event handlers (as you would without special intervention), jQuery invokes call on the callback with the element that set up the event handler as its first parameter.

This is extremely useful, because the default value of this in anonymous callbacks is not particularly useful, but it can give beginners to JavaScript the impression that this is, in general a strange, often mutated concept that is hard to reason about.

If you understand the basic rules for converting a sugary function call into a desugared func.call(thisValue, ...args), you should be able to navigate the not so treacherous waters of the JavaScript this value.

this-table.png
PS: I Cheated

In several places, I simplified the reality a bit from the exact wording of the specification. Probably the most important cheat is the way I called func.call a "primitive". In reality, the spec has a primitive (internally referred to as [[Call]]) that both func.call and [obj.]func() use.

However, take a look at the definition of func.call:

If IsCallable(func) is false, then throw a TypeError exception.
Let argList be an empty List.
If this method was called with more than one argument then in left to right order starting with arg1 append each argument as the last element of argList
Return the result of calling the [[Call]] internal method of func, providing thisArg as the this value and argList as the list of arguments.

As you can see, this definition is essentially a very simple JavaScript language binding to the primitive [[Call]] operation.

If you look at the definition of invoking a function, the first seven steps set up thisValue and argList, and the last step is: "Return the result of calling the [[Call]] internal method on func, providing thisValue as the this value and providing the list argList as the argument values."

It's essentially identical wording, once the argList and thisValue have been determined.

I cheated a bit in calling call a primitive, but the meaning is essentially the same as had I pulled out the spec at the beginning of this article and quoted chapter and verse.

There are also some additional cases (most notably involving with) that I didn't cover here.

export INCLUDE_PATH=$INCLUDE_PATH:new/include/path

export CPATH="$INCLUDE_PATH"

export CPPPATH="$INCLUDE_PATH"

export INCLUDE_PATH=$INCLUDE_PATH:new/include/path

export CPATH="$INCLUDE_PATH"

export CPPPATH="$INCLUDE_PATH"