Talk is cheap

Show me the code

在 vue-router 中访问导航栈

vue 提供了 <transition> 组件来为组件的切换添加动画,得益于这个特性, vue-router 中的 router-view 也可以在切换路由组件时播放动画。自然的,就产生了在前进/后退时使用不同动画的需求。在 vue-router 文档的 Route-Based Dynamic Transition 一节中,提供了这样的写法:

// then, in the parent component,
// watch the `$route` to determine the transition to use
watch: {
  '$route' (to, from) {
    const toDepth = to.path.split('/').length
    const fromDepth = from.path.split('/').length
    this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
  }
}

根据路径中 / 的个数来判断路由的深度,然后以此决定播放的动画。但事情并不总是那么简单。

- MORE -

在 Arch Linux 中安装 WordPress

现在的博客程序用着挺好的,为什么去折腾 WordPress ?此中有很深刻的原因,而且我也没准备更换博客系统。不过还是踩了一些坑,得记录下来。

- MORE -

使用 GZip Bomb 对抗站点扫描工具

如果你翻看过公网 nginx 服务器的 access.log 的话,一定会发现很多尝试搞你的人。比如:

47.52.119.128 - - [12/Nov/2018:15:47:22 +0800] "POST /wp-admins.php HTTP/1.1" 404 153 "-" "Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:59.0) Gecko/20100101 Firefox/59.0"
92.154.49.175 - - [12/Nov/2018:17:37:39 +0800] "GET /mysql/admin/index.php?lang=en HTTP/1.1" 404 555 "-" "Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.77 Safari/537.36"
14.141.146.139 - - [13/Nov/2018:02:25:17 +0800] "POST /qq.php HTTP/1.1" 405 157 "-" "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:52.0) Gecko/20100101 Firefox/52.0"
63.146.211.234 - - [13/Nov/2018:05:43:50 +0800] "POST / HTTP/1.1" 405 157 "-" "Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; rv:11.0) like Gecko"

诸如此类,懒得给这些 IP 打码了。这些类似的请求一次少说也有上百个,弄得 Nginx 的日志里面红红一片。其实一开始是懒得搭理这些东西的,毕竟对我来说也没什么损失,大不了跑点流量,反正国外辣鸡主机流量跟不要钱似的。

趁着双 11 ,剁手入了一台辣鸡主机, 2C2G 的配置看起来很是豪华。但才刚跑完 vps2arch初始化脚本 ,就发现已经有人摸到我的 IP 开始扫描奇怪的东西了。这怎么能忍?于是我决定搞点防御措施,至少要让那些只会用工具扫描的 Script Boy 们吃点苦头。

- MORE -

September Blue

第一次知道这首歌,应该是在锤科 T2 发布会 1 2 的时候。其实也不太记得到底有没有看过了,但这首歌却一直留在了我的歌单里,与一大票 V 家歌曲混在一起。印象最深的一次,是走在教学区与生活区的路口,耳机里面在放着这首歌。不过那是应该也不会是九月。

雨夜?

- MORE -

使用命令行工具处理图片

用手机拍摄的照片将要在互联网上公开转播的时候,我通常会担心两点。第一,图片的 EXIF 信息会不会泄漏;第二,尺寸太大,传输速度不理想。虽然大部分服务商都会压缩图片,但如果不是自行处理一下的话还是会感觉怪怪的。但如果使用 Krita/GIMP 之类的工具,有些杀鸡焉用牛刀的感觉。所以简简单单的命令行工具就足够了。

删除图片的 EXIF 信息

这里用到的第一个命令行工具是 exiv2 。删除 EXIF ,只需要一条命令就够了:

exiv2 rm *.jpg

然后图片的 EXIF 信息就没了。

这个工具也提供 prpr 的功能,不过是用来打印 pr(int) EXIF,不是你们想象的那种:

exiv2 pr *.jpg

输出的格式像这样

- MORE -

MelodyPlayer α 测试

没想到这个坑这么快就填上了,以后我也能在博客里面插入音频啦~~

顺便推荐一首歌,这几天开发的时候一直单曲循环的:

パレットには君がいっぱい · ぽわぽわP

这篇博文还没写完,似乎就又出现了三个 bug ... 囧rz ... 这里就先不立什么新功能的 Flag 了,有机会把 bug 都修掉再考虑吧 ...

- MORE -

制作极限压缩的 Material Icons 图标字体

UPDATE: 写了一个傻傻的 Python 脚本 来自动处理字体,只要将所需要的图标名称每行一个写入 icon-names.txt ,就能一键生成压缩好的字体文件。(2018/04/26)

以下是原文。


这几天挖了 新坑 MelodyPlayer ,其中有用到 Google 的 Material Icons 。虽然它的 woff2 格式只有 42KB ,但我只用了其中的 10 个图标,加载整个字体文件显得很不划算。虽然 Material Icons 提供了制作 Sprite 的方案,但只有 SVG 或 CSS Sprite ,我的用法是 <button> 里写图标的名字,不能兼容。

我不愿意改代码,于是想寻找一种提取字体中特定字符的方法。

经过一番搜索,找到了 fonttools 这个强大的工具,可以精确控制字体文件的每一个 Glyph ,最大限度压缩字体。

- MORE -

另一个,四月的尾巴

躺在床上,但并无一点睡意,好想写点什么。

前天的天气很热,热到晚上睡觉都出汗。但昨天又很冷,风雨交加,出门要穿长袖。

这几天在搞我的 MelodyPlayer ,使用 WebComponent 的音乐播放器。很认真的写样式,逐句优化代码,感觉像是在对自己的前端姿势做一个总结。谁不需要一个播放器呢。

斑驳

- MORE -

拿回已经被抢注的 GitHub 用户名

ID 跟别人重复是一件非常尴尬的事情。尤其是当你想出一个自认为“绝妙”的 ID ,然而却被别人捷足先登的时候。但 GitHub 的 Name Squatting Policy 允许 inactive 的用户名被收回,然后重新被注册。

几年注册 GitHub 的时候,发现 @rocka 这个用户名被注册了,虽然很失望,但是也只能放弃这个念想。再仔细看一下那个用户的主页,虽然注册时间很早(2011 年),但是没有一个 Commit 、 Repository ,甚至连一个 Following 都没有。

rocka's previous owner

- MORE -