# 第 3 期 - 万石植物园
> 摄于万石植物园，到了厦门必去的景点，选择一个天气好的早上过去，在喷雾中拍拍照很不错
- Issue: 3
- 发布日期: 2020/12/08
- HTML: https://weekly.tw93.fun/posts/3
- JSON: https://weekly.tw93.fun/api/posts/3.json
- English translation: https://weekly.tw93.fun/en/posts/3.md
---
摄于万石植物园，到了厦门必去的景点，选择一个天气好的早上过去，在喷雾中拍拍照很不错
> **记录每周看到的前端潮流技术，筛选后发布于此，关注让你更潮流~**
## 好文和学习
- **[Vue v3.0.0 One Piece 终终终于发布了](https://github.com/vuejs/vue-next/releases/tag/v3.0.0)**：值得一看，居然也叫 One Piece，官方文档可见[Vue](https://v3.vuejs.org/)/[中文版 Vue](https://v3.cn.vuejs.org/)，升级过程兼容性可用[composition-api](https://github.com/vuejs/composition-api)或者[vueuse](https://github.com/antfu/vueuse)
- **[用遗传算法与神经网络来玩马里奥(en)](https://chrispresso.io/AI_Learns_To_Play_SMB_Using_GA_And_NN)**：作者从为什么选择神经网络和遗传算法？一步一步介绍实现，一图剩多言，想折腾的同学可以跟着文章来跑一遍，代码可见 [Chrispresso/SuperMarioBros-AI](https://github.com/Chrispresso/SuperMarioBros-AI)
- **[「划线高亮」和「插入笔记」—— 不止是前端知识点](https://zhuanlan.zhihu.com/p/225773857)**：前端除了 Serverless、低代码、微前端这些新又大的技术，前端还有一处很本质的地方就是用代码实现很厉害的交互视觉，假如让你做一个划线高亮的效果你打算如何做？
- **[硬核看房利器——Web 全景的实现](https://mp.weixin.qq.com/s/MG2d0DAM_tYx78Tt-j0rvA)**：一步一步介绍什么是 VR、原理、场景、可以做啥、开发原理、如何在 CSS 3D 或者 ThreeJS 场景中实现，挺适合飞猪酒店看房的场景
- **[浅析鸿蒙 JavaScript GUI 技术栈](https://juejin.im/post/6872154561574862855)**：最近开源的「鸿蒙 2.0」以 JavaScript 作为 IoT 应用开发的框架语言，通过此文可通俗地清楚它所支持的 GUI 到底是怎么一回事，不过看下来感觉还有些「玩具」，需要加油
- **[注意力是你最稀缺的资源(en)](https://www.benkuhn.net/attention/)**：很多人应该也有这种感觉，洗澡的时候想一个事情解法效果很好(因为那时候除了洗澡你的注意力全部在这个事情上)，这篇文章在 Hacker News 比较火，文中有一处观点，对于工程师当你投入少于 10%注意力在工作上会有被解雇的风险，10-50%的注意力放工作能到让你达到预期，50%以上的注意力放工作会让你成为一个伟大的工程师
- **[你的站点加载速度应该多快？(en)](https://medium.com/firebase-developers/how-fast-should-your-site-load-cfb14be48e8b)**：一般认为一个网站加载 2-5S 是正常的，但是很多时候远比纯单变量下的时间度量更复杂，比如测试太多是好网络，但是不好情况用户在户外网络不好情况，那怎么来更好度量呢？
- **[如何使用 CSS 检测全屏模式](https://www.amitmerchant.com/how-to-detect-fullscreen-mode-using-css/)**：你可能不知道系列，直接使用 `@media all and (display-mode: fullscreen)` 媒体查询的方式还是很方便
## 开源和工具
- **[Nativefier-让网页编程 Mac App](https://github.com/jiahaog/nativefier/)**：之前有尝试多种工具让网页生成 Mac 软件，这款最好用，你可以将微信读书、微信等网页版做成一个 Mac App，使用很方便
- **[TypeOrm](https://github.com/typeorm/typeorm)**：可用 TypeScript 和 ES6 写数据库的 ORM，支持 MySQL、PostgreSQL、MariaDB、SQLite、MS SQL Server、Oracle、SAP Hana、WebSQL 各种数据库，可以在 NodeJS、Browser、Ionic、Cordova 和 Electron 平台上工作
- **[SkeletOnReact-快速生成动画骨架加载组件](https://skeletonreact.com/)**：通过骨架动画的方式代替常规的 Loading，可以给用户更好的体验，这个工具支持多个框架，推荐在业务开发中试试
- **[Responsively App](https://github.com/responsively-org/responsively-app)**：一个用于测试响应式布局多屏幕场景的被修改过浏览器，可以从这个[文章](https://css-tricks.com/comparing-browsers-for-responsive-design/)查看更多类似工具
- **[JSON Schema Store](https://www.schemastore.org/json/)**：收集了 291 种不同场景的 JSON Schema 协议，很适合做规范协议的同学参考
- **[Jetbrains Mono 开源字体](https://www.jetbrains.com/lp/mono/)**：用了半年多的代码编辑器字体了，展示很舒服很是不错，推荐给大伙
## iOS 和多端
- **[iPhone 屏幕尺寸进化历程背后的 App 设计哲学](https://mp.weixin.qq.com/s/fRXCTfl_Ewt-XuOk0lSz9g)**：遥想 6 年前适配 iPhone 真的是很方便，等到了 2020 年 4.7 寸、5.5 寸、5.8 寸、6.1 寸、6.5 寸，加上 12 还要增加的 5.4 寸、6.7 寸，借此文从设计、开发到推广过程看考虑因素
- **[iOS 性能优化 - Allocations 分析内存分配](https://mp.weixin.qq.com/s/WqVZ1rFpYrvE8X-J0f35mw)**：对于前端开发同学，常常被客户端同学说你这个页面内存有些大，但是怎么测试呢，可看此文
- **[适用于 iOS 和 tvOS 的优雅过渡库-Hero](https://github.com/HeroTransitions/Hero)**：之前一直在找一款 iOS 和前端一样好用的的过渡动画库，找到啦
- **[lldb 常用命令与调试技巧](https://juejin.im/post/6872764160640450574)**：LLDB 是个开源的内置于 XCode 的调试工具，它能帮助我们在开发中更快的定位和调试 bug，无论正向和逆向开发中都有很大的作用，对 iOS 开发感兴趣的需要学习
## 设计和灵感
- **[个人主页设计相关思考](https://mp.weixin.qq.com/s/UUcqZCZjfHMa7fsruCjq_w)**：作者深入分析了对于个人主页设计的思考，聊到通过产品设计手段帮助用户“树立人设”、“辅助吸粉”、“助力变现”，再扩展到用户和平台生态的关系
- **[《画境长恨歌》叙事设计思路分享](https://mp.weixin.qq.com/s/-rh9Q-vEVWm9Z6HOktrluA)**：腾讯做游戏的功底真的是很佩服，如何从诗词到游戏策划实现
- **[CodePen RolandMC-500.css](https://codepen.io/fossheim/pen/BaKQGZJ)**：用纯 CSS 画了一个 Roland MC-500，很精致
- **[CodePen Home 3D Modern House - Pure CSS](https://codepen.io/ricardoolivaalonso/pen/yLOpNdZ)**：用 CSS 画一个 3D 的现代房子