# 第 9 期 - 华山

> 封面图摄于华山山顶，超险的一座大山，好些坡度将近 80 度，爬了一天到达山顶景色很壮阔，西安除了吃外值得一去的地方

- Issue: 9
- 发布日期: 2021/01/19
- HTML: https://weekly.tw93.fun/posts/9
- JSON: https://weekly.tw93.fun/api/posts/9.json
- English translation: https://weekly.tw93.fun/en/posts/9.md

---

<img src="https://gw.alipayobjects.com/zos/k/bb/12121221mmm.jpg" width=900/>

<small>封面图摄于华山山顶，超险的一座大山，好些坡度将近 80 度，爬了一天到达山顶景色很壮阔，西安除了吃外值得一去的地方</small>

> **记录每周看到的前端潮流技术，筛选后用接地气方式发布于此，关注可以及时收到更新~**

## 好文和学习

**企业级数据可视化应用有哪些机遇与挑战？**  
<https://mp.weixin.qq.com/s/vvKPJZCZNs8VfM8A07x5SA>  
蚂蚁@御术在外滩大会关于企业级可视化的分享文字版，从为什么需要、当前挑战和问题和未来趋势来阐述，很适合前端同学一读

**CodeSandbox 是如何让 npm 上的模块直接在浏览器端运行的**  
<https://www.yuque.com/wangxiangzhong/aob8up/uf99c5>  
How we make npm packages work in the browser 的一篇翻译[文章](<](https://hackernoon.com/how-we-make-npm-packages-work-in-the-browser-announcing-the-new-packager-6ce16aa4cee6)>)，译者加入了自己的理解，利用这个思路其实对于一些线上开发的场景可以做不少事情

**What the fuck JavaScrip t 中文版?**  
<https://github.com/denysdovhan/wtfjs/blob/master/README-zh-cn.md>  
哈哈哈哈，原来 `"b" + "a" + +"a" + "a" = "baNaNa"`，还有`[1, 2, 3] + [4, 5, 6]; // -> '1,2,34,5,6'`，你知道是为啥吗？还是不要写这样的代码

**我可能连 GitHub 搜索都不会用**  
<https://juejin.im/post/6891056415440535565>  
原来 Github 上面搜索还有这么多神仙技巧...不过我还是觉得简单的才是比较好记住的

## 开源和工具

**Nat - 可以替换你 ls 命令的工具**  
<https://github.com/willdoescode/nat>  
比原有 ls 的展示效果要丰富漂亮不少，安装后我已经替换了原有 ls，执行`cargo install natls`，然后`code .zshrc`加上`alias ls='natls'`就好了
<img src="https://gw.alipayobjects.com/zos/k/1q/8TKnYM.jpg" width="800" />

**Tesseract.js - 支持 100 多种语言的纯 JS OCR**  
<https://github.com/naptha/tesseract.js>  
对应前端想识别图片中的文字可以用这个库来做，不过我一直用[Bob](https://ripperhe.gitee.io/bob/#/)这个 Mac 开源软件来做识别和翻译工具

**Denoify-让 NPM 模块支持 Deno 且不需单独维护**  
<https://github.com/garronej/denoify>  
一个将 NPM 模块构建 Deno 模块的包，结合着 Github Action 其实就能做到无需手动去维护了，官方是这样介绍的 `For NPM module authors that would like to support Deno but do not want to write and maintain a port for it`

**CSS Spider-一个抄网页 CSS 实现的 Chrome 扩展**  
<https://cssspider.fresalabs.com/home>  
试用了下效果还不错，开启后，鼠标放到元素上，对应的样式就出来了，可快速 Copy 使用

**Gitify-一个 github 消息通知的菜单栏工具**  
<https://github.com/manosim/gitify>  
用 Electron 实现的一个支持多端的实时通知软件，比较适合开源软件的维护同学

**Asciinema - 方便录制命令行会话过程并通过链接分享**  
<https://asciinema.org/>  
平时我们分享一个命令行的使用，一般是录制视频然后 mp4 文件方式分享给他人，这个工具可支持直接录制生成对应 url 给到他人同时支持所有人可见

## 跨端和 iOS

**把闲鱼 APP 长列表流畅度翻了倍**  
<https://mp.weixin.qq.com/s/dlOQ3Hw_U3CFQM91vcTGWQ>  
咸鱼关于 Android 原生、flutter 页面的长列表优化经验分享，一个良心教程

**网易云音乐 iOS 14 小组件实战手册**  
<https://mp.weixin.qq.com/s/gFd8fkJBkQd5RpFSD0P8Ig>  
国内终于有厂商在慢慢跟进这个功能了，来看看网易音乐是怎么做的

**抖音品质建设 - iOS 启动优化**  
<https://mp.weixin.qq.com/s/3-Sbqe9gxdV6eI1f435BDg>  
一个 App 的启动速度给用户的印象很重要，也是让用户喜欢用的的一个因素，抖音 iOS 的启动优化从此文看做了不少事情也说明了原理所在

**Flutter 之全埋点思考与实现**  
<https://juejin.im/post/6892371163859976199>  
埋点对于阿里前端的同学应该再熟悉不过了，不过假如我问你 Flutter 埋点的原理你知道吗？

**QQ 音乐 Android 编译提速之路**  
<https://juejin.im/post/6891957803813584909>  
一直觉得 QQ 音乐整体 App 做的不错，借此文来学习一波 QQ 音乐团队在增量编译组件研发上的探索与实践

## 灵感和有趣

**语雀产品经理的成长之路**  
<https://www.yuque.com/fangqiao/oe8iog/vk6m19>  
为什么感觉语雀的产品越做越好，同时有一条主线执行下去呢？因为它的产品经理几年都没有换过

**视觉设计中发现的 11 种视错觉**  
<https://mp.weixin.qq.com/s/zGdXBq4RDLaPYduEHJiHFg>  
日常中大家都可能会碰到一些神奇的场景，让人产生视觉错觉，本文来告诉你原因所在

**Notion 的思想来源和投资人**  
<https://mp.weixin.qq.com/s/eatQQa-ArDI96wROtX66dQ>  
好吧这个软件之前就被“吹”得很火，我也反复几个月内至少试用过三次还是觉得有些复杂最后给放弃了，不过还是有很多人用上后就特别喜欢了