基于 redsocks 实现全局 TCP 流量代理

在 Arch Linux 上使用 Shadowsocks, redsocks, iptables, pcap-dnsproxy 搭建一个舒适的科学上网环境~ 对于我来说, 系统安装好之后的第一件事就是翻墙. 我们使用 shadowsocks + redsocks + iptables + pcap-dnsproxy 来实现全局自动代理. yaourt -S shadowsocks redsocks-git pcap-dnsproxy-git 以上命令同时安装了三个软件. iptables 已经自带不需要安装. 接着到 /etc/shadowsocks 文件夹下创建一个新的配置文件, 配置你的 shadowsocks. 然后 sudo

Arch Linux 安装和配置小记

本文章涉及 Arch Linux 的安装, 常用软件和配置. 适用于在 UEFI 上面进行引导安装. 安装 联网 第一件事当然是联网啦, 如果是无线网络的话使用 wifi-menu. 分区和挂载 新手安装 Linux 可能会在分区这里感到很疑惑. 其实很简单, 通常我们只考虑为 Linux 分三个或四个区, 三个区的情况分别为 boot 分区, 根分区, home 分区以及交换分区. boot 分区是存放启动和引导的; home 分区是存放用户个人文件夹的, 它不是必选的, 但是如果有专门的

浅谈 co 库

最近在写一个静态博客框架. 但不同于 hexo 之类的, 框架本身提供了博客书写和管理功能. 后端同样使用了 Koa2 来做, 归功于 Arch, 我已经在使用 Node 7.2 了, 不过好像默认还是不能支持 async 和 await , 经查发现是要输入参数开启的=.=. 不过当时第一时间并没有想说去加参数解决, 而是使用了 co 这个库... 虽然也可以用 babel , 但是通过 babel 运行代码很难调试. co 用起来其实和 async 差不多,

正确使用 JS 的 sort 方法

sort() 方法对数组的元素做原地的排序, 并返回这个数组. 默认按照字符串的 Unicode 编码排序. sort 排序可能是不稳定的. 但其实 sort 方法可能并没有你想象的那么简单, 不信的话你耐心往下看看. 默认排序 sort 方法支持传入一个比较函数, 如果不传入则默认按照其字符串的 Unicode 编码排序, 因此默认情况下会出现以下情况. [5, 1, 4, 11, 42].sort() // [1, 11, 4, 42, 5] 解决方法就是: [5, 1,

聊聊 Webpack 使用

老早的时候就听说了 Webpack 这个工具, 当时大概的印象就是类似 Gulp 这样的东西, 并且看起来好像挺复杂的. 直到学习 React 的时候才开始接触 Webpack, 才知道 Webpack 更多的是做模块化的工作. 不过当时也是乱配置一通能用就行=.=. 现在 Vue 标配也是用 Webpack 了. Webpack 其实并没有想象中的那么复杂, 其实最核心的还是 loader 那一块. 这次就主要聊一聊 Webpack. 我用的是 Webpack 最新版本 2.1.0-beta.

使用 Koa2 开发小结

RSS 订阅器项目是我最近花时间比较多的一个项目了. 在这个项目中我使用了大量的新技术, 很多技术都是我第一次使用. 后端是基于 Koa2 和 Mongoose 的 RESTful API. 在这个项目开展前, 我已经有半年多没接触后端了. 上一次后端还是用 PHP 以及 Laravel 框架开发的 LNMP 架构. 在动工前, 我也没有正式的使用过 Node 以及其部署, 对于 Koa2 的 async await 的异步书写方式也只是久仰大名而已. 这篇博客主要想说一说自己在使用 Node.js

使用 ESLint 规范你的代码

在一些多人参与的项目开发中, 每个人代码习惯不同, 对于缩进, 有人习惯 TAB, 有人习惯两个空格, 有人习惯四个空格. 对于分号, 有人不加, 有人习惯加, 而习惯加分号的人又会经常漏加分号. 试想一个项目代码如果由各种群魔乱舞的风格组成, 这必然会带来一定的视觉障碍(强迫症的人看了受不了=.=), 并且显得代码质量低下. 即使是个人, 偶尔也会写出一些不太规范的代码, 比如变量声明了未使用, 比如使用了 == 等等, 更不要说各种代码格式如操作符左右空格, if ... else 的格式, 末行换行等等. 特别是像有强迫症的我, 有时候写的过程可能会不小心遗漏或写错, 但发现的时候又会去改过来. 如果能在书写过程中检查出不规范的地方提示岂不是最好? ESLint 是一个插件化的 JavaScript 代码检查工具,

谈谈 vue 和 vuex

最近一段时间写了两个玩意, 一个是基于 PEG.js 的 XML Parser, 前面有一条博客说了 PEG.js 这东西, 事后自己也模仿着写出了这个 XML 解析器, 感觉并不难, 写着玩玩而已. 另外, 最近花时间特别多的另一件事就是写了一个 RSS 订阅器. 一开始写这个订阅器, 心想上一个项目代码不忍直视, 感觉自己需要写一些能拿出手的代码, 加上学校课程刚好要求做一些东西, 以及自己最近迷上了使用 RSS 订阅器这个东西(这么多理由=.=), 于是就自己动工开搞. 目前订阅器已经基本完工了, RSS 订阅器的网址是 www.

关于前后端分离鉴权的思考

前后端分离项目的 Token 存储问题由来已久,有的人存 Cookie 有的人存 LocalStorage 或 SessionStorage。在之前的个人项目中,曾经花时间去研究这个问题,以下分享下我的看法。 如何安全的传输用户 token 这是最传统也是最简单的方式了,前端登录,后端根据用户信息生成一个 token,并保存这个 token 和对应的用户 id,接着把 token 传给用户,存入浏览器 cookie,之后浏览器请求带上这个 cookie,后端根据这个 cookie 来标识用户。 但这样做问题就很多,

AngularJS 实践总结

搞了快一年的 Angular,Angular 真的是一个非常强大非常齐全非常好用的框架,而且拥有强大的社区支持,虽然踩了很多坑,但是仍然无悔学习了这样一个框架。Angular 2 已经正式发布了,我也打算学 Angular2 去了,现在手头上还有一个用 Angular 的项目,这个项目我是想把我学到的很多 Angular 的最佳实践都用进去,借此我就想干脆也写几篇博客总结下好了,我写的比较散,想到什么就说什么。 使用单次绑定或单向绑定 从 Angular 1.3 开始就有了 once-time binding,Angular 1.5

AngularJS 之折腾记

前几天 Angular2 正式发布了,虽然他也在我的学习计划里面,但我并没有把他应用在我最近开展的一个项目中。最近在写一个 Rss 订阅器,基于 Angular1 和 Koa2(总感觉两个有点不搭 =.= ),主要是不想在这个项目花太长时间,再者我还想集我目前掌握的所有技术之大成写一个能拿的出手的项目,所以就没有选择 Angular2 了。至于 Koa2,其实很早就想学了,只是之前一直在忙别的。 angular-resource 介绍 今天捣鼓 Angular 的 Resource 功能,前端后端都掌握在自己的手上时去用 Angular 的 Resource

提升网站加载速度的 N 个方法

Web 这几年的一个变化之一估计就是各种优化小技巧不断涌出...自己也琢磨和尝试了不少优化,毕竟自己项目的网页首屏加载也是一度接近 2M 的。以下针对 HTTP1 和 HTTP1.1,在 HTTP2 中,很多最佳实践都适得其反了。 减少文件传输数量 现在前端代码发布上线的时候一般都会进行压缩,混淆,合并等操作,他们起到了减少文件体积和数量以及混淆代码降低可读性的作用。 浏览器针对同一域名的并发请求数目是有限制的,而在 HTTP1 和 HTTP1.1 中每传输一个资源就得建立一条连接。因此当网站的请求资源数量过多时,会导致后面资源请求的阻塞,也会导致频繁的连接建立和关闭带来的开销。一般浏览器的并发请求数量在4-8之间。因此我们针对同一域名的资源不宜过多,否则就会导致后面资源的阻塞。

浅谈 Angular 脏检查

Angular 的脏值检查机制一直是 Angular 被人诟病的地方,但瑕不掩瑜,Angular 还是一个非常优秀的框架,并且 Angular2 也已经抛弃了这个脏值检查的算法。 最近在看《AngularJS 深度剖析与最佳实践》,不得不说是一本很好的书籍,作者在第三章开始讲背后的原理,这里分析了 Angular 的 $digest 函数,即脏检查机制。所以自己也去下载了 Angular 最新的源码去瞧了下,然后做下笔记吧。 首先要注意,Angular 的 digest 的触发不是定时的,只有在指定的事件触发之后才会进入 $digest。基本上我们用的带

AngularJS 项目采坑笔记

有段时间没写博客了,前段时间在看 Underscore 源码所以写的多了点,这段时间还是在忙自己的其他项目去了,还是有不少收获的。 Angular 视图过渡动画 之前使用 angular-promise-button 这个模块实现了按钮的自动变化,以前自己是用很多标志位来判断特别二。不仅如此,页面切换动画也是用标志位判断,这样就特别不好维护特别不优雅,上次重构的时候就把这些全部去掉了。但是问题来了,页面数据未到达时候页面就渲染肯定会造成视觉上的问题,怎么解决呢。 我们都想写一些应用很广的代码,比如指令,比如上面这个 angular-promise-button 模块等等。其实要解决上面的问题,也是几行代码就可以解决的事情了。 我所使用的是 Angular 的 ui-router。ngRoute 应该也差不多。 在

Underscore 源码学习 (五) - Throttle 和 Debounce

Underscore 的函数大部分还是挺好理解的,感觉过一遍就行了,不过今天看到两个函数感觉还是挺有意思的,并且也挺常用。这两个函数就是 throttle 和 debounce。 throttle _.throttle = function(func, wait, options) { var timeout, context, args, result; var previous = 0; if (!options) options = {}; var later = function() { // 更改previous即上一次执行时间为当前时间 previous = options.leading

谈谈 React 和 Redux

刚回到家的时候学习了 React 和 Redux,现在才想来总结一下,不知道会不会忘的差不多了...本来是想写一个问卷发布系统的,使用 React 和 Redux 已经完成了基础的几个功能,但是那个代码量...用 Angular 写简直轻轻松松的好吧...然后就去重构项目还有现在学的 Underscore 去了。是时候重新回顾下了。 此处主要讲的是 Redux 。 关于 Redux redux 是facebook 提出的 flux 架构的一种优秀实现;而且不局限于为 react 提供数据状态处理。它是零依赖的,

Underscore 源码学习 (二) - 迭代

Underscore 源码的学习落下了好几天,因为前几天一直正在重构项目和搞 React,不过这几天应该会花较多时间在 Underscore 上面了。 这次主要说下 Underscore 两个比较重要的函数吧,一个是optimizeCb,另一个是cb,这两个花了我挺长时间看的,而且是整个 Underscore 非常重要的函数,后面很多地方都使用到了它。 optimizeCb 函数 var optimizeCb = function(func, context, argCount) { if (context === void 0) return func; switch (argCount