# 3. Wanshi Botanical Garden

> The cover shows the Wanshi Botanical Garden in Xiamen. A must-visit spot—go on a sunny morning and take photos amidst the mist.

- Issue: 3
- Published: 2020/12/08
- HTML: https://weekly.tw93.fun/en/posts/3
- JSON: https://weekly.tw93.fun/api/en/posts/3.json
- Chinese original: https://weekly.tw93.fun/posts/3.md

---

<img src="https://gw.alipayobjects.com/zos/k/vt/QzwRSt.png" width="800" />

<small>The cover shows the Wanshi Botanical Garden in Xiamen. A must-visit spot—go on a sunny morning and take photos amidst the mist.</small>

> **Record the down-to-earth trending technologies seen every week, and publish them here after screening. Follow to stay trendy.**

## Good Reads and Learning

- **[Vue 3.0 "One Piece" is Officially Released](https://github.com/vuejs/vue-next/releases/tag/v3.0.0)**: Finally here! Check out the [English](https://v3.vuejs.org/) or [Chinese](https://v3.cn.vuejs.org/) documentation. You can use [composition-api](https://github.com/vuejs/composition-api) or [vueuse](https://github.com/antfu/vueuse) for a smooth transition.

- **[Playing Mario with Genetic Algorithms and Neural Networks](https://chrispresso.io/AI_Learns_To_Play_SMB_Using_GA_And_NN)**: A step-by-step introduction to training AI to beat Super Mario. Pure magic. Code available [here](https://github.com/Chrispresso/SuperMarioBros-AI).  
  <img src="https://gw.alipayobjects.com/zos/k/fl/121.gif" width=466/>

- **[Highlighting and Annotation: Beyond Frontend Basics](https://zhuanlan.zhihu.com/p/225773857)**: Beyond Serverless and Low-Code, the essence of frontend work is great interaction. How would you implement a "highlight and comment" feature?

- **[Implementing Web VR Panoramas](https://mp.weixin.qq.com/s/MG2d0DAM_tYx78Tt-j0rvA)**: A beginner's guide to VR principles, scenes, and implementation using CSS 3D or ThreeJS. Perfect for virtual hotel tours.

- **[Analyzing the HarmonyOS JavaScript GUI Stack](https://juejin.im/post/6872154561574862855)**: HarmonyOS 2.0 uses JS for IoT apps. This article explores how its GUI stack works (though it still feels a bit like a "toy" for now).

- **[Attention is Your Scarcest Resource](https://www.benkuhn.net/attention/)**: Ever notice how great ideas come in the shower? That's because you're focused. Spending less than 10% of your attention on work risks your job, 50% meets expectations, and over 50% makes you a great engineer.

- **[How Fast Should Your Site Load?](https://medium.com/firebase-developers/how-fast-should-your-site-load-cfb14be48e8b)**: 2-5 seconds is generally accepted, but measurement is complex. How do you account for poor outdoor connections vs. perfect office fiber?

- **[Detecting Fullscreen Mode with CSS](https://www.amitmerchant.com/how-to-detect-fullscreen-mode-using-css/)**: You might not know this, but you can use the `@media all and (display-mode: fullscreen)` media query.

## Open Source and Tools

- **[Nativefier: Turn Any Web Page into a Mac App](https://github.com/jiahaog/nativefier/)**: The best tool I've found for turning sites like WeChat Reading into standalone desktop apps.

- **[TypeORM](https://github.com/typeorm/typeorm)**: A powerful ORM for TypeScript and ES6 that supports MySQL, PG, SQLite, and more. Works in Node, browsers, and Electron.

- **[SkeletOnReact: Generate Skeleton Loading Components](https://skeletonreact.com/)**: Improve user experience by replacing generic loaders with animated skeletons. Supports multiple frameworks.

- **[Responsively App](https://github.com/responsively-org/responsively-app)**: A specialized browser for testing responsive designs across multiple screen sizes simultaneously.

- **[JSON Schema Store](https://www.schemastore.org/json/)**: A collection of 291 JSON Schema protocols. A great reference for anyone working on data validation standards.

- **[JetBrains Mono: Open Source Font for Developers](https://www.jetbrains.com/lp/mono/)**: My go-to font for the past six months. Very easy on the eyes.

## iOS and Multi-Platform

- **[The Evolution of iPhone Screen Sizes and App Design](https://mp.weixin.qq.com/s/fRXCTfl_Ewt-XuOk0lSz9g)**: Adapting for iPhone used to be simple. Now we have 4.7" to 6.7" screens. A look at the design and development philosophy behind these shifts.

- **[iOS Performance: Analyzing Memory Allocation](https://mp.weixin.qq.com/s/WqVZ1rFpYrvE8X-J0f35mw)**: When mobile devs tell you your frontend page is consuming too much memory, here is how you can use Allocations to prove or disprove it.

- **[Hero: Elegant Transitions for iOS and tvOS](https://github.com/HeroTransitions/Hero)**: Finally, an iOS animation library that is as easy to use as web-based ones.

- **[LLDB Tips and Tricks](https://juejin.im/post/6872764160640450574)**: Master the built-in Xcode debugger to find and fix bugs faster.

## Design and Inspiration

- **[Thoughts on Personal Home Page Design](https://mp.weixin.qq.com/s/UUcqZCZjfHMa7fsruCjq_w)**: An analysis of how personal home pages help build a "persona," attract followers, and drive monetization.

- **[Sharing the Narrative Design of "The Song of Everlasting Sorrow"](https://mp.weixin.qq.com/s/-rh9Q-vEVWm9Z6HOktrluA)**: Tencent's game design prowess on display—how they turned classic poetry into a game.

- **[CodePen: RolandMC-500 in Pure CSS](https://codepen.io/fossheim/pen/BaKQGZJ)**: Exquisite detail, entirely in CSS.

- **[CodePen: 3D Modern House in Pure CSS](https://codepen.io/ricardoolivaalonso/pen/yLOpNdZ)**: A stunning isometric house built with CSS.