In partnership with

⚡️ The Latest In React 

🖼️ State of frontend 2024
The post-pandemic frontend world has shifted from its gilded era of abundant projects and funding waves to a more grounded phase of practicality. This year’s State of Frontend report reveals some key challenges, like 68% of C-level executives citing skill shortages as a major hiring issue. But there’s also a silver lining: the role of frontend developers is evolving, with many now tackling broader responsibilities across different layers of the stack, not just the frontend. I highly recommend reading the full report.

🤯 Convert HTML from any page to React
A new Chrome extension lets you convert HTML from any page into React code or a Figma design! Whether it’s a full page or a specific section, you can grab existing designs and transform them instantly.

🧼 How to write Clean code in React
Keeping each function at a consistent level of abstraction is key to clean code. High-level functions should handle orchestration, while smaller functions manage the details. This blog breaks it down with examples and explains the benefits of sticking to one level of abstraction per function for clearer, more maintainable code.

2️⃣ Two ways to the two Reacts
React 19 introduces a game-changing shift by enabling components on the server, known as React Server Components (RSC). This evolution brings new possibilities for building apps. But how does it impact development? Bobae Kang explores this in his blog post “Two ways to the two Reacts” questioning how best to merge server and client-side components.

Quick Links

• What is one React library you wish you had known about earlier?

• The Shopify app is fully migrated to React Native

• Useful collection of components for your React Flow application

• The leading open-source JavaScript library for mobile-friendly interactive maps

• A suite of React Components for sensible UI design

I’ve been hearing a lot of buzz about Codeium over the past year, especially how their team’s responsiveness to feedback and regular product updates with cutting-edge AI set them apart. That’s why I’m excited to share that today’s edition is sponsored by Codeium.

Unlock Windsurf Editor, by Codeium.

Introducing the Windsurf Editor, the first agentic IDE. All the features you know and love from Codeium’s extensions plus new capabilities such as Cascade that act as collaborative AI agents, combining the best of copilot and agent systems. This flow state of working with AI creates a step-change in AI capability that results in truly magical moments.

Download It Free Today

How Spotify Built the BFCM 2023 Globe

Spotify’s engineering blog recently highlighted their impressive Black Friday Cyber Monday (BFCM) globe, a real-time visualization showcasing Shopify-powered purchases worldwide. Last year’s globe focused on enhancing both visuals and performance using technologies like Three.js and React-three-fiber.

Central to the display are arcs that represent each order, flowing in real time from merchant to buyer, crafted with Bézier curves and optimized to render efficiently via instancing. This ensures thousands of arcs can animate smoothly without compromising performance.

The blog delves into their creative solutions, like city dots for active orders, celebratory fireworks for first-time sales, and intricate camera animations that offer seamless viewing experiences. For any developer fascinated by web graphics, it’s a must-read deep dive into crafting stunning, interactive data visuals!

In this video, we'll dive into implementing drag-and-drop functionality in React using the dnd-kit library! We'll cover setting up a drop end function to update state effectively, create droppable areas, and build draggable items to move into these zones.

Throughout, we'll follow React best practices and design patterns to ensure a smooth, maintainable implementation!

If you haven’t seen it yet, check it out. 👇️