Linux Setup for Work

January 9, 2018

因为各种烦人的原因,公司搬家后到新办公室第一件事先把老电脑格了。犹豫了一下,最终还是放弃了重装 Windows,支持我做出选择的原因有几:

  • 不需要进行(纯)MS 系开发
  • 没有必须使用的 Windows 软件
  • Windows 上跑 Android emulator 卡得头疼
  • NVIDIA 已有支持 Linux 的官方显卡驱动
  • Linux 开发效率更高
  • Linux 学习价值更高

本文是办公室适用(对我来说)的安装记录。

Read more »

2017

December 29, 2017

今天是 2017 年的最后一个(法定)工作日。做个简单的总结。

先对比一下去年的自己与目标:

  • 关于工作,年初就换了。现在到了一个游戏公司(西山居)上班。对于去年吐槽最多的「业务」问题来说,如今算是彻底解决了。
  • 关于学习,感觉自己从某些方面来说,是有一点进步的。
  • 关于生活,今年入了两台主要设备,一台 RMBP,以及一台游戏主机。感觉都很值。

大概就这些。

Read more »

《芳华》

December 27, 2017

我个人非常喜欢冯导的这部电影。

我的理解,这部电影的内容、主题,就跟它的名字一样,芳华。虽然我不是生活在那个年代的人,但是我也许可以理解那些都是什么。电影把一代人最美的形象,最好的年华,最真的梦想,展示给了我们看。相信这一点没有争议,不用过多解释。

至于其它的,我觉得都不重要。

有些人在这个故事里看到的更多是人的「恶」。如林丁丁,如红二代,如政委。认为所谓的「战友情」不过是镜花水月。但是,生活不就是这样的吗?

在电影里面,最终没有任何事情被追究,就连「迫害」了刘峰的林丁丁,最后也能被拿来给受害人打趣,然而我并没有觉得有任何反感之处。

人不就是这样的吗?当你对形势做出了错误的判断,就理应承担造成的后果。认真就输了,可谓一语成谶。既然是自己酿成的错,有什么好追究的呢?

百年以后,没有人会记得这些人当年的那些点点滴滴的琐事,善也好,恶也罢,大概都已经如萧穗子散落的情书一般,仿佛从来就没有存在过。即使是残酷至极的战争,也终究会被人遗忘。

也许能留下来的,也不过存在于现实与记忆中的,一代又一代人的最美的芳华吧。

Upgrade Projects Built by vue-cli

December 18, 2017

使用 vue-cli 创建的脚手架项目,目前最大的问题是创建后无法自动地进行升级。虽然 3.0 版本已经计划将其作为头等大事来进行改善 (#589),但是现行的版本依然要面对它。以下基于 webpack template 来进行升级时的一些要点解析。

Read more »

JSX in Vue.js

December 13, 2017

在基于 Webpack 的 Vue 项目中添加 JSX 支持:

$ yarn add babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props --dev

各依赖的作用:

  • babel-plugin-syntax-jsx 提供基础的 JSX 语法转换
  • babel-plugin-transform-vue-jsx 提供基于 Vue 的 JSX 特殊语法
  • babel-helper-vue-jsx-merge-props 是可选的,提供对类似 <comp {...props}/> 写法的支持

然后在 .babelrc 中,增加:

{
  ...
  "plugins": [
    "transform-vue-jsx",
    ...
  ]
  ...
}

注意如果有其它 env 也要如此加上 transform-vue-jsx 插件。

Read more »

Serve static with PM2

December 5, 2017

Command (2.4.0+):

$ pm2 serve <path> <port>

For example:

$ pm2 serve /dist 80

By default, it displays 404.html from the serving directory when that happens (NOT configurable).

Common-used Commands

November 8, 2017

Personal common-used commands list, including windows, osx, git, etc.

Read more »

Vue-Router Note

November 6, 2017

Vue Router (https://github.com/vuejs/vue-router) 使用笔记。虽然官方文档比较详尽,但实际用起来依然有些地方需要特别注意的(其实主要是我的个人需求)。

Read more »

Limit Prerender Plugin Workers By Webpack

October 29, 2017

Prerender SPA Plugin 是一个可以将 Vue 页面预渲染为静态 HTML 的 webpack 插件,对静态小站(比如博客)来说很棒棒。但是最近用的时候总发现一个问题:它的 build 失败率越来越高,尤其是在 CI 上。后来在其 repo 的一个 issue 中发现了问题所在,就是它没有限制 PhantomJS workers 的数量,导致页面一多就直接全部卡死不动,然后超时。

(Workers) Default is as many workers as routes.

虽然有人已经发了 PR 来修复这个问题,然而好几个月过去了也没有 merge,不知道是什么情况。于是我在自己的尝试中找到了一种可以接受的解决方案:虽然我不能限制你插件 workers 的数量,但是可以限制每个插件渲染的 route 数量呀。

具体思路就是:

  1. 将所有的 route chunk 成小组,比如 10 个一组
  2. 针对每一个 chunk 创建一个 prerender 插件
  3. 将所有插件都加入到 webpack plugin 中去

这样一来,就可以保证每个 plugin 最多同时创建 10 个 worker,全部渲染完成后再由下一个 plugin 接着工作。

简单的代码示例:

// Generate url list for pre-render
exports.generateRenderPlugins = () => {
  let paths = [] // the routes
  let chunks = _.chunk(paths, 10) // using lodash.chunk
  let plugins = []
  let distPath = path.join(__dirname, '../dist')
  let progress = 0
  chunks.forEach(chunk => {
    plugins.push(new PrerenderSpaPlugin(distPath, chunk, {
        postProcessHtml (context) {
          // need to log something after each route finish
          // or CI will fail if no log for 10 mins
          console.log(`[PRE-RENDER] (${++progress} / ${paths.length}) ${context.route}`)
          return context.html
        }
      }
    ))
  })
  return plugins
}

Better Documents

October 27, 2017

这篇文章记录了我是如何一步步地把 https://github.com/wxsms/uiv 这个项目的用户文档变得更优雅的。实际上,如何以一种高效又优雅的方式编写实例文档一直是我的一个疑惑,比如主要的问题体现在:

  • 如何使文档更易读?
  • 如何使文档更易于维护?
  • 如何减少编写文档的工作量?
  • 实例代码无可避免地需要手工维护吗?

最后一点是让我最头疼的地方。举个例子,我想要给用户展示一个组件的使用方式,以下代码可以在页面上创建一个 Alert:

<alert type="success"><b>Well done!</b> You successfully read this important alert message.</alert>

那么,我总要给用户一个相对应的实例吧。我要在我的文档上面就创建一个这样的 Alert,同时告诉用户说你可以这么用。这是一个很普遍的展示方式,那么问题就在这里了,我是否要将同样的代码写两次呢?

一开始我确实就是这么做的,虽然我知道这不科学,不高效,更不优雅。但我实在是想不到更好的办法了。

但是,现在,我已经(几乎)把以上的问题都解决了。

Read more »