标签：#ev

This is a submission for Frontend Challenge - Comfort Food Edition, CSS Art . Inspiration I'm from El Salvador, and here comfort food has one name: pupusas . Thick corn tortillas stuffed with cheese, beans and chicharrón, served with curtido (pickled cabbage slaw) and tomato salsa. It's our national dish, but more than that — it's the food you eat at a plastic table at night, under one warm light, with the comal hissing somewhere behind you. That last image is what I wanted to capture. Not just the plate: the moment . So the piece has a light switch. Demo Two things to try: "Bañar en salsa" — pours salsa over each pupusa with a staggered cascade. "Apagar la luz" — turns the whole scene into a night pupusería, lit only by a flickering candle (veladora). Journey Everything is CSS: gradients, border-radius , box-shadow and blend modes. No images, no SVG, no libraries. JavaScript is 15 lines — two class toggles. The tablecloth is the flex. The blue-and-white geometric mantel is five bands built entirely with repeating-conic-gradient and repeating-linear-gradient — chained diamonds, sawtooth rows, chevrons. Zero background images. This was the part I rewrote the most until the patterns locked together. The night is one single element. When you turn off the light, I'm not repainting anything. A single overlay div with mix-blend-mode: multiply holds two stacked radial gradients: near-white around the candle (multiplying by white changes nothing — so that IS the light), falling off to deep blue at the edges. The steam even turns moonlit-blue for free, because that's just what multiply does to white pixels. One div, one blend mode, full day/night mood shift. Corn kernels are two offset dot grids. The mazorca's kernels are two radial-gradient grids shifted by half a cell — which is exactly how kernels interlock on a real cob. That half-cell offset is the difference between "corn" and "polka dots". The curtido is seven crossed stripe layers. White and purple cabbage, carrot, c

React Hooks have revolutionized how we write React components, offering a powerful way to manage state and side effects directly within functional components. This paradigm shift has led to cleaner, more readable, and often more maintainable codebases by moving away from the complexities of class components. Why the Shift to Hooks? Before Hooks, managing stateful logic and side effects often meant relying on class components. This approach could introduce several challenges: understanding this binding, managing complex lifecycle methods across different phases of a component's life, and dealing with "wrapper hell" – deeply nested component structures resulting from Higher-Order Components (HOCs) and render props when trying to reuse logic. Hooks solve these problems by allowing developers to "hook into" React features directly from functional components. This makes logic reuse more straightforward and components inherently easier to understand and test. Essential React Hooks at a Glance Let's explore the core Hooks that form the backbone of modern React development: 1. useState : Adding State to Functional Components The useState Hook is the most fundamental. It allows you to declare state variables in functional components. Instead of dealing with this.state and a separate this.setState() method, useState provides a direct variable for your state and a dedicated function to update it. This simplifies local component state management significantly, making it more intuitive and less prone to errors. 2. useEffect : Handling Side Effects The useEffect Hook is designed for performing side effects in functional components. Side effects encompass operations like data fetching from an API, setting up event listeners or subscriptions, or directly manipulating the DOM. This Hook consolidates logic that was previously spread across multiple lifecycle methods like componentDidMount , componentDidUpdate , and componentWillUnmount in class components. A key aspect of useEffect i

Project Overview The project is a React-based web application that fetches data from a REST API and displays it in a dynamic dashboard. Users can navigate between pages, search data, and interact with multiple components that rely on asynchronous API calls. While testing the application, I noticed that navigating away from a page during an active API request occasionally caused React warnings and unnecessary memory usage. This issue affected the application's stability and could lead to performance degradation over time. The problem was caused by an asynchronous operation continuing even after the component had been unmounted. For example, an API request initiated inside useEffect would still complete after the user navigated away, attempting to update the component's state. React would warn that a state update was attempted on an unmounted component. Before useEffect(() => { fetch("/api/users") .then((res) => res.json()) .then((data) => setUsers(data)); }, []); If the component unmounted before the request finished, the callback still attempted to update the state. After I solved the issue by using the AbortController API to cancel the request during cleanup. useEffect(() => { const controller = new AbortController(); fetch("/api/users", { signal: controller.signal, }) .then((res) => res.json()) .then((data) => setUsers(data)) .catch((err) => { if (err.name !== "AbortError") { console.error(err); } }); return () => controller.abort(); }, []); This ensures that pending requests are cancelled when the component unmounts, preventing unnecessary state updates and avoiding memory leaks. Code Prince3963 (Patel Prince) / Repositories · GitHub Prince3963 has 48 repositories available. Follow their code on GitHub. github.com My Improvements This fix focused on improving both performance and application reliability. What I improved Prevented memory leaks caused by unfinished asynchronous requests. Added proper cleanup logic inside useEffect. Eliminated React warnings about u

If you've tried building a Chrome extension recently, you've probably hit Manifest V3 and spent an hour just figuring out why your background page stopped working. MV3 replaced background pages with service workers, changed how content scripts communicate, and made permissions stricter. The official docs are... not great. So here's the structure that actually works. The folder structure chrome-extension/ ├── manifest.json ├── popup/ │ ├── popup.html │ ├── popup.css │ └── popup.js ├── options/ │ ├── options.html │ └── options.js ├── content/ │ └── content.js ├── background/ │ └── service-worker.js ├── utils/ │ └── storage.js └── icons/ The manifest.json (MV3) The biggest MV3 gotcha: background scripts are now service workers. { "manifest_version": 3, "name": "Your Extension", "version": "1.0.0", "permissions": ["storage", "activeTab", "scripting"], "action": { "default_popup": "popup/popup.html" }, "background": { "service_worker": "background/service-worker.js" }, "content_scripts": [ { "matches": [""], "js": ["content/content.js"] } ] } Communicating between popup and content script This trips up almost everyone. The popup can't directly access the page DOM — it has to message the content script. // popup.js const [tab] = await chrome.tabs.query({ active: true, currentWindow: true }); await chrome.tabs.sendMessage(tab.id, { type: 'RUN_ACTION' }); // content.js chrome.runtime.onMessage.addListener((message, sender, sendResponse) => { if (message.type === 'RUN_ACTION') { // do something on the page sendResponse({ success: true }); } return true; // keeps the channel open for async response }); The return true at the end is critical — without it, async responses silently fail. Storage that syncs across devices Use chrome.storage.sync instead of localStorage. Here's a utility wrapper that makes it clean to use anywhere: const Storage = { async get(key) { return new Promise((resolve) => { chrome.storage.sync.get([key], (result) => resolve(result[key])); }); }, async set

Word review artifacts need a CI boundary too Word already has useful interactive review workflows: legal blackline comparison and Document Inspector. But a controlled handoff or CI workflow has a different question: did this package gain unresolved revisions, comments, hidden runs, external relationships, macros, custom XML, or another opaque payload change? And can we answer that without turning a build artifact into a copy of the document? DocFence 0.1.0 is a local-first CLI for that boundary. It compares .docx and .docm packages without opening Word, executing macros, evaluating fields, following links, rendering a document, or uploading source material. More than a text diff The visible body is only one stored story. DocFence inventories the body, headers, footers, footnotes, endnotes, comments, and glossary parts. It also tracks revision markup, direct hidden-text runs, field codes, content controls, Track Changes, external relationships, custom XML, and macros. A generic opaque payload signal covers mutations in parts the specialized inventories do not explain, such as styles, media, embeddings, metadata, and the package manifest. The output intentionally contains counts and fixed change categories rather than paragraphs, comments, reviewer names, URLs, relationship targets, field instructions, custom XML values, macro bytes, part paths, or fingerprints. That makes JSON, Markdown, and SARIF practical for CI artifacts while keeping source material inside the team’s environment. Policies that are small enough to review A policy is a strict, short YAML file. It distinguishes a comparison boundary from a candidate-state boundary: a team can block a newly introduced external relationship while separately requiring that the candidate contain no comments or unresolved revisions at all. version : 1 rules : no_external_relationship_changes : true no_macro_payload_changes : true no_custom_xml_changes : true require_no_unresolved_revisions : true require_no_comments : tr

If I need to upgrade .NET 8 to .NET 10 , I treat the work as an API contract migration, not a project-file edit. A service can compile, pass unit tests, and still surprise consumers with a changed JSON shape, status code, authentication response, or OpenAPI document. That risk matters now because Microsoft has confirmed that .NET 8 and .NET 9 reach end of support on November 10, 2026 . .NET 10 and C# 14 are the current stable releases, and .NET 10 is the supported LTS destination. Why the deadline changes my upgrade order My first step is inventory, not retargeting. I list every deployable project, test project, global.json , container base image, CI SDK pin, and Microsoft package reference. dotnet --list-sdks shows what a machine can build; dotnet --info shows what the current environment actually resolves. If that inventory needs more detail, my older guide to dotnet sdk check is a useful starting point. For APIs still on .NET 8, the broader Web API setup and security checklist can help identify behavior worth protecting before the move. I then separate the migration into three changes: SDK and target framework, NuGet dependencies, and runtime infrastructure. Keeping those changes visible makes a failure easier to locate. A giant dependency-refresh commit may be quick to create, but it is hard to diagnose. Upgrade .NET 8 to .NET 10 behind contract tests Before changing net8.0 , I add a small set of tests around the endpoints consumers cannot tolerate changing. I care about observable behavior: status codes, content types, required JSON names, and authentication boundaries. I avoid asserting an entire serialized string because harmless property ordering can make that test noisy. Here is a focused xUnit test for a Minimal API: using System.Net ; using System.Text.Json ; using Microsoft.AspNetCore.Mvc.Testing ; using Xunit ; public sealed class ProductContractTests ( WebApplicationFactory < Program > factory ) : IClassFixture < WebApplicationFactory < Program >> { [

How we added an on-demand translation help feature to our book translation platform, streaming LLM suggestions for tricky passages. At LectuLibre, our AI-powered book translation service allows users to upload EPUB or PDF files and get translations generated by large language models like Claude and DeepSeek. But we quickly noticed a pain point: automated translations, while fast, sometimes produced awkward or ambiguous results for culturally specific phrases, idioms, or technical jargon. Users wanted a way to get instant, contextual help for these tricky passages without leaving the platform. That’s when we set out to build the 翻译与转录求助 (Translation Assistance) feature — an interactive side panel where users can select any sentence or paragraph and receive alternative translations, explanations, and stylistic suggestions from an LLM in real time. In this article, I’ll walk you through the engineering challenge, the architecture we chose, and the specific code and trade-offs that made it work smoothly under production constraints. The Problem: Real-Time, Context-Aware Translation Help The core requirement was simple: a user highlights a piece of text in the translated book and clicks “Get Assistance”. Immediately, the system should stream back multiple translation options, a brief explanation of differences, and stylistic notes — all aware of the surrounding context, the author’s style, and the target language. Under the hood, this meant: Low latency : Users expect a response in under 2 seconds. Streaming : The LLM output can be long, so we needed to stream tokens as they are generated. Context awareness : We must include enough surrounding text from the book to ground the model’s response. No blocking : The main translation pipeline shouldn’t be affected; the assistance feature should exist as an independent async service. Cost efficiency : Avoid re-processing the entire book each time a user asks for help. Our Approach: Async FastAPI + SSE + Rate Limiting We run a P

Às vezes, a maior barreira para começar um projeto não é a complexidade do problema, mas a busca por...

This article was originally published on e-shikumi-labo . Hello, I'm Shin from e-Shikumi-Labo. This is the final installment (Part 4) of "Systematized Thinking," where we use AI to build our own tools and independently maintain them. So far, we have discussed creating a prototype that automatically saves Gemini chat logs, converting them to Markdown for Obsidian integration, and elevating it to a safe, fully automated system. In this final installment, we will cover the "countermeasures for downtime due to screen specification changes," an unavoidable issue when operating tools that handle web data, and the core of the "self-reliance" humans should possess in the AI era. 1. The Web Data Extraction Compromise: "You Can't Extract What Isn't on the Screen" During development, there was a time when I thought, "I also want to record the exact date and time (timestamp) when the chat was sent." However, no matter how much I analyzed Gemini's screen structure, the exact timestamp of each utterance did not exist in the HTML. The fundamental rule of web data extraction is: "You cannot extract data that does not exist on the browser screen." As long as you are extracting data from the screen (DOM) rather than via an API, forcing the extraction of something that isn't there will require complex guesswork processes and will instead become a cause of trouble. Understanding this "technical limit," gracefully giving up on what cannot be done, and judging to maintain simplicity is also an important element of tool building. 2. Specification Changes Are Not Defects, But "Fate" As long as you deal with tools that extract data from other people's websites, the time will inevitably come when the tool suddenly stops working one day due to design changes or updates on Google's side. "It was working fine until yesterday, but suddenly it stopped saving." This is not a defect in the tool, but an unavoidable "fate" as long as you depend on someone else's platform. The important thing is not t

The Chaotic Bug: The Infinite State Loop & Memory Leak In a real-time clinical AI health suite, high-frequency telemetry streaming (such as 60Hz ECG canvas updates) demands surgical precision. During heavy load testing, our frontend performance suddenly degraded: CPU thread usage hit 98%, heap memory ballooned to over 1.4 GB, and DOM frame rendering dropped to single digits. The Root Cause A subtle React useEffect hook listening to the incoming WebSocket data stream contained the state setter inside its dependency array: // ❌ THE CHAOTIC BUG (Caused infinite state sync re-renders) useEffect(() => { const sub = ecgDataStream.subscribe((point) => { setEcgPoints((prev) => [...prev, point]); // Triggered full tree re-render on every frame! }); return () => sub.unsubscribe(); }, [ecgPoints]); // Including state array in deps created recursive re-subscription storm! Every incoming telemetry frame pushed new state, triggering an immediate top-level component re-render, which re-subscribed to the stream and accumulated thousands of orphaned event listeners. Best Use of Sentry: Pinpointing & Clearing the Lineup Sentry Performance Tracing and Sentry Error Tracking proved invaluable in isolating this silent killer: Transaction Waterfalls: Sentry flagged transaction spans render_ecg_canvas exceeding the 500ms threshold (averaging 842ms). Breadcrumb Trail: Sentry logged a rapid succession of CanvasRenderer memory allocation warnings (>64MB/sec). Issue Grouping: Sentry grouped 14,000 React Maximum update depth exceeded exceptions into a single actionable alert. The Fix & Restored Harmony We refactored the streaming engine to bypass React state re-renders entirely for frame accumulation, employing a zero-allocation useRef buffer paired with a requestAnimationFrame render cycle, and instrumented Sentry Breadcrumbs: // ✅ THE RESILIENT FIX (Zero-allocation ref buffer + Sentry Breadcrumb) import * as Sentry from '@sentry/react'; const bufferRef = useRef([]); useEffect(() => { Sentry.a

Some group with no modern descendants contributed a lot to our genomes.

Sharge, the company that makes delightful retro Mac-shaped chargers and see-inside batteries, is finally impressing me with a portable SSD. I couldn't recommend the Sharge Disk, Disk Plus, or even the Disk Pro, but I'd be happy to own the new Disk Pro 2 Ultra. This isn't just a drive. It's a 4K HDMI dock […]

There's a discussion running on Product Hunt right now about where an AI agent should stop and hand a decision back to a person. The framing that stuck with me: "can this be undone?" is the wrong gate. It over-fires on things nobody cares about, like writing a log line, and under-fires on the ones that actually hurt. A mass email. A migration you can only roll back with downtime. The proposed replacement is reach. Not "is this safe" but "how far does this go if I'm wrong." And the sharpest point in that thread is that the agent is the worst possible judge of its own reach, because it doesn't know there are 50,000 people on the list. I've been building a browser with an agent in it, and the browser case makes that concrete in a way the terminal case doesn't. A coding agent's blast radius is usually one person: you, reading a diff. A browser agent doesn't start there. It inherits every session you're already signed into. The reach of a click isn't a property of the agent's plan, it's a property of the cookie jar it's holding. The same "click the blue button" step is harmless on a docs site and irreversible on a payments dashboard, and nothing in the agent's own summary distinguishes them. So I stopped trying to make the agent classify risk. Here's what I do instead, with the caveat that this is alpha and I've been wrong about it before. Some things never reach the model. Credential fields are filtered out of the page snapshot before the agent sees it. That means password inputs, and anything with cc-number , cc-csc , cc-exp , or one-time-code autocomplete semantics. A fill targeting a password field refuses outright. The agent cannot misjudge the reach of a control it was never shown, and that's a stronger guarantee than any classifier, because it doesn't depend on getting a judgment right. The model's judgment is a floor, never a ceiling. For everything that does reach it, the agent can say "this needs approval" and be believed. It cannot say "this is routine" and be

Kubernetes Interviews Are Broken When Trivia Matters More Than Real Skill Kubernetes interviews often fail when they test whether a candidate can recall obscure implementation details instead of showing how that person diagnoses failures, reasons through tradeoffs, and learns under pressure. Certifications can prove useful baseline knowledge, but neither a certificate nor a perfect whiteboard answer reliably proves that someone can operate a production cluster. The frustration becomes obvious when an interview demands a kernel level explanation of what happens when traffic reaches an ingress controller in a Cilium based, proxyless setup, while the actual role may involve changing a CPU request from 500m to 550m. The contrast is funny because it feels painfully familiar. Candidates prepare for architecture, networking, controllers, scheduling, and troubleshooting, then get judged on a detail they could verify in seconds during real work. That does not mean deep technical knowledge is useless. Some roles genuinely require it. The problem begins when interview difficulty becomes disconnected from job difficulty, and when memorization is treated as a shortcut for measuring engineering judgment. Why Kubernetes interview questions feel disconnected from the job The strongest complaint in the discussion was not that Kubernetes is too difficult. It was that many interview questions appear designed to establish superiority rather than measure readiness for the role. One example captured the problem perfectly: the interview asks for a detailed explanation of kernel behavior, ingress traffic, Cilium, eBPF, and proxyless networking. The work itself turns out to be a minor resource adjustment. That gap creates distrust because candidates are being filtered through a standard that the daily job may never require. A technical interview should reflect the decisions the engineer will actually make. If the job involves operating clusters, useful questions might examine how the candid

This is a submission for Frontend Challenge: Comfort Food Edition , CSS Art: Comfort Food. What I Built A pure CSS art scene of the ultimate Hong Kong comfort food: a steaming bowl of wonton noodle soup (雲吞麵) at a late-night dai pai dong. Nothing says "home" to me like a midnight bowl of wonton noodles under a glowing paper lantern — so I recreated that feeling entirely in CSS: no images, no SVG, just divs, gradients, border-radius tricks, and keyframe animations. The scene includes: 🥣 A classic HK porcelain bowl with the iconic blue rim stripe pattern (repeating-linear-gradient) 🍜 Golden broth with a noodle nest built from repeating-radial-gradient concentric arcs 🥟 Four pleated wontons, half-submerged at the broth line 🥢 Wooden chopsticks resting across the rim (tapered with clip-path) ♨️ Soft, organic steam wisps — blurred gradient blobs on staggered transform/opacity loops 🏮 A swaying red paper lantern casting a warm light cone 🌙 Moon, twinkling stars, bokeh lights, a flickering pink neon 雲吞麵 sign, chili oil saucer, and a cup of tea Demo zsp67x2nfnudg.kimi.page 👆 Live full-screen demo — watch the steam rise, the lantern sway, and the neon sign flicker. View page source to see the full CSS — every technique is commented! Journey Design goal: I wanted the warmth of the lantern light to contrast against the cool indigo night, with a subtle purple dusk at the horizon — the exact feeling of sitting at a Hong Kong street stall at 1am. Techniques I'm proud of: The steam was the hardest part. Thin wisps disappeared against the sky, so I layered blurred radial-gradient blobs (13% wide, filter: blur) with keyframes that hold a long visible opacity plateau (0 → .7 → .65 → .38 → 0). Four wisps run on two different periods (6s / 7.2s) with delays locked 25% of a cycle apart, so at least one wisp is always near peak — the bowl never stops steaming. The bowl is a single div with border-radius: 0 0 50% 50% / 0 0 100% 100% for the porcelain body; the broth ellipse's own border d

Someone in Cuba or Iran can keep installing APKs with no new restrictions, but devs will suffer.

Every esports team captain has done this by hand at least once: open Discord, scroll through a dozen "I can play Thursday after 8" messages, cross-reference them against who plays Tank versus DPS, remember that one of your DPS is actually a sub, and try to assemble a starting five that can actually scrim tonight. It takes fifteen minutes, you get it slightly wrong, and you do it again the next day. I build Supatimer , a free Discord bot for competitive gaming teams, and "generate the lineup for me" was the single most requested feature. This post is about how the lineup optimizer actually works, why it is genuinely AI (and not in the marketing sense), and where a large language model fits in versus where it absolutely does not. "AI" is doing a lot of work in this industry Half the Discord bots on the market slapped "AI" on their landing page the week ChatGPT launched. Usually it means there is a chatbot command somewhere that proxies to an LLM. That is fine, but it is not what your team needs when it is 7:45pm and you have a scrim at 8. There are two honest definitions of AI worth separating: Search and optimization - the classical branch. Constraint satisfaction, combinatorial optimization, planning. This is the part of AI that solves "given these rules and these resources, find the best valid arrangement." Machine learning / LLMs - the statistical branch. Pattern recognition, generation, extraction from unstructured text. The lineup problem is squarely a problem for the first kind. So that is what I built first. The lineup problem, stated precisely Strip away the gaming context and a lineup is a constrained assignment problem: You have N players , each with a set of roles they can fill (Tank, DPS, Support, IGL, and so on). Each player has an availability signal for a given time block (available, maybe, unavailable). Each player has a roster status (starter, substitute, trial). The game defines a required composition : Overwatch 2 wants 1 Tank, 2 DPS, 2 Support. Va

Most dev-to content about longevity comes from people who scaled one product for a decade. My version of 18 years is different: 235+ separate small projects, each with a different client, budget, and expectation. That produces a completely different set of lessons. Every project restarts the trust clock. In a startup, trust compounds — the team, the codebase, the client relationship all carry forward. In agency work for small businesses, you start from zero credibility on every single engagement. The client has no idea if you're competent until you prove it, usually within the first draft. That reality shaped how we scope: front-load a visible win early, even a small one, rather than saving the "impressive part" for the end. Most client requests aren't really about the website. "Can we change the homepage headline" is often actually "I'm nervous this won't generate leads" or "my business partner didn't like it." Treating every request as a literal design brief instead of what it's actually about leads to a lot of pointless revision cycles. Asking one clarifying question — "what's this in response to?" — before touching the page has cut our revision count more than any process change. Consistency beats innovation for this client base. A small business owner doesn't want a novel UX pattern. They want their site to look like the successful competitor's site, load fast, and not embarrass them. Chasing design trends for this audience is optimizing for the wrong judge — they're not evaluating craft, they're evaluating "does this look like it'll work." The real skill is saying no to the wrong project, not saying yes to more of them. Early on I took every lead. Now the highest-leverage thing I do is a 10-minute pre-call that filters out projects where the client's expectations and budget don't match — before either of us spends real time on it. That single filter has done more for margin than any pricing change. None of this shows up in a portfolio. But if you're a develope

When I joined Entire, I noticed my boss spending a chunk of time every week writing detailed release notes, called Dispatches at Entire. It looked like a painful process. Each Dispatch had to cover changes across several repositories, explain why those changes mattered, credit external contributors, and carefully avoid leaking anything that was not public yet. I offered to take it over. I had solved a similar problem before, so I figured it would be an easy win. I built something similar and simpler at Block While I was at Block, I built a release notes generator for goose . It ran in GitHub Actions after a release workflow completed, checked out the new tag, compared it against the previous one, and handed goose a recipe to inspect the commit diff. Goose organized those commits into features, bug fixes, improvements, and documentation. Each entry got a short description and a PR link. The workflow then updated the GitHub release and posted the announcement to Discord, opening a thread if the notes exceeded the message limit. It was clean and effective, but it solved a very clean problem: one repository, one new release tag, public commit history, and concise output. So when I looked at Entire’s Dispatches, I assumed I could reuse the same playbook. Gather changes, run goose, post the draft. That assumption did not survive contact with reality. But a Dispatch turned out to be more complex A Dispatch spans multiple projects: the Entire CLI, entire.io, EntireDB, external agent integrations, and open source libraries like go-git, go-nuts, git-sync, and ForgeMark. Every project also ships on a different cadence. Some push to main and deploy continuously. Others bundle work into scheduled releases. The CLI maintains separate stable and nightly channels, which means a feature can be available to testers without being part of the latest stable tag. Then there are feature flags. Finding changes was not the hard part because GitHub APIs handle that easily. The hard part was

The Situation Our team's CI/CD pipeline on Azure DevOps was taking 15 minutes to complete on every push to develop. You'd merge a PR, grab a coffee, come back — and it was still running. A 15-minute feedback loop breaks flow state — by the time the pipeline finishes, you've already switched context twice and forgotten what you were checking. I spent an afternoon digging into the Azure DevOps logs. Here's what I found. The Numbers (Before) Artifact content (uncompressed): 1,218 MB (1.2 GB) Artifact downloaded (compressed): 614 MB Download time: 3-4 min Pipeline breakdown: Build stage: ~5 min (Docker build + artifact) Download artifact: ~3 min (614 MB over the wire) Configure App Service: 2m54s (5 Azure API calls) Deploy (AzureWebApp@1): ~1 min Validate: 2m07s (sleep 30 + 3×30s probes) ───────────────────────────────── Total: ~15 min Root Cause #1: Ignoring output: 'standalone' next.config.js had this: const nextConfig = { output : ' standalone ' , // ← was there the whole time ... }; output: 'standalone' tells Next.js to produce .next/standalone/ — a self-contained directory with only what's needed at runtime. Trimmed node_modules . Auto-generated server.js . No source files. No dev dependencies. But the pipeline was ignoring it: # Old pipeline — copies everything from Docker docker cp deployImage:/app/node_modules . # 600 MB 😱 docker cp deployImage:/app/src . docker cp deployImage:/app/.next . docker cp deployImage:/app/server.js . # ... more files /bin/zip -r deploy.zip .env .next public node_modules package.json \ next.config.js jsconfig.json postcss.config.mjs decs.d.ts src server.js # Then published the ENTIRE working directory as the artifact - task : PublishPipelineArtifact@0 inputs : targetPath : ' $(System.DefaultWorkingDirectory)' # 1.2 GB of loose files + zip Azure DevOps compressed this to 614 MB for transfer. The deploy stage downloaded 614 MB to use a 24 MB zip buried inside it. The fix: # New pipeline — standalone only docker cp deployImage:/app/.next/