标签：#javascript

If you've ever built an Electron app that needs a backend, you know the problem. You want something lightweight, something that runs on Node, something where you don't spend three hours configuring Swagger, and something that doesn't make you feel like you're setting up a microservices architecture just to expose two endpoints to your own desktop UI. I've shipped Electron apps with Express. I've tried Fastify. Both work, but they leave you doing a lot of plumbing yourself. Then I found DaloyJS , and honestly, it clicked. The Electron Backend Problem Here's the thing about Electron: your renderer process is basically a browser, and your main process is a Node.js server. When you need data from external APIs, or you need a clean layer between your UI and your business logic, you want a BFF, a Backend for Frontend. A thin server that composes upstream calls, holds the session, and returns exactly the shape your UI needs. DaloyJS was built for this role. The docs even say so plainly: typed upstream client, fetchGuard for safe egress, session handling, and edge runtime support. That combination is exactly the BFF toolkit. Contract-First Means Less Glue The killer feature for desktop apps is contract-first routing. You define a route once, and DaloyJS gives you validation, OpenAPI 3.1 docs, and a typed in-process client all from the same source. No stale spec files. No writing types by hand. Here's what a basic Electron BFF route looks like: import { z } from " zod " ; import { App , requestId , secureHeaders , rateLimit } from " @daloyjs/core " ; import { serve } from " @daloyjs/core/node " ; const app = new App ({ bodyLimitBytes : 1 << 20 , requestTimeoutMs : 5 _000 , docs : true , // auto-mounts /docs and /openapi.json }); app . use ( requestId ()); app . use ( secureHeaders ()); app . use ( rateLimit ({ windowMs : 60 _000 , max : 120 })); app . route ({ method : " GET " , path : " /settings/:userId " , operationId : " getUserSettings " , request : { params : z . objec

The test hung for 30 seconds. The response had already fired. One moved line fixed it. The test hung for 30 seconds, then timed out. The browser had received the response. The page had loaded. The data was there. The test was still waiting. The wizard I was writing a helper to walk through a 4-step booking wizard. After clicking "Next" on step 1, the page does a full navigation — window.location.href to step 2. Step 2 immediately loads doctor data from the API. The helper looked like this: await Promise . all ([ page . waitForURL ( /step=2/ ), step1Next . click ()]); await page . waitForResponse ( r => r . url (). includes ( ' /doctors ' )); Standard pattern: wait for navigation, then wait for the data request. Timeout. Every time. What I checked first The URL pattern. Maybe /doctors wasn't matching. Opened the network tab. The request was there: GET /api/v1/doctors , 200, 47ms. Correct URL, correct response. The page looked fine. The data was rendered. The test said it was waiting for a response that had already happened. Added waitForLoadState . Still hung. Added an explicit waitForSelector for an element that was clearly on the page. That passed. Then waitForResponse hung again. The response existed. The test couldn't see it. What was actually happening page.waitForResponse() is not a query. It doesn't look at what happened. It registers a listener — from that exact moment forward — and waits for the next matching response. The sequence in my code: Promise.all resolves when the URL changes to step=2 By the time the URL changed, step 2 had already loaded Step 2 had already sent and received /api/v1/doctors Then waitForResponse registered its listener Now it's waiting for the next /doctors response Which never comes Playwright doesn't buffer missed events. If the response fired before the listener was registered — it's gone. The fix await Promise . all ([ page . waitForURL ( /step=2/ ), page . waitForResponse ( r => r . url (). includes ( ' /doctors ' )), step1Next

Built a full-stack RBAC admin starter: NestJS (Clean Architecture) + Next.js 16 (FSD). JWT refresh, permission-gated UI, sheet-based CRUD. MIT. Looking for feedback. ⚡ Next.js 16 Admin Dashboard Template Architecture: Strictly adheres to Feature-Sliced Design (FSD) to prevent codebase rot in large applications. Key Features: Full-scale Role-Based Access Control (RBAC) UI, URL-driven advanced tables (TanStack Table v8), global caching (TanStack Query v5), and dynamic sheet-based UX configurations using shadcn/ui and Tailwind v4. Quality Assurance: Pre-configured with Playwright for End-to-End (E2E) testing and automated GitHub Actions CI. 🛡️ NestJS Clean Architecture REST API Architecture: Implements strict layered Clean Architecture (Presentation ➔ Application ➔ Domain 🡨 Infrastructure) ensuring zero database/framework lock-in. Key Features: Advanced authentication via JWT refresh rotation, stateful RBAC with high-performance Redis permissions caching, and enterprise-grade security structures. Quality Assurance: Achieves ~98% test coverage across domain and application layers using Jest.

TypeORM 1.0 is the first major release of the open-source TypeScript and JavaScript ORM since its inception in 2016. This version modernizes platform requirements, removes deprecated APIs, and introduces numerous bug fixes and new features. TypeORM now supports ECMAScript 2023, dropping older Node.js versions and dependencies while enhancing security and migration processes. By Daniel Curtis

GitHub热门项目 | The GEP-powered self-evolving engine for AI agents. Auditable evolution with Genes, Capsules, and Events. | evomap.ai | Stars: 7,871 | 140 stars today | 语言: JavaScript

Web Security: OWASP Top 10 and How to Fix Them (2026) Security isn't a feature you add later — it's built into every layer. Here's how the top 10 vulnerabilities work and how to prevent them. #1 Broken Access Control // ❌ Vulnerable: User can access anyone's data app . get ( ' /api/users/:id ' , ( req , res ) => { const user = await db . users . findById ( req . params . id ); res . json ( user ); // No check if requester owns this data! }); // ✅ Secure: Always verify ownership app . get ( ' /api/users/:id ' , async ( req , res ) => { // Check: Is the logged-in user requesting their OWN data? if ( req . params . id !== req . user . id && req . user . role !== ' admin ' ) { return res . status ( 403 ). json ({ error : ' Access denied ' }); } const user = await db . users . findById ( req . params . id ); res . json ( user ); }); // ✅ Better: Use middleware for all protected routes const requireOwnership = ( resourceType ) => async ( req , res , next ) => { const resource = await db [ resourceType ]. findById ( req . params . id ); if ( ! resource ) return res . status ( 404 ). json ({ error : ' Not found ' }); if ( resource . userId !== req . user . id && req . user . role !== ' admin ' ) { return res . status ( 403 ). json ({ error : ' Access denied ' }); } req . resource = resource ; // Attach for route handler next (); }; app . get ( ' /api/posts/:id ' , auth , requireOwnership ( ' posts ' ), ( req , res ) => { res . json ( req . resource ); }); #2 Cryptographic Failures // ❌ Storing passwords in plain text or weak hashing const password = " password123 " ; db . users . insert ({ email , password }); // NEVER DO THIS! // ✅ Proper password hashing with bcrypt const bcrypt = require ( ' bcrypt ' ); const SALT_ROUNDS = 12 ; // Higher = slower = more secure (12 is good balance) async function hashPassword ( password ) { return bcrypt . hash ( password , SALT_ROUNDS ); } async function comparePassword ( password , hash ) { return bcrypt . compare ( password , hash ); /

Web Security: OWASP Top 10 and How to Fix Them (2026) Security isn't a feature you add later — it's built into every layer. Here's how the top 10 vulnerabilities work and how to prevent them. #1 Broken Access Control // ❌ Vulnerable: User can access anyone's data app . get ( ' /api/users/:id ' , ( req , res ) => { const user = await db . users . findById ( req . params . id ); res . json ( user ); // No check if requester owns this data! }); // ✅ Secure: Always verify ownership app . get ( ' /api/users/:id ' , async ( req , res ) => { // Check: Is the logged-in user requesting their OWN data? if ( req . params . id !== req . user . id && req . user . role !== ' admin ' ) { return res . status ( 403 ). json ({ error : ' Access denied ' }); } const user = await db . users . findById ( req . params . id ); res . json ( user ); }); // ✅ Better: Use middleware for all protected routes const requireOwnership = ( resourceType ) => async ( req , res , next ) => { const resource = await db [ resourceType ]. findById ( req . params . id ); if ( ! resource ) return res . status ( 404 ). json ({ error : ' Not found ' }); if ( resource . userId !== req . user . id && req . user . role !== ' admin ' ) { return res . status ( 403 ). json ({ error : ' Access denied ' }); } req . resource = resource ; // Attach for route handler next (); }; app . get ( ' /api/posts/:id ' , auth , requireOwnership ( ' posts ' ), ( req , res ) => { res . json ( req . resource ); }); #2 Cryptographic Failures // ❌ Storing passwords in plain text or weak hashing const password = " password123 " ; db . users . insert ({ email , password }); // NEVER DO THIS! // ✅ Proper password hashing with bcrypt const bcrypt = require ( ' bcrypt ' ); const SALT_ROUNDS = 12 ; // Higher = slower = more secure (12 is good balance) async function hashPassword ( password ) { return bcrypt . hash ( password , SALT_ROUNDS ); } async function comparePassword ( password , hash ) { return bcrypt . compare ( password , hash ); /

Rust Ownership System Explained for JavaScript Developers Quick context (why you're writing this) I was trying to rewrite a small utility I’d written in JavaScript—a function that takes a string, splits it into words, and returns the longest one. In JS it’s trivial: you pass the string around, mutate arrays, and nothing blows up. When I attempted the same thing in Rust, the compiler kept yelling at me about “use of moved value” and “cannot borrow as mutable because it is also borrowed as immutable”. I spent a good chunk of an afternoon staring at those errors, thinking I’d missed some syntax detail, only to realize the real issue was a completely different way of thinking about data. If you’ve ever felt that Rust’s compiler is being overly pedantic, you’re not alone—but once you grasp what it’s protecting you from, the frustration turns into appreciation. The Insight Rust doesn’t treat variables like JavaScript’s loosely‑typed references. Instead, it enforces ownership at compile time. Three ideas tend to surprise developers coming from a garbage‑collected world: Move semantics – assigning a value to another variable moves it; the original is no longer usable unless you explicitly clone it. Borrowing rules – you can have either many immutable references or exactly one mutable reference to a piece of data, but never both at the same time. Lifetimes – the compiler tracks how long references are valid, preventing dangling pointers without a garbage collector. The first two are the ones that trip people up most often, and they directly address the class of bugs JavaScript developers know all too well: accidental shared‑state mutations and use‑after‑free‑like mistakes (though in JS they show up as weird undefined values rather than crashes). Let’s look at each with a concrete example, show the common mistake, and then see how to do it right. How (with code) Move semantics – the “you can’t use it after you give it away” surprise fn main () { let greeting = String :: from

We run an app where you describe a task and an AI agent does it. The first step after you hit submit is a planning call: POST /api/web/tasks/plan, which turns your free text into a structured plan the agents can pick up. One submit should mean one plan. While testing locally I noticed two plan requests going out per submit. Same payload, fired back to back. The agents handled it fine because the second plan just overwrote the first, but it bothered me. A doubled write is a doubled write, and the next one might not be idempotent. First wrong guess: a double-click My first assumption was the obvious one. The user double-clicks, or the button is not disabled during the request, so two clicks sneak through. I added the disabled state, watched the network tab, and got two requests from a single click. So it was not the button. The thing I had stopped seeing The submit logic lived in an effect. When the form phase flipped to submitting, the effect ran and fired the plan call. There was a second effect too: when the user changed the tier or output format mid-flow, a matching effect re-planned, because a different tier means a different plan. Neither effect had any guard against running twice. And in development, React StrictMode mounts every component, unmounts it, and mounts it again, on purpose, to surface effects that are not safe to re-run. My plan effect was exactly the kind of effect StrictMode is built to expose. The double mount fired it twice. The detail that made it click: I built the app for production and watched the network tab there. Exactly one request. The double was a development-only artifact of StrictMode doing its job. The bug was never in production traffic, but the fact that StrictMode could double it meant my effect was not safe, and an unsafe effect is a latent bug waiting for a real remount. The fix: ref guards set before the await, not reset in cleanup The instinct is to reach for a boolean. The catch is where you reset it. If you reset the guard

GitHub热门项目 | A Cloudflare-based email service | 基于 Cloudflare 的邮箱服务 | Cloudflare Email 邮箱 Mail | Stars: 10,723 | 695 stars this week | 语言: JavaScript

GitHub热门项目 | 🌈一个跨平台的划词翻译和OCR软件 | A cross-platform software for text translation and recognition. | Stars: 18,584 | 45 stars today | 语言: JavaScript

GitHub热门项目 | Opensource IDE For Exploring and Testing API's (lightweight alternative to Postman/Insomnia) | Stars: 44,677 | 31 stars today | 语言: JavaScript

GitHub热门项目 | 🪨 why use many token when few token do trick — Claude Code skill that cuts 65% of tokens by talking like caveman | Stars: 68,689 | 471 stars today | 语言: JavaScript

GitHub热门项目 | Transformer Explained Visually: Learn How LLM Transformer Models Work with Interactive Visualization | Stars: 7,737 | 18 stars today | 语言: JavaScript

GitHub热门项目 | OpenAI Plugins | Stars: 1,380 | 17 stars today | 语言: JavaScript

As a developer who frequently switches between competitive FPS titles like CS2 and Valorant, re-tuning mouse sensitivity is always a hassle. I wanted a fast, ad-free tool to translate my aim perfectly across titles, so I built a clean Game Sens Converter . The Approach I built this using 100% Vanilla JS. It’s a simple utility, so there was absolutely no need for a backend or heavy frameworks. It loads instantly and calculates right in the browser. Here is a quick look at the core logic handling the sensitivity conversion multipliers: function convertSensitivity ( gameFrom , gameTo , currentSens ) { // Standardized multipliers relative to CS2 / Source engine const multipliers = { ' cs2 ' : 1 , ' valorant ' : 3.181818 , ' overwatch ' : 0.3 , ' apex ' : 1 }; if ( ! multipliers [ gameFrom ] || ! multipliers [ gameTo ]) return null ; // Convert to base (CS2), then to the target game const baseSens = currentSens * multipliers [ gameFrom ]; const convertedSens = baseSens / multipliers [ gameTo ]; return convertedSens . toFixed ( 3 ); } Try it out You can use the live tool for free here: Game Sens Converter Let me know what your main game is or if you'd add any other FPS titles to the list in the comments!

I built 24 browser-based tools. Here is the complete technical guide for building your own and selling PRO licenses on Gumroad. Architecture: One HTML File + GitHub Pages + Gumroad No frameworks, no backend, no monthly costs. One HTML file on GitHub Pages. Gumroad handles payments. The PRO Flow User hits free limit → PRO modal Buy button → Gumroad popup ( window.open , NOT target=_blank ) Payment → Gumroad postMessage with license key message listener catches key Key verified via Gumroad API ( /v2/licenses/verify ) localStorage saves PRO (in try-catch!) Gotchas From 24 Tools postMessage security: Check d.success && d.purchase , never just d.license_key . I had this bug in 17 files. localStorage: Wrap in try-catch . Uncaught throws crash the whole page. CDN scripts: Always <script defer> . Without it, slow CDN blocks rendering. Gumroad publish: curl returns false every time. Use PowerShell. Buy button: Popup connects the page to Gumroad. Redirect breaks postMessage . Packed 5 templates with everything pre-configured: Browser Tools Starter Kit ($19)

Vercel has released Next.js 16.2, featuring performance enhancements that make development startup 400% faster and rendering up to 60% quicker. The update includes AI-assisted development tools, improved Turbopack efficiency, and better error reporting. Migration from Next.js 15 is supported, and compatibility is set for Node.js 20.9 and TypeScript 5.1 or newer. By Daniel Curtis

Hello Developers! 👋 I recently completed my Bachelor of Computer Applications (BCA). For my final-year project, I built an Online Quiz Platform — a web application designed to make both conducting and taking quizzes simple, interactive, and efficient. This project allowed me to apply the concepts I learned throughout my degree and gain practical experience in full-stack web development. 🌐 Live Demo Project Link: nitinsmali / Online_Quiz My final year project is an Online Quiz Web Application designed for an user-friendly experience across devices. 🌐 Online Quiz System 🚀 Live Demo 🔗 https://onlinequiz-project.xo.je/online_quiz/ 🧠 About The Project The Online Quiz System is a full-stack web application designed to provide an interactive and engaging online quiz experience. Users can register, log in, attempt quizzes, track scores, and view leaderboard rankings in real time. This project was developed to strengthen concepts in: Full-Stack Web Development Frontend & Backend Integration Database Management Authentication Systems Hosting & Deployment Real-World Application Flow ✨ Features 🔐 Authentication System User Registration Secure Login System Session Handling Password Management 📚 Quiz Management Category-Based Quizzes Dynamic Questions Timer-Based Quiz System Automatic Score Calculation 🏆 User Performance Leaderboard Rankings User Profile Dashboard Quiz Score Tracking 💬 Feedback System Feedback Submission Database Storage 📱 Responsive UI Mobile-Friendly Design Interactive User Experience Clean Interface 🛠️ Tech Stack Frontend HTML5 CSS3 JavaScript Backend PHP Database MySQL Development Tools XAMPP Git & GitHub Hosting InfinityFree 📂 Project Structure … View on GitHub 📌 Project Overview The Online Quiz Platform is a web-based application that allows users to participate in quizzes, answer multiple-choice questions, and receive instant results. The primary goal of this project was to create a system that eliminates manual quiz evaluation and provides a smooth online

NewsScope is a real-time news search engine: search a topic, filter by language, category and country, get live results from the NewsData.io API. No React, no bundler, no npm dependencies — just HTML, CSS and vanilla ES2020+. This post is about a few specific decisions in the architecture that I think are worth sharing. The module structure The JS is 9 files, each with a single responsibility, loaded in dependency order directly in index.html : config.js → i18n.js → data.js ↓ ↓ ↓ helpers.js → geo.js → ui.js ↓ ↓ ↓ render.js → api.js → main.js Every module only uses things defined in modules loaded before it. main.js registers all event listeners and calls init() — it's the only file that touches everything. config.js is the smallest file in the project, since it only defines the state object and two constants. All app state lives in a single flat object in config.js , accessed as a global: const S = { apiKey : '' , query : '' , activeQuery : '' , language : ' es ' , category : '' , country : '' , results : [], nextPage : null , loading : false , hasSearched : false , error : null , }; No state management library. When something changes, the relevant render function gets called explicitly. Simple, and easy to trace. Translating search intent, not just the UI Most i18n stops at labels and button text. NewsScope has 10 predefined topic shortcuts (AI, Climate, Economy, Cybersecurity…) that trigger a search. If a user picks "Cybersecurity" while the app is set to Japanese, the keyword sent to the API should be in Japanese — not a transliteration of the English word. The solution is a TOPIC_KEYWORDS map in data.js : const TOPIC_KEYWORDS = { ai : { es : ' inteligencia artificial ' , en : ' artificial intelligence ' , ja : ' 人工知能 ' , ar : ' الذكاء الاصطناعي ' , /* 7 more */ }, cyber : { es : ' ciberseguridad ' , en : ' cybersecurity ' , ja : ' サイバーセキュリティ ' , /* 8 more */ }, // 8 more topics }; One string per language, per topic. Switching the UI language and then selecting a