# 第 5 期 - 泸沽湖

> 封面图摄于今年国庆在泸沽湖坐船到亲爱的客栈途中，第一次见如何清澈透蓝的湖水，到丽江一定需要抽空去一下泸沽湖看看

- Issue: 5
- 发布日期: 2020/12/22
- HTML: https://weekly.tw93.fun/posts/5
- JSON: https://weekly.tw93.fun/api/posts/5.json
- English translation: https://weekly.tw93.fun/en/posts/5.md

---

<img src="https://gw.alipayobjects.com/zos/k/bn/g7b1Xc.jpg" width="800" />

<small>封面图摄于今年国庆在泸沽湖坐船到亲爱的客栈途中，第一次见如何清澈透蓝的湖水，到丽江一定需要抽空去一下泸沽湖看看</small>

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

## 好文和学习

**新潮流？用其他语言来写 JS 工具**  
<https://2ality.com/2020/10/js-plus-other-languages.html>  
最近发现不少比较快的 JS 周边工具都是用 Go 或者 Rust 来实现的，同时速度远快于之前用 Node 来实现，比如说比 Webpack 快百倍的 [esbuild](https://github.com/evanw/esbuild) 使用 Go 来实现的，或许是一种新的潮流

**用 TensorFlow.js 来让蒙娜丽莎栩栩如生起来**  
<https://blog.tensorflow.org/2020/09/bringing-mona-lisa-effect-to-life-tensorflow-js.html>  
深度好文，这个项目利用 TensorFlow.js、深度学习和图像处理技术，让蒙娜丽莎的眼神和头跟踪实验者的动作来移动

**只用 CSS 来实现设置数字计数器动画**  
<https://css-tricks.com/animating-number-counters/>  
要写一个数字从 0-100 增长的动画效果，可能首先会想到用 setInterval，但是其实你可以试试 New School 的 CSS 解决方案

**去复习一遍 Linux 的知识**  
<https://juejin.im/post/6881755746216706062>  
标题是「对不起，学会这些 Linux 知识后，我有点飘」有些 2，不过用前端久了，去复习一下 Linux 用法是很不错的

**改变世界的一次代码提交**  
<https://hutusi.com/articles/the-greatest-git-commit>  
本文主要是讲当时 Linus 是怎么设计出来 Git 的第一个版本来的，从背景、设计、实现、启示来阐述，对于了解 Git 原理很不错

## 开源和工具

**SWC- 超快 TS / JS 编译器**  
<https://github.com/swc-project/swc>  
SWC 是一个用 rust 编写的超快速 typescript/javascript 编译器，类似用 Rust 写的 JS 工具还有 [RSLint](https://github.com/RDambrosio016/RSLint)格式校验工具和[Volta](https://github.com/volta-cli/volta)项目命令行 node/npm/yarn 版本管理工具，还有用 Go 实现的[Elsa](https://github.com/elsaland/elsa)

**jspm - 可直接使用的 NPM 包模块 CDN**  
<https://jspm.org/>  
jspm 提供了一个模块 CDN，允许 npm 中的任何包作为原生 JavaScript 模块直接加载到浏览器或 Node 环境中使用，类似的还有[Skypack](https://docs.skypack.dev/)，可以和 Webpack5 中的模块联邦结合起来看

**Jazzit - 让你的脚本运行成功失败播放声音**  
<https://github.com/Sangarshanan/jazzit>  
Python 的一个库，挺有新易，有兴趣的同学可以用 Node 去实现一个

**Headless Recorder Chrome 扩展**  
<https://github.com/checkly/headless-recorder>  
Headless recorder 是一个可以记录浏览器事件交互行为并生成 Puppeteer 或 Playwright 脚本的 Chrome 扩展工具，在测试领域可以好好玩一玩

**Airbnb 开源的可视化组件 Visx**  
<https://github.com/airbnb/visx>  
Visx 是可复用的低代码可视化组件集，将 D3 的强大功能与 React 虚拟 DOM 更新的优势结合起来，很有 Airbnb 的视觉特色([效果>>](https://airbnb.io/visx/gallery))，做一些年轻化潮流的可视化场景可以试试

**PASUKON-简单的 JAVASCRIPT 解析器生成器**  
<https://pasukon.rocks/>  
Pasukon 使用易于学习的语法生成解析器，基于解析器组合器，还实现了词法分析步骤，可以通过如上在线页面来试试看

## iOS 和多端

**深入浅出主流的几款小程序跨端框架原理**  
<https://juejin.im/post/6881597846307635214>  
作者从目前市场上主流的小程序跨端框架，类 Vue、类 React 的原理分析了一个遍，长文非常适合一读

**Flutter 渲染引擎详解 - iOS Metal 篇**  
<https://zhuanlan.zhihu.com/p/214099612>  
Flutter 渲染引擎在 iOS 上支持三种渲染方式，分别是纯软件（CPU），Metal 和 GL，此文主要讲在 iOS 上 Metal 的一个原理

**Flutter Widget 体系架构与 UI 渲染流程**  
<https://juejin.im/post/6874737011325059086>  
本文为 Flutter 技术底层原理基础，了解后有便于对于其状态管理、Navigator 页面导航、Key 的设计原理、FPS 等领域扩充研究

## 灵感和设计

**硬核 UP 自制带屏幕的 NFC 名片**  
<https://www.bilibili.com/video/BV1Cf4y1y7KT/>  
B 站一 UP 开源了一个自己实现的超迷你智能 NFC 卡片，带电子墨水屏，可以模拟各种 IC 卡，和配套 APP 使用设置显示内容等等功能，非常佩服这个全能的人才

**用 JS 来玩音乐**  
<https://bongo.cat/>  
试试按一下 1 1 3 1 6 5，然后按一下 1 1 3 1 8 6，会有惊喜，更多谱子可见[Externalizable/bongo.cat](https://github.com/Externalizable/bongo.cat/issues?utf8=%E2%9C%93&q=is%3Aissue+label%3A%22Type%3A+Song+Submission%22+)，很多“闲人”，玩完以后这个 JS 音乐生成库[ZzFXM](https://keithclark.co.uk/articles/zzfxm/)也可以了解一下~

**Codepen-用 CSS 来画一个 Switch**  
<https://codepen.io/cybercountess/pen/PoNXEqL>  
可能你画就是一个 img 标签解决啦~

**如何保持长时间专注？**  
<https://www.yuque.com/deerain/wqpb2o/nwazye>  
本文主要针对的是无法长时间保持注意力的人，普通人能一次性保持高度专注的时长一般是 30~40 分钟,如果低于这个时间，那就阔以看看此文啦~

**为什么自己照镜子感觉自己长的蛮好看，可是一拍照就觉得不咋的?**  
<https://www.zhihu.com/question/34368524>  
知乎上面的一个问答，可能大部分同学都有这个疑问，为啥“我”镜子里面这么好看，拍照出来感觉差了点儿~