003. 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.

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: Finally here! Check out the English or Chinese documentation. You can use composition-api or vueuse for a smooth transition.
Playing Mario with Genetic Algorithms and Neural Networks: A step-by-step introduction to training AI to beat Super Mario. Pure magic. Code available here.
Highlighting and Annotation: Beyond Frontend Basics: 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: 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: 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: 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?: 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: You might not know this, but you can use the @media all and (display-mode: fullscreen) media query.

Nativefier: Turn Any Web Page into a Mac App: The best tool I’ve found for turning sites like WeChat Reading into standalone desktop apps.
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: Improve user experience by replacing generic loaders with animated skeletons. Supports multiple frameworks.
Responsively App: A specialized browser for testing responsive designs across multiple screen sizes simultaneously.
JSON Schema Store: A collection of 291 JSON Schema protocols. A great reference for anyone working on data validation standards.
JetBrains Mono: Open Source Font for Developers: My go-to font for the past six months. Very easy on the eyes.

The Evolution of iPhone Screen Sizes and App Design: 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: 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: Finally, an iOS animation library that is as easy to use as web-based ones.
LLDB Tips and Tricks: Master the built-in Xcode debugger to find and fix bugs faster.

Thoughts on Personal Home Page Design: 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”: Tencent’s game design prowess on display—how they turned classic poetry into a game.
CodePen: RolandMC-500 in Pure CSS: Exquisite detail, entirely in CSS.
CodePen: 3D Modern House in Pure CSS: A stunning isometric house built with CSS.