
In August 2025, frontend development kept moving forward with steady improvements across different areas. AI tools became more common in development workflows. React continued to evolve with better patterns for building components. Performance optimization got more attention, with teams focusing on bundle sizes and loading times. CSS added new features that made styling more practical. Security became a regular part of the development process rather than an afterthought.

This report covers the main changes and tools that developers were working with during the month, based on real-world usage and practical implementations.

## React & frontend frameworks

React continued evolving with better patterns for component architecture and server-side rendering, while other frameworks introduced new capabilities.

### [React cache: It's about consistency](https://twofoldframework.com/blog/react-cache-its-about-consistency)

React's cache function guarantees consistency across RSC renders, preventing UI tearing and ensuring predictable output in data-intensive applications.

### [React query selectors supercharged](https://tkdodo.eu/blog/react-query-selectors-supercharged)

Advanced React Query optimization using select option for fine-grained subscriptions, type-safe abstractions, and memoization techniques for expensive transformations.

### [Server and client component composition](https://aurorascharff.no/posts/server-client-component-composition-in-practice/)

Effective patterns for combining React Server and Client Components, maintaining clear responsibilities while optimizing performance with Suspense.

### [Phoenix LiveView 1.1 released!](https://www.phoenixframework.org/blog/phoenix-liveview-1-1-released)

Phoenix LiveView 1.1 introduces function components for portals, transitions from Floki to LazyHTML for better CSS selector support, and framework improvements.

### Quick links

- [React community reflections](https://leerob.com/reflections) - Personal reflections on nearly 10 years in React community
- [MultiTerm Astro theme](https://multiterm.stelclementine.com/) - Custom Astro theme for developer blogs
- [XMLUI: A new approach to UI development](https://blog.jonudell.net/2025/07/18/introducing-xmlui/) - XML-based markup with AI assistance
- [The joy of mixing custom elements, Web components, and Markdown](https://deanebarker.net/tech/custom-elements-markdown/) - Integrating Custom Elements with content authoring

## Performance optimization

Teams spent more time on performance, looking at bundle sizes and loading speeds.

### [How Polymarket.com reached a 9 MB bundle size](https://www.catchmetrics.io/blog/nextjs-how-polymarketcom-reached-a-9-mb-bundle-size-and-what-you-can-do-to-avoid-it)

Real-world analysis of Next.js bundle bloat causes reveals systematic patterns in inefficient imports, barrel files, and wildcard exports affecting Core Web Vitals.

### [Unlocking web workers with React](https://www.rahuljuliato.com/posts/react-workers)

Practical guide to maintaining UI responsiveness during heavy computations using Web Workers and Shared Workers for cross-tab communication.

### [Frontend performance checklist](https://crystallize.com/blog/frontend-performance-checklist)

Comprehensive guide covering HTML, CSS, and JavaScript optimization techniques for modern web applications and performance monitoring.

### Quick links

- [How we made JSON.stringify more than twice as fast](https://v8.dev/blog/json-stringify) - V8 team performance improvements for core JavaScript
- [Make any website load faster with 6 lines of HTML](https://www.docuseal.com/blog/make-any-website-load-faster-with-6-lines-html) - Speculation Rules API for instant navigation
- [Complex iterators are slow](https://caolan.uk/notes/2025-07-31_complex_iterators_are_slow.cm) - Performance analysis of JavaScript iterator limitations
- [Fine-tuned small LLMs can beat large ones](https://www.tensorzero.com/blog/fine-tuned-small-llms-can-beat-large-ones-at-5-30x-lower-cost-with-programmatic-data-curation/) - AI optimization with significant cost reductions

## Modern web technologies (HTML/CSS/JavaScript)

HTML, CSS, and JavaScript evolved with new features and better browser support, making web development more powerful and accessible.

### [5 useful CSS functions using @function](https://una.im/5-css-functions/)

Practical applications of CSS @function rule including negation, opacity variants, fluid typography, conditional border-radius, and responsive layout functions.

### [Creating 3D worlds with HTML and CSS](https://keithclark.co.uk/articles/creating-3d-worlds-with-html-and-css/)

Guide to building 3D environments using CSS 3D transforms, covering object construction, lighting, shadows, and collision detection.

### [To infinity… but not beyond!](https://meyerweb.com/eric/thoughts/2025/08/20/to-infinity-but-not-beyond/)

Analysis of CSS infinity value handling across browsers, showing inconsistent computed values and implications for responsive design.

### [A friendly introduction to SVG](https://www.joshwcomeau.com/svg/friendly-introduction-to-svg/)

Comprehensive guide to SVG animation and graphics, covering stroke-dashoffset animations, pathLength attributes, Bézier curves, and modern CSS integration for creating interactive web graphics.

### [Logical assignment operators in JavaScript](https://allthingssmitty.com/2025/07/28/logical-assignment-operators-in-javascript-small-syntax-big-wins/)

ES2021 logical assignment operators (||=, &&=, ??=) with practical examples for conditional assignments and default value handling.

### Quick links

- [Take the State of HTML survey today](https://web.dev/blog/state-of-html-2025?hl=en) - Community-driven web platform evolution
- [HTML is dead, long live HTML](https://acko.net/blog/html-is-dead-long-live-html/) - Rethinking DOM architecture from first principles
- [Safe JSON in script tags](https://sirre.al/2025/08/06/safe-json-in-script-tags-how-not-to-break-a-site/) - Secure JSON embedding techniques
- [Lazy Brush JavaScript library](https://lazybrush.dulnan.net/) - Drawing library for smooth curves and straight lines

## Security

Security considerations became integrated into development workflows, influencing architectural decisions.

### [Passkey login bypassed via WebAuthn manipulation](https://www.securityweek.com/passkey-login-bypassed-via-webauthn-process-manipulation/)

Security research demonstrating passkey bypass through WebAuthn process manipulation, highlighting vulnerabilities in biometric authentication systems.

### [GraphQL vs tRPC: Architectural showdown](https://metaduck.com/trpc-versus-graphql/)

Comparative analysis of GraphQL and tRPC security implications, emphasizing client-side query customization and long-term scalability advantages.

### [Leaving Playwright for CDP](https://browser-use.com/posts/playwright-to-cdp)

Migration from Playwright to Chrome DevTools Protocol for improved browser automation with enhanced cross-origin iframe support and security.

### [npm supply chain attacks and security](https://socket.dev/blog/npm-is-package-hijacked-in-expanding-supply-chain-attack)

Analysis of expanding npm supply chain attacks, including malicious package hijacking, credential theft, and the need for dependency scanning tools to protect JavaScript/TypeScript applications.

### Quick links

- [Safe JSON in script tags](https://sirre.al/2025/08/06/safe-json-in-script-tags-how-not-to-break-a-site/) - Secure JSON embedding techniques in HTML
- [stylish bugs](https://flak.tedunangst.com/post/stylish-bugs) - Analysis of coding style effectiveness in preventing bugs
- [Beyond booleans](https://overreacted.io/beyond-booleans/) - Comparison of Boolean types in TypeScript versus Prop types
- [Traps to developers](https://qouteall.fun/qouteall-blog/2025/Traps%20to%20Developers) - Comprehensive catalog of development pitfalls

## Developer tools

Development tools and workflows kept getting better.

### [Baseline support in IntelliJ IDEs](https://web.dev/blog/baseline-digest-jul-2025)

Integration of Baseline compatibility tracking in JetBrains IDEs for CSS, HTML, and JavaScript features with hover cards and inheritance support.

### [Baseline for CSS properties in DevTools](https://web.dev/blog/baseline-devtools-css)

Chrome DevTools integration of Baseline status for CSS properties with compatibility levels and interoperability dates in Elements panel.

### [Modern testing frameworks](https://testing-library.com/docs/)

Comparison of testing frameworks including Vitest, Jest, and Playwright for comprehensive frontend testing strategies and developer experience.

### [Writing your tests in EDN files](https://biffweb.com/p/edn-tests/)

Innovative approach to unit testing using EDN files instead of traditional test runners, featuring snapshot testing, REPL integration, and automated test result generation for ClojureScript/JavaScript development workflows.

### Quick links

- [Microsoft releases TypeScript 5.9](https://www.infoq.com/news/2025/08/typescript-5-9-released/) - Enhanced module resolution and developer experience
- [Pywebview 6.0 release](https://pywebview.flowrl.com/blog/pywebview6.html) - Powerful state management for desktop applications
- [Baseline for CSS properties now in Chrome DevTools](https://web.dev/blog/baseline-devtools-css) - Compatibility tracking in Elements panel
- [Writing your tests in EDN files](https://biffweb.com/p/edn-tests/) - Innovative testing approach with snapshot testing

## AI in frontend development

AI tools became more integrated into frontend development workflows, offering new capabilities for building user interfaces and enhancing developer productivity.

### [AI SDK 5: Multi-framework AI integration](https://www.producthunt.com/products/vercel?launch=ai-sdk-5)

Vercel launches AI SDK 5 with fully typed chat integration for React, Svelte, Vue, and Angular frameworks, enabling developers to build AI-powered applications across popular frontend ecosystems.

### [Complex agentic coding with Copilot: GPT-5 vs Claude 4 Sonnet](https://elite-ai-assisted-coding.dev/p/copilot-agentic-coding-gpt-5-vs-claude-4-sonnet)

GPT-5 shows 35% better performance in complex TypeScript refactoring, supporting autonomous coding workflows that challenge traditional development approaches.

### [Convo - Chat insights](https://www.producthunt.com/products/chat-insights)

React + TypeScript application for SMS conversation analysis with AI-powered sentiment analysis, topic identification, and smart reply suggestions, emphasizing local data privacy.

### Quick links

- [My AI co-pilot deleted my production database](https://cybercorsairs.com/my-ai-co-pilot-deleted-my-production-database/) - Cautionary tale about AI development assistant risks
- [The current state of LLM-driven development](https://blog.tolki.dev/posts/2025/08-07-llms/) - Analysis of AI coding tools and their practical applications
- [Codex upgrade](https://simonwillison.net/2025/Aug/11/codex-upgrade/) - OpenAI Codex CLI updates and model improvements
- [Anthropic open-sources tool to trace LLMs](https://www.infoq.com/news/2025/06/anthropic-circuit-tracing/) - Understanding LLM internal behavior

---

_This report synthesizes insights from 15 data sources covering August 1-31, 2025, analyzing 2,800+ articles focused on frontend and web development trends, technologies, and patterns._


August 2025 frontend developments covering React ecosystem updates, performance optimization techniques, modern web technologies, security practices, developer tooling improvements, and AI integration in frontend workflows.

Frontend Web Development in August 2025

Frontend report August 2025

Technical analysis of E2B, a cloud infrastructure platform that runs AI-generated code in secure, isolated sandboxes using lightweight virtual machines that start in under 200ms.

E2b breakdown


**Industry**

AI-powered tools forsocial media marketers

**Location**

United States

**Business context**

AI startup needed a robust data pipeline to process millions of social media posts for competitive intelligence

**Solution**

Built a scalable cloud-native pipeline processing 100,000+ posts daily with AI-powered content analysis

**Outcome**

Delivered a mission-critical system that became the client's core strategic advantage, enabling faster insights and business growth

**Our services**

Fullstack Development / Cloud Infrastructure / AI Integration / Data Engineering

## Technical highlights

- **Backend**: NestJS with Prisma ORM for type-safe database operations and modular architecture
- **Cloud infrastructure**: Google Cloud Platform with Scheduler and Cloud Tasks for distributed processing
- **AI integration**: Multiple LLM models for intelligent content analysis
- **Data storage**: PostgreSQL for structured data, Elasticsearch for search and analytics indexing
- **Queue system**: Cloud Tasks for reliable distributed processing with automatic retries and failure handling
- **APIs**: Social media APIs and search APIs for comprehensive data extraction

## What we did

The client leverages AI to revolutionize knowledge sharing and team collaboration. They engaged us for engineering development to build a mission-critical social listening pipeline capable of tracking millions of social media conversations and providing organizations with AI-powered competitive intelligence insights.

We provided fullstack engineering support to work alongside their core development team. The pipeline processes an average of 100,000 posts per day from multiple social platforms, along with the top 100 comments per post every hour.

![](assets/plot-1.webp)

## The challenge

The client needed to track millions of social media conversations to provide organizations with AI-powered competitive intelligence. The system had to handle massive scale reliably while integrating multiple AI models cost-effectively.

Key challenges included:

- **Scale and reliability**: Handle 100,000+ posts daily with consistent uptime
- **AI integration complexity**: Seamlessly integrate multiple LLM models while managing costs
- **Real-time processing**: Deliver timely insights for competitive advantage
- **Data consistency**: Ensure accurate processing across diverse social platform APIs
- **Cost optimization**: Balance performance requirements with infrastructure expenses

Working with a fast-growing AI startup meant embracing rapid iteration while building for enterprise scale alongside their existing team.

## How we built it

We collaborated with the client's team on a scalable, reliable data pipeline with intelligent AI integration. Our approach emphasized proven cloud-native patterns while incorporating cutting-edge AI capabilities.

![](assets/plot-2.webp)

### Technical approach

**Decoupled queue-based architecture**: The system was designed around four key principles:

- Decoupled task distribution using Google Cloud Tasks for independent scaling
- Flexible scheduling with GCP Scheduler for different content refresh rates
- Modular processing stages (collection, parsing, enrichment, indexing)
- Separated data storage: PostgreSQL for structured data, Elasticsearch for search

**Multi-stage data processing**: The core pipeline follows an ETL pattern optimized for social media:

- **Extract**: Fetches data from social media APIs with rate limiting
- **Transform**: Pre-processing, parsing (topics, creators, posts, comments), post-processing (enrichment, engagement scoring)
- **Load**: Stores structured data in PostgreSQL, indexes searchable content in Elasticsearch

**AI-powered content analysis**: Multiple LLM models were integrated for intelligent analysis, optimizing for different content types and cost considerations while delivering high-quality insights including content transcription, sentiment analysis, and contextual understanding.

### How we collaborated

Working alongside the client's team required close coordination and clear communication channels:

- Daily standups to align on progress and address challenges
- Weekly demos for progress visibility and feedback
- Iterative development cycles with regular staging deployments
- Comprehensive monitoring and alerting from day one

When scalability issues arose with initial API implementations, we collaborated to evaluate alternatives and migrate to more cost-effective and reliable solutions.

## What we achieved

The collaboration delivered a transformative social listening platform that became central to the client's business strategy. The pipeline processes social media content at enterprise scale while providing AI-powered insights.

![](assets/plot-3.webp)

The platform enabled enterprise clients to:

- **Track brand performance**: Monitor mentions and sentiment across platforms with real-time updates
- **Benchmark against competitors**: Access comparative analysis and competitive intelligence
- **Spot trends faster**: Leverage AI insights from automated analysis of multimedia content
- **Make data-driven decisions**: Use comprehensive reports to optimize marketing strategies

Key technical achievements:

- **Distributed processing**: Handles 100,000+ posts daily with automatic retries via Cloud Tasks
- **Flexible scheduling**: Configurable update intervals for different platforms and content types
- **Multi-model AI integration**: Contextual insights while optimizing costs across LLM providers
- **Scalable storage**: Separation between transactional data and search-optimized indexing
- **Comprehensive observability**: Structured logging enables proactive performance optimization

The pipeline's success enabled the client to expand their enterprise customer base while providing increasingly sophisticated insights. The enriched social data became a key driver for improving their AI recommendations.

This project demonstrates how strategic technical collaboration can support a startup's core value proposition. By contributing to a robust, scalable pipeline handling millions of social interactions, we helped establish a strong foundation for continued growth in the competitive AI insights market.


We partnered with Plot to build a robust data pipeline that processes millions of social media posts daily, providing AI-powered insights into brand performance.

Plot

Building a scalable social listening data pipeline


June 2025 brought significant changes to frontend web development. This report covers the widespread adoption of AI coding tools, new CSS conditional logic features, browser updates with AI integration, React Server Components in production, TypeScript's native Node.js support, and improved development workflows.

## ⚛️ React & Next.js highlights

React continues its evolution with Server Components maturation and Next.js advancing as the de facto React framework.

### Featured articles

**[React for Two Computers](https://overreacted.io/react-for-two-computers/)** - Dan Abramov explores distributed computation across computers, introducing 'potential calls' for function execution blueprints.

**[Composing Server and Client Components: The Modern React's Superpower](https://www.epicreact.dev/composing-server-and-client-components-the-modern-reacts-superpower-08yn9)** - Epic React content on composing server and client components in modern React.

**[How Anthropic Built Artifacts: From Prototype to Production](https://substack.com/redirect/3aadff47-6c7b-49a7-93a6-375cfd303556?j=eyJ1IjoiNWx6em5yIn0.zAloiaZgZdAPGbzRdXb7VqsWefBYaHLaT1qoj5HggaY)** - Technical deep-dive covering React, Node.js, and secure sandboxing.

**[React Community 2025](https://blog.isquaredsoftware.com/2025/06/react-community-2025/)** - Analysis of React's evolution from library to framework-focused approach.

### Quick links

- [Next.js + React Router Template](https://nexfaster.rdsx.dev/) - Minimal template for React Router integration
- [Prefetching - Next.js Documentation](https://nextjs.org/docs/app/guides/prefetching) - Official guide to Next.js prefetching strategies
- [Composable streaming with Suspense](https://twofoldframework.com/blog/composable-streaming-with-suspense) - Performance optimization with React Suspense
- [The Two Reacts](https://overreacted.io/the-two-reacts/) - Splitting React components across different programming environments while preserving React benefits.
- [RSC for LISP Developers](https://overreacted.io/rsc-for-lisp-developers/) - Exploring parallels between React Server Components and LISP's quoting concept.

## 🎨 CSS features & Web standards

June 2025 introduced new CSS features and web platform updates that affect how we build interfaces.

### Featured articles

**[Lightly Poking at the CSS if() Function in Chrome 137](https://css-tricks.com/lightly-poking-at-the-css-if-function-in-chrome-137/)** - MAJOR: CSS gets true conditional logic with the new `if()` function in Chrome 137.

**[What's New in Web Layout: Anchor Positioning and Popover API in Safari](https://developer.apple.com/videos/play/wwdc2025/233/)** - Safari introduces Anchor Positioning CSS and Popover API for precise layouts.

**[Declarative Web Push](https://developer.apple.com/videos/play/wwdc2025/235/)** - Web Push evolution allowing JSON-declared notifications, reducing JavaScript dependency.

**[A Guide to Scroll-Driven Animations with Just CSS](https://webkit.org/blog/17101/a-guide-to-scroll-driven-animations-with-just-css/)** - WebKit implements scroll-driven animations with `animation-timeline` and `animation-range`.

**[Revisiting CSS contrast-color(): What's New?](https://css-tricks.com/exploring-the-css-contrast-color-function-a-second-time/)** - Updated look at CSS contrast-color() function for accessibility.

**[Better CSS Shapes Using shape() — Part 2: More on Arcs](https://css-tricks.com/better-css-shapes-using-shape-part-2-more-on-arcs/)** - Advanced CSS shape() function techniques.

### Quick links

- [CSS Spotlight Effect](https://frontendmasters.com/blog/css-spotlight-effect/) - Dynamic spotlight effects with mobile support
- [New to the web platform in May](https://web.dev/blog/web-platform-05-2025?hl=en) - Google's monthly web platform updates
- [State of CSS 2025 Survey](https://survey.devographics.com/en-US/survey/state-of-css/2025) - Track CSS feature adoption
- [Liquid Glass, But In CSS](https://atlaspuplabs.com/blog/liquid-glass-but-in-css) - Creating liquid glass effects with SVG filters
- [Color Everything in CSS](https://css-tricks.com/color-everything-in-css/) - Comprehensive guide to CSS color systems

## ⚡ TypeScript & JavaScript advancements

JavaScript celebrates its 30th anniversary while TypeScript reaches new performance milestones.

### Featured Articles

**[Node.js 23.6 with Native TypeScript Support](https://nodejs.org/en/blog/announcements/node-18-eol-support)** - Node.js now executes TypeScript natively without build steps.

**[Directive prologues and JavaScript dark matter](https://simonwillison.net/2025/Jun/2/directive-prologues-and-javascript-dark-matter/)** - Simon Willison explores JavaScript's meta-language features and V8 compile hints.

**[Write more reliable JavaScript with optional chaining](https://allthingssmitty.com/2025/06/02/write-more-reliable-javascript-with-optional-chaining/)** - Practical guide to optional chaining for safer property access.

**[A JavaScript Developer's Guide to Go](https://prateeksurana.me/blog/guide-to-go-for-javascript-developers/)** - JavaScript developers transitioning to Go for performance gains.

**[Gleam JavaScript gets 30 percent faster](https://gleam.run/news/gleam-javascript-gets-30-percent-faster/)** - Alternative language compilation to JavaScript with major performance improvements.

### Quick links

- [Beware of End-of-Life Node.js Versions](https://nodejs.org/en/blog/announcements/node-18-eol-support) - Node.js 18 EOL, upgrade to Node.js 22
- [npm audit broken by design](https://overreacted.io/npm-audit-broken-by-design/) - Dan Abramov's critique of npm security reports

## 🛠️ Development tools & workflow

Development tooling continues to evolve with AI integration and performance improvements.

### Featured articles

**[50 Years of Microsoft and Developer Tools with Scott Guthrie](https://newsletter.pragmaticengineer.com/p/50-years-of-microsoft)** - 28-year Microsoft veteran shares evolution from Visual Basic to VS Code and GitHub.

**[Why are cloud development environments spiking in popularity now](https://newsletter.pragmaticengineer.com/p/why-are-cloud-development-environments-spiking-in-popularity-now)** - Analysis of cloud dev environment adoption drivers.

**[Introducing our Dev Mode MCP server: Bringing Figma into your workflow](https://www.figma.com/blog/introducing-figmas-dev-mode-mcp-server/?utm_source=tldrdesign)** - Figma's beta MCP server integrates design context into developer workflows.

**[Biome v2—codename: Biotype](https://biomejs.dev/blog/biome-v2/)** - First JavaScript linter with type-aware rules and plugin support.

**[Stop Losing Sleep Over Node.js Config: Here's How to Get It Right](https://blog.platformatic.dev/stop-losing-sleep-over-nodejs-config-heres-how-to-get-it-right)** - Comprehensive Node.js configuration management guide.

### Quick links

- [HMR natively in Node.js](https://immaculata.dev/blog/native-nodejs-hmr.html) - Hot Module Replacement using Node's built-in hooks
- [Industry standard API mocking for JavaScript](https://mswjs.io/) - Mock Service Worker for client-agnostic mocks
- [Context7: Up-to-date documentation for LLMs](https://context7.com/) - Documentation platform optimized for AI code editors
- [GUItignore](https://gitignore.0x00.cl/) - Web tool for generating .gitignore files

## 🚀 AI-assisted development

AI-powered development tools gained widespread adoption in June 2025, changing how developers write code.

### Featured Articles

**[Revenge of the Junior Developer](https://sourcegraph.com/blog/revenge-of-the-junior-developer)** - Analysis of how AI agents will change software development productivity, creating a landscape where AI budget becomes competitive advantage.

**[Beyond Vibe Coding by Addy Osmani](https://substack.com/redirect/87272e0a-c527-43fb-a64e-de42970d5044?j=eyJ1IjoiNWx6em5yIn0.zAloiaZgZdAPGbzRdXb7VqsWefBYaHLaT1qoj5HggaY)** - Google's Addy Osmani discusses prompt-first AI-assisted programming and its implications for professional developers.

**[Vibe coding as a software engineer](https://newsletter.pragmaticengineer.com/p/vibe-coding-as-a-software-engineer)** - The Pragmatic Engineer explores "vibe coding" methodology beyond prototyping into professional development.

**[Microsoft is dogfooding AI dev tools' future](https://newsletter.pragmaticengineer.com/p/microsoft-ai-dev-tools)** - Insights from Microsoft BUILD on aggressive AI developer tools push, including Copilot and AI agents.

**[Claude Sonnet 4 Is Now in Amazon Q Developer CLI!](https://aws.amazon.com/blogs/devops/access-claude-sonnet-4-in-amazon-q-developer-cli/)** - Claude Sonnet 4 is now available in Amazon Q Developer CLI for free.

**[Anthropic co-founder on cutting access to Windsurf](https://ben-evans.us6.list-manage.com/track/click?u=b98e2de85f03865f1d38de74f&id=a494defb21&e=774e63ac4f)** - Anthropic explains why they cut Windsurf's Claude access amid OpenAI acquisition rumors.

### Quick links

- [Introducing Anthropic's Free Interactive Prompt Engineering Course](https://substack.com/@alphasignalai/note/c-120940100?utm_source=feed-email-digest) - 9 step-by-step chapters with exercises
- [AI-Powered Coding Tool Anysphere Raises $900M at $9.9B Valuation](https://news.crunchbase.com/ai/anysphere-cursor-venture-funding-thrive/) - Cursor's massive funding round
- [Vibe coding is here to stay. Can it ever be secure?](https://cyberscoop.com/vibe-coding-ai-cybersecurity-llm/) - Security concerns about AI-generated code
- [How to get your entire team prototyping with AI](https://www.lennysnewsletter.com/p/how-to-get-your-entire-team-prototyping) - Guide to v0, Bolt, Cursor, Magic Patterns

## 🌐 Browser innovation & AI integration

The browser landscape is changing with AI-native approaches and major platform updates.

### Featured Articles

**[The Browser Company mulls selling or open sourcing Arc Browser amid AI-focused pivot](https://techcrunch.com/2025/05/27/the-browser-company-mulls-selling-or-open-sourcing-arc-browser-amid-ai-focused-pivot/)** - Browser Company considering selling Arc as they pivot to AI-powered Dia browser.

**[Perplexity teases a web browser called Comet](https://techcrunch.com/2025/02/24/perplexity-teases-a-web-browser-called-comet/)** - AI search engine Perplexity announces Comet browser, joining AI-powered browsing trend.

**[News from WWDC25: Web Technology Coming This Fall in Safari 26 Beta](https://webkit.org/blog/16993/news-from-wwdc25-web-technology-coming-this-fall-in-safari-26-beta/)** - Safari 26 beta introduces enhanced Add to Home Screen, HDR images, WebKit API for SwiftUI, and `<model>` HTML element.

**[The Dia browser is a big bet on the web — and an even bigger bet on AI](https://links.tldrnewsletter.com/C9cCOO)** - Browser Company's new approach to browser design with AI integration.

**[IE6, AI, and the future of browsing the Web](https://agenticweb.nearestnabors.com/p/ai-future-web)** - Analysis of how AI integration creates new web challenges covering economic models and security.

### Quick links

- [Dia Browser on Product Hunt](https://www.producthunt.com/posts/dia-browser) - AI browser where you can chat with tabs
- [Everyone's using Perplexity for search. I'm using Perplexity Labs to build applications](https://www.linkedin.com/posts/charlie-hills_everyones-using-perplexity-for-search-activity-7337057427919433728-E43u) - No-code app building with AI
- [Agent-based computing is outgrowing the web as we know it](https://venturebeat.com/ai/agent-based-computing-is-outgrowing-the-web-as-we-know-it/) - Machine-centric web evolution

## 🔒 Security & performance

Growing security threats and performance optimization remain critical concerns for frontend developers.

### Featured articles

**[Complex npm attack uses 7-plus layers of obfuscation to spread Pulsar RAT](https://www.scworld.com/news/complex-npm-attack-uses-7-plus-layers-of-obfuscation-to-spread-pulsar-rat?utm_source=tldrinfosec)** - Sophisticated malware distribution through npm packages using steganography.

**[Localhost Tracking Explained: It Could Be Worse Than You Think](https://www.zeropartydata.es/p/localhost-tracking-explained-it-could)** - Meta Pixel secretly tracks web activity bypassing incognito mode and VPNs.

**[Threat Modeling Guide for Software Teams](https://martinfowler.com/articles/agile-threat-modelling.html)** - Martin Fowler's comprehensive security engineering guide.

**[Getting ready to issue IP address certificates](https://community.letsencrypt.org/t/getting-ready-to-issue-ip-address-certificates/238777)** - Let's Encrypt preparing IP address certificates for production.

**[A short history of web bots and bot detection techniques](https://sinja.io/blog/bot-or-not)** - Evolution of web bots and sophisticated detection methods.

### Quick links

- [SlimImg: Privacy-Safe Image Compression](https://slimimg.tools/) - Local browser image optimization
- [Faster Dashboards with Multi-Column Approximate Sorting](https://duckdb.org/2025/06/06/advanced-sorting-for-fast-selective-queries.html) - Database query optimization
- [Comparing gzip, brotli and zstd compression in Go](https://blog.kowalczyk.info/a-5hum/compressing-for-the-browser-in-go.html) - Web compression benchmarks

## 🎯 Design & user experience

Design-to-development integration improved with AI-powered tools and acquisition activity.

### Featured articles

**[Payload joins Figma](https://www.figma.com/blog/payload-joins-figma/)** - Figma acquires Payload team to enhance developer tools and create CMS for Figma Sites.

**[The Interface Is Melting](https://www.andrewcoyle.com/blog/the-interface-is-melting?utm_source=tldrfounders)** - Analysis of how AI is dissolving traditional user interfaces toward ambient systems.

**[Snap launches Lens Studio iOS and web apps for creating AR Lenses with AI](https://techcrunch.com/2025/06/04/snap-launches-lens-studio-ios-and-web-apps-for-creating-ar-lenses-with-ai-and-simple-tools/)** - Making AR development more accessible through web-based tools.

**[Google Whisk](https://labs.google/fx/tools/whisk?ref=producthunt)** - Google's AI tool for generating images using other images as prompts.

### Quick links

- [Covolute: AI web creation on collaborative canvas](https://www.producthunt.com/posts/covolute) - AI-powered editor for visual web design
- [Mossaik: Create beautiful abstract SVG images](https://mossaik.app/) - Customizable SVG wave backgrounds
- [Formia: Stand out with a 3D logo](https://www.formia.so/) - Convert 2D logos to 3D visuals
- [The Astro UI library for building content sites](https://ui.full.dev/) - Pre-built Astro components

## 🏆 Notable mentions

**JavaScript's 30th Anniversary** - The language that powers the modern web celebrates three decades of evolution, from simple scripting to full-stack applications.

**270K Websites Compromised** - JSF-ck obfuscation technique affects hundreds of thousands of websites, highlighting supply chain security concerns.

**Node.js Native TypeScript Execution** - No more build steps required for TypeScript in Node.js 23.6, streamlining development workflows.

**GitHub's AI Agent for Bug Fixing** - Autonomous debugging and issue resolution capabilities for development automation.

## 📊 Key statistics

- **AI Investment**: Cursor raises $900M at $9.9B valuation
- **Market Growth**: Anthropic hits $3B annualized revenue
- **Security Threats**: 270K websites compromised via JSF-ck obfuscation
- **Browser Evolution**: Safari 26 beta introduces 12+ new web technologies
- **Developer Adoption**: 67% of developers now use AI coding assistants regularly
- **Funding Activity**: $2.5B+ invested in AI development tools in June 2025


June 2025 brought significant changes to frontend web development. This report covers the widespread adoption of AI coding tools, new CSS conditional logic features, browser updates with AI integration, React Server Components in production, TypeScript's native Node.js support, and improved development workflows.

Frontend Web Development in June 2025 - AI Tools and Web Platform Updates

Frontend Report June 2025


When we started working on this project aimed at the creative community, we faced an interesting challenge. We needed to build a model that was similar to a task but with a key difference: it had to support custom, dynamic, and extensible properties. If you’ve ever used Notion and appreciated how flexible its objects are, you’ll know exactly what we were trying to achieve.

## The expectation

First thing would be extensibility. This wasn’t just about adding simple text fields—we needed the model to handle various types of data, like select options, date-time values, booleans, and even custom relations to other existing models, such as users. Each and every select options should be extensible as well, allowing them to be shared across each team as a common configuration.

Another key consideration was making sure the model was easily query-able. We wanted to be able to sort and paginate through the entire dataset without hitting any roadblocks. This would ensure that as the model grows and evolves, it remains manageable and efficient to work with.

## The solution

Here’s a brief overview of what we ended up with (for presentation purposes only):

![](assets/designing-a-model-with-dynamic-properties-20240820225604474.webp)

### `tasks` table

```dbml
Table tasks {
	id string [pk]
	values string [ref: <> values.id]
}
```

We started with a very bare-bones model for tasks, which holds a many-to-many relation to the `values` table. This model doesn’t contain any data of the fields themselves; instead, it relies on the `values` table to retrieve the relevant field data.

### `fields` table

```dbml
Table fields {
	id string [pk]
	type string
	name string
	options string[] [ref: <> options.id]
}
```

The `fields` table is where the magic begins. The `type` column can be `text`, `checkbox`, `select`, `users`, etc., determining how a field's value should be extracted from `values` and how it should be handled on the front-end.

For select-type fields, options are saved through a many-to-many relation with the `options` table.

### `values` table

```dbml
Table values {
	id string [pk]
	field string [ref: > fields.id]
	text varchar
	checkbox boolean
	select string[] [ref: <> options.id]
	users string[] [ref: <> users.id]
	...
}
```

This table maps back to `fields` with a 1-to-1 relationship, using multiple columns to save a field’s value depending on its type.

### `options` table

```dbml
Table options {
	id string [pk]
	label string
	value string
}
```

Lastly, the `options` table stores the available options for select-type fields, linking each option to a field via its ID.

## The decisions

### Decision 1: Break things down into smaller models

When building an extensible object, separating the object from its fields was essential. By doing this, adding or removing fields became as simple as adding or removing a relation, allowing one task to have a completely different set of fields from another. Select options are also meant to be extensible, so we decided to move them into their own table as well.

### Decision 2: `tasks` should hold relations to `values` instead of `fields`

Another crucial decision we made was to have the `tasks` table hold relations to the `values` table rather than directly to the `fields` table. At first glance, it might seem simpler to link tasks directly to fields, but this approach would have limited the flexibility we were aiming for.

By connecting tasks to values instead, we created a system where each task can have its own unique set of values, all while using the same underlying fields. This means that different tasks can share the same field definitions but still hold different data.

Doing things this way might feel a bit counter-intuitive, in the sense that the data flows from tasks → values → fields. However, it allowed us to simplify the relationships in our model. By cutting out the many-to-many relation between tasks and fields, we made the system more efficient. When removing a field, we're actually just removing one relation from the `values` table, and the corresponding field goes away along with the value.

## The challenges

### Filtering & pagination

One of the main challenges we encountered was filtering and pagination. With our model involving multiple tables—tasks, fields, values, and options—queries often required complex joins. This setup had the potential to cause performance issues, especially as the dataset grew.

We rely heavily on Common Table Expressions (CTEs) to streamline our queries and improve performance. However, this solution still required careful management to ensure that the system remained efficient under heavy loads.

### Cross-team collaboration

Another challenge we faced was enabling cross-team collaboration. Since fields are scoped to each team, it became tricky when users needed to collaborate across different teams.

For instance, a field that exists in one team might not be present in another team where they are invited as guests. This limitation made collaboration difficult for our specific use case, as we don’t currently support a unified team workspace.

While we’ve implemented some solutions to mitigate this issue, it remains an ongoing challenge, and we’re still exploring better approaches to handle this scenario.

## Conclusion

In the end, the model we designed has been working well for our use cases, providing the flexibility and extensibility we set out to achieve. While there are still areas for improvement, particularly with cross-team collaboration, the foundation we've built offers plenty of room to grow. All in all, it’s been a fun journey, tackling challenges and finding creative solutions along the way.


When we started working on this project aimed at the creative community, we faced an interesting challenge. We needed to build a model that was similar to a task but with a key difference: it had to support custom, dynamic, and extensible properties. If you’ve ever used Notion and appreciated how flexible its objects are, you’ll know exactly what we were trying to achieve.

Designing a model with dynamic properties


## What is Local-first software?

Local-first software prioritizes storing data on the user's device, ensuring ownership, privacy, and offline functionality. It synchronizes with other devices and the cloud when possible, offering the benefits of cloud-based collaboration without the downsides of centralized data storage.

Let's take a quick look at how local-first compares to the conventional stack:

![](assets/local-first-software-20240706221930408.webp)

For a "traditional" app, the clients are a "thin" layer that depends on the servers for any read/write operations.

Local-first shifts the roles between servers and clients, making clients the primary source of data while servers act as backup and synchronization sources.

## How does it work?

Generally, local-first is enabled by two core concepts:

- **CRDTs (Conflict-free Replicated Data Types)**: These data structures allow multiple users to edit documents simultaneously, merging changes without conflicts. You can read more about CRDTs here: [Introduction to CRDT](../data/introduction-to-crdt.md).
- **Data synchronization**: Changes made offline are synced with other devices and the cloud when a connection is available.

In most cases, end-to-end encryption is required to ensure data security during synchronization.

## Why local-first?

- **Data ownership and privacy**: Users have full control over their data, reducing the risk of breaches.
- **Offline functionality**: Applications remain fully functional without internet connectivity.
- **Performance and reliability**: Local data storage enhances performance and ensures reliability even with poor or no network connections.
- **Seamless collaboration**: Enables real-time collaboration and conflict resolution without central servers.

## How does it compare to existing models?

- **Traditional file systems and email attachments**: Offer local data storage but lack real-time collaboration and seamless multi-device synchronization.
- **Cloud-based Solutions (e.g., Trello, Google Drive)**: Improve accessibility and collaboration but centralize control and expose users to data breaches and loss of access.
- **Hybrid Models (e.g., Dropbox)**: Offer local storage with cloud sync but still depend on centralized servers for data availability.

## Who is using local-first?

Popular apps that are known to adopt a local-first approach:

- [**Figma**](https://figma.com/): A design tool that supports real-time collaboration with local-first principles.
- **[Obsidian](https://obsidian.md/)**: A knowledge base that stores data locally, allowing offline access and synchronization.
- **[Notion](https://www.notion.so/)**: While primarily cloud-based, it incorporates local-first elements for offline editing and data synchronization.
- **[Linear](https://linear.app/)**: A project management tool that adopts the local-first approach, ensuring data remains accessible and synchronized across devices even without an internet connection.

## What's the catch?

- **Complexity of CRDTs**: Implementing efficient and scalable CRDTs is technically challenging.
- **Security**: Ensuring robust encryption and secure data synchronization is critical.
- **User experience**: Balancing simplicity and the benefits of local-first architecture in user interfaces.
- **Performance overhead**: Managing the performance impact of data synchronization and CRDT operations.

## References

1. [Local-first software: You own your data, in spite of the cloud (inkandswitch.com)](https://www.inkandswitch.com/local-first/)


Local-first software is an approach to software development that emphasizes data ownership, offline functionality, and real-time collaboration. This model ensures data is primarily stored on the user's device, enhancing privacy and control while enabling seamless synchronization and collaboration without relying on continuous internet connectivity

¶ Local-first software


When working with complex GraphQL schemas, it's common to have shared fields across different types. A fragment colocation pattern allows us to define fragments alongside their corresponding components, resulting in a more cohesive and maintainable codebase.

By colocating fragments, we can easily reuse them across components that share common fields, reducing redundant code and promoting consistency. This can be further enhanced by using other layers of tooling, i.e. converting fragments into Typescript interfaces or auto generating React hooks for queries & mutations.

This note aims to discuss such a pattern, made possible with:

- [React](https://react.dev/)
- [Apollo GraphQL](https://www.apollographql.com/docs/): Comprehensive state management library for JavaScript that enables you to manage both local and remote data with GraphQL. We can use it to fetch, cache, and modify application data, all while automatically updating the UI.
- [@graphql-codegen/cli](https://www.npmjs.com/package/@graphql-codegen/cli): Auto generation of typed queries, mutations, subscriptions and typed GraphQL resolvers.

First, let's step back & take a quick look at what is a fragment.

## Fragments

A [GraphQL fragment](http://graphql.org/learn/queries/#fragments) is a piece of logic that can be shared between multiple queries and mutations.

Here's the declaration of a `NameParts` fragment that can be used with any `Person` object:

```graphql
fragment NameParts on Person {
  firstName
  lastName
}
```

Every fragment includes a subset of the fields that belong to its associated type. In the above example, the `Person` type must declare `firstName` and `lastName` fields for the `NameParts` fragment to be valid.

We can now include the `NameParts` fragment in any number of queries and mutations that refer to `Person` objects, like so:

```graphql
query GetPerson {
  people(id: "7") {
    ...NameParts
    avatar(size: LARGE)
  }
}
```

You precede an included fragment with three periods (`...`), much like JavaScript [spread syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax).

Based on our `NameParts` definition, the above query is equivalent to:

```graphql
query GetPerson {
  people(id: "7") {
    firstName
    lastName
    avatar(size: LARGE)
  }
}
```

If we later *change* which fields are included in the `NameParts` fragment, we automatically change which fields are included in operations that *use* the fragment. This reduces the effort required to keep fields consistent across a set of operations.

That's it for fragment. Let's move on to how we actually implement a colocation pattern with fragments and React.

## Example: Animal cards and lists

Let's consider an example where we're building an application that showcases cats and dogs. We want to implement reusable components to display individual animal cards (`CatCard` and `DogCard`) as well as lists of animals (`CatList` and `DogList`).

For backend, let's say we are using [NestJS](https://nestjs.com/). The schema consists of the following types:

```ts
interface AnimalModel {
  id: string;
  name: string;
  bread: string;
}

interface CatModel extends AnimalModel {
  age: number;
}

interface DogModel extends AnimalModel {
  weight: number;
}
```

We'll define fragments for the shared fields (`id`, `name`, and `breed`) within the `AnimalModel` type, and define two other fragments for cat & dog that extend from the animal fragment:

```jsx
import { gql } from "@apollo/client";

const ANIMAL_FRAGMENT = gql`
  fragment AnimalFragment on AnimalModel {
    id
    name
    breed
  }
`;

const CAT_FRAGMENT = gql`
  fragment CatFragment on CatModel {
    ...AnimalFragment
    age
  }
  ${ANIMAL_FRAGMENT}
`;

const DOG_FRAGMENT = gql`
  fragment DogFragment on DogModel {
    ...AnimalFragment
    weight
  }
  ${ANIMAL_FRAGMENT}
`;
```

By this point, we are still missing something until we can build the `CatCard` and `DogCard` components - the Typescript types.

With `@graphql-codegen/cli`, we can convert these fragments into Typescript interfaces by running a CLI script. I will not go into details into how the tool work so you should also give [Home – GraphQL Code Generator (the-guild.dev)](https://the-guild.dev/graphql/codegen) a look - they provide an interactive example.

Basically `@graphql-codegen/cli` will:

- Call our GraphQL backend to fetch the schema
- Scan our codebase for query, mutation and fragment definitions to convert
- Put the output into a file that we have specified

After running the CLI, the typing output will look like below:

```ts
// Output file: graphql/generated.ts

export type AnimalFragment {
	__typename?: 'AnimalModel';
	id: Scalars['String'];
	name: Scalars['String'];
	bread: Scalars['String'];
}

export type CatFragment {
	__typename?: 'CatModel';
	id: Scalars['String'];
	name: Scalars['String'];
	bread: Scalars['String'];
	age: Scalars['Int'];
}

export type DogFragment {
	__typename?: 'DogModel';
	id: Scalars['String'];
	name: Scalars['String'];
	bread: Scalars['String'];
	weight: Scalars['Int'];
}
```

Now that we have everything we need, let's build the `CatCard` and `DogCard` components:

```ts
import { CatFragment } from "graphql/generated";

// const ANIMAL_FRAGMENT = gql`...`

// const CAT_FRAGMENT = gql`...`

// const DOG_FRAGMENT = gql`...`

const CatCard = (props: { cat: CatFragment }) => {
  const { cat } = props;

  // Component rendering logic
};

const DogCard = (props: { cat: DogFragment }) => {
  const { cat } = props;

  // Component rendering logic
};
```

The properties `cat` and `dog` will have the types we have defined for the fragments they are actually using - an exact map from GraphQL models to Typescript types that we can be sure will always be accurate as long as the fragments we define match the schema from GraphQL backend.

Next, let's build the `CatList` and `DogList` component and see how we handle queries. Let's defined 2 queries to get cats and dogs:

```ts
// ... import needed stuff
import { gql } from "@apollo/client";

gql`
  query GetCatList {
    cats {
      ...CatFragment
    }
  }
  ${CAT_FRAGMENT}
`;

gql`
  query GetDogList {
    dogs {
      ...DogFragment
    }
  }
  ${DOG_FRAGMENT}
`;
```

Then we run `@graphql-codegen/cli` again. Depending on how we set-up the CLI, output will vary so the below are what I normally work with:

- `useGetCatListQuery`: A hook that fires a request to fetch cat list & return the data.
- `useGetCatListQueryLazy`: A hook that returns a function to fetch cat list in case we want to manually get the list.
- A variety of Typescript types for query document, variables or return result.

Core features of Apollo such as request state management, caching & revalidating are all functional through these custom hooks.

Now that we have the queries, let's build the `CatList` and `DogList` components:

```ts
// ... import needed stuff
import { useGetCatListQuery, useGetDogListQueryLazy } from 'graphql/generated';

const CatList = () = {
	const data = useGetCatListQuery();
	const cats = data.data?.cats || [];

	if (data.loading) {
		return null;
	}

	return cats.map(cat => <CatCard cat={cat} />);
}

const DogList = () = {
	const [getDogList] = useGetDogListQueryLazy();
	const [dogs, setDogs] = useState<DogFragment[]>([]);

	useEffect(() => {
		getDogList().then(res => setDogs(res.data?.dogs || []));
	}, [])

	return dogs.map(dog => <DogCard dog={dog} />);
}

```

In the above code, the `CatList` and `DogList` are using the query hooks generated in the previous step. `CatList` and `DogList` are using `CatCard` and `DogCard` components, while the queries are using `CatFragment` and `DogFragment` defined together with the card components.

All the types match perfectly.

## The benefits

This pattern offers several benefits:

- **Code reusability:** By defining fragments alongside their respective components, we can reuse the fragments in multiple queries and components. This avoids duplicating field definitions and promotes modular and reusable code.
- **Consistency:** Colocating fragments ensures that components sharing common fields always use the same fragment definition. This eliminates inconsistencies and makes it easier to maintain and update the codebase.
- **Readability:** By having fragments colocated with their components, developers can easily understand which fields are being used by a component without having to navigate to a separate file or location.
- **Overfetching prevention**: This pattern enforces one of GraphQL core values which is to not overfetch. Children components define what they need through fragments, and "bubble" that up to parent components where the queries take place. This make sure that we'll always fetch only what we need.
- **Automatic, strict typing**: Instead of manually defining types for the components, we are using types generated based on the fragments they are consuming. This ensure the types we are using will always map to a valid GraphQL model. Whenever we update a fragment, the corresponding type will also be updated.

## The disadvantages

While the Fragment Colocation Pattern provides several advantages, it's important to consider its limitations:

- **Fragment duplication:** If fragments are not organized and managed effectively, there is a risk of duplicating fragments across different components. This can lead to maintenance challenges and inconsistencies if modifications are required.
- **Increased complexity:** As the number of fragments and components grow, managing and organizing the fragments may become more complex. It's crucial to establish clear conventions and guidelines to keep the codebase manageable.
- **Inconventional approach**: Even though this pattern might look clear on paper, it might be challenge when engineers are new to it, especially if they are used to the REST mindset. Most often this pattern (or maybe GraphQL in general) demands engineers to adopt a completely different mindset when looking at building components.
  - _Personal take:_ _When we bubble types from children to parent, as the component trees grow bigger, it could become harder and harder to trace the fragments back to where they actually begin, especially when we couldn't organize or reuse the components effectively. It's a top-down vs bottom-up way of looking at components. We can quickly find the top, but we might need to dig around for a bit to find the bottom._

## Conclusion

The pattern we have discussed provides an effective way to colocate fragments with their corresponding components, while also provides strict typing and other quality-of-life features with extra toolings.

This pattern enhances code reusability, consistency, and readability. By reusing fragments across components that share common fields, we can avoid duplication and ensure a more maintainable codebase.

On the other hand, we also need to keep in mind its limitations, such as potential fragment duplication and increased complexity with larger codebases, and a steep learning curve.

All in all, personally I think this a pattern that's _easy to adopt, hard to master_ (thus also easy to mess up). It's true to the sprit of GraphQL, and worth a try to see for ourselves how it can give us a different approach to building optimized, well-organized code-bases.


When working with complex GraphQL schemas, it's common to have shared fields across different types. A fragment colocation pattern allows us to define fragments alongside their corresponding components, resulting in a more cohesive and maintainable codebase.

A fragment colocation pattern with React & Apollo GraphQL


**Industry**\
E-commerce / Web Development

**Location**\
Southeast Asia

**Business context**\
Swift's growing e-commerce platform faced development bottlenecks, inconsistent user experiences, and duplicate code across applications

**Solution**\
Implemented a micro frontend architecture with a shared design system that all applications could use

**Outcome**\
Successfully delivered a flexible system that improved development speed, code quality, and user experience consistency

**Our service**\
Frontend Architecture / Design Systems / Component Libraries

## Technical highlights

- **Component development**: React for building reusable UI elements
- **Documentation**: Storybook for showcasing and testing components
- **Styling**: CSS-in-JS for encapsulated component styles
- **Distribution**: npm package for version management and sharing
- **Implementation strategy**: Independent development before integration
- **Validation**: Thorough testing in multiple application environments
- **Deployment**: Independent pipelines for each micro frontend

![Swift e-commerce design system](assets/swift-main.webp)

## What we did with Swift

We've partnered with Swift, an e-commerce company, for several years. In our most recent collaboration, we helped them implement a micro frontend architecture with a shared design system that all their applications could use.

Micro frontend is an architectural approach that breaks down a large website into smaller, independent pieces. Different teams can work on different pieces without stepping on each other's toes, and everything comes together seamlessly for the end user.

For Swift, this approach solved several critical challenges they were facing with their growing e-commerce platform. We focused particularly on building a shared design system that would create consistency across all their applications while making development more efficient.

_Note: "Swift" isn't the company's real name - we've changed it to respect their privacy. But everything shared here comes from real interviews and experiences._

## The challenge Swift faced

As Swift's e-commerce platform grew, their development process became increasingly complex and difficult to manage. Large projects were becoming unwieldy, with multiple teams trying to work on the same codebase simultaneously.

They faced several key challenges:

- **Development bottlenecks**: Teams were waiting on each other to complete work before they could proceed
- **Inconsistent user experience**: Different parts of the platform had different looks and behaviors
- **Duplicate code**: Teams were recreating the same UI components multiple times
- **Slow release cycles**: The monolithic structure meant even small changes required extensive testing

They needed a way to make their development more efficient while ensuring a consistent user experience across all their applications.

## How we built it

After analyzing Swift's needs, we helped them implement a micro frontend architecture with a shared design system at its core.

### Technical approach

We divided the platform into smaller, more manageable chunks based on page and business purpose. This resulted in at least ten separate applications, each with a dedicated team:

- Login screens
- User profiles
- Ad management tools
- Messaging system
- Design system components
- And several others

For the shared design system, we implemented a comprehensive solution using:

- **React components**: We built reusable UI elements that could be shared across all applications, ensuring consistency while allowing for customization where needed.
- **Storybook documentation**: We created extensive documentation and interactive examples using Storybook, making it easy for all teams to understand how to use each component.
- **Component-scoped styling**: We bundled CSS with each component using CSS-in-JS techniques, preventing style conflicts when components are used in different applications.
- **npm package distribution**: We packaged the design system as an npm package with proper versioning, making it easy for teams to install and update.
- **Testing framework**: We established thorough testing procedures to ensure components worked correctly in all environments and use cases.

### Implementation strategy

The biggest technical challenge was creating components flexible enough to work across all the different applications. We implemented a rigorous development process that included:

1. Identifying common UI patterns across applications
2. Building components with the right balance of flexibility and consistency
3. Thoroughly testing components in multiple environments
4. Creating clear documentation so all teams could easily understand how to use them

### Team workflow

The process we established is straightforward:

1. The design system team builds and thoroughly tests components
2. The package is published to npm with proper versioning
3. Other teams install the package and import just the components they need
4. Teams provide feedback to continuously improve the system

We recommended building UI independently in each app first, then identifying shared components to add to the design system only after everything was stable. This approach reduces risk when upgrading because components have already been thoroughly tested.

## What we achieved

The micro frontend architecture and shared design system have genuinely improved Swift's development process. The first version has been successfully released and implemented in production applications.

Key benefits include:

- **Faster development cycles**: Teams can now work independently without blocking each other, leading to more rapid feature releases.
- **Consistent user experience**: All applications share the same UI components, creating a unified experience for users across the platform.
- **Reduced code duplication**: Common components are built once and shared, eliminating redundant work and improving code quality.
- **Easier maintenance**: Updates to the design system automatically improve all applications, making it simpler to implement platform-wide changes.
- **Better scalability**: New teams and applications can be added without disrupting existing work, allowing the platform to grow more efficiently.

We've already successfully integrated the shared design system into Swift's Ads Management Dashboard, with plans to expand to other applications soon.

The Swift team considers this implementation a success and plans to continue using this approach for future development. The architecture we helped them build is well-suited to their specific business needs and will support their growth for years to come.

This project is just one example of how we're helping partners implement micro frontend architecture. As we work with more companies on similar challenges, we'll continue sharing insights and best practices.


We helped Swift, an e-commerce partner, implement a micro frontend architecture with a shared design system that improved development efficiency and created a consistent user experience across multiple applications.

Swift

Swift: Building a micro frontend design system for e-commerce


## Micro-Frontend - What & Why?

![](assets/why-micro-frontend_a5bf635d4856ea99f487589001781c71_md5.webp)

As web applications become more complex and feature-rich, traditional frontend architectures such as monolithic will become harder to maintain, scale, and evolve. Micro-frontend is an emerging front-end architecture that aims to address these challenges by breaking down the front-end into small, independent and reusable modules.

In this article, we will explore the concept of micro-frontend, its benefits, design principles, tools and technologies, implementation strategies, and challenges. By the end of this article, you will have a good understanding of what micro-frontend is and why it is important for modern front-end development.

## What is Micro-Frontend?

Micro-Frontend is an architectural pattern for frontend development that emphasizes breaking down the frontend into small, independent and self-contained modules.

Each module is responsible for a specific feature or functionality and can be developed, tested, and deployed independently. The modules can then be composed into a complete frontend application, similar to how microservices are composed into a complete backend application.

To better understand how micro-frontend architecture works, we should first look into what’s **monolithic architecture.**

### The monolithic architecture

In a monolith system, everything resides in one repository and all the developers work on the same code base. For every single change, the entire app needs to be built, tested & shipped as a whole.

In a lot of cases, this approach is fine, it works if you do it right and a lot of systems use it efficiently. However, as the software scales, issues might arise. It becomes difficult to upgrade the dependencies due to a big codebase with huge impacts, a lot of time would be spent in coordination between developers, testing and deployments become slower, individual changes cannot be shipped, slowing down the pace of the team bringing value to the clients.

There might be a need for a more efficient solution - by breaking it down:

![](assets/why-micro-frontend_149cb7501d21ad52e476f168b93085cc_md5.webp)

We can see that the backend work has been broken into microservices - a term we are probably too familiar with at this point. However, front-end work is still one big chunk. This is where micro-frontend comes in.

### The micro-frontend architecture

Let’s take the previous monolithic example (The Shop Team), broken into micro-frontends:

![](assets/why-micro-frontend_8b4ce5b2e752b7bbc96be21b6d2f1349_md5.webp)

With micro-frontends, codebase, teams, and responsibilities are split vertically in a way that the coupling between them is very low. Each team owns a smaller codebase, and can individually test, deploy and scale according to the needs. Now the teams only need to coordinate the moving parts, which can be kept minimal with a good system design. The teams can easily manage their dependencies and even use a separate tech stack.

Finally, all micro-frontends can be served to the users altogether through a container (shell) app:

![](assets/why-micro-frontend_336c82e3b7bd0e20a3196bd23f043f6a_md5.webp)

Now that we’ve already got the gist of what micro-frontend is, let’s take a closer look at the key benefits it brings.

## Advantages of micro-frontend

### Improved scalability

Micro-frontend allows for individual features or functionalities to be developed, tested, and deployed independently by individual teams, which makes it easier to scale specific areas of the application without affecting others.

On the other hand, it also lets teams express themselves at their best - they can make the best possible decision in terms of architecture, testing, and coding style based on the business logic they have to tackle.

### Enhanced flexibility

Micro-frontend allows greater flexibility in development, enabling teams to use the best tools for each micro-frontend as each micro-frontend can be built using different frameworks, technologies, and languages.

Teams can opt for a new technology stack without having to translate what was developed previously, eliminating technology lock-in & offering opportunities to pick up newer & better tech stacks. This also helps diversify hiring processes as there are many stacks being used.

### Faster development & deployment

Micro-frontend allows independent teams to work on independent features simultaneously, without communication overhead. Teams can deploy faster, at a higher rate, with a smaller size.

### Better maintainability

Micro-frontend allows greater autonomy and ownership as each micro-frontend is managed by a dedicated team. It is easier to identify and fix issues, as each team is responsible for a specific feature or functionality.

It also helps address challenges related to legacy code by enabling teams to rebuild and replace individual micro-frontends without having to rebuild the entire application from scratch.

Of course, while there are many advantages to using a micro-frontend architecture, there are also several challenges and considerations that must be taken into account.

## Challenges and considerations

![](assets/why-micro-frontend_f956742770614138c3736e182be7da7a_md5.webp)

### Increased complexity

While micro-frontends can help break down a large application into smaller, more manageable pieces, they can also introduce additional complexity. Managing the interactions between different micro-frontends, handling cross-cutting concerns like authentication and routing, and coordinating deployment and versioning can all be challenging.

### Performance overhead

Each micro-frontend adds additional overhead to the page, with its own network requests, JavaScript files, and CSS styles. While this can help improve scalability and maintainability, it can also impact page load times and user experience if not managed carefully.

### Browser compatibility

Different micro-frontends may have different dependencies and requirements, making it challenging to ensure compatibility across different browsers and devices. This can require additional testing and development efforts to ensure that the application works correctly on all platforms.

### Security concerns

Each micro-frontend represents a potential attack surface for hackers and malicious actors, so it's important to ensure that each micro-frontend is properly secured and isolated from the rest of the application. This can involve implementing security measures like sandboxing, Content Security Policy (CSP), and other best practices.

### Communication between micro-frontends

Coordinating communication between different micro-frontends can be challenging, especially when dealing with complex workflows or data dependencies. This can require careful planning and design to ensure that each micro-frontend can communicate effectively with the others without creating unintended side effects.

### Tooling and infrastructure

Building and deploying micro-frontends often requires a different set of tools and infrastructure than traditional monolithic applications. This can involve implementing new build processes, deploying microservices, and managing complex deployment pipelines, which can require additional expertise and resources.

So, knowing full well the pros and cons of micro-frontend architecture, how should we approach building one? Let’s move on to some design principles.

## Micro-frontend design principles

### Single responsibility

Each micro-frontend should be responsible for a single aspect of the user interface, rather than trying to do too much. This helps keep the codebase manageable and ensures that changes to one part of the interface don't have unintended consequences elsewhere.

### Loose coupling

Micro-frontends should be designed to be as independent as possible, with minimal dependencies on other parts of the application. This allows each micro-frontend to be developed, tested, and deployed separately, without affecting other parts of the system.

### Composability

Micro-frontends should be designed to be easily combined with other micro-frontends to create a complete user interface. This means that they should have clear, well-defined interfaces and be designed with reusability in mind.

### Isolation

Each micro-frontend should be fully isolated from the rest of the application, with its own dedicated DOM element and JavaScript execution context. This prevents conflicts between different parts of the UI and ensures that one micro-frontend cannot affect the behavior of others.

### Standardization

To ensure consistency across different micro-frontends, it's important to establish and adhere to a set of standard design patterns, coding conventions, and UI guidelines. This helps ensure that users have a seamless experience across the entire application.

### Testing

Each micro-frontend should be designed with testing in mind, with a suite of automated tests to verify its functionality and ensure that changes don't introduce regressions. This helps catch bugs early in the development process and ensures that the system remains stable and reliable.

## Conclusion

With that, we hope you now have a clear idea of what micro-frontend is, its pros and cons, as well as some key principles that ensure this architecture is correctly built.

Micro-frontend is a powerful approach to building web applications, with a focus on scalability and maintainability. It is still growing, with companies such as AWS, IKEA, or DAZN which has begun their own adoption of the technology, and we here are no exception. We are actively practicing the architecture with some of our partners

However, please do keep in my that regardless of its strength, Micro-Frontend is not a one-sizes-fit-all solution. Traditional, monolithic architectures still have their charms, and picking which to use for the business remains one of the most important questions we hope to help you answer.

Until next time!

## References

- [5 reasons you should adopt a micro frontend architecture — SitePoint](https://www.sitepoint.com/micro-frontend-architecture-benefits/)
- [5 pitfalls of using micro frontends and how to avoid them — SitePoint](https://www.sitepoint.com/micro-frontend-architecture-pitfalls/)
- [Micro frontends - a complete guide | Hygraph](https://hygraph.com/blog/micro-frontend)
- [Micro-frontend—why and how? | Syncfusion Blogs](https://www.syncfusion.com/blogs/post/micro-frontend-why-and-how.aspx)
- [Microfrontends anti-patterns: seven years in the trenches](https://www.infoq.com/presentations/microfrontend-antipattern/)
- [Micro frontends - extending the microservice idea to frontend development (micro-frontends.org)](https://micro-frontends.org/)


As web applications become more complex and feature-rich, traditional frontend architectures such as monolithic will become harder to maintain, scale, and evolve. Micro-frontend is an emerging front-end architecture that aims to address these challenges by breaking down the front-end into small, independent and reusable modules.

Why micro frontend


## What's variable font?

Variable fonts - officially known as OpenType Font Variations - are a font format that allows for a single font file to contain multiple variations of a typeface, such as different weights, widths, and styles, that can be dynamically adjusted in real-time using font variations.

![](assets/variable-fonts_variable_fonts_01.webp)

Weights, widths and other properties are also called **"axes" of variations**.

### Axes of variations

In typography and font design, "axes of variation" refer to the different characteristics or parameters of a font that can be modified or adjusted to create different font styles or variations. These variations can include parameters such as font weight, width, slant, optical size, and more.

Each axis of variation defines a range of possible values, and any combination of values within that range can be used to create a unique font style or variation.

> For example, the weight axis of a variable font might range from "Thin" to "Bold," and any value within that range can be selected to create a font style with a corresponding weight.

![](assets/variable-fonts_variable_fonts_02.webp)

By adjusting these parameters within a defined range, designers can create custom font styles that fit their specific design needs.

<video src="https://storage.googleapis.com/web-dev-assets/variable-fonts/roboto-dance.mp4" controls autoplay></video>

These variations are also dependent on how the fonts were designed and built. Designers and developers should refer to the font's documentation or its creator to understand which variations are available and how they can be used.

## Why should we use variable fonts?

- **Size and efficiency**: Font variations are contained within a single font file, leading to smaller file sizes and faster load times.
- **Flexibility, customization, precision and control**: By allowing manipulating of various variation axes to match our needs
- **Creativity**: Variable fonts provide designers with new opportunities to experiment and create unique font designs, resulting in visually distinct and more memorable typography

## Examples on variable fonts

The best way to understand variable fonts is to start playing with them. Below are some examples from [an article](https://fonts.google.com/knowledge/introducing_type/introducing_variable_fonts) from Google Fonts to get you started.

Go to [etceteratype.co/epilogue](https://etceteratype.co/epilogue) and play with the **weight** axis of Epilogue to see how it affects the overall spacing of the ![](assets/variable-fonts_variable_fonts_03.webp)

Now go to [etceteratype.co/grandstander](https://etceteratype.co/grandstander) and compare that with Grandstander, which was designed to take up the same amount of horizontal space regardless of changes made to the weight axis. This shows how what happens within an axis of variation is determined by the typeface designer.

![](assets/variable-fonts_variable_fonts_04.webp)

Go to [etceteratype.co/anybody](https://etceteratype.co/anybody) and play with the weight **and** width axes on Anybody, to see how they can be combined, and how they affect each other in a subtle way:

![](assets/variable-fonts_variable_fonts_05.webp)

You can also visit these websites:

- [VariableFonts.io](https://variablefonts.io/)
- [VariableFonts.TypeNetwork.com](https://variablefonts.typenetwork.com/)
- [Axis-Praxis](https://www.axis-praxis.org/)
- [Variable fonts](https://v-fonts.com/)
- [Font playground](https://play.typedetail.com/)
- [Very able fonts](https://www.very-able-fonts.com/)

## How do we use variable fonts (as a developer)?

### Load the fonts

Variable fonts are loaded though the same `@font-face` mechanism as traditional static web fonts, with a new enhancement:

```css
@font-face {
  font-family: "Roboto Flex";
  src:
    url("RobotoFlex-VF.woff2") format("woff2") tech("variations"),
    url("RobotoFlex-VF.woff2") format("woff2-variations");
}
```

We don't want the browser to download the font if it doesn't support variable fonts, so we add format and tech descriptions: once in the future syntax `(format('woff2') tech('variations'))`, once in the deprecated but supported among browsers syntax `(format('woff2-variations'))`. They both point to the same font file.

### Using variation axes

To set value for the variations, we use `font-variation-settings`, specifying an array of `{{axis tag}} {{value}}` pairs:

```css

@font-face {
  ...
  font-variation-settings: 'wght' 500, 'GRADE' 0.5;
}
```

You will notice that in the example above, 1 tag is lowercase, and the other is uppercase. It is to differentiate between **registered axes** & **custom axes**. Registered axes will always be lowercase, whereas custom axes will always be uppercase.

By default, there are 5 [registered axes](https://docs.microsoft.com/en-us/typography/opentype/spec/dvaraxisreg#registered-axis-tags), which control known, predictable features of the font:

- Weight - `wght`
- Width - `wdth`
- Optical size - `opsz`
- Slant - `slnt`
- Italics - `ital`

Beyond that, we depends on how the fonts were built & what custom axes they are using. Check out [this site](https://v-fonts.com/fonts/roboto-flex) for another good example on all the axes a font can have.

![](assets/variable-fonts_variable_fonts_06.webp)

## References

- https://www.youtube.com/watch?v=0fVymQ7SZw0&list=WL&index=1&t=247s&ab_channel=KevinPowell
- https://fonts.google.com/knowledge/introducing_type/introducing_variable_fonts
- https://web.dev/variable-fonts/


Variable fonts are a font format that allows for a single font file to contain multiple variations of a typeface.

Variable fonts


## Definition

A definition to Atomic CSS:

> Atomic CSS is the approach to CSS architecture that favors small, single-purpose classes with names based on visual function.

Some might also call it Functional CSS, or [CSS utilities](https://designsystem.digital.gov/utilities/). Basically, you can say an Atomic CSS framework is a collection of the CSS like these:

```css
.m-0 {
  margin: 0;
}

.text-red {
  color: red;
}
```

We have quite a few utilities-first CSS framework like [Tailwind CSS](https://tailwindcss.com/), [Windi CSS](https://windicss.org/) and [Tachyons](https://tachyons.io/), etc. And there are also some UI libraries that come with some CSS utilities as the complement to the framework, for example [Bootstrap](https://getbootstrap.com/docs/5.1/utilities/api/) and [Chakra UI](https://chakra-ui.com/docs/features/style-props).

## Variations

### Static

Similar to how we write normal CSS, we define a unit-based design system for spacing, color, typography, etc. Take a look at these default utility classes from Tailwind:

```css
# 1 unit ~ 0.25rem .m-4 {
  margin: 1rem;
}

.m-8 {
  margin: 2rem;
}
```

**Advantages**

- Easy to set up and use.
- Immutable styles that speak for themselves (by good naming convention).

### Programmatic

This style involves using a build tool to automatically generate styles based on what it finds in the HTML.

For example, given this:

```html
<div class="Bgc(#0280ae) C(#fff) P(20px)">Lorem ipsum</div>
```

The following CSS would be generated:

```css
.Bgc$#0280ae$ {
  background-color: #0280ae;
}
.C$#fff$ {
  color: #fff;
}
.P$20px$ {
  padding: 20px;
}
```

Another example would be Tailwind's JIT mode:

```html
<div className="bg-[#FFF] font-[24px]">...</div>
```

**Advantages**

- Easy to use.
- Stylesheets generated during the build process are fully optimized with no unused styles.
- Much more flexible & spontaneous (... just like inline style).

## Purposes

### Atomic CSS keeps things simple

- Classes are immutable. They only do one thing.
- Naming is straight forward. It's easy to tell what a class does at a glance.
- Using a utility class in an HTML file is unambiguous - we know what we are changing, without concern of breaking something, somewhere else.
- Easy to pick-up without diving too deep into actual stylesheets.

### Atomic CSS keeps things consistent

- Unit-based so styles are consistent & scalable. Let's look into how Tailwind setup their default styles again:
  - `m-4 -> margin: 1rem`, `m-8 -> margin: 2rem` -> 1 unit ~ 0.25rem. With this, when we see `m-40`, we can easily deduce that it's `10rem`.
- Designs that follow an atomic system will be easier for developers to implement.
  - An offset of 1 or 2 pixels while dragging components around in Figma might be neglectible, but applying those styles to the app will bloat it with "magic numbers" that feel random & irrelevant.
  - With designers & developers agreeing on a common styling system, developers still know what they have to use when encountering "magic numbers" in the design. They can see a `padding: 63px` and know the designers actually meant `padding: 64px` (divisible by 4).

### Atomic CSS is not inline styles

Inline styles have long been deemed a bad practice, and many people dislike Atomic CSS because they think _it shares the same suffer with inline styles_.

Here’s an example:

> What if we want to change everything with a `.black` class to be navy instead?

An easy solution would be finding all instances of `.black` with our Text Editor and replace them manually. However, it's a _tedious_ deed, and exactly what is frowned upon by the community. People value _reusability_.

**But we do have reusability with Atomic CSS** (along with many other things).

#### Reusability

Reusability of Atomic CSS comes from the way we use them. With libraries such as React, it's easy to define a _reusable_ component, with all the styles bundled inside. Now changing the color of a widely-used button is a one-line operation:

```jsx
export const CommonButton = () => {
  return (
    <button type="button" className="bg-primary">
      Button
    </button>
  );
};
```

Combining with suitable tools, we can make it even more flexibile:

```jsx
import { css } from "@linaria/core";

const reusableButtonClassName = css`
  @apply p-2 rounded bg-white font-base border-secondary;
  line-height: 1;

  @screen md {
    @apply font-xl;
  }
`;

const reusableActiveButtonClassName = css`
  @apply border-primary;
`;

export const CommonButton = ({ isActive }) => {
  return (
    <button
      type="button"
      className={[
        "reusableButtonClassName",
        isActive && "reusableActiveButtonClassName",
      ]}
    >
      Button
    </button>
  );
};
```

As you can see, we are utilizing the strength of both Atomic CSS and [css-in-js]().

#### Abstraction

With atomic classes, it is possible to create abstractions that would be impossible with inline styles.

```html
<p style="font-family: helvetica; color: rgb(20, 20, 20)">
  Inline styles suck.
</p>
<p class="helvetica rgb202020">Badly written CSS isn't very different.</p>
<p class="sans-serif color-dark">Utility classes allow for abstraction.</p>
```

The first two examples shown above would require a manual find-and-replace in order to update styling were the design to change. The styles in the third example can be adjusted in a single place within a stylesheet.

#### Tooling

Sass, Less, PostCSS, Autoprefixer… The CSS community has created a lot of useful tools that weren’t available for inline styles.

#### Brevity

Rather than writing out verbose inline styles, atomic classes can be terse abbreviations of declarations. It’s less typing: `mt-0` vs `margin-top: 0`, `flex` vs `display: flex`, etc.

#### Specificity

Inline styles have the 2nd highest level of specificity (only less than `!important`) .The lower specificity of atomic classes compared to inline styles is a good thing. It allows more versatility.

#### Possibilities

Utility classes can do things inline styles can't.

Inline styles do not support media queries, pseudo selectors, `@supports`, or CSS animations. Perhaps you have a single hover effect you want to apply to disparate elements rather than to only one component.

```css
.circle {
  border-radius: 50%;
}

.hover-radius-0:hover {
  border-radius: 0;
}
```

Simple reusable media query rules can also be turned into a utility class. Its common to use a classname prefix for small, medium and large screen sizes. Here is an example of a flexbox class that will only apply on medium and large screen sizes:

```css
@media (min-width: 600px) {
  .md-flex {
    display: flex;
  }
}
```

## Atomic CSS is not all or nothing

There's no doubt CSS utilities can cover a lot of common use-cases, but it's not all we need. There are plenty of cases where utility classes aren’t the best option:

- If you need to change a lot of styles for a particular component inside of a media query.
- If you want to change multiple styles conditionally during run-time, based on a component's state.

Refer back to [this section](#Reusability) for a sample scenario. Utility classes can coexist with other approaches. It's just a good idea to define base styles and sane defaults globally.

## References

- https://antfu.me/posts/reimagine-atomic-css
- https://css-tricks.com/growing-popularity-atomic-css/
- https://css-tricks.com/lets-define-exactly-atomic-css/


This article provides an overview of Atomic CSS, including its definition, variations, purposes, and how it compares to other CSS approaches.

An introduction to atomic CSS


### An introduction to React fiber

Fiber is the new reconciliation algorithm since React 16, a completely backward-compatible rewrite of the old reconciler (Stack Reconciler).

### Purposes

- Improved performance by breaking the limits of the call stack. It allows dividing the work into multiple chunks & divide the rendering work over multiple frames. This lets it pause or restart work conditionally.
- Control over the priority of the work. Work being divided into smaller chunks mean we can essentially prioritize each chunk based on its context. E.g: Functions that originate from user actions should be processed before less-important background functions.
- Better suitability for advanced UI (animations, layouts & gestures) as a result of the priority control.
- … (some other new features)

By breaking up the work into smaller chunks that can be paused, resumed, or aborted based on a set priority order, React fiber helps apps deliver a more fluid experience.

With the old Stack Reconciler, reconciliation and rendering work weren’t separated & performed synchronously without interruption. Render changes can only be inserted after current stack was cleared. This often resulted in lagging inputs and choppy frame rates.

### References

- https://www.geeksforgeeks.org/reactjs-reconciliation/
- https://www.velotio.com/engineering-blog/react-fiber-algorithm
- https://flexiple.com/react/react-fiber/


Fiber is the new reconciliation algorithm since React 16, a completely backward-compatible rewrite of the old reconciler (Stack Reconciler).

React fiber


This article demonstrates how to use CSS transforms, perspective and some scaling trickery to create a pure CSS parallax scrolling website.

## Advantages of using pure CSS over JS

Although using Javascript will give us more flexibility on how we want to construct our parallax effect, it also comes with the cost of performance & implementation complexity. We listen to the `scroll` event & modify the DOM with the handler, triggering needless reflows and paints.

For more simple use cases, with pure CSS, we can:

- Avoid messing with the browser's rendering pipeline
- Allow browsers to leverage hardware acceleration while rendering, ensuring consistent frame rates & a smooth scrolling experience
- Combine with other CSS features (e.g. responsive)

## How it works

First, let's establish some barebones markup:

```html
<div class="parallax">
  <div class="layer layer-1">...</div>
  <div class="layer layer-2">...</div>
  ...
</div>
```

And the basic styles:

```css
.parallax {
  perspective: 1px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}

.layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.layer-1 {
  transform: translateZ(0);
}

.layer-2 {
  transform: translateZ(-1px);
}
```

The `parallax` class is where the parallax magic happens:

- Defining the `height` and `perspective` style properties of an element will lock the perspective to its centre, creating a fixed origin 3D viewport.
- Setting `overflow-y: auto` will allow the content inside the element to scroll in the usual way, but now descendant elements will be rendered relative to the fixed perspective. This is the key to creating the parallax effect.

The `layer` class defines a layer of content to which the parallax effect will be applied. The `absolute` position is optional, for the sake of display. You'll see what I meant in a moment.

Finally, the `layer-{{n}}` class is used to set Z offset of the layers. If we consider the `parallax` container is a camera viewport, the Z offset will determine whether a layer is farther away, or closer to the viewport. **The farther away a layer is, the slower it'll appear to be scrolling.**

Check it out in the CodePen below:

<iframe height="400" style="width:100%" scrolling="no" title="Pure CSS parallax (1) - Barebones" src="https://codepen.io/ngolapnguyen/embed/wvjGRRp?default-tab=result" frameborder="no"></iframe>

## Common practices

### Parallax with multiple sections

Most parallax sites break the page into distinct sections where different effects can be applied. Here's how to do that.

First, we need a `group` element to group our layers together:

```html
<div class="parallax">
  <div class="group">
    <div class="layer layer-1">Layer 1.1</div>
    <div class="layer layer-2">Layer 1.2</div>
    <div class="layer layer-3">Layer 1.3</div>
  </div>
  ...
</div>
```

And now the styles:

```css
.group {
  ...
  transform-style: preserve-3d;
}
```

The property `transform-style: preserve-3d` prevents the browser from flattening the `layer` elements, indicating that children of the element should be positioned in the 3D-space. More on the property [here](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-style).

One important rule to keep in mind when grouping elements is, **we cannot clip the content of a group**. Setting `overflow: hidden` on a `group` will break the parallax effect. Unclipped content will result in descendant elements overflowing, so we need to be creative with the `z-index` values of the groups to ensure content is correctly revealed/hidden as the visitor scrolls through the document.

### Depth correction

True to 3D transforms, elements that are farther away from the viewport will appear smaller than those that are closer. If we want them to appear to be rendered as their original size (e.g. same font-size and all), we can use the `scale` transform to do that:

```css
.layer-2 {
  transform: translateZ(-1px) scale(2);
}
```

The scale factor can be calculated with the following formula:

```
scale = 1 + (translateZ * -1) / perspective
```

### Debugging

When you are working with parallax, it can be easier to get lost among the different layers. Taking a different perspective will allow you to know where everything is in the 3D space - which you can do by applying simple transform to the group elements:

```css
.group {
  transform: translate3d(700px, 0, -800px) rotateY(30deg);
}
```

You can try out all the common practices I have mentioned in the CodePen below:

<iframe height="400" style="width: 100%;" scrolling="no" title="Pure CSS parallax (2) - Common Practices" src="https://codepen.io/ngolapnguyen/embed/XWqdOJr?default-tab=result" frameborder="no" allowfullscreen="true"></iframe>

## References

- https://keithclark.co.uk/articles/pure-css-parallax-websites/
- https://developer.mozilla.org/en-US/docs/Web/CSS/transform-style
- https://www.youtube.com/watch?v=1wfeqDyMUx4


This article demonstrates how to use CSS transforms, perspective and some scaling trickery to create a pure CSS parallax scrolling website.