标签：#javascript

While researching API changes I noticed something — Google Maps removed DirectionsService on May 1 2026 with no soft fallback. Calls just throw runtime errors after the deadline. Most developers won't know until something breaks. So I built DepRadar — paste your package.json, it checks your exact stack against known deprecations and shows only the ones affecting you, with severity, sunset dates, and migration links. Currently tracks 13 real deprecations across: Google Maps (DirectionsService, DistanceMatrixService removed) OpenAI (Realtime API Beta sunset) AWS SDK v2 (maintenance mode) Microsoft Actionable Messages (retired) moment.js, request package And more Free → depradar.netlify.app Open source → github.com/Ahmed889-code/depradar What deprecations am I missing from your stack?

We have all been there. You are staring at your screen late at night, trying to optimize a bundle size, or debugging an enterprise pipeline that has been failing for three hours straight. The mainstream development community constantly tells us to only install packages that are high performance, audited for security, and strictly necessary for production. But where is the fun in a perfectly clean node_modules folder? Sometimes, the ultimate way to level up your engineering workflow is to inject some absolute chaos into your dependencies. Why spend hours writing robust logic when you can install a library that brings pure irony to your terminal? Let us dive into ten packages that might look completely useless on the surface but are actually the most important modules you will ever encounter in your developer journey. 1. emoji-poop This NPM package lets you use the poop emoji in your output. The emoji is well required in most of the websites as the real fun begins when the site crashes and you can use this poop emoji to showcase the errors with an emoji. This will help the clients get a bit calm after seeing the emoji and the errors. Think about it from a psychological perspective: traditional red stack traces cause immediate client panic, but a well-placed graphical poop emoji introduces a masterclass in modern error mitigation. javascript // npm i emoji-poop const emoji = require('emoji-poop'); console.log(emoji) // 💩 2. thanos-js Who doesn't love Marvel, and Thanos being the strongest villain in the MCU? This package lets you delete files in Thanos fashion. Once you install and run it, it deletes 50% of your files, reducing your stress and giving you less codebase to work with. Yes, it deletes the files for those who are confused about what this package does. It uses fs.unlinkSync to delete the files. Deleting random files from .git would be absolutely evil, and Thanos would love to do it. Exactly half of the files are deleted. Each file is given a chance at random

We've all seen password strength meters on sign-up forms. Most of them rely on simplistic, static rules: "Must contain at least 8 characters, one number, and one special character." But from a mathematical standpoint, these rules are a poor proxy for actual password security. A password like Tr0ub4dor&3 conforms to these rules but is far easier to compromise than a randomly generated four-word passphrase like correct-horse-battery-staple . To truly measure password security, we have to look at information theory and compute its Shannon Entropy . Here is how password entropy works, the math behind it, and how you can calculate it directly in the browser with 100% client-side privacy. What is Password Entropy? In cryptography, entropy is a measure of the unpredictability or randomness of a password. It is expressed in bits . An entropy of $N$ bits means there are $2^N$ possible combinations that an attacker would have to guess in a worst-case brute-force search. < 28 bits: Very weak (easily guessed in milliseconds). 28 to 35 bits: Weak (cracked in minutes or hours). 36 to 59 bits: Reasonable protection (days to months). 60 to 127 bits: Very strong (takes years to decades to crack). 128+ bits: Extremely secure (mathematically unfeasible to crack). The Mathematical Formula To calculate the entropy ($E$) of a password, we use the following equation: $$E = L \times \log_2(R)$$ Where: $L$ is the length of the password (number of characters). $R$ is the size of the pool of unique characters from which the password is drawn. $\log_2(R)$ is the binary logarithm of the pool size, representing the amount of information carried by each character. Determining Pool Size ($R$) To find $R$, we analyze which character sets are present in the password string: Lowercase letters ( a-z ): 26 characters Uppercase letters ( A-Z ): 26 characters Numbers ( 0-9 ): 10 characters Common special characters/punctuation: 33 characters (e.g., !@#$%^&*()-_=+[]{}|;:',.<>/? etc.) If a password uses ch

GitHub热门项目 | The best browser for both you and your AI agents work in parallel. | Stars: 479 | 199 stars this week | 语言: JavaScript

GitHub热门项目 | ⚡️ Streaming torrent client for the web | Stars: 31,207 | 225 stars this week | 语言: JavaScript

GitHub热门项目 | A high-performance, 100% client-side tool for removing Gemini AI image & video watermarks. Built with pure JavaScript using mathematically precise Reverse Alpha Blending. / 基于 JavaScript 的纯浏览器端 Gemini AI 图像和视频无损去水印工具，使用数学精确的反向 Alpha 混合算法 | Stars: 4,749 | 27 stars today | 语言: JavaScript

GitHub热门项目 | Sample Whatsapp App - Jasper's Market | Stars: 508 | 10 stars today | 语言: JavaScript

Introduction When learning JavaScript, one of the first concepts you’ll encounter is functions. Functions are the building blocks of JavaScript. They help you organize code, avoid repetition, and make your programs easier to understand. If variables store data, functions define behavior . You’ll use functions everywhere: handling user input, processing data, calling APIs, and structuring your code. In this article, we’ll cover: What is a function Function declarations Function expressions Parameters vs arguments Return values Arrow Functions Why Functions Matter 1. What is a Function? A function is a reusable block of code designed to perform a specific task. Think of it like a machine: Input → Process → Output function greet () { console . log ( " Hello! " ); } To run the function, you call it: greet (); // Hello! 2. Function Declaration This is the most common way to define a function: function add ( a , b ) { return a + b ; } 💡 Explanation: Defined using the function keyword Can be called before it is declared (because of hoisting) Key parts: function → keyword add → function name a, b → parameters return → output value add (); // ✅ Works! function add ( a , b ) { return a + b ; } 💡 Why does this work? JavaScript reads the code first, and function declarations are stored in memory during the initial phase (hoisting) . That’s why you can call the function even before it’s defined in the code. 3. Function Expressions Functions can also be stored in variables: function add ( a , b ) { return a + b ; } 💡 Explanation: Assigned to a variable Cannot be used before initialization add (); // ❌ Error: Cannot access before initialization const add = function ( a , b ) { return a + b ; }; 💡 Why does this cause an error? Because: const add has not been initialized yet when it is called. The function itself is not in memory at that moment . 4. Parameters vs Arguments This is a common beginner confusion: Parameter: variable in function definition Argument: actual value passed i

I built JSON Utility Kit as a small browser-based toolkit for everyday JSON tasks. The CSV to JSON converter recently got an update for nested JSON structures. For example, headers like user.name, user.email, order.id can be converted into nested objects instead of flat keys. What it supports: CSV to JSON conversion Nested object output from dot notation headers Browser-side processing No signup JSON formatting and validation tools nearby Tool: https://jsonutilitykit.com/tools/csv-to-json/ GitHub: https://github.com/kejie1/json_utility_kit

React Doctor es un linter de cero instalación que escanea un codebase de React buscando problemas de correctitud, seguridad, accesibilidad, rendimiento y mantenibilidad, luego los rankea y te entrega una lista de arreglos con forma de agente. Este post es un reporte de campo: lo corrí sobre una SPA real de React 18 + Vite + TypeScript (~50 rutas, TanStack Query, react-hook-form) y separé lo que de verdad me atrapó. El resultado honesto: 1,249 hallazgos, cinco que valía la pena arreglar, incluyendo dos bugs de seguridad reales. Los otros 1,244 fueron una mezcla de ruido, decisiones de criterio, y falsos positivos. TL;DR Categoría Reportados Vale la pena actuar Por qué la brecha Seguridad 18 warnings 2 13 eran sinks saneados en el servidor (falsos positivos); 1 mina de código muerto + 1 XSS real fueron el oro Bugs 24 errores, 487 warnings 2 1 fuga de timer, 1 key/spread; ~27 exhaustive-deps piden criterio humano Accesibilidad 434 warnings, 1 error 1 el 1 error ( aria-selected faltante) era real; los 434 son ruido de <Label> / <button type> Rendimiento 110 warnings 0 nada caliente; candidatos pero sin impacto medido Mantenibilidad 176 warnings 0 opiniones de estilo tipo "componente grande" Total 1,249 5 señal-a-ruido ≈ 1 en 250 El puntaje que imprimió: 39 / 100 . Dos cosas que ese encuadre esconde: los cinco que sacó a la superficie eran de alto valor (una fuga de token en localStorage y un sink de XSS almacenado), y el conteo no es determinista : una segunda corrida del mismo commit reportó 1,254, no 1,249. El veredicto en una línea: excelente generador de hipótesis, pésima compuerta. Úsalo para encontrar candidatos, verifica cada uno contra el código, y nunca conectes el conteo al CI. Qué es React Doctor Un solo binario que corres por npx / pnpm dlx , sin agregar dependencia a tu proyecto, sin archivo de configuración obligatorio. Parsea tu src/ , hace match contra un conjunto de reglas (sus familias: Seguridad, Bugs, Accesibilidad, Rendimiento, Mantenibilidad), e im

Everything worked. I'd wired up useOptimistic on a task list, the checkbox flipped the instant you...

I rebuilt aesencryption.net so text AES (128/192/256) runs fully in the browser - the key and plaintext never leave the page. The hard part is staying byte-compatible with common server-side AES libraries (mode, IV, padding, base64 output), so I ship copy-paste equivalents in PHP, Java, Python, Go, Rust, Kotlin and JS. Live tool (mine, free): https://aesencryption.net - feedback on the crypto choices welcome. My own site.

GitHub热门项目 | All parts of Claude Code's system prompt, 27 builtin tool descriptions, sub agent prompts (Plan/Explore/Task), utility prompts (CLAUDE.md, compact, statusline, magic docs, WebFetch, Bash cmd, security review, agent creation). Updated for each Claude Code version. | Stars: 11,638 | 28 stars today | 语言: JavaScript

GitHub热门项目 | 🦸 AI 编程超能力 · 中文增强版 — superpowers（116k+ ⭐）完整汉化 + 6 个中国原创 skills，让 Claude Code / Copilot CLI / Hermes Agent / Cursor / Windsurf / Kiro / Gemini CLI 等 16 款 AI 编程工具真正会干活 | Stars: 6,504 | 66 stars today | 语言: JavaScript

Like most developers, I have a handful of small utilities I reach for every day — formatting JSON, decoding a JWT, generating a UUID, testing a regex. For years I just googled "json formatter" and pasted my data into whatever site came up first. Then one day I caught myself pasting a production JWT into a random online parser that POSTs everything to its server. That felt bad. So I built my own toolbox that never sends data anywhere. It's called WeTool — free, no login, and every tool runs 100% in your browser . You can open DevTools → Network and confirm there are zero requests while you use it. Here are the 15 I use most: Everyday JSON formatter / validator URL encode / decode Base64 encode / decode Timestamp ↔ date converter Security & encoding Hash calculator (MD5 / SHA) JWT parser UUID generator QR code generator Text & format Regex tester Text diff Markdown preview SQL formatter Debugging Cron expression parser Color converter User-agent parser Two things that matter to me and might to you: Nothing is uploaded. No backend, no login, no tracking of what you type. Local-only. 15 languages. Most tool boxes are English-only; this one isn't. It's free and I'm actively adding tools — if something you use daily is missing, tell me in the comments and I'll add it. 👉 wetool.site

The first question I ask when reviewing a frontend architecture is: where does the state live relative to where it is used? In most codebases I have reviewed, the answer is "in a global store, regardless of scope." This is the wrong default. The rule State should live as close to its consumers as possible. If only one component needs it, it is component state. If a subtree needs it, it is a context or service scoped to that subtree. Global state is for truly global concerns: authentication, locale, theme.

Most async code in frontend apps has a hidden bug: it doesn't stop when it should. A user navigates away mid-request. A component unmounts. A newer search query supersedes the previous one. The old network call keeps running, eventually resolves, and tries to update state that no longer exists. In React, that's the infamous warning: "Can't perform a React state update on an unmounted component." In vanilla JS, it silently delivers stale data. AbortController is the browser's built-in solution. It's been in every major browser since 2018 — old enough that there's no excuse not to use it. But most tutorials skip it, most codebases use it inconsistently, and most devs reach for it only after they've debugged a flicker one too many times. Here's the pattern, end to end. The race condition you already have function SearchResults ({ query }: { query : string }) { const [ results , setResults ] = useState < Result [] > ([]); useEffect (() => { fetch ( `/api/search?q= ${ query } ` ) . then ( r => r . json ()) . then ( data => setResults ( data )); // runs even if query changed }, [ query ]); return < ul > { results . map ( r => < li key = { r . id } > { r . name } </ li >) } </ ul >; } When the user types "re" and then "rea" before the first request finishes, two fetches are in flight simultaneously. The request for "re" might complete after the request for "rea" — and when it does, setResults silently overwrites the correct result with the stale one. The component shows the wrong data. No error, no warning, no clue. This is a race condition, not a hypothetical. It happens on slow networks, during fast typing, on underpowered devices, and in staging environments right before a demo. AbortController: the three-line fix An AbortController is a pair: a controller object and a signal. You pass the signal into any abort-aware API; you call abort() to cancel it. useEffect (() => { const controller = new AbortController (); fetch ( `/api/search?q= ${ query } ` , { signal : control

Node.js 26 has been released, featuring the Temporal API enabled by default, an updated V8 engine to version 14.6, and the Undici HTTP client upgraded to 8.0. The release also removes deprecated legacy APIs. Developers should note migration points related to NODE_MODULE_VERSION changes. Node.js 26 is current for six months before entering long-term support. By Daniel Curtis

In JavaScript and TypeScript, object references are often treated as disposable. An object is created, assigned to a variable, passed around, replaced, copied, spread, cloned, and eventually discarded. That is normal language behavior, but in larger mutable systems it creates a specific class of bugs: stale aliases. A stale alias appears when one part of the program still holds a reference to an old object while another part has already replaced that object with a new one. The old reference is still valid JavaScript, but it no longer points to current data. Hard Object References is a discipline for avoiding that class of bugs. The idea is simple: Object and array references should be stable. Do not replace them as a normal update mechanism. Copy data into existing objects instead. This rule is useful for application state, but it is not limited to global stores. It applies to ordinary variables, local component state, nested fields, arrays, drafts, snapshots, runtime models, and temporary objects. The broader principle is: Replace primitive values. Do not replace object and array references. The First Rule: const for Objects and Arrays The first level is variable bindings. If a variable holds an object or array, it should normally be declared with const : const user = { /* ... */ }; const items = [ /* ... */ ]; not: let user = { /* ... */ }; let items = [ /* ... */ ]; The point is not that the object becomes immutable. It does not. This is still possible: user . name = ' Alex ' ; items . push ( nextItem ); The point is that the variable should not be rebound to a different object: user = nextUser ; items = nextItems ; That replacement changes which object the variable points to. Any other code that still holds the old reference now points to obsolete data. So the first rule is: Use const for object and array references. Mutate or copy data into the object. Do not rebind the reference. This rule also applies to temporary objects. A temporary object may be short-live

In my previous articles, I’ve consistently emphasized a core architectural principle: once the render layer no longer dictates the entire data flow, the boundaries between State, Derived State, and Effects become critical. When we fall into the habit of stuffing every UI-affecting variable into generic "state," the system quickly loses its semantic structure. In modern frontend applications, this architectural gap becomes most glaring when dealing with asynchronous work. Async data is never merely "a value that will appear in the future." It carries complex semantics regarding its source, temporal validity, cancellation, error recovery, and invalidation. If these semantics aren't modeled explicitly, they inevitably get pushed down into the UI framework’s lifecycle—indirectly patched together through component mounts, effect dependencies, and callback guards. This brings us to the core question of this article: What does a system lose when the correctness of async work is forced to depend on the UI lifecycle? We are all incredibly familiar with this pattern: const data = await fetchSomething () setState ( data ) Or, using a standard UI framework hook: useEffect (() => { let cancelled = false fetchSomething (). then ( result => { if ( ! cancelled ) { setData ( result ) } }) return () => { cancelled = true } }, []) There is nothing inherently wrong with this code for simple use cases. It’s intuitive and perfectly aligns with how Promises are designed to work: trigger the operation, wait for the resolution, and write the result back into state. However, this mental model has a subtle downside. It encourages us to think of async work as simply calling setState after a Promise resolves. That may hold up for simple screens, but as an application grows, the model starts to expose structural problems. Promise Only Describes Completion, Not Ownership A Promise solves a very specific problem: A piece of work will complete in the future, and it will either succeed or fail. It c