标签：#react

Prologue A while ago, I decided to develop a fully accessible main navigation component in React and write a series of articles documenting the steps it took to create a non-trivial accessible component. In my last development article , I covered using an array of navigation objects to determine conditions and shift focus between components. This article covers Tab Key navigation. Note : This article is one of a series demonstrating building a React navigational component from scratch while considering accessibility through the process. The articles are accompanied by a GitHub repository with releases tied to one or more articles; each builds on the previous one until a fully implemented navigation component is complete. Each release and its associated tag contain fully runnable code for the article. The code discussed in this article is available in the release. and may be downloaded at release 0.7.0 . Links in the article will take you to the proper file in the tagged GitHub Repository. Because the code for this release is scattered across the useNavigation hook, line numbers are added to make it easier to locate in the linked GitHub file. Line numbers are also provided for those who would like to follow along with a downloaded copy. While code examples are written in JavaScript for brevity, all actual code is written in Typescript and targets React 19.x, all while using vanilla CSS. Examples use Next.js v16.x, which is not required to run the navigation component. You can view the requirements for the Tab Handling Keyboard Release along with previous requirements. Content Links Introduction Acceptance Criteria Tab Key Handling Link Button Shift+ Tab Key Handling Link Button Introduction As I've mentioned in earlier articles, keyboard handling has two disparate audiences: those who can see the screen and those who rely on a screen reader. The arrow, home and end keys, for the most part, rely on a user knowing where they are and being able to discern where they wan

A production-minded walkthrough with a live Next.js demo — JSON.parse() vs partial-json + Zod for real-time AI dashboards. canonical: https://gauravthorat-portfolio.vercel.app/blog/react-llm-stream-json-parser

From Scratch: How to Integrate Reasonix CLI into the HagiCode System This article shares the complete technical practice of integrating Reasonix CLI as a first-class Agent Provider into the HagiCode system, covering three-layer architecture design, key technical decisions, and frontend and backend implementation details. Background Reasonix CLI, as it happens, is a pretty interesting thing. It's an AI code assistant tool based on ACP (Agent Communication Protocol), providing powerful streaming and session management capabilities. Actually, in the HagiCode.Libs layer, we've already completed its underlying implementation. It's just that these components are still in an isolated state, like beautiful pearls that haven't been strung into a necklace. Users cannot use it through Hero profession selection, session execution paths, or monitoring panels, which is somewhat regrettable. The problem we face is: how to elevate Reasonix to the same level as Codex, Hermes, and other first-class Agent Providers, implementing complete backend routing and frontend display? This isn't simply a matter of registering an enum value. It requires building a complete chain from low-level abstraction to user interface. It's like building a house—you can't just lay a foundation and call it done. You have to build the walls and put up the roof. The challenge of this integration lies in the fact that Reasonix, as a local CLI tool, has its own personality and temperament. For example, it doesn't need a connection string—all parameters are configured by the user at runtime; it might not even be installed, requiring graceful degradation; it's compatible with anthropic series models, but also has its own ACP-specific parameters like effort, budget, and so on. It's like a person with their own unique way of handling things—you can't force it. After careful architectural design and multiple rounds of discussion, we finally adopted a clear three-layer architecture solution, successfully integrating R

We've all been there. Your first encounter with authorization looks something like this: if ( user . role === " ADMIN " ) { // allow access } It works. It's simple. It ships fast. And then, three months later, your application has grown, requirements have shifted, and you're staring at a codebase where authorization logic is scattered everywhere—APIs, services, UI components—like a puzzle that nobody remembers how to solve. The truth is: this approach doesn't scale. Not because it's inherently flawed, but because it conflates two very different concepts that should never be mixed. The Core Mistake: Confusing Identity with Capability Here's the problem we're actually trying to solve. As your application grows, you inevitably end up writing code like this: if ( user . role === " BRANCH_MANAGER " || user . role === " SYSTEM_ADMIN " ) { // allow access } Then a stakeholder asks: Can we create a hybrid role? Or: We need Auditors who can export reports but not edit records. And suddenly your role logic explodes into an unmaintainable mess. The fix isn't adding more conditions. The fix is understanding that roles and permissions answer fundamentally different questions. Roles Define Identity Roles are categories of users. Examples: SYSTEM_ADMIN CLIENT BRANCH_MANAGER AUDITOR Roles answer: Who is this user? They establish high-level authorization boundaries. Examples: Staff Portal vs Customer Portal Internal Admin Area vs Public Application Employee Features vs Client Features Think of roles as identity labels . Permissions Define Capability Permissions represent atomic actions. Examples: LOAN_APPROVE USER_DELETE REPORT_EXPORT ACCOUNT_EDIT Permissions answer: What can this user actually do? Your application should not constantly ask: What role are you? Instead, it should ask: Do you have permission to perform this action? Because: Users have Roles Roles contain Permissions Code checks Permissions That distinction changes everything. Always Decouple Identity from Capability T

Introduction People keep telling me TanStack Start is kind of a big deal, and I wanted to...

Clean Architecture on the Frontend: Beyond Smart and Dumb Components djblackett djblackett djblackett Follow Jun 7 Clean Architecture on the Frontend: Beyond Smart and Dumb Components # react # frontend # architecture # typescript Comments Add Comment 14 min read

This is a submission for the GitHub Finish-Up-A-Thon Challenge What I Built CampusBeat 2.0 — a React Native campus super-app for students across 17 colleges in Odisha, India. It started in 2023 as a simple notice board aggregator: scrape college websites so students didn't have to visit them. It worked. Students used it. Then life happened, and it sat untouched on GitHub for three years. This challenge gave me the push to finally open that repo again. What I found was equal parts embarrassing and educational. What it is now: 📰 Real-time notices for 17 colleges — ITER, KIIT, NIT Rourkela, IIT, and more 🎨 Complete UI overhaul — warm cream × charcoal × coral editorial design 🃏 3D tiltable campus identity card you can share with friends 🔖 Bookmarks — save any notice, grouped by college 💬 Real-time campus chat rooms powered by Socket.io 🛒 Campus marketplace — buy/sell within your college 🔔 Push notifications via Firebase Demo The original app from July 2023: LinkedIn post CampusBeat 2.0 — running on device: Onboarding screen - with beautiful animation Onboarding.mp4 - Google Drive drive.google.com Login screen — editorial serif heading, Lottie animation, warm ink hero Register screen — custom college picker bottom sheet with live search Home screen — quote card, college notice feed, floating tab bar Profile screen — 3D tiltable campus card with holographic shimmer Share modal — drag to rotate the card, share natively News Explorer — college chips, notice type tabs, live banner Marketplace — buy and sell within your college Bookmark - your persistent news bookmark.mp4 - Google Drive drive.google.com Chat screen - live interaction within colleges chat.mp4 - Google Drive drive.google.com The Comeback Story What I found after 3 years Opening an old repo is humbling. Here is what I walked into. The dead API. The home screen showed a daily quote — except quotable.io had shut down. Every user was silently seeing the hardcoded fallback for three years: "Villains are not bad, the

Forms are everywhere in mobile apps - authentication flows, data entry, support requests, onboarding... If your app has a login screen, a form is likely the first thing a new user interacts with. That makes accessibility here not just a nice-to-have, but a first impression. The problem is that forms are consistently one of the most broken areas for assistive technology users. Missing labels, keyboard traps, silent validation errors, focus going nowhere after submission - these are issues that make an app unusable for a significant portion of your users. This guide is a complete reference for building forms that work for everyone in React Native, whether users are navigating with their fingers, an external keyboard, a screen reader or voice input. Code examples throughout show both what to do and why . A fully working demo repo is available to fork and test on a real device - check it out at rn-accessible-form-demo . Labels Every form field needs a label, whether a text input, checkbox or radio/submit buttons. No exceptions. Don't rely on placeholders Placeholder text disappears the moment a user starts typing. Screen readers will read it initially, but once it's gone, there's no way for them to recall what the field was for without clearing their input. Placeholders are useful as hints, not as labels. Use a visual label + accessibilityLabel To avoid screen readers announcing the same information twice (once for the visual label, once for the input), hide the visual label from assistive technology and put the full label on the input itself. < Text importantForAccessibility = "no" accessibilityElementsHidden > Email address* </ Text > < TextInput accessibilityLabel = "Email address, required" /> importantForAccessibility="no" handles Android, and accessibilityElementsHidden handles iOS. Together they tell assistive technology to skip the visual label entirely - the accessibilityLabel on the TextInput is the single source of truth for screen readers. Required fields De

Section 1: Getting Started with Cypress 1. Installing and Setting Up Cypress Prerequisites Before installing Cypress, ensure you have Node.js installed on your machine. Cypress requires Node.js 18.x or 20.x and above. You should also have an existing React project or create a new one. Check your Node.js version by running this command in your terminal: node --version # Should output v18.x.x or higher Creating a React Project (Optional) If you don't have an existing React project, create one using Vite which is the recommended approach for new React projects: npm create vite@latest my-react-app -- --template react cd my-react-app npm install Installing Cypress Navigate to your React project directory and install Cypress as a development dependency. Cypress is a fairly large package, so the installation might take a minute or two: npm install cypress --save-dev # Or using yarn yarn add cypress --dev Opening Cypress for the First Time After installation, open Cypress for the first time. This will create the initial folder structure and configuration files: npx cypress open When Cypress opens for the first time, you'll see a welcome screen where you can choose between E2E Testing and Component Testing. Select E2E Testing to get started with end-to-end tests. Cypress will then prompt you to choose a browser. You can select Chrome, Firefox, Edge, or Electron. Choose your preferred browser and click Start E2E Testing in [Browser] . Adding NPM Scripts Add convenient scripts to your package.json for running Cypress tests: { "scripts" : { "dev" : "vite" , "build" : "vite build" , "cy:open" : "cypress open" , "cy:run" : "cypress run" , "test:e2e" : "start-server-and-test dev http://localhost:5173 cy:run" } } Tip: Use npm run cy:open for interactive development with the Cypress Test Runner. Use npm run cy:run for headless execution in CI/CD pipelines. 2. Understanding Cypress Project Structure Project Directory Overview After initializing Cypress, you'll notice several new fold

This is the third and final part of my first React project for the Frontend Mentor's Digital Bank Landing Page Challenge . I'm excited to say that I finally finished it. Live Demo: https://bank-landing-page-react-gmtz.vercel.app/ Github Repo: https://github.com/ayra-baet/bank-landing-page-react Learning Component Reusability Beyond Small Elements At first, I thought this final part would mostly involve finishing the Articles and Footer. But while building, I realized something more important: React's reusability isn't limited to small UI elements like buttons or cards; entire sections can be reusable too. Earlier in this project, I reused a single Button component across the header, hero, and footer. This time, I noticed that the Features and Articles sections shared almost the same structure: both had an h2 heading both used a grid layout both wrapped child components The only real difference was that the Features section included a description paragraph. That immediately felt like a perfect use case for a reusable component with conditional rendering. So I created a reusable Section component: function Section ({ backgroundColor , title , description , children }) { return ( < section className = { backgroundColor } aria-labelledby = { ` ${ title } -heading` } > < div className = "container section__container" > < div className = "section__header" > < h2 id = { ` ${ title } -heading` } > { title } </ h2 > { description && < p > { description } </ p > } </ div > < div className = "section__grid" > { children } </ div > </ div > </ section > ); } Then I reused it inside my LandingPage component: function LandingPage () { return ( <> { /* other LandingPage JSX */ } < section id = "features" > < Section backgroundColor = "section--gray-100" title = "Why choose Digitalbank?" description = "We leverage Open Banking to turn your bank account into your financial hub. Control your finances like never before." > < Features /> </ Section > </ section > < section id = "articl

Why I stopped reading "❌ Old vs ✅ New" posts I used to scroll past them. Then I started ignoring them. Now? I don't read them at all. Not because they're "wrong". But because they're incomplete . The problem with "❌ Old vs ✅ New" These posts make everything look easy: One error One fix One clean "New Way" Three bullet points Save the post Done. Right? No. What these posts don't show you 🔹 The 200 failed deployments before that one working fix 🔹 The 300+ errors you solve along the way — not just one 🔹 The Vercel pipelines that break for no documented reason 🔹 The "New Way" that also fails in production 🔹 The gap between documentation and reality What happens in production That clean "New Way" code snippet? It might work on your local machine. But in production, with real traffic, real data, real edge cases? It can fail. Hard. And no three-line post prepares you for that. Why I stopped reading Because these posts teach me solutions to problems I don't have yet . But they don't teach me how to think when nothing works. They don't teach me: How to read error logs properly How to trace a pipeline failure across services How to stay consistent after multiple failed deploys How to know when the "New Way" is actually worse What actually helped me Not templates. Not shortcuts. Real experience: 200+ failed deployments 300+ errors solved (one by one) Broken pipelines fixed by understanding, not copy-paste Production live — not a "demo" or a "tutorial" This is not a "❌ vs ✅" post I'm not giving you a "Here's the fix". Because the real fix isn't three lines of code. It's patience. It's persistence. It's failing and getting back up. And no post can save that to your bookmarks. 👇 Have you ever followed a "New Way" post and had it fail in production?

Hi everyone, Kacper and Filip from Software Mansion here. This week, TanStack Start is once again in the spotlight. The React Compiler in Rust is on its way. React Router and Remix shipped important security patches – update immediately. There's also a fresh batch of releases from TanStack Form, XState Store, shadcn, React Aria, and more. On the React Native side, this week was dominated by App.js Conf 2026 in Kraków. Gesture Handler 3.0, Swift Package Manager support for React Native, and Legend List 3.0 were among the highlights, alongside Expo announcements like EAS Observe. Let's go! 💡 Subscribe to the official newsletter to receive an email every week! 💸 Sponsor Atomic CRM: The Open-Source CRM Toolkit for Developers Stop struggling with locked-in CRMs and expensive seats. Atomic CRM gives you the power of a professional CRM with the total freedom of open-source. It’s the only toolkit that combines a high-end user experience with data sovereignty. No more lock-in, no more "renting" your contacts. Everything you need is already there: Native Mobile App for on-the-go access. Intuitive Kanban Boards for pipeline management. Built-in Email Tracking to stay on top of leads. Free SSO for seamless team integration. MCP Server Integration for productivity gains. Why settle for a black box SaaS when you can own the entire platform? Deploy Atomic CRM on your own infrastructure in minutes and regain control over your most valuable asset: your data. ⚛️ React TanStack Start Gaining Momentum: 📜 TanStack Start Adds First-Class Rsbuild Support - TanStack Start now supports Rsbuild / Rspack alongside Vite via a new plugin adapter, covering SSR, streaming, HMR, Server Functions, and RSC. 📜 Lovable - Building apps using TanStack Start - The AI App builder is now using TanStack Start with SSR by default for all new projects. 📜 The Conductor Rewrite: What They Changed to Make It Fast - Migrating their Tauri desktop app from React Router to TanStack Router significantly reduced re-re

Building a Real-Time Chat Feature with Django Channels and React Real-time features have become table stakes for modern web applications. Whether it is a customer support widget, a collaborative tool, or a social platform, users expect instant communication without page refreshes. In this article, I will walk through how we built a production-ready real-time chat feature using Django Channels and React at UCDREAMS. Why Django Channels? Django is traditionally synchronous. It handles one request at a time per worker. This works fine for standard HTTP requests, but WebSocket connections require persistent, bidirectional communication. Django Channels extends Django to handle WebSockets, background tasks, and asynchronous protocols alongside traditional HTTP. The beauty of Channels is that it does not replace Django. It layers on top, letting you keep your existing models, ORM, authentication, and admin panel while adding real-time capabilities. For a team already invested in Django, this is a massive advantage over introducing an entirely separate real-time server. Setting Up the Backend Start by installing Django Channels and a channel layer. Redis is the recommended backend for production use: channels == 4.0 . 0 channels - redis == 4.2 . 0 daphne == 4.0 . 0 Configure your Django settings: INSTALLED_APPS = [ ... " channels " , ] ASGI_APPLICATION = " your_project.asgi.application " CHANNEL_LAYERS = { " default " : { " BACKEND " : " channels_redis.core.RedisChannelLayer " , " CONFIG " : { " hosts " : [( " 127.0.0.1 " , 6379 )], }, }, } Building the WebSocket Consumer The consumer handles WebSocket connections: import json from channels.generic.websocket import AsyncWebsocketConsumer class ChatConsumer ( AsyncWebsocketConsumer ): async def connect ( self ): self . room_name = self . scope [ " url_route " ][ " kwargs " ][ " room_name " ] self . room_group_name = f " chat_ { self . room_name } " await self . channel_layer . group_add ( self . room_group_name , self . cha

Ever felt like your fitness app is just a fancy spreadsheet? You log a high uric acid result from your latest blood test, yet it still suggests a high-protein steak dinner for "gains." In the world of AI Agents , we are moving past static prompts. Today, we’re building a Self-Correcting Health Agent using LangGraph , LangChain , and OpenAI . This agent doesn't just chat; it monitors laboratory biomarkers like cholesterol and uric acid, maintains a long-term memory via SQLite , and dynamically rewrites your lifestyle plan using advanced OpenAI Function Calling . If you've been looking to master autonomous health agents and complex state management, you're in the right place. Let's dive into the future of personalized wellness. The Architecture: State-Driven Personalization Unlike a standard linear chain, a health agent needs to "loop" and "reason." If the agent detects an abnormal lab value, it must trigger a specific logic branch to revise existing plans. Here is how the data flows through our LangGraph system: graph TD A[User Input/Lab Report] --> B{Analyze Biomarkers} B -- Abnormal Found --> C[Tool: Plan Rewriter] B -- All Normal --> D[Tool: Maintenance Plan] C --> E[Update SQLite Memory] D --> E[Update SQLite Memory] E --> F[Output Final Recommendation] F --> G[Wait for Next Input] G -- New Data --> B Prerequisites To follow along, you'll need: LangGraph & LangChain : For orchestration. OpenAI API : For the reasoning engine (GPT-4o recommended). SQLite : To handle persistent state and "memory" of your health journey. Step 1: Defining the Agent State In LangGraph, the State is the source of truth. We need to track the user's current health metrics and their active diet plan. from typing import Annotated , TypedDict , List from langgraph.graph import StateGraph , END import operator class HealthState ( TypedDict ): # We use operator.add to keep a history of logs logs : Annotated [ List [ str ], operator . add ] biomarkers : dict current_diet_plan : str revision_req

We run an app where you describe a task and an AI agent does it. The first step after you hit submit is a planning call: POST /api/web/tasks/plan, which turns your free text into a structured plan the agents can pick up. One submit should mean one plan. While testing locally I noticed two plan requests going out per submit. Same payload, fired back to back. The agents handled it fine because the second plan just overwrote the first, but it bothered me. A doubled write is a doubled write, and the next one might not be idempotent. First wrong guess: a double-click My first assumption was the obvious one. The user double-clicks, or the button is not disabled during the request, so two clicks sneak through. I added the disabled state, watched the network tab, and got two requests from a single click. So it was not the button. The thing I had stopped seeing The submit logic lived in an effect. When the form phase flipped to submitting, the effect ran and fired the plan call. There was a second effect too: when the user changed the tier or output format mid-flow, a matching effect re-planned, because a different tier means a different plan. Neither effect had any guard against running twice. And in development, React StrictMode mounts every component, unmounts it, and mounts it again, on purpose, to surface effects that are not safe to re-run. My plan effect was exactly the kind of effect StrictMode is built to expose. The double mount fired it twice. The detail that made it click: I built the app for production and watched the network tab there. Exactly one request. The double was a development-only artifact of StrictMode doing its job. The bug was never in production traffic, but the fact that StrictMode could double it meant my effect was not safe, and an unsafe effect is a latent bug waiting for a real remount. The fix: ref guards set before the await, not reset in cleanup The instinct is to reach for a boolean. The catch is where you reset it. If you reset the guard

I am a full time trader and part time developer based in Karachi, Pakistan. A year ago I sat down to research how to properly compare brokers on the Pakistan Stock Exchange. Three hours later I had 11 browser tabs open, two of which had broken links, one had data from 2019, and none of them had everything I needed in one place. So I built PSX Pulse. What PSX Pulse Is PSX Pulse is a free stock market education platform for Pakistani retail investors. Everything a beginner needs to start investing in Pakistan's stock market — in one place. What is live right now: 35 verified SECP-licensed brokers with full contact details Complete mutual funds directory across 15 AMCs DCA calculator with realistic return scenarios 30-day beginner learning path Islamic investing guide PSX sector guide covering 12 sectors IPO tracker 100-term searchable glossary Weekly market recap every Friday All free. No login required. Live at: https://psxpulse.xwen.com.pk/ The Stack React + Tailwind CSS for the frontend. Vercel for hosting — free tier handles everything comfortably. No backend for most features — localStorage and static data keeps it fast and simple. Newsletter handled via a serverless Vercel function writing to a private GitHub CSV. What I Learned Building This Solo 1. The information gap in emerging markets is enormous Pakistani investors are not underserved because nobody cares. They are underserved because nobody with the technical skills to build tools also has the market knowledge to know what those tools should do. Being both a trader and a developer turned out to be the actual unfair advantage. 2. Free tools beat content for SEO My DCA calculator and broker directory pages get more consistent Google clicks than any article I have written. Tools solve a specific search intent that AI overviews do not replace — people still need to interact with a calculator, not just read about one. 3. Building in public is uncomfortable but worth it Sharing what you are building before it i

Liquid syntax error: Variable '{{% raw %}' was not properly terminated with regexp: /\}\}/

AWS Face Liveness has native SDKs for iOS and Android. That works well if you are building fully...

Vercel has released Next.js 16.2, featuring performance enhancements that make development startup 400% faster and rendering up to 60% quicker. The update includes AI-assisted development tools, improved Turbopack efficiency, and better error reporting. Migration from Next.js 15 is supported, and compatibility is set for Node.js 20.9 and TypeScript 5.1 or newer. By Daniel Curtis

There's a specific kind of bad animation I notice immediately: the count-up stat that stutters as it ticks, the progress bar that lags a frame behind your scroll, the "active" tab underline that snaps instead of glides. None of it is broken, exactly. It just feels cheap. And nine times out of ten, the cause is the same — the animation is being driven through React state, so every frame triggers a re-render, and the main thread can't keep up. I build motion-heavy interfaces for a living, mostly in Next.js 16 and React 19, and I've landed on a small set of patterns that stay smooth because they bypass React's render loop entirely . They lean on Motion — the library formerly known as Framer Motion. It went independent and got renamed in 2025, so the package is now motion and the import you want is motion/react , not framer-motion ( the APIs are identical, only the import path changed ). Here are three I reach for constantly, plus the reduced-motion discipline that should wrap all of them. The mental model: MotionValues over state The single idea that fixes most jank: a MotionValue is a value Motion tracks outside of React. When it changes, Motion updates the DOM directly via transform or opacity — it does not call setState , so your component doesn't re-render. That's the whole trick. A number ticking from 0 to 4,200 should touch the DOM ~60 times a second and re-render React zero times. If a value changes every frame, it should live in a MotionValue, not in useState . State is for things that change when a user does something; MotionValues are for things that change continuously. Keep that line in your head and the rest of this falls out naturally. 1. A reading-progress bar with useScroll + useSpring The bar at the top of an article that fills as you read. The naive version listens to scroll events and sets state — which is exactly the re-render trap. Motion's useScroll hands you scroll position as a MotionValue already, so there's nothing to re-render. useScroll retu