“King of The Road” 是极品飞车14代热力追踪重制版车手生涯倒数第二条赛道, 也是最后一条竞速赛带, 玩家可以选择柯尼塞格CCRX对阵布加提威龙. 整条赛道设定在NFS14虚构的海峰郡北部的山道上, 从一开始的沿海隧道一路向群山之巅迈进. 这条赛道的难度主要体现在多处急弯(山上两段多重发卡弯)还有雨雪天气和随机出现的社会车辆上.

游戏里给每条赛道设置了奖牌的标准, 比如在4:50秒内完成, 就可以拿到金牌. 我刚开始心急火燎想打通整个游戏的时候, 这条赛道甚至金牌都没有没有拿到. 最后的成绩应该是5分钟多. 但不知道什么原因, 我后来总是被这条赛道魂牵梦绕, 所以今年又重新开始跑这条赛道. 一开始成绩并没有提升多少, 刷了几遍之后还是在4:55左右. 后来, 我想到自己一直没有使用手刹, 于是开始在180度的发卡弯使用手刹, 发现手刹的效果特别好. CCRX和威龙都是一千匹马力的钢铁猛兽, 在游戏中也能快速的加速到300公里每小时, 所以很容易在发卡弯速度过快, 在入弯的时候快速按空格拉动手刹正好可以让时速从280KM/H降低到250KM/H. 就不会出现漂移过度的情况了. 使用了手刹之后, 我能够在发卡弯的时候轻而易举的超越原本还在前面的AI车辆, 弯道超车的时候有种藤原拓海附体的感觉. 于是, 我开始在所有超过90度的弯道使用手刹. 成绩进入了4:50秒内, 获得了金牌.

虽然手刹对急弯的效果很好, 但是毕竟对速度的损耗很大, 于是我想到了能否不使用刹车过一些不是那么急的弯. 在不断练习的过程中, 我突然发现如果松开油门, 猛打方向盘可以让车子在损失一点点速度的前提下进入漂移状态, 并且还能在出弯后快速恢复到原来的速度. 我便将这种技术应用到赛道开头沿海公路的部分, 可以将这一段的速度一直提升到300KM/H附近, 从此, 从第一个急弯之后, 电脑的AI就再也没能超过我, 反而经常能够在小地图上看到他又车毁人亡, 然后用作弊的手段快速接近我.

通过以上介绍的一些技巧, 和对赛道不断的熟悉, 我把成绩不断缩短, 从4:50到4:44, 4:38, 4:35, 4:33. 每次万无一失开到发卡弯的时候都有种全身心投入, 毫无杂念, 进入flow状态的感觉.

我之所以介绍这条赛道, 是因为, 最近刚刚看了《成为技术领导者, 掌握全面解决问题的方法》一书, 作者是Gerald Weinberg. 这本书有一章谈到的是领导力的成长. 作者认为成长通常是通过两种途径, 一种是熟能生巧, 这种方法能带来提升, 但不是突破性的, 另外一种是采用新的策略. 但是在采用新策略的初期, 可能会因为生疏的原因进入一个低谷. 他把这个模型叫做高原-低谷模型, 每次突破都会让人进入到一个新的高原, 但是在再用新策略的初期, 可能会出现一些低谷.

我因为在King of The Road上的不断挑战而对这些观点有很强的共鸣. 当然, 游戏是一个简化的模型, 结果也可以被简单的量化. 现实中带领团队则复杂的多. 给我的启示是, 选择了一种新方法后, 需要时间来熟悉, 不要因为一时的低谷而退缩. 此外, 不要忘记去寻找更好的策略.

Visual Studio Code是微软发布的一个轻量级代码编辑器, 我最早是在HackerNews上看到发布新版本的帖子, 然后就下载下了尝尝鲜. 最近正好在写一个Vuejs的weekend project, 发现用VSCode写小型项目非常好用, 使用的过程中发现VSCode越来越多的优点.

界面

VSCode跨平台, 而且安装包很小, 40MB左右, 安装完成打开后, 第一眼看到的界面就让人觉得非常酷炫. 默认是纯黑的Dark Theme, 配有一些蓝色的配色. 整体界面很简洁, 左侧有五个大的按钮可以打开左侧的功能面板, 分别是资源管理器, 全局搜索, git版本控制, 调试器和插件. 系统自带的代码高亮配色也非常美观.

visual studio screenshot

编程

VSCode源自Visual Studio家族, 包含了微软非常强大的IntelliSense技术, 也就是各种代码补全和提示的功能. 原生支持JavaScript语言, 也可以通过插件来支持其他语音, 比如Python, Go等.

Git

VSCode对git的支持做的很好, 首先, 左侧的Git面板覆盖了大多数常用的git命令, 比如add, commit, pull, pull等等. 还可以用Ctrl + Shift + P呼出命令功能, 然后键入其他的git命令, 比如git checkout, git branch等等. 不过一些复杂的命令并不能支持, 比如从一个branch checkout 一些文件到另外一个branch, 还是需要在git bash下自己执行.

另外, VSCode提供的文件比较功能很清晰.

其他功能

VSCode还有一些比较便利的功能

  • Markdown 预览
  • 写HTML的时候可以使用Emmet(ZenCoding)的快速填充功能
  • 项目文件夹全局搜索, 支持正则表达式

性能

最让我满意的是, 整个VSCode性能很好, 启动速度快, 占用内存小, 各种命令执行速度很快, 全局搜索的速度也不错.

安利了这么多, 还不赶紧去Visual Studio Code官网下载一个?

最终幻想战略版Advance(GBA)职业技能参考表, 数据来自于天幻网FFTA专题.

Developed with Bootstrap and D3.js

我是Firefox和Pocket的忠实用户, 甚至都没有注意到Firefox最近的版本都开始默认集成了Pocket插件. Pocket插件主要提供了这些功能: 1. 将网页保存到Pocket服务器, 在不同设备间进行同步. 2. 提取网页的内容, 去除干扰, 渲染成更适合阅读的版式. Firefox集成Pocket之后, 对于一些已经优化过的站点, 用户可以直接点击地址栏旁边的阅读模式按钮, 以阅读模式查看网页. 这个功能非常方便, 比如, 维基百科桌面版的字体比较小, 行的宽度太宽, 整体阅读体验不是很好, 转换成阅读模式后, 网页就被Pocket转换的更加容易阅读了.

链接样式的问题

虽然阅读模式已经大幅度的提升了维基百科的阅读体验, 但是还有进一步提升的空间. 我个人认为最大的问题是: 超链接的显示效果. 普通的网页的正文当中超链接的数量不会太多, 基本上只有三四处引用到别人地方会加上超链接, 而维基百科的内容页面中会有非常多的交叉引用和参考文献, 这些引用从内容的角度, 只是为读者提供辅助的相关信息, 提升文章的可信度. 但是Firefox的阅读模式, 会对这些超链接渲染成带下划线和亮蓝色的格式, 我认为, 这样的超链接, 是画蛇添足, 分散了用户的注意力, 应该进行修改.

我的设计方案

通常来说, 蓝色带下划线是超链接的默认样式, 在《点石成金》这本用户体验的书中, 作者告诉我们保持用户习惯的样式是最好. 但是在阅读模式里, 我们更关注的是文章本身的内容, 而不是内部的链接, 所以需要削弱链接的存在感.

从设计的角度来说, Firefox阅读模式的超链接同时使用了下划线和文字颜色两个设计元素, 所以, 要弱化的话, 只要两者取其一进行弱化就可以了. 第一种方案是保留下划线, 文字颜色与正文保持相同, 目前比较热门的博客服务medium就是这样做的. feedly是google reader关闭之后我选用的rss阅读服务, 它也提供了提取正文, 重新排版的功能, 在feedly中, 超链接的下划线的灰度一开始比较淡, 当鼠标悬停上去后, 灰度会更深一些.

第二种设计的方案是, 去掉下划线, 修改文字的颜色, 我觉得这种方案更适合维基百科这种有大量超链接的页面, 毕竟大量的线条也会干扰读者的视线. 接下来是颜色的选择. 我记得在以前学习图像学的时候, 曾经学到过人眼对亮度的变化更加敏感, 而这里我想要达到的效果就是弱化正文和引用的对比, 所以, 只要把亮度控制在相同的范围, 两者的对比就会小很多. 这里使用了Adobe的色彩服务, 可以快速的调色. 最后可以学习feedly的设计, 在用户鼠标悬停的时候对超链接加上下划线, 进行补偿.

实现方法

设计思路有了之后, 我去寻找实现方法, 很快就google到了解决方法: 使用Stylish这个Firefox插件来覆盖网页的css样式. 具体来说, 就是这样的步骤:

  1. 安装Stylish插件
  2. 创建一个新的配置
  3. 代码如下

新的stylish配置:

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document url-prefix("about:reader?") {

    a,
    a:visited,
    a:hover,
    a:active {
      color: #738FA7 !important;
      text-decoration: none !important;
    }

}

我去掉了链接的下划线, 同时降低了链接的字体颜色的亮度和饱和度, 让链接不再那么出挑.

以下是对比图

修改Firefox阅读模式链接样式前: WorldHistory

修改Firefox阅读模式链接样式后: WorldHistory

总结

通过Stylish插件, 弱化了Firefox阅读模式的超链接显示效果, 提升了阅读维基百科时的体验.

希望对你有帮助

D3(Data Driven Documents)是一个流行的Javascript数据可视化库, 这里来简单的介绍一些D3的基本用法. 代码我都放在github repo 上了:https://github.com/pp2moonbird/d3Tutorial

D3环境搭建

首先我们用nodejs来搭建一个简单的web应用, 其实任何语言和框架都可以, 因为d3的基本操作只需要html, js和css就够了.

首先用express搭建一个脚手架, 并安装依赖的包

express d3Tutorial
npm install

然后在\public中创建一个pages文件夹, 创建一个脚手架页面, 就可以了, 可以参照skelton.html

启动nodejs, 然后访问http://localhost:3000/pages/skelton.html

npm start

D3的选择操作

d3的第一重要方法是它的选择操作, 选择操作可以通过DOM的语法来选择对应的页面元素, 然后进行一些操作

d3.select()

比如说在<script>中增加:

d3.select("body")
	.append("div")
	.text("hello d3");

d3.selectAll()

select方法选择的是第一个元素, 如果有一系列数据,然后要绑定到一系列页面元素上的话就需要使用selectAll()

d3.select("body")
	.selectAll("binding")
	.data(simpleArray)
	.enter()
	.append("div")
	.text(function(d) {return d;});

这段代码稍微复杂一些.

  • 首先, 它获取了body这个对象
  • 然后去选择binding对象, 但是这些对象还没有创建出来, 不过这没有关系, 后面会有解释
  • data()方法把这些还没有创建的对象和simpleArray关联(join)了起来
  • enter()方法会创建那些数据已经存在, 但展现层还没有存在的对象
  • 最后我们给这些对象创建了div, 并且添加了文本内容
  • 文本内容会遍历数组中的每一个元素, 然后返回其中的值

Data Join的概念

上面的那个例子其实就揭露了D3的最重要的一个概念, data join, 这个join并不是数据库sql操作中表和表的join, 而是数据(data)和展现层(visual)的join. 之所以借用join这个概念, 可能是因为d3的设计也是一种声明式编程方法(Declarative Programming), 而不是用for循环来指定创建多少个对象的指令式编程

参考这两个链接