前言 我之前确实对包版本管理这块的知识比较缺失，所以导致我在项目的某次需求当中掉进了很多深坑。这篇文章，希望可以帮助你避开这些包版本管理不善带来的问题。 下面是故事时间： 故事一 我们的项目中使用的是preact，preact-compat的库。某天，小A要做需求，时间比较赶所以想引用一些库进来提升效率，但是由于当前preact-compat太低导致不兼容啊。怎么办？这还用问么？当然是 升级一下preact-compat的版本 啊。 小A开心的就把本地的preact-compat升级了，跑一下本地，很正常嘛，于是就push上了远程愉快的发布了。 发布后不久，产品经理来找小B了，说怎么回事，我们的页面不能用了啊！直接一上来就是遮罩 ，关都关不掉。于是小B赶紧找到发布了需求的小A，问问有没有改到自己的文件。同时也拉取了最新的代码在本地调试。很快就找到了问题 --- 就是由于preact-compat版本升级导致一个JSX-if的库不兼容 。原先需要判断一下if else逻辑的地方，一下子全部失效了。

用了 Vim 许久，发现经常在 h j k l 上浪费非常多的时间。如果过多的使用这些在 Vim 上做移动，往往就会非常低效，严格的说，甚至按两次 h 也能找到别的方案替代 。如何更快的移动和跳转呢？ 首尾移动 这个非常常用，也是基本用法，简单提一下。（这边只说实际行） ^ 可以快速跳转到行首第一个非空白字符，要和 0 区分开，后者是移动到行首。 $ 是移动到行尾，这个也非常常用，举个简单的例子。比如我们写代码在行位遗漏了分号，我们就可以用如下方式操作： const a = 1// $a;const a = 1; 基于单词的移动 减少使用 h j k l 的一个重要操作是多用 w b 进行下一个单词行首和上一个单词行首之间的移动。熟悉使用 w b 会减少非常多不必要的 h j k l 。 除此之外， e 和 ge 有时候比 w b 的场景更合适，比如： const pig = 1; // 这时候假设光标在 p 这个地方，要把 pig 改成 pigsconst pigs = 1; // eas 可以做到在 pig 后面快速加上 s 查找移动

前端页面的成功呈现，不仅要求在理想情况下如此，当一些后台CGI访问异常、静态文件获取不到时，仍然需要尽可能提供降级方案或给用户良好的反馈，不至于整个页面的奔溃。本文将结合腾讯课堂个人中心页面，分享一些测试和提高页面健壮性的技巧。 如果要构造CGI或静态文件的响应情景，往往需要修改前端或者后台代码，这种方式既不优雅，又对代码造成了破坏，严重的话还有可能将测试代码发布到生产环境酿成事故。这里介绍一个快速修改响应又不侵害代码的技巧，使用 whistle [https://github.com/avwo/whistle] 来进行代理和抓包，针对不同的需求只需在Rules中配置一条规则即可。 PS：如果对whistle还不熟悉，可以关注下 Github [https://github.com/avwo/whistle] ，有详细实用教程，上手贼快～ 1. 模拟CGI不可用 情景模拟： 在whistle中新建一条rule，更改cgi的HTTP状态码 ke.qq.com/cgi-bin/user/user_center/get_plan_list statusCode://404

BADJS开发指南 首先来粗略看看BADJS的架构 目录结构 badjs * badjs-acceptor ：负责数据接收和转发 * badjs-mq：负责数据过滤和分发 * badjs-mweb：移动端展示UI * badjs-report：前端上报组件 * badjs-storage：基于mongodb的数据存储 * badjs-web：PC端的数据展示和管理后台 * config：配置文件 * doc：文档相关 基本架构 基本的架构如下。 2018080615335330391223.png 然后，从宏观上的看一下BadJs都干了些什么。 在浏览器端 这一部分，主要是badjs-report，他的任务是捕捉js的报错，并把报错进行上报。这一部分，主要是要在页面中引入js，并配置，这一部分并不属于二次开发的范畴中，所以，不详述了。 在服务器端 在服务端，整套badjs包括接收端，存储端和管理端共三个部分，这三个部分都是基于express的框架。

为了避免重复造轮子，我们往往会借助开源的项目实现一些功能。很多时候，选择使用哪一个开源项目就像选择男、女朋友一样，固然内在很重要，但是眼缘也很关键，只有看对了眼，才会进一步地了解。作为开源项目的开发者，当然是希望自己写出来的成果能被更多的人尝试使用，所以这篇文章主要谈一谈怎样让开源项目看起来“高大上”，从而让别人有使用的冲动。 首先要弄清楚一个问题：怎样的开源项目才算“高大上”呢？这里举出两个例子，一个是在 2017 年越来越火的前端框架 Vue [https://Github.com/vuejs/vue] ，还有一个是我所在团队大神 avwo 开源的 web 调试代理工具 whistle [https://Github.com/avwo/whistle] ，大家可以去他们的 Github 地址感受一下，下面展示一下他们 Readme 的开头部分： Vue Readme Head [https://user-gold-cdn.xitu.io/2018/1/28/1613d39637dd22df?w=945>amp;h=343>amp;f=jpeg>amp;s=68365]

虽然关于VS Code的介绍文章已经不少了，但面对如此用心的IDE，还是忍不住要再“赞美”一番，希望可以拉更多开发小伙伴入坑，如果能真正提高大家的开发体验当然是最好不过的事情～～ 。

LATEX 是什么 LaTex 是基于 Tex 的排版系统，常用于科技出版物的排版。和 word 等排版工具的最大区别在于，它是纯文本格式的，掌握基本的规则，就能输出专业美观的展示效果。纯文本格式，也就意味着它不像 word 那样，所见即所得，对初学者不友好。 LATEX 环境配置 Tex 作为一个比较古老的排版工具，在 linux、windows 和 mac 上都有发行版。比较常用的是 TeXlive [https://www.tug.org/texlive/] 、 CTex套装 。 还有一些周边的配套工具比如 ghostscript、imagemagick，来进行文件格式的转换，比如，LaTex 默认是输出 pdf

本文将教你从0写一个 Shadowsocks [https://github.com/shadowsocks/shadowsocks-go] ，无需任何基础，读完本文你就能完成一个轻量级、高性能的 Shadowsocks 代替品。 我们暂且把最终完成的项目叫做 Lightsocks，如果你很急切地想看到结果，可以先体验本文最终完成的项目 Lightsocks [https://github.com/gwuhaolin/lightsocks] ，也可以下载阅读源码。 Sponsor [https://app.codesponsor.io/embed/3bvxELAxnq8r4wheFyRkED8U/gwuhaolin/blog.svg] [https://app.codesponsor.io/link/3bvxELAxnq8r4wheFyRkED8U/gwuhaolin/blog] 认识 SHADOWSOCKS Shadowsocks

利用CANVAS实现一个抠图小工具 0 前言 作为新一代的前端开发工程师，PS抠图切图已经不是必备技能了，我们有UI/交互/视觉等更专业的设计同学帮我们做这个事情。但是有时候还是有一些简单的图片处理工作需要我们去做，例如对图片进行剪裁，调整透明度或者调整图片内的文字等等等。这时候如果有一点PS经验那当然更好，如果没有或者当前的开发环境不一定安装了PS等工具，那我们可能需要去找在线图片处理工具来帮我们完成这些工作。 1 CANVAS 老话说得好，一个不想当将军的士兵不是好士兵；一个不想自己写工具的程序猿不是好程序猿。那其实上面提及的一些简单图片处理是可以通过 Canvas 来帮我们实现的。 canvas是一个可以使用脚本(通常为JavaScript)在其中绘制图形的 HTML 元素。它可以用于制作照片集或者制作简单(也不是那么简单)的动画.。 基本的API文档可以看这里 [https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API] 宋丹丹老师说得好： 要把大象放冰箱，总共分三步：一先把冰箱门打开；二把大象放进去；三把冰箱门带上。

In computer programming, lint was the name originally given to a particular program that flagged some suspicious and non-portable constructs (likely to be bugs) in C language source code. The term is now applied generically to tools that flag suspicious usage in software written in any computer language. 代码检查很重要，原因有三： 1. 避免低级bug ：一些常见代码问题，如果在编译或运行前不能及时发现，代码中的语法问题会直接导致编译或运行时错误，影响开发效率和代码质量； 2. 统一代码习惯 ：每一个团队或个人都会有一些代码规范或者代码习惯，为了便于后期维护和阅读，我们编写的代码也需要符合一定的格式规范；

奇妙清单 奇妙清单是一个云端任务管理工具，帮助数百万人记录点子或想法、想要完成的任务和想去的地方。 无论是计划旅程，与好友分享购物清单或者是同事之间的工作计划和团队管理，奇妙清单让人更容易与所有人协作。它还可以在电话，平板和电脑间通过云端技术多平台无缝同步列表清单，随时随地从几乎任何设备掌握和整理任务。 全能扫描王

都说 vim 是编辑器之神。 但是往往武器重要，用的人能驾驭才能把它发挥到极致，不然也就是个破铜烂铁。 用 vim 时间也不短了，虽然离驾驭 vim 还差了十万八千里，但是也积累了不少实用好玩的小技巧~~ 读文件 不知道经常用vim的同学有没有一个体验，经常会打开一个文件、复制内容、关闭文件、打开另一个文件、然后粘贴进去复制到内容。编辑器之神难道体验这么差？其实有更好的办法，那就是： :readfilename 一个简单的小技巧文件就读取进来啦！ 缓冲区跳转 刚用 vim 的很长一段时间都对多文件编辑特别不习惯，知道后面明白自己忽略了缓冲区的作用。 ctrl + ^ 是最常用的方式，来切换当前缓冲区和上一个缓冲区。这样非常方便来回编辑两个文件。缓冲区还提供了很多跳转命令： :ls, :buffers 列出所有缓冲区 :bn[ext] 下一个缓冲区 :bp[revious] 上一个缓冲区 :b {number, expression} 跳转到指定缓冲区 :ls 然后输入编号是我常用的一种方式，可以快速跳转到对应文件。 搜索