The article provides a guide on how to use JavaScript efficiently to track user behavior on websites without increasing site load times. It focuses on maintaining optimized site performance while implementing analytics solutions.

Null Continue reading How to track user behavior with JavaScript (without bloating your site) on SitePoint.

How to track user behavior with JavaScript (without bloating your site)

Unlock React & JS Secrets: Your Weekly Dev Boost!

In the latest edition of Frontend Weekly, delve into comprehensive guides and insightful articles that every frontend developer will find valuable. Explore the 'Mastering React Hooks' article, which intricately details how to harness the power of React hooks and functional components to enhance your application's performance. For full-stack developers, uncover efficient strategies for integrating front-end and back-end processes effectively. Learn about the 'this' keyword in JavaScript through a clear, in-depth explanation that demystifies its contextual behavior with practical examples. Discover how alt attributes play a critical role in HTML images for improving accessibility and SEO. Additionally, embark on a creative journey with React Haiku, and uncover methods to track user behavior efficiently without compromising site performance. Finally, a multi-part guide takes you through building three distinct React applications, including a responsive navigation hook and a theme switcher, which will bolster your React proficiency and user interface design skills.

Frontend Weekly: Master React hooks for optimized apps, learn the 'this' keyword in JS, and integrate full-stack development seamlessly. Enhance accessibility with alt attributes and discover creative React Haikus. Build dynamic UI with React apps and track user behavior efficiently.

Issue %%issue_number%%

The article discusses different state management options available for React in 2025, evaluating their features and providing guidance on selecting the most suitable one for your project.

Redux, Zustand, RTK Query, SWR, MobX — each has its sweet spot. See clear code samples, learn real trade-offs, and pick the tool that truly fits your next app. Https: //javascript. Plainenglish. Io/state-management-in-react-5-practical-options-for-2025-b9793b62c871

⚛️ Choosing state management in React for 2025?

Frontend Frenzy: Speed, React, & More! 🚀

This week's Frontend Weekly newsletter delivers top-notch insights on JavaScript's spread syntax, exploring how it enhances code efficiency and flexibility in managing arrays and objects. Discover cutting-edge strategies to boost your website's performance with our detailed web optimization guide, ensuring faster load times and a superior user experience. Dive into the complete development process of a scalable habit tracker, encompassing both frontend and backend aspects for robust application build. Learn about React state management options ideal for 2025 projects, featuring detailed comparisons and selection guidance. Optimize your web development workflow with expert tips on improving project efficiency. Build a dynamic Notes App using React and local storage, with step-by-step instructions and a preview link. Accelerate your Vite application performance with practical techniques for speed and efficiency gains. Lastly, join the 'I Heart CSS' DailyDev Squad to connect with CSS developers for resourceful interaction and community support.

Explore JS spread syntax, optimize web performance, and discover React state management options for 2025 in this Frontend Weekly. Get expert tips to enhance your web development workflow and speed up Vite applications today.

An in-depth review of a developer's portfolio, highlighting design choices, project showcases, and overall effectiveness in demonstrating skills and expertise.

Hi everyone. I ' m a full stack developer with over five years of experience in web development, and I ' ve just updated my portfolio to better showcase my projects and skills. I ' m aiming to improve both the design and user experience, so I ' d love some honest feedback from designers and fellow developers. Visit my website. Sendoan. Com

Review Portfolio

Frontend Treasures: APIs, Cypress, & Future Skills!

In this week's edition of Frontend Weekly, we delve into a variety of insightful articles tailored for developers. 'Create your own API for React App' presents a comprehensive guide to developing custom APIs, essential for enhancing React applications. Our 'great explanation' article simplifies complex concepts into digestible information, making it a valuable resource for developers seeking deeper understanding. '[Boost]' keeps you updated with the latest advancements in development tools that promise to improve productivity and efficiency in coding environments. Meanwhile, 'The Perils of "I'll Fix That Later"' shares a cautionary tale about the pitfalls of postponing smart home technology maintenance. If you're looking to strengthen your end-to-end testing chops, check out 'Cypress Chronicles: Unlocking the Power of End-to-End Testing – Part 1', which covers the introductory aspects of using Cypress for software testing. Additionally, we offer a 'Review Portfolio' to critique and showcase effective design and project presentation strategies. For React enthusiasts, 'React + TypeScript: Simulating a Sine Wave' integrates useEffect and useRef for intriguing results. Lastly, aspiring developers can gain valuable insights from 'How to Become a Frontend Developer in 2025', which outlines the necessary skills and resources to stay ahead in the field.

This week's Frontend Weekly features a guide to creating APIs for React, a tale on smart home tech procrastination, and insights for aspiring frontend developers by 2025. Stay updated with development tool advancements and learn end-to-end testing basics with Cypress.

The article explores the future of design systems in 2025, highlighting trends and innovations that are expected to shape the industry. It provides insights into how design systems are evolving to meet the needs of modern web and app development.

Discover why design systems are essential for consistent UX in 2025. Learn how top companies like Google, Apple, and IBM use design systems to scale efficiently while maintaining creativity. Explore upcoming trends in AI, AR/VR integration, and ethical design practices. Continue reading Design Systems in 2025: Why They ' re the Blueprint for Consistent UX on SitePoint.

Design Systems in 2025: Why They're the Blueprint for Consistent UX

Frontend Insights: RxJS, Design Systems & More!

This week's Frontend Weekly newsletter dives into a range of topics crucial for web development enthusiasts. A standout article uses a job interview analogy to demystify RxJS mapping operators such as concatMap, mergeMap, and switchMap, making it easier to grasp their practical applications. Explore the future of design systems with predictions for 2025, highlighting evolving trends that promise to standardize user experience across web and app platforms. A new start pattern in JavaScript is dissected for its benefits in code readability and maintainability, while personal journeys like aspiring to be a front-end developer through the HNG program offer inspirational perspectives. Additionally, gain insights from real-world projects like the Progressio full-stack eCommerce website, and elevate your marketing agency’s online presence with a curated list of Elementor templates. Lastly, for those in unsupported regions, there’s a guide on navigating ChatGPT access via VPNs, ensuring no barriers to innovative AI usage.

Frontend Weekly explores RxJS mapping operators, future design systems, and JavaScript's new start pattern. Real projects and tools for developers and marketers are featured, along with a ChatGPT access guide for restricted regions.

An informative guide on constructing a full-stack application utilizing React Server Components, providing practical insights into integrating front-end and back-end technologies effectively.

React Server Components are an exciting new feature that allows for rendering components on the server, enabling faster initial page loads, improved SEO, and a better user experience. In this tutorial, we ' ll build a simple full-stack application that demonstrates how to integrate server components with a React frontend. Step 1 - Setting Up the Project To get started, we’ll need to create a new React project with server components enabled. First, set up your project using Create React App: npx create-react-app react-server-components-demo cd react-server-components-demo npm install react-server-dom Next, enable server-side rendering (SSR) and React Server Components in the project. You’ll need to configure webpack or use frameworks that support SSR, like Next. Js. Step 2 - Create a Server Component Create a new file called ServerComponent. Js. This file will contain our server-rendered component, which will fetch data and render it on the server: // ServerComponent. Js import React from ' react ' ; export default function ServerComponent () { const fetchData = async () =&gt; { const response = await fetch ( ' https: //api. Example. Com/data ' ); return await response. Json (); }; const data = fetchData (); return (&lt; div &gt; &lt; h1 &gt; Server Rendered Data &lt; /h1 &gt; &lt; pre &gt; { JSON. Stringify (data, null, 2)} &lt; /pre &gt; &lt; /div &gt;); } In this step, the data fetching logic runs on the server and is passed to the client as pre-rendered HTML. Step 3 - Create a Client Component Now, we’ll create a client-side component that will interact with the server component. This component will be responsible for rendering the server component: // App. Js import React, { useEffect, useState } from ' react ' ; import ServerComponent from ' . /ServerComponent ' ; function App () { const [isServerComponentLoaded, setIsServerComponentLoaded] = useState (false); useEffect (() =&gt; { setIsServerComponentLoaded (true); }, []); return (&lt; div className = " App " &gt; &lt; h1 &gt; React Server Components Demo &lt; /h1 &gt; { isServerComponentLoaded? &lt; ServerComponent /&gt; : &lt; p &gt; Loading. . . &lt; /p&gt; } &lt; /div &gt;); } export default App; In the App. Js file, we conditionally render the server component when it is ready, providing a smooth transition from server-side rendering to client-side rendering. Step 4 - Performance Optimization and SSR With React Server Components, the goal is to optimize performance by reducing JavaScript sent to the client. By rendering parts of the page on the server, we minimize the initial JavaScript bundle size and improve load times. React Server Components support streaming, so you can render parts of the page progressively and handle them asynchronously to further optimize the performance. Use Case Scenario This setup is ideal for applications where you need to fetch dynamic data from the server but want to avoid large client-side bundles or unnecessary JavaScript execution. For example, a product catalog or blog where content is pre-rendered on the server but interacts with the client for seamless user engagement. ✅ Pros and ❌ Cons ✅ Pros: ⚡ Faster page loads due to server-side rendering  Improved SEO because of server-rendered HTML ️ Reduced client-side JavaScript bundle size ❌ Cons:  Requires a specific server setup, such as SSR with Next. Js  Server rendering adds complexity to the development process  Some parts of the application may still need client-side hydration Summary React Server Components provide a powerful way to optimize full-stack applications. By rendering content on the server and delivering a minimal JavaScript bundle to the client, you get the best of both worlds: performance and dynamic interactivity. For a comprehensive guide on using React Server Components and integrating them into your applications, check out my full 22-page PDF: Mastering React Server Components: A Pro Guide to Modern Full-Stack React – just $5. If this was helpful, you can also support me here: Buy Me a Coffee ☕ &lt; /article

Building a Simple Full-Stack Application with React Server Components

Unveil JS Sorcery & Scroll Magic: Frontend Weekly✨

This week's Frontend Weekly delves into key topics in frontend development. Dive into designing responsive architectures using Material-UI (MUI), offering best practices for creating adaptable interfaces. Uncover the functionalities of the RF Word Counter tool, a handy resource for developers in managing word and character counts efficiently. Explore the advanced concepts of JavaScript scopes and closures with insights on their influence on function behavior. Discover how scroll-triggered animations can transform websites into interactive storytelling experiences. A project on pixel-perfect development training is underway, seeking contributors. Learn manual accessibility testing techniques via keyboard navigation to enhance web accessibility. Gain practical knowledge on building full-stack applications with React Server Components, and explore top CSS frameworks for React to help you build stunning UIs by 2025.

In Frontend Weekly: Learn responsive design with MUI, JavaScript scopes, and scroll-triggered animations. Explore CSS frameworks for React and get involved in a pixel-perfect training project.

An in-depth examination of JavaScript's execution model, detailing the process from writing source code to running the final program, providing insights into the inner workings of the language.

JavaScript doesn’t just “run” your code instantly — it goes through a series of steps inside the engine and the host environment (browser or Node. Js) before anything appears on the screen or in the console. By understanding this journey from source code to running program, you can write code that behaves more predictably, performs better, and avoids subtle async bugs. This guide walks you through the JavaScript processing pipeline — from the high-level compilation stages to what happens at runtime with the call stack, event loop, task queues, and heap. 1. Overview of the JavaScript Processing Pipeline Before your code can run, the JavaScript engine transforms it step-by-step from text into something the CPU can execute. This process — the JavaScript processing pipeline — can be broken into four main stages: Lexing / Tokenizing The engine scans your source code and splits it into tokens — the smallest meaningful units (e. G. , const, sum, =, 42). Parsing The parser converts tokens into an Abstract Syntax Tree (AST). If a syntax error is found, execution stops immediately with a parse-time error (SyntaxError). Compilation The interpreter turns the AST into bytecode (V8 uses Ignition). A JIT compiler may further optimize “hot” code paths into machine code (V8 uses TurboFan). Runtime execution The CPU executes the bytecode or machine code. The engine manages variables, functions, and objects in memory using the stack and heap. 2. Core Components During Runtime Execution Once the runtime execution stage begins, your code interacts with a set of core components that manage memory, track function calls, and schedule tasks. Heap The heap is a large, mostly unstructured memory area where objects, arrays, and functions are stored. Variables in the stack often hold references to these heap objects. Stack (Call Stack) The call stack is a last-in, first-out (LIFO) structure the engine uses to keep track of which functions are currently running. When a function finishes, its execution context is popped off the stack. If the stack is empty, the event loop can dispatch new tasks. Task Queues The runtime keeps callbacks waiting to be executed in different queues: Macrotask queue → timers (setTimeout, setInterval), I/O events, UI rendering tasks. Microtask queue → Promise callbacks, queueMicrotask, MutationObserver. Event Loop The event loop is JavaScript’s scheduler. It keeps your single-threaded code responsive by repeatedly: finishing what’s on the call stack, running any queued microtasks (Promise callbacks), optionally letting the browser render, then taking the next macrotask (e. G. , setTimeout, I/O) and doing it again. 3. Diagram of JavaScript Execution Environment Here’s a high-level view of how the heap, stack, queues, and event loop interact, based on the MDN agent model diagram: +------------------------------------------------------+ | JavaScript Runtime (Browser / Node. Js) | | | | +-------------------+ +---------------------+ | | | Heap | | Call Stack | | | | {objects, arrays}| | main() | | | | functions | | foo() | | | +-------------------+ +---------------------+ | | ^ | | | | v | | +-------------------+ +-----------------------+ | | | Task Queues | | Event Loop | | | | [Macrotasks] |&lt; --| (checks, dispatches) | | | | [Microtasks] | +-----------------------+ | +------------------------------------------------------+ Example: How Functions Execute Under the Hood function foo () { console. Log ( ' Inside foo ' ); } function bar () { console. Log ( ' Start bar ' ); foo (); console. Log ( ' End bar ' ); } console. Log ( ' Start ' ); bar (); console. Log ( ' End ' ); Step-by-step execution flow: The engine stores the compiled foo and bar function objects in the heap. The engine creates the global execution context object and pushes it onto the call stack. Runs console. Log( ' Start ' ): Pushes the console. Log(‘Start’) function call object onto the call stack. Executes it (prints " Start " ). Pops it off. Encounters bar(): Creates a bar execution context object and pushes it onto the call stack. Inside bar, runs console. Log( ' Start bar ' ): Pushes the console. Log(‘Start bar’) function call object. Executes it (prints " Start bar " ). Pops it off. Calls foo(): Creates a foo execution context object and pushes it onto the call stack. Inside foo, runs console. Log( ' Inside foo ' ): Pushes the console. Log(‘Inside foo’) function call object. Executes it (prints " Inside foo " ). Pops it off. Pops the foo execution context object off the call stack. Back in bar, runs console. Log( ' End bar ' ): Pushes the console. Log(‘End bar’) function call object. Executes it (prints " End bar " ). Pops it off. Pops the bar execution context object off the call stack. Back in the global context, runs console. Log( ' End ' ): Pushes the console. Log(‘End’) function call object. Executes it (prints " End " ). Pops it off. Pops the global execution context object off the call stack. The call stack is empty → the event loop checks the microtask queue and macrotask queue for pending callbacks. 4. Single-Threaded Nature of JavaScript JavaScript executes one task at a time in each environment (browser tab, Node. Js process, or worker). There’s only one call stack, so a long-running synchronous operation will block rendering, event handling, and async callbacks. 5. Microtasks vs Macrotasks JavaScript schedules asynchronous work in two main buckets: Microtasks Always run before moving to the next macrotask. Examples: Promise. Then, queueMicrotask. Macrotasks Scheduled for execution in the main event loop cycle. Examples: setTimeout, setInterval, network events. Example: setTimeout (() =&gt; console. Log ( ' Macrotask ' ), 0); Promise. Resolve (). Then (() =&gt; console. Log ( ' Microtask ' )); // Output: // Microtask // Macrotask 6. Synchronous vs Asynchronous Execution JavaScript can run code in two different ways: synchronously (blocking) and asynchronously (non-blocking). Synchronous Execution (Blocking) Synchronous code runs line-by-line, top-to-bottom. The call stack must be fully cleared before any queued tasks can run. Example: console. Log ( ' A ' ); console. Log ( ' B ' ); console. Log ( ' C ' ); // Output: A, B, C Under the Hood: Push global execution context onto stack. Run console. Log( ' A ' ) → push, execute, pop. Run console. Log( ' B ' ) → push, execute, pop. Run console. Log( ' C ' ) → push, execute, pop. Stack empty → event loop checks queues. Blocking Example: console. Log ( ' Start ' ); for (let i = 0; i &lt; 1 e9; i ++) {} // Heavy computation console. Log ( ' End ' ); The loop keeps the call stack busy until it finishes, blocking everything else — including UI updates. Asynchronous Execution (Non-Blocking) Asynchronous execution allows JavaScript to handle long-running operations without pausing the rest of the program. Under the Hood — setTimeout: console. Log ( ' A ' ); setTimeout (() =&gt; console. Log ( ' B ' ), 0); console. Log ( ' C ' ); output: 1. Logs `A`. 2. Calls `setTimeout`: - Hands timer setup to the runtime ’ s Timer API. - Timer runs outside the engine. 3. Logs `C`. 4. Stack empty → run microtasks (none here) → run macrotask (`B`). Under the Hood — async/await: async function example () { console. Log ( ' 1 ' ); await Promise. Resolve (); console. Log ( ' 2 ' ); } console. Log ( ' A ' ); example (); console. Log ( ' B ' ); output: 1. Logs `A`. 2. Calls `example()` → logs `1`. 3. `await Promise. Resolve()` schedules continuation in microtask queue. 4. Logs `B`. 5. Stack empty → run microtask → logs `2`. 7. When to Use queueMicrotask vs setTimeout As I mentioned before, JavaScript schedules asynchronous work in two main ways: Microtasks — run right after the current task, before rendering. Macrotasks — run after microtasks and potentially after the browser has rendered. QueueMicrotask adds work to the microtask queue (runs sooner), while setTimeout schedules work in the macrotask queue (runs later). In short: queueMicrotask → great for immediate follow-up logic without blocking. SetTimeout → best for letting the browser update the UI or breaking up heavy tasks. Example: Execution Order console. Log ( ' 1: Synchronous start ' ); queueMicrotask (() =&gt; { console. Log ( ' 2: queueMicrotask ' ); }); setTimeout (() =&gt; { console. Log ( ' 3: setTimeout ' ); }, 0); console. Log ( ' 4: Synchronous end ' ); Output: 1: Synchronous start 4: Synchronous end 2: queueMicrotask 3: setTimeout Why? QueueMicrotask runs after the current synchronous code, before any setTimeout. SetTimeout waits until the next macrotask phase, after all microtasks finish. 7. Avoiding Long-Running Synchronous Operations Long-running synchronous operations are one of the biggest performance killers in JavaScript applications. Since JavaScript is single-threaded, any operation that monopolizes the call stack will freeze your entire application. Why Long-Running Operations Are Problematic When a synchronous operation runs for too long: UI becomes unresponsive - buttons don’t click, scrolling freezes Animations stutter - CSS animations and transitions halt Event handlers can’t fire - user input is ignored Timers are delayed - setTimeout callbacks can’t execute Network responses queue up - fetch/XHR callbacks are blocked Identifying Blocking Operations Common culprits include: // ❌ BAD: Processing large arrays synchronouslyfunction processHugeArray(items) { const results = []; for (let i = 0; i &lt; items. Length; i ++) { results. Push (expensiveOperation (items [i])); } return results; } // ❌ BAD: Complex calculationsfunction calculatePrimes(max) { const primes = []; for (let n = 2; n &lt; = max; n ++) { let isPrime = true; for (let i = 2; i &lt; = Math. Sqrt (n); i ++) { if (n % i === 0) { isPrime = false; break; } } if (isPrime) primes. Push (n); } return primes; } Strategies to Avoid Blocking 1. Chunking with setTimeout Break work into smaller chunks, yielding control back to the event loop between chunks: // ✅ GOOD: Process array in chunks async function processHugeArrayChunked (items, chunkSize = 100) { const results = []; for (let i = 0; i &lt; items. Length; i += chunkSize) { // Get a slice of the array (one chunk) const chunk = items. Slice (i, i + chunkSize); // Process each item in the chunk chunk. ForEach (item =&gt; { results. Push (expensiveOperation (item)); }); // Yield control back to the event loop (prevents UI blocking) await new Promise (resolve =&gt; setTimeout (resolve, 0)); } return results; } 2. Using requestIdleCallback Schedule non-critical work when the browser is idle: // ✅ GOOD: Process array in chunks async function processHugeArrayChunked (items, chunkSize = 100) { const results = []; for (let i = 0; i &lt; items. Length; i += chunkSize) { // Extract a portion of the array const chunk = items. Slice (i, i + chunkSize); // Process each item in the chunk synchronously chunk. ForEach (item =&gt; { results. Push (expensiveOperation (item)); }); // Yield control back to the event loop to avoid blocking await new Promise (resolve =&gt; setTimeout (resolve, 0)); } return results; } 9. Browser vs Node. Js Event Loop Browsers follow the WHATWG HTML event loop model. Node. Js uses event loop, which has multiple phases that affect callback order. 10. Rendering and Hydration Browsers render after microtasks are cleared at the end of a macrotask. Hydration in frameworks attaches JavaScript behavior to pre-rendered HTML — a framework concern, not part of the core event loop. 11. Q&amp; A Q1: What’s the difference between a task and a job? In spec terms, a job is any scheduled unit of work (microtask or macrotask). In browser docs, “task” usually means macrotask. Q2: When is the UI rendered? After the microtask queue is drained at the end of a macrotask. Q3: Why does my Promise resolve before setTimeout even with 0 ms delay? Promise callbacks are microtasks, and microtasks always run before any macrotask. Q4: How can I prevent my application from freezing during heavy computations? Break work into chunks using setTimeout, use Web Workers for CPU-intensive tasks, or leverage requestIdleCallback for non-critical work. References MDN: JavaScript Execution Model MDN: Microtask Guide Node. Js Event Loop Guide JavaScript. Info: Event Loop WHATWG HTML Spec: Event Loop Processing Model MDN: queueMicrotask MDN: setTimeout MDN: requestIdleCallback

Behind the Scenes of JavaScript: How Your Code Actually Runs

Supercharge Your Frontend: Tools & Tips Inside! 🚀

In this week's issue of Frontend Weekly, we delve into some transformative resources and guides for frontend developers. 'Supercharge Your Frontend Skills: 8 Must-Have Tools for Developers in 2024' highlights essential tools to keep pace with the ever-evolving technological landscape. For those looking to enhance user experience on websites, check out how to 'Preview Your Images Instantly Before Uploading,' which utilizes JavaScript and FileReader API. Gain a deeper understanding of JavaScript with 'Behind the Scenes of JavaScript: How Your Code Actually Runs,' offering insights into its execution model. With AI becoming integral to innovation, 'Empowering Developers and Fueling AI Adoption with AmpereOne Design Innovations' explores how AI can drive performance and efficiency. Lastly, learn about 'Claude API 429 Error Handling: Production-Ready Patterns in Python' to effectively manage rate limits and ensure seamless API operations. Whether you're enhancing your knowledge of CSS property binding, planning a technical transition, or building a CMS, this newsletter issue has something valuable for every frontend developer.

Stay ahead in frontend development with must-have tools for 2024, instant image previews, and insights into JavaScript execution. Discover AI integration benefits, effective API error handling, and learn to build a CMS with Next.js and React in this week's Frontend Weekly.

The article explores the use of CSS and JavaScript in creating stunning poster art, highlighting techniques and examples that blend technology with artistic design to produce visually compelling results.

Posters are among the most common art forms. You probably had a few of them on your wall as a child. They cover the full spectrum of people, places, and. . . The post Beautiful Poster Art Created with CSS  JavaScript appeared first on Speckyboy Design Magazine.

Beautiful Poster Art Created with CSS & JavaScript

"Master SVG, REST & React in Frontend Weekly!"

This week's edition of Frontend Weekly offers a wealth of resources for frontend developers looking to sharpen their skills and streamline their workflows. Dive into the world of SVGs with insights on using them effectively within Next.js applications, enhancing both simplicity and project efficiency. Understand the critical importance of RESTful routes in ensuring seamless communication between frontend and backend systems. Gain a deeper understanding of Angular's Dependency Injection system to boost your application development prowess. Learn how Tailwind CSS's utility-first approach can significantly speed up the creation of responsive, mobile-first designs directly from HTML. Enhance your React projects by mastering data fetching and management techniques that promise better performance. The edition also covers the intriguing features of lexical editors, providing a comparison to traditional text editors. For those eyeing a future in frontend development, a spotlight on essential skills for 2025 is a must-read. Lastly, be inspired by the blend of technology and art through CSS and JavaScript in generating beautiful poster artwork.

Frontend Weekly explores mastering SVGs in Next.js, highlights RESTful routing benefits, delves into Angular DI, and introduces Tailwind CSS for rapid interface building. Discover advanced React data fetching, the promise of lexical editors, and key skills for budding developers in 2025.

The article explores the growing trend of developers moving from traditional WordPress platforms to headless CMS solutions, highlighting the advantages in flexibility and performance for modern web development.

WordPress has powered millions of websites for years, but in 2025, more developers and startups are leaning toward headless CMS for flexibility, speed, and scalability. Let’s break down why this shift is happening. 1. Flexibility in Frontend With WordPress, you’re tied to PHP and themes. A headless CMS lets you build with modern frameworks like React, Next. Js, or Vue. This gives developers creative freedom without being limited by templates. 2. Performance &amp; Speed Traditional WordPress sites often suffer from slow load times due to plugins and bloated code. Headless CMS, on the other hand, delivers content via APIs, making it much faster and lightweight. 3. Multi-Channel Content Delivery WordPress is built mainly for websites. A headless CMS allows you to reuse the same content across web, mobile apps, IoT devices, and more—future-proofing your content strategy. 4. Better Security Since a headless CMS separates backend from frontend, there’s less surface for attacks compared to WordPress, which is notorious for plugin vulnerabilities. 5. Scalability Scaling WordPress can be painful when traffic spikes. With a headless setup, you can plug into CDNs and serverless infrastructure to handle growth seamlessly. When WordPress Still Works If you need a simple site or blog with minimal dev work, WordPress is still a solid option. But for startups aiming to grow and innovate, headless CMS offers far more in the long run. Final Thought WordPress isn’t going anywhere, but headless CMS is becoming the go-to for developers who want speed, flexibility, and future-proof solutions. It’s not about replacing WordPress entirely, but about choosing the right tool for the right job. Exploring headless CMS for your next project? RW Infotech helps startups and businesses transition from WordPress to modern, scalable headless solutions.

WordPress vs Headless CMS: Why Developers Are Making the Shift

Frontend Gems: From Solid JS to Creative Presets✨

In this week's issue of Frontend Weekly, we delve into exciting developments and techniques in frontend web development. First, for React developers, explore the advantages of switching to Solid.js, a framework that offers improved performance and reactivity. We also examine why more developers are transitioning from WordPress to headless CMS platforms, which offer greater flexibility and enhanced performance for modern web projects. Learn about responsive typography and how to implement scalable, adaptable font solutions for a better user experience across various devices. Additionally, discover ten essential JavaScript animations that can add dynamic visual effects to your web projects, alongside insight into verifying GDPR-compliant cookie consent mechanisms. Performance improvements through preloading techniques on the DEV and Forem platforms are discussed, focusing on optimizing home feed and sidebar load times. For those using Riot.js, learn how to create a sophisticated menu component. Lastly, photographers can explore over 20 artistic Lightroom presets to creatively enhance their images.

This week in Frontend Weekly: Discover why Solid.js is a compelling alternative for React devs, explore the shift to headless CMS for flexibility, and learn responsive typography techniques. Plus, find out performance tips for DEV and Forem platforms and review artistic Lightroom presets for photography enthusiasts.

This article provides a step-by-step guide on implementing a custom React hook, 'useFetch', to simplify data fetching in React applications.

Introduction React has revolutionised the way we build web apps with its component-based architecture and declarative style. As your projects grow, it’s important to abstract logic into reusable, composable pieces—and that’s where custom hooks shine. There are numerous questions about React hooks in interviews. One of the most frequently asked interview questions for React developers is: “How do you create a custom hook for fetching data? ” In this blog, we’ll dive into building a useFetch hook from scratch and understand its benefits. What Are Custom Hooks? Custom hooks in React let you reuse logic across components. They start with use and allow you to encapsulate behaviour using built-in hooks like useState, useEffect, etc. UseFetch Hook Let’s jump into the implementation: import { useEffect, useState } from ' react ' ; const useFetch = (url) =&gt; { const [data, setData] = useState (null); const [error, setError] = useState (null); const [loading, setLoading] = useState (true); useEffect (() =&gt; { const controller = new AbortController (); const signal = controller. Signal; const fetchData = async () =&gt; { try { const response = await fetch (url, { signal }); if (! Response. Ok) { throw new Error (`HTTP error! Status: ${ response. Status } `); } const result = await response. Json (); setData (result); } catch (error) { if (error. Name === ' AbortError ' ) { console. Log ( ' Fetch aborted ' ); } else { setError (error); } } finally { setLoading (false); } }; fetchData (); return () =&gt; { controller. Abort (); }; }, [url]); return { loading, data, error }; }; export default useFetch; Now, let ' s understand the code step by step: 1. State Management We declare three pieces of state using useState: data: The API response data error: Any error that occurs during the fetch call loading: A boolean to represent the loading state 2. Effect Hook for Fetching useEffect is triggered when the url changes. This ensures our hook refetches data when needed. 3. AbortController This is one of the interesting things. We use AbortController to cancel the fetch request if the component unmounts. When an API call is in progress, if the user unmounts the component, the AbortController will cancel the API call. It helps to avoid memory leaks and unnecessary state updates. Const controller = new AbortController (); const signal = controller. Signal; The signal is passed to the fetch API. In case the component unmounts, the fetch is aborted cleanly: return () =&gt; { controller. Abort (); }; 4. Error Handling We check if the fetch response is OK; otherwise, we throw an error: if (! Response. Ok) { throw new Error (`HTTP error! Status: ${ response. Status } `); } If the error is due to an abort, we skip setting the state. For other errors, we store them in the error. 5. Return Values The hook returns { loading, data, error }, making it easy to consume in any component. Example Usage Here’s how you can use the useFetch hook in a component: import React from ' react ' ; import useFetch from ' . /useFetch ' ; const UsersList = () =&gt; { const { loading, data, error } = useFetch ( ' https: //jsonplaceholder. Typicode. Com/users ' ); if (loading) return &lt; p &gt; Loading. . . &lt; / p &gt; ; if (error) return &lt; p &gt; Error: { error. Message } &lt; / p &gt; ; return (&lt; ul &gt; { data. Map ((user) =&gt; (&lt; li key = { user. Id } &gt; { user. Name } &lt; / li &gt;)) } &lt; / ul &gt;); }; export default UsersList; Conclusion The useFetch hook is a simple yet powerful abstraction that encapsulates async behaviour and makes our components cleaner and more focused. Whether you’re preparing for interviews or building robust frontends, knowing how to craft such hooks is essential. If you liked this blog and want to learn more about Frontend Development and Software Engineering, you can follow me on Dev.

Implement the useFetch custom hook in React

🚀 Master JavaScript & React 19.2 News Inside!

This week's Frontend Weekly is packed with insightful and practical articles for web developers. Chris Coyier explores the cutting-edge use of web components to elevate web functionality and the user experience. For young aspiring web designers, a comprehensive guide outlines steps to launch a freelancing career on Fiverr even as young as 14. If you're confident in your JavaScript skills, a challenging read encourages mastery with advanced concepts. Improve your notification UX with practical design guidelines that focus on clarity and functionality. Deploying a React app on Vercel or Netlify? There's an easy guide to tackling 404 errors. Enhance your design processes with a practical guide on intent prototyping part 2. Also, learn how to implement the 'useFetch' custom hook for simplified data fetching in React. Finally, React 19.2 is here and it brings features that make development workflows smoother, aiming to increase developer productivity significantly.

This week's highlights: Chris Coyier on web components, freelancing guide for young designers on Fiverr, JavaScript mastery challenges, enhancing notification UX, resolving React 404 errors on Vercel/Netlify, and new productivity features in React 19.2. Dive deeper into these trending topics in Frontend Weekly!

This article discusses the importance of using PerformanceNavigationTiming to accurately measure website speed and highlights what developers might miss without it.

You’ve optimized your JS bundle, minified your CSS, and lazy-loaded everything that moves. Lighthouse gives you green scores. DevTools says you ' re fine. But users are still complaining the site feels slow. So what gives? The real issue? Many teams still rely on metrics that don’t reflect what users actually feel, things like outdated timing APIs, synthetic tests, and guesswork stitched together post-mortem. The browser already knows exactly how long things took. You just need to ask it the right way. That’s where the PerformanceNavigationTiming API comes in, giving you a modern, precise, and reliable view into what your users are actually experiencing. So how do you move past guesswork and into something measurable? What is PerformanceNavigationTiming? It’s the modern way to measure how a page actually loads from the browser ' s point of view. It lives inside the Navigation Timing Level 2 spec, and provides a high-resolution, single-object summary of every major milestone in the page lifecycle. Instead of messing with performance. Timing, you can now do this: performance. Timing was verbose, required manual calculations, and returned inconsistent results across browsers. It felt like trying to read a receipt from a thermal printer that had been in someone’s wallet for six months. Const [navigation] = performance. GetEntriesByType ( " navigation " ); console. Log (navigation); Clean, modern, and no manual math required. Why You Should Use It PerformanceNavigationTiming gives you: Microsecond-level accuracy Clean, consistent access to domContentLoaded, loadEventEnd, responseStart, and more A full timeline of page load phases Support across all major modern browsers Lighthouse gives you important baseline data, but it can ' t tell you if your site feels slow to someone on crowded WiFi with 20 browser extensions. That ' s where PerformanceNavigationTiming shines, it measures real user experience in production. When to Use It Real User Monitoring (RUM) Feature rollouts where load performance matters Tracking deploy regressions Internal dashboards or performance observability If your business depends on speed, you need this data. What Metrics Can You Extract? This API is basically your browser’s flight data recorder: const [nav] = performance. GetEntriesByType ( " navigation " ); console. Log ( " Time to First Byte: " , nav. ResponseStart - nav. StartTime); console. Log ( " DOM Loaded: " , nav. DomContentLoadedEventEnd - nav. StartTime); console. Log ( " Full Load: " , nav. LoadEventEnd - nav. StartTime); Other useful fields include: type: navigation type (navigate, reload, etc.) transferSize: how much data was transferred decodedBodySize: uncompressed size of the response body Pair this with first-contentful-paint and largest-contentful-paint (via PerformanceObserver) for a holistic view. Real-World Usage Here’s how to integrate it in a modern app. We’ll include basic error handling too. Window. AddEventListener ( " load " , () =&gt; { const [nav] = performance. GetEntriesByType ( " navigation " ); fetch ( " /perf-metrics " , { method: " POST " , keepalive: true, headers: { " Content-Type " : " application/json " }, body: JSON. Stringify ({ ttfb: nav. ResponseStart - nav. StartTime, domLoad: nav. DomContentLoadedEventEnd - nav. StartTime, fullLoad: nav. LoadEventEnd - nav. StartTime, }) }); }); You can also use navigator. SendBeacon() for less intrusive delivery. Here’s a slightly more robust version with basic retry logic: function sendMetrics (data, retries = 1) { fetch ( " /perf-metrics " , { method: " POST " , keepalive: true, headers: { " Content-Type " : " application/json " }, body: JSON. Stringify (data) }). Catch ((err) =&gt; { if (retries &gt; 0) { setTimeout (() =&gt; sendMetrics (data, retries - 1), 1000); } else { console. Warn ( " Failed to send performance metrics " , err); } }); } window. AddEventListener ( " load " , () =&gt; { const [nav] = performance. GetEntriesByType ( " navigation " ); sendMetrics ({ ttfb: nav. ResponseStart - nav. StartTime, domLoad: nav. DomContentLoadedEventEnd - nav. StartTime, fullLoad: nav. LoadEventEnd - nav. StartTime, }); }); Edge Cases and Gotchas Metrics may be 0 or missing if loaded from bfcache or pre-rendered Works only on full-page navigation (not SPA route changes) Data is only available in the active session; you must read it before unload For SPAs, you’ll need a hybrid approach with PerformanceObserver and your router. NavigationTiming only captures full-page loads, so for route-based performance insights, you ' ll need to observe paint and interaction timing manually at each route change. Many devs also pair this with web-vitals or custom observers to track Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS) on transitions. Wrap-Up: Don’t Guess, Measure Real performance isn’t about synthetic scores. It’s about all those moments your users feel the site drag, right after you thought you did everything right. Remember the bundle you optimized and the CSS you trimmed? This is how you actually find out if it worked. It’s about real users, real data, and real time. If you want to build fast apps, measure what " fast " actually means in the browser. PerformanceNavigationTiming is how. But only if you use it early, often, and in production. If you ' re already using a framework like React or Next. Js, consider wrapping the collection logic in a custom hook or integrating it with your existing analytics layer. Your users are already generating performance data, you just need to catch it before it disappears.

Your Site Feels Fast, Until It Doesn't: What Devs Miss Without PerformanceNavigationTiming

Frontend Insights: Mobile First, React 19 & More!

In this issue of Frontend Weekly, we delve into crucial topics shaping modern web development. We start with an insightful discussion on choosing between mobile-first and desktop-first strategies in web development, emphasizing their impact on user experience and design efficiency. A deeper look is given to logical shorthands in CSS, which can streamline your coding process by enhancing readability and efficiency. The importance of PerformanceNavigationTiming in accurately measuring website speed is highlighted, pointing out common developer oversights. For Angular enthusiasts, we explore the advantages of using composition over inheritance in component forms, enhancing code flexibility and maintainability. React developers will benefit from guidance on optimizing render performance through memoization using useMemo and React.memo. The issue also offers an in-depth explainer on JavaScript's execution context, detailing interactions between the call stack and lexical environment. Additionally, dive into the exciting new features of React 19, and improve your Java knowledge with insights on float and long literals suffixes.

This week's Frontend Weekly covers mobile-first vs desktop-first strategies, CSS shorthands, website speed with PerformanceNavigationTiming, and more. Discover React 19's new features and learn about memoization in React for better performance.

I'm creating this article for a newsletter, give me a 2 sentence summary of the article.  Make it factual and professional.  Do not mention the article title or source, just the summary of the article.

The best articles, links and news related to Frontend Development delivered once a week to your inbox.