FE Bits Vol.5｜Nx Package Compromised, ESLint Multi-threaded Linting, and Firefox Experimental PWA

This article has been machine-translated from Chinese. The translation may contain inaccuracies or awkward phrasing. If in doubt, please refer to the original Chinese version.

This weekly aims to update every Sunday. The website is under construction…
Currently recommend subscribing via Folo to this weekly’s Quaily RSS.
WeChat Official Account: FE Bits. Click the original article link to view the full post.
QQ discussion group 598022684 — casual discussions about frontend tech & life. You can also submit your own articles. It’s more of a fan group~
This weekly is also open-sourced at fe-bits-weekly, feel free to follow along.

Today is August 31, 2025, Sunday.

My favorite article this week is: Getting Creative With Images in Long-Form Content | CSS-Tricks, which explores how to use unconventional image layouts, grid designs, CSS shapes, captions, and whitespace to make images in long-form content not just illustrations but elements that shape reading rhythm and experience.

Now all you need is a shape-outside and shape-image-threshold to achieve this kind of image alpha channel wrapping effect.

Also, CSS shade-* support is now Baseline Widely available.

A bit nostalgic — reminiscing about the various black magic hacks of the past, compared with today’s ever-growing roster of CSS new features.

Ecosystem & Community Updates

• Supply Chain Security Alert: Popular Nx Build System Package Compromised with Data Stealing Malware: The nx package was poisoned — it steals sensitive data by calling AI CLI tools. Due to a misconfigured GitHub Actions permission in the nx package’s GitHub repo, an npm token was stolen by hackers. The hackers published multiple poisoned new versions in a short time, tricking victims into upgrading. The malware installs via the postinstall process. This is yet another incident of this kind.

• Reshaping Remix: V3 Will Drop React in Favor of a Preact Fork: Remix v3 will abandon React in favor of a Preact fork to “own” more of the stack and minimize dependencies, emphasizing Web APIs, runtime-first, and composability while optimizing for LLMs. Community reaction is mixed and no preview version has been released yet. [Remix original post]

• Last week’s situation has a follow-up: Microsoft officially states Windows 11 August update has no connection to SSD drive failures | WI1138854: Microsoft says that after investigation and telemetry, no evidence was found linking KB5063878 to SSD/HDD failures. No evidence currently suggests the update caused storage issues, and they will continue monitoring feedback.

• The JavaScript trademark issue is still being fought. JavaScript’s trademark problem: Analyzing the legal risks of Oracle holding the “JavaScript” trademark, proposing three paths: force them to abandon the trademark (Deno’s lawsuit), rename, or substitute with “JS.” If the first succeeds, ECMAScript could potentially be renamed to “JavaScript standard.”

• Try PWA in Firefox and tell us what you think!: Firefox browser launches experimental Web Apps (PWA) in Release 142. Try it out and share your feedback.

• AI assistance for the web: Chrome integrated an AI assistant into DevTools’ Network panel. You can now analyze and chat based on selected requests, including how to open it, viewing context and raw data, sample prompts, history management, and feedback mechanisms.

Articles & Videos

• Say bye with JavaScript Beacon: The author points out that using XMLHttpRequest or fetch in beforeunload/unload for reporting isn’t reliable because browsers won’t block the unload process for scripts, and network requests can easily be cancelled. The recommended approach is navigator.sendBeacon from the Beacon API for fire-and-forget async reporting: no callbacks or Promises needed, JS finishes immediately while the browser handles transmission in the background. Though limited to POST with small payloads, it’s perfect for page exit, real-time analytics, and lightweight frontend-backend sync scenarios that don’t need response handling.

  • For more on the Beacon API, check MDN: https://developer.mozilla.org/en-US/docs/Web/API/Beacon_API

• You’re Loading Fonts Wrong (And It’s Hurting Your Performance): A systematic overview of web font best practices from history to engineering practice, pointing out common mistakes and providing optimal loading strategies for performance, accessibility, and compliance. Also a very interesting article.

  EOT: An Internet Explorer proprietary format — thankfully now extinct.

  

• What’s new in daisyUI 5 and how to migrate: daisyUI 5 is a complete rewrite — lighter, faster, with a powerful new theme engine and components. Fully aligned with Tailwind CSS 4, bringing higher performance and stronger customization.

• Quick overview of HTML hidden=until-found: Introduces the until-found hiding mechanism for the hidden attribute and the beforematch event. Based on content-visibility:hidden, content automatically reveals on anchor links/page search. Suitable for collapsible content, help info, and tabs. Chrome has supported it for years, and Safari has caught up too.

• Big O: An article explaining algorithm complexity with rich interactive demos, using sum, bubble sort, and binary search visualizations to explain Big O growth patterns (O(1), O(log n), O(n), O(n^2)), plus practical performance optimization tips using Set/Map, index traversal, and result caching.

• Speeding Up JavaScript Ecosystem - Semver: A performance profiling exercise showing how to speed up semantic versioning (Semver) comparison in package managers by 33x.

CSS

• You “Probably” Don’t Need JavaScript Anymore: A long article balancing practice and perspective, where the author uses “many sites don’t need JavaScript” as a starting point to systematically demonstrate modern CSS’s power and usability, showing how animations, themes, form validation, component interactions, and mobile adaptation can all be achieved with just HTML/CSS.

• The interpolate-size property is a great example of progressive enhancement: Using the CSS property interpolate-size to smoothly transition to height: auto in supported browsers, with progressive enhancement ensuring a minimum viable experience in older browsers.

• Preview the eye-opening CSS corner-shape property: Detailed explanation of the new CSS corner-shape feature, customizing corner shapes based on border-radius (round/squircle/scoop/bevel/notch/square or superellipse(K)), supporting per-corner settings and smooth animations. Currently only supported in Chrome 139+.

• Anchor Positioning Basics: This article systematically introduces CSS Anchor Positioning basics: defining anchors for any element with anchor-name and using position-anchor, anchor(), or position-area on target elements to stably align elements relative to others without restructuring the DOM, with position-try-fallbacks (like flip-block, flip-inline) for graceful viewport overflow handling.

• The making of gradient.style: From sketch to launch, the author shares how to visualize gradient color stops, double positions, and transition hints following the CSS Images spec, building it into a usable design and development tool: CSS HDR Gradients

• CSS Elevator: A Pure CSS State Machine with Floor Navigation: How to build an interactive elevator state machine using only modern CSS (:has(), @property, custom properties, counters, etc.), implementing floor navigation, direction indicators, distance-based speed animation, and accessibility announcements — no JavaScript needed. Includes practical use cases.

This elevator is more than just a toy. It’s a blueprint. Consider these real-world uses:

• Interactive prototypes without JavaScript
• Progress indicators in forms with live state
• Game UIs with inventory or state mechanics
• Logic puzzles or educational tools (CSS-only state tracking!)
• Reducing JavaScript dependency for performance or sandboxed environments
• These techniques are especially useful in static applications or restricted-script environments (e.g., email, certain CMS widgets).

Then two tutorials about CSS paths — both are very high quality with tons of interactive demos, making them excellent tutorials.

• The -path of Least Resistance (Part 1): Deep dive into CSS clip-path syntax and usage, from basic shapes to complex custom paths, showing how to break beyond box constraints and give UI elements more flexible and expressive shapes.

• The -path of Least Resistance (Part 2): Deep dive into CSS offset-path path animations, using offset-distance for motion along custom routes, combined with offset-anchor / offset-position / offset-rotate and transform order to control anchors and orientation. Covers closed/open paths, negative/overflow distances, ray() infinite rays, performance optimization, and reduced-motion accessibility.

Tools & Library Updates

• CSS HDR Gradients — This tool is excellent! A CSS gradient generator with the highlight being comprehensive color space support. [GitHub]

  

• Chainlift/liftkit: LiftKit is a UI framework based on the golden ratio. Its core is a set of formulas and variables combined with Material 3, providing dynamic colors and optical spacing correction. Quick integration into Next.js via templates or CLI, supporting on-demand installation and CSS tree-shaking, with Figma/Webflow resources and FAQ. Button variants and variable documentation are still being refined.

  

• Meridius-Labs/electron-liquid-glass: A library providing native NSGlassEffectView glass effects for Electron apps on macOS — zero-config with customization support. TypeScript support, automatic dark mode, customizable corners and colors, with prebuilt binaries. macOS only; safely degrades to no-op on other platforms.

• transloadit/uppy: Uppy, the modular JavaScript file uploader, supports multi-source selection, resumable uploads, pluggable UI, and backend integration for quickly building reliable upload experiences in any app.

Library Updates

• What’s new in ESLint v9.34.0: Multi-threaded Linting — ESLint v9.34.0 natively supports multi-threaded parallel linting via --concurrency, providing ~1.3x to 3.01x speedup on large projects, with benchmarking and caching optimization tips.

• Introducing Zod Codecs: Zod 4.1 introduces the codec API for type-safe bidirectional data transformation, addressing the one-way limitation of transforms.

• Node.js v24.7.0 (Current): Introduces Post-Quantum Cryptography and Web Cryptography modern algorithms, Node.js execution argument support in single executable applications, and root certificate updates to NSS 3.114.

• Rspack 1.5 Release Announcement: The new version focuses on build performance, browser runtime, and ecosystem upgrades, bringing barrel file lazy compilation, native file watching, constant/enum inlining, module federation runtime improvements, and more. Other Rstack progress:

• Rslint released: A TypeScript-first next-generation Linter (Go implementation, based on typescript-go) supporting ESLint-style config, IDE plugins, auto-fix, covering 50+ @typescript-eslint rules. See Rslint website.
• Rsbuild 1.5: Enables lazyCompilation, lazyBarrel, inlineEnum, typeReexportsPresence by default for faster development and accurate type handling. New output.module supports Node.js ESM output, with plans to expand to Web. Rslib 0.12: Template integration with Rstest testing framework, pushing a new ESM output approach targeting esbuild/Rollup output quality while maintaining webpack interop consistency. Reference: interop test. Rspress 2.0 beta: New Markdown text copy component, paired with @rspress/plugin-llms for auto-generating llms.txt standard files, making content easier for large models to process. Rsdoctor 1.2: New aggregated module precise analysis and Treemap view, improving visualization and accuracy. Details: Rsdoctor 1.2 release blog. Rstest 0.2: Full mock API (ESM support), watch mode incremental re-runs, and CLI shortcuts for significantly better testing efficiency. See Mock API docs.

• Prisma even added AI safety guardrails — so thoughtful! Prisma 6.15.0 released: New AI safety guardrails, unified prisma-client runtime configuration, Vercel Fluid connection pool support, Management API GA, Pipedream integration, create-db JSON output, direct connection capability approaching GA.

  Prisma ORM now includes built-in safety checks to prevent destructive commands when triggered by AI coding assistants. The CLI can recognize when it’s being executed by popular AI agents like Claude Code, Gemini CLI, Qwen Code, Cursor, Aider, and Replit.

• Electron 37.4, Faker 10.0, Tiptap 3.3, RxDB 16.18…