标签：#frontend

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. My last development article completed the base requirements for keyboard functionality within the component; attention now shifts to adding some of the last functionality required, closing sublists when the lists holding them now close and determining what happens when a closed component is entered via the keyboard through the Tab and Shift+Tab keys. 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.8.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, 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 Focus and Refinement Support Release along with previous requirements. Content Links Introduction Acceptance Criteria Entering Closings Setting Up For Success Introduction The implementation of keyboard handling left one obvious keyboard issue to fix: an apparent keyboard trap that occurs when focus shifts into the component

So you have heard about the Tailwind CSS and want to incorporate into your new project. But those...

Ever started a new project and found yourself rebuilding the same modal, dropdown, toast notification, tabs, and switches for the 20th time? I got tired of that. So I built UltraHTML , a lightweight UI library that gives you modern components with simple HTML and JavaScript, no framework required. Getting Started Include the CSS and JS files: <link rel= "stylesheet" href= "dist/ultra.css" > <script src= "dist/ultra.js" ></script> Initialize UltraHTML: Ultra . init (); Done. Buttons UltraHTML includes two button styles out of the box: ultra-button — a clean, modern button. ultra-button-wave — adds a wave/ripple-style interaction effect. Basic button: <button class= "ultra-button" > Simple Button </button> Wave button: <button class= "ultra-button ultra-button-wave" > Wave Button </button> Buttons use UltraHTML's default green theme, but because they're standard HTML elements, you can easily customize them with CSS. For example, here's a red button that displays a popup message: <button onclick= "Ultra.popupmsg('Hello from UltraHTML!')" class= "ultra-button ultra-button-wave" style= "background-color: red" > Show Popup </button> You can create buttons that match your site's branding without learning a separate theming system: <button class= "ultra-button" style= "background-color: #3b82f6;" > Blue Button </button> <button class= "ultra-button ultra-button-wave" style= "background-color: #f59e0b;" > Orange Button </button> <button class= "ultra-button ultra-button-wave" style= "background-color: #ef4444;" > Red Button </button> UltraHTML handles the styling and interactions while still giving you full control over how your buttons look. Modal Example Need to display important information? <script> window . addEventListener ( " load " , () => { Ultra . init (); Ultra . modal ({ head : " Important " , text : " You need to reset your password " , buttonText : " Reset " , buttonAction : ( modal ) => { console . log ( " Going to reset page... " ); modal . remove (); } }); }

A few days ago, I shared an article: You Don't Need Another Agent. You Need a Linter. Then I did what I do with anything I write: shared it around — a few publications, a few channels. Two reasons: First, feedback. I'd genuinely rather get roasted and fix my blind spots than stay comfortable and wrong. Second, let's be honest: reach. Every writer enjoys seeing a few more views. Most of the responses were positive. One wasn't. A publication rejected it with the reason: LOW_QUALITY Fair enough. It means there's room for improvement. Funny enough, my caffeinated 1 AM brain disagreed. Then it did what every developer does when someone says "this isn't good enough." It took that personally. So I went back and reread the article. And after the initial ego check, I realized something serious: The article talked in detail about ESLint, why it matters more in an AI-assisted world than ever. What it did not do was answer the question that actually matters: What is ESLint, how does it work, and why has half the JavaScript ecosystem quietly built its quality process around it? So let's fix that. Now, this isn't a sequel to my last piece about untangling vibe-coded code. It stands on its own — one thing, done properly . A complete teardown of ESLint: What it is How it works internally Why companies use it as a quality gate The different classes of problems it solves How plugins work How to write your own rules Where it fails Why it still beats many AI-based review systems Fair warning. This article is going to be technical. There will be syntax trees. There will be compiler concepts. There will be enough JavaScript internals to make frontend developers slightly uncomfortable. I'll try my best to keep it readable not letting it turn into another manual - which nobody finishes. Let's start with the question most people never ask. What Is ESLint Actually Doing? Most developers describe ESLint like this: It checks code for mistakes. Technically true. Also completely useless. That's

Every few months, a post goes viral: "Please stop using [perfectly good tool]." This time it's lucide-react. And honestly? The take is lazy What's the actual problem? Nothing. The library is actively maintained, tree-shakable, TypeScript-friendly, and has 1000+ consistent icons. A new icon library dropped? Cool. That doesn't make this one broken. Tools don't expire — context does Before switching anything in production, ask: Is it maintained? ✅ Does it solve my problem? ✅ Is my team comfortable with it? ✅ Then keep using it. Real usage — still clean in 2026 import { Search , Bell , User } from ' lucide-react ' ; export default function Navbar () { return ( < nav > < Search size = { 20 } /> < Bell size = { 20 } strokeWidth = { 1.5 } /> < User size = { 20 } color = "#6366f1" /> </ nav > ); } Tree-shaking works perfectly — only Search, Bell, and User are bundled. Not the entire library. When you should switch Unpatched security vulnerability Repo abandoned for 2+ years Bundle size issue you've actually measured If none of these apply, you're switching for hype, not logic. The real issue "Please stop using X" posts get engagement. Developers see them, second-guess stable choices, and waste hours migrating things that weren't broken. Don't let LinkedIn trends drive your architecture. Build products. Not migrations.

You've built todo apps, counters, and forms. But can you handle a grid of 50 cells that reference each other through formulas? This challenge pushes your state management skills into real spreadsheet territory — formula evaluation, two-way cell bindings, and an interface that juggles editing, selection, and keyboard shortcuts all at once. 🔥 Start the Challenge Now 🧩 Overview Build a spreadsheet with real-time formula evaluation. You'll wire up a 10-row × 5-column grid where cells support basic values and Excel-style formulas (like =A1+B2), column and row selection, and a formula bar that mirrors what you're typing. ✅ Requirements Render a spreadsheet with column headers A through E and rows 1 through 10 Each cell uses an <output> element for the computed value and an <input> overlaid for editing Click a cell to edit; press Enter or blur to commit the change Formulas starting with = must be evaluated: Arithmetic: =1+1 → 2 Cell references: A1= 5 and B1= =A1+3 → 8 Click a column header to select/deselect that column Click a row number to select/deselect that row Selecting a column deselects any row and vice-versa Backspace clears the selected column or row Click outside the table deselects everything A formula bar ( fx ) mirrors the editing cell's value Cells must start empty — no default values 💡 Notes Use useState for cells, selected column, and selected row. No need for useReducer here. Each cell uses two overlapping layers: a visible <output> for the computed value and an invisible <input> for the raw formula. Toggle with opacity-0 / opacity-100 so the input stays mounted. Evaluate formulas with eval : generate JS const declarations from all cell values, wrap them in an IIFE, and evaluate. Recompute every cell on any change — cells can reference each other. 🧪 Tests renders the app title renders the spreadsheet with column headers A-E and rows 1-10 renders cells with initial empty values allows editing a cell and displays the new computed value evaluates a simple fo

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

If you’ve ever built a slide-out cart drawer, a dynamic free-shipping bar, or custom analytics tracking for a Shopify store, you've run straight into this brick wall: Shopify themes do not emit consistent, trustworthy cart events. You write a perfect event listener, only to find out a third-party product-bundle app uses old-school XMLHttpRequest (XHR) instead of fetch to add items to the cart. Your listener misses it completely, the cart drawer stays shut, and your user thinks the button is broken. Most developers end up copying and pasting messy, brittle window.fetch overrides into their projects. Frustrated by solving this over and over again, I built Shopify Cart Broadcaster —a zero-dependency, 2 KB utility that intercepts both Fetch and XHR requests seamlessly to provide universal DOM events. 👉 Check out the source on GitHub: Rabin-p/shopify-cart-broadcast (If this saves you an afternoon of debugging, drop a ⭐!) The Nightmare of the /cart/add Response Even if you successfully listen to Shopify's /cart/add.js request, Shopify throws another curveball at you. When you add an item to the cart, the server responds with only the item(s) that were just added —not the updated state of the entire cart. If your slide-out cart drawer needs the new total price to see if a discount threshold is met, you are out of luck. You're forced to manually chain another fetch('/cart.js') request to get the true state. My utility handles this annoying race-condition out of the box. It detects the mutation type, intercepts it, pushes the true cart events to the window and displays it beautifully. window . addEventListener ( ' shopify:cart-updated ' , ( e ) => { // Always gives you the accurate, updated cart object! console . log ( ' New Cart Total: ' , e . detail . cart . total_price ); });

A press effect, shadow on rest, lifted on hover, depressed on active, is not central to buttons. It can be used on cards, image gallery photos, and other elements. The same goes for animations and other behaviors. This leaves me to question "why aren't they decoupled from the component? In my own code I create with a dedicated behaviors layer. Each interaction pattern is its own class, independent of any component. You can even stack multiple behaviors together. Let's create a simple one that adds more click affordance. Press Example Adding b-press gives any flat element a physical depth through shadow states. It lifts on hover and depresses on active, giving users a clear sense that something is clickable. Disabled elements will lose the shadow entirely so the affordance disappears with the interaction. CSS @layer behaviors { .b-press { box-shadow: var(--wisp-shadow, 0 1px 2px rgba(0, 0, 0, 0.10), 0 1px 3px rgba(0, 0, 0, 0.06) ); cursor: pointer; } .b-press:hover { box-shadow: var(--wisp-shadow-hover, 0 4px 6px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.10) ); } .b-press:active { box-shadow: var(--wisp-shadow-active, 0 1px 2px rgba(0, 0, 0, 0.16), 0 1px 1px rgba(0, 0, 0, 0.12) ); transform: translateY(1px); } .b-press:disabled, .b-press[aria-disabled="true"] { box-shadow: 0 0 0 rgba(0, 0, 0, 0); cursor: not-allowed; } } HTML <div class="o-card b-press"> ... </div> Finally When we think of OOCSS we think of visual repeating patterns, but behaviors are patterns too and deserve the same love that objects and components get. You can find the decoupled behaviors in my framework source here: https://github.com/wispcode/wisp-css/tree/main/src/behaviors

Hey everyone! I'm a Front-End developer with over 4.5 years of hands-on experience building scalable, performant web applications. I'm currently looking for a full-time remote opportunity. i could make modern web applications using Next.js or React.js & fueled by a passion for solving complex problems, diving into intricate challenges, and crafting clean, scalable solutions that deliver seamless user experiences. 🛠 Tech Stack: React.js & Next.js (SSR, SSG, App Router) TypeScript & JavaScript (ES6+) - Node.js - Express.js REST APIs & state management (Zustand, React Query) CSS/Tailwind/Styled Components , many Animation packages Git, CI/CD basics, Docker performance-optimization & SEO friendly Application Time Management – Responsible – Open mind – Team work – Attention to detail Commitment to work – Continuous learning 💼 What I bring: 4.5+ years building production-grade UIs Strong focus on performance, accessibility, and clean code Experience working in agile, remote-friendly teams Good communication and ability to work independently across time zones 🌍 Availability: Full-time/Part-time remote | Open to companies worldwide 🌐 My Portfolio ⬇️⬇️ https://pouyaazhkan.vercel.app/ 👨🏻‍💻My GitHub ⬇️⬇️ https://github.com/PouyaAzhkan 📩 Email Me ⬇️⬇️ codpoya.azhkan@gmail.com Feel free to DM me or drop a comment — happy to share my portfolio and discuss further! forhire #frontend #react #nextjs #typescript #remotework #webdeveloper #developer #Front_End #hiredeveloper #hire

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

I finished building my first portfolio. I want everyone to give their honest opinion on it. No need to hold back. waliimran.vercel.app Thanks you!

Most developers learn CSS specificity once. They remember: #id > .class > div Then move on. Until one day… Everything looks correct. The CSS is present. The selector is correct. The z-index looks higher. And yet the UI is broken. That’s when CSS specificity stops being a beginner topic and becomes a production debugging problem. The Production Incident That Started This Recently, I was working on a microfrontend application. Everything worked fine initially. I opened a page, launched a modal and the UI looked correct. Then I navigated to another microfrontend. Its CSS got loaded. After returning to the original microfrontend, suddenly: ❌ Modal appeared behind page content ❌ Overlay behaved incorrectly ❌ z-index looked correct but wasn't working DevTools showed my CSS rule still existed. Yet another CSS rule was winning. The culprit? CSS Specificity. 🧠 What is CSS Specificity? CSS specificity is the algorithm browsers use to decide: Which CSS rule wins when multiple rules target the same element. Browsers don't simply apply: "The last CSS rule." That's one of the biggest misconceptions. Specificity is calculated first. Only when specificity is equal does source order become important. ⚔️ Example .modal { z-index : 9999 ; } .some-library .modal { z-index : 100 ; } HTML: <div class= "some-library" > <div class= "modal" ></div> </div> Many developers expect: .modal to win because the value is larger. But CSS doesn't compare values first. It compares selectors. 🧮 How Specificity Works Specificity is usually represented as: ID - CLASS - TYPE Specificity Table Selector Specificity * 0-0-0 div 0-0-1 .modal 0-1-0 [type="text"] 0-1-0 :hover 0-1-0 #dialog 1-0-0 Inline Style Highest MDN defines specificity as the weight browsers calculate to determine which declaration gets applied when multiple selectors match the same element. Example Calculation Selector: button .primary Contains: button → 0 -0-1 .primary → 0 -1-0 Total: 0-1-1 Another selector: #header button .primary Contai

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

A meta tag audit is a pile of binary checks. Title present, yes or no. Title in range, yes or no. Description present. One H1. og:image set. Canonical present. Run them all and you get a few dozen booleans. The problem is that a wall of green and red checkmarks does not motivate anyone. People glance at it, feel vaguely bad, and close the tab. A single number does motivate. "You are at 62" is a thing a person will act on. But a number only works if it is honest, and a number is only honest if it is explainable. So we set one hard constraint before writing any scoring code: every point a page loses has to trace back to a named check with a specific fix. No mystery deductions. If you are at 62 and not 100, the tool can point at the exact items that cost you the other 38. That constraint shaped every decision that followed, and it is the reason the rubric looks the way it does. This is the write-up of how we got from a pile of booleans to a number we are willing to defend. Choosing the dimensions and the weights The first decision was how to group the checks. We landed on five dimensions, each with a fixed weight, and the overall score is their weighted average: Basic meta, 30 percent. Title tag and meta description. Headings, 20 percent. H1 count and heading-level hierarchy. Open Graph, 20 percent. og:title, og:description, og:image, og:url. Twitter Card, 15 percent. twitter:card, twitter:title, twitter:description, twitter:image. Technical, 15 percent. Canonical, html lang, viewport, robots. The weights are the opinionated part, and they encode what we actually believe about how pages get found now. Basic meta gets 30 percent, the largest slice, because the title and description are the strings an AI engine quotes when it summarizes or cites a page. They are the highest-value characters on the whole page, so a gap there should cost the most. Technical gets the smallest slice at 15 percent, but for a subtler reason than "it matters least." Technical failures are rarer

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

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

Hello Developers! 👋 I recently completed my Bachelor of Computer Applications (BCA). For my final-year project, I built an Online Quiz Platform — a web application designed to make both conducting and taking quizzes simple, interactive, and efficient. This project allowed me to apply the concepts I learned throughout my degree and gain practical experience in full-stack web development. 🌐 Live Demo Project Link: nitinsmali / Online_Quiz My final year project is an Online Quiz Web Application designed for an user-friendly experience across devices. 🌐 Online Quiz System 🚀 Live Demo 🔗 https://onlinequiz-project.xo.je/online_quiz/ 🧠 About The Project The Online Quiz System is a full-stack web application designed to provide an interactive and engaging online quiz experience. Users can register, log in, attempt quizzes, track scores, and view leaderboard rankings in real time. This project was developed to strengthen concepts in: Full-Stack Web Development Frontend & Backend Integration Database Management Authentication Systems Hosting & Deployment Real-World Application Flow ✨ Features 🔐 Authentication System User Registration Secure Login System Session Handling Password Management 📚 Quiz Management Category-Based Quizzes Dynamic Questions Timer-Based Quiz System Automatic Score Calculation 🏆 User Performance Leaderboard Rankings User Profile Dashboard Quiz Score Tracking 💬 Feedback System Feedback Submission Database Storage 📱 Responsive UI Mobile-Friendly Design Interactive User Experience Clean Interface 🛠️ Tech Stack Frontend HTML5 CSS3 JavaScript Backend PHP Database MySQL Development Tools XAMPP Git & GitHub Hosting InfinityFree 📂 Project Structure … View on GitHub 📌 Project Overview The Online Quiz Platform is a web-based application that allows users to participate in quizzes, answer multiple-choice questions, and receive instant results. The primary goal of this project was to create a system that eliminates manual quiz evaluation and provides a smooth online

Building a Resilient Real-Time Chat System with WebRTC, Faye, and WebSockets: A Practical End-to-End Building a Resilient Real-Time Chat System with WebRTC, Faye, and WebSockets: A Practical End-to-End Tutorial In this tutorial you’ll build a small, resilient real-time chat system that works across browsers, mobile devices, and constrained networks. You’ll learn how to architect a client/server model with signaling, leverage WebRTC data channels for peer-to-peer messaging when available, and fall back to a robust WebSocket-based relay when direct peer connections fail. The focus is on practical patterns, testable code, and observability to keep a live chat running under load or flaky networks. Key takeaways Understand when to use WebRTC data channels vs. WebSocket relays for real-time chat Implement a signaling server to establish WebRTC connections safely and efficiently Build a resilient message delivery pipeline with idempotent processing and retry semantics Instrument the system for latency, jitter, and message loss to avoid silent failures Test end-to-end flows with simulated network conditions and automated resilience tests Overview of architecture Clients (web and mobile) connect to a signaling server to negotiate WebRTC peers and/or WebSocket sessions. If a direct WebRTC peer connection is possible, use a data channel for low-latency chat messages. If WebRTC is blocked (firewalls, NAT), route messages through a relay server using WebSockets. The relay can also bridge peers that can’t connect directly. A lightweight message store (in-memory for demo, with an optional Redis-backed queue in production) provides at-least-once delivery guarantees and retry capabilities. Observability: metrics for connection attempts, handshake times, message delivery latency, retry counts, and error rates. Tracing spans help diagnose cross-service flows. Tech stack (example) Frontend: TypeScript, WebRTC DataChannel, WebSocket Backend: Node.js with Express for signaling API, ws or

Building a Robust Real-Time Chat System with WebRTC DataChannels and a Sovereign State Channel Building a Robust Real-Time Chat System with WebRTC DataChannels and a Sovereign State Channel In this tutorial, you’ll build a practical, end-to-end real-time chat system that runs in the browser and uses WebRTC DataChannels for peer-to-peer message delivery, complemented by a lightweight sovereign state channel (SSC) to handle presence, typing indicators, and simple message syncing when peers go offline. The goal is to enable low-latency messaging without a centralized server for message routing, while still providing resiliency and a predictable UX through a minimal, well-defined control plane. What you’ll learn How WebRTC DataChannels work and how to negotiate connections between peers. How to implement a lightweight presence and typing indicator system without a traditional server. How to design a simple optimistic UI with local echo and conflict-free merging when peers reconnect. How to wire up signaling using a minimal HTTP-based relay (for initial handshake) and fall back to a local-only mode for true peer-to-peer operation. Practical considerations for security, NAT traversal, and offline resilience. Overview and architecture Peers: Two or more browsers that discover each other and exchange WebRTC offer/answer via a signaling channel. DataChannel: Reliable ordered data channel for chat messages. Sovereign State Channel (SSC): A small, independent state machine that runs in each peer to track presence, typing, last-seen, and a local message log. It syncs state with peers opportunistically when connectivity exists, and retains messages locally if the remote is offline. Signaling: A simple public signaling endpoint (could be a WebSocket or HTTP POST/GET) used only to exchange session descriptions and ICE candidates at first. After a peer-to-peer path is established, signaling traffic should go dormant unless reconnecting. Persistence: LocalStorage or IndexedDB to per