技术手记

推荐一下 Vultr 及记录最近的折腾

Vultr 是一家 VPS 提供商,类似 Linode 和 DigitOcean,知道他比较晚,是在用了 DigitOcean 后。当时换他的主要考虑是有日本机房,DO 的新加坡机房在国内某些网络下访问很快,另外某些网络下就是龟速,Linode 则是因为贵,10 刀起价,虽然配置也好但是用不上

最近 Vultr 把入门款的 VPS 拉低到了 2.5 刀每月,1 CPU 512M RAM 20G SSD 500G BW 对于个人用户来说怎么看都够了,最大的优势还是有日本机房而且不像 Linode 那样有大概率被分到被墙的 IP。(感觉他家最近把入门款从 768RAM 5$ 改成 512RAM 2.5$ 应该是为了面对 Linode 把起价降低到 5 刀后的竞争)

下面是推荐链接,如果你通过这个注册并使用,我可以获得一定的奖励,你没有任何损失

http://www.vultr.com/?ref=6804130

另外,Vultr 目前还在搞充返活动,最高充一百送一百,送的金额 12 个月内有效。如果只是像我一样普通用,充 25 送 25,一年内开 2.5$ 的入门款实际只花 5$,实际上就是拿 25$ 可以用 20 个月。当然如果确定用的长也可以充 50,只不过送的 50 用不完就会过期。也可以前期选 5$ 1G RAM 的版本,不过后面迁服务器还是要折腾下,没啥必要

我自己为了省钱,把 Vultr 之前 5$/mon 的 768RAM 转成了 2.5$/mon 的 512RAM 版,之前的那个版本已经没法新建了,也不支持平滑降级,只能重新建一个 2.5$ 的实例然后人肉迁一把,还好东西不多,之前有记录的情况下半个小时不到就搞定了

另外本站之前使用的社会化评论框工具多说要停止服务了:重要通知: 多说即将关闭,还是希望能有比 WordPress 原生更友好的评论工具,所以换了 Disqus,可能会被墙,但是访问我这边的大部分人应该都是随身自带翻墙的,就无所谓了

不知道是我自己之前改 WordPress 改挂了还是多说这个版本就是有问题,从去年四月某个时间开始多说的评论就没有自动同步回我 WordPress 里,强行导入也在 wp-admin/ajax.php 调用时提示 404。没办法跑多说去导出所有数据为 json,然后在 http://urouge.github.io/migrate-to-disqus/ 提供的工具下转成 Disqus 的 xml 格式并导入到 Disqus。导入时注意 Disqus 并没有一个明确的提示说导入成功或失败,而且 Disqus 管理后台默认显示的是最近三个月的评论,很容易误判是导入没成功又导一次,然后就呵呵哒的有一堆重复评论了,最简单粗暴去除重复的方法反倒是在 Disqus 里把这个站点删除,然后新建一个并导入

至于本地缺失的再怎么导回就再说吧,刚在 Disqus 插件里试了下说 Disqus server return 500,可能回头在 Disqus 里直接导出,然后 WordPress 里直接导入是可行的

奇怪的开发需求们

这是一篇写于 2015 年 4 月的草稿,现在已经忘了当时想说什么了,又不舍得直接删除,看看发出来自己还能不能看懂当时的只言片语

大需求应该是我们自己做了一套独立系统想开个新业务

一开始面对的就是帐号体系和登陆方式, 在有自己的账号体系下如何自制授权。最后用了一些不算 OAuth 的简化版验证来实现了原型快速可用。因为双方都是自己的系统,所以可以加入一个私有的加密用的 salt,然后在已有账号体系里用账号加时间戳加一个私有字段,通过 salt 做个 MD5 或 SHA1,把用户名,时间戳和加密后内容明文发送,在接收方用明文收到的用户名和时间戳加上没有传输但是两边都加入的私有字段一起,通过私有的 salt 算 Hash,对比结果,以及确认时间戳是最近的

然后是白名单需求,因为是对一个已有系统的部分用户开放测试功能,不希望没选上的用户也进入到测试系统里来。这个似乎没有什么特别要考虑的,做一个白名单放到 DB 里持久化,就是看怎么改这个白名单,是要提供一个 Web 界面,还是裸改代码。印象中这个项目还没从裸改代码进化到 Web 管理,就无疾而终了(手动捂脸

最头疼的还是错误处理,就是文档没说的那些事,怎么做好各种防御式编程,才是工作中的精髓所在

简单粗暴的做,大概一两周后,使用 cloc 统计代码如下(用了 CDN 上的 Bootstrap,当时也不怎么会前端,大部分事情都放到后端做,所以前端代码很少)

$ perl ~/Downloads/cloc-1.62.pl . --exclude-dir=env,.git,.idea,logs
      51 text files.
      50 unique files.
       6 files ignored.

http://cloc.sourceforge.net v 1.62  T=0.33 s (137.7 files/s, 6957.6 lines/s)
-------------------------------------------------------------------------------
Language                     files          blank        comment           code
-------------------------------------------------------------------------------
Python                          25            369             52           1078
HTML                            17             43              1            603
CSS                              1              9              0             50
Javascript                       1              9              1             47
Bourne Shell                     1              2              0             10
-------------------------------------------------------------------------------
SUM:                            45            432             54           1788
-------------------------------------------------------------------------------

成长的笔记

毕业这么久,自己做事,带人做事,带团队做事,一路过来有很多感悟,又好像说不清到底成长在哪里,最近看了知乎上一个回答,深有感悟,归纳的挺好

原文在 https://www.zhihu.com/question/50539172/answer/121771903 ,答主 Cat Chen 之前在度厂工作过,似乎有过一面之缘,最近看他的 Blog 和知乎回答,在这类思考上还是走的挺前的,跟从之

回到主题,在 Cat Chen 的知乎回答里,把工作中人的能力分成三块:Technical、Direction、People,用中文对应大概是 技术能力、方向把控能力、沟通能力

其中 技术能力 是个人可控,可以独立成长,并且很容易评估成长程度,同样一件事给一个人完成,有人一天就能完成的很好,有人花一周还弄的磕磕碰碰,前者比后者强,这个是绝大部分人都可以达到的境界

而对于 方向把控能力,我们从小到大接受的教育都比较忽略这一点,更多的时候我们都是在指定了问题的情况下怎么去解决问题,而真的把一个开放问题丢到面前,必须要自己找方向时,就挺难了。大多数人在这个阶段就被淘汰了,或者鸵鸟政策自己看现在自己可以做什么就去做什么,自我安慰只要我一直在努力那必然也是有成果的,殊不知方向错了做的再多都没用,还可能有反作用

在有 技术能力 基础和 方向把控能力 上,可以更好的与 沟通能力 做同步成长。对自己的反馈上,沟通能力好,才可以更事半功倍的提升自己的技术能力,不然有些事别人点拨一下就可以解决的问题,自己可能要花十天半月还不一定摸到门路;沟通能力好,才有机会获得足够的信息输入,且信息来源可靠或有可靠性分析,进而影响方向把控能力。对外而言,不是所有事情都可以单枪匹马搞定的,那就涉及到怎么去拉到其他人来帮自己做事情,除了上级死压下级这类没法反抗的情况,绝大部分时候涉及到怎么让人「信服」自己的事情,信服的基础是你证明你能做好这件事(技术能力),并且你做的这件事对别人有好处(方向把控能力),别人才会心甘情愿的追随或听从你,否则只会出现「唉我这个事很靠谱你们怎么都不理我」或「你们一个个明明有空为啥都不愿意听我讲跟我做事」的情况

解决 Windows 10 Insider 在 VirtualBox 里无法升级的问题

一句话解决

在 VirtualBox 的虚拟机设置里,开启 3D 加速 的设置

繁琐点的解释

因为有一些奇葩测试需要在 Windows 下进行,于是在 macOS 上装 VirtualBox 跑 Windows,又因为既不想付钱也不想用盗版,所以用的 Windows Insider,就是给微软当小白鼠跑最新的公开测试版,微软也允许免费商业使用(脑补微软的内心:你们都敢在生产环境用我的测试版我也不好意思收你钱)

从九月份开始出现了点问题,Windows 10 自动更新后在重启过程中会失败,然后会尝试回滚到上一个可用版本,最后一个可以正常运行的 Windows 10 Insider Preview 是 Fast Ring 里的 14915 版本,后面的 14926,14931,14936,14942 都有这样的问题,而且在微软的官方更新日志里也承认了这点

本来可以置之不理,但是 Win10 是不是弹提示框说当前版本授权十月一号就到期了后面会隔一段时间自动重启如何如何,还是要想办法解决才行,搜 VirtualBox 论坛中枪的人满地都是,对原因的猜测是 VirtualBox 提供的显卡驱动有问题,导致新版的 Win10 不认从而挂掉,但是都没有给出好的解决办法

今天更新 14942 还有问题,忍不住再搜,终于有见到有人说把 VirtualBox 设置里的 3D 加速 打开就可以了,试了下果然,应该还是驱动有问题吧,期待早点解决

原来被 disabled 的 input 元素是不响应鼠标事件的

前几天做客服的时候遇到个客户来说我们的页面出错了, 两边鸡同鸭讲了半天发现都没法理解对方, 让客户截图后发现果然跟我这边不一样, 远程过去一看, 对面用的是 Win10 + Edge, 在我们本该出现 tipsy 的地方鼠标移上去没任何反应, 客户看不到该有的提示, 也难怪要跑过来找客服

一开始以为是 Edge 和 IE11 又出现什么奇葩的 jQuery 事件绑定错误, 需要在 knockout 的动态渲染完成后再做事件绑定, 但是仔细查了下后发现还不是这么回事, 熊去搜了下表示似乎 “disabled 的 input 元素是不响应鼠标事件的”, 但是为啥 Chrome 又能支持? 把 Firefox 也拉进来测试, 发现似乎不响应是通用标准, Chrome 那个浓眉大眼的货又一次不按常理出牌在鼠标事件完成后另外触发了一次, 所以我们测试一直没问题

既然知道了这么个原因, 而我们又要对一个 disabled 的 input 元素做悬浮事件, 怎么办? 按 Bootstrap 的说法, 在外面包一层, 然后把悬浮事件绑定到包的那一层上就好, 但是这么搞了后还是失败, 各种姿势换了一遍后发现如果我多包一点东西进去, 然后鼠标从多包的那一边进入, 就可以正常触发事件, 这是什么鬼? 想了半天没想明白, 暴力在外面做了一个图标来绑定悬浮事件先解决问题再说

吃了个饭回来, 越想越不对, 难道是因为那个 input 元素有 1px 的 border, 然后导致 Edge 那货一看这个区域都属于 disabled input, 所以其他这个区域的其他元素也不做任何响应? 怒而把包的那一层加了个 border: 5px solid transparent; margin: -5px, 果然就好了… 就仅仅是需要让包的这层真的比那个 disabled input 更大而已

不过还有几个坑没想明白的

  1. 不知道是不是跟 Edge 的刷新率有关, 如果鼠标进出太快, 也可能不会触发包的那一层的事件
  2. 不知道是不是需要额外设置 float 或 z-index 关系, 让包的那一层的 z-index 更高, 这样才能正确响应鼠标事件, 可能也不用去 hack border

最近其他事太多, 这个坑先这么填着, 回头有空了再来细细研究, 写前端真的是折寿啊

写这篇 blog 时去搜了下相关内容, 还有建议把元素不做 disabled, 在 hover 事件里动态设置为 disabled 的乱搞流… 你这样样式都不对的好么

写个小脚本来访问煎蛋

现在用 RSS 阅读器的人估计是越来越少了, 各种站为了防抓, 给全文 RSS 输出的也越来越少了, 关注了好多年的 jandan.net 早就找不到靠谱的全文 RSS, 现在只有摘要的列表点开去煎蛋看全文都经常提示 “我们怀疑你是机器人”, 而且如果一次开多个, 后面的一定是没法通过人类验证的

没办法, 就这么点业余乐趣, 不要这么被剥夺了吧, 反正跳转 URL 都显式给出了, 就是人肉替换麻烦了点, 那么, 写个脚本?

https://gist.github.com/whusnoopy/489c77059457c00c7b75

我在 Chrome 下是用 Tampermonkey 运行这个脚本, Firefox 下应该是那个叫 Greasemonkey 的插件

前端奇技淫巧之保持悬浮状态

先感慨一句, 一入前端深似海, 都是泪

经常要调前端样式, 有一些元素是只在鼠标悬停状态下才能显示, 那么, 怎么看和调试这些元素呢?

在 Chrome 等开发者工具里, 可以在 Element 那个选项卡右边的 Style 选项卡里点那个大头针图标, 将元素强制维持在 :hover 状态. 也可以在 Elements 左边的元素节点上点右键选状态

但这只是 CSS 上的搞法, 如果某个元素是 Javascript 悬浮事件弄出来的呢? 加 :hover 完全木用啊. 这时候可以用更奇葩的搞法: 暂停 Javascript 执行. 就是在开发者工具的 Sources 那个选项卡里, 调试 JS 那个地方有个暂停按钮, 按一下就好了

围观群众: 你特么一定是在逗我, 明明是鼠标悬停才能触发的事件, 鼠标一移开去点暂停键那不就没了悬停状态了么

当然了… 这时候是没法腾出手来按那个按钮的, 但是我们有快捷键啊, OS X 下是 F8Cmd + \, 剩下的就不用过多解释了

写了个 jQuery 动画小插件, 收起飞入抽屉效果

参考的效果是淘宝加入购物车时, 会将商品图变小, 往右飞入到购物车图标内, 提示这个东西去了哪里, 又从哪里可以找到. 最近我们在美折里做了几次登陆后弹层推荐, 希望用户关闭后还能知道怎么重新打开弹层推荐的内容, 就希望在关闭时给一个动画指示到最后可以重新打开的按钮上

写了一个折叠收起的 jQuery 插件, 放在 GitHub 上: https://github.com/whusnoopy/flyerArchive/

下面测试按钮点击后应该会将本文变成一个红色框收起为一个小方块, 并最后消失在测试按钮上

点此测试

你们说我一个好好的算法工程师怎么就开始各种写前端了呢, 所以这时候应该膜蛤一把, 来背两句诗?

git 查看文件修改记录

今天追了个几年前留下来的坑, 在 git 里追溯修改过程坑死个爹, 具体方法估计没多久又会忘, 还是记下来以后有的参考

大部分教程都会告诉大家使用 git log 来查看对应文件的修改记录, 就像这样

git log ./foo/bar.py

但是这样默认是只显示提交信息摘要, 你也不知道具体哪里改了, 所以需要加上 -p 参数来显示具体修改内容. 如果这个文件改动频繁, 那么可能只想看最近几次的修改, 再加上一个 -[Num] 的参数来显示最近几次. 要想指定从某个版本往前, 直接指定版本号

git log -p ./foo/bar.py
git log -p -2 ./foo/bar.py
git log -p -2 74f6c40c ./foo/bar.py

但是如果是追一个不知道什么时候埋下的坑, 可能更需要知道某一行到底是啥时候改的, 这时候应该用 git blame 来看每一行的最后提交是哪一个, 像这样

git blame ./foo/bar.py

执行后进入像 less 一样的操作环境, 类 VIM 的翻页操作, 也可以用 /? 来查找, 不过这么看还是有点乱, 整个文件都标出来了, 如果我们只是想知道确定的某几行的历史呢? 祭出 -L n,m 参数

git blame -L 5,10 ./foo/bar.py
git blame -L 5,+5 ./foo/bar.py

这样可以定位到某一行最后一次修改是哪个提交, 如果还要想继续往前找? 那么找到上一次修改的提交, 看在上次提交里的行数, 以上一次修改的提交号, 加上上一次修改对应的行数去继续往前

> git blame -L 8,+1 ./foo/bar.py
74f6c40c (Wen YE    2015-06-17 12:17:55 +0800    8) import StringIO

> git blame 74f6c40c ./foo/bar.py
74f6c40c (Wen YE    2015-06-17 12:17:55 +0800    1) # coding: utf8
74f6c40c (Wen YE    2015-06-17 12:17:55 +0800    2)
74f6c40c (Wen YE    2015-06-17 12:17:55 +0800    3) from bson import ObjectId
8b569399 (Wen YE    2015-06-17 12:17:32 +0800    4) import collections
be417d12 (Wen YE    2012-09-25 15:03:00 +0800    5) from datetime import datetime, timedelta
299e78b7 (Wen YE    2013-08-26 20:11:59 +0800    6) import json
74f6c40c (Wen YE    2015-06-17 12:17:55 +0800    7) import logging
8b569399 (Wen YE    2015-06-17 12:17:32 +0800    8) import os
74f6c40c (Wen YE    2015-06-17 12:17:55 +0800    9) import StringIO

# 到头了, 那就是这个提交引入的, 看看改了什么
> git log -p -1 74f6c40c ./foo/bar.py

当然, 期间配合 Source Tree 之类的图形化工具来对比提交的 diff 比用 git log 这样的命令行查看更方便, git blame 也只是看某行的最后修改, 并不能很直观的看出来那一次提交到底修改了什么, 而且没有代码高亮和对比

我用的 git blame 定位到上一次提交, 在 Source Tree 里去看那个提交的具体修改内容, 如果还要往前追溯, 按 Source Tree 里看到的上一次提交里的行号, 带版本号继续 git blame, 再到 Source Tree 里看对应版本的修改, 直到尽头

推荐个 Mac 下好用的日历小工具 Itsycal

Itsycal 是一个 OS X 小工具, 可以常驻菜单栏右上角, 弥补 OS X 的菜单栏没有日历的遗憾

项目主页及下载地址: http://www.mowglii.com/itsycal/

盗用下他家的图做介绍

itsycal 截图

itsycal 截图

完美满足了我如下需求

  • 菜单栏上查看日期
  • 点开看本月日历, 可切换其他日期查看
  • 跟系统日历和 Google Calendar 结合显示事件

唯一的缺点是原生没有农历, 虽然可以添加农历日历到 Google Calendar 等方式实现, 但是还是不太靠谱. 中国节假日等通过苹果的 “中国节假日” 日历实现了

如果有能支持上述功能并原生支持农历和国内节假日的日历小工具, 欢迎告诉我