标签：#JavaScript

Array An Array is a collection of multiple values stored in a single variable. let fruits = [ " Apple " , " Mango " , " Orange " ]; Here, fruits contains three values. Why Do We Need Arrays? Without an array, you would write: let fruit1 = " Apple " ; let fruit2 = " Mango " ; let fruit3 = " Orange " ; Using an array: let fruits = [ " Apple " , " Mango " , " Orange " ]; This makes the code shorter and easier to manage. Array Index Each value in an array has an index. The index always starts from 0. Index: 0 1 2 ------------------------- Array: Apple Mango Orange Accessing Array Elements Use the index number to access a value. let fruits = [ " Apple " , " Mango " , " Orange " ]; console . log ( fruits [ 0 ]); console . log ( fruits [ 1 ]); // Output: Apple Mango Changing an Array Element You can update any value using its index. let fruits = [ " Apple " , " Mango " , " Orange " ]; fruits [ 1 ] = " Banana " ; console . log ( fruits ); // Output: [ " Apple " , " Banana " , " Orange " ] Finding the Length of an Array Use the "length" property. let fruits = [ " Apple " , " Mango " , " Orange " ]; console . log ( fruits . length ); // Output: 3 Adding Elements push() – Add at the End let fruits = [ " Apple " , " Mango " ]; fruits . push ( " Orange " ); console . log ( fruits ); // Output: ["Apple", "Mango", "Orange"] unshift() – Add at the Beginning let fruits = [ " Mango " , " Orange " ]; fruits . unshift ( " Apple " ); console . log ( fruits ); // Output: ["Apple", "Mango", "Orange"] Removing Elements pop() – Remove from the End let fruits = [ " Apple " , " Mango " , " Orange " ]; fruits . pop (); console . log ( fruits ); // Output: ["Apple", "Mango"] shift() – Remove from the Beginning let fruits = [ " Apple " , " Mango " , " Orange " ]; fruits . shift (); console . log ( fruits ); // Output: ["Mango", "Orange"] Looping Through an Array Use a "for loop" to print all elements. let fruits = [ " Apple " , " Mango " , " Orange " ]; for ( let i = 0 ; i < fruits . length ; i

GitHub热门项目 | The open source server management software for SSH, VNC & RDP | Stars: 4,790 | 97 stars today | 语言: JavaScript

Hey everyone, I recently had an "aha!" moment regarding how React handles updates under the hood, and I wanted to share it because I realize a ton of developers (including myself, until recently) trip over this exact concept. The common mental model is that React Reconciliation compares the Virtual DOM directly to the Real Browser DOM and surgically updates only what changed. But that’s fundamentally incorrect. React never reads or directly compares the real DOM during the diffing process. It actually splits the process into two entirely separate phases —The Render Phase and The Commit Phase —which creates a massive distinction between Re-rendering and Re-painting. Here is the exact breakdown of what happens when a single state change affects just 1 out of 100 divs in a component: The Render Phase (Pure JavaScript) When state changes, React calls your component function. It doesn't know which of your 100 divs changed yet, so it has to evaluate the entire JSX block. The Scope: React re-renders all 100 virtual divs in memory. The Process: It builds a brand-new Virtual DOM tree and compares it to the previous Virtual DOM tree (JavaScript object vs. JavaScript object). The Outcome: It spots that 99divs are identical, but 1 div has an update. It flags that single virtual node with an "Update" tag. Because this happens purely in-memory as JavaScript, it is incredibly fast and cheap. The Commit Phase (The Real DOM Update) This is where Reconciliation does its primary job. It acts as a shield to protect the browser from doing unnecessary work. The Scope: React completely ignores the 99 unchanged elements. The Process: It surgically targets the single real browser div associated with the flagged Virtual DOM element and updates only its modified property (e.g., element.textContent = "New Value"). The Outcome: The browser repaints only 1 single div on the screen. The Conclusion: Reconciliation isn't about stopping React from re-rendering (re-running JS to calculate the UI). It

Building a Lightweight Product Filter with Vanilla JavaScript While building a small e-commerce project, I wanted users to filter products instantly without refreshing the page. Instead of relying on a frontend framework, I opted for a simple solution using HTML data attributes, vanilla JavaScript, and a little CSS. The goal was straightforward: let visitors filter items by size while keeping the interface fast, responsive, and easy to maintain. HTML Structure Each product card stores its information in data-* attributes. This keeps the markup clean and makes filtering straightforward. <div class= "filters" > <button class= "filter-btn" data-filter= "all" > All </button> <button class= "filter-btn" data-filter= "small" > S </button> <button class= "filter-btn" data-filter= "medium" > M </button> <button class= "filter-btn" data-filter= "large" > L </button> </div> <div class= "product-grid" > <div class= "product-card" data-size= "medium" data-style= "cargo" > Cargo Shorts </div> <div class= "product-card" data-size= "large" data-style= "chino" > Chino Shorts </div> <!-- More product cards --> </div> Using data attributes means you can add new filter categories later without changing your overall structure. JavaScript Filtering Logic The filtering logic listens for button clicks and simply shows or hides product cards based on the selected size. const filterButtons = document . querySelectorAll ( " .filter-btn " ); const productCards = document . querySelectorAll ( " .product-card " ); filterButtons . forEach (( button ) => { button . addEventListener ( " click " , () => { const filterValue = button . dataset . filter ; productCards . forEach (( card ) => { const cardSize = card . dataset . size ; if ( filterValue === " all " || cardSize === filterValue ) { card . classList . remove ( " hidden " ); } else { card . classList . add ( " hidden " ); } }); filterButtons . forEach (( btn ) => btn . classList . remove ( " active " )); button . classList . add ( " active "

You installed TypeScript 7, ran your build, and something broke. Maybe ESLint crashed with a cryptic TypeError: Cannot read properties of undefined (reading 'Cjs') . Maybe ts-jest stopped transforming your test files. Maybe your CI pipeline just went red for no reason you can point to. You're not doing anything wrong. TypeScript 7 shipped tsgo, a genuine Go port of the type-checker, not a rewrite from scratch. But the tools that plug into TypeScript don't talk to the type-checker directly, they talk to a programmatic API. That API isn't stable yet, it lands in 7.1. Until then, a chunk of the ecosystem throws errors the moment you point typescript at the new version. The 10-second version Don't replace typescript in your dependencies with the 7.x line if you use typescript-eslint, ts-jest, ts-morph, or any tool doing programmatic type-checking. Keep typescript pinned to 6.x for those tools, and install @typescript/native-preview alongside it purely for fast type-checking in CI or a manual tsgo --noEmit command. Two compilers, living side by side, each doing a different job. Why this is happening The TypeScript team calls this Project Corsa: a line-by-line port of the compiler from the old JavaScript codebase (Strada) into Go (Corsa), preserving identical type-checking behavior while getting roughly 10x faster builds from real OS threads instead of Node's single-threaded event loop. That preservation is impressive, but it's a port, not a reimplementation with a new API surface. Tools like typescript-eslint depend on the programmatic API to walk your AST and pull type information out of the compiler, and that API isn't ready until 7.1. What's actually broken right now typescript-eslint — npm refuses to install alongside typescript@7 at all (ERESOLVE error), because the published peer range only allows versions below 6.1.0. Force it through and ESLint crashes deep inside typescript-estree . Tracked as typescript-eslint issue #12518, closed as not planned since the real

When you are testing an OpenAI-compatible API endpoint, the fastest path is not to wire it into a full app immediately. Start with one small request, confirm the base URL, API key, model name, and response shape, then move the working call into your product. I put together a compact examples repo for that exact first-call workflow: https://github.com/OriginStartAI/openai-compatible-api-examples It includes curl, Python, Node.js, streaming responses, JSON structured output, migration notes, and a small error reference. 1. Set environment variables first Keep credentials out of source code and use environment variables: ORIGINSTARTAI_API_KEY = your_api_key_here ORIGINSTARTAI_BASE_URL = https://your-api-base-url/v1 ORIGINSTARTAI_MODEL = your_enabled_model The important parts are simple: base_url or baseURL points to your OpenAI-compatible endpoint. api_key or apiKey is your provider key. model must be enabled for your account. Streaming support should be tested separately. 2. Test with curl Curl is useful because it removes SDK behavior from the equation: curl " $ORIGINSTARTAI_BASE_URL /chat/completions" \ -H "Authorization: Bearer $ORIGINSTARTAI_API_KEY " \ -H "Content-Type: application/json" \ -d '{ "model": "' " $ORIGINSTARTAI_MODEL " '", "messages": [ {"role": "user", "content": "Say hello from OriginStartAI"} ] }' If this works, your endpoint, key, and model are probably configured correctly. 3. Then test Python from openai import OpenAI import os client = OpenAI ( api_key = os . environ [ " ORIGINSTARTAI_API_KEY " ], base_url = os . environ [ " ORIGINSTARTAI_BASE_URL " ], ) response = client . chat . completions . create ( model = os . environ [ " ORIGINSTARTAI_MODEL " ], messages = [{ " role " : " user " , " content " : " Write one friendly onboarding sentence. " }], ) print ( response . choices [ 0 ]. message . content ) 4. Then test Node.js import OpenAI from " openai " ; const client = new OpenAI ({ apiKey : process . env . ORIGINSTARTAI_API_KEY , baseURL : p

Your AI Agent Needs Tracing, Not Just Logs You've probably already called an LLM from a Node.js backend. That part's easy — every provider ships a solid SDK. The part that actually trips people up is what happens after : turning that one API call into an agent that reasons, uses tools, loops a few times, and still behaves once real users are hitting it. Here's a small, honest pattern for that — plus the one thing most tutorials skip: making the loop debuggable. Why Node.js is doing this job Node has quietly become the default home for the application layer around AI. It's become the preferred middle layer for deploying modern AI agents, wrapping heavier model inference behind fast Node APIs. Python still owns training and the heavy orchestration frameworks — Node owns the gateway, the auth, the streaming UI, and the business logic wrapped around all of it. On the SDK side, things consolidated fast: OpenAI's Node SDK holds roughly a third of weekly npm downloads across the major JS AI SDKs, and Anthropic's TypeScript SDK has grown nearly tenfold in a year. And despite all the framework noise, most production teams just use the Claude or OpenAI SDK directly — reaching for LangChain.js or Mastra only once multi-agent coordination actually earns its keep. The loop: reason, act, repeat Almost every "agent" in 2026 runs on the same loop: reason about the task, act through a tool call, look at what came back, reason again — repeat until done. That's it. The engineering is in the guardrails around it, not the loop itself. // agent.js import Anthropic from " @anthropic-ai/sdk " ; const anthropic = new Anthropic (); // reads ANTHROPIC_API_KEY from env const tools = [ { name : " get_order_status " , description : " Look up the status of a customer order by order ID. " , input_schema : { type : " object " , properties : { orderId : { type : " string " } }, required : [ " orderId " ], }, }, ]; async function getOrderStatus ({ orderId }) { // stand-in for a real DB/service call r

JavaScript ships with Array , Set , and Map — but nothing that keeps its elements sorted as you insert. If you've ever built a leaderboard, an order book, or anything that answers "give me the items between X and Y", you know the workaround: push into an array and .sort() after every insertion. It works, until scale punishes you — you're paying O(n log n) over and over for data that was already 99.9% sorted. Python solved this years ago with sortedcontainers , built on an elegant "list of lists" design instead of balanced trees. I just published sorted-collections , which brings that idea to TypeScript — with full credit to the original as its inspiration. What you get SortedList, SortedSet, SortedMap — always sorted, no manual re-sorting, range queries built in. O(log n) insertions, O(√n) positional access via sqrt-decomposition into buckets. Zero runtime dependencies , ~2KB gzip, types included, dual ESM/CJS. Package quality gated in CI with publint , arethetypeswrong , and size-limit . The API in 30 seconds import { SortedList , SortedSet , SortedMap } from " sorted-collections " ; // SortedList: stays sorted on every insert const list = new SortedList ([ 5 , 1 , 4 , 2 , 3 ]); list . add ( 0 ); console . log ([... list ]); // [0, 1, 2, 3, 4, 5] console . log ( list . at ( 2 )); // 2 — positional access on sorted order // SortedSet: no duplicates, plus set algebra const a = new SortedSet ([ 1 , 2 , 3 , 4 ]); const b = new SortedSet ([ 3 , 4 , 5 ]); console . log ([... a . intersection ( b )]); // [3, 4] // SortedMap: keys always in order, range queries built in const prices = new SortedMap < number , string > ([ [ 104.5 , " order-3 " ], [ 99.2 , " order-1 " ], [ 101.0 , " order-2 " ], ]); for ( const [ price , id ] of prices . irange ( 100 , 105 )) { console . log ( price , id ); // 101.0 order-2, then 104.5 order-3 } Custom comparators are fully typed: number and string get natural ordering for free; for your own types, TypeScript requires a comparator at compile

GitHub热门项目 | LLM API 管理 & 分发系统，支持 OpenAI、Azure、Anthropic Claude、Google Gemini、DeepSeek、字节豆包、ChatGLM、文心一言、讯飞星火、通义千问、360 智脑、腾讯混元等主流模型，统一 API 适配，可用于 key 管理与二次分发。单可执行文件，提供 Docker 镜像，一键部署，开箱即用。LLM API management & key redistribution system, unifying multiple providers under a single API. Single binary, Docker-ready, with an English UI. | Stars: 35,709 | 30 stars today | 语言: JavaScript

GitHub热门项目 | Comet: agent skill harness for turning ideas into evaluated workflows | Stars: 2,264 | 26 stars today | 语言: JavaScript

When I first started building APIs with Express.js, every async controller looked the same. I would write a try block, perform some database operations, and then write a catch block that called next(error) . It worked, so I copied the same pattern into every controller. One controller became ten. Ten became fifty. Eventually, I realized that half of my controller code wasn't actually business logic, it was just repetitive error handling. That's when I discovered the Async Handler pattern. The Problem A typical Express controller often looks like this: export const getUser = async ( req , res , next ) => { try { const user = await User . findById ( req . params . id ); if ( ! user ) { throw new Error ( " User not found " ); } res . json ( user ); } catch ( error ) { next ( error ); } }; There's nothing wrong with this code. The problem is that every async controller ends up looking exactly the same. Every file contains: try, catch and next(error) over and over again. Besides being repetitive, it's also easy to forget. Miss one try-catch block, and Express won't automatically catch errors thrown inside async functions. What Is an Async Handler? An async handler is a small wrapper function that automatically catches errors from async controllers. Instead of every controller handling its own errors, the wrapper does it for you. A Simple Analogy Imagine an office where every employee has to stop working whenever someone rings the front door. Besides doing their own job, they also have to greet every visitor. This quickly becomes repetitive and inefficient. Instead, the company hires a receptionist to handle every visitor. Now the employees can focus on their actual work while the receptionist takes care of the door. An async handler works the same way. Controllers focus on handling requests, while the async handler catches errors and passes them to Express's error handler. Without an Async Handler export const createUser = async ( req , res , next ) => { try { const user

Why this matters I’ve worked on a few frontend projects where code reviews turned into style debates—tabs vs spaces, semicolons, quote styles… you name it. It slows everything down and adds zero value. At some point, I realized this shouldn’t even be a discussion. So now, whenever I start a project, I set up Prettier + ESLint + Husky on day one. No debates. No manual fixes. No messy PRs. This post is exactly how I do it. 🧰 What each tool actually does Prettier → formats your code automatically ESLint → catches bad patterns & enforces rules Husky → runs checks before commits (so no one skips them) Together → clean, consistent code without thinking ⚙️ Step 1 — Install dependencies npm install -D prettier eslint husky lint-staged 🎯 Step 2 — Setup Prettier Create: prettier.config.js module . exports = { semi : true , singleQuote : true , trailingComma : ' all ' , tabWidth : 2 , }; Create: .prettierignore node_modules dist build 🔍 Step 3 — Setup ESLint Initialize: npx eslint --init Then tweak your config: .eslintrc.js module . exports = { extends : [ ' eslint:recommended ' , ' plugin:react/recommended ' , ' prettier ' ], rules : { ' no-unused-vars ' : ' warn ' , ' react/react-in-jsx-scope ' : ' off ' , }, }; 👉 Important: "prettier" disables ESLint rules that conflict with Prettier. 🔗 Step 4 — Connect ESLint + Prettier Install: npm install -D eslint-config-prettier That’s it. Now ESLint won’t fight Prettier. 🐶 Step 5 — Setup Husky Initialize Husky: npx husky init Add pre-commit hook: npx husky add .husky/pre-commit "npx lint-staged" 🚀 Step 6 — Setup lint-staged Add to package.json : "lint-staged" : { "*.{js,jsx,ts,tsx}" : [ "eslint --fix" , "prettier --write" ] } 💡 What happens now? Every time you commit: ESLint checks your code Prettier formats it Only clean code gets committed No more: “fix formatting” PR comments broken lint rules in main branch inconsistent code styles 🧠 Real impact (from experience) After adding this to a team project: PR noise dropped a lot reviews

Two buttons in a confirmation dialog look simple: Cancel and Confirm. Keyboard behavior makes the component a small state machine. A recent MonkeyCode change gives us a concrete example. Issue #862 and PR #863 add these shortcuts to the slash-command confirmation: ArrowLeft -> focus Cancel ArrowRight -> focus Confirm The reviewed implementation at commit c58bcd4 moves focus through button refs. That is a useful extra interaction. It is not a replacement for the dialog's accessibility foundation. Keep the baseline first For an alert-style confirmation, users still need: an accessible name and description; focus moved inside when the dialog opens; Tab and Shift+Tab constrained to dialog controls; Escape to dismiss when cancellation is allowed; visible focus; focus returned to the trigger after close; actual buttons whose labels explain the actions. The WAI-ARIA Authoring Practices Alert Dialog Pattern describes the modal semantics and keyboard foundation. Left/right mapping is a product shortcut, not a required AlertDialog convention. That means we must not steal keys from the established behavior around it. Isolate the extra mapping The companion keyboard.mjs starts with a pure function: export function arrowAction ( key ) { if ( key === " ArrowLeft " ) return " cancel " ; if ( key === " ArrowRight " ) return " confirm " ; return null ; } The event handler ignores unrelated and modified keys: export function handleDialogArrow ( event , controls ) { const action = arrowAction ( event . key ); if ( ! action || event . altKey || event . ctrlKey || event . metaKey ) return false ; event . preventDefault (); controls [ action ]. focus (); return true ; } Notice what is absent: no handler for Tab , Shift+Tab , Escape , or Enter . The native <dialog> and buttons in the minimal demo retain their normal jobs. In a React component, use a well-tested modal/dialog primitive for focus containment and dismissal, then add this narrow handler to its content. A complete minimal dialo

Have you ever been in a computer lab, classroom, or office where you needed to quickly send a file between your phone and laptop? I run into this problem all the time. Sometimes there's no USB cable, no pendrive, Bluetooth is painfully slow, or uploading to cloud storage just to download the file on another device feels unnecessary. So I decided to build SilentShare . What is SilentShare? SilentShare is a browser-based peer-to-peer file sharing application that lets you instantly share: 📁 Files (up to 50 MB) 💻 Code snippets 📝 Text 🖼️ Images No installation. No account. No server storing your files. Your data goes directly from one device to another using WebRTC . Whether you're sending files from your phone to your laptop, between classmates, or across the internet, SilentShare keeps the process simple. Why I Built It I wanted something that: Opens instantly in any browser Doesn't require creating an account Doesn't upload files to someone else's server Works on desktop and mobile Feels lightweight and fast Instead of relying on cloud storage, I wanted the browser itself to become the transfer tool. Features ✨ Peer-to-peer file transfer using WebRTC 📂 File sharing up to 50 MB (including ZIP files) 🔒 Optional end-to-end encrypted rooms using AES-GCM 📷 QR code invitations with built-in camera scanner 📊 Live progress, transfer speed, ETA, pause & resume 🖼️ Preview support for: Images Audio Video PDFs 💻 Share code snippets with syntax highlighting 👥 Multi-user rooms (around 5 participants) 🌙 Dark & Light mode 📱 Installable as a Progressive Web App (PWA) How It Works Create a room Receive a random room code Share the code, QR code, or invite link Other devices join Start sharing instantly The files are transferred directly between devices instead of passing through a storage server. Privacy One of the goals of SilentShare was privacy. No user accounts No cloud storage No permanent database Nothing stored after the browser tab closes If you set a room password, all transf

Welcome back to The Everyday Backend Engineer: Practical Design Patterns . In our last post, we made our core algorithms interchangeable using the Strategy Pattern. Today, we close out our design patterns roadmap with arguably the most native pattern in the entire Node.js ecosystem: The Observer Pattern . Let’s look at how to master event-driven decoupling to trigger secondary workflows seamlessly without bloat. 🔴 The Problem: Direct Inline Side-Effects Imagine you are writing a video processing engine or a simple order fulfillment system. When a specific event happens—such as an order being finalized—multiple unrelated departments want a piece of the action: The Notification Service needs to send an SMS and Email receipt. The Logistics Service needs to generate a warehouse fulfillment ticket. The Analytics Service needs to update marketing tracking boards. If you don't decouple these events, your primary execution service ends up managing a giant web of secondary micro-services: // ❌ Bad Practice: The primary service is drowning in secondary dependencies const EmailService = require ( ' ../services/email ' ); const WarehouseService = require ( ' ../services/warehouse ' ); const AnalyticsTracker = require ( ' ../services/analytics ' ); class OrderProcessor { async finalizeOrder ( order ) { console . log ( " Saving primary order to the database... " ); // Core business logic ends here // The codebase smell: Procedural cascading dependencies await EmailService . sendReceipt ( order . userEmail ); await WarehouseService . createShipment ( order . id ); await AnalyticsTracker . trackSale ( order . totalAmount ); } } module . exports = OrderProcessor ; Why does this slow your system down? Your core OrderProcessor is now structurally dependent on three separate systems. If the AnalyticsTracker throws a network timeout error or if the warehouse API changes its interface, your core transaction fails or hangs. Furthermore, adding a fourth side-effect (like an auditing logger

🎧 DJ ROOTS – Building a Real-Time Collaborative Music Platform with Gesture Control Crowd Vibes. You Control. Music is one of the best ways to bring people together. However, during parties, college events, hostel gatherings, or study sessions, one common problem always exists— who gets to control the music? Usually, one person owns the playlist while everyone else keeps requesting songs. This often creates confusion, interruptions, and arguments over what should play next. Our team wanted to solve this problem by creating a platform where everyone in the room gets an equal voice. Welcome to DJ ROOTS . 🚨 The Problem Traditional music streaming at group events has several limitations: Only one person controls the playlist. Song requests are ignored or forgotten. No real-time collaboration. Existing queue systems don't truly represent the crowd's choice. There is no simple browser-based solution that works instantly without downloading an app. We wanted to build something that makes music democratic . 💡 Our Solution DJ ROOTS is a real-time collaborative DJ platform where anyone can join a room using a simple room code. Participants can: Create or join a music room Add songs using YouTube Upvote or downvote tracks Automatically reorder the queue based on crowd votes Watch every change happen instantly across all connected devices Let the host control playback using webcam hand gestures Instead of one person deciding the playlist, the entire crowd decides what plays next. 🛠 Tech Stack Frontend React 19 Vite Tailwind CSS v4 Framer Motion Three.js GSAP OGL Backend Node.js Express.js Database & Authentication Supabase PostgreSQL Supabase Authentication Supabase Realtime Computer Vision Google MediaPipe Gesture Recognizer Audio Pipeline yt-dlp youtube-dl-exec HTML5 Audio API Web Audio API Deployment Vercel (Frontend) ⚙️ How It Works Users create or join a room using a unique room code. Songs are added using a YouTube link or search. Song metadata is automatically fetched. E

GitHub热门项目 | htmx - high power tools for HTML | Stars: 48,449 | 13 stars today | 语言: JavaScript

Introduction I've spent way too much time trying to come up with some generic introduction for this story, but then I realized none of you probably want to read that anyway. So instead, I'll just jump straight into the story—which is why you're here in the first place. The day I received the requirements The story begins when I received the requirements for a new feature that allows Teachers to share their presentation to review slides before the Lecture begins, so we would have teachers aids using the web version and seeing a screenshare from the main pc powerpoint, at first I thought maybe we can use HLS or RTMP for this and be okay with the 3 seconds delay that it has, but then I continued reading the ticket, we also needed the user to move to the next and previous slides via the web application, which immediately threw my initial idea out of the window. This is because if the user needs to interact with the application there is no way it will be usable without almost immediate feedback. Since we needed to show this to the client quickly we had 2 weeks to implement this feature, so before I did anything, I stopped and started drafting a simple design doc, which besides the fancy name was really just a document with my raw notes taken from research and comparisons between different solutions. After spending some time doing research and looking into different architectures and engineering blogs from companies like Twitch, Slack and Discord, I narrowed the possibilities down to four common architectures used for this type of use case. Architecture Options P2P Mesh This approach revolved around a user establishing WebRTC connections with every other user in the room. Besides being difficult to manage in terms of connections and sessions, it had one fatal flaw: network and CPU overhead. If we had twenty users in the room, every participant would maintain nineteen separate peer connections while sending nineteen streams, quickly consuming both CPU and bandwidth. MCU (M

In the previous article , we briefly discussed the relationship between Cookies and CORS . In this article, we'll take a closer look at how browsers decide whether a Cookie should be included in a Cross-Origin request. One of the most common misconceptions is that once CORS is configured correctly, Cookies are automatically sent with every request. In reality, that's not how browsers work. 📌 Default Browser Behavior When a Cross-Origin request is made using fetch() or XMLHttpRequest , browsers do not send Cookies, Authorization headers, or other credentials by default. For example: fetch ( " https://api.example.com/profile " ) Even if the user is already logged into api.example.com , the browser will not include any Cookies with this request. This default behavior helps prevent authentication data from being unintentionally leaked across different Origins. 📌 How Can We Send Cookies? If you want the browser to include Cookies in a Cross-Origin request, you must explicitly use the credentials option. For example: fetch ( " https://api.example.com/profile " , { credentials : " include " }) Using credentials: "include" does not guarantee that Cookies will be sent. Instead, it tells the browser: "If there are any Cookies that are eligible to be sent with this request, include them." 📌 What Makes a Cookie Eligible? Even with credentials: "include" , the browser still evaluates the Cookie before sending it. Some of the most important checks include: Domain Path SameSite For example: If the Cookie's Domain doesn't match the request destination, it won't be sent. If the request path doesn't satisfy the Cookie's Path attribute, it won't be sent. If the Cookie's SameSite policy blocks Cross-Site requests, it won't be sent. In other words, credentials is only the first requirement , not the final decision. 📌 Server Configuration Matters Too If your application expects JavaScript to access the response while using Cookies, the server must also be configured correctly. For exampl

In the previous article , we learned that an Origin consists of three components: Scheme (Protocol) Host Port Browsers use these three components to determine whether a request is Same-Origin or Cross-Origin . Whenever a web page attempts to access resources from a different Origin, a security mechanism called CORS (Cross-Origin Resource Sharing) comes into play. 📌 Why Does a CORS Error Occur? Suppose your web application is running at: https://app.example.com Now it tries to fetch data from: https://api.example.com Although both URLs belong to example.com , their Hosts are different. That means they have different Origins. As a result, the browser treats this as a Cross-Origin request. If the destination server does not explicitly allow this Origin, the browser prevents JavaScript from accessing the response, resulting in what we commonly call a CORS Error . 💡 Important: CORS is a browser security mechanism , not a server security mechanism. ⚠️ A Common Misconception About CORS Many developers believe that a CORS error means the request never reached the server. In most cases, that's simply not true. Typically: ✅ The browser sends the request. ✅ The server receives it. ✅ The server generates and returns a response. ❌ The browser blocks JavaScript from accessing that response. In other words, the request was successful—the browser simply refuses to expose the response to your application because the CORS policy was not satisfied. This is why sending the exact same request using tools like Postman or curl usually works without any problems. Those tools are not browsers, so they do not enforce browser security policies like CORS. 📦 How Does the Server Handle CORS? To allow JavaScript to access the response, the server must include the appropriate CORS headers. The most important one is: Access-Control-Allow-Origin: https://app.example.com This header tells the browser that JavaScript running on https://app.example.com is allowed to read the response. ✅ Examples Suppos