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. I created a small QQ discussion group 598022684 — feel free to join for 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 17, 2025, Sunday.
This Tuesday I celebrated my 24th birthday. Looking back, it’s quite emotional — I can’t believe I’m already 24. In the blink of an eye, my younger sister has finished her college entrance exam and is starting university. Time really does fly.
This week’s content is lighter, but still enough, so I didn’t merge it into a biweekly issue.
Ecosystem & Community Updates
No major moves this week, so here are some interesting articles and events I care about~
- The Rstack family has a new member: RSLint released, in experimental stage, powered by typescript-go.
- GitHub CEO Thomas Dohmke announced his resignation to start a new venture, serving until the end of 2025. GitHub will be folded into Microsoft and no longer operate independently. Auf Wiedersehen, GitHub
- Microsoft shutting down the 12-year-old Microsoft Lens: Microsoft announced it will gradually shut down its 12-year-old document scanning app Microsoft Lens starting September 15, 2025, with plans for its AI assistant Copilot to take over.
- Rsdoctor 1.2 released: Bundle size at a glance: Rsdoctor 1.2 adds aggregated module size analysis, Gzip compression display, Rsdoctor MCP, and enhanced Treemap visualization.
- Google released Gemma-3-270M, an ultra-small multimodal model, suitable for edge and low-resource scenarios.
- Chrome 140 Beta | Blog | Chrome for Developers: Chrome 140 Beta introduces CSS typed arithmetic, HTTP Cookie prefixes, and other new features, while optimizing view transitions and local network access restrictions.
Articles & Videos
-
What we learned from creating PostCSS: Andrey Sitnik shares lessons learned from 12 years of creating and maintaining the PostCSS open-source project.
-
The “Death and Rebirth” of Open-Source Projects - Yunyou: Exploring from a developer’s perspective how to extend the lifecycle of open-source projects through community operations, decision optimization, and long-term thinking, while accepting project iteration and replacement gracefully.
-
Ultra-Short: History of Apple System Migrations - Bilibili: A very long post from the host — recommended reading, very interesting!
-
CSS @container scroll-state Container Scroll Queries: Explains new CSS
@container scroll-statescroll container query techniques, showing how to respond with styles and interactions based on container scroll state. -
How to style a broken image: CSS tip on how to elegantly handle styling and placeholders for failed image loads.
-
Context Engineering Techniques Anyone Can Use: This article targets everyday users, distilling practical “context engineering” techniques: improving AI effectiveness and efficiency by streamlining conversations and tasks, proactively providing key information, and leveraging Agents to choose suitable models, provide tools, and plan first.
-
How I record, edit, and publish YouTube videos: Stefan Judis shares his complete workflow for making YouTube tech videos in detail, covering everything from topic selection, code preparation, recording (Screenflow, Keynote), editing (Descript) to hardware equipment and practical tips.
-
Podcast: PythonHunter Ep 56. Conversation with Hawstein: From Indie Development to Seeking Life’s Meaning: A long conversation with Hawstein, author of “Five Years as an Independent Creator,” covering the cost of freedom and existentialist topics. Starting from indie development, discussing life planning and the search for meaning.
In this episode, we invited Hawstein, the author of “Five Years as an Independent Creator.” Starting from indie development, we talked about a lot of reflections on ourselves and the times. After six years of making PythonHunter, this is personally (laike9m) my favorite episode, and I hope everyone enjoys it too. Keywords for this episode: Indie Development / Life Planning / Modernity & Division of Labor / Side Projects / Open Source / The Cost of Freedom / Existential Crisis / Tech Optimism / Reflections on Death
I really liked this podcast episode — very thought-provoking.
CSS New Features
- A gentle introduction to anchor positioning: CSS anchor positioning lets elements automatically layout based on another element’s position, simplifying responsive menus and tooltips.
Several excellent articles about CSS attr():
-
How to use attr() in CSS for columns, colors, and font size: Advanced examples demonstrating attr() usage in column layouts, colors, and font sizes, with related resource recommendations.
-
CSS attr() now supports types: Amit Merchant provides a great tutorial overview of how to use types in
attr(), demonstrating how convenient it is for setting width and background values. -
una.im | What’s new with attr(): CSS’s
attr()function has gained new type conversion capabilities, allowing HTML attribute values to be used directly as colors, numbers, and other types in styles without JavaScript. -
CSS attr() has been upgraded | Chrome for Developers: Chrome team’s official detailed explanation of the attr() upgrade background and practice, with systematic coverage of type support, usability, and example code.
This issue’s CodePen Spark#464 is themed around CSS attr().
Tools & Library Updates
-
CSS-Questions | CSS-Tricks: Sunkanmi Fafowora launched the CSS-Questions website, offering 100+ questions and a comprehensive 20-question speed test to check your CSS knowledge.
-
self.so: Turn your resume into a publishable personal website with one click. Upload a resume PDF, get it reviewed by Llama Guard and parsed by Qwen 2.5 to generate a site. Built on Next.js, Clerk, S3, Upstash. Open source, deployable on Vercel.
-
RSS Anything: Convert website link lists into RSS feeds using Diffbot’s Extract API.
-
Tiny Helpers: A collection of online tools for developers and designers. Covers hundreds of tools for colors, CSS, images, icons, performance, accessibility, APIs, and more, browseable by name or date.
-
Online CSS Analyzer - Project Wallace: Project Wallace maintains a set of CSS tools — enter a URL to analyze the current CSS codebase. Highly recommended!
-
Liquid Glass | Cubiq: Another interactive “liquid glass” filter and drag effect demo. Experience fluid-textured UI interactions through background filters and drag handles.
-
Repetition Image Animation: In this GSAP-driven demo, a hallway photo stretches into a series of psychedelic hall-of-mirrors effects. Toggle different variants and see what happens on click and drag.
-
Omnara AI Supervisor: An open-source AI agent “task control panel” for real-time monitoring and interaction on mobile/web (notifications, Q&A, remote launch), supporting Claude/Cursor/Copilot and more, with SDK, MCP/REST interfaces, and iOS/Web clients.
-
Defuddle: A tool for extracting and cleaning main content from web pages, designed to provide readable and structured content for further processing or Markdown conversion.
-
KittenTTS: KittenTTS is an ultra-lightweight (25MB, no GPU required) English text-to-speech model that runs on any device with impressive results. English only.
Deep Dives
What We Learned from Creating PostCSS
What we learned from creating PostCSS
This article felt really interesting, so I’m noting it down briefly.
AI Summary: This is a 12-year retrospective of PostCSS’s evolution: from Autoprefixer’s birth to PostCSS becoming open-source infrastructure adopted by Google, Wikipedia, Tailwind, and others, with 400 million monthly downloads. The author covers product positioning, plugin strategy, performance architecture, version evolution, community and ecosystem, coexisting with competitors, and preventing maintainer burnout, offering a reusable methodology spanning frontend toolchain development and open-source operations: prioritize user usability, win performance through architecture, reduce configuration through defaults, foster collaboration through personal touch, and stabilize ecosystems through incremental changes.
Lessons the author learned:
Lesson -1: Be more collaborative with your big customers. At minimum, give them the opportunity to send you pull requests with prototypes. Lesson 0: Don’t forget to allocate plenty of time for writing documentation and promoting your open-source project. Also, don’t hesitate to directly contact potential customers to suggest they use your library.
Invest as much time in README and outreach as in writing code. Proactively recommending Webpack use PostCSS as its parser drove critical growth.
Lesson 1: Balance between plugins and built-in features. If you have plugins, provide a complete out-of-the-box solution for most users. Only those with unique needs should need to disable/enable plugins.
By default, PostCSS doesn’t do anything. To make it do any work, you need to add a specific plugin. This approach has two problems: people don’t like making choices, and most projects need the same functionality anyway. So PostCSS users always complained about struggling with this huge plugin list without knowing what they needed. Compare this with the amazing Lightning CSS, which already has essential features built in (like polyfills, bundling, and minification), and only needs plugins for specific use cases. This reminds me of a good practice in Ruby on Rails: convention over configuration. Suggest some defaults for users; don’t ask them to define everything.
Lesson 2: Don’t be afraid it’s too late. Chrome stopping prefix additions and the announcement of CSS Houdini never made Autoprefixer and PostCSS lose their value; actual landing speed and effectiveness are what the market tests. Build prototypes quickly, look at real results, and don’t get swayed by “new tech will replace everything” narratives.
Lesson 3: For performance, architecture matters more than programming language.
PostCSS written in JS was 4x faster than Sass written in C. Not because JS is a better programming language, but because of better architecture and memory management. The JS community is poisoned by hype, and big companies frequently use it. So we all think in simplistic black-and-white concepts like “C is faster than JS” or “everything in Rust is faster.” Lightning CSS written in Rust is faster than PostCSS (and overall, it’s an excellent tool). That said, I believe this is because Devon Govett was able to further improve the architecture and memory control, not just by rewriting the same algorithms from JS to Rust. I particularly want to emphasize the importance of memory management in performance. For example, CSSTree, also written in JS, was about 1.5x faster than PostCSS at the time, mainly through cleverly reusing objects to minimize garbage collector calls.
Lesson 4: Avoid burnout by ensuring problems don’t recur The best ways to prevent problems:
- Add types to prevent incorrect API usage.
- Add additional JS code to check API usage.
- Adding documentation should always be the last step, since many users don’t read documentation. But often it’s the only option.
Lesson 5: Deprecate in the first major version, remove in the next major version
The best approach for major API changes is the tick-tack method:
- In the first major version, mark the API as deprecated.
- Then only remove this API in the next major version.
Lesson 6: Provide best practices that shape the ecosystem
Use guides, examples, and templates to promote good practices and discourage bad ones. Don’t assume people will discover all best practices on their own!
Don’t forget, examples in documentation aren’t just illustrations — they shape habits in the community. Use them wisely!
Lesson 7: Become friends with your competitors
In open source, we all work for free, and any new “competitor” can save you from spending your own time supporting people for free.
Lesson 8: The human touch matters for community
- Human bonds: Sending postcards/stickers to plugin authors, visiting active contributors during travel, building real connections.
- Brand style: Autoprefixer’s “knight” and PostCSS’s “alchemy” themes make projects more fun and easier to build cultural identity around.
Finally, some “controversial” tips for open-source maintainers.
- Go build-free when possible: Libraries should use native JS source code with handwritten .d.ts or TypeDoc, making it easy to install branches for testing and instant debugging by copying from node_modules.
- Don’t use React for static sites: Project documentation and websites should use Astro or plain static HTML — lower maintenance cost and more stable.
Done ovo
喜欢的话，留下你的评论吧～