blog

「译」If It Doesn’t Suck, It’s Not Worth Doing


来篇鸡汤😸，不一定要十分赞同这篇文章，权当翻译练习了，译自：[If It Doesn’t Suck, It’s Not Worth Doing](https://medium.com/the-mission/if-it-doesnt-suck-it-s-not-worth-doing-1efdc6eb695c)

根据心理学，对于一件事件的**期许**，更多是情绪的力量而不是事件本身。

向老板提加薪的[害怕](http://journals.plos.org/ploscompbiol/article?id=10.1371/journal.pcbi.1003335)会让你感到浑身麻痹，且能够持续几个月。但是你一旦做了，这种感觉在你还没注意到之前就消失了。

得到某物或目标的[兴奋](https://hbr.org/2014/03/anticipating-pain-is-worse-than-feeling-it)会让人着迷。

但是，一旦你的欲望得到满足，很快你就会感到无聊，又开始寻求新的东西。康奈尔心理学家， [Thomas Gilovich博士说过](http://jcr.oxfordjournals.org/content/36/2/188.abstract)『我们买东西来让我们开心，确实开心了，但是却只有一会儿。新鲜的东西起初是会让我们开始，但是我们很快就适应了』

有趣的是， 你的大脑会引诱你，会强大到对某事追求的想法比事情本身更让你感到满足，以至于你会停止你的追求且永远不让它成真。因此，Ryan Holiday在他的新书[《Ego Is the Enemy》](https://www.amazon.com/Ego-Enemy-Ryan-Holiday/dp/1591847818)中说道，成功最大的阻碍就是对成功的想法。

做梦是很容易的。

告诉别人你的野心很容易。建一个愿景板写下你的目标很容易。站在镜子前表决心也很容易。

但是大多数人止步于此。

做梦的种种行径会阻止你实现梦想。

你会在你脑海中意淫那些醉人的细节，以至于你已经足够满足。你会麻木，你会欺骗自己，你已经做成了一些有成效的事情。

因此，当你尝试做的时候，你会马上遇到阻碍。通常情况，你很快就会用一些短暂的快乐来转移你的不适感。

不过，Robert Greene在他的书[《Mastery》](https://www.amazon.com/Mastery-Robert-Greene/dp/014312417X)中解释道，你可以学会喜欢这种内在的阻力。用他的话来说，『你寻找一种反常的快乐，以此来让你从痛苦中解脱。』

当你知道，你主动地将自己置身于一种净化和转化的情感之火之中时，那些不适和痛苦就会变成愉悦。

火可以净化和去除黄金中的杂质——拥抱成长的不适也是同样的作用。

再次根据心理学，从“心理灵活性(psychological flexibility)”的角度很有指导意义——即作为一个有意识的人更充分地接触此时此刻的能力，从而能够在行为上做出改变或持久努力以达到既定的目标和价值观(网摘)。

就像这篇文章将要展示的，我们活在一个道德价值日益下降的社会文化中。没有价值就没有理由活在当下。没有价值和愿景，“自我控制(self-control)”就只能是简单的意志力问题——这是一种低级的动机，不会让你走的更远。

## 如何走出你的窠臼

Jesse Itzler在他的书[《Living with a SEAL》](https://www.amazon.com/Living-SEAL-Training-Toughest-Planet-ebook/dp/B00U6DNZB2)中[讲述了](https://www.facebook.com/BigThinkdotcom/videos/10153519651483527/?pnref=story)他受到某个海豹突击队员的启发，邀请他在自己家中住了一个月的故事。Itzler承认自己陷入了困境，想要摆脱自己的日常窠臼。

第一天：“海豹队员”问Itzler，『你能做多少个引体向上？』， Itzler颤颤巍巍的做了8个。

『“休息30秒然后再来一次』，“海豹队员”说。30秒后，Itzler做了六个， 很挣扎。

『“休息30秒然后再来一次』，“海豹队员”说。30秒后，Itzler上前又做了三个， 胳膊已经很酸痛了。


『好吧，我们不会离开这里，除非你在做100个』，“海豹队员”说。Itzler很怀疑。『那我们可要在这里呆很长时间了。 因为我不可能做100个。』 然而，Itzler一次做一个，最终还是完成了挑战。因此。“海豹队员”说服了Itzler，他可以做的比他想象中多得多。

他将海报队员教给他的原则称之为”[40原则](http://thehustle.co/40-percent-rule-navy-seal-secret-mental-toughness)”——本质上来说，人们在超过自己真实实力的40%的时候就会感觉到身心疲惫。因此，海豹突击队的咒语就是：『If it doesn’t suck, we don’t do it.』。


## 目标导向的力量

Robert Greene说道：『痛苦时刻挑战着你——你是要学会集中精力，摆脱无聊，还是说像个孩子一样向及时的快乐和分心屈服？』


就像Itzler完成100个引体向上来打破心理障碍一样，你也可以通过追求一些实际的目标来走出你的困境。

核心的概念是：做一件事情，无论多久都不要停，直到把它做完。

你的目标是学习如何在不连续分心的情况下完成困难的事情。你需要在这些内在冲突的经历中发展出Greene所说的“反常的逾越”，与之共存。

这个概念也包含在Crossfit(一种健身方式)中，不像大多数人在训练的间隙查看智能手机，在Crossfit中，你有一个明确的目的，不达目的誓不罢休。

如果不感觉到糟糕，就不做它(If it doesn’t suck, we don’t do it.)

你可以将这个原则适用在任何地方。你可以在做家庭作业的时候，一直做直到完成。你可以写一篇文章，并坚持下去直到它发表。你可以做100个引体向上，或者跑5公里，一直到做完。早上5点钟就起床，哪怕是把你从舒服的床上拉起来很痛苦。

根据David Goggins在《Can’t Hurt Me》中的观点，积极地让自己经历情感的创伤才能够让你的“心理麻木“。

许多人都很软弱。就像将会展示的一样，我们生活在一个情感成熟不断减弱的社会。这大部分是因为道德价值的彻底崩塌，以及对自我专注(self-absorption)的极度夸大。


## 这是有史以来最大的机会
Cal Newport在他的书[Deep Work: Rules for Focused Success in a Distracted World](https://www.amazon.com/Deep-Work-Focused-Success-Distracted/dp/1455586692)中阐述道：

> 『在我们的经济中，有专注工作能力的人越来越少，与此同时也就越来越有价值，因此，那些能够培养这些能力的人，并以此为核心的人就会得到茁壮成长。』

毫无疑问，我们活在世上最注意力欠缺的时代。即使在几分钟内集中精力做一件事情都做不到。

对立定律正在发生作用，有一个力就有一个相等的反作用力。世界上大部分都越发注意力欠缺，少数人又在利用这个事实。

正是因为这个，经济学家Tyler Cowan在他的书[《平均时代的终结》](https://www.amazon.com/Average-Over-Powering-America-Stagnation/dp/0525953736?ie=UTF8&*Version*=1&*entries*=0)中说，中产阶级已经消亡。你要么是少数成功人士中的一员，要么你和大多数人一样，分心，超重，且挣扎。

选择在于你。

当有些事情很糟心，你要退出么？或者你坚持下去最终享受成长和成功带来的满足？

任何值得去做的事情一开始都是糟糕的。任何值得去做的事情就是需要痛苦和牺牲。这正是美国所面临的问题，美国最初建立在冲动控制的道德基础之上。最初充满了为了更好将来而抛弃及时享乐的人，而现在主流的思想却是*及时享乐*。

他们的确是这么做的。 他们活在当下。一般，当事情变得糟糕或者变难，大多数人都会退却。大多数人为了一时的满足而放弃更好的将来。

更糟糕的是，当今文化的双重“真理”是*爱你***真实的自己**(*love yourself for***who you are**)。 20世纪的自我尊重运动便是美国经济摇摇欲坠的最大因素。


人们被教育无论自己表现如何都要爱自己。这样，他们就变得安于平庸。然而亚洲或者其它被认为自尊心较低的移民群体的持续表现会优于自尊心高的美国人。

世界上其他地方会认为刻苦工作是一种美德的，而在美国，人们常说的一句话事：「不要太努力工作」，如今的成功定义是：更少的付出得到更多的东西。

Amy Chua 和 Jed Rubenfeld在他们书《The Triple Package: How Three Unlikely Traits Explain the Rise and Fall of Cultural Groups in America》提到大多成功人士，不仅能很好地控制冲动，还很谦卑。

他们可能有自信，但是还是对自己保持怀疑。他们因某种方式的压迫而感到不安。因此他们无论有多成功，为了证明自己都会不断地鞭策自己。从不满足于已有的成绩，持续保持谦卑。
 
**这种如此稀缺特质，在如今的经济中非常有优势**。同样，很多人去及时享乐而不是控制自己的冲动。特别在美国，谦卑的人很少，而且大多数人相信要想成功你必须爱你自己的言论。

垃圾。

真正的自尊是靠赢得的。是靠成功赢得的。而不是靠对成功的期望。

真正的自信来自于你坚持不懈的完成那些糟糕的事情。你在没有成功之前不可能真正自信。真正的自信是那些能够设计掌控自身情况所带来的副产品。

因此，Ryan Holiday在接受Lewis Howes的[采访](https://www.youtube.com/watch?v=cg4sBWItuAE)时说道：*回报从你做成的事情中获得，而不是许下的承诺*。

工作是困难的。

得到顶尖的身体状态更是残酷的。

建立深厚而且忠诚的关系更是几乎不可能，大多数的婚姻以离婚告终。

发展高度的心灵成熟需要为了真正的你而放弃你想成为的你。

所有的这些事情都很“糟糕”， 最起码在开始的时候。记住，如果它不糟糕，就不值得去做。然后，你就可以忍受这些不适，建立一个值得拥有的人生。

如果正如Itzler一样困在当下，那么久调整自己去完成那个特定的目标，无论它需要多久。

## 愉悦Vs.幸福

> 『一个没有来之不易的成就和克服困难的胜利的人生或许不是一个让人满足的人生，但是如果你把所有的困难都完成的很好——你会感到极大的满足，甚至战栗。
> 把自己推向另一个层次或者扩展新的领域可以带来幸福和自豪。只是活在当下，只为眼下的美好，不会带来真正的满足。
> 现在眼下这个时刻太渺小，太空洞了。 我们都需要一个将来，一个远比眼前满足更大，更超越，更值得我们去付出的将来。』
> —— The Triple Package


真正的快乐，幸福和短暂的快乐是完全不同的，不是说短暂的快乐就不好，只是它往往会妨碍我们得到更真实更持久的东西。

任何值得做的事情带来的满足都大于分心所得到的。不要放弃抵抗。 克服困难，那些停下来的人将永远不会品尝到幸福。

Geologist James Talmage说：
> 『幸福不会留下不好的回忆，也不会带来压抑的后续，它也不会带来后悔，更不会带来悔恨。
> 真正的幸福一遍一遍活在回忆中，永远会带来更新的原始美好；短暂的愉悦却会留下一根刺，成为成为痛苦的根源的刺。』

【译】ES modules: A cartoon deep-dive

推荐电影：《罪人》

有的电影炫画面，有的电影炫结构，甚至可以炫一些更直接的元素，恐怖，色情……但是抛开电影诸多表现形式，我想故事性，或者说如何讲好一个故事，还是判断一个好电影的最主要标准。

《变形金刚》机械越来越高级，故事很扯淡，评分一路走低。

昆丁的电影结构故事俱佳，再配以独特的导演气质，好片不少，《邪不压正》很是炫技，即便是同样的姜味，故事上稍微弱了点，评分差《让子弹飞》不少。

王家卫的电影，看似没故事，恰恰光影与演员的表演便是做好，最让人迷离的故事。

即便是《影》，水墨，八卦，三国，武打……诸多很炫的元素去烹饪那个，很俗套，也不见得高明的权谋故事，评分自然配不上国师。

《罪人》一个场景，一个演员，一个好的故事。

说实话类似的电影不少，《活埋》，《狙击电话亭》，都是不错的电影，都是通过固定单一的场景，去渲染画面外一个更大的，更惊悚，更big picture的场景。


[《罪人》](https://movie.douban.com/subject/27615398/)不一样，两条故事线，一条是画面外的，更精彩，更能留住人的故事。但是我想主线还是画面内的主角。


受害人在电影一个开始就已经被害，只是因为主角，过度的热情，或者正义感，才有了后面所有看似的惊险。

就是经典的路子，主角，通过电影叙述的故事，有了成长的，不着痕迹，却又让人信服，你更可以做出如下推断，如果主角在电影之前便已成长，电影所讲的故事便都不会发生，甚至还会有更好的发展。

还是要有一个好的故事，不是只是有个故事。





新加坡小游

周末机票便宜，就随性和同事来了趟新加坡三日游。很小的城市，很漂亮，也很安静。

对中文很友好，随处可见的中国元素，吃的也大多很中国菜，各色的人种，包容，礼貌，有秩序。

然后再加上一点点清教徒的感觉。这就是新加坡给我最多的感受了……


![IMG_0398.jpg](https://image.hicc.pro/pro/20210703173743Fv1VZvmLMfr1eUkpnsZuKkxu05YoIdl7TLkydup1c8WF9qrx_.jpg)
![IMG_0483.jpg](https://image.hicc.pro/pro/20210703173746FiR7WlWIiX9p3UnnzWW81L6_Iw9xc8GDJQMQ0ioX0tbk8ECkz.jpg)
![IMG_9126.JPG](https://image.hicc.pro/pro/20210703173800Fnmr3zzmKZA7SuOgzTBgEzt7LfyztvsnD7LXqIfB7W7wxkjQ5.jpg)
![IMG_1953.JPG](https://image.hicc.pro/pro/20210703173810FtiP_IjEt0IVummQulKRIP2P0R70Xt4dSBGuiHsC2adQGSCvh.jpg)

街道很干净，车子不多～～







升级博客系统到2.X版本

无意中发现[Ghost](https://blog.ghost.org/2-0/)已经到2.x的版本，核心的大改动就是编辑器不再只支持Markdown，而是采用所见即所得[MobileDoc](https://github.com/bustle/mobiledoc-kit)格式的卡片式的编辑模式。如果你用过[Notion](https://www.notion.so)，你会知道是什么感觉。

但是眼下体验完全不能和Notion相比。（特别是中文模式，不用Marketdown卡片，完全不能输入中文)

想当初Ghost趁着Markdown的热潮，以及简对标Wordpress，眼下似乎也在越来越向着“复杂”靠拢，想来这就是一个产品的演变。


![IMG_0031-EFFECTS.jpg](https://image.hicc.pro/pro/20210703174420Fv1QF15prPA5RLYI4QVwkUuO0Z-oRZGpBLwez53g991HhOt4S.jpg)
![IMG_4139.JPG](https://image.hicc.pro/pro/20210703174426FpMWLxTMdgs6XpskbYEeVFXj1Mbrm9V1CL7JGjCTVyQxSGITs.jpg)


Flutter中的状态管理

[Flutter](https://flutter.io)作为出自Google的一个跨平台(iOS，Android)应用开发方案。布局方式上和React或者说React Native非常相似——组件(Widget)化。写起来非常的高效，却有着React Native所不具有的优势： 一套代码到处运行，原生渲染，原生调用，不需要像RN需要桥接。

前端应用除去布局部分，就属**状态管理**最复杂难搞了。官方文档中只是提及了最基础的部分，因此本文中着重讨论这部分。

下面基本上转述自Google I/O '18上视频[Build reactive mobile apps with Flutter](https://www.youtube.com/watch?v=RS36gBEp8OI)，内容较水，推荐大家看视频就够了😄

---

### setSate

是的你没看错，就是和React中一模一样的setStae。Flutter将组件分为StatefulWidget，StatelessWidget，自然有状态的组件使用继承Flutter将组件为StatefulWidget。`flutter create app`开箱中代码就是实例了setSate
```dart
class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Text(
              'You have pushed the button this many times:',
            ),
            new Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: new FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: new Icon(Icons.add),
      ), 
    );
  }
}
```
写法也比较简单，适用于组件层比较浅的情况，但是如果需要跨组件共享`state`的时候，你只能放在它们共有的祖先组件上，然后逐层传递，这样有势必会造成多余的组件更新。

![Build-reactive-mobile-apps-with-Flutter--Google-I-2FO--18--0001](https://image.hicc.pro/hicc_me154157715_Build-reactive-mobile-apps-with-Flutter--Google-I-2FO--18--0001.jpg)

### InheritedWidget, context

逐层传递state太过于笨重，Flutter官方提供了[InheritedWidget Class](https://docs.flutter.io/flutter/widgets/InheritedWidget-class.html)来去优化这个问题，基本上就是将需要共享的State放在一个继承InheritedWidget的类中，然后在使用的组件widget中直接取用就是。

明眼人一看便知，这就是React中Context。

正如React中有基于context的社区库Redux，正式使用时候`InheritedWidget`相对比较基础，你需要写一大堆模版类的代码来满足需求，因此推荐使用flutter社区的库[scoped_model](https://pub.dartlang.org/packages/scoped_model)来方便开发。下面是库官方的例子：

```dart
class CounterModel extends Model {
  int _counter = 0;

  int get counter => _counter;

  void increment() {
    _counter++;
    
    notifyListeners();
  }
}

class CounterApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new ScopedModel<CounterModel>(
      model: new CounterModel(),
      child: new Column(children: [
        new ScopedModelDescendant<CounterModel>(
                builder: (context, child, model) => new Text(
                    model.counter.toString()),
              ),
        new Text("Another widget that doesn't depend on the CounterModel")
      ])
    );
  }
}
```

就是两个类`Model`和`ScopedModelDescendant`，前者用来存储数据，后者用来包裹组件以此来提供`state`。

值得注意的所有被包裹过的组件在状态变化的时候都会重新渲染，这样可能会造成不必要性能损失。`ScopedModelDescendant`也提供了阻止重新渲染的参数`rebuildOnChange: false`。**。

*稍微了解过React的可以想得到，这个就类似于`shouldComponentUpdate`，不太建议使用，很容易滥用误用造成难以发现的bug。*

### StreamBuilder, ReactiveX

正如上文所说，状态管理很难，特别是异步环境下的状态管理更难，难在哪里？不外乎就是能够做到：

- 方便拿到`State`
- 能够将更新高效的通知给依赖组件
- 能够精准的做到最小更新

想要更好解决这些问题，就需要引入Reactive响应的概念了。引用前端届的RxJS来说：

> Observable = lodash for async

Flutter的官方语言Dart中内置了`Stream`的概念

> Stream ~= Observable

因此不言而喻，就是将需要需要管理的`State`转化为`Stream`，然后使用Flutter官方的`StreamBuilder`来订阅所需要数据源，方便快捷，高效。

```dart
class MyTimer {
  static Stream<String> timerInterval$ = new Stream.periodic(Duration(seconds: 1)).map((int) => new DateTime.now().toString());
}

class _RealTimeText extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return StreamBuilder(
      stream: MyTimer.timerInterval$,
      builder: (context, snapshot) => Text(snapshot.data),
    );
  }
}
```

Rx相对Stream来说，提供了更多方法，社区中资料也多，dart社区也有[RxDart](https://pub.dartlang.org/packages/rxdart), 正式使用还是少不了。

### 总结

上面的三种算是主流，官方推荐的Flutter 状态管理的方法了，Rx很强大，但是概念相对复杂，也相对难以掌控，Scope model的方式虽说有缺陷倒也上手容易，已经能很好的解决问题，初学者不妨从它来开始……




矢星当值，大利南方

![7EzWYP0URKy-LEnIKQnP3w_thumb_47d2](https://image.hicc.pro/hicc_me2049935250_7EzWYP0URKy-LEnIKQnP3w_thumb_47d2.jpg)

![IMG_2023](https://image.hicc.pro/hicc_me150142931_IMG_2023.JPG)

![r8sGai1DSa2oB3b8BCSgyg_thumb_485e](https://image.hicc.pro/hicc_me-1694451617_r8sGai1DSa2oB3b8BCSgyg_thumb_485e.jpg)

![UNADJUSTEDNONRAW_thumb_48c1](https://image.hicc.pro/hicc_me-745466811_UNADJUSTEDNONRAW_thumb_48c1.jpg)

《妖猫传》《三块广告牌》和产品

毫无疑问，我是不喜欢《妖猫传》的，塑料感的大唐盛世，配合形如秦昊所演人物般猥琐的剧情。这就是我对《妖猫传》的所有感受。

无心插柳，之后看了《三块广告牌》这个电影，摄影不美，主演不美，至于绝对精彩的女主，更加……放张图片你们感受下


![p2510027371](https://image.hicc.pro/hicc_me1282015665_p2510027371.jpg)

甚至所讲的故事，也不美，不是你们赞美的“玉环之后，再无盛唐”，更不是什么人猫绝世爱恋故事……

但是我超爱这个故事，更改爱这样讲故事，就爱这种长在生活中温突突黑色幽默。

- - - -

一直很喜欢做一些“东西”，也就是俗称的产品吧，但是回顾2017年，无论个人还是工作中，的的确确失败的一年，什么值得称道的东西都没有造出来……

想想，也喜欢这种慢慢长出来的产品，内聚，让你会心一笑，不去创造什么盛大词汇点缀的东西，反而似乎有了点方向，压力少了，动力倒是多了。

善！

- - - -
再分割，相比我还是更喜欢《卧虎藏龙》《聂隐娘》中的古代……



2017，家，流水的一年

2017年流水似的过去了……

所幸赶在2018年元旦前搬进了新家，精装的房子，打包的装修，之前设想的种种基本都没有实施，还是懒的原因……

博客也终于升级到了1.x的版本。

```
$ docker pull ghost
$ docker run -d --name name -p 3001:2368 -v /path/to/ghost/blog:/var/lib/ghost/content -e url=http://your.blog -e NODE_ENV=production ghost:1-alpine
//更改下nginx的监听端口，restart就OK😄
//将之前hicc.me博客中外链http图片全部迁移到https后，博客也升级到了https
//顺便letsencrypt的https升级更方便了，几乎一键，大赞👍，https://certbot.eff.org/#ubuntutrusty-nginx，
```

嗯，支付宝说，我2018年的关键词是——**远方**。


乔布斯的一段演讲



<audio controls="" src="https://image.hicc.pro/steven-There’s%20lots%20of%20ways%20to%20be%20as%20a%20person.mp3"></audio>

> There’s lots of ways to be as a person, and some people express their deep appreciation in different ways. But one of the ways that I believe people express their appreciation to the rest of humanity is to make something wonderful and put it out there. You never meet the people, you never shake their hands, you never hear their stories or tell yours. But somehow in the act of making something with a great deal of care and love, something’s transmitted there. And it’s a way of expressing to the rest of our species our deep appreciation. So we need to be true to who we are and remember what’s really important to us. That’s what’s gonna keep Apple, Apple, is if we keep us, us.




热爱你所热爱的



AirPods终于到手了，密集用了一天，AirPods确实给了我等待6周的惊喜，简单，可信赖，这就是蓝牙耳机该有的样子呀。

产品不就应该是这个样子吗？诸多的纠结不就是为了这个直白的目的吗？

越简单越不易，没日没夜的忙碌，似乎忘却了自我。

喘息，有节奏的喘息才能有力量。

热爱我的热爱。

-----
2017.8.25

买之前诸多评测说是没有按键来调节音量，不免心有疑虑，用到现在才发现，为什么要有音量调节呢？有了这个才是泯然众人矣。

用到现在更加喜欢AirPods了。

[译]简编漫画介绍WebAssembly

最是深情

一早上，妈妈电话我，说外公病重让我给她买回家的票。过了一会奶奶又给我电话，开口就是你别怕，你外公走了，没敢给你妈妈说……

窒息般地伤心。外公走了，过年还是好好的呀，奶奶说，我外公想外婆，想不开，去了。

外婆前年冬天过世的，因为肺部有病，有天劳累过度，吐了血就走了，外公不住的念叨，“还能醒过来不，还能醒过来不”，外公是村里之前少有的读书人，吃饭挑，只有外婆能照顾的妥当，外婆一走，外公身体就开始不好，也不怎么好好吃饭，一直说想我的外婆，想效仿我的大爷爷。

说到这里又是另一个故事，我08年高中毕业，大奶奶过世，大爷爷开始不吃饭，只喝点牛奶，之后一个月我大爷爷跟着我大奶奶走了。

我外公老说也要学我大爷爷，绝食……，许是那样太过辛苦，一直到了今天，想不到是用这样的一种决然的方式。

问朋友车票的事，说起外公，说他和我外公是忘年交，相互聊很多。小时候也对外公无话不谈，有次我抱怨了爸妈的事，爸妈却从外公那里听到了，之后和外公就不那样聊天了。我们两家隔得近，我一天可以去好几次，外公外婆对我极好，仍和他们很亲。之后外面工作，偶尔电话回去，更多的只是问候。

现在好想多和外公聊几次天。

现在就剩下爷爷奶奶了。

![](https://image.hicc.pro/hicc_me-1093279145_IMG_2850.JPG)





升级博客到Ghost 0.11.3，支持AMP

Ghost在0.11版本中支持了Google Accelerated Mobile Pages 也就是AMP，能够1s内加载网页，算是个不错的特性。

周末有时间，也就顺便做了，升级，过程挺顺利，倒是想起了很早以前各种折腾的时光。😄

---
下面是AMP的一个样式，如果是刚刚升级，得等段时间，Google搜索才会有AMP的效果。
![](https://image.hicc.pro/hicc_me459560066_IMG_3620.PNG)

![](https://image.hicc.pro/hicc_me439242604_IMG_3619.PNG)


有天窗的屋子

![有天窗的屋子](https://image.hicc.pro/image/e/19/280bb5529d2b4eebc18d806089b10.jpg)

Tweet上看到的一张照片，好生喜欢，做自己喜欢的事，和心爱的人一起面朝大海，春暖花开。

AngularJS 1 教程

## 为什么需要前端框架

随着浏览器性能提升，更多Web Page演变为Web App，特别是在中大型的项目中，就需要一个 **前端框架** 来:

- 解耦应用的逻辑，数据模型，和界面视图
* 更加方便的多人协作
* 基本组件的抽离复用
* 相对低成本的性能保证
* 方便测试
* ……

## 为什么2016年的今天仍然可以学习Angular 1

眼下潮流的框架太过于现代，入门门槛过高，学习React，Vue 2，Angular 2，需要首先学习npm、webpack、jsx、ES6、甚至Typescript。而且变化非常快，一些需要写前端的后端人员可能力不从心😂

而学习AngularJS 1 只需要基础的前端知识即可，Angular 1 属于经典的MVC类框架，API已经非常稳定，社区成熟，对低版本浏览器支持好(1.2以前版本支持IE6)，性能依然满足大部分场景。


## 和jQuery 的不同
jQuery是库，面向DOM，Angular 面向模型，思路要转变。

---
<a class="jsbin-embed" href="http://jsbin.com/wiqoma/embed?html,js,output">JS Bin on jsbin.com</a><script async  src="http://static.jsbin.com/js/embed.min.js?3.40.0"></script>

同样的一个简单需求，可以明显看得出jQuery中业务代码，直接操作DOM代码揉杂在一块，而Angular中JS代码关心业务逻辑，HTML描述界面非常的清晰。

一般而言，使用jQuery的弊病在于，

- 用作中大型应用jQuery相对简陋，容易执着于DOM操作这种原子类问题。
* 代码不好模块化，变量，方法处在全局作用域下面容易相互污染。
* 代码不容易随着业务更改，扩展。
* 还有相对反直觉的一点是，  **如果页面交互复杂，而开发人员对DOM操作不精通，jQuery遍地`$()`的使用方式很容易造成性能问题** 。
* 遍地所谓的jQuery插件严重使得代码膨胀，性能低下！！！


当然框架本身的学习成本，是对项目后期的投资，不过项目本身不复杂，完全没必要使用前端框架，用了反而适得其反。

## 学习AngularJS 1
AngualrJs则通过数据双向绑定屏蔽了DOM操作，MVC解耦代码，依赖注入，自定义指令来复用代码，然后配合强大的路由，本地化，安全特性等，成功地成为了前ES6时代最流行的前端框架。

### 作用域、数据双向绑定、模块

作用域(scope)是AngualrJs中的基础概念，一般而言，一个controller一个scope ， 每个controller中内置一个数据模型对象`$scope`。而 **`$scope`对象是定义应用业务逻辑、控制器方法和视图属性的地方** 。

上面的Demo中，业务变量`number`是`$scope`的一个属性，然后通过数据绑定的方式链接到view。

```html
<div>{{number}}</div>
<input type="number" ng-model="number">
```
 
`{{ }}`语法绑定到view中，这个符号还可以修改。

```js
angular.module('app',[],function($interpolateProvider) {
    $interpolateProvider.startSymbol('(%');
    $interpolateProvider.endSymbol('%)');
})
```

而 `ng-model`就是 AngularJS 1中的一大特色： **数据双向绑定** ，model中数据变化了view中就会自动改变，而相应的view中(表单)变化了，也会自动同步到model。

Angular 1.3 之后支持了 `controller as`的语法，上面Demo就可以这样写了

```js
<div ng-app="app" ng-controller="MainCtl as vm">
  <div>
    {{vm.number}}
  </div>
  <input type="number" ng-model="vm.number" require>
  <button ng-click="vm.addOne()">
    +1
  </button>
</div>
```

```js
angular.module('app', [])
    .controller('MainCtl', function() {
      this.number = 0;
      this.addOne = function() {
        this.number += 1;
      }
    })
```


这样controller中不在显示的依赖`$scope`，完全就是普通的函数，干净，好测试，并且也有利于避规一些scope的原型继承导致的双向同步的bug，推荐这样书写。

需要注意的是controller中只操作数据即可，不要试图操作DOM，这点jQuery的同学一定要忍住😄，如果需要操作DOM，请使用指令，后续会讲到。

简单说一下模块

```js
//声明模块
angular.module(‘app’, []);
```

相对独立的功能块可以声明为一个模块，然后通过依赖注入相互引用，这样达到方便的复用，控制，一般第三方插件都是通过模块方式引入到你的应用代码，而自身的业务代码也可以根据实际情况切分不同的模块。

到这一步已经可以开始写一定的Angualr应用了，按照一定功能粒度划分模块，然后纯粹js业务代码，之后数据绑定到view。

实际上之后Angular 1的种种概念都是围绕上述的展开和补充。


### Angualr 1实现双向绑定的脏检查

AngualrJS 1中数据模型对象 `$scope`，就是普通的javascript对象(POJO)，你在上面任意的添加属性和方法，Angular都支持并且能够实时双向绑定的“黑魔法”就是脏检查。

**脏检查字面理解就是循环对比前后值，如果不相同说明就是“脏”的然后执行相应的操作，直到所有值相同，或者超出循环次数范围**

如果说scope是入门的核心，那么Angualr脏检查就是入门到精通的核心。

#### 从使用角度来说脏检查

---

<a class="jsbin-embed" href="http://jsbin.com/jevizaq/embed?html,js,output">JS Bin on jsbin.com</a><script async src="http://static.jsbin.com/js/embed.min.js?3.40.0"></script>

上面Demo timeout的例子中，通过原生setTimeout方法修改的变量，并没有更新到视图上，而1000毫秒setTimeout的能够更新。说明：

- 脏检查需要一个契机触发，这也是AngualrJs 1中提供大量自己包装过的js原生就有的方法，典型的如 `$timeout` ， `$http`都是为了能够出发脏检查的 `$digest`，所以尽量使用AngularJS提供的方法。
* 一次脏检查会便利App中所有的需要被观察的对象，有一个全局的`$$watchers`。1000毫秒setTimeout的能够更新是因为，这个时间点，恰好由`$timeout`方法触发了一次检查。因此这也就导致了从另一个角度分析脏检查。

#### 从性能角度来说脏检查

上面例子说明了AngularJS脏检查的特性，手动触发，全局检查。

每次循环都要全部遍历一边`$$watchers`的值，而且如果被检测的值相互有依赖，还要循环多次。因此AngularJS脏检查很容易导致性能问题。因此

- 限制不必要的监控数量，建议不超过2000个
* 避免避免深度比较、复杂的逻辑。
* 只绑定一次，Angular 1.3之后 `{{::number}}`语法有助于减少监控数量，因为 `::` 开头的表达式都被认为是一次性表达式。一次性表达式一经赋值就会移除监控。
* 必要时候使用指令 `directive`


### 指令 `directive`，以及用指令写组件

指令是Angular中相对低层，却又非常强大的功能。如果一般使用并不需要了解，使用内置的指令已经可以完成绝大多数功能。

AngularJs中本身以及内置了大量的指令，例如， `ng-if` ， `ng-repeat` ， 甚至`ng-controller`。

也可以通过下面方式来自定义指令。

```js
angular.module('myApp', [])
.directive('myDirective', function() {
    return {
        restrict: String,
        priority: Number,
        terminal: Boolean,
        template: String or Template Function:
        function(tElement, tAttrs) (...},
        templateUrl: String,
        replace: Boolean or String,
        scope: Boolean or Object,
        transclude: Boolean,
        controller: String or function(scope, element, attrs, transclude, otherInjectables) { ... },
        controllerAs: String,
        require: String,
        link: function(scope, iElement, iAttrs) { ... },
        compile: // 返回一个对象或连接函数，如下所示：
            function(tElement, tAttrs, transclude) {
                return {
                    pre: function(scope, iElement, iAttrs, controller) { ... },
                    post: function(scope, iElement, iAttrs, controller) { ... }
                }
                // 或者
                return function postLink(...) { ... }
            }
    };
});
```

自定义指令相对复杂难懂，算是AngularJS中高阶能够，可以从下面三点简单理解的是：

- scope字段，设定指令的作用域。
* link 函数，如果需要接触DOM，代码在此函数中。
* controller 函数，一般用作指令间的调用。

<a class="jsbin-embed" href="http://jsbin.com/bekubo/embed?html,js,output">JS Bin on jsbin.com</a><script async  src="http://static.jsbin.com/js/embed.min.js?3.40.0"></script>


来自官网 [AngularJS](https://docs.angularjs.org/guide/directive)的Tab例子可以很好的说明controller的使用。

---

<a class="jsbin-embed" href="http://jsbin.com/momozo/3/embed?html,js,output">JS Bin on jsbin.com</a><script async src="http://static.jsbin.com/js/embed.min.js?3.40.0"></script>

上述Nestlist Demo中使用指令的渲染速度明显快过使用Angular模版方式。

原因在于DOM写入是种相当耗时操作，大批量数据最好拼好HTML字符串一次性 `innerHTML`到页面中，这样的速度远快于逐步展开插入(Angualr 模版渲染方式)的速度 ，这也是AngualrJs中指令在现在看来也是很强大有用的功能。

- 有机会直接操作DOM，这样也就
	- 有机会书写高效的渲染代码
	* 可以在此使用一些第三方的非AngularJS系js插件。
* 能够隔离scope，甚至能够灵活的方式和其他scope交互，既可以使用`=`强大的双向绑定，而且AngularJs 1.5 scope中 `<`带了目前流行类似单向绑定的功能。
* 扩展来说，在 **今天主流组件化的潮流之下，Angular 1完全可以依赖directive来按照component-based的方式书写框架，**甚至这点已经是目前Angualr 1社区中潮流用法:[Component-Based AngularJS Directives](https://www.airpair.com/angularjs/posts/component-based-angularjs-directives)， [Refactoring Angular Apps to Component Style](https://teropa.info/blog/2015/10/18/refactoring-angular-apps-to-components.html) 

再次多说一点的是，指令中能够精准定义scope交互的功能，从脏检查的角度来说也能在很大程度上减少`$$watchers`的数量，以此来增强性能。

### Promise

Promise的相关可以通过这篇文章来看，[译用漫画来解说AngularJs中的Promises](/promises-angularjs-explained-as-cartoon/) 。


---

AngularJS 1其实还有蛮多概念，不过毕竟是有点过时的框架，上述所写便是Angular 1值得关注留意的知识点了，应该能够足够了解Angular 1。

使用letsencrypt升级网站到https


因为[Hipo在线版](https://hipo.cash/admin)的~~计划(不日放出)~~，所以将hipo.cash升级到https，证书是免费开放的 [letsencrypt](https://letsencrypt.org)，配合官方的工具[certbot](https://certbot.eff.org/#ubuntutrusty-nginx)。

----  2018.1.10  ----

新版本的cerbot更加的方便，下面的命令还是来自于cerbot网站

```
// 如果是ubuntu nginx的方案
$ sudo apt-get update
$ sudo apt-get install software-properties-common
$ sudo add-apt-repository ppa:certbot/certbot
$ sudo apt-get update
$ sudo apt-get install python-certbot-nginx 

// 然后直接
$ sudo certbot --nginx
// 它会枚举出你 server的网站，你选择需要升级https的域名后，它甚至直接帮你配制nginx，重启，真正的一键。
```

当然如果你之前就配了https的话，如果用完cerbot，还是不能访问，可以参考下面：
```
listen 443 ssl; # managed by Certbot
ssl_certificate /etc/letsencrypt/live/hicc.me/fullchain.pem; # managed by Certbot
ssl_certificate_key /etc/letsencrypt/live/hicc.me/privkey.pem; # managed by Certbot
include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

# Redirect non-https traffic to https
if ($scheme != "https") {
    return 301 https://$host$request_uri;
} # managed by Certbot
```

----



letsencrypt通过访问你服务器上生成的一个随机文件来验证你的域名，所以再使用cerbot脚本之前，首先需要确保要能够通过你的域名直接访问到`.well-known`目录，如果你讲随机文件放倒`/var/www/server/challenges`可以这样配置nginx。

```
server {
    server_name www.yoursite.com yoursite.com;

    location ^~ /.well-known/ {
        alias /var/www/server/challenges;
        try_files $uri =404;
    }
}
```

下面的教程基本来自[cerbot官网](https://certbot.eff.org/#ubuntutrusty-nginx)(使用ubuntu 14 + nginx)，

下载cerbot

```
wget https://dl.eff.org/certbot-auto
chmod a+x certbot-auto

./certbot-auto
```

然后运行
```
./path/to/certbot-auto certonly
```
然后就是输入联系邮箱，选择标准插件还是"webroot"(官网原话:which can work with the webroot directory of any webserver software，hipo选用的是这个)插件，之后输入需要升级的域名(hipo.cash www.hipo.cash)，之后就是输入验证域名随机文件生成的目录(也就是上述所说的`/var/www/server/challenges`)。

Done！！ 一般情况就会提示执行成功。


之后配置nginx监听443，重定向http到https
```
server {
    listen 80 ;
    listen [::]:80;
    server_name hipo.cash www.hipo.cash;
    return  301 https://hipo.cash$request_uri;
}

server {
    listen 443 ssl ;
    listen [::]:443 ssl;

    server_name hipo.cash www.hipo.cash; # Replace with your domain
    ssl on;
    ssl_certificate /etc/letsencrypt/live/hipo.cash/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/hipo.cash/privkey.pem;
    ssl_trusted_certificate /etc/letsencrypt/live/hipo.cash/chain.pem;
    location / {
        proxy_pass http://127.0.0.1:18080;
    }
}
```

重启nginx，正常情况下网站便成功升级到了https😄


letsencrypt的脚本需要90后renew下，certbot也支持自动更新。

```
./path/to/certbot-auto renew --quiet --no-self-upgrade
```

可以通过下面验证下

```
./path/to/certbot-auto renew --dry-run
```

更新之后需要重启下nginx

```
service nginx restart
```


![https://hipo.cash/ 手机版](https://image.hicc.pro/image/1/f3/c3af92470cb11b07267da2bcf1948.JPG)

----
因为hicc.me中图片自用用的是七牛http链接，替换稍有点麻烦，hicc.me只能稍后升级到https了～～



解决CloudKit在Electron中无法登录的问题

![cloudkit-auth-window](https://image.hicc.pro/image/e/13/27c4bebd1a705f93843be6368e762.png)


最近CloudKit Web端授权页面更新后中使用了CMD模块化的东西，因此会检查`require`是否存在，本意是存在的话就会按照CMD的方式加载js模块，但是Electron中默认通过`require`来加载electron模块或者`npm`模块，这样问题就来了，**Electron中的Cloudkit授权页面就会报错！**

解决方案也简单，如果你的页面中不需要使用electron提供的node能力，自然**解决方案就是启动主窗口时候禁用node能力即可，这样通过window.open()之后的窗口也会禁用。**

```
//在mian.js中
const BrowserWindow = electron.BrowserWindow
mainWindow = new BrowserWindow({
    width: 1200, 
    height: 800,
    webPreferences: {
      nodeIntegration: true//这里配置禁用node使用
    }
  })
```

当然一般情况下还是需要使用electron所提供的node能力，这样就不能在`main.js`中禁用全部窗口的node能力，因此就需要单独设置。

至于**CloudKit js授权的案例中，单独关闭CloudKit Web端授权页面中node能力即可**。

```
//修改https://cdn.apple-cloudkit.com/ck/2/cloudkit.js中window.open方法第三个参数增加nodeIntegration=0

window.open(a, "", "nodeIntegration=0,width=" + b + ", height=" + c)

```

升级Ghost到0.9.0

![三峡瀑布](https://image.hicc.pro/hicc_me-1582630246_IMG_3418.JPG)

之前blog所使用的是0.5.7的Ghost，最近又时间就顺手升级了下。

根据[官方文档](http://support.ghost.org/how-to-upgrade/)先升级到了0.7.1版本。

本来想先在本地测试的，结果估计是Mac node版本过高无法成功安装所需的node模块，一咬牙直接服务端升级，居然成功了，此刻就是ghost 0.7.1版本。


随后在0.7.1版本上升级到了最新版本(写此文时是0.9.0)。

值得注意的是替换完文件，`npm install --production`之后最好来一次`nam start --production`这个时候Ghost会做些版本升级。

![](https://image.hicc.pro/hicc_me-1209808234_ghost-upgrade.png)

## 七牛插件

还是使用了之前0.5.7版的[七牛插件](http://www.ghostchina.com)：

```
nam install qiniu --production
```

在`config.js`文件

```
config = {
    production: {
        storage: {  
           provider: 'qiniu',
           bucketname: 'xxx',
           ACCESS_KEY: 'xxx',
           SECRET_KEY: 'xxx',
           root: 'xxx',
           prefix: 'xxx'
        }
    }
}
```

替换`core/server/storage/index.js`文件为：

```
var errors  = require('../errors'),
    storage = {};

var config  = require('../config');

function getStorage(storageChoice) {
    // TODO: this is where the check for storage apps should go
    // Local file system is the default.  Fow now that is all we support.
    // storageChoice = 'local-file-store';
    storageChoice = (config.storage && config.storage.provider) || 'local-file-store';  

    if (storage[storageChoice]) {
        return storage[storageChoice];
    }

    try {
        // TODO: determine if storage has all the necessary methods.
        storage[storageChoice] = require('./' + storageChoice);
    } catch (e) {
        errors.logError(e);
    }

    // Instantiate and cache the storage module instance.
    storage[storageChoice] = new storage[storageChoice]();

    return storage[storageChoice];
}

module.exports.getStorage = getStorage;
```

在`core/server/storage/`目录下增加`qiniu.js`文件
```
// Qiniu CDN support
// Copyright: GhostChina.com

var _       = require('lodash'),
    express = require('express'),
    fs      = require('fs-extra'),
    path    = require('path'),
    util    = require('util'),
    utils   = require('../utils'),
    Promise = require('bluebird'),
    config = require('../config'),
    errors  = require('../errors'),
    baseStore   = require('./base'),
    crypto = require('crypto'),

    qiniu        = require('qiniu'),
    qiniuConfig  = config.storage,
    
    qiniuStore;

    qiniu.conf.ACCESS_KEY = qiniuConfig.ACCESS_KEY;
    qiniu.conf.SECRET_KEY = qiniuConfig.SECRET_KEY;
    qiniu.conf.USER_AGENT = 'Ghost ' + config.ghostVersion;

var putPolicy = new qiniu.rs.PutPolicy(qiniuConfig.bucketname);

function QiniuStore () {
}

util.inherits(QiniuStore, baseStore);

QiniuStore.prototype.save = function (image) {
    var uptoken = putPolicy.token();
    var md5sum = crypto.createHash('md5'),
        ext = path.extname(image.name),
        targetDirRoot = qiniuConfig.root,
        targetFilename,
        key,
        extra = new qiniu.io.PutExtra();

    var savedpath = path.join(config.paths.imagesPath, image.name);

    return Promise.promisify(fs.copy)(image.path, savedpath).then(function(){
        return Promise.promisify(fs.readFile)(savedpath);
    }).then(function(data){
        md5 = md5sum.update(data).digest('hex');

        targetFilename = path.join(targetDirRoot, md5.replace(/^(\w{1})(\w{2})(\w+)$/, '$1/$2/$3')) + ext;
        targetFilename = targetFilename.replace(/\\/g, '/');
        key = targetFilename.replace(/^\//, '');

        return Promise.promisify(qiniu.io.put)(uptoken, key, data, extra);
    }).then(function() {
        // Remove temp file
        return Promise.promisify(fs.unlink)(savedpath);
    }).then(function () {
        // prefix + targetFilename
        var fullUrl = qiniuConfig.prefix + targetFilename;
        return fullUrl;
    }).catch(function (e) {
        errors.logError(e);
        return Promise.reject(e);
    });
};

QiniuStore.prototype.exists = function (filename) {
    return new Promise(function (resolve) {
        fs.exists(filename, function (exists) {
            resolve(exists);
        });
    });
};

QiniuStore.prototype.serve = function (){
    // For some reason send divides the max age number by 1000
    return express['static'](config.paths.imagesPath, {maxAge: utils.ONE_YEAR_MS});
};

module.exports = QiniuStore;

```
## Disqus,统计代码安装

最后自然不要遗漏了，disqus，和统计代码的安装😄，可以参考我之前[从wordpress迁移的文章](/wordpress-to-ghost/)

![](https://image.hicc.pro/image/c/42/9feeada746a54ed33da9531fa67e5.jpg)

3张照片

![](https://image.hicc.pro/image/4/ac/353863382ebbd778dc963e57665c9.jpg)

![](https://image.hicc.pro/image/f/03/95a31e3474a0840878f864990e70e.JPG)

![](https://image.hicc.pro/image/5/5d/82cf932761858372a2d680964dd3c.JPG)

Hipo Log

blog

「译」If It Doesn’t Suck, It’s Not Worth Doing
1/23/2019, 5:04:20 PM

【译】ES modules: A cartoon deep-dive
1/15/2019, 5:32:20 PM

推荐电影：《罪人》
11/11/2018, 7:14:50 AM

新加坡小游
11/7/2018, 3:45:09 PM

升级博客系统到2.X版本
10/17/2018, 2:17:32 PM

Flutter中的状态管理
8/16/2018, 12:28:10 PM

矢星当值，大利南方
7/29/2018, 7:32:34 AM

《妖猫传》《三块广告牌》和产品
1/17/2018, 4:54:30 PM

2017，家，流水的一年
1/8/2018, 1:13:36 PM

乔布斯的一段演讲
9/15/2017, 2:09:56 AM

热爱你所热爱的
7/22/2017, 7:40:43 AM

[译]简编漫画介绍WebAssembly
5/28/2017, 7:59:42 PM

最是深情
5/8/2017, 4:43:13 AM

升级博客到Ghost 0.11.3，支持AMP
12/24/2016, 7:01:54 AM

有天窗的屋子
11/18/2016, 12:57:37 AM

AngularJS 1 教程
11/2/2016, 8:33:40 AM

使用letsencrypt升级网站到https
10/9/2016, 1:57:50 PM

解决CloudKit在Electron中无法登录的问题
8/27/2016, 1:40:14 PM

升级Ghost到0.9.0
8/22/2016, 3:02:30 AM

3张照片
8/22/2016, 1:13:52 AM

blog

「译」If It Doesn’t Suck, It’s Not Worth Doing1/23/2019, 5:04:20 PM

【译】ES modules: A cartoon deep-dive1/15/2019, 5:32:20 PM

推荐电影：《罪人》11/11/2018, 7:14:50 AM

新加坡小游11/7/2018, 3:45:09 PM

升级博客系统到2.X版本10/17/2018, 2:17:32 PM

Flutter中的状态管理8/16/2018, 12:28:10 PM

矢星当值，大利南方7/29/2018, 7:32:34 AM

《妖猫传》《三块广告牌》和产品1/17/2018, 4:54:30 PM

2017，家，流水的一年1/8/2018, 1:13:36 PM

乔布斯的一段演讲9/15/2017, 2:09:56 AM

热爱你所热爱的7/22/2017, 7:40:43 AM

[译]简编漫画介绍WebAssembly5/28/2017, 7:59:42 PM

最是深情5/8/2017, 4:43:13 AM

升级博客到Ghost 0.11.3，支持AMP12/24/2016, 7:01:54 AM

有天窗的屋子11/18/2016, 12:57:37 AM

AngularJS 1 教程11/2/2016, 8:33:40 AM

使用letsencrypt升级网站到https10/9/2016, 1:57:50 PM

解决CloudKit在Electron中无法登录的问题8/27/2016, 1:40:14 PM

升级Ghost到0.9.08/22/2016, 3:02:30 AM

3张照片8/22/2016, 1:13:52 AM

「译」If It Doesn’t Suck, It’s Not Worth Doing
1/23/2019, 5:04:20 PM

【译】ES modules: A cartoon deep-dive
1/15/2019, 5:32:20 PM

推荐电影：《罪人》
11/11/2018, 7:14:50 AM

新加坡小游
11/7/2018, 3:45:09 PM

升级博客系统到2.X版本
10/17/2018, 2:17:32 PM

Flutter中的状态管理
8/16/2018, 12:28:10 PM

矢星当值，大利南方
7/29/2018, 7:32:34 AM

《妖猫传》《三块广告牌》和产品
1/17/2018, 4:54:30 PM

2017，家，流水的一年
1/8/2018, 1:13:36 PM

乔布斯的一段演讲
9/15/2017, 2:09:56 AM

热爱你所热爱的
7/22/2017, 7:40:43 AM

[译]简编漫画介绍WebAssembly
5/28/2017, 7:59:42 PM

最是深情
5/8/2017, 4:43:13 AM

升级博客到Ghost 0.11.3，支持AMP
12/24/2016, 7:01:54 AM

有天窗的屋子
11/18/2016, 12:57:37 AM

AngularJS 1 教程
11/2/2016, 8:33:40 AM

使用letsencrypt升级网站到https
10/9/2016, 1:57:50 PM

解决CloudKit在Electron中无法登录的问题
8/27/2016, 1:40:14 PM

升级Ghost到0.9.0
8/22/2016, 3:02:30 AM

3张照片
8/22/2016, 1:13:52 AM