标签：#web

TL;DR Some things can't be checked with a number, like whether an animation feels right. So a second, read-only agent grades the first one against a written rubric it is not allowed to edit. In my run the reviewer rejected the builder three times, and the most interesting problem it caught was in the test evidence, not the code. In Part 1 I built a loop that chased a number, frames per second. But most of what we care about in software is not a number. "Does this region switch feel good?" has no assert. You cannot write expect(feelsRight).toBe(true) . So this part is about how you check quality when there is nothing to measure. The approach I used is a second agent that grades the first one against a written rubric. In my run the reviewer turned the builder down three times before it approved anything, and the most interesting problem it found was not in the code at all. A quick reminder of the definition, since this is Part 2 of 3: a loop is an external script that runs the agent, a separate check the agent cannot edit decides pass or fail, and it repeats until it passes or hits a limit. In Part 1 the check was a Playwright test. Here the check is another agent. The problem this loop solves In the browser you can switch regions, say from Tamil to Korean, which swaps out hundreds of posters at once. Done badly, the grid flashes blank and jumps around. Done well, it fades from one set to the next, keeps its layout, shows a loading state, and puts you back at the top. "Done well" is subjective, which is the kind of thing you cannot unit-test. So I wrote it down as a rubric and had a second agent apply it. The bar: a rubric a person owns The rubric is seven plain-English checks in a file, and the first line is the one that matters: Overall APPROVED requires every item PASS. This file is human-owned. Only a person changes the bar. The seven items are things like a crossfade instead of a flash, no layout shift, a visible loading state, posters that stay 2:3, and landing

TL;DR This loop runs on a schedule and succeeds by doing nothing almost every night. The pass/fail check is plain deterministic code, with no AI in the decision. It can run entirely free on your own machine. Only the cloud/CI version needs a paid API key. Plus the one bug that broke all three loops. The first two loops in this series work the same way from your side: you start them and watch. This last one runs on a schedule, like a nightly job, while you are not looking. That changes what success even means. A scheduled maintenance loop is doing its job when it does nothing. It should run every night, find nothing wrong, cost almost nothing, and still be there on the night something actually breaks. This part covers that loop, the hook mechanism that the whole series relies on, and a bug that broke all three loops in the least convenient place possible. The definition one more time, since this is Part 3 of 3: a loop is a trigger that runs the agent, a check the agent cannot edit that decides pass or fail, and a repeat, or here a wait until the next run. The only new thing this time is the trigger. A timer starts it instead of you. The problem this loop solves The browser's poster data is baked ahead of time into JSON files and images. In a real deployment that data goes stale as films are added and metadata changes, so you want to regenerate it every so often and confirm it is still valid before it ships: on a timer -> regenerate the data -> validate it -> green ships, red shouts The gate: a plain check with no model in it The check is a Node script. For every region file it confirms three things and exits non-zero if any of them fail: it matches the expected JSON schema, it has at least the minimum film count, and every poster file it points to actually exists on disk. There is no language model in that list. The regeneration step might use Claude, but the decision about whether the data is good is plain, deterministic code. That is on purpose. You do not want the

🎧 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

Complete AI Agent Lockdown: 21 Policy Types for Maximum Security Giving an AI agent a wallet without guardrails is like giving a toddler a credit card — technically functional, potentially catastrophic. If you're building AI agents that interact with crypto wallets, the security model you choose isn't an afterthought. It's the difference between a useful autonomous system and one that drains your funds on a bad inference. This post is about exactly how WAIaaS handles that problem. Not vague promises about "enterprise-grade security" — specific mechanisms, specific policy types, and specific code you can run today. The Actual Risk Model Let's be honest about what can go wrong when you give an AI agent wallet access: The agent misinterprets a prompt and sends funds to the wrong address A compromised session token gets used by an attacker The agent executes a DeFi action with parameters outside your intended range Gas fees spike and the agent submits transactions at costs you'd never accept manually The agent approves an unlimited token allowance to a contract you didn't vet None of these require a malicious agent. They can all happen with a well-intentioned model operating outside the boundaries you forgot to define. The solution isn't to avoid giving agents wallet access — it's to define exactly what they're allowed to do, and nothing more. WAIaaS approaches this with three distinct security layers, a default-deny policy engine with 21 policy types across 4 security tiers, and multiple channels for human approval when transactions exceed your defined thresholds. Layer 1: Authentication — Three Separate Keys for Three Separate Roles The first layer is role separation. WAIaaS uses three authentication methods that map to three distinct principals: masterAuth (Argon2id) — The system administrator role. Creates wallets, manages sessions, configures policies. This credential never touches the agent. sessionAuth (JWT HS256) — The AI agent's credential. Scoped to a specific

If you've ever tried to pull job listings by scraping LinkedIn or Indeed, you know the pain: anti-bot systems, CAPTCHAs, rotating proxies, and scripts that silently break every few weeks. Here's the thing — you usually don't need any of that. Companies don't post jobs on LinkedIn first. They post them in their ATS (Applicant Tracking System) — Greenhouse, Lever, Ashby, Workday, etc. — and most ATS platforms expose the company's board as a public JSON endpoint . No key, no login, no browser. It's the company's own source of truth, so it's cleaner and fresher than any aggregator. The endpoints A few that work with a plain GET ( {company} = the company's slug): Greenhouse — https://boards-api.greenhouse.io/v1/boards/{company}/jobs?content=true Lever — https://api.lever.co/v0/postings/{company}?mode=json Recruitee — https://{company}.recruitee.com/api/offers/ Breezy HR — https://{company}.breezy.hr/json SmartRecruiters, Ashby, BambooHR and Personio have their own equivalents. Workday is the one annoying exception — it's a POST and needs the full board URL (tenant + datacenter + site), so you can't guess it from a bare company name. Example: pulling Stripe's open roles (Python) Stripe uses Greenhouse: import requests company = " stripe " url = f " https://boards-api.greenhouse.io/v1/boards/ { company } /jobs?content=true " jobs = requests . get ( url ). json ()[ " jobs " ] for j in jobs [: 5 ]: print ( j [ " title " ], " — " , j [ " location " ][ " name " ]) That's it. No Selenium, no proxy, no CAPTCHA solver. Runs in ~200ms and won't break next Tuesday because Cloudflare changed something. Auto-detecting the ATS If you don't know which ATS a company uses, just try them in order and take the first one that returns jobs. A bare 404 means "not this ATS, try the next." Greenhouse → Lever → Ashby → SmartRecruiters → Recruitee → Breezy covers a huge chunk of tech companies. Gotchas Rate limits are lenient but real — be polite, set a User-Agent . Descriptions : Greenhouse/Leve

For the last few months, I’ve been obsessed with a specific problem: the friction between privacy and utility in modern AI tools. Most "private" AI solutions still rely on a local LLM running on your CPU or GPU via a heavy desktop application. They require installation, constant background processes, and often struggle with performance on older hardware. I wanted to see if we could do better. I wanted to see if we could run a capable language model entirely within the browser, using only the device’s hardware acceleration, with zero data leaving the machine. The result is PrivateScribe, a tool I built to handle note summarization, email drafting, and rewriting. But more importantly, it’s an experiment in what’s possible when you treat the browser not just as a display layer, but as a compute engine. The Wedge: WebGPU and True Offline The core constraint that drove this project was simple: nothing leaves the device. In the current landscape, "on-device AI" often means "installed on your device." This is fine for desktop apps, but it creates silos. You can’t easily share a workflow across a Chromebook, a Windows machine, and an iPad without installing three different native applications. By leveraging WebGPU, PrivateScribe runs entirely in the browser. This unlocks a few critical advantages: Zero Installation: Users open a URL and start working. No downloads, no permission dialogs for file system access beyond what’s needed for the session. Hardware Acceleration: WebGPU allows the browser to tap directly into the GPU. This is crucial for inference speed. A small model that runs in your browser can process text significantly faster than a CPU-bound implementation, especially on modern laptops with integrated graphics. True Offline Capability: Because the model weights are loaded locally via WebAssembly and the inference happens on-device, the app works completely offline. If you lose your internet connection in the middle of drafting an email, the AI doesn’t stop. It c

Your monthly OpenAI or Anthropic invoice tells you how much you spent. It doesn't tell you which feature spent it, which model, or why last Tuesday cost three times as much as Monday. So at some point you (or your team) will build a metering layer: wrap the client, read usage off the response, multiply by a price table, ship it to a database. I did exactly that over the past few months while building an LLM observability service, and my numbers were wrong in five different ways before they were right. Every one of these failures was silent. No exception, no alert, just numbers that were quietly too low or too high. This is the list I wish someone had handed me. Pitfall 1: Streaming responses quietly report zero tokens OpenAI's Chat Completions API returns no usage data at all for streaming requests unless you pass stream_options: { include_usage: true } . No error, no warning. The stream just never contains token counts. If your metering reads usage off the chunks, every streaming call gets recorded as 0 tokens, $0. And since chat UIs are almost always streaming, that's most of your traffic. This one bit me twice in the same audit. First finding: all streaming calls in my own dashboard were $0. Second, nastier finding: I had a budget-gate feature that blocks calls once spend crosses a limit, and it waved every streaming call straight through — because as far as it could tell, streaming was free. The fix is to inject the option in your wrapper when the caller didn't set it: let injected = false ; if ( params . stream && params . stream_options ?. include_usage === undefined ) { params = { ... params , stream_options : { ... params . stream_options , include_usage : true }, }; injected = true ; } But there's a trap inside the fix. With include_usage on, OpenAI appends one extra chunk at the end of the stream that carries usage and has an empty choices array . Any downstream code that does chunk.choices[0].delta — which is most example code on the internet — will throw

Hackathons are intense. You've got a brilliant idea, a tight deadline, and often, limited sleep. The last thing you want is to spend half your precious time wrestling with database boilerplate, ORM setup, or SQL query syntax. This guide will walk you through building a functional Node.js backend for your hackathon project, focusing on speed and minimal friction, so you can spend more time on your core idea. The Hackathon Backend Challenge Typically, setting up a database and its interaction layer involves several steps: Schema Definition: Deciding on tables/collections, fields, types, and relationships. ORM/Driver Setup: Installing and configuring your database driver or ORM (e.g., Mongoose, Sequelize). Model Creation: Translating your schema into code, often with verbose syntax. Query Writing: Crafting SELECT , INSERT , UPDATE , DELETE statements or ORM methods for every data operation. Debugging: Fixing typos, schema mismatches, and complex join logic. This process, while fundamental, eats up valuable time that could be spent on features, UI, or even sleep. For a hackathon, you need to iterate rapidly, and database interactions should be the least of your worries. Strategy 1: Embrace Simplicity For many hackathon projects, you don't need highly optimized, production-grade queries from day one. You need functional queries that work quickly. Focus on getting data in and out reliably. Strategy 2: Natural Language for Data Modeling Instead of writing verbose schema definitions, think about how you'd describe your data to a non-technical person. For example, if you're building a task management app, you might say: "We need a collection of tasks. Each task has a title, a description, a due date, and a status (like 'pending' or 'completed'). Each task belongs to one user." This natural language description contains all the essential information for a data model, including relationships and field types. Strategy 3: Expressive Querying Similarly, when you need to fetch dat

The problem with most web UIs is the gap between user action and visible feedback. A user clicks "like" and waits 200-400ms for the server to respond before the button changes. That delay reads as slowness even when the server is fast. The network round-trip is the ceiling. Optimistic UI inverts this: assume the operation will succeed, update the UI immediately, then reconcile with the server response when it arrives. If the server fails, roll back. React 19's useOptimistic hook gives you this pattern with minimal boilerplate and automatic rollback built in. The API const [ optimisticState , addOptimistic ] = useOptimistic ( state , // the current "real" state — synced from server updateFn , // (currentState, optimisticValue) => newOptimisticState ) optimisticState — during a pending transition, reflects the optimistic update. Once the transition completes, it reverts to state addOptimistic(value) — triggers an optimistic update, must be called inside startTransition Pattern 1: Like Button ' use client ' import { useOptimistic , useTransition } from ' react ' import { toggleLike } from ' @/actions/likes ' type LikeState = { liked : boolean ; count : number } export function LikeButton ({ postId , initialLiked , initialCount }: { postId : string initialLiked : boolean initialCount : number }) { const [ isPending , startTransition ] = useTransition () const [ optimisticState , addOptimistic ] = useOptimistic < LikeState > ( { liked : initialLiked , count : initialCount }, ( current ) => ({ liked : ! current . liked , count : current . liked ? current . count - 1 : current . count + 1 , }) ) function handleToggle () { startTransition ( async () => { addOptimistic ( ' toggle ' ) // updates UI immediately await toggleLike ({ postId }) // syncs with server }) } return ( < button onClick = { handleToggle } disabled = { isPending } > < Heart className = { cn ( ' h-4 w-4 ' , optimisticState . liked && ' fill-red-500 text-red-500 ' ) } /> < span > { optimisticState . count }

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

Introducing InterceptX: The Ultimate Modern Alternative to ModHeader for HTTP Modifications As web developers, API engineers, and security auditors, we spend a significant portion of our time inspecting and tweaking HTTP traffic. For years, extensions like ModHeader have been the go-to utility for modifying request and response headers on the fly. However, as the browser extension landscape transitions fully to Manifest V3 —bringing stricter security, better performance, and tighter permission rules—many developers are looking for a modern, lightweight, and local-first alternative. Enter InterceptX . What is InterceptX? InterceptX is a high-performance, compact Chrome extension designed to give you complete control over browser network requests. Built from the ground up on Manifest V3 using the declarative declarativeNetRequest API, it is fast, secure, and preserves your battery life by running lightweight matching rules inside the browser engine itself. Whether you need to bypass CORS policies, simulate mobile user-agents, override security headers, or redirect API endpoints to your local development server, InterceptX does it all with a premium, glassmorphic UI. Key Features at a Glance If you are familiar with ModHeader, you will feel right at home with InterceptX—but with several modern upgrades: 1. Request & Response Header Modifications Inject, append, or strip headers on outgoing requests or incoming responses: Set : Override an existing header or add a new one (e.g., setting custom auth tokens or Origin ). Append : Append values to headers like Accept or Cookie . Remove : Completely strip headers (e.g., testing behaviors when header keys are omitted). 2. URL Redirections Need to test API endpoints or redirect files? InterceptX features a built-in regex redirect engine (using RE2 syntax). You can redirect matching patterns and even use capture groups (e.g., redirecting https://api.production.com/(.*) to http://localhost:3000/\1 ). 3. Granular URL & Domain Fil

The web has changed . Applications are no longer simple HTTP servers. Today we build real-time dashboards, AI-powered services, multiplayer systems, APIs, microservices, and applications that need to handle thousands of connections with minimal overhead. But our frameworks are still mostly designed for yesterday's problems. So we asked a simple question: What if a * Go * framework was built from the ground up for modern workloads? Meet Breeze . A high-performance Go framework designed around one idea: Performance should not come at the cost of developer experience. Why Breeze ? Go already gives us incredible performance. But the framework layer often becomes the bottleneck. Too much abstraction. Too many allocations. Too much hidden complexity. Breeze takes a different approach: ⚡ High-performance networking powered by gnet 🔥 Real-time WebSocket architecture built in 🧩 Modular middleware system 📚 Automatic Swagger/OpenAPI generation 🎨 Built-in SPA template engine 🚀 Optimized worker pool architecture 🗄️ BreezeORM for efficient database operations Everything you need to build production-grade applications — without assembling dozens of unrelated tools. The Future Is Real-Time Modern applications are moving toward instant experiences: Live collaboration Trading platforms AI assistants Gaming backends Monitoring systems Real-time analytics Breeze is designed for this world. Instead of adding real-time capabilities later, Breeze treats them as a first-class citizen. Less Glue Code. More Building. A common problem in backend development: You start with a simple API... Then suddenly you need: Authentication Documentation WebSockets Background workers Database optimization Frontend integration Your stack becomes a collection of disconnected pieces. Breeze tries to bring these pieces together into one coherent ecosystem. Built With Go Philosophy Go was created around simplicity, performance, and reliability. Breeze follows the same principles: Simple APIs. Predictable behavi

On July 12, 2026 I asked a free API to guess the age of someone named Xzqwlptv. It answered in a few milliseconds: HTTP 200, valid JSON. # runnable, read-only: no key needed curl -s "https://api.agify.io?name=Xzqwlptv" {"count":0,"name":"Xzqwlptv","age":null} # HTTP 200 OK Status 200. The JSON parses. The age key is present, exactly where a schema says it belongs. Its value is null . Every guard I usually reach for passes this response: if resp.ok , if "age" in data , even a JSON Schema that requires an age property. The null walks straight past all of them and into the dataset. My earlier keyless-API posts kept circling one idea from different angles. HTTP 200 does not mean the read worked, because the body can be empty. HTTP 201 Created does not mean a write happened, because the read-back returns 404. This post moves the lie one level deeper than either of those. Here the status is 200, the body arrives, it parses, it matches your schema, and the field you came for is sitting right there. The value is just empty. The null that passes your schema check. A free fun or facts API here means a public endpoint that returns a joke, a fact, or a guess about a name, with no API key, no signup, and no credit card. A URL you can paste into a terminal right now. Ten of them clear that bar, and I re-verified every response below with a live curl on July 12, 2026: real HTTP code, real body, trimmed but never reworded. One scope note first, so the numbers stay honest. I curl-verified all ten APIs on July 12, 2026. I have not run any of them in production. My 2,190 production scraper runs (962 of them on a single Trustpilot scraper) are a different domain, and I cite them for one reason only: they are why I read a field's value and its confidence instead of its status line. That number is not a claim about these ten endpoints. # API What it returns Example call The empty success to watch 1 agify.io Age guess from a first name GET api.agify.io?name=Xzqwlptv 200 with age: null 2 g

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

You've written setTimeout(fn, 0) expecting it to run "immediately." It didn't. A Promise.then() you scheduled a line later ran first, and somewhere a for loop of 50,000 iterations froze your UI for a full second despite every function being "async." None of this is a bug. It's the JavaScript event loop doing exactly what it always does — you just haven't seen the mechanism yet. What you'll learn By the end of this guide you'll be able to: Explain, precisely, why microtasks (Promises) always run before macrotasks ( setTimeout , setInterval ) — even at a zero delay Predict the exact console output order of any mix of synchronous code, setTimeout , and await Diagnose a frozen UI as a blocked call stack, not a "slow async function" Choose correctly between queueMicrotask , setTimeout(fn, 0) , and requestAnimationFrame for a given timing need Avoid the two most common event-loop bugs: microtask starvation and accidental serial await s in a loop Who this is for: you've written async / await and used setTimeout , but you want the model that makes their interaction predictable instead of memorized. Contents Why the JavaScript event loop exists The mental model Stage 1: the call stack and blocking code Stage 2: Web APIs and the macrotask queue Stage 3: Promises and the microtask queue Stage 4: async/await is sugar, not magic Stage 5: rendering, and Node's extra queues Edge cases and gotchas Best practices FAQ Cheat sheet Key takeaways Why the JavaScript event loop exists JavaScript runs on a single thread. One call stack, one thing executing at a time, no parallel function calls in the same realm. That's a deliberate design — it means you never need locks or mutexes to protect a shared variable — but it creates an obvious problem: how does a single-threaded language do anything concurrent, like waiting on a network response, without freezing the entire page while it waits? Here's the naive expectation, and why it would be a disaster if JavaScript worked this way: console . l

Imagine you're loading a dashboard. Four widgets, four APIs, fire them all at once: const [ users , revenue , alerts , activity ] = await Promise . all ([ fetchUsers (), fetchRevenue (), fetchAlerts (), fetchActivity (), ]); The alerts API is occasionally slow and sometimes returns a 500. When it does, your entire dashboard fails. Not one broken widget — four broken widgets. Promise.all rejects on the first failure and takes the other three successful results with it into the void. You reached for the right primitive for concurrency, but the wrong one for this use case. The four methods and what they actually do JavaScript gives you four ways to run promises concurrently. They differ in one thing: what happens when a promise fails or resolves first. Method Resolves when Rejects when Promise.all All succeed Any one fails Promise.allSettled All finish (success or failure) Never Promise.any Any one succeeds All fail Promise.race Any one finishes Any one fails first The instinct to reach for Promise.all is understandable — it returns all the values in a single array and feels like the obvious way to "do these things at the same time." But concurrency and failure handling are two separate questions. Promise.all answers both at once, and the answer to the second one is often wrong for the situation you're in. 🎮 Try it yourself ▶️ Open the interactive playground → Runs right in your browser — poke at it and watch the concept react live. Promise.allSettled — partial success Promise.allSettled waits for every promise to settle — resolve or reject — and returns a result array describing what happened to each one: const results = await Promise . allSettled ([ fetchUsers (), fetchRevenue (), fetchAlerts (), fetchActivity (), ]); for ( const result of results ) { if ( result . status === ' fulfilled ' ) { console . log ( ' got data: ' , result . value ); } else { console . error ( ' failed: ' , result . reason ); } } Each element has a status of 'fulfilled' (with a value ) or 'r

Every developer I know has the same reflex now. Hit an unfamiliar concept, paste it into ChatGPT, read the explanation, move on. I did this for months. It felt efficient. Then I noticed a pattern: I was reading a lot of clear explanations and retaining almost none of them. I could follow along perfectly in the moment and then draw a blank a week later when I actually needed the knowledge. The problem was not ChatGPT. The problem was using a general-purpose conversational tool for a job it was never designed to do. Here is what I switched to, and why it works better. The three failure modes of using a chatbot to learn Passive consumption feels like learning. Reading a good explanation triggers the feeling of understanding without the work that creates actual memory. You nod along, it makes sense, and nothing sticks. This is the biggest trap. There is no retrieval practice. The research on this is well established: you remember things by pulling them out of memory, not by putting them in repeatedly. A chatbot will explain the same concept ten different ways, but it will never make you answer a question you cannot immediately answer. That struggle is the mechanism. Confident hallucination is dangerous when you are the beginner. If you already know a topic, you can spot when an AI is subtly wrong. If you are learning it for the first time, you cannot, and you may internalize something incorrect with full confidence. For technical material, this is a real cost. What actually works better Tools that quiz you. Anything built around retrieval practice and spaced repetition beats passive reading by a wide margin. If a tool generates questions from your material and makes you answer them over spaced intervals, it is working with how memory actually forms rather than against it. Tools that read YOUR source material. This one is huge for technical learning. Instead of asking a model to answer from its general training data (which may be outdated or wrong for your specific libra

Jake Lazaroff discussed the AT Protocol as a framework for distributed applications beyond social networking. He emphasised a local-first architecture where users maintain data in PDSs while leveraging shared infrastructure for synchronisation and updates. The presentation included experiments showcasing collaborative tools and highlighted the benefits of reduced reliance on app-specific backends. By Olimpiu Pop

Try the demo: K-Saju Crew For fun only. K-Saju is an entertainment project. The K-Pop roles below are a playful interpretation of saju-inspired signals, not personality assessment or advice. A two-person compatibility page can stay stateless with almost no effort. Put both birth dates in a URL, render the result on the server, and the link is the record. No account, no database, no cleanup job. That was already a product rule in K-Saju. We do not retain personal inputs. A result is reproducible from its GET parameters. Then we built /crew : “What if your friend group debuted as a K-Pop group?” A creator makes a link, sends it to a group chat, and each friend enters their own birth date. At three to seven members, the app assigns distinct positions, shows pairwise chemistry, and creates a shareable poster. The fun part is the casting. The engineering problem is that the social flow needs a temporary shared state. A link cannot accumulate submissions by itself. This post is about the decisions behind that feature: where we allowed state, how we made the result durable without retaining a lobby forever, and how we kept the casting explainable instead of treating it as a black-box score. The conflict: a self-service group flow needs somewhere to collect data There were two clean but incomplete options. The first was to keep everything stateless. The creator would enter all members' dates at once, then receive a result URL. It matched our existing architecture, but it defeated the point of sharing a link. The person who starts the group often does not know everyone else's date, and asking them to collect it in a chat creates friction before the feature has started. The second was a conventional persistent group object. It would make joining easy, but it would turn a deliberately stateless service into one that keeps user-provided dates indefinitely unless we built retention and deletion policies around it. We chose a hybrid instead: The lobby is temporary state. It store