标签：#React

Google's developer verification requirement starts enforcing in about a month, and Brazil is one of the four countries it lands in first. If you work here, this is not a 2027 problem you get to read about later. Most of the coverage I've seen frames this as a sideloading story, or an F-Droid story, or an "Android is losing its freedom" story. Those are real arguments, but they're not the thing that's going to interrupt my week. The thing that's going to interrupt my week is much smaller and much more annoying: how a build gets onto a QA engineer's physical phone. The rule, in one paragraph From September 30, 2026, apps installed on certified Android devices in Brazil, Indonesia, Singapore and Thailand must be registered to a verified developer. Certified devices are roughly 95% of Android outside China. The requirement applies whether the app came from Play, from an alternative store, or from an APK you downloaded off a link. Verification means an identity check plus registering each package name against the SHA-256 fingerprint of its signing key. Global rollout follows in 2027. Two things matter for how you read that. It's the package name that gets registered, not the app in some abstract sense. And it's tied to a specific signing key. What does not break Before the panic, the exemptions are wide, and if you only skim one section, skim this one. ADB installs are unaffected. Local development and testing over adb install keep working exactly as they do today. Google has been explicit about this. Enterprise deployment is exempt. Apps installed through an EMM Device Policy Controller, or published as private apps in Managed Google Play, are exempt indefinitely. If your organization ships to managed clinic devices through an MDM, that path is fine. If you're already on Play, you're probably already done. In March 2026, Google auto-registered package names and signing keys for the large majority of existing Play apps under the accounts that own them. Worth confirming i

This series walks through an actual enterprise microfrontend platform, end to end: one Host shell, three shared platform microfrontends, a manifest-driven mechanism for mounting any number of independently-owned domain microfrontends, a full OIDC auth flow, and a CI/CD pipeline. Every code snippet in this series is real and traceable to the actual boilerplate it's built from, on GitHub . Part 1 is the decision everything else in this series depends on: why Module Federation , and not one of the two other credible options. The one requirement that rules everything else out Strip away the buzzwords, and an "enterprise microfrontend platform" only has to guarantee one thing: a team ships a change to their part of the app without anyone else redeploying anything. Not "in theory, with enough coordination" — actually, mechanically, true. If shipping one team's bug fix requires a platform team to cut a release, this isn't microfrontends — it's a monolith with extra steps. That single requirement rules out more than it looks like it should. It rules out compiling every team's code into one shared build (that's just a single-page app with more steps). And it rules out anything where the Host app needs to know, at its own build time, which teams' pages exist and which version of each — because "known when the Host was built" and "deployed independently of the Host" are opposites. The decision Use Webpack 5 Module Federation , in runtime-composition mode, as the platform's way of putting every team's page together into one app: The Host ships with an empty list of remote apps built in. Instead, it looks up every team's page from a small list — a manifest — that it fetches fresh every time the app loads. React, the shared state layer, and the shared design system are all declared as singletons : every team's page gets the exact same running instance of each, not its own separate copy. "Deploying" a team's page means adding or updating one entry in that manifest. The Host itself

Help wanted: validate a React faceted search SPFx sample in SharePoint Online A new read-only React faceted search sample is ready for the PnP SharePoint Framework webparts repository: Pull request: https://github.com/pnp/sp-dev-fx-webparts/pull/6480 Sample: https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-faceted-search The web part uses SharePoint Search REST ( /_api/search/query ) to search the current site. It supports: Search terms FileType and ContentClass refiners Result counts and metadata Safe encoded query/refiner values Loading, empty, access-denied, throttling, error, and retry states Responsive, accessible Fluent UI rendering The implementation is intentionally read-only and does not use a custom backend or Microsoft Graph. Local verification completed: 4/4 Jest tests passed TypeScript and webpack build passed ESLint passed Production .sppkg packaging passed Gallery metadata validator corrected and rerun successfully Tenant validation is still needed. If you have a SharePoint Online tenant, please test search indexing, result links, refiners, permissions, empty/error states, and narrow web-part widths. Real screenshots and negative findings are welcome; no local screenshot is being presented as tenant evidence. Please share feedback on the pull request. Thank you!

​ Managing academic records , student enrollments and staff communication across educational institutions requires speed, reliability, and security. Legacy school management systems are often slow, difficult to navigate, and bogged down by bloated software architectures. ​At SkyBuild Technologies, we designed and developed EduSky (edusky.skybuildtechnologies.com)—a modern, cloud-native and multi-tenant school management platform engineered to streamline administrative workflows and deliver instant access to institutional data. ​Here is an insider breakdown of how we architected and deployed EduSky using a modern tech stack centered on React, Tailwind CSS, and Supabase. ​1. Core Platform Architecture & Key Features ​EduSky was engineered to solve the most pressing pain points faced by school administrators, teachers, students and guardians/parents: ​ Centralized Student & Staff Portals : Secure management of student profiles, academic histories, staff credentials, and class assignments. ​ Real-Time Academic & Report Management : Streamlined record-keeping for grades, subject performance, and automated term report generation. ​ Administrative Controls & Access Levels : Granular Role-Based Access Control (RBAC) ensuring administrative staff, teachers, and parents access only authorized operational data. ​Fast, Mobile-First User Interface: Built with a responsive layout optimized for desktop administration and mobile access on smartphone screens. ​2. The Technical Stack : High Speed, Zero Bloat ​Rather than relying on legacy web setups, we built EduSky using a modern, decoupled architecture designed for sub-second load times and high availability: ​ Frontend : React + Tailwind CSS ​Dynamic Component Architecture: Built using React for modular, maintainable UI components (data tables, form inputs, dynamic dashboards). ​ Utility-First Styling : Styled with Tailwind CSS to maintain a light footprint, rapid UI iteration, and responsive mobile-first views. ​ Optimized State

Help wanted: validate a configurable SharePoint list SPFx sample I have opened a new SharePoint Framework sample for a read-only, configurable list and records browser: Pull request: https://github.com/pnp/sp-dev-fx-webparts/pull/6476 The sample targets common SMB/SME data-view scenarios without reimplementing SharePoint’s editing experience. It uses React 17, Fluent UI v9, PnPjs v4, and SPFx 1.23.2. What the sample does Configures a SharePoint list title and visible internal fields. Uses explicit PnPjs $select / $expand queries and bounded pages. Supports text, number, currency, date, Boolean, choice, hyperlink, and person fields. Provides sorting, bounded paging, optional search, responsive table/card views, safe links, and native item-form links. Includes loading, empty, retry, permission, throttling, generic error, keyboard, and accessible status states. Keeps the MVP read-only: no create, edit, delete, attachments, bulk actions, or custom query language. Help needed Could someone with access to a SharePoint Online tenant please try the sample and report back on: Configuring it against a small ordinary list. Field discovery and supported field rendering. Sorting, search, paging, empty results, and error/retry behavior. Permission handling and narrow-viewport rendering. Keyboard operation and safe item links. One or two representative screenshots for the README. Dummy data is fine. Please remove or blur tenant names, site URLs, user names, record details, and all other sensitive information before sharing screenshots. The code builds and tests locally, but I do not currently have a tenant available for end-to-end validation. Tenant feedback and screenshots would materially help complete the pull request. Thank you to anyone who can spare the time to test it. sharepoint #spfx #opensource #react

The Silent Killer of Next.js Performance: Component Poisoning In the modern React ecosystem, specifically within Next.js and the new paradigms introduced in React 19, the distinction between Server Components and Client Components is the most critical architectural concept to master. Yet, it is also the most frequently misunderstood. If you have ever imported a React Server Component directly into a Client Component, you have inadvertently "poisoned" your application. This silent performance killer is rampant in production codebases, leading to bloated bundles, broken security, and a complete breakdown of the server-side benefits you migrated to React Server Components (RSC) to achieve in the first place. What is Component Poisoning? Component poisoning occurs when a developer treats file boundaries as mere organizational choices rather than strict execution boundaries. When you write import MyServerComponent from './MyServerComponent' inside a file marked with 'use client' , you are telling the bundler to include that component in the client-side JavaScript bundle. The moment that import statement is parsed, the Server Component is stripped of its server-only capabilities—like direct database access or environment variable usage—and compiled into a Client Component. The result? Bundle Bloat: Code that was meant to stay on the server is now shipped to the browser. Broken Logic: Any code relying on Node.js-specific APIs or secret keys will throw errors at runtime because it is now executing in the browser's environment. Performance Degradation: The primary benefit of RSC—reducing the amount of JavaScript sent to the client—is completely negated. The Mental Model: Respecting the Serialization Boundary To avoid poisoning, you must shift your mental model. Client Components cannot "own" Server Components. They cannot import them, nor can they directly control their execution lifecycle. Instead, think of the Serialization Boundary . React Server Components render on the

Building Next-Gen Agentic Architectures: From Local RAG to Sandboxed Execution and BigQuery MCP The 3 AM production fire revealed a harsh truth: modern agentic systems often collapse under their own weight. A single agent processing 10K RAG queries OOM-killed an 8GB cloud instance. The culprit was not the workload but the infrastructure: @pinecone-client/vecdb with 47 transitive dependencies bloat memory with unquantized float32 embeddings. The solution was 200 lines of Python using sqlite3 , array , and heapq , with bounded queues and race condition resilience. This is the story of how we replaced dependency bloat with surgical precision. The Dependency Problem Agentic systems today face three critical bottlenecks: Vector Search : Libraries like faiss-cpu (12MB) combined with pg-vector (synchronous disk I/O) block the event loop, creating latency spikes. BigQuery : The @google-cloud/bigquery client (12MB) plus grpcio (5MB) leaks file descriptors, hitting Linux's default 1024 soft limit. Sandboxing : Docker containers consume 500MB+ per instance, making them impractical for memory-constrained environments. The root cause is always the same: unbounded resource consumption. 1M vectors at 768 dimensions in float32 consumes 3GB of memory. Synchronous I/O stalls the event loop. Unmanaged connections leak file descriptors. The Zero-Bloat RAG Engine The solution begins with a fundamental shift: replace heavy dependencies with lightweight, audited code. Our LocalRAG implementation demonstrates this approach: import sqlite3 import array import heapq import json import threading from typing import List , Tuple , Optional class LocalRAG : def __init__ ( self , db_path : str , dim : int = 768 , max_vectors : int = 1_000_000 ): self . dim = dim self . max_vectors = max_vectors self . lock = threading . Lock () self . conn = sqlite3 . connect ( db_path , isolation_level = None , check_same_thread = False ) # Enable WAL mode for concurrent reads/writes self . conn . execute ( " PR

Hello everyone! 👋 Happy to be joining the DEV community. I’m a Computer Engineering student based in Italy. My main focus is Cybersecurity, but I strongly believe you have to know how to build a system before you can secure (or break) it. Lately, I’ve been jumping between two very different worlds: Embedded C: writing firmware, managing file systems, and building custom OLED menus for the M5Stick S3. Frontend: building web apps using Next.js and React. My workflow is a bit of a hybrid. I like to focus on the system architecture, memory management, and edge cases, while using AI tools to do the heavy lifting of writing the actual code. Then, I review everything strictly to make sure it doesn't break. I’m here to build in public, share my projects, and learn from this awesome community. What are you all currently hacking on? See you around!

Welcome to the fifth article in our OWASP Mobile Top 10 2024 series! In previous articles we covered M1: Improper Credential Usage, M2: Inadequate Supply Chain Security, M3: Insecure Authentication/Authorization, and M4: Insufficient Input/Output Validation. Today we discuss why "we already use HTTPS" isn't a sufficient answer. Introduction M5 is the most misleading item on the list, because most teams read it and move on: "We use HTTPS, this doesn't apply to us." OWASP's definition is far broader. This risk covers all aspects of getting data from point A to point B, but doing it insecurely. It encompasses mobile-to-mobile communications, app-to-server communications, or mobile-to-something-else communications. It includes all communications technologies that a mobile device might use: TCP/IP, WiFi, Bluetooth/Bluetooth-LE, NFC, audio, infrared, GSM, 3G, SMS, etc. So M5 isn't just "do you use HTTPS." It's all of this: Whether you set up TLS correctly (certificate checking, cipher selection) Whether your traffic is consistent (some endpoints HTTPS, others not) What your third-party SDKs are doing What your WebView is loading What you send over alternate channels like push notifications and SMS 💡 Key point: Just because an app uses transport security protocols doesn't mean it's implemented correctly. HTTPS is not a checkbox; it's a system that must be configured properly. A specific situation for React Native developers In React Native the network layer lives in three separate places, and most developers only think about the first: The JavaScript side — fetch , axios , XMLHttpRequest Platform configuration — ATS on iOS, Network Security Config on Android Native modules and SDKs — analytics, ads, crash reporting, payment SDKs Whatever you do on the JavaScript side, if platform configuration is loose or a third-party SDK uses plaintext HTTP, your app is exposed. OWASP Assessment Metric Value Meaning Exploitability EASY A proxy and the same network is enough Prevalence CO

React is fast by default, until it isn't. The good news is that the vast majority of real-world performance issues trace back to a small set of patterns. Fix those, and you rarely need exotic optimizations. Measure before you optimize The first rule of performance work is to never guess. Use the React Profiler and the browser's performance panel to find what actually renders, and how often. Premature optimization Wrapping every component in memo and every value in useMemo adds complexity and can make things slower. Optimize the hot paths you have measured, not the ones you imagine. Avoid unnecessary re-renders A re-render isn't inherently bad, but cascading re-renders of expensive subtrees are. The most common culprit is passing a freshly-created object or function on every render. `// ❌ A new array + handler every render breaks memoized children function ProductList({ products }) { return ( - p.inStock)} onSelect={(id) => track(id)} /> ); } // ✅ Stabilize derived data and callbacks function ProductList({ products }) { const inStock = useMemo( () => products.filter((p) => p.inStock), [products], ); const handleSelect = useCallback((id) => track(id), []); return ; } ` Memoize the right things React.memo , useMemo and useCallback are tools for keeping referential identity stable across renders. Reach for them when: a child component is expensive to render, and it receives props that would otherwise change identity every render. Better still, let the React Compiler handle memoization for you. Adding it is a single dependency: npm install babel-plugin-react-compiler Ship less JavaScript The fastest code is the code you never send. Code-splitting and lazy loading keep the initial bundle small. `import { lazy, Suspense } from 'react'; const Editor = lazy(() => import('./Editor')); export function Panel() { return ( }> ); } ` Move work to the server With React Server Components, data fetching and heavy rendering can happen on the server, shipping only the resulting HTML an

Last week, it came to light Cursor had mostly finished migrating from SolidJS to React . This migration happened about seven months ago. But it became a central focus of discussion following the Solid 2.0 RC release . Then yesterday, a week later, it came to my attention that the Anthropic docs example command for their large-scale migration feature is: I admit that my gut reaction was not great. Out of all the examples they could have chosen... Years of my work became a canonical example of the thing you migrate away from — in the same week we shipped the biggest release in the project's history — stung in a way I won't pretend it didn't. My second reaction was to assume that, like the other trickle-down posts I'd seen this week, this rode the same week-old news cycle. Then I checked the Internet Archive and realized this has been there since at least April 2026 . Four months before the Cursor story broke. At this point, the whole public footprint was a mention of an experiment sandwiched between bigger updates in a Cursor blog post posted in January. The kind of thing that no one outside the industry would even really pick up on. No reasoning, no benchmarks, no argument. Stop to think about what that means. I should be careful here because I can't prove anyone at Anthropic ever read that Cursor post. Nobody can. Maybe a docs writer saw the experiment. Maybe Claude drafted its own example. But think it through. Either it traveled from a buried line in one company's release notes into another company's official docs, or it needed no origin at all. It was already assumed before any public migration existed. Our industry has quietly started broadcasting conclusions where it used to transmit arguments. We couldn't have picked a worse time, because — as I'll get to — arguments are the only source that still matters. Why This Matters More Than It Used To It would be fair to ask, hasn't it always been like this? Teams cargo cult large players. Netflix or Facebook uses thi

What Clip Architect Actually Changes About Local AI Video Generation Here's what people get wrong about a tool like this. The hard part was never really the AI writing the script. It's the plumbing around it, the part nobody photographs for the landing page. Clip Architect is a Windows desktop application that wraps the open-source MoneyPrinterTurbo pipeline (the one that turns a topic into a scripted, narrated, subtitled short video) inside a Tauri 2 shell, with a React 19 interface and a Python backend running underneath as a private local service. You give it a topic, you get an MP4 sized for TikTok, Reels or Shorts, and nothing in between gets uploaded anywhere except to whichever provider you configured, with the key you supplied yourself. No account, no subscription, no cloud render queue. Once you get that one distinction, wrapper versus engine, the rest of this holds together on its own. Why the Terminal Step Was the Real Barrier Let's look at where the friction actually sat. Upstream MoneyPrinterTurbo is a Python web app built on FastAPI with a Streamlit interface: you start it from a terminal and use it in a browser . Fine for a developer. It stops being fine the moment the person who wants the video has never opened a terminal in their life, and most people who want a video have never opened a terminal in their life. Closing that gap is the whole reason Clip Architect exists: a Tauri shell owns the window and the process lifecycle, a React frontend replaces Streamlit, and the Python backend starts and stops with the app itself, quietly, in the background. You install it, you open it, and a command line never comes up. The chain underneath doesn't change. Give it a subject, an LLM writes the script and the search keywords, stock footage or your own files supply the picture, a text-to-speech engine speaks the narration, and FFmpeg cuts the clips to the voice track, burns in subtitles, mixes background music and writes the final MP4. Every one of those stage

By Shivkrishna Shah · Engineer Philosophy — @shivkrishnashah · @engineerphilosophy Your app shouldn't have a "no internet" screen. Here's the architecture I use to make mobile apps write locally, sync automatically, and survive the messy reality of field connectivity. Every mobile developer has shipped this screen at least once: a sad cloud icon and the words "No internet connection. Please try again." For consumer apps, that's an annoyance. For enterprise field apps — sales reps in hospital basements, auditors in warehouses, technicians in rural areas — it's a dealbreaker. If the app stops working when the signal drops, people stop trusting it. And once field users stop trusting an app, they go back to paper and WhatsApp. I spent the last few years building and maintaining an offline-first React Native platform used daily by field teams across multiple countries. This post is the architecture I wish someone had handed me on day one: how to structure local storage, detect connectivity, queue writes, auto-sync in the background, and avoid the two bugs that will absolutely bite you (duplicates and conflicts). Everything here is generic — I'll use Realm DB and NetInfo in the examples, but the pattern maps cleanly onto WatermelonDB, SQLite, or MMKV-backed queues. The one rule that changes everything The local database is the source of truth. The server is just a replica you happen to reconcile with. Most apps are built the other way around: the server is the truth, and the app is a thin cache over fetch() . Offline-first inverts this. Every read comes from the local DB. Every write goes to the local DB first. The network is an implementation detail that a background service worries about — never the UI. This single inversion gives you three things for free: Zero-latency UX. Saves are instant because they're local writes. No spinners on submit. Airplane-mode parity. The app behaves identically online and offline, because the UI never talks to the network. Crash safety. D

TL;DR SVG attributes like stroke-width become strokeWidth in JSX. class → className . Numeric values become {expressions} . Inline styles become objects. xmlns and XML comments are removed. The converter outputs either JSX or TSX with SVGProps . Use automation (SVGR or SVGCode) for large icon sets. Import only what you need to keep bundle sizes small. Converting an SVG file into a React component is more than just pasting markup into a .jsx or .tsx file. React uses JSX, which is stricter than HTML/XML and requires specific changes to ensure your SVG renders correctly and remains maintainable. In this post, we’ll explore every transformation that takes place—from attribute casing to TypeScript typing—so you understand exactly what our free SVG to React converter does under the hood. What Actually Changes? Kebab‑case Attributes Become camelCase SVG uses attributes like stroke-width , fill-rule , and clip-path . JSX requires property names that are valid JavaScript identifiers, so these become: SVG Attribute React JSX stroke-width strokeWidth stroke-linecap strokeLinecap stroke-linejoin strokeLinejoin fill-rule fillRule clip-path clipPath font-size fontSize stroke-dasharray strokeDasharray class Becomes className In SVG you write class="icon" , but in JSX you must use className="icon" because class is a reserved word in JavaScript. Numeric Attributes Are Converted to Expressions React treats string values differently from numbers. For numeric SVG attributes like width , height , x , y , cx , r , etc., the converter outputs {value} instead of "value" . <circle cx="12" cy="12" r="10" /> becomes: < circle cx = { 12 } cy = { 12 } r = { 10 } /> Inline Styles Become Objects If your SVG uses style="fill: red; stroke: blue;" , it must be converted to a JavaScript object: style = {{ fill : ' red ' , stroke : ' blue ' }} xmlns and Namespace Declarations Are Removed React automatically uses the correct SVG namespace, so xmlns and other XML namespace declarations are unnecessary a

O NutriApp é um projeto de estudos: plataforma de saúde conectando pacientes, nutricionistas, médicos e personal trainers, cada perfil enxergando só o que sua permissão libera. Stack: React 19 + TypeScript, TanStack Start (SSR, rotas file-based e server functions), Tailwind v4 + shadcn/ui, react-hook-form + Zod para formulários tipados, TanStack Query para cache, e Lovable Cloud (Supabase) com Postgres e Row Level Security. O maior desafio foi o controle de acesso por papéis. Três tabelas centrais — profiles, user_roles e pacientes — todas com RLS ativado. Paciente lê só seus próprios registros; profissionais e administradores enxergam todos os pacientes. Pra evitar recursão de política (problema clássico de RLS), criei funções SECURITY DEFINER como has_role e is_profissional, quebrando o ciclo de verificação. Autenticação e segurança: Login por email/senha, com rota administrativa separada (/admin/login) Server functions protegidas com requireSupabaseAuth, checando papel antes de qualquer ação administrativa Validação client-side com Zod: senha entre 6-72 caracteres, email até 255, telefone opcional Usuários criados por admin já nascem confirmados e ativos, reduzindo fricção operacional Automação como diferencial: o perfil de saúde calcula IMC em tempo real e gera um plano inicial baseado no objetivo selecionado (emagrecimento, ganho de massa ou controle de patologias) — reduzindo trabalho manual do profissional. Aprendizados principais: RLS bem modelado desde o início evita gambiarra depois — pensar em papéis antes da primeira quere economiza retrabalho. Verificação de papel precisa estar no backend, nunca só na UI. Separar login de paciente/profissional do login admin simplifica segurança e UX ao mesmo tempo.

I published a post called "I Audited My Own Portfolio and Found 20 Problems" . It was an inventory: I went through my own site — a React 19 + Vite SPA with Sanity as the CMS — wrote down everything that was wrong with it, fixed what mattered, and put the before and after numbers next to each item. If you haven't read it, the only part that matters here is the methodology, and one line of it in particular: I went through the build output chunk by chunk in build/assets/ . I called that the step that hurts and the one most people skip. I still think that is true. It is also the step that guaranteed I would miss the largest thing wrong with the site. The step that worked Weighing the build output worked exactly as advertised. Finding 1 of that audit was an unoptimized PNG of a developer illustration on /gabriel-abreu , my contact page, 993 KB, sent to every visitor who landed there. It went to 23 KB. A second image, the cutout of me that sits in three different greetings, went from 358 KB to 45 KB. Those two are bundled assets. A component imports one: import p from " ../assets/developer-illustration.webp " ; Vite follows that import, hashes the file, and emits it into build/assets/ . After the build it is a file on disk with a size. Listing the directory finds it. Sorting the listing by size finds it first. There is no way to ship it and not have it show up in that step. So the method was sound within its domain: both of those images are bundled assets, and the step found both. On August 23 I opened the blog index in a browser and watched what it actually requested. Sixteen post covers, 9.88 MB. None of that could have appeared in the audit. Not because I was sloppy that day — because of where those bytes come from. Two lifecycles A bundled asset exists at build time. An import makes it a build input, the bundler makes it a build output, and anything that reads the build output sees it. A CMS image is never a build input. Nothing imports it. It arrives as a string in a

Part 1 covered the mechanism: a fingerprint gate decides whether a change ships in minutes over-the-air or needs a full store release. But a gate that only checks "is this native-safe" says nothing about whether the change is good . If every merge to main can reach production within minutes, your safety net can't be a release train that gives everyone time to notice a problem before it ships — it has to be built into the pipeline itself, because there's no train to catch it on the way out. The PR gate Every pull request into main runs through the same automated gate before it's mergeable: a type check, a lint pass, an automated test suite, and end-to-end checks against a real device build. None of that is negotiable — it's the floor, not a nice-to-have. E2E is a big enough topic on its own — closing the loop between what a unit test can see and what actually happens on a phone in someone's hand — that it deserves its own dedicated post rather than a paragraph here. jobs : typecheck : run : npm run typecheck lint : run : npm run lint test : run : npm test e2e : run : npm run e2e Nothing exotic under the hood — ESLint for the lint pass, Husky for local pre-commit/pre-push hooks so the same checks catch you before CI even runs, Jest as the test runner, and React Native Testing Library for component-level tests. Popular, boring, well-documented tooling on purpose — the pipeline's value is in how these are wired together and gated, not in any one tool being clever. Feature flags are the real safety valve Here's the entry condition that makes OTA-from- main safe at all: shipping code and releasing a feature are two different actions. A merge can put new code on every user's device within minutes — that's deploy. Whether that code actually does anything visible is a separate switch, controlled by a remote feature flag, not by whether the code merged. That decoupling is what makes trunk-based development survivable. Nobody has to get the timing of a merge exactly right, bec

React Form Backends Compared: Serverless Functions vs. Form-as-a-Service React makes building a form straightforward. What happens after onSubmit is a different question: you still need somewhere to validate, process, store, or forward the submission. Two common approaches are writing a serverless function yourself or using a hosted form backend such as onsubmit.dev (form backend). This article compares the two, using Vercel/Netlify-style functions for the DIY approach and onsubmit.dev with its React integration as the managed example. The basic problem Imagine a typical contact form: function ContactForm () { return ( < form > < input name = "email" type = "email" required /> < textarea name = "message" required /> < button type = "submit" > Send </ button > </ form > ); } The React component is only the UI. A real application usually needs backend behavior too: accepting the HTTP request validating and sanitizing input handling errors preventing abuse or spam delivering or storing the submission keeping credentials and other secrets off the client There are two broad ways to get that backend. Option 1: Build a serverless function With platforms such as Vercel and Netlify, you can create an HTTP function alongside your application and have your React form submit to it. Conceptually, the architecture looks like this: React form | v Your serverless function | +--> validation +--> email provider +--> database +--> other services The main advantage is control. Your function owns the request lifecycle, so you decide precisely how data is validated, transformed, authenticated, stored, and forwarded. If a submission needs to update PostgreSQL, call an internal API, enqueue a job, and return application-specific data, a custom backend is usually the natural solution. Serverless functions can also reduce product-level vendor lock-in. Although platforms have their own deployment conventions, HTTP handlers and their business logic are generally portable with some work. The tr

Building web applications today often comes with a trade-off between feature velocity and performance. Over-reliance on heavy frameworks or unoptimized third-party plugins can quickly lead to bloated bundle sizes and poor user experience. As an engineer running DevLanka , a small web and app development studio in Sri Lanka, I’ve had the opportunity to build custom web systems and mobile applications. In this article, I want to share a few practical engineering insights on modern web performance, toolchain selection, and practical security. 1. Toolchain & Bundle Size Considerations Moving from legacy build setups to modern toolchains like Vite and React 19 significantly improves development DX (Developer Experience) and build output: Module Bundling: Vite leverages ES modules during development, resulting in faster startup times and optimized production builds. Tree-Shaking: Ensuring modern JavaScript imports are properly tree-shaken prevents unused code from shipping to the client. Rendering Strategy: For public-facing, SEO-critical pages, client-side rendering (CSR) alone may not always be ideal. Combining SSG (Static Site Generation) or SSR (Server-Side Rendering) with lightweight React components ensures proper HTML pre-rendering for search crawlers. 2. When to Use Custom Engineering vs. CMS Platforms There is no single "best" tech stack for every project. Choosing between a traditional CMS (like WordPress/Wix) and custom software engineering depends entirely on project requirements: Use a CMS when: You need rapid deployment, simple content publishing, or a standard marketing site with a limited budget. Use Custom Engineering when: You require tailored business logic, seamless API integrations, custom database schemas, or fine-grained control over execution environments. Note on Security: Custom development reduces dependency on third-party plugin vulnerability exploits, but it is not inherently immune to security risks. Custom code still requires strict adherenc

There's no shortage of React UI kits on npm. Search for one right now, and you'll get hundreds of results, most with the same seven button variants and a Storybook someone abandoned halfway through. So when I open-sourced brightframe — pulled out of a real coworking site I built, LAN — I didn't really want to write the usual "here's our 70 components, look how many there are" post. Component count isn't interesting. Anyone can list props and screenshot a button in five colors. What actually took time, and what I think is worth writing about, is the part that happens after the README makes a claim. "Tree-shakeable." "Server Components-safe." "Accessible." Those are three words I typed pretty confidently early on, and then, more recently, I sat down and tried to prove myself wrong on each one. This post is what that turned up. "Tree-shakeable per component" — okay, but how much, actually? Every component ships as its own entry point: import " brightframe/tokens.css " ; import " brightframe/Btn.css " ; import { Btn } from " brightframe/Btn " ; Saying "unused components add nothing to your bundle" costs nothing. I added size-limit to CI so the claim has to keep being true, not just have been true once when I wrote the sentence: Entry Minified + brotli Whole kit ( import { ... } from "brightframe" , JS) 40.13 kB Whole kit ( brightframe/style.css ) 11.83 kB One component ( brightframe/Btn , JS) 641 B One component's styles ( brightframe/Btn.css ) 890 B 641 bytes vs. 40 kilobytes. That gap is the whole reason the per-component entry points exist, and now if a refactor accidentally makes Btn drag in half the kit, the build just fails instead of me finding out from a bundle-size complaint six months later. "Server Components-safe" — this one had an actual bug in it RSC has no hook dispatcher at all. A component needs "use client" if it does one of two things in its own source: calls a hook, or wires up a DOM event handler in its own JSX. I wrote a little script ( scripts/che