IT 设备折腾记 - 未盼到的 iMac

New Mac 2016

千呼万唤,Apple 秋季发布会终于要开始了,New MacBook, New iMac,真的是等的太久了。

还有什么,是不是上了全新的处理器,换了 DDR 4.

临时插入的 Surface Studio

结果在前一天,Microsoft 先开了一场发布会,拿出了让人惊艳的 Surface Studio,Dial 酷的让人忍俊不禁。


## Apple Event

感觉 Apple 都不用再开发布会了。当然这是不可能的。

如期而到的发布会并没有引起任何的兴趣,清晨起床刷了下微博,只看到 TouchBar 上的几个 Emoji 的 New MacBook Pro

TouchBar

这个不好说,毕竟没用过,反正现在的 FLICO 上也没有 F1-12,也挺好的。

Removable Devices

据 ifixit 拆解,内存也是焊死的,好消息是硬盘是可替换的,坏消息是 super-custom SSD controller。(为了卖自定配件,苹果和标准越走越远啊。)

说说 USB-C

新的全 USBC 口,说实话,我是很喜欢的,什么线材贵,转接口麻烦,那是因为媒体完全没经历过更早的时代,不理解 USBC 意味着多美好的未来,为了这份美好,短时间的一个转接口真的不算什么。

而且 USBC 是标准,不再是 Apple 一家的专利,以后的设备会越来越多的。不信你看旁边的小米。

iMac 2016 Late

而 iMac 却没有更新,不会要等 Kaby Lake 吧,完全没有任何改进好吗。。难道要我等 Cannonlake!!!


## 双十一

放弃了 Apple 之后,其实本来买的意愿就不大,老 MBP 换过主板后,感觉还能再坚持两年。而且换的意义太小,我总是盖上笔记本,用外接显示器,所以新键盘,TouchBar 都没有用。不如买些好玩的东西,比如 OSMO+。

前几天试了下无人机,启动起来真的跟飞机一样,那声音,算了,还是入 OSMO+ 吧,用来拍一些好玩的视频,只是现在我还没有能成功剪辑一个,甚至都没有开始。

自从 iMac 组了 FD 之后,那叫一个慢啊。升到 16G 内存都没用。想再入一块 SSD,发现已经入不起了,价格涨了一倍啊。

Shanghai Marathon

0920 报名日

错过了社会报名通道,本以为就没机会了,没想到,今年竟意外的第一次成功报名,要知道这个难度。。。

报名成功后,就一直担心全马是否能完成,毕竟现在的身体和之前还是有不少差距的。看看体重表上的数值和那年企业竞跑时,差别还是挺大的。我慢慢的变成了那个最不喜欢的中年胖子。

1029 取装备日

时间过的还是挺快的,转眼间就到了取装备的时间,第二天就是开赛日。

当然,在这之前,还有一件事要做,就是体检,本想图个方便,去附近医院检查下就完了,结果医生不懂,给做了个标准检查,做了心电图和肺功能,这和朋友说的十块钱完事不大一样啊。当然,最难过的还不是这些,而是交完钱后却不能做检查,又不得不花两个早上退款。

最后,还是去了指定的医院,20块,挂号,看了下血压,听了下心跳,完事。

拿装备时,才知道那可是运动界的盛事,各种赞助商的展台,各种跑步的社区和商品,琳琅满目。还有一些借运动的名义旅游的项目,我特别感兴趣,还听了好久。

1030 开赛日

随着 5:00 的闹钟起床,然后吃了一些高能量早餐,就出发了。

从第一站地铁,看到一个跑者,然后陆续的站点开始,整个车厢挤满了参赛者。

从南京东路站出来,满街绿油油的,在灰暗的早上,显得格外清新。

存好衣服,穿越拥挤的卫生间地带,来到中山东一路的起跑带,全是人,各样的人,大家因同一个爱好聚在一起。

天不算太冷,和往年 12 月份开赛比,这个天真的是舒服多了。

随着节奏做一些拉伸运动,主播的声音不断的响起,介绍着上海,忽然,灰暗的天空被太阳划开了一道口,阳光瞬间就洒满了天空。主播激动的声音回响了想个起跑的瞬间。

进行时

42 公里,完全没概念,差不多是从古北开车到迪士尼的距离吧。最远只跑过 21 公里的半马,时间是 135,还挺满意的,但那时的我还没有大肚子 :(

起步时,人流非常大,完全迈不开步子。穿越南京东路时,感觉很兴奋,毕竟时隔2年,又重新跑回了这里。

我一直跟朋友推荐跟跑,因为这条线实在是太美了,从外滩,到南京路,过静安寺,到淮海路,然后从西藏南路到龙华,回到体育馆。而且封路,这不是常有的事。

第一个十公里

用时一小时整,跟预想的差不太多,以为会更快一点。

第二个十公里

用时一小时多几分,也跟预想的差不多。照这个速度,感觉进 430 没问题啊,小窃喜。

第三个十公里

快结束时,右脚开始感觉不舒服,脚背很痛,整个脚底板每次踩下时,都很疼。结束时间应该在 330 左右。

第四个十公里

这个十公里,完全是走的,而且走的很狰狞,因为我看到了后来拍的照片,整个面部表情都很痛苦,是的,脚实在是太疼了。如果想起跑,只能把脚趾蜷起来,然后才能忍者痛跑起来。每公里差不多,就是跑 200-300米,然后慢慢的走。

而且这段路是最无聊的绕弯,在一个小的地带里,拼命的绕圈,完全没有美感。

最后的冲刺

从龙华到体育馆的那一段,可能是上个十公里对起跑的无奈换作吃喝的动力,喝太多饮料了吧。也没啥力气了。跑一下,停一下。

最近跑到体育馆里时,都没有冲刺的感觉了。

修复

当天下午,还是做了不少的事,没有休息,腿部走起跑来颤颤抖抖。

第二天再起床时,发现胳膊也支撑不住了,下床时,真的像是滚下去的。

差不多,这种感觉过了近四天,才开始慢慢消退,然后。

然后就开始怀念马拉松了,东京马拉松,纽约马拉松,柏林,北欧 …

Native Async Functions with Node v7

Node.js v7.0 已经正式进入 Current 了,也出现在了官网的首页。

async-functions

该版本更新 V8引擎 到 v54,集成了我最爱的一个 feature: async functions,所以特别关注。

Install

1
2
$ NVM_NODEJS_ORG_MIRROR=https://npm.taobao.org/mirrors/node nvm install 7.0.0
$ nvm use 7.0.0

体验

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const timeout = function(delay) {  
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve()
}, delay)
})
}

async function timer() {
console.log('timer started')
await Promise.resolve(timeout(100));
console.log('timer finished')
}

timer()

如果直接执行,会报错:

1
2
3
4
5
$ node app.js

async function timer () {
^^^^^^^^
SyntaxError: Unexpected token function

需要开启 --harmony-async-await

1
2
3
4
$ node --harmony-async-await app.js

timer started
timer finished

## koa2

koa2 也终于可以进入正式版了,虽然一直在用。 但目前仍是用 babel 进行编译的,一直期待项目可以不再需要编译。目前只剩下 ES Module 了。

一段 koa2 的代码(有没有一种美到的赶脚):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// app.js
const Koa = require('koa')
const app = new Koa()

app.use(async (ctx, next) => {
const start = new Date()
await next()
const ms = new Date() - start
console.log(`${ctx.url} - ${ms}ms`)
})

app.use(ctx => {
ctx.body = 'Hello Koa'
})

app.listen(3000)

8384

又到了一个不写点东西会有罪恶感的间隔了。

今天看到一个好消息,3系 2017 换装 B48 发动机后,还取消了 320i,只给 320iM,指导价从 36.7 直接降到 32,wo,好划算的即视感。要从 5 系换回 3 系了吗?就是这么善变。

话说好久不看车了,因为忙,最近太忙了,晚上躺到床上都有种感动。

最近也好久不开车了,一个人开车堵在那里的感觉让人更心烦,就改地铁了。有时还能碰到同事,顺带保卫下萝卜(为了全部三颗星才唯一一个没卸载的游戏)。

除了上海高架的永堵,还让人闹心的是体检结果出来了,这个用词,恩,中央型肥胖,后来经过我鉴定,团队里只有一个人不是,因为他刚因营养不良进了医院。哎,一场中年的通病,我正在变成那个最不喜欢的自己。

胖带来了很多问题,之前 6.8K 最好成绩是 0.26,半马是 1.35,全马没跑过。但现在最远只能跑 8K 了,而且跑步的感觉很不一样,有种 Golf 到 Magotan 的感觉,一点都不好。

说到 Running,最近还报了上马全马赛事,虽然不至于担心跑不完,但还是有些顾虑的,比如到底报上名没,充了 2500 块,西贝也不回个信,是的,当我知道上马开始报名的消息时,社会报名通道已经关闭了,后来赶紧找各大赞助商的名额,西贝是第一个发现的。

同事买了一个 DJI 无人机,由于我太喜欢了,于是给他改名叫大疆了,顺带把另一个全身小米的 iOS 开发者改名叫小米无脑粉

DJI Osmo,GoPro Hero 5 好多想买 😂

提到数码,iPhone 7 发布了,最后悔的就是手里的 6 Plus 升到了 iOS 10,因为 Apple 又解决了老设备过于流畅的 Bug,明显的卡顿,明显的耗电。7 完全没有要买的欲望。

Mac 家族要等 10 月份了,本来期待新款 iMac 的,但现在也淡了,平时都没有开机的机会的。

当然,花钱的地方还是有的,比如把家里装修下,不过目前形式下只能装院子,铺上新地砖,换把绿色的伞,放个投影仪,再弄两把躺椅,生活也可以更好的。

生活当然也在细节,美丽华下开了家新的面包房,一直没尝试,这不,昨晚没买到其它家,去尝试了下,碰巧买到一款海盐蜂蜜迷你可颂,早上烤箱加热后,蜂蜜融化,配上一点点的盐,口感实在太好了,于是早上我又给自己做了一杯咖啡。

生活,就这样,随人,你想过的更好,那就过的更好。

是的,我最近过的很好,因为 …

React Boilerplate

  1. 1. 概念
    1. 1.1. Component
    2. 1.2. Virtual DOM
    3. 1.3. 单向数据流。
  2. 2. Choice
  3. 3. React Prictice

Learn Once, Write Anywhere

概念

  • Component
  • Virtual DOM
  • Oneway flow

Component

首先,组件化的优势是可以组合,复用性更强。

一个组件包含完整的内容, JavaScript, CSS, HTML。这和之前的 JS Framework 有所不同, 之前像 Angular,都是将模板、样式和事件分开处理的。但在 React 中,这些的边界已经不再那么清晰了。

组件有生命周期,且有一个 render() 方法,用于渲染。

Virtual DOM

就是系统会帮你找到你的改动,改的地方重新 render,性能高的不要不要的。

之前 Ajax 是要你自己指定哪一块改了的,然后进行替换,React 则是全自动,方便、高效。

单向数据流。

这个不得了。所有的数据事件都是单向传递的。View 依赖于 Data(prop, status),只要这两个一改,view 自动渲染。why? virtual dom啊

Choice

Angular 现在明显弱于 React 了。

Angular 比较重,更像是一个后端的 Framework。所以深得后端喜爱。

Angular 2 用了 Typescript 增加了入门难度,所以接受度也不高。

React.js 风头太强了。这种东西。谁比谁先进不重要,重要的是生态。生态赢了,就胜了。

React.js 也有不好的地方,会完全改变你写page的方式。

React Prictice

1
fasd

今年八月

今年八月是最有感情的一个,因为每天都是蓝天。

感谢 G20,每天都有期待和感恩的感觉真的特别好! I ❤️ SH

于是有空就会出去走走,每天都感慨下。

koa 2.0 - Middleware

  1. 1. middleware 原理
    1. 1.1. U型 嵌套 (洋葱嵌套)
    2. 1.2. 原理解析

koa 2.0 系列:

Middleware 是 koa 里很重要的点,那关于 Middleware 的基本用法,实现原理和最终如何写一个 koa2 的中间件,大致的讲一下。


## 官方 middlewares 列表

这里是所有的 middleware 列表,支持 koa2 的不多,但也够用了,其实很多 middleware 真的就只是几句话的事,自己写也很方便。


## 基本用法

这个例子是从官方上改造的,加了总执行时长(x-response-time),并用到了以下特性:

  • koa2 context
  • async functions
  • arrow functions
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
app.use(async (ctx, next) => {
// 启动 middleware,记录当前时间
let start = new Date;

// 进入下一个 middleware,并等待返回。
try {
await next() // next is now a function
} catch (err) {
ctx.body = { message: err.message }
ctx.status = err.status || 500
}

// 内部中间件执行完成,一般意味着业务执行完成。
// 这时,记录结束时间并输出。
let ms = new Date - start;
ctx.set('X-Response-Time', ms + 'ms');
})

// response
app.use(async ctx => {
// 这里处理业务,也就是最后的一个 middleware,所以不再调用 next()
const user = await User.getById(1) // await instead of yield
ctx.body = user // ctx instead of this
})

middleware 原理

U型 嵌套 (洋葱嵌套)

koa 最有特点的就是 U 型 middleware 的实现了,有点像面向切面编程 AOP 从上图可以看出,它顺序执行 middleware,到达最后一个时,又按队列再次顺序执行。

代码上理解就是这样子的:

1
2
3
4
5
6
7
8
9
10
11
12
.middleware1 {
// (1) do some stuff
.middleware2 {
// (2) do some other stuff
.middleware3 {
// (3) NO more middleware !
// ctx.body = 'hello world'
}
// (4) do some other stuff later
}
// (5) do some stuff lastest and return
}

原理解析

其实原理并不难,它是通过一个 compose 的库来实现这种的。


## V1 的支持方案

koa2 已经不支持 generator 时代的 middleware,但提供了一个库来做转换 koa-convert,到 v3 时将彻底放弃。

1
2
3
4
import convert from 'koa-convert';

const app = new Koa();
app.use(convert(cors()));

## Middleware 能做的事
  • 在请求到达前,做用户和权限的判断,做 RateLimit,限制 某个可用的 IP …
  • 在请求处理后,可以记录服务器处理时长,对结果统一格式化 ….

Express 的 Middleware 是单向的,就没有它这么方便。


## REF::

koa 2.0 - Context

koa 2.0 系列:

在介绍篇时,提到过 Web Framework 的最重要的作为就是处理 request & reponse。

koa 将 node 的 request & reponse 对象封装在一个新的对象中
context,并提供一些更简单的 API 方便调用。

Context 是在每一个 request

Koa1 在调用时,使用的是 this,而 koa2 则是 ctx。

1
2
3
4
5
// Koa2
app.use(async (ctx, next) => {
ctx.body = 'hello world'
await next()
})

## API

Context 提供的一些方法和 accessors(访问器)。

ctx.req

node request 对象,被封装到了 ctx.req

ctx.res

node response 对象,被封装到了 ctx.res

ctx.request

koa 的 Request 对象。是对 node 的 request 进一步抽象和封装,提供了日常 HTTP 服务器开发中一些有用的功能。

ctx.response

koa 的 Response 对象,是对 node 的 response 进一步抽象和封装,提供了日常 HTTP 服务器开发中一些有用的功能。

ctx.cookies

1
2
ctx.cookies.get(name, [options])
ctx.cookies.set(name, value, [options])

ctx.state

可以通过 State 向前端 View 传递数据:

1
this.state.user = await User.find(id);

ctx.app

Application 实例的指针。


## cxt 访问器

context 提供一些 alias & accessors 以方便更快操作 request & response。

Request aliases

  • ctx.header
  • ctx.method
  • ctx.method=
  • ctx.url
  • ctx.url=
  • ctx.originalUrl
  • ctx.path
  • ctx.path=
  • ctx.query
  • ctx.query=
  • ctx.querystring
  • ctx.querystring=
  • ctx.host
  • ctx.hostname
  • ctx.fresh
  • ctx.stale
  • ctx.socket
  • ctx.protocol
  • ctx.secure
  • ctx.ip
  • ctx.ips
  • ctx.subdomains
  • ctx.is()
  • ctx.accepts()
  • ctx.acceptsEncodings()
  • ctx.acceptsCharsets()
  • ctx.acceptsLanguages()
  • ctx.get()

Response aliases

  • ctx.body
  • ctx.body=
  • ctx.status
  • ctx.status=
  • ctx.length=
  • ctx.length
  • ctx.type=
  • ctx.type
  • ctx.headerSent
  • ctx.redirect()
  • ctx.attachment()
  • ctx.set(field, value) // 设置 response header 字段 field 的值为 value。
  • ctx.remove()
  • ctx.lastModified=
  • ctx.etag=

REF::

https://segmentfault.com/a/1190000006085240
https://segmentfault.com/a/1190000006145114

koa 2.0

  1. 1. Introduction
    1. 1.1. Callback hell
    2. 1.2. ES 2017
    3. 1.3. middleware U型嵌套 机制
    4. 1.4. 轻量化内核
  2. 2. REF::

koa 2.0 系列:

Introduction

在开始 koa 之前,先回想下一个 Web Framework 应该要做的事。

  • 监听请求
  • 处理 request 中的 header/body
  • 返回 response 中的 header/body

统称 request/response 为 context,一般处理 context 不会只有一件事,大多数时间,我们需要权限验证,判断用户来源,RateLimit,日志,自定义返回数据 等等,这些事件为一个链状,context 顺序通过这些事件并对其进行加工,这些的事件在 express/koa 中叫 middleware

当你看完 代码 时,你会发现和我们设想的一样简单:

1
2
3
4
5
lib
├── application.js
├── context.js
├── request.js
└── response.js

所以 koa 内部主要关注两个要点:

  • context(上下文)
  • middleware(中间件)

## Why Koa

讲了上述的点后,并没有说明为什么是 koa,而不是 express 或其它。选择 koa 主要是以下几个重要的点:

  • Callback hell
  • ES 2017
  • Middleware U型嵌套
  • 轻量化内核

Callback hell

1.0 中,是通过 Generator 来实现了 coroutine-like,取消了 callback。

Callback 有两大硬伤,一是不可组合,二是异常不可捕获。

ES 2017

当然,选择它的主要原因是还有 支持 ES 的新语法

2.0 中用了 async functions 代替了 1.0 中的 co 的 Generator functions,使语法更优雅。

middleware U型嵌套 机制

这是 koa 很有特色的一个地方,另花笔墨去写。

轻量化内核

和 express 不同的是,它只做了 Web Framework 应该做的,Router,View 都不再提供,更轻量化。

当然也提供了多样性,可以用更适合的 middleware 来做事情。


## koa 2.0 Roadmap

koa 2.0 目前并没有正式发布,主要是为了等 V8 的 async functions 集成。但并不意味着不能投入使用,相反很多公司都已经应用于生产了。


## koa 2.0 Boilerplate

这是我写的一个 koa2 的最佳实践项目,其中包括:

  • 完整的项目结构
  • koa-router 集成
  • Sequlize & MySQL
  • DI Container 支持
  • Class 语法
  • Babel 配置
  • Multiple Environment 支持

重点说明下,为什么和其它的项目结构有所不同,这里采用的是类 rails 的结构,而不是将所有代码都放置在 src 目录下,原因是 node 很快就会支持所有的新语法,编译不再是必须的。

REF::