Top Frontend Techniques: Micro‑Frontends, CSS @apply, Canvas Signatures, SSR & More

EMP Micro‑Frontend Comprehensive Guide

EMP micro‑frontend solution is a zero‑modification‑cost, fully scaffolded ecosystem designed by YY business platform web front‑end team, patented and uniquely positioned.

https://github.com/efoxTeam/emp/wiki

Why I Abandoned @apply

Using @apply removes user access to selectors, so pseudo‑classes disappear. Component authors must recreate them, adding custom variables like --heading-style-hover, --heading-style-focus, and combined --heading-style-hover-focus, which becomes cumbersome.

https://www.xanthir.com/b4o00

Additional reference: http://tabatkins.github.io/specs/css-apply-rule/

H5 Canvas Electronic Signature to PDF

Electronic signatures embed a digital signature into documents, similar to handwritten signatures or stamps on paper. They are widely used in workflow approvals, invitations, and document preservation, and a recent project required a hand‑drawn signature saved as a PDF.

https://mp.weixin.qq.com/s/r3bx5WFf91A2e8dJC-NjlQ

What a 140k‑line Front‑End Page Looks Like

After a full rewrite of Tencent Docs list page, first‑screen speed improved, and SSR can further accelerate it. This article records SSR challenges and thoughts, covering Node, React components, performance, networking, Docker images, cloud deployment, gray releases, etc., serving as a reference checklist.

https://mp.weixin.qq.com/s/3J8kKArFGjjDFOr4aryNIg

Chrome 87 New Features: Camera Control, Service Worker Range Requests, Font Access

Chrome 87 stable release introduces three major updates: camera operation API (pan, tilt, zoom), service worker support for range requests, and a font access API.

https://mp.weixin.qq.com/s/muJ-lpYP9Opkl8dXSFDjew

ECMAScript 2021 New Features

ECMAScript, standardized as ECMA‑262, goes through five stages before a feature reaches the Finished state. This article reviews the confirmed new features of ECMAScript 2021.

https://segmentfault.com/a/1190000038282043

How to Prevent XSS Attacks?

With rapid internet growth, information security is a top concern. Front‑end is a high‑risk area for XSS, CSRF, network hijacking, and illegal Hybrid API calls. Browsers add CSP, Same‑Site Cookies, etc., but many threats remain, requiring continuous front‑end security audits.

https://www.cnblogs.com/facial/p/10466932.html

Shopee IconBot: One‑Click SVG Multi‑Color Icon Library via Figma + GitLab CI

Shopee IconBot is a Figma plugin that exports all SVG icons from a file and publishes them to an NPM icon library, enabling designers to deliver icons with a single click.

https://mp.weixin.qq.com/s/PoTn2ZerkRySJ77Xn2dW1w

ESLint Practice in Medium‑and‑Large Teams

Code standards are evergreen. ESLint, a plugin‑based JavaScript static analysis tool, parses code into an AST and matches patterns to locate non‑conforming code, making it a common solution for large teams.

https://tech.meituan.com/2019/08/01/eslint-application-practice-in-medium-and-large-teams.html

“Fantasy” JavaScript Metaprogramming

Metaprogramming involves writing programs that manipulate other programs or themselves as data, performing tasks at runtime that might otherwise be done at compile time. Languages that serve as their own meta‑language support reflection.

https://blog.michealwayne.cn/2020/05/16/paradigm/%E3%80%90%E7%AC%94%E8%AE%B0%E3%80%91%E2%80%9C%E7%8E%84%E5%B9%BB%E2%80%9D%E7%9A%84js%E5%85%83%E7%BC%96%E7%A8%8B/

Node_modules Dilemma

Ryan lists node_modules as one of the top ten regrets in Node.js, noting its design meets many scenarios but has drawbacks, especially in front‑end engineering, and discusses problems and possible improvements.

https://zhuanlan.zhihu.com/p/137535779

Monorepo Best Practices with Lerna

Monorepo (monolithic repository) contrasts with Multirepo. It stores all related packages in a single repository while allowing each package to be published independently, used by projects like React, Angular, Babel, Jest, Umijs, Vue.

https://zhuanlan.zhihu.com/p/76349152

Brief on Alibaba Front‑End Diversity

Over 13 years, front‑end technology at Alibaba evolved from early PC Web to multiple domains, playing crucial roles across various battlefields, driven by ECMAScript’s influence.

https://mp.weixin.qq.com/s/_lKx0KvcgEhiBNbedtzHLQ

Rax Mini‑Program Runtime Solution Explained

Since March 2020, after supporting a compile‑time solution, Rax Mini‑Program added a runtime solution, making it the only framework supporting both compile‑time and runtime approaches. This article explains its principles and thoughts.

https://mp.weixin.qq.com/s/N6j0z1MOGxoXQLoaF-WkLg