标签：#JavaScript

The problem Every time I needed to hand someone a quick installable build — a client, a tester, myself on a different machine — I had to either keep a full local toolchain ready (Android Studio, Flutter SDK, Visual Studio...) or spend 20 minutes reinstalling one just for a single build. So I built PhilBuilder : upload a zipped source project, pick a platform, get back an installable app. No local setup required. 🔗 Try it: https://philbuilder.netlify.app What it does You upload a .zip of your project. The tool: Auto-detects the project type (React, Vue, Flutter, React Native, Kotlin, .NET MAUI, Python, Go, Godot, and 14 others — 22 combinations total) Builds it on remote CI Gives you a download link for an APK, AAB, or Windows .exe No account needed for occasional use (3 builds/day). A free account bumps that to 10/day. How it's built The stack is intentionally simple: Frontend : a single static HTML file, no framework, no build step Backend : a Cloudflare Worker handling auth, rate limiting, and dispatching builds Build execution : GitHub Actions — one big workflow with per-language jobs (Cordova for web frameworks, Capacitor for modern web, native Gradle for Kotlin/Java, dotnet publish for MAUI, flutter build for Flutter, briefcase for Python, gomobile for Go, etc.) Storage : Cloudflare R2 for source zips and build artifacts The auto-detection logic walks the extracted zip looking for telltale files — pubspec.yaml → Flutter, *.csproj → .NET MAUI, capacitor.config.* or a @capacitor/core dependency → Capacitor, build.gradle without package.json → native Kotlin/Java, and so on — with fallbacks down to plain HTML. Some technical details Signing : for Android release builds, it can auto-generate a keystore (and let you download it afterward — losing it means you can never update your app on Play Store again, so this is clearly flagged) or accept an uploaded one. Windows builds : this is the newest addition. Flutter and .NET MAUI need windows-latest runners; Go cross-com

After hoisting, interviewers love dropping one-liners like: console . log ([] + []); console . log ([] + {}); console . log ({} + []); console . log ( NaN === NaN ); …and watching whether you guess, freeze, or calmly walk the coercion rules. This post is only output-based type coercion / equality questions. Try each snippet yourself first. Answers are hidden — click Show answer when you’re ready. TL;DR — what interviewers are testing Concept Trap + with objects/arrays Often becomes string concat , not math [] / {} stringification [] → "" , {} → "[object Object]" Bare {} + [] Parser may treat {} as a block , not an object NaN === NaN Always false — use Number.isNaN / Object.is == vs === == coerces; === does not Falsy vs “empty-looking” [] and {} are truthy typeof null Infamous "object" lie One-line mental model + asks both sides to become primitives. If either side is a string (after that), you get concatenation . Otherwise you get number math — and weird values become NaN . Warm-up: how + really decides When JS hits a + b , it roughly does: 1) Convert both sides to primitives (ToPrimitive) 2) If either result is a string → String(a) + String(b) // concat 3) Else → Number(a) + Number(b) // math For plain objects / arrays, ToPrimitive usually ends up calling .toString() : Value String(value) Number(value) [] "" 0 [1, 2] "1,2" NaN {} "[object Object]" NaN null "null" 0 undefined "undefined" NaN true "true" 1 false "false" 0 That’s enough to solve most [] + {} style questions. How to use this post Read the snippet Say the output out loud (or write it down) Only then open Show answer Read the step-by-step — don’t only memorize the final print Q1 — Classic [] + [] console . log ([] + []); Show answer Output "" (empty string — looks like a blank line) Step by step + wants primitives from both arrays. String([]) → "" (empty array joins to empty string). "" + "" → "" . Interview tip: People often say 0 or [] . Wrong. Empty array stringifies to "" , so you get string concat o

Hello, DEV Community! 👋 How many times a week do you find yourself searching Google for a simple online tool—like a favicon converter, a typing speed tester, or a quick chart generator—only to land on bloated websites filled with intrusive ads and unnecessary server requests? Frustrated by this exact friction, I decided to build my own centralized solution: All in One Utility Hub . The Vision: Fast, Pure, and Distraction-Free The goal behind All in One Utility Hub is simple: create a suite of micro-utilities that load instantly, require zero setup, and operate entirely in the browser. No heavy frameworks bogging down performance, no forced sign-ups, and no server-side bottlenecks. Just pure, functional client-side tools. What's Currently Inside the Hub? Online Favicon Generator :** Quickly convert any image asset into professional multi-size favicon packages. Online Typing Speed Tester :Track and improve your WPM, CPM, and accuracy cleanly. Free Online Graph & Chart Maker :** Generate visual data charts instantly for reports and presentations. Tech Stack & Architecture The entire suite is built using clean, high-performance HTML5, CSS3, and vanilla/modern JavaScript. By keeping everything client-side, execution is instantaneous, and user data remains private right within the browser session. Explore and Share Your Feedback I built this hub to serve as a handy bookmark for developers, designers, and students alike. You can explore the live project here: 👉 All in One Utility Hub I’m constantly expanding the toolkit with new utilities. What kind of micro-tool do you wish existed online? Let me know in the comments below! Happy coding! 🚀

The most misunderstood part of JavaScript — finally explained with analogies, diagrams, and zero hand-waving. If you've ever wondered why setTimeout(fn, 0) doesn't actually run in 0 milliseconds, or why Promises always run before your setTimeout callbacks, or how Node.js handles 10,000 simultaneous users on a single thread — you're about to have several "aha!" moments in a row. Buckle up. ☕ 🎤 Let's Start With an Icebreaker Pop quiz: What is JavaScript? Here's the most famous answer, often attributed to Philip Roberts' legendary JSConf talk: "JavaScript is a single-threaded, non-blocking, asynchronous, concurrent language. It has a Call Stack, an Event Loop, a Callback Queue, and some other APIs." Sounds sophisticated, right? Now ask the V8 engine the same question: "I have a Call Stack and a Memory Heap. I genuinely have no idea what those other things are." 🤯 That's the first paradox. The very features that make JavaScript powerful — the Event Loop, the queues, the async magic — are not part of the JavaScript engine itself . They live somewhere else entirely. Let's find out where. 📦 Part 1: The Basics You Need to Know JavaScript is Single-Threaded At its core, JavaScript has exactly one main thread of execution . This is the Golden Rule : One Thread = One Call Stack = One thing at a time. The Call Stack is a data structure that tracks where you are in your code. When you call a function, it gets pushed onto the stack. When it returns, it gets popped off. It follows a LIFO (Last In, First Out) principle — like a stack of plates. function greet ( name ) { console . log ( `Hello, ${ name } !` ); } function main () { greet ( " Ahmed " ); } main (); // Call Stack (reading bottom to top): // [greet] ← currently running // [main] // [global] Simple, right? But what happens when JavaScript encounters a task that takes time? 🚫 Part 2: The Problem — Blocking Imagine JavaScript has to fetch data from an API. That might take 2 seconds. Or it has to read a huge file from disk.

How multiple open browser tabs can accidentally DDOS your auth server, and how to fix it with the Web Locks API. Picture this: You’ve just shipped a state-of-the-art Axios response interceptor. You implemented a mutex lock ( isRefreshing ) and a promise queue ( failedQueue ) to handle concurrent 401 errors. You tested it within a single tab, and it worked like a charm. You gave yourself a high-five and closed your laptop. Then, a power user logs in. Like most humans on the internet, they don't use just one browser tab. They open Tab 1 for User Management, Tab 2 for Analytics, Tab 3 for Settings, and Tab 4 for Support Tickets. Fifteen minutes pass. Their short-lived JWT access token expires. The user switches back to Tab 1. In the background, all 4 open tabs wake up, detect the expired token, and fire off four independent POST /auth/refresh-token/ requests at the exact same millisecond. Tab 1 refreshes the token first, but Tab 2's request arrives a millisecond later, invalidates Tab 1's new token, and Tab 3 nukes the session entirely. Suddenly, all 4 tabs dump the user back to the login screen. Welcome to the Cross-Tab Token Trap . 1. The Problem: The Multi-Tab Stampede In modern single-page applications (SPAs), each browser tab operates in its own isolated JavaScript runtime environment. Memory is not shared. When an access token expires: isRefreshing = true in Tab A only stops requests inside Tab A . Tab B has no idea Tab A is currently refreshing a token. Tab C lives in complete ignorance of Tabs A and B. Tab A (Memory Space 1) ---> isRefreshing = true ---> POST /auth/refresh-token/ (Token Set 1) Tab B (Memory Space 2) ---> isRefreshing = true ---> POST /auth/refresh-token/ (Token Set 2 -> Revokes Set 1!) Tab C (Memory Space 3) ---> isRefreshing = true ---> POST /auth/refresh-token/ (Token Set 3 -> Revokes Set 2!) If your backend enforces Single-Use Refresh Token Rotation (where using a refresh token revokes all previous ones), multi-tab usage causes immediate ses

One of the most confusing topics for beginners in Node.js isn't Express, APIs, or asynchronous programming—it's understanding where npm packages should be installed. When I started learning Node.js, I thought there were only two commands: npm install package-name and npm install -g package-name I knew they both installed packages, but I had no idea when to use which one . Eventually, I realized they solve two completely different problems. If you're learning Node.js, this article will save you from one of the most common beginner mistakes. First, What Does npm Actually Do? npm (Node Package Manager) is the package manager that comes with Node.js. It helps you: Install libraries Manage project dependencies Update packages Share your own packages Run project scripts Whenever you install a package, npm has to decide where to install it. That's where local and global installations come in. Local Installation (The Default) When you run: npm install express npm installs Express inside your current project . Your folder now looks something like this: my-project/ │ ├── node_modules/ ├── package.json ├── package-lock.json └── app.js It also adds Express to your package.json : { "dependencies" : { "express" : "^5.0.0" } } This means: Express belongs to this project. Anyone who clones your repository can simply run: npm install and npm installs everything automatically. That's exactly what you want for project dependencies. Why Local Installation Matters Imagine you're building an API. Your code contains: const express = require ( " express " ); Now imagine another developer clones your project. If Express was installed locally, they only need to run: npm install Everything works. If it wasn't, they'll see something like: Cannot find module 'express' because the dependency isn't part of the project. That's why libraries your application depends on should almost always be installed locally. Global Installation Now consider this command: npm install -g nodemon This installs node

Every party game app I'd used before building this one wanted an account, a lobby website, or a subscription. I wanted the opposite: plug a laptop into the TV, run one command, and have everyone's phone connected in under thirty seconds — no internet required once the LAN is up. That constraint ends up dictating almost every architectural decision in GameNight : a Node/Express/Socket.io server that runs five real-time party games — a Mafia-style social deduction game I call Mongolpuri, UNO, a trivia quiz, Scribble, and Tic-Tac-Toe with tournament brackets — entirely from two in-memory Map s, no database, no auth, no build step on the frontend. Decision 1: A room is a plain object, not a schema const rooms = new Map (); // roomCode -> room const playerRooms = new Map (); // socketId -> roomCode const room = { code , gameType , host : socket . id , players : new Map ([[ socket . id , { id : socket . id , name , avatar }]]), status : ' lobby ' , gameState : null , timers : [], settings : defaultSettings ( gameType ), sessionStats : {}, }; Every game's state — the UNO deck, the Killer/Doctor night phase, the Scribble canvas buffer — lives in room.gameState , an untyped bag shaped differently per gameType . There's no ORM, no room class hierarchy, no GameEngine interface every game implements. Each game gets its own set of top-level functions ( startKD , kdResolveNight , startUno , unoPlayCard , …) that read and mutate room.gameState directly, dispatched through one handleAction switch: function handleAction ( room , socket , data ) { const gs = room . gameState ; if ( ! gs ) return ; switch ( room . gameType ) { case ' tictactoe ' : /* ... */ break ; case ' killerdoctor ' : kdAction ( room , socket , data ); break ; case ' scribble ' : scribbleAction ( room , socket , data ); break ; case ' uno ' : unoAction ( room , socket , data ); break ; case ' quiz ' : quizAction ( room , socket , data ); break ; } } For a five-game server built by one person, this is the right amo

Most "save this for later" tools I've used eventually want a server: an account system, a database for your notes, a sync service with its own outage history. I wanted something narrower — capture text or a whole page while browsing, turn it into a spaced-repetition flashcard, and have it show up on my other machine — without running any infrastructure at all. MindStack is a Manifest V3 Chrome extension that does exactly that: capture, spaced-repetition scheduling, a full dashboard, and cross-device sync, built entirely on chrome.storage.sync and chrome.identity . No backend, no bundler, no npm install before you can load it unpacked. Here's what that constraint forces you to get right. Decision 1: The scheduler is SM-2-shaped, not SM-2 Spaced repetition apps usually reach for a full SuperMemo SM-2 implementation — ease factors computed from response quality on a 0–5 scale, per-review interval history. MindStack's actual scheduler is a compressed version that captures the two properties that matter for a lightweight capture tool and drops the rest: const scoreReview = async ( score ) => { const memory = state . memories . find (( item ) => item . id === activeReviewId ); const interval = { forgot : 1 , hard : Math . max ( 1 , Math . round (( memory . reviewCount || 1 ) * 1.5 )), good : Math . max ( 2 , Math . round (( memory . reviewCount || 1 ) * ( memory . ease || 2.5 ))), easy : Math . max ( 4 , Math . round (( memory . reviewCount || 1 ) * (( memory . ease || 2.5 ) + 1 ))) }[ score ]; const updated = { ... memory , reviewCount : ( memory . reviewCount || 0 ) + 1 , successCount : ( memory . successCount || 0 ) + ( score === " forgot " ? 0 : 1 ), ease : Math . min ( 3.4 , Math . max ( 1.3 , ( memory . ease || 2.5 ) + ({ forgot : - 0.35 , hard : - 0.12 , good : 0.05 , easy : 0.16 }[ score ]) )), nextReviewAt : addDays ( interval ), }; Two properties, deliberately preserved from SM-2: intervals grow multiplicatively with review count (so a card you keep getting righ

GitHub热门项目 | 🏖️ A serverless, open-source file hosting solution built on Cloudflare. Supports image hosting, secure file storage, and personal cloud drive capabilities. | Stars: 5,888 | 36 stars today | 语言: JavaScript

GitHub热门项目 | OpenCluely is a free, open source Cluely (alternative), built for technical interviews like DSA, OAs, and CP. It offers an invisible overlay, real-time AI help, Smart Image Processing for question capture, and multi-language support : 100% customizable and private. | Stars: 471 | 55 stars today | 语言: JavaScript

GitHub热门项目 | Clean, polished interface for Tencent’s SongGeneration. Create songs from text prompts or reference audio, with batch processing and smart model selection. Minimum Requirement: 10GB of VRAM | Stars: 545 | 39 stars today | 语言: JavaScript

I started building Kudzu while making static websites with AI. AI coding tools have become very good at producing React-shaped TSX, and I have become used to reviewing code in that form. Function components, props, JSX, and event handlers are often easier for me to understand and verify than scattered DOM queries and imperative JavaScript mutations. But I was still building static pages. I wanted to keep TSX as the authoring and code-review format without automatically shipping React, a virtual DOM, hydration, or a browser-side component tree. Kudzu grew from that idea: Write familiar TSX, execute components during the build, and ship ordinary HTML with only the JavaScript each route actually needs. Kudzu is an experimental, HTML-first TSX framework. Website: kudzujs.cloud GitHub: github.com/kudzujs/kudzu The problem I wanted to solve Consider a blog, documentation site, newsletter, or product landing page. Most of the page is already known during the build: headings; navigation; articles; images; metadata; product descriptions; documentation content. TSX is a convenient way to author and review that structure. function PostCard ({ title , description , href }: { title : string description : string href : string }) { return ( < article > < h2 >< a href = { href } > { title } </ a ></ h2 > < p > { description } </ p > </ article > ) } The component model is useful for authoring, but that does not necessarily mean the browser needs a component runtime. For a static page, I wanted the output to remain ordinary HTML. <article> <h2><a href= "/posts/hello" > Hello </a></h2> <p> My first article. </p> </article> I also wanted interactive pages to receive only the JavaScript required for their actual behavior. Kudzu's model Kudzu treats components as build-time authoring units. React-shaped TSX ↓ Kudzu compiler ↓ Static HTML + CSS + capability-specific ESM Function components execute during the build. The browser does not receive: the component functions; React; a virtual D

Tokenization → embeddings → causal Transformer → LM head → softmax → loss → backpropagation. No TensorFlow, no PyTorch, and no hidden autograd. Repository: tiny-language-model-neuro-js . Most explanations of language models present correct formulas but hide the path between them inside a framework. I wanted the opposite: one small scenario where every scalar is visible and where the terminal clearly shows incorrect answers before learning and correct answers after it. The project now has one command: node src/train.js --generalize --adaptive-teach It requires Node.js 18.19+ and has no dependencies. The result first The model is queried immediately after random initialization: BEFORE TRAINING — random, usually wrong answers > can human read ? model: ? <unk> ... expected: human can read. [WRONG] > can fish swim ? model: ? <unk> ... expected: fish can swim. [WRONG] > can cat read ? model: ? <unk> ... expected: cat cannot read. [WRONG] After pre-training, SFT, and adaptive SFT, the same model produces: FINAL ANSWERS AFTER ADAPTIVE SFT > can human read ? model: human can read. [CORRECT] > can fish swim ? model: fish can swim. [CORRECT] > can bird fly ? model: bird can fly. [CORRECT] > can cat read ? model: cat cannot read. [CORRECT] Rehearsal controls preserved: 14/14. Stable criterion reached 11 times in a row. The initial text varies because initialization is random. The final acceptance criterion does not: all answers must be correct, every target token must have at least 95% probability, and the complete check must pass more than ten times consecutively. What remains after removing the extra modes The code previously contained several debug and training modes. They were useful while experimenting but obscured the main idea. The final version keeps one educational pipeline: text → word tokenization → token IDs → token + position embeddings → two causal Transformer blocks → multi-head self-attention → two-hidden-layer FFN → LM head → softmax → next-token probabilities

Every frontend developer eventually reaches the same point. You know React. You know TypeScript. You know how to build components. But then you join a real project. Suddenly the questions are no longer about writing a component — they’re about engineering. How should the project be structured? Where should authentication logic live? When is React Context enough? When should React Query own the data? How do you prevent a codebase from becoming impossible to maintain? What makes a frontend application scalable? How do AI coding tools fit into modern development? These are the questions I kept asking myself while working on frontend applications. The problem wasn’t the lack of information. The problem was that the information was scattered across hundreds of blog posts, GitHub repositories, conference talks, documentation pages, and personal notes. Tutorials Teach Frameworks Modern tutorials are excellent at teaching frameworks. You can easily learn: React Vue Angular Next.js TypeScript But very few resources explain what happens after that. How do experienced teams actually build production frontend applications? How do they organize folders? How do they write maintainable code? How do they review pull requests? How do they optimize performance? How do they scale applications from one developer to twenty? Those are engineering problems — not framework problems. Frontend Engineering Is a Different Skill Writing React code doesn’t automatically make someone a frontend engineer. Frontend engineering includes topics such as: Project architecture Feature-based organization Authentication and authorization API design State management Data fetching strategies Performance optimization Accessibility Error handling Testing CI/CD Monitoring Code quality Documentation Team conventions These subjects rarely live in one place. AI Has Changed the Way We Build Software Another reason I started this project is the rise of AI coding assistants. Learn about Medium’s values Today many de

GitHub热门项目 | Self-hosted audiobook and podcast server | Stars: 13,677 | 111 stars this week | 语言: JavaScript

GitHub热门项目 | High performance Node.js image processing, the fastest module to resize JPEG, PNG, WebP, AVIF and TIFF images. Uses the libvips library. | Stars: 32,496 | 9 stars today | 语言: JavaScript

I wanted to add a background-removal tool to my site's image cluster that stayed true to the 100% client-side processing principle I already use for PDFs and image conversions. The path there was anything but linear: a library dropped over a licensing problem, a carefully chosen model that turned out more limited than expected, and a bug that froze the entire page — not just the tool — during computation. Here's the full build, including the parts that didn't work the first time. The starting problem: what's actually feasible for free? The initial idea was broad: remove backgrounds, and maybe unwanted objects too. The two tasks have very different difficulty levels. Removing objects requires inpainting — plausibly reconstructing the erased area — which in practice still means heavy generative models, impractical to run client-side with good quality on an average device. Removing a background , on the other hand, is a segmentation problem: separating a subject from its surroundings. That has much lighter models available, runnable entirely via WebAssembly with no server involved at all. So: background removal only, object removal shelved for later. The AGPL trap The first library that looked like a perfect fit turned out to be distributed under AGPL , a strong copyleft license. Free to use — but with a real catch for anyone embedding it in a public, closed-source web service: AGPL can require releasing the full source of the project that embeds it, under the same license. "Free for the end user" and "safe to drop into a closed-source commercial product" are two different questions, and it's worth answering the second one before writing integration code, not after deploying it. Before wiring any "free" AI library into a commercial project, check the exact license, not just the price tag. AGPL, GPL, and other strong copyleft licenses are fine for personal or internal tools, risky for a public closed-source product. The fix: switch to Transformers.js — Hugging Face's li

Every long-lived JS/TS project I've worked on accumulates the same three kinds of rot: Dependencies in package.json that nothing imports anymore. You added moment , migrated off it, and the line stayed. Exports nothing consumes. A function was public once, the last caller was deleted, the export is still there advertising an API with no users. Whole files that fell out of the import graph but never got deleted, so every new engineer reads them trying to understand code that runs nowhere. None of this breaks the build. That's exactly why it survives. The compiler is happy, the tests pass, and the dead weight compounds quietly until onboarding takes a week and your bundle ships code no user will ever execute. The tool I've settled on for this is knip (by Lars Kappert). I run it on the enterprise codebase I maintain and on basically every other TS project I touch. One command: $ npx knip Unused files (2) src/legacy/formatValue.ts src/hooks/useLegacyModal.ts Unused dependencies (3) lodash package.json moment package.json @types/uuid package.json Unused exports (5) parseLegacy src/parse.ts:42:14 toLegacyDate src/date.ts:9:14 ... Files, dependencies, and exports in one pass, cross-referenced against the actual import graph. It's the first tool I've used that treats all three as the same problem, which they are: something is declared, nothing uses it, delete it. The honest caveat Knip is not zero-config on a real codebase. Anything resolved dynamically, runtime import() , plugin systems, framework entry points it doesn't recognize (Next.js pages, a CLI bin, config files loaded by string), gets flagged as unused when it isn't. You will get false positives on day one. The fix is a knip.json that names your real entry points, and after that it's accurate. But budget an afternoon to tune it before you trust the output enough to delete on it. Anyone who tells you it's instant hasn't run it on a large app. What I actually want Here's the part that bugs me. This problem is not sp

# Module Resolution Algorithm (Part 1): How Node.js Finds the Right Module In the previous article, we explored one of the most fascinating parts of Node.js—the hidden Module Wrapper Function. We learned that every CommonJS module is wrapped inside a function before execution, and we also discovered that require() is not a JavaScript feature. It is provided by the Node.js runtime. But a very important mystery still remains. When we write: const fs = require ( " fs " ); or const math = require ( " ./math " ); how does Node.js know where these modules are located? How does it decide whether "fs" is a built-in module or a file inside your project? Why does require("./math") work even if you don't write .js ? And what happens internally before your code starts executing? The answer lies inside one of Node.js's most important systems: The Module Resolution Algorithm Understanding this algorithm is essential because every Node.js application uses it hundreds or even thousands of times while starting. What is Module Resolution? The word resolution simply means: Finding the actual file represented by the string passed to require() . Suppose you write: require ( " ./math " ); To you, "./math" looks like a file. But for Node.js, it is initially nothing more than a string. "./math" Node cannot execute a string. It needs the real file. So its first job is to answer one question: "Which exact file should I load?" The complete process of converting the string inside require() into an actual file on disk is called Module Resolution . Why Does Node Need a Resolution Algorithm? Imagine a project like this: project/ ├── app.js ├── math.js ├── database.js ├── auth.js └── utils/ ├── logger.js └── helper.js Now look at these statements. require ( " ./math " ); require ( " ./database " ); require ( " ./utils/logger " ); require ( " fs " ); require ( " express " ); All of them look similar. But internally they are completely different. Some point to your own files. Some point to Node's bu

Ich habe einen echten Speedtest in Vanilla JS gebaut (mit Cloudflare API) Kein npm install. Kein React. Kein 200-MB-node_modules-Ordner. Nur HTML, CSS und ~250 Zeilen JavaScript, die deine echte Internetgeschwindigkeit messen. 👉 Live-Demo: dsl.nevik.de/speedtest Warum noch ein Speedtest? Es gibt Speedtest.net, FAST.com und dutzende andere. Warum also selbst bauen? Drei Gründe: Transparenz: Ich wollte genau verstehen, was gemessen wird – und was nicht. Größe: Die meisten kommerziellen Speedtests laden mehrere MB an Tracking-Scripts. Meiner ist eine einzige HTML-Datei mit eingebettetem JS. Kontrolle: Ich kann das Ergebnis direkt gegen den gebuchten Tarif des Nutzers bewerten und eine fundierte Empfehlung geben. Das Ergebnis ist ein Speedtest, der in unter 50 KB ausgeliefert wird, auf jedem Gerät läuft und echte Messwerte liefert – keine Schätzwerte. Die Architektur: Drei Phasen, drei Messungen Ein guter Speedtest misst drei Dinge: Ping (Latenz): Wie schnell kommt ein Datenpaket hin und zurück? Download: Wie schnell kommen Daten bei dir an? Upload: Wie schnell kommen Daten von dir raus? Für alle drei nutze ich die öffentliche Cloudflare-Speedtest-API , die unter speed.cloudflare.com läuft. Cloudflare betreibt eines der größten Edge-Netzwerke der Welt, hat Server in praktisch jedem Land und – ganz wichtig – erlaubt CORS für diese Endpunkte, sodass wir direkt aus dem Browser heraus messen können. Die zwei Endpunkte, die alles tragen: const CF_DOWN = ' https://speed.cloudflare.com/__down?bytes= ' ; const CF_UP = ' https://speed.cloudflare.com/__up ' ; __down?bytes=N liefert exakt N Bytes zurück. __up nimmt einen POST-Body beliebiger Größe entgegen. Das war's. Kein API-Key, keine Rate-Limits, die für unsere Zwecke relevant wären, keine Kosten. Phase 1: Ping messen (ohne WebSocket) Klassische Speedtests nutzen für den Ping oft WebSockets oder RTCPeerConnection -Tricks. Das ist komplex und fehleranfällig. Mein Ansatz: Wir laden einfach einen winzigen Datenblock (1 KB) fünfma