距离上次更新恰好是一年，这一年中读到了很多不错的技术文章，但让我印象比较深刻的反而和前端开发没有那么贴近，所以这一期就叫Off the Wall好了。

不知道你是否和我一样每天可能都在和颜色打交道但是从来没有更进一步了解过计算机如何表示颜色，可能止步于了解RGB、HSL等名词。最近在同事的推荐下看了这篇讲述了stripe在设计a11y友好的颜色过程中探索的文章，同时也补了一下色彩空间相关的知识。
链接：[Designing accessible color systems](https://stripe.com/blog/accessible-color-systems)
当然文章并没有提到特别多的色彩空间（例如HSV），有兴趣的话可以查阅wiki，图文并茂写的比较翔实。

最近使用到了一些WebAudio的API，最开始完全分不清楚这些接口之间的关系（很遗憾也没有找到一个讲的比较清楚的）。后来从头阅读了MDN上的[Basic concepts behind Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API)。这篇文章很适合在开始学习WebAudio之前看一看，虽然它不是一开始就讲如何调用API让浏览器播放出声音的文章，但是我们可以从中了解到WebAudio的modular routing设计模式，API中的接口和熟悉的名词（例如声道）是如何对应的等。
很巧的是最近看见一篇[推文](https://twitter.com/Arthraim/status/1359064282760007681?s=20)说苹果音频的API很拟物。我在想其实WebAudio的modular routing模式会不会也是信号处理中很常见的做法，只是因为我完全没有相关知识才会在入门时搞得一头雾水呢？看来涉足一个新领域真的需要好好从头学习基础概念。

最后再推荐一下[How Figma’s multiplayer technology works](https://www.figma.com/blog/how-figmas-multiplayer-technology-works/)。
之前在学习OT和CRDT的时候找到的要么是形而上的数学概念要么是被人复制粘贴了好多次的口水话。这篇文章很清楚的说明了figma为什么不用OT而是CRDT，以及结合figma的「基于对象的设计」对自己设计的CRDT做的简化和优化。文中列举的几个冲突的案例也非常好懂，同时还列举了例如小数下标这种巧妙办法。
个人觉得一定程度上这篇文章可以作为开始了解协同相关技术的敲门砖，对应用场景和优化方法都有大致的阐述。
同时这篇文章写的也很易懂（对比之前我一直在看OT和CRDT的wiki，看得头大），有种一读就停不下来的感觉。没记错的话这篇文章作者应该是figma的CTO，这公司真的有两把刷子。

2.Off the Wall

## React Native
使用React Native进行开发有一小段时间了，非常开心能看到这个社区依然活跃，并且能感受得到在慢慢变好。截至今天为止，React Native 0.62版在几天前进入了RC阶段，下一个版本对Flipper的支持想必对开发体验有巨大提升。
[🔗link](https://github.com/facebook/react-native/releases/tag/v0.62.0-rc.2)

## React Navigation
React Native官网文档使用的导航库，在最近正式发布了5.0版本。新特性包括了对react hook的支持，对Typescript的支持以及新推出的高性能native stack。我也从beta版本开始一直在使用，新版带来的提升，不论是在流畅度上还是在开发体验上都很大。
[🔗link](https://reactnavigation.org/blog/2020/02/06/react-navigation-5.0.html#other-improvements)

## React Native Reanimated
React Navigation 使用到的高性能动画库，与RN官方的Animated的区别是计算运行在native线程上，有着更高的性能；以及提供了非常非常声明式的API。虽然性能不错，但绝不意味着对开发者友好，也许这就是代价吧（。
[🔗link](https://software-mansion.github.io/react-native-reanimated/)


##  React Native Gesture handler
React Navigation 使用到的手势库，与Reanimated一样在RN里是偏底层一点的库。提供了各个平台上原生手势的支持，和Reanimated的API相辅相成（这两个库都是一家叫software-mansion的公司开发的，这家公司也和RN届很出名的公司expo有着密切合作）。
[🔗link](https://software-mansion.github.io/react-native-gesture-handler/)


## React Native Redash
Redash为Reanimated和GestureHandler提供了很多工具API，在处理很多相同逻辑时可以少些不少代码。例如它直接提供了`onScroll` `bInterpolate`之类封装了常用逻辑的工具函数。这里放一个题外话，该库的作者[William Candillon](https://github.com/wcandillon)在他的个人YouTube账号上有一个[Can it be done in React Native?](https://www.youtube.com/channel/UC806fwFWpiLQV5y-qifzHnA)系列。这个系列讲解了一些动画相关的例子如何在RN中实现，是很好的动画入门案例。
[🔗link](https://wcandillon.github.io/react-native-redash)

最后一点感受是关于选择RN这件事。跨平台方案本身就是充满非议的，再加上前端社区部分人的不好习惯，对未知的事物没有了解的情况下选择了人云亦云，张口就来“9012年了怎么还有人在用React Native”。React Native目前肯定有着他自己非常多的毛病，包括Facebook内部究竟怎样看待这个项目外界也不得而知。但是这一段时间的开发体验下来我觉得它肯定没有某些人口中那么不堪，希望React Native能越变越好。

1.React Native

# JAMstack
如果你还没有听说过[JAMStack](https://jamstack.org/)，那么就赶紧来了解一下吧。

# How to GraphQL
给和我一样想要了解GraphQL的人。🔗[https://www.howtographql.com/](https://www.howtographql.com/)

# reactive.how
一个精致的网站，应该能让想放弃学习`rxjs`的人坚持下来。🔗[https://reactive.how](https://reactive.how)

无鸡之谈

2.Off the Wall

1.React Native

0.Front End