参考的效果是淘宝加入购物车时, 会将商品图变小, 往右飞入到购物车图标内, 提示这个东西去了哪里, 又从哪里可以找到. 最近我们在美折里做了几次登陆后弹层推荐, 希望用户关闭后还能知道怎么重新打开弹层推荐的内容, 就希望在关闭时给一个动画指示到最后可以重新打开的按钮上
写了一个折叠收起的 jQuery 插件, 放在 GitHub 上: https://github.com/whusnoopy/flyerArchive/
下面测试按钮点击后应该会将本文变成一个红色框收起为一个小方块, 并最后消失在测试按钮上
你们说我一个好好的算法工程师怎么就开始各种写前端了呢, 所以这时候应该膜蛤一把, 来背两句诗?
今天追了个几年前留下来的坑, 在 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 里看对应版本的修改, 直到尽头
Itsycal 是一个 OS X 小工具, 可以常驻菜单栏右上角, 弥补 OS X 的菜单栏没有日历的遗憾
项目主页及下载地址: http://www.mowglii.com/itsycal/
盗用下他家的图做介绍
itsycal 截图
完美满足了我如下需求
唯一的缺点是原生没有农历, 虽然可以添加农历日历到 Google Calendar 等方式实现, 但是还是不太靠谱. 中国节假日等通过苹果的 “中国节假日” 日历实现了
如果有能支持上述功能并原生支持农历和国内节假日的日历小工具, 欢迎告诉我
最近在公司搞项目上的东西也接触不少 Web 前端, 加上之前给公司做新首页时也瞎捣鼓了些前端的东西, 再仔细看了下 Bootstrap 3 的文档, 发现之前说 Bs4 才有的很多东西其实 Bs3 也有了, 只是在 JavaScript 插件那部分, 都被我忽略了
有一些随意记录的偶得, 给自己做个备份, 也供他人参考
总见 Bootstrap 中文文档里浏览器兼容性一节: http://v3.bootcss.com/getting-started/#support
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
目前只有 360 支持, 详见 http://se.360.cn/v6/help/meta.html
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();
});
之前用过一个叫 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
更新了 iOS 9
新字体略不习惯, 新中文字体 苹方 看起来有点准圆的感觉, 弧角略圆, 笔画末端也是圆头收尾, 新英文字体 SanFrancisco 的数字字距看起来也略奇怪, 不过估计看一段时间就好了
主屏幕左边的 Spotlight 搜索页又回来了, 但是我一点都不喜欢啊, 为啥要有这货, 关都关不掉, 主屏上下拉搜索已经够了好么, 还要加个右划进搜索页
新的多任务控制界面不如以前方便一次三指上推关三个, 虽然现在也可以, 但是要微妙的调整下姿势
在当前应用里通过通知中心点到另一个应用里有, 左上角多了个返回上一个应用的按钮, 这个大赞, 好评 // 安卓表示我从一开始就这样了你又抄我
设置 - 通用 - Siri - 关闭 Siri设置 - 通用 - Spotlight 搜索 - 关闭 Siri 建议通用 - 密码 - 关闭 语音拨号给公司做了个新首页, 其实并没有什么特别的更新需求, 主要是招聘客服妹子时别人事先搜不到公司首页也没法了解你们是干啥的, 成果见此: 杭州美登科技有限公司
下面记录下开发过程, 学了很多 HTML/CSS/JS 的知识, 更新了下大脑里的旧内容, 对前端不同浏览器兼容性的坑又踩深了一点
看了下现在流行都是单页应用, 开发起来也比较简单, 基本的文件结构和 HTML/CSS/JS 布局参考 CodeCademy 上的 Make a website 课程, 配色取了下我们新 Logo 上的几个色, 用 Color Hex 查了下相应颜色变深或变浅后的色值, 直接套上去的
页面布局和 CSS 自学加抄袭了下 Bootstrap 的 container/row/col 布局, 不过因为是需要啥添的啥, 不是一上了就想好整个框架, 抄的又不到位, 尺寸各种不对, 后来发现原来要再 CSS 一开始就把 box-sizing 设成 border-box, 后面才是熟悉的盒模型的大小
没有分页, 不同内容就大色块大模块, 导航没用 a 标签的锚点, 而是用了 jQuery 的 scrollTop 方法来让跳转过程有动画效果, 这个很简单, 只是最后测 IE 时发现只让 body scrollTop 是不行的, IE 里滚屏应该滚 html. 就是得这样: $("body, html").scrollTop(...);
因为是单页分不同模块, 在导航栏上更新当前活动模块, 就在 JS 里通过监控 scroll 事件来更新 navbar 里不同 li 的 active CSS, 一开始想着优化性能, 对不同模块的 div 的位置做了预处理, 但是偶发性滚屏位置不对, 一直也没找到原因, 加上页面上有高度动态变化的可能, 最后还是老老实实每次都现算, 这么点性能差异应该也无所谓, 反正测试的各种设备都没感觉卡
因为导航栏的跳转也用了 scrollTop 方法去滚屏, 会触发同样的监控事件, 为提高性能并避免因为 CSS 里全局用 em 标注尺寸导致可能出现换算后奇怪的 1 像素偏差引起的 navbar 当前活动模块判断不准, 先是加了个 scrollTo 的全局变量来判断滚屏事件来源, 但是这个处理在大屏幕上可能有问题 (因为屏幕尺寸比模块 div 大, 说要 scrollTop 到最后一个模块, 但实际的 top 还在上一个), 最后用的 setTimeout 设置延迟事件来区分了是因为点导航栏引起的滚屏还是用户自己的滚屏
顺带说一下, 看了下 Bootstrap v4 alpha 的文档, 导航栏滚屏和监控滚屏事件更新导航栏活动 li, 这俩需求都已经有现成的了, 见 Scrollspy
职位描述用的弹层实现, 弹层的 Modal 用的 lightbox_me, 一切都很顺利, 只有最后测试在 iPhone 上有一定的概率弹飘, Safari 和 Chrome 都会出现, 原因未知, 估计和 slick 哪里冲突了
弹层这个其实 Bootstrap 里的 Modal 支持也挺好的
自动滚屏展示图片, 一开始人肉实现, 只用支持自动滚动什么的也还好, 后来想带支持移动设备上触摸拖动, 看了下估计自己搞太费劲, 还是老老实实换用现成的, 比较了几个后最后用的 slick, 自己重载了部分 CSS 来替代默认的主题
slick 会把要要滚屏的图片或 div 在最前最后做一次复制方便跳上一个或下一个, 但是似乎会导致某些浏览器下带来副作用, 其对容器 div 做了 class 修改, 还是多套了一层防止出现奇怪的问题
Bootstrap v4 alpha 里也看到有直接支持的这个功能, 见 carousel
在照片上加文字, 先试了下 OS X 下的预览做修改, 没法保证不同的图片上蒙层大小和位置一致, 搞不定就让 tuying 去帮忙用 PS 加, 后来想这事用 CSS 估计更简单, 等 tuying 说用 PS 改好图了我说我这边 CSS 也调通了, 不知道会不会被捅死
联系我们那用百度地图 API 来嵌了个地图上去, 写的时候感觉百度地图 API 使用文档组织的还不如淘宝开放平台那个渣, 倒是示例还比较多, 可以各种连蒙带猜人肉测试
地图上加标记弹消息, 如果全用现成的, 对话框的起始点是标记点的标记下方, 很奇怪, 裸写 HTML 反倒是符合预期的标记上方
加上来的地图默认支持滚轮缩放, 不关掉的话电脑上滚轮滚到这里就变成不停缩放地图而不是滚页面了. 关掉滚轮缩放后要加一个显式的缩放按钮组件让电脑上还是能缩放地图, 手机上他会自动加上的其实无所谓, 不过手机上双指缩放这个好像没法禁, 如果页面拉大了视野内都是地图, 那只能重载页面了 (如果这个问题有更好的解决办法也欢迎在下面留言告诉我)
适配手机, 问题不大, 习惯了 @media (min-width...) 这样后控制下尺寸就好, 不过布局也没法完全流式, 弄了个 640px 的 min-width, 反正 iPhone5 的横向物理分辨率都有 640 了, 捏一下 scale 就好
在电脑上 Chrome 的开发者工具里 device mode 和实际设备上的表现有明显差别, 还是得真机测过才靠谱, iOS 设备大家都有, Android 那边刚好公司新买了个红米 Note2 当测试机, 除了系统自带浏览器外一口气另装了 9 个各种浏览器, 测下来有一些小的不一样, 但是整体兼容性良好, 比 iOS 还靠谱. iOS 里的 Chrome 兼容性很奇葩, 估计跟调的还是 Safari 的 webkit 核有关 (比如 Modal 飞了). Firefox on Android 缩放后会比较奇怪, 导航栏的底色还是没 scale 前的宽度, 不过应该没多少人蛋疼到去手机上用 Firefox 吧
主流的浏览器, 开发测试就在 Chrome 上, 这个倒是不用担心, Firefox 最后找人看看没问题, 应该也还好, 关键是 Windows 下那一坨 IE 以及改了不知道是 webkit 核还是 IE 核的国产浏览器
用 Win10 测试, Edge 表现跟 Chrome 什么完全一样, 不用任何改动. Win10 下默认是 IE11, 然后这货的开发者模式可以模拟 11,10,9,8,7,5 (我也不知道为什么没有 6 但是有 5), 测试覆盖面是够了. 前面那个所有 IE 核都影响 scrollTop 的问题就不说了, 其他问题上 IE9+ 还是挺靠谱的现代浏览器, 都没啥要处理的, 从 IE8 往下, 那都是泪…
到 IE8 开始出的问题, 先是 container 布局控不住尺寸, 放狗搜了个 respond.js 勉强搞定, 然后是没有弧角 border-radius, 这个没有就算了吧, 有些按钮从圆变方还挺带感的, 最后折腾到 IE8 居然显示还勉强凑合, 真是感动到泪流满面
再往下到 IE7 就更多奇葩了, 比如 float:right 会换行, 非得把 float 的 div 放到同级元素的最前面才行 (本来想强迫症的让页面不带任何 CSS 也可读的结果还是没做到裸内容和实际显示完全一样), 比如不支持 display:inline-block, 改成 display:inline 搞定, 还不支持 box-sizing 导致自己写的 col 宽度用百分比的话绝对被折行, 心想用 IE 的只能是电脑, 然后现在电脑屏宽没有小于 1024 的了吧, 估算了下直接硬减了个百分比实现, 不支持 border-radius 另外 padding 什么的实现也很奇葩, 这些就算了, 显示不正常就不正常吧, 勉强能看就好了
主流浏览器没问题, IE8 基本没问题, IE7 甚至 IE5 只要宽容度好一点也能接受, 最后调成这样真的有忍不住学樱木花道来一句 “我真是个天才” 的冲动
本想写 FAQ 的但不知道看客们会有什么问题, 估计最大的疑虑是为啥不直接用 Bootstrap? 所以就把子标题改掉
我的经验是如果要基于 Bootstrap 弄出自己的风格, 还是要对他那套东西比较深入理解才行, 光重载 navbar 什么的就挺麻烦的, 而我这点需求自己写一个的代价也不大, 关键是可控, 同时自己也能把前端的技能点给各种点亮. 另外就是想要的很多功能都是 Bootstrap v4 里才有的东西, 但这货现在才 alpha, 而且明确说了只从 IE9 开始支持, 浏览器兼容性要死人的
在 Chrome (谷歌浏览器) 升级到 42.x 后, 可能导致支付宝控件失效, Mac OS X 10.10.2 和 Windows 7 SP1 均遇到此问题, 而安装控件又提示此插件已安装
经查是 npapi 这个选项被改成默认关闭了, 重新打开后重启浏览器即可
在浏览器地址栏打开 chrome://flags/#enable-npapi 找到 npapi 的选项
点 “启用”, 此时浏览器最下方会提示重启, 点 “重启浏览器” 即可
附: 支付宝控件在 Chrome Web Store 上的插件安装地址
在 DigitalOcean 上买的 VPS, 兼做个人翻墙用, 但是上面的 VPN 配置总是出问题, 按教程重新走了两遍还是不行
找了很久终于还是揪到问题的根源在 openswan 的版本上, Debian 7.0 上最新的是 1:2.6.37-3+deb7u1, 如果默认 apt-get install openswan 就是这个版本, 但这个版本有问题, 用 Debian openswan l2tp 2.6.37 搜索就能发现一堆人吐槽
Debian 的 Maillist 里有人提到过: L2TP/IPSec on Mac OSX stop working after openswan upgrade [with patches], 在 BugTrack Debian Bug report logs – #744717
openswan: After wheezy security update from version 1:2.6.37-3 to 1:2.6.37-3+deb7u1 stop working L2TP over IPSEC from Mac OS and IOS devices. 里翻到解决方案, 那就是降级. 直接执行如下命令, 连重启服务都不用
sudo apt-get install openswan=1:2.6.37-3
想着这个 bug 存在都好久了, 怎么 Debian 官方还不修复, 于是在刚才那个 BugTrack 里还翻到说 Debian 上的 openswan 已经不再维护了, 建议更换成 strongswan, 相关 BugTrack 见 Debian Bug report logs – #736557
RM: openswan — RoQA; unmaintained, RC-buggy
本着不支持的模块就弃用的想法, 安装 strongswan, 然后安装过程中提示 /etc/ipsec.conf 不一样, 对比了下配置项变的还挺多, 特么对笨狗这种伸手党来说谁知道哪个配置是什么意思啊, 折腾了一会发现还是嗝屁. 罢了, 还是乖乖退回 openswan 1:2.6.37-3 吧, 果然一退回就好了…
总结下教训:
Linux 发行版真是各种圣战… 当年选 Debian 就是被 buyvm 128M RAM 的机器压迫的, 新 VPS 默认配置下可用内存最大. 要不要按照知乎这个问答改用 CentOS 呢?: 服务器操作系统应该选择 Debian/Ubuntu 还是 CentOS？ 貌似天朝民间各种衍生工具上支持度更好的还是 Ubuntu, 毕竟图形界面上手难度小, 有大量小白用户, 然后很多工具也都默认跑 Ubuntu (比如民间版迅捷?)
另外, 应该有各种使用 strongswan 来架 vpn 的教程了, 不过好像比较难找到
最后, 给自己的 DigitalOcean 导流链接做下广告吧, 5$/mon 的 512M RAM VPS, 优势是全 SSD, 部署快, 缺点是只有旧金山机房比较靠谱, 新加坡机房在国内某些线路下非常不稳定
两年前在北京折腾 12306 时写过一篇 12306 和火车票那点事, 后来想想还列了一堆东西可以写, 不过后来忙忘了 (其实就是懒…), 现在反正都过时了, 再列出来看看当时的一些吐槽现在是不是还有效 (下面说的都是 2013 年 2 月记录的内容, 关于 2013 年春运, 本文写于 2014 年 12 月, 关注 2015 年春运)
这个没法更好的插入, 今年 12306 干了个比较狠的事情, 如果你频繁切换 HOST 去查, 他会随机返回一个查询失败并且把你踢出登陆状态, 后面就算查到票要定时你还得重新登陆, 其实就是随机验证码插入
这个无解, 更透明就意味着没法人为操纵, 万一有突发事件了估计都没法周转. 而且现在是网络和电话提前 60 天卖票, 窗口和代售点延后两天, 还要考虑票额分配比例是否要动态化
2013 年底的时候退票费改革了一次, 2014 年底跟着预售期延长又改了一次, 某些程度上把退票成本拉高了 (但是还是有很大漏洞, 具体自己研究就好, 点到为止). 更狠的是退票后不马上退回票仓放出来, 这个就会导致退出来的票不一定自己能买到, 黄牛的压力还是变大了的
目前来看还没有第三方敢去接这个明显供不应求的市场机制, 传闻 12306 也找过 BAT 的人, 做过大规模系统脑子正常的人都婉拒了, 阿里在排队系统上给了建议和帮助, 不过也还是没能解决本质上票不够的问题
过了两年, 现在公知似乎更像是贬义词了? 不过随着动车越来越多, 公知们又可以有不同的喷点
之前说可以参考下印度的机制, 不过从上面这个长微博里提到的情况看, 大部分时候还是我们对其他机制想的太乐观了…
这个地址已经不能用了, 12306 切了一套全新的, 而且现在就算用 http 也会被强跳到 https
这个还是有点用的, 但是用途不大
现在分车类型刷已经无效了, 都是一次查询出所有结果, 然后前端 JS 来做过滤, 换发到站还行, 但是 HOST 缓存太严重
同上
这个还是有用的, 卡点会从提示预售时间变成预定, 但是票额不一定是马上出来的. 另外如果是学生可以考虑成人学生混刷, 据我观察学生票好像被缓存影响的小一点 (也可能是默认大家都在刷成人, 学生票刷的多了也一样坑)
最后, 特么今年我的票还没搞定, 之前的工具一懒得修二来不及修, 今天用 UC 搞了一把还是挫, 难道要我去下个 360?