# 第 8 期 - 日本大阪海游馆

> 封面图日本大阪海游馆，拥有超极大

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

---

<img src="https://gw.alipayobjects.com/zos/k/1i/nn4eEv.jpg" width="800" />

<small>封面图日本大阪海游馆，拥有超极大[鲸鲨](https://gw.alipayobjects.com/os/k/oh/1213213123iii.mp4)而著名，海洋生物种类比想象多很多，等明年国外疫情结束，假如到大阪旅游除去环球影城最推荐这个</small>

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

## 好文和学习

**我的前端成长之路：内观自在，外观世音，追寻内心平静**  
<https://mp.weixin.qq.com/s/yjAzgpBpLUrAKgIZd__sNg>  
来自飞猪前端圣司的一篇关于自我成长的总结文章，校招毕业 4 年时间从 P5 到 P8，内观自在，外观世音，推荐前端同学一读

**对开发人员有用的定律、理论、原则和模式**  
<https://github.com/nusr/hacker-laws-zh>  
值得收藏和多次阅读的程序员定律，里面收集很多抽象经验的解释，比如说「过早优化是万恶之源」、「九个女人不能在一个月内生一个孩子 」

**解释 JavaScript 的内存管理**  
<https://felixgerschau.com/javascript-memory-management>  
我们平时写代码的时候几乎不太考虑 JS 的内存管理，因为浏览器已经帮忙做了，但是有时候假如碰到内存泄露，那懂一些原理会有便于你排查问题

**聊一聊二维码扫描登录原理**  
<https://juejin.im/post/6844904111398191117>  
可先想后看，假如让你实现一个二维码扫码登录的功能你会怎么做？

**为什么 IPv6 难以取代 IPv4**  
<https://draveness.me/whys-the-design-ipv6-replacing-ipv4/>  
西电学弟的文章，从网络原理角度来解释为什么 IPv6 难以取代 IPv4，整体博客质量超级高，值得关注

**使用 Emoji 来创建 CSS Shapes**  
<https://css-tricks.com/creating-css-shapes-with-emoji/>  
思路还不错，文章通过不少 Demo 来讲述将 Emoji 图标的形状样子内联到文字环绕的效果

## 开源和工具

**Gazepass - 无密码的登录 API**  
<https://gazepass.com/>  
上周周刊中[《Meet Face ID and Touch ID for the Web》](https://webkit.org/blog/11312/meet-face-id-and-touch-id-for-the-web/)，刚想去折腾一下，就有人给产品化出来了，效果实现很赞，说不定不久将来在 Web 中输入框密码类型就变成可选状态了
<img src="https://cdn.tw93.fun/blog/upic/WZe3kK.gif" width="800" />

**RSSHub - 万物皆可 RSS**  
<https://github.com/DIYgod/RSSHub>  
对于有 RSS 阅读习惯的同学不要错过这个工具，一个很简单易用、易于扩展的 RSS 生成器，借此可以给平时不支持 RSS 的内容网站生成 RSS 订阅源

**iOS 上的 Linux Shell 工具**  
<https://github.com/ish-app/ish/>  
iOS 上的命令行工具，想想可以用它来玩什么？

**使用 TensorFlow.js 进行 NSFW 检测**  
<https://github.com/infinitered/nsfwjs>  
NSFW 指 Not Safe For Work ，这个库叫 nsfwjs，通过 TensorFlow.js 在浏览器快速识别有点点那个啥的图像，别多想，还是去看看如何实现的~

**Eta - 又来了一个新的模版引擎**  
<https://eta.js.org/>  
其实 tpl 挺好用的，就是感觉有些上古时代的产物了，Eta 相比就潮流一些了，可以同时在 Node、Deno 和浏览器中使用，性能好、轻量、配置性更强一些

**使用 GitHub Actions 等生成你的跑步主页**  
<https://github.com/yihong0618/running_page>  
思路很不错，借助 GitHub Actions、Gatsby、Vercel 自动部署、Mapbox 地图等能力可以将你的平时的跑步记录(Keep、Nike、Garmin 等)生成一个自动更新的个人跑步主页

## iOS 和多端

**Native 地图与 Web 融合技术的应用与实践**  
<https://mp.weixin.qq.com/s/RKGJOtRMjTetTZRIGzqH_Q>  
同层渲染是移动端 H5 中近年的一种性能体验“黑科技”优化技术，也即将 WebView 与 Native 组件叠加到一起共处一个页面，如打车的地图用 Native 的，操作部分用 H5 来实现，美团的解决方案可供输入

**自研 iOS 热更新机制——OCPack 技术方案总结**  
<https://juejin.im/post/6884833291740905480>  
讲了一个 iOS 客户端动态化技术方案，不过更多是看看思路以及热更新实现的一些原理，这东西由于 iOS 审核的原因比较难大规模使用

**iOS 性能优化实践：头条抖音如何实现 OOM 崩溃率下降 50%+**  
<https://mp.weixin.qq.com/s/4-4M9E8NziAgshlwB7Sc6g>  
OOM (Out Of Memory)指的是在 iOS 设备上当前应用因为内存占用过高而被操作系统强制终止，在用户侧的感知就是 App 一瞬间的闪退，Crash 对于客户端同学很好理解但是对于前端却很头疼，来看看头条的解决思路是怎么样的？

**如何进行 iOS Widget 开发？**  
<https://mp.weixin.qq.com/s/xXEWWHXt4oKDSboogTbTZA>  
盒马同学基于盒马小镇的 Widget 开发，分享在登录授权、数据更新、界面渲染以及审核上的实践经验

## 灵感和有趣

**产品经理如何做产品架构设计**  
<http://www.woshipm.com/pd/4231285.html>  
对于产品经理来说，发展到一定阶段后，日常的工作内容往往离不开产品架构设计。这是一个极其细致的活，需要产品经理有很强的架构能力。那么产品经理如何才能摸清产品的底层逻辑、提升对产品的认知，做好产品架构呢？

**到底几点睡觉才算是不叫熬夜？**  
<https://daily.zhihu.com/story/9729486>  
最好还是别熬夜，不如今天就早点睡吧

**人口普查究竟查什么？**  
<https://mp.weixin.qq.com/s/Hc6TR83XRpwxW_g3vIdZXw>  
回形针近期的一篇科普文，在中国人口普查是如何进行的？前几次的普查究竟查到了什么？

**如何有效地进行代码 Review？**  
<https://mp.weixin.qq.com/s/uFivYfX53s5zAe6hacznlg>  
腾讯技术同学关于为什么要做以及如何高效做 Code Review 的一篇文章

**一个纯 CSS 游戏 - You Must Build a Lighthouse.**  
<https://codepen.io/ivorjetski/pen/OJXbvdL>  
游戏动效做的很不错，可以重点学习作者一些效果是如何借助 CSS 实现的