关于脚型与选择足球鞋

我的脚型属于前脚掌比较宽的,耐克的鞋里目前发现刺客比较合脚,一图胜千言(图里的B是刺客):

Share

初涉 Mobile Web 开发

2015年12月至今年6月,我在猫眼做的开发基本都是桌面浏览器项目、B 端产品,技术栈是 Node.js/Koa + Webpack + React.js。从今年7月份开始,趁着一个新的 C 端项目的启动,自己转而投入到移动端 web 开发中。

C 端产品与 B 端产品差异巨大。

Read More

Share

Charles 的配置

目录

  • HTTPS 抓包配置
  • Charles 请求映射(Proxy Remote Mapping)
  • iOS 设备配置证书

Read More

Share

OpenSSL and Base64 以及网站性能优化的思考

记录一个小命令,涉及到两个比较基础的概念:OpenSSL 和 base64 编码。

OpenSSL 包含一个命令行工具用来完成 OpenSSL 库中的所有功能,更好的是,它可能已经安装到你的系统中了。
—— 百度百科

Base64是一种任意二进制到文本字符串的编码方法,常用于在URL、Cookie、网页中传输少量二进制数据。
—— 廖雪峰的官方网站 - base64

单个文件处理

OpenSSL 可以将任意 PNG 图片编码成 base64 字符序列,下面的命令以 in.png 图片作为输入,转码后把 base64 序列输出到 out.txt 文件里。

1
openssl base64 -in in.png -out out.txt

不过有个问题,上面的命令会产生折行(即 line breaks),要想直。要想去掉折行,需要添加 -A 参数:

1
openssl base64 -A -in in.png -out out.txt

文件批量处理

可以在需要进行批量处理的目录下运行下面的脚本,会将所有的图片逐个生成为同名的 txt 文件。

1
2
3
for filename in `find . -name "*.png" -o -name "*.jpeg" -o -name "*.jpg" -o -name "*.gif"`;
do openssl base64 -A -in $filename -out $filename.txt;
done

使用

1
background-image: url(data:image/png;base64,base64_code_goes_here);

多小的图片可以考虑使用 base64 进行内联?

Base64 生成的文件体积为原始图片体积的4/3倍,它对于网站性能优化的提升通常仅针对超小体积的图标类型图片,以体积的稍微增加,来减少 HTTP 的请求次数。那么多小的图片可以考虑使用 base64 进行内联呢?

考虑一个对图片文件的 HTTP 请求报文,其由三部分组成:请求行,请求头,请求响应。例如下面是对一张图片的请求的请求行与请求头报文:

1
2
3
4
5
6
7
8
9
10
11
# Request Headers
GET /piaofang/img/connect/project-bg/bg-00-wide-e4a26031.png?__sprite__ HTTP/1.1
Host: ms0.meituan.net
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1
Accept: image/webp,image/apng,image/*,*/*;q=0.8
Referer: http://ms0.meituan.net/piaofang/css/celebrity/piazza.331e5210.css
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8,ja;q=0.7,zh-TW;q=0.6,da;q=0.5

而得到的响应则是:

1
2
3
4
5
6
7
8
9
10
11
12
13
HTTP/1.1 200 OK
Date: Mon, 04 Dec 2017 08:59:58 GMT
Content-Type: image/png
Content-Length: 4331
Connection: keep-alive
Server: Tengine
Last-Modified: Mon, 04 Dec 2017 06:44:55 GMT
ETag: "5a24eee7-10eb"
Accept-Ranges: bytes
Cache-Control: max-age=2592000,s-maxage=3600
Vary: Accept-Encoding
Access-Control-Allow-Origin: *
X-Ser: BC208_dx-lt-shandong-qingdao-2-cache-7, BC14_lt-fujian-fuzhou-1-cache-1

请求头 + 请求响应报文,一共 939 字节(记为H)。再加上图片本身的体积,记为 I 字节。图片转为 base64 后体积会变为 4/3 * I 个字节。如果要问对于多大的 I,应该采用 base64 进行转换,就相当于求解满足下面条件的不等式:

1
H + I > 4/3*I

解为 I < 3 * H = 2817KB,即当图片的体积小于 2.8KB 时,使用 base64 进行压缩是会让性能更优的。而且考虑到 HTTP 请求本身的开销(计算资源、建立连接、网络延时等),将这个上限定为 4KB 也是不错的选择。

Share

《软技能——代码之外的生存指南》笔记

职业发展的驱动力一定是来自个体本身。记住:工作是属于公司的,而职业生涯却是属于你自己的。
—— 厄尔·南丁格尔

Read More

Share

MySQL 基本操作笔记

简单记录一下 MySQL 的最基本的操作命令。

Read More

Share

About Web SPA Data Flow

web应用数据流的类型

什么场景下需要关心数据的变动?

单向数据流

Observable & RxJS

Observable 是 TC39 提给 ECMAScript 的一个标准库提议,目前仍处于 Stage-1 草案阶段。根据 tc39/proposal-observable 的说明,RxJS 是当前对于 Observable 草案的一个实现。

RxJS 的入门级教程

让我们一起来学习 RxJS | 饿了么

参考阅读

Share

Webpack 指南(1. 入门篇)

webpack 基本概念

webpack 是目前非常流行的前端资源(JS/CSS/IMG/…)打包解决方案。它默认按照 ES2015 定义的模块机制来查找、打包文件,即对 importexport 声明进行相应的模块封装,而对于其他代码,则不做任何改动。如果想使用其他的 ES6 特性,现阶段需要借助于 Babel 这样的编译工具。

Read More

Share

Play Music with SoX on MacOS

基本使用

今日突发奇想,想在命令行下播放音乐。找到了一个现成的程序,SoX(Sound eXchange)。

Mac 下面执行下面的命令即可安装:

1
brew install sox

安装好之后,可以通过 play 命令来播放音乐(这首歌是在我博客另一篇博文HTML5 audio 实验里面用的音乐):

1
$ play ~/Downloads/naruto_xia_ri_xing.mp3

效果如下:

单曲循环

1
play ~/Downloads/naruto_xia_ri_xing.mp3 repeat 0

repeat 后面加上希望循环的次数,0表示无限循环。任何时候想要停止,按下 ctrl c 即可。

参考阅读

Share

关于MacOS文件系统的文件名大小写问题

背景

注意到这个事情,是因为今天在工作中发现了由此导致的一个构建问题。我在某个项目A上进行开发,该项目依赖了一个公共组件C。C是由其他同学负责维护,里面的JS源码、以及由 ES6 编译为 ES5 之后的部分文件名,是大写开头的(当然了,我个人是习惯于总是小写命名文件,用连字符处理长文件名情形),但是有个文件在创建的时候,用了小写开头的:pick.js,但是在引用的时候,是这样的:

1
import * from './Picker.js';

由于我们所有的开发人员都是配 Mac,因此在开发环境中,并没能发现这个隐藏的错误。只是在 A 项目中,发现这个文件是找不到的(我们使用了 webpack 进行构建):

1
Module not found: Error: Can't resolve './Picker' in 'some-file'

最后,通过修改文件名,就解决了这个问题。

Read More

Share