004. Donghai Music Festival

X

中

The cover shows the Donghai Music Festival from last year. Rocking out by the sea is an incredible experience. Every frontend developer should add “following music festivals” to their hobby list.

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

Good Reads and Learning

• CSS Masking: An introduction to the experimental mask-image property, including SVG masking and gradient effects. Also check out this classic article by Zhang Xinxu.

• AVIF: A New Image Format: Derived from AV1 video, AVIF offers incredible compression. A photo that is 74k as a JPEG and 43k as a WebP is only 18k as an AVIF.

• Web APIs for Dual-Screen and Foldable Devices: Microsoft Edge team introduces two experimental Chromium features: the screen-spanning CSS media query and the getWindowSegments JS API.

• The Mystery of the “Garbled” Text from Deyang: A fascinating look at how a seemingly garbled official notice was actually just encoded text. A great way to learn about Chinese character encoding.

• Simulating Object Collisions with Canvas: A step-by-step guide to building a particle collision simulation from scratch. Original article here.

• Machine Learning Foundations Notes: Notes from Professor Hsuan-Tien Lin’s “Machine Learning Foundations” course at Taiwan University. Covers When, Why, How, and Better Learning.

• China’s Big Cycle and Its Currency: Ray Dalio, founder of Bridgewater Associates, analyzes China’s history, mindset, and rise since 1949.

Open Source and Tools

• GitHub @vue/lit: A tool for writing Web Components using Vue syntax, built with lit-html and @vue/reactivity. Explained here.

• GitHub Brahmos: A UI library that uses React APIs with native templates—JSX without the VDOM. Compare with Superfine and Hyperapp.

• instant.page: Just-in-Time Preloading: A single line of code can speed up your site by preloading links when a user hovers over them.

• ARWES: Sci-Fi Cyberpunk UI Framework: A futuristic UI framework for web apps. Even the documentation uses ARWES, and it features great sound effects and animations.

• GitHub GrapesJS: An open-source, no-code framework for building page builders. Check out the Web Page Demo and Newsletter Demo.

• GitHub Repluggable: A library for implementing Inversion of Control in frontend apps, making complex project development easier.

• filters.css: CSS-Only Filters Library: Apply a wide variety of color filters using pure CSS. Great for image processing workflows.

• Vime Player: A customizable, extensible, and framework-agnostic media player.

• GitHub Default Branch: Moving from ‘master’: Following the “Black Lives Matter” protests, GitHub is changing the default branch name to be more inclusive.

iOS and Multi-Platform

• An iOS Developer’s Advanced Journey: Based on a popular V2EX thread, this is a roadmap for any frontend dev looking to master iOS development.

• Understanding Podfile Parsing Logic: Think of Podfile as the package.json for iOS. This article covers everything from Xcode project structure to fine-grained configuration.

• Governing Flutter Binary Sizes: Meituan shares their practices and a dynamic delivery solution for keeping Flutter app sizes under control.

Design and Inspiration

• CodePen: 100 Divs Dragon: An incredible animation following the mouse, built with exactly 100 divs and SVG.

• What’s New at Figma Config?: Re-cap of the annual Figma conference themed “Bringing Design and Code Closer.”

---