标签：#react

"Not recommended for beginners." That's what the task sheet said about Level 3 of the Oasis Infobyte Web Development & Design internship. Naturally, that's the one I picked. The Task Level 3 has exactly one task — build a full-stack Pizza Delivery Application. Not a landing page, not a CRUD demo. A real platform: user authentication with email verification, a custom pizza builder, live payments, inventory management, an admin system, and real-time order tracking. The Stack React + Vite + Tailwind on the frontend, Node.js + Express on the backend, MongoDB Atlas for the database, Socket.IO for real-time updates, Razorpay for payments. Deployed across Vercel (frontend) and Railway (backend). What I Built The user journey: register → verify email (Nodemailer) → log in (JWT) → build a pizza in 4 steps (base, sauce, cheese, veggies) with dynamic pricing → pay through Razorpay's checkout → track the order live on a progress bar. The admin side: a separate authenticated dashboard managing a 20-item inventory with low-stock indicators and inline editing, plus order status management. When an admin updates an order's status, the customer's screen updates instantly — no refresh — via Socket.IO rooms per order. Behind the scenes: stock auto-decrements on every successful payment, a node-cron job emails hourly low-stock alerts, and Razorpay payments are verified server-side with HMAC-SHA256 signatures — never trusting the client. What Actually Taught Me Things The features were the syllabus. The debugging was the education. MongoDB Atlas DNS failures — my local machine couldn't resolve mongodb+srv:// connection strings because a VPN was interfering with DNS SRV lookups. Solution: the legacy non-SRV connection string format. Lesson: know what your connection string actually does. Railway's SMTP block — my deployed backend couldn't send verification emails because Railway's free tier blocks outbound SMTP ports entirely. No code fixes this — it's a platform-level restriction. I doc

When you fire a fetch() and the component that triggered it unmounts, the request keeps going. The server still processes it. When the response arrives, it calls back into whatever JavaScript it finds — a stale closure, a dead state setter, a global store that has already moved on. React's "Can't perform a state update on an unmounted component" warning is the polite version of this. The silent version is worse: results from an old query overwriting the current UI. These aren't mysterious race conditions. They're the predictable result of starting async work and never telling it to stop. The race condition hiding in every search box The search input is the clearest example. The user types "reac", your debounce fires a request. Before it lands, they finish typing "react" and you fire another. Two requests, in flight at the same time, and no guarantee about which one finishes first. If the "reac" request happens to be slower — network jitter, a cache miss, a heavier result set — it will land after "react" and overwrite the correct results with the wrong ones. The bug reproduces maybe one time in twenty on a local dev server, and consistently in production on a slow connection. The fix isn't smarter debouncing. It's cancelling the previous request when a new one starts. AbortController in plain terms AbortController is a browser-native API for cancelling async work. You create a controller, pass its signal to fetch() , and call controller.abort() to cancel. If the response hasn't arrived yet, the fetch promise rejects with an AbortError . const controller = new AbortController (); fetch ( ' /api/search?q=react ' , { signal : controller . signal }) . then ( res => res . json ()) . then ( data => setResults ( data )) . catch ( err => { if ( err . name === ' AbortError ' ) return ; // expected — not a real error setError ( err ); }); // Somewhere else, when we no longer need this request: controller . abort (); Two things to internalize: signal is how the controller knows

If you're using AI coding assistants like ChatGPT, Claude, Cursor, or Lovable, you've probably accumulated dozens of JSX components. Generating them is incredibly fast. Previewing them? Not so much. The Typical Workflow Every time I received a JSX component, I found myself repeating the same process. Create a React project (or open an existing one) Copy the JSX file Install dependencies Fix missing imports Run the development server Wait for everything to compile All of that... just to see one component. It felt like unnecessary overhead. There Had to Be a Better Way I asked myself a simple question: Why can't I just double-click a JSX file and preview it? We can instantly open images, PDFs, videos, and text files. Why should JSX files require an entire development environment? That's what inspired me to build PreviewKit . What is PreviewKit ? PreviewKit is a lightweight Windows application that lets you preview frontend components instantly. Supported file types include: ✅ JSX ✅ Vue ✅ HTML No project setup. No dependency installation. No terminal commands. Just open the file and see the result. Why I Built It AI has dramatically changed frontend development. We're no longer spending most of our time writing components—we're reviewing, comparing, and refining them. That means fast visual feedback is more important than ever. I wanted a tool that removed the repetitive setup process so I could focus on building better interfaces instead of preparing a preview environment. Who Is It For? PreviewKit is useful if you: Build React applications Work with Vue components Test standalone HTML files Generate UI with AI tools Review components from teammates Prototype interfaces quickly If opening frontend files feels slower than it should, PreviewKit was built for you. The Goal Isn't to Replace Your Framework You'll still use React. You'll still use Vue. You'll still use Vite or Next.js. PreviewKit isn't trying to replace your existing workflow. It simply removes one frustrat

When you google "how to build a chat app in Node.js," the very first result will almost certainly point you to Socket.IO. It is the de facto standard for a reason. When I started my project, I used it without a second thought. It worked like magic. But as I got deeper into the project, that magic started to feel more like a black box. I eventually ripped out Socket.IO and replaced it with raw, native WebSockets. It was a daunting decision, but having built and managed it myself, I have some strong opinions on what Socket.IO abstracts away, what I had to build from scratch, and whether the headache was actually worth it. The Magic of Socket.IO (And Why We Use It) To understand why walking away from Socket.IO is hard, you have to understand exactly how much heavy lifting it does for you behind the scenes. It isn't just a WebSocket library; it is a real-time framework. The Polling Fallback: Historically, if a user's corporate firewall blocked WebSockets, Socket.IO would seamlessly downgrade to HTTP long-polling. Automatic Reconnections: If a user drives through a tunnel and loses the connection, Socket.IO automatically handles the exponential backoff to reconnect them when they emerge. Rooms and Namespaces: It gives you a beautiful socket.to("room-1").emit() API for broadcasting messages to specific groups of users. Heartbeats: It manages ping/pong messages under the hood to ensure the connection hasn't silently died. When you drop Socket.IO, you lose all of this for free. So, Why Did I Walk Away? First, the fallback mechanism is largely a relic of the past. Today, native WebSocket support across modern browsers and network infrastructure is essentially ubiquitous. I didn't need to ship a massive client bundle just to support HTTP polling for the 0.1% of edge cases. Second, the lock-in is real. If you use Socket.IO on the client, you must use a Socket.IO server implementation. You can't just connect to a standard WebSocket server. I wanted the freedom to swap out my ba

TypeScript Branded Types vs. Nominal Types: Which Pattern Should You Use in 2026 Most type safety failures in TypeScript stem from treating all strings as interchangeable. The structural type system that makes TypeScript flexible also creates subtle bugs when developers pass a UserId where a PostId was expected. Both are strings at runtime, and TypeScript's compiler sees them as compatible. This compatibility becomes expensive in production. When an engineer accidentally passes an email address to a function expecting a username, the compiler stays silent. The bug surfaces only when users report authentication failures or data corruption. Teams that rely purely on structural typing pay this cost repeatedly. Branded types solve this by adding phantom properties that exist only at compile time. They transform primitives into distinct types without runtime overhead. The pattern has matured significantly since 2023, and production codebases now demonstrate clear advantages over both structural typing and runtime validation alone. Key Takeaways Branded types prevent primitive type confusion at compile time with zero runtime cost The unique symbol pattern creates true nominal typing behavior in TypeScript's structural system Combining brands with validation functions provides both type safety and runtime guarantees Branded types excel for domain identifiers, measurements, and validated strings Choose branded types when preventing accidental type substitution matters more than implementation flexibility Understanding Branded Types: Adding Identity to Primitives Branded types attach compile-time metadata to primitives through intersection with phantom properties. A UserId becomes structurally distinct from a plain string even though both compile to identical JavaScript. The technique exploits TypeScript's structural typing: if two types have different shapes, the compiler treats them as incompatible. Adding a property that exists only in the type system creates this distinc

Notes from shipping a real-world PWA in Korea: Vite SSG is worth it. SPAs lose Korean SEO because Naver's crawler doesn't fully render JS. Leaflet > Mapbox for cost-sensitive projects. Free OSM tiles + zero cost. Firebase Hosting rewrites let you have deep URLs (/city/suwon) without a backend. KakaoTalk share is non-negotiable in Korea — 70%+ of social traffic. PWA install banner: don't auto-prompt, let the user discover. Project: https://gyeonggi-currency-map.web.app?ref=devto&utm_source=devto&utm_medium=social&utm_campaign=multi-site-bot

Why Our AI Agent Still Stumbles on Full-Stack Apps We've all been there. You're riding high on the AI hype, picturing your agent effortlessly spinning up features, leaving you free for higher-level architectural decisions. You feed it a prompt like, "Build me a simple user profile page with authentication, connected to a database, using Next.js and TypeScript." You hit enter, grab a coffee, and expect magic. More often than not, what you get back is… well, it's something . It might be syntactically correct, perhaps even impressive in parts. But when you try to integrate it, to make the pieces talk to each other harmoniously, it often feels like trying to connect a square peg to a round hole. The agent struggles, and frankly, so do we trying to fix its output. The Seams, Not Just the Parts: Why Full-Stack is More Than Sum of Its Halves In my experience, AI agents, especially Large Language Models, are fantastic at generating code for isolated problems. Need a React component? A SQL query? A utility function? They'll often nail it. But a full-stack application isn't just a collection of frontend, backend, and database parts. It's the intricate, often implicit, contracts between them. Think about a modern Next.js application. It’s a beautifully complex dance: Server Components vs. Client Components: This paradigm shift fundamentally changes where state lives, where data is fetched, and how interactivity is handled. An AI might generate a useState hook inside a Server Component, completely missing the architectural intent. Data Fetching Strategies: getServerSideProps , getStaticProps , route handlers , fetch directly in Server Components – each has specific implications for caching, performance, and where your data lives at runtime. An AI might pick an inefficient or incorrect strategy based on a simplified prompt. Type Safety Across Boundaries: TypeScript is a lifesaver, but defining types that perfectly mirror your database schema, API responses, and frontend state re

Build a Real-Time Crypto Trading Dashboard with Python, WebSockets, and React Real-time data is the difference between catching a move and reading about it later. This tutorial walks through a minimal but complete stack: a Python WebSocket client pulling live prices, a simple signal generator, and a React frontend displaying everything. You will end up with a dashboard that shows live Binance prices, basic momentum signals, and auto-updates without polling. Why this stack Binance provides a clean WebSocket API for tickers and trades. Python handles the backend connection and lightweight analysis. React keeps the UI reactive and simple to extend. No heavy frameworks, no paid data feeds. Prerequisites Python 3.11+ Node 20+ A Binance API key (read-only is fine for prices) Step 1: Python price stream Install the client library: pip install python-binance pandas Create price_stream.py : import asyncio import json from binance import AsyncClient , BinanceSocketManager import pandas as pd from datetime import datetime async def main (): client = await AsyncClient . create () bm = BinanceSocketManager ( client ) ts = bm . trade_socket ( ' BTCUSDT ' ) async with ts as tscm : while True : res = await tscm . recv () price = float ( res [ ' p ' ]) qty = float ( res [ ' q ' ]) ts = datetime . fromtimestamp ( res [ ' T ' ] / 1000 ) print ( f " { ts } | BTCUSDT { price : . 2 f } | { qty : . 4 f } BTC " ) if __name__ == " __main__ " : asyncio . run ( main ()) Run it: python price_stream.py You should see a live feed of trades. Keep this running as your data source. Step 2: Add a simple momentum signal Extend the script to calculate a 20-trade rolling average and flag when price deviates more than 0.3%: # inside the loop, after parsing res prices . append ( price ) if len ( prices ) > 20 : prices . pop ( 0 ) avg = sum ( prices ) / len ( prices ) deviation = ( price - avg ) / avg * 100 if abs ( deviation ) > 0.3 : print ( f " ⚡ Signal: { deviation : + . 2 f } % from 20-trade avg " )

Every data grid demo looks incredible with twenty rows. The columns line up. The hover state is tasteful. The checkbox has confidence. Someone scrolls three inches and everyone quietly agrees that software has advanced. Then the real product arrives. Fifty thousand rows. Twenty columns. Editable money. A custom status cell. Filters. Sorting. Horizontal scrolling. A user who pastes something suspicious from Excel. A product manager asking whether the total row can stay pinned while the server is slow. That is when a table stops being a table and starts becoming infrastructure. So we built a benchmark. Not a perfect benchmark. Those do not exist. A useful one. What we measured The fixture is intentionally boring: 50,000 deterministic rows 20 fixed-width columns 1,200 by 600 pixel viewport two editable columns sorting filtering virtual scrolling production bundles fresh browser contexts raw samples committed to GitHub No network requests. No paid-only feature tricks. No images. No grouping. No heroic demo code designed to make one library look blessed by destiny. The report measures: JS gzip : reachable JavaScript after gzip Ready median : navigation until the grid adapter mounts and two animation frames pass Scroll settle : one scripted vertical and horizontal jump plus animation frames Mounted cells : body cells in the DOM after the scroll Interaction health : heap, long tasks, estimated FPS, dropped frames Live benchmark: https://vitashev.github.io/react-data-grid-benchmark/ Source and raw samples: https://github.com/Vitashev/react-data-grid-benchmark The part most benchmarks get wrong Not every grid exposes the same surface. For example, MUI X Data Grid Community uses 100-row pagination for this workload. That is a valid product boundary, but it is not the same as continuously virtualizing 50,000 rows. So the ranked tables include only compatible continuous-scroll libraries. MUI remains in the fixture and raw data, but not in the leaderboard. That makes the benchma

Let’s face it: if your current frontend optimization strategy still involves manually auditing codebases for missing useMemo hooks, micro-managing dependency arrays, or aggressively fighting layout shifts with complex client-side state management, you are wasting your engineering leverage. As we cross the midpoint of 2026, web framework architecture has quietly undergone a massive shift. We have firmly moved out of the era of manual performance tweaking and entered the era of automated, compile-time optimization . The goal of modern development is no longer just shipping fewer kilobytes to human users—it's also about optimizing data chunk delivery for AI web crawlers that evaluate your site in real-time. Here is how the modern full-stack ecosystem redefined performance this year, and what you should focus on instead. 1. The Death of Manual Memoization (Thanks, React Compiler) For years, React developers bore the cognitive load of rendering performance. One misplaced reference and your entire component tree re-rendered down to the root. With the absolute maturity and default adoption of the React Compiler across production frameworks, that paradigm is officially legacy code. The compiler handles component memoization automatically at the build step by analyzing javascript structures directly. // ❌ THE OLD WAY (Pre-2026 Manual Overhead) const ExpensiveComponent = memo (({ data }) => { const processedData = useMemo (() => computeHeavyMetrics ( data ), [ data ]); const handleAction = useCallback (() => { ... }, []); return < DataGrid items = " {processedData} " onAction = " {handleAction} " /> ; }); // THE MODERN WAY (Zero Performance Boilerplate) export function ModernComponent ({ data }) { const processedData = computeHeavyMetrics ( data ); const handleAction = () => { ... }; return < DataGrid items = " {processedData} " onAction = " {handleAction} " /> ; } Because the compiler injects optimization markers directly into the output code, human engineers can stop arguin

HeroUI v3 is a redesigned React component library, previously NextUI, offering over 75 components, including 21 new ones, and a new React Native library with 37 components. Built on React Aria and Tailwind CSS v4, it emphasizes accessibility and customization. The library has experienced many updates since its release, and migration from the previous version is necessary. By Daniel Curtis

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. This article completes the process of creating a main navigation component that is universally accessible, both perceptually and operatively; can operate in a controlled or uncontrolled state; and is operable when displayed in a horizontal, desktop arrangement as well as in a vertical, mobile scenario. 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 1.0.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 components, 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 Vertical Alignment along with previous requirements. Content Links Introduction Acceptance Criteria Data Setup Keeping SubLists Open Allowing Scroll when Focus Shifts Down Arrow Key Implementation Up Arrow Key Implementation Conclusion Introduction Up until now, all keyboard handling has been implemented with the default horizontal layout in mind. When display

React useIntersectionObserver Hook: Lazy Load & Detect Visibility (2026) You want to load an image only when it scrolls near the viewport. Or fire an analytics event the first time a card is actually seen . Or trigger "load more" when the user reaches the bottom of a list. Every one of these is the same question — is this element on screen yet? — and for years the answer was a scroll listener that fired hundreds of times a second, re-read getBoundingClientRect() on each tick, and still managed to miss the edge cases. IntersectionObserver is the browser API that answers that question correctly, asynchronously, and off the main thread. useIntersectionObserver is the hook that wires it into React without the useEffect / useRef /cleanup boilerplate — and without the leak-on-unmount and stale-closure bugs the hand-rolled version always ships. This post covers the real @reactuses/core API, the three patterns you'll actually reach for, and how to tune threshold , rootMargin , and root . SSR-safe and typed. Why Not Just Use a Scroll Listener? The old way to know whether an element was visible looked like this: listen to scroll , and on every event measure the element against the viewport. useEffect (() => { function onScroll () { const rect = el . getBoundingClientRect (); if ( rect . top < window . innerHeight ) { setVisible ( true ); } } window . addEventListener ( ' scroll ' , onScroll ); return () => window . removeEventListener ( ' scroll ' , onScroll ); }, []); This has two problems baked in. First, scroll fires on the main thread, dozens of times per second, and getBoundingClientRect() forces a synchronous layout each time — that's exactly the recipe for janky scrolling. Second, it only catches elements crossing the viewport ; the moment your scroll happens inside a container, you're re-deriving geometry by hand. IntersectionObserver flips the model. You hand the browser a target and a threshold, and it tells you — asynchronously, batched, off the scroll path — when

i did something dumb last month. on purpose. i sat down, opened a next.js app, and tried to make hydration fail in every way i could think of. not because a bug forced me to. not because i was debugging something. just because i wanted to see it. understand it from the inside. and honestly? best few hours i've spent learning anything in a while. why i even did this you know how you use something for months and you think you get it, but you don't really get it? hydration was that for me. i knew the surface-level thing: server renders HTML, client takes over, they gotta match. cool. got it. moving on. except i didn't get it. i just got the vibe of it. every time i saw hydration mismatch, i'd ask claude, fix the immediate thing, feel vaguely annoyed, and move on. i never stopped to ask why that specific thing broke it. i was treating symptoms, not understanding the actual disease. so i decided to break it deliberately. if i caused the errors myself, i'd actually have to understand what i was doing. the setup basic next.js app. app router. a few pages. nothing fancy. i wasn't trying to build anything. i was trying to destroy something, carefully, so i could see what fell apart and why. break #1: the obvious one - new Date() on render this is the classic. everyone's seen it. export default function Page () { return < div > { new Date (). toLocaleString () } </ div > } server renders this at, say, 14:00:00. by the time react runs on the client and tries to reconcile, it's 14:00:01. the strings don't match. react screams. thing is, i knew this would happen. what i didn't think about was why react cares. here's the thing: react isn't doing a full diff on the entire DOM after hydration. it's trusting that the server HTML is a valid starting point and it's just attaching event listeners and state to it. but if the content doesn't match, it doesn't know what to trust. it can't partially hydrate "mostly correct" HTML. it either matches or it doesn't. so it throws the warning, a

Let’s be honest: as developers, our relationship with our office chairs is... complicated. We start the day sitting upright like productivity gurus, but four hours into a debugging session, we’ve morphed into a human pretzel. This "gamer lean" isn't just a meme; it leads to chronic back pain and decreased focus. In this tutorial, we are going to build a real-time posture tracking system using MediaPipe Pose and Computer Vision to save your spine. By leveraging AI productivity tools and the power of cross-platform Electron desktop apps , we will create a silent guardian that watches your form and pings you the moment you start slouching. If you've been looking for a practical way to dive into MediaPipe and Node.js integration, you're in the right place. For those looking for more production-ready patterns and advanced AI implementations, I highly recommend checking out the deep dives at WellAlly Blog . 🏗 The Architecture The system works by capturing frames from your webcam, processing them through a pre-trained neural network to identify body landmarks, and then applying some basic trigonometry to determine if your posture is healthy. graph TD A[Webcam Stream] --> B[MediaPipe Pose Engine] B --> C[Extract 33 Keypoints] C --> D{Geometry Engine} D -->|Angle > Threshold| E[Slouch Detected] D -->|Angle < Threshold| F[Good Posture] E --> G[Electron Main Process] G --> H[System Notification 🔔] F --> I[Wait 5s] I --> A 🛠 Prerequisites To follow along, you'll need: Node.js (v16+) MediaPipe (The pose solution) OpenCV.js (For frame manipulation) Electron (For the desktop shell) 🚀 Step 1: Setting Up the Pose Engine MediaPipe provides a "Pose" model that gives us 33 landmarks in 3D space. For posture correction, we specifically care about the Ears (7, 8) , Shoulders (11, 12) , and Hips (23, 24) . The Math: Calculating the "Slouch" We measure the angle between the Ear, the Shoulder, and a vertical axis. If your ear moves too far forward relative to your shoulder, that's "Forward

Today, we’re excited to launch UIAble v1.0, an open-source component library built for developers, by developers. We explored a lot of UI libraries built on Shadcn. Most of them feel nearly identical — same structure, same aesthetic, same tradeoffs. That’s what pushed us to build something different. Not another library that looks like Shadcn with a coat of paint, but a design system with its own identity and a clearer sense of what it’s actually for. Why UIAble exists After enough frontend projects, one thing becomes obvious: the same UI patterns get rebuilt again and again. Inputs. Dialogs. Tables. Alerts. Dropdowns. OTP fields. Form validation states. Not because they’re hard to build, but because most existing libraries never quite fit real project requirements. Some are too opinionated. Some pile on unnecessary abstraction. Some become rigid after initial setup. And some make simple UI unnecessarily complicated. That friction is what led to UIAble. Not to launch another oversized library, just to build a cleaner, more practical foundation for modern frontend development. What UIAble actually is UIAble is a free, open-source UI component library built with Tailwind CSS , Shadcn-style architecture , and Base UI principles . The idea is straightforward: reusable components should stay flexible, readable, and easy to maintain. Instead of pulling projects into a rigid ecosystem, UIAble gives you components you can copy directly into your codebase, edit freely, and scale without fighting the library. No lock-in. No unnecessary abstraction. No dependency trap. What makes it different in practice A few things actually matter here. You get the code. UIAble doesn’t hide logic behind layers of packaging. You see the component. You edit it. You ship it. That alone changes how teams work with UI. It’s built for real product UI, not showcase pages. A lot of UI kits look great in demos and fall apart in production. UIAble focuses on the unglamorous stuff, forms that don’t bre

Comparing the most feature-rich React data grids in 2026, from pivot tables and tree data to...

In the world of wearable health technology, the holy grail has always been moving intelligence from the cloud to the edge. Waiting for a cloud server to analyze your heart rhythm is not just a latency issue—it's a privacy and battery life concern. Today, we are diving deep into TinyML , Edge AI , and ECG signal processing to build a real-time abnormality detector. By leveraging TensorFlow Lite for Microcontrollers and the versatile ESP32 , we can process raw electrocardiogram (ECG) data locally. This approach ensures low-latency detection of arrhythmias while keeping sensitive medical data on-device. If you've been looking to bridge the gap between high-level deep learning and low-level embedded systems, you're in the right place! The Architecture: From Raw Signal to Insight 🏗️ The pipeline involves capturing a high-frequency analog signal, cleaning it, and feeding it into a quantized Convolutional Neural Network (CNN). Here is how the data flows through our ESP32: graph TD A[Raw ECG Signal/Sensor] -->|ADC Sampling| B(Preprocessing: Bandpass Filter) B --> C{Buffer Management} C -->|Windowed Segment| D[TFLite Micro Inference Engine] D --> E{CNN Model Classification} E -->|Normal| F[Log: Sinus Rhythm] E -->|Abnormal| G[Trigger Alert: Arrhythmia] G -->|Bluetooth/Wi-Fi| H[Mobile Dashboard] Prerequisites 🛠️ To follow this advanced guide, you'll need: Hardware : ESP32 (DevKit V1 or similar). Sensor : AD8232 ECG Module (or simulated ECG data). Software : Arduino IDE or PlatformIO. Frameworks : TensorFlow Lite for Microcontrollers (TFLM), EloquentTinyML (optional wrapper), or the standard C++ TFLM library. Step 1: Model Training & Quantization 🧠 Before we touch the C++ code, we need a model. Typically, we use the MIT-BIH Arrhythmia Database to train a 1D-CNN. The crucial step is Post-Training Quantization . Since the ESP32 doesn't have a dedicated NPU, we convert our 32-bit float model into an 8-bit integer (INT8) model. This reduces the size by 4x and speeds up inference s

We've all been here. A new form shows up, you install React Hook Form, add Zod or Yup, and in ten minutes you have something that "works." The problem doesn't surface that day. It surfaces three months later, when the same VIN you validate in the create car form also has to be validated in edit , in import from Excel , and it turns out the rule —"17 characters, the last 5 numeric"— is written three times, each one slightly different, and none of them lives in a place you can point to and say "here is what a valid VIN is." A typical form with a library looks roughly like this: const schema = z . object ({ vin : z . string (). length ( 17 , " The VIN must be 17 characters " ), miles : z . number (). min ( 0 , " Miles cannot be negative " ), // ...and 8 more fields }); const { register , handleSubmit , watch , formState : { errors }, } = useForm ({ resolver : zodResolver ( schema ), }); It works. But if you stop to look at it, you're paying three costs that almost never get named: 1. Clean code dissolves. The business rule ends up scattered across the schema , the resolver , the register calls, the Controller s, and the JSX. The knowledge — what makes a car valid — has no home. It's wired into the UI. And what's wired into the UI doesn't get reused: it gets copied. 2. Performance and coupling are paid silently. These libraries live on subscriptions: watch , re-renders on every keystroke, internal state to keep in sync. For a contact form, who cares. For a screen with 15 fields, sub-forms, and cross-field validation, your component is tied to the library's lifecycle —not yours— and you start fighting it instead of using it. 3. Developer convenience is a trap. It's wonderfully convenient at first . But that same rule: how do you test it without mounting a component? How do you move it to the backend? How do you translate it into two languages without polluting the schema? Everything the library gave you for free, it charges you for the day you need to step outside its mo

"Prop drilling is bad, use Context" is repeated everywhere — but the actual cost stays abstract. So I put the two approaches side by side with live render counters. Click one button and the difference is impossible to miss. ▶ Live demo: https://context-vs-props-drilling.vercel.app/ Source (React 19 + TS): https://github.com/dev48v/context-vs-props-drilling Two identical 4-level trees, both React.memo 'd. One threads a value down as a prop through every level; the other provides it once via Context and reads it only at the leaf. Change the value: Prop drilling → 4 components re-render. Every component on the path receives the changed prop, so all of them re-render — and each intermediate is cluttered with a value it does nothing with except pass along. Context → 1 component re-renders. The intermediates take no value prop, so they're skipped (memoized, props unchanged). Only the consumer leaf re-renders. The summary tallies it on every click: 4 vs 1 . Why Context skips the middle This is the part that surprises people: with Context, an intermediate component can be skipped even though a descendant re-renders . < ThemeCtx . Provider value = { val } > < A /> { /* memo, no props → skipped on value change */ } </ ThemeCtx . Provider > const A = memo (() => < B />); // skipped const B = memo (() => < C />); // skipped const C = memo (() => < Leaf />); // skipped const Leaf = () => { const value = useContext ( ThemeCtx ); // ← re-renders on context change return < div > { value } </ div >; }; React re-renders context consumers directly when the provider value changes — it doesn't need to re-render the components in between. With prop drilling there's no such shortcut: the only way the value reaches the leaf is through every parent, so every parent must re-render. The catch — Context isn't a free lunch Context isn't a "no re-renders" button. Every consumer re-renders whenever the provider value changes — there's no built-in selective subscription. One big, chatty context ca