Top Frontend Insights: Micro‑Frontends, G6, Code Quality, CDN, CSS & More
This curated collection presents concise overviews of recent front‑end advancements, covering micro‑frontend architecture in Xiaomi CRM, G6 4.0 visual analytics, code‑quality best practices, 2020's hottest technologies, CDN fundamentals, CSS trends, component design, TypeScript popularity, VSCode inspection tools, watermark techniques, GPU.js acceleration, React DOM manipulation, and the top JS13K 2020 games.
Micro‑Frontends in Xiaomi CRM System
Architecture design must match the problem at hand; there is no optimal architecture, only the most suitable one. Micro‑frontends are not a framework or tool but an architectural system.
https://xiaomi-info.github.io/2020/04/14/fe-microfrontends-practice/
Recommended: Wang Qiangqiang
G6 4.0: Continuous Growth
Beyond functional enhancements and refined details, G6 4.0 introduces a visual design system, intelligent layout prediction, and massive data visualization solutions.
https://www.yuque.com/antv/g6-blog/nnmqbk
Recommended: Hong Liang
Better Code Quality, More Appreciation from Colleagues
No one wants to write bad code, especially when business demands are relentless; if time permits, strive for good code quality, benefiting yourself, teammates, and the company.
https://www.yuque.com/sensors-fe/blog/ddrcdx
Recommended: An Zhen
What Was the Hottest Front‑End Technology in 2020?
Vue 3.0 was released in September, offering a better TypeScript development experience; the community shifted from learning TypeScript to mastering its usage.
https://www.zhihu.com/question/365588457/answer/1549027409
Recommended: Fang Xiao
How CDN Works and Its Use in Taobao Image Service
Content Delivery Network (CDN) is a distributed network of edge servers built on top of the transport network, accelerating various content types such as small images, large files, video streaming, live media, full‑site acceleration, and security acceleration.
https://juejin.cn/post/6901479190244098062
Recommended: Shen Jianqin
State Of CSS 2020
Forget everything you know about CSS, or at least be ready to reconsider a lot of it. If you’ve been writing CSS for over a decade, CSS in 2020 looks nothing like what you were used to.
https://2020.stateofcss.com/en-US/
Recommended: Shen Jianqin
Writing High‑Quality Maintainable Code: Component Abstraction and Granularity
How to decompose a page? How to divide components reasonably? Both方案 A and B seem viable in the current business scenario; how to choose?
https://mp.weixin.qq.com/s/6U8zMpnBk9nBI_bQAobdfw
Recommended: Shen Jianqin
TypeScript Surpasses C++ to Become the Fourth Most Popular Language
Microsoft’s TypeScript, a superset of JavaScript, has risen to the fourth most popular programming language, overtaking C#, PHP, and C++, behind only JavaScript, Python, and Java.
https://www.qbitai.com/2020/12/20219.html?utm_source=tuicool&utm_medium=referral
Recommended: Zhao Lei
Clicking Page Elements Opens Component in VSCode? The Mechanism Explained
In large projects, QA may give you a problematic link without indicating the corresponding file. Clicking a component on the page and having VSCode jump to the file and line is possible with react‑dev‑inspector.
https://mp.weixin.qq.com/s/dMu_hzrTWynWerKmCrrE5g
Recommended: Wang Mingquan, Du Hongjun
Front‑End Watermark Tutorial from Hacking a Design Site
Watermarks can be generated using pure HTML elements (div) or background images (canvas/svg). Dark watermarks often involve slight RGB adjustments, DWT, DCT, FFT, and other methods.
https://juejin.cn/post/6900713052270755847#heading-23
Recommended: Wu Zhoukang, Lv Yueyang
Improving JavaScript Performance with GPU.js
GPU.js is a JavaScript acceleration library for Web and Node.js that enables general‑purpose GPU programming, allowing heavy computations to run on the GPU for faster execution, with a fallback to regular JavaScript when no GPU is available.
https://juejin.cn/post/6901937641517350919
Recommended: Zhao Haiying
Removing All DIVs from Zhihu in One Go
Zhihu’s homepage is built with React; by overriding React.createElement, we can render all div nodes as React.Fragment at runtime, effectively removing all divs.
https://mp.weixin.qq.com/s/ICjOlJL-fUGRb2S_xqBT7Q
Recommended: Chen Ning
Top 10 Games from the JS13K 2020 Competition 🕹
The ninth annual js13kGames competition wrapped up with over 220 games submitted, each created in a month and under 13 KB of JavaScript. This year’s theme was 404, and participants interpreted it freely.
Here are the top 10 entries as voted by participants.
https://github.blog/2020-10-11-top-ten-games-from-the-js13k-2020-competition/
Recommended: Shan Shuo
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
Sensors Frontend
Regularly shares the Sensors tech team's cutting‑edge explorations and technical insights in front‑end development.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.