Essential Frontend Picks: Canvas Collision Detection, CSS Animation Tricks, Design‑to‑Code & Distributed Theory

News

2023 JavaScript Rising Stars – https://risingstars.js.org/2023/en

Major ESLint upgrade – https://eslint.org/blog/2023/12/eslint-v9.0.0-alpha.0-released/

jQuery 4.0 upcoming – https://github.com/jquery/jquery/issues/5365

V8 introduces Maglev compiler – https://v8.dev/blog/maglev

Article Recommendations

Canvas core technology – how to implement collision detection (original: https://juejin.cn/post/6844903665191370765). The article explains using canvas for complex animations where CSS animation is insufficient and describes techniques for detecting collisions between moving objects.

Controlling CSS Animations, Transitions with JavaScript (original: https://css-tricks.com/controlling-css-animations-transitions-javascript/). It outlines basic ideas for pausing transitions, obtaining the current keyframe percentage during an animation, and using JavaScript to manipulate CSS animations, with practical tips such as using getComputedStyle, handling transitionend events, and the relative ease of CSS transitions over animations.

Use getComputedStyle to work with CSS transitions.

The transitionend event is useful when manipulating CSS transitions via JavaScript.

Changing the current value of a CSS animation via JavaScript can be complex.

CSS transitions are generally easier to use than CSS animations.

CSS matrices are difficult for beginners.

Planning and thinking through animation logic is crucial for coding.

Semi D2C design-to-code evolution (original: https://zhuanlan.zhihu.com/p/667189184). In June 2023, Figma introduced variable and variant features, enabling design components to match front‑end components at an engineering level, forming the basis for C2D design tools. The Semi component library is highlighted as a strong front‑end and design solution, supporting a reliable D2C workflow.

Distributed Theory (Part 1) (original: https://juejin.cn/post/6874599410802622472). The first part explains the concept of distributed systems, the evolution of distributed architecture, and basic theories, while previewing a second part that will cover data‑synchronization algorithms, providing a solid overview of distributed computing.

Frontend version‑low guide popup solution . Describes how to detect the local and cloud version numbers, compare them, and prompt users to force‑update to the latest version when the frontend version is outdated.

10 universal anti‑mistake design principles (original: https://zhuanlan.zhihu.com/p/290935079). A quick 10‑minute read that introduces the concept of “anti‑mistake” design and lists ten principles, each explained with industrial design context and practical web‑interaction applications.

Xiaoming Recommendations

Formily JSON Schema rendering process and case study – https://mp.weixin.qq.com/s?__biz=Mzg4OTkwMTY3Mg==∣=2247485145&idx=1&sn=092946f0f6a3b4a2980d2437eff14ffb

How GuMing builds a front‑end data hub – https://mp.weixin.qq.com/s?__biz=Mzg4OTkwMTY3Mg==∣=2247485119&idx=1&sn=359c8963c2f89ebfc175a76d1f54faf2

Two essential ways to use React components – https://mp.weixin.qq.com/s?__biz=Mzg4OTkwMTY3Mg==∣=2247485084&idx=1&sn=a90bb79426534ab5535f2fbb00e711f2

Conclusion

Follow the public account "Goodme Frontend Team" for more practical front‑end knowledge and community sharing.