第03期 - 万石植物园

X

摄于万石植物园，到了厦门必去的景点，选择一个天气好的早上过去，在喷雾中拍拍照很不错

记录每周看到的前端潮流技术，筛选后发布于此，关注让你更潮流~

好文和学习

• Vue v3.0.0 One Piece 终终终于发布了：值得一看，居然也叫 One Piece，官方文档可见Vue/中文版 Vue，升级过程兼容性可用composition-api或者vueuse

• 用遗传算法与神经网络来玩马里奥(en)：作者从为什么选择神经网络和遗传算法？一步一步介绍实现，一图剩多言，想折腾的同学可以跟着文章来跑一遍，代码可见 Chrispresso/SuperMarioBros-AI

• 「划线高亮」和「插入笔记」—— 不止是前端知识点：前端除了 Serverless、低代码、微前端这些新又大的技术，前端还有一处很本质的地方就是用代码实现很厉害的交互视觉，假如让你做一个划线高亮的效果你打算如何做？

• 硬核看房利器——Web 全景的实现：一步一步介绍什么是 VR、原理、场景、可以做啥、开发原理、如何在 CSS 3D 或者 ThreeJS 场景中实现，挺适合飞猪酒店看房的场景

• 浅析鸿蒙 JavaScript GUI 技术栈：最近开源的「鸿蒙 2.0」以 JavaScript 作为 IoT 应用开发的框架语言，通过此文可通俗地清楚它所支持的 GUI 到底是怎么一回事，不过看下来感觉还有些「玩具」，需要加油

• 注意力是你最稀缺的资源(en)：很多人应该也有这种感觉，洗澡的时候想一个事情解法效果很好(因为那时候除了洗澡你的注意力全部在这个事情上)，这篇文章在 Hacker News 比较火，文中有一处观点，对于工程师当你投入少于 10%注意力在工作上会有被解雇的风险，10-50%的注意力放工作能到让你达到预期，50%以上的注意力放工作会让你成为一个伟大的工程师

• 你的站点加载速度应该多快？(en)：一般认为一个网站加载 2-5S 是正常的，但是很多时候远比纯单变量下的时间度量更复杂，比如测试太多是好网络，但是不好情况用户在户外网络不好情况，那怎么来更好度量呢？

• 如何使用 CSS 检测全屏模式：你可能不知道系列，直接使用 @media all and (display-mode: fullscreen) 媒体查询的方式还是很方便

开源和工具

• Nativefier-让网页编程 Mac App：之前有尝试多种工具让网页生成 Mac 软件，这款最好用，你可以将微信读书、微信等网页版做成一个 Mac App，使用很方便

• TypeOrm：可用 TypeScript 和 ES6 写数据库的 ORM，支持 MySQL、PostgreSQL、MariaDB、SQLite、MS SQL Server、Oracle、SAP Hana、WebSQL 各种数据库，可以在 NodeJS、Browser、Ionic、Cordova 和 Electron 平台上工作

• SkeletOnReact-快速生成动画骨架加载组件：通过骨架动画的方式代替常规的 Loading，可以给用户更好的体验，这个工具支持多个框架，推荐在业务开发中试试

• Responsively App：一个用于测试响应式布局多屏幕场景的被修改过浏览器，可以从这个文章查看更多类似工具

• JSON Schema Store：收集了 291 种不同场景的 JSON Schema 协议，很适合做规范协议的同学参考

• Jetbrains Mono 开源字体：用了半年多的代码编辑器字体了，展示很舒服很是不错，推荐给大伙

iOS 和多端

• iPhone 屏幕尺寸进化历程背后的 App 设计哲学：遥想 6 年前适配 iPhone 真的是很方便，等到了 2020 年 4.7 寸、5.5 寸、5.8 寸、6.1 寸、6.5 寸，加上 12 还要增加的 5.4 寸、6.7 寸，借此文从设计、开发到推广过程看考虑因素

• iOS 性能优化 - Allocations 分析内存分配：对于前端开发同学，常常被客户端同学说你这个页面内存有些大，但是怎么测试呢，可看此文

• 适用于 iOS 和 tvOS 的优雅过渡库-Hero：之前一直在找一款 iOS 和前端一样好用的的过渡动画库，找到啦

• lldb 常用命令与调试技巧：LLDB 是个开源的内置于 XCode 的调试工具，它能帮助我们在开发中更快的定位和调试 bug，无论正向和逆向开发中都有很大的作用，对 iOS 开发感兴趣的需要学习

设计和灵感

• 个人主页设计相关思考：作者深入分析了对于个人主页设计的思考，聊到通过产品设计手段帮助用户“树立人设”、“辅助吸粉”、“助力变现”，再扩展到用户和平台生态的关系

• 《画境长恨歌》叙事设计思路分享：腾讯做游戏的功底真的是很佩服，如何从诗词到游戏策划实现

• CodePen RolandMC-500.css：用纯 CSS 画了一个 Roland MC-500，很精致

• CodePen Home 3D Modern House - Pure CSS：用 CSS 画一个 3D 的现代房子

---