技术手记

解决 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 等方式实现, 但是还是不太靠谱. 中国节假日等通过苹果的 “中国节假日” 日历实现了

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

最近写 Web 前端的一些偶得

最近在公司搞项目上的东西也接触不少 Web 前端, 加上之前给公司做新首页时也瞎捣鼓了些前端的东西, 再仔细看了下 Bootstrap 3 的文档, 发现之前说 Bs4 才有的很多东西其实 Bs3 也有了, 只是在 JavaScript 插件那部分, 都被我忽略了

有一些随意记录的偶得, 给自己做个备份, 也供他人参考

浏览器兼容性

总见 Bootstrap 中文文档里浏览器兼容性一节: http://v3.bootcss.com/getting-started/#support

<meta http-equiv="X-UA-Compatible" content="IE=edge">

更多讨论可见 https://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge-e

<meta name="renderer" content="webkit">

目前只有 360 支持, 详见 http://se.360.cn/v6/help/meta.html

JavaScript in Bootstrap

之前做首页时说 v4 才有其实 v3 就有了的

其实可以不用自己写的

一些可以整合的内容

写前端时的其他意外发现

jQuery 里的 .hover() 绑定两个事件完美解决了多年前想做的 “悬停时出现弹层, 且鼠标从悬停触发元素移动到弹层上也不消失” 的事, 后来想明白了其实是因为之前我修改 display 的元素并不在 hover 元素内, 所以移出去就挂了

<div id="outer">
  悬停项
  <div id="inner" style="display: none">
    悬停内部内容, 从 outer 移到 inner 这部分也不会消失
  </div>
</div>
$("#outer").hover(function() {
    $('#inner', this).show();
}, function() {
    $('#inner', this).hide();
});

OS X 下好用的磁盘空间分析工具: ncdu

之前用过一个叫 Daisy Disk 的软件, 可以在 OS X 下扫描指定文件夹或磁盘, 用多层环形图的方式来展示不同目录的磁盘大小占用, 方便分析哪些东西在吃空间. 这货做的很赞, 各处都是满分推荐, 据说新版性能更大幅提升, UI 做的也漂亮, Windows 下反正没找到可以匹敌的 (如果你知道有更好的欢迎告诉我, 最好还是免费可用的)

不过 Daisy Disk 好归好, 却只能免费试用, 要长用得买, 价格是 $9.99, 还是有点肉疼, 而标榜清高不用盗版软件的狗又不愿意去用破解. 还好找到了个还比较合适的替代品, 就是标题里说的 ncdu, 相比起来可以认为是命令行版的 Daisy Disk, 直接在终端下运行, 用键盘操作, 也很是合 Geek 的口味, 只是偶有不够智能 (后面会说)

ncdu 的官网在: http://dev.yorhel.nl/ncdu

安装

OS X 下可以用 brew 方便的安装

brew install ncdu

使用

通过 ncdu -h 查看帮助, 其实都很简单, 一般扫本机简单的用这个命令就可以了:

ncdu / --exclude /Volumes

注意到了上面这个命令其实还不够简单, 加了个 --exclude 的参数, 这个是因为 ncdu 不会智能跳过其他挂载点, 如果你挂了移动硬盘或连了网络硬盘, 他会一并扫描, 这就是前面说的不够智能的地方

如果只是扫个人文件夹, 不涉及到挂载点, 倒是可以很简单就可以实现:

ncdu ~

如果需要分析移动硬盘上的占用也是可以的, 直接指定扫描目录为挂载点就行了, 比如我要扫叫 YEW_HDD 的移动硬盘:

ncdu /Volumes/YEW_HDD

附注

其实 Daisy Disk 的确是一个很赞的软件, 如果不习惯命令行界面, 也不像我这样抠门可以去买一个

Mac Rumors 都在发新版时做了推荐: http://www.macrumors.com/2015/09/03/daisydisk-major-design-speed-overhaul/

也被 36kr 推荐: http://36kr.com/p/5037316.html

iOS9 更新小记

更新了 iOS 9

初步印象

新字体略不习惯, 新中文字体 苹方 看起来有点准圆的感觉, 弧角略圆, 笔画末端也是圆头收尾, 新英文字体 SanFrancisco 的数字字距看起来也略奇怪, 不过估计看一段时间就好了

主屏幕左边的 Spotlight 搜索页又回来了, 但是我一点都不喜欢啊, 为啥要有这货, 关都关不掉, 主屏上下拉搜索已经够了好么, 还要加个右划进搜索页

新的多任务控制界面不如以前方便一次三指上推关三个, 虽然现在也可以, 但是要微妙的调整下姿势

在当前应用里通过通知中心点到另一个应用里有, 左上角多了个返回上一个应用的按钮, 这个大赞, 好评 // 安卓表示我从一开始就这样了你又抄我

一些该关的东西

  • Siri
    • 理由: 耗电, 无用
    • 方法: 设置 - 通用 - Siri - 关闭 Siri
  • 搜索建议
    • 理由: 无用, 漏隐私
    • 方法: 设置 - 通用 - Spotlight 搜索 - 关闭 Siri 建议
  • 锁屏时语音拨号
    • 理由: 长按到 Home 键呼出语音控制后, 可能随机拨出去电话, 反正我视图用这个打电话从来就没拨对过
    • 方法: 通用 - 密码 - 关闭 语音拨号
  • 全局关闭语音控制
    • 理由: 同上
    • 方法: 无解, 无法关闭长按 Home 呼出语音的功能, 越狱后可以