天一阁

Javascript操作CSS

发表于 2018-05-23 分类于技术评论数：阅读数：

TL;DR : js的一个重要功能，就是实现网页的各种交互效果。主要是通过添加事件处理函数，然后修改DOM元素的style，或者添加预制的css class来实现各种前端展现。

阅读全文 »

Javascript前端工程化工具

发表于 2018-05-11 分类于技术评论数：阅读数：

Javascript前端工程化

安利一下udemy上的这门课Object-oriented Programming in JavaScript，让我明白了很多困扰我很久的概念。

我没正规做过前端开发，连现在所谓的web后台开发都没做过，这是我始终进展很慢的原因之一。因为别人提到的技术实现，我根本看不懂，即使是花钱，也没法判断投入的是否合理。

我个人的经历与前端开发、javascript简直就是平行空间，就想和现在的邻居，虽然都生活距离很近，但貌似谁也不了解对方的状态。

javascript的标准叫ECMAScript，99年出版的ES3，我可能看过一点，但是那个时候觉得MFC牛逼，甚至操作系统、汇编才牛逼，就压根不喜欢看和界面有关的一切技术。没想到差不多到现在界面技术反而前后通吃了，而且更容易做一个产品出来，后台技术只能做幕后英雄了。ES5是2009年发布的标准，2015年大佬们又发布了ES6，也就是ECMAScript 2015，估计未来还会有ES7，ES8，ESX。。。

随着对用户体验要求越来越高，前端代码肯定越来越复杂，大佬们希望通过更多的语言特性，使前端开发更加工程化。工程化有啥内涵，我也不是很了解，但至少现在能看到的就是模块化，然后提供更便利的工具。

阅读全文 »

Javascript 对象创建

发表于 2018-05-10 分类于技术评论数：阅读数：

//JS里面创建一个对象最简单的方式是通过{}来直接建立
const bookLiteral = {
  bookName : 'Program',
  bookPrice : '30',
  calcPrice : function(){}
};

//如果需要建立同类型的对象，可以用工厂，或者构造器

//factory function
function createBook(bookName, bookPrice) {
  return {
    bookName,
    bookPrice,
    calcPrice :function (numOfBooks){
      return this.bookPrice * numOfBooks;
    }
  }
}

bookFromFactory = createBook("Factory Object", 15);
console.log(bookFromFactory);
console.log(bookFromFactory.calcPrice(30));

//constructor function
function Book(bookName, bookPrice){
  this.bookName = bookName;
  this.bookPrice = bookPrice;
  this.calcPrice = function (numOfBooks){
    return this.bookPrice * numOfBooks;
  }
}

//js里的new 实际上先生成一个object，然后在这个object上，通过this, 动态增加属性和方法
myBook = new Book('JS', 10);
console.log(myBook.constructor);

for (let key in myBook){
  console.log(key, myBook[key]);
}

const keys = Object.keys(myBook);
console.log(keys);

if ('bookPrice' in myBook) {
  console.log('the price of 10 books: ', myBook.calcPrice(10));
}else
  console.log('price of book:', myBook.calcPrice(1));


//js 的普通{} 都是对外直接访问的，这就导致无法真的做到oop，最起码的封装就没有
//所以需要通过曲线的方式来实现封装，比如：closur, getter , setter
function Circle(radius){
  this.radius = radius;
  //defaultLocation 外部是访问不到的，因为没有把这个defaultLocation加到this的属性上
  let defaultLocation = {x:10, y:10};
  this.draw = function (){
    console.log('DefaultLocation:', defaultLocation);//这里用到了closure backpack
  };
  //getter setter
  Object.defineProperty(this, 'defaultLocation', {
    get: function(){
      return defaultLocation;
    },
    set: function(value){
      if (!value.x || !value.y){
        throw new Error('Not Valid Value');
      }
      defaultLocation = value;
    }
  });
}

var circle = new Circle(10);
//circle.defaultLocation = {x:3};   不符合合法性校验
circle.defaultLocation = {x:3, y:5};
console.log(circle.defaultLocation);

node.js初步认识

发表于 2018-05-09 分类于技术评论数：阅读数：

Node.js是干啥的

之前一直以为Node就是一个可以在shell里面执行js的工具，现在看好像也不止于此。我现在的理解就是这个Node是一种新的网络Server开发方式，尤其是为了Web开发而设立的。其特点就是事件驱动，单进程非阻塞IO方式。这样据说可以在IO密集的场景，大幅提高应用的性能。

阅读全文 »

Hexo+ Next主题增加Valine评论

发表于 2018-05-07 分类于技术评论数：阅读数：

想在自己的Hexo博客上加个评论功能。Hexo是个基于node.js静态博客系统，可以利用github page发布个人博客。这类博客系统添加评论系统，都是通过增加一个js代码，将评论信息提交到后台存储起来。（怎么调动回来的？？）

网上搜了一下，发现有很多的备选方案，选择了最简单的Valine。还有gitcomment是基于github issue系统保存评论数据，但需要github账号登录。（github issue怎么用？？Oauth是什么？）

Valine需要在LeanCloud上注册一个账号，所有的数据会保存在LeanCloud上。

在什么地方添加Valine的js代码呢？网上很多文章是说新版的NeXT已经添加了Valine的功能，只要修改配置就可以了，但是想多了解一些Hexo和Next主题的内部机制，所以想自己动手修改。代码看的很费劲，Hexo基于node.js用到了很多Node提供的全局对象，而且又做了很多的概念抽象，代码看起来一点都不容易。主题的代码也是懵逼，里面全是.swig结尾的文件，后来才知道是一个模板引擎的文件后缀。

最后终于找到一篇文章说，主题渲染的入口是_layout.swig文件，Hexo会根据source目录下的所有md文件，使用特定的模板进行渲染，默认使用post.swig文件进行渲染。所谓渲染，我的理解就是进行各种生成和替换，最终生成一个静态HTML。

new Valine({
    el: '#comment' ,
    notify:false, 
    verify:false, 
    appId: '这里填上面获得的appid',
    appKey: '这里填上面获得的appkey',
    placeholder: 'just go go',
    path:window.location.pathname, 
    avatar:'mm' 
});

就是把这样一短代码加入到post.swig中，就可以展示评论输入框了。调试的时候差了一点，还需要去LeanCloud上建一个Comment类，这时Valine就可以提交代码了。

Word Embedding的参数推导和直观理解_DL体会总结_3

发表于 2018-03-14 更新于 2018-10-15 分类于技术评论数：阅读数：

最近在看NLP，其中的基础就是word embedding，我也看了cs224n的课，也看了那个关于word2vec的论文，但我看到的就是优化这么一个目标函数

\log{\sigma(v_{w_{O}}^{'T}v_{w_{I}})} + \sum_{i=1}^{n}E_{w_{i}\sim P_{n}(w)}[\log\sigma(-v_{w_{i}}^{'T}v_{w_{I}})]

这是什么？原论文基本没有写细节。我特别想知道，这样的函数怎么做back propagation。于是总算找到这个：《word2vec Parameter Learning Explained》。人家确认牛，不仅深入浅出的给出数学推导，还能给出一个直观的，说人话的解释，让人更加能够明白word2vec到底在干什么。我想尝试整理一下，看看都学到了哪些，所以总结如下：

1, Forward过程

训练word embedding的网络结构是这样的，他的隐藏层后面并没有任何非线性函数。

wordvec

为了说明计算过程，模型简化为1对1 的预测，类似bigram。

Input -> Hidden

模型的输入到hidden的计算是

h=W^{T}X = W_{(k,.)}^{T}

X是one-hot向量，是V*1的列向量，W是V*N的矩阵，就是word embed，每行代表词表中的一个词。h是N*1的列向量。

Hidden -> Output

h向量就是W的第k行，也就是词表中第k个词的向量。$$W^{'}$$ 是N*V的矩阵，可理解为另外一组word embed。从h预测output时，相当于是输入词的embed和输出词embed做内积，得出一个score u

u= W^{'T}h

u是V*1的向量，通过softmax，得出预测的每个词的概率y $$ y_{i} = \frac{exp(u_{i})}{\sum_{k=1}^{V} exp(u_{k})} $$

Loss Func

有了预测概率，有了true target，就可以通过交叉熵来计算损失函数了，经过基本变形就得到了

\begin{align*} E &= - log \space y_{j^{*}} \\ &= -u_{j^{*}} + \log \sum_{j'=1}^{V} exp(u_{j'}) \end{align*}

我真正的困惑是从下面开始，不知道怎么去做导数反向传递，好在《word2vec Parameter Learning Explained》给出的推导过程特别详细，我才能勉强看懂。

2, Backward过程

$h=W^{T}X = W_{(k,.)}^{T}$
$u= W^{'T}h$
$y_{i} = \frac{exp(u_{i})}{\sum_{k=1}^{V} exp(u_{k})}$
$E = -u_{j^{*}} + \log \sum_{j^{'}=1}^{V} exp(u_{j^{'}})$

就是这几个公式依次求导。可是反向求导为啥难理解呢，我觉得主要是因为，前向过程都是用矩阵或向量计算的，求导时需要很多变换，还需要考虑转置的问题，行列的问题，转换步骤一多，思维就乱掉了。

首先求关于$$u_{j}$$ 的导数

\frac{\partial E}{\partial u_{j}} = y_{j} - t_{j} := e_{j} \qquad j\in [1,V]

然后求关于$$W_{i,j}^{'}$$ 的导数

\begin{align*} \frac{\partial E}{\partial W_{ij}^{'}} &= \frac{\partial E}{\partial u_{j}} . \frac{\partial u_{j}}{\partial W_{ij}^{'}} \\ \\&=e _{j}.h_{i} \qquad\qquad j\in [1,V]\quad i \in [1,N] \end{align*}

这个要理解我觉得最好还是把矩阵画出来，然后一步步去推导比较容易理解。其实最后$$\frac{\partial E}{\partial W^{'}} $$ 会最终变为一个矩阵，参数更新也都是通过矩阵运算的方式。这个公式在原论文中给出了一个直观理解，就是对于输出参数矩阵的每个词，根据预测的概率误差，相应的远离输入词。相当于这次word vector在他们的高维空间，不停的移动，已获得最佳的位置。当训练样本足够多了，每个word vector也就基本稳定不会移动了，这时候就可以把参数矩阵拿出来直接当做word embedding使用了。这些word embedding中包含了很多语义特征。

其他的推导懒得写了，如果以后忘记了，就回看论文好了。

逻辑回归和神经网络_DL体会总结_2

发表于 2018-03-13 更新于 2025-08-16 分类于技术评论数：阅读数：

以前总听别人说做广告CTR需要用到LR，经常会在log中提取各种特种，一般是从Hadoop中跑出特征，然后再放到LR的并行系统上，进行计算，然后通过划分实验流量，做A/B Test。如果效果好，则新特征上线。

而我之前由于没有ML的基础，所以直接学NN，感觉全世界就只有NN，回头想想好像LR还是能够在其他很多场景下应用。

LR和NN的区别主要在于，LR是把一个线性函数的结果，通过sigmoid函数映射到（0，1）上，然后用概率来解释这个结果。映射函数如下：

\sigma(z)=\frac{1}{1+e^{-(Wx+b)}}

对于线性函数，他的能力有限，比较直来直去，无非就是直线或者平面，来区分所有样本。这样对于一些比较复杂的样本分布，就会产生很多误差。

逻辑回归对复杂分布的分类情况

神经网络hidden layer有4个节点的分类情况

第一个图是逻辑回归对复杂数据分布的分类情况，第二个图是神经网络hidden layer有4个节点的分类情况（参考：Planar data classification with one hidden layer）。明显具有hidden layer的NN表现更好。科学家们好像能够证明NN可以表示任何复杂的函数，我没必要深究其中的数学证明了。

我目前的理解就是，神经网络把多个神经单元（线性函数+激活函数）整合在一起，然后在隐含层通过一种无法描述的魔力自行提取特征，然后在最后一层，仍然用线性分类函数对结果进行分类。后面的Loss function、SGD就都是一样的了。神经网络多了一点就是BP算法，主要的原理就是复合函数求导。前一篇(http://wliang.me/2018/02/05/20180205_DL学习笔记_逻辑回归/)的时候我也总结过。

我想总结时没比较加入太多数学公示，还是把直观的理解通过文字图表表达清楚最好，毕竟我又不去做research，我只是想做application。对自己放松点要求。

Python的一些小收获点

发表于 2018-03-08 分类于技术评论数：阅读数：

Python这个语言在语法上，数据结构上提供了很多遍历，使得开发代码量上了很多。

每次看别人的Python代码总能学到一些新的用法，以下几个小收获记录下来，算是一点总结：

1，tuple

1
2
3

x = 'wangliang'
y = tuple(x)  #这样可以得到字符级的tuple
z = set(x)  #这样可以得到一个字符集合

2，zip函数可以把两个序列，按位置先后，两两组成一个tuple pair，很方便形成dict

x = 'wangliang'
y = dict(zip(x, range(10)))  #y 就是一个 {ch, idx}的dict
s = list(zip(x, range(10)))  #s 是一个(ch, idx)的list
a,b = zip(*s)  #通过这样的方式，还能把含有tuple的list拆成两个tuple

3，sorted函数可以对序列类型进行排序

4，dict按值排序

#https://stackoverflow.com/questions/613183/how-do-i-sort-a-dictionary-by-value
import operator
x = {1: 2, 3: 4, 4: 3, 2: 1, 0: 0}
sorted_x = sorted(x.items(), key=operator.itemgetter(1))

这些方便的数据处理方式，可以应用到机器学习的数据预处理上。机器学习模型部分实现代码量不大，而且有很多框架可以直接调用。但是数据预处理部分就要自己来了。

提到ML，很郁闷。最近一直在看NLP，但是发现看论文好难找到通透的感觉，而且数学基础不够，也导致问题多多。这个会不会又是一个大坑呢。反正，在不为钱发愁的情况，尽量做自己能做且喜欢的事情吧。

逻辑回归_DL体会总结_1

发表于 2018-02-05 更新于 2025-08-16 分类于技术评论数：阅读数：

Logistic Regression as a Neural Network

二元分类：比如判断一张图片是猫
逻辑回归：一个输入向量和一个参数向量做点积，得到的结果再用sigmoid函数求出一个值，得到的就是二元分类的概率

\hat{y}=\sigma(w^{T}X+ b), \quad where\ \sigma(z)=\frac{1}{1+e^{-z}}

Lost Function:

Loss= - (y\log{\hat{y}} + (1-y)\log{(1-\hat{y})})

Cost Function:

J(w,b) = \frac{1}{m} \sum_{i=0}^m{L(\hat{y}, y)}

梯度下降：根据LostFunc，给出dw,dx,db 的计算式，得到值。每个变量，沿梯度方向变化一点，整个loss就会变化，不停的反复迭代，就会找到最佳的参数。

我一直有个错误的认识，就是dw, db和Loss值有关，dw，db需要使用Loss值进行计算，其实不是，dw只和LostFunc的表达式有关，只和其他参数当前值有关，有没有Loss值都不重要，只是每次迭代之后，需要看看Loss是不是在减少了，而不需要通过Loss计算梯度。

Flask源码学习笔记2：路由映射

发表于 2017-12-13 更新于 2018-02-05 评论数：阅读数：

简单的路由绑定就像这样

1
2
3

@app.route('/')
def index():
    pass

在Flask内部可以这样做

1
2
3

def index():
    pass
app.add_url_rule('/', 'index', index)

在add_url_rule函数中核心代码主要是这几行

rule = self.url_rule_class(rule, methods=methods, **options)

self.url_map.add(rule)
if view_func is not None:
  	...
    self.view_functions[endpoint] = view_func

其中url_rule_class和url_map都是利用的werkzeug.routing的代码，核心的类就是Rule， Map， MapAdapter，代码看的我头疼，一方面现在智力下滑严重，很多看不懂，另外一方面，感觉怎么这么麻烦不就是简单的从url到具体函数的匹配么？可是深入看的话，发现人家的功能确实强大，比如可以进行变量转换，还能生成url。