发表于 | 更新于
本文字数： 1.8k | 阅读时长 ≈ 3 分钟

数码产品类

Apple Watch Series 4

  • 为什么需要它？
    想要买一个手表，主要诉求有 3 点：计时、装饰、健康。
  • 为什么选择它？
    优秀的工业设计，赏心悦目的用户界面，强大实用的健康功能，包括光学心率检测、摔倒检测，以及健身记录、睡眠状况、冥想呼吸训练等，再加上 iOS 生态的各种健康 App，让它成为市面上最值得购买的智能手表。其他吸引我的包括，设计精美的多种表盘、多种形式的表带。唯一的遗憾在于续航只有一天。

iPhone XR

A12 仿生芯片加持，优秀的摄像品质，加以 Apple 一直以来的工业设计以及 iOS 系统和生态，在 5000 元这个价位来说，是一个合适的选择。

SONY WH-1000XM3

优秀的头戴式无线降噪耳机。

阅读全文 »

发表于 | 更新于
本文字数： 2.7k | 阅读时长 ≈ 5 分钟

birthday-celebration-gift-packaging

Webpack 的核心设计理念

一切皆模块

Webpack 通过 loader 来处理其他非 .js 文件，比如 HTML 和 CSS 文件，字体文件，图片。以上这些全都被当做模块来看待，依赖关系更加明确清晰，也更适合复用。

只在需要的时候加载需要的模块

如果最后打包输出的是一个 app.bundle.js 文件，这个文件的体积可能很大，用户访问应用程序的首页时需要等待其被全部加载、编译、执行，这个等待时间会很长。更合理的做法是，优先加载首页渲染所需要的模块，其他的资源在浏览器主线程空闲和网络空闲的时候延迟加载。只在需要的时候加载需要的模块，除了延迟部分模块的加载，还可以做以下优化：

  • 抽取使用次数较多的公共模块，进一步缩减打包后的体积
  • 抽取代码更新频率较低的第三方库，额外打包以利用浏览器的缓存
  • 去除无副作用的 dead code。所谓 dead code 是指既没有 export 模块，也没有像 polyfill 类工具库那样做影响全局作用域的处理（比如添加 Promise 到 window 对象上）。去除这些 dead code 不会对整个应用程序产生影响。这一过程即所谓的 Tree Shaking。
  • 利用 prefetching 特性确保延迟加载的模块不至于影响用户体验

术语表：

  • Code splitting 代码分割
  • Lazy loading 懒加载
  • Prefetching 预获取
  • code splitting 代码分割

Webpack 中有不少功能可以较为显著地提升网页的性能。下面列举出其中几个：

代码分割与懒加载、预获取

如果不使用代码分割，那么 Webpack 打包出来的只有一个类似 app.bundle.js 的文件。这有什么问题呢？主要有以下几个方面的缺陷，可能导致首页加载速度变慢：

  1. 代码中使用的诸如 lodash 第三方库，它们通常没有我们自己的应用代码更新地那么频繁。为了利用浏览器的缓存机制，可以将第三方库的代码独立出来，另外打包。这样，浏览器如果检测到第三方库的文件没有变动，便不会发送 http 请求，而是直接从缓存中读取，这样在刷新页面或者第二次进入的时候可以加快网页加载的速度。
  2. 包含了许多首页不需要的代码，比如弹窗、模态框这些交互性组件，比如详情页面，比如首页不需要的 CSS 样式，比如首页不需要的其他 JavaScript 代码等。这会拖慢首页的加载速度，降低用户体验。ES6 的 import 语法返回的是一个 Promise 的实例，可以利用这一点实现异步加载代码、模块。Webpack 在打包过程中会自动识别这样的 import 语法，将这些异步代码进行分割以实现延迟加载，这也是 Webpack 代码分割默认的匹配块是 async 的原因。以上所说的就是懒加载，当然，具体哪些资源用懒加载处理，需要开发者自己来按需配置。
  3. 上面提到的懒加载方式，在某些时候需要配合预获取来使用。举个例子，假如某个业务庞大的网站，首页仅加载了一些关键路径的资源，类似详情页面这类组件被设置为当用户点击后才会去加载。但如果详情页面组件本身体积很大，那么可能在用户点击几秒之后才会到达，这是很影响用户体验的。所以，理想的情况是，当首页加载完毕，主线程空闲了，网络请求也空闲了，再在后台获取这些体积较大的异步组件或其他资源（实际上，只要用户大概率会使用到、但是不影响首页的模块都应该采用懒加载再配合预获取的手段来处理）。Webpack 的 prefetch/preloading 特性可以解决这一问题。

我们以 Webpack 官网上一个例子来说明 prefetching 特性：现在我们有一个 HomePage 组件，其中包含一个 LoginButton 的子组件（该组件会在首页加载时渲染）。LoginButton 组件在被点击后会加载 LoginModal 组件。为了更好的用户体验，我们应该预获取 LoginModal 组件。在 LoginButton.js 组件内，通过在引入 LoginModal 组件时增加特殊的注释以让 Webpack 识别：

1
import(/* webpackPrefetch: true */ 'LoginModal')

Webpack 见到这行代码后，会将 <link rel="prefetch" href="login-modal-chunk.js"> 添加到 HTML 文件的 <head> 标签内。这会指示浏览器在空闲时段加载 login-modal-chunk.js 文件。

Tree Shaking

Tree Shaking 指去除那些在 JavaScript 上下文中未引用到的代码，这一特性是基于 ES2015 的静态结构特性。考虑如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
// math.js
export function square(x) {
  return x * x
}

export function cube(x) {
  return x * x * x
}

// index.js
import { cube } from './math.js'
console.log(cube(3))

上面代码中，index.js 模块没有导入 square 函数，为了更一步缩减加载到浏览器端的脚本大小，应该去除类似这里 square 函数的未被引用的代码。Webpack 官网上指明，要实现 tree shaking，需要满足以下 3 个条件：

  1. 使用 ES2015 模块语法（import 和 export）
  2. 在项目 package.json 文件中，添加一个 sideEffects 属性
  3. 引入一个能够删除未引用代码(dead code)的压缩工具(minifier)（例如 UglifyJSPlugin）

按我自己的操作，目前来看，第 2 步不是必须的，在生产模式下未指定 sideEffects 也可以。如果使用生产模式，第 3 步 Webpack 也会默认引入 UglifyJSPlugin 压缩工具。简而言之，在生产模式下，你只需要使用 ES2015 的模块语法即可实现 tree shaking。

参考

发表于 | 更新于
本文字数： 1.2k | 阅读时长 ≈ 2 分钟

Photo by Fernando Arcos from Pexels

图床

像我这种直接将页面托管在 GitHub Pages 上的，为了提高博客内图片的加载速度，只能使用图床了，而且最好是免费的。

sm.ms

V2EX 的某网友做的，国内国外的速度都不错，免费。上传图片的界面非常简洁，但是功能也非常简陋，不支持上传图片管理。单张图片不能超过 5M，单次批量上传数量最多 10 张。不过对于我来说够用了。

七牛云

如果像我一样没有经过备案的域名，不太适合用七牛云，因为当测试域名过期后，如果你没有绑定备案的域名，将会收回你的免费对象存储服务。一旦到期，你已经上传的图片转移起来比较麻烦。

图库网站

写博客离不开优质的、符合特点需求的图片，下面的几个网站都提供部分免费、优质的图片。

Everypixel

一个图片素材的搜索引擎，汇集超过 50 家在线图库。AI 技术加持。个人感觉最适合程序员这个群体。提供多种过滤条件来搜索图片，包括：

  • 基于免费还是付费搜索
  • 基于指定的图库来搜索
  • 基于图片格式搜索，是矢量 vector 形式还是像素阵列 graphics 形式
  • 基于图片的宽高比搜索，是水平模式即宽度大于高度，还是垂直模式即高度大于宽度
  • 基于图片主题颜色搜索，支持输入 RGB 或者 HSV 两种颜色格式
  • 以九宫格形式划分图片，搜索某一个或几个格子内没有物体的图片
  • 基于作者名字或者昵称搜索

特殊技能: 提供基于 AI 和机器学习的图片识别 API，免费用户每天可以调用 100 次该接口。包括以下 4 个功能：

  • 图片标签赋能，识别图片内容然后基于内容给出一系列的标签。用户可以基于这些标签来对图片分类。
  • 从摄影的专业角度来给图片打分，主要考虑美学和市场潜在价值两个维度。
  • 基于 Instagram 网站上 347, 000 张图片训练的基础上，基于美学效果给照片打分。
  • 提取图片中人物的脸部特征以评估其年龄。

评价

图片资源非常多，搜索功能强大，AI 加持，提供 API 接口。部分图片需要付费。适合喜欢折腾一点的人，比如程序员。

阅读全文 »

发表于 | 更新于
本文字数： 792 | 阅读时长 ≈ 1 分钟

background-dark-delicate

为什么我会爱好木工呢？

最早可能是受到了乔布斯的影响，对铝合金、不锈钢金属，玻璃，实木这类有质感，不会随时间轻易褪色的材质情有独钟。

目前自己家里其实只有两个小件的实木制品，一个是柏木做的腰部靠枕，一个是榉木做的小型收纳盒。我对这两件物品都是比较满意的，柏木的纹理算不上好看，但是触感以及抚摸木材表面发出的声音让人安心舒适，同时靠近一点还能闻到淡淡的柏木芳香。榉木的纹理细且长，色浅柔和，虽然比不上橡木和黑胡桃木那么吸引人，不过也算得上清新恬淡。此外，触感十分光滑。我的这个榉木收纳盒购于 2014 年，到现在 5 年时间了，外观依然好看，而且未出现过开裂等情况。

因为几个月后，自己的房屋需要装修，同时免不了要添置不少家具。逛过 MUJI 的木制家具之后，便对日式简约风格的木制家具深深着迷了，还向店内员工索要了一本精美的产品图册。

此后愈发不可收拾，除了了解各种木材的特点外，还对这些桌椅、床柜如何制成的产生了浓厚兴趣。

日本现代木工夏目石谷，家具制作 B 站上转载自 Youtube Up 主 ISHITANI FURNITURE。夏目石谷是一位典型的日本现代木工，使用了非常多的现代加工设备，风格偏向日式简约，产品多为实木成品家具，包括各式各样的桌椅、床、柜等。

另外附上 B 站上搬运他视频合集的地址：

阅读全文 »

发表于 | 更新于
本文字数： 4k | 阅读时长 ≈ 7 分钟

greetings-note-sign

写在前面

这篇文章存在的意义是先简单地列出一些临时性的想法、资料、清单，后续会经过长期、缓慢的整理，最后形成几篇供自己装修参考的手册。

其中不少只是一个简单的初步印象，为了描绘大致效果通常会附上一些图片，但是距离实际施工还有很大的差别。鉴于此，此篇博文将会有多图杀效果。初步考虑以下几个大类：

  • 地板与吊顶类
  • 卫浴用品
  • 住宅家具
  • 全屋定制
  • 厨房五金
  • 门窗
  • 整体橱柜
  • 衣柜 & 榻榻米
  • 瓷砖
  • 涂料（乳胶漆）
  • 浴霸
  • 板材
  • 灯具灯饰
  • 电子电工
  • 智能门锁
  • 安防监控
  • 收纳整理
  • 床上用品
  • 摆件

这里 给出一份天猫美家 2018 年 7 月份零售榜单出炉，共 20 多个品类、百余家品牌荣登榜单。

家具

家具板材的初步选择：

  • 成品家具，选用实木板材或者胶合板；
  • 定制的柜体（比如衣柜）采用胶合板、密度板或者刨花板。
阅读全文 »

发表于 | 更新于
本文字数： 2.6k | 阅读时长 ≈ 5 分钟

architecture-building-daylight

以下软件通常有这些特性：

  • 免费
  • 没有广告
  • 功能实用
  • 用户体验好

Cmder

Cmder is a software package created out of pure frustration over the absence of nice console emulators on Windows. It is based on amazing software, and spiced up with the Monokai color scheme and a custom prompt layout, looking sexy from the start.

可以简单理解为 Windows 默认命令行的替代品，但是体验和功能都有巨大提升。界面简洁美观，字体和颜色赏心悦目。有两个版本，一个轻量级版本，一个完全版本。建议下载完全版本，集成了 Git for Windows。安装完之后需要做一些简单的设置。

阅读全文 »