标签：#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

There's a specific kind of bad animation I notice immediately: the count-up stat that stutters as it ticks, the progress bar that lags a frame behind your scroll, the "active" tab underline that snaps instead of glides. None of it is broken, exactly. It just feels cheap. And nine times out of ten, the cause is the same — the animation is being driven through React state, so every frame triggers a re-render, and the main thread can't keep up. I build motion-heavy interfaces for a living, mostly in Next.js 16 and React 19, and I've landed on a small set of patterns that stay smooth because they bypass React's render loop entirely . They lean on Motion — the library formerly known as Framer Motion. It went independent and got renamed in 2025, so the package is now motion and the import you want is motion/react , not framer-motion ( the APIs are identical, only the import path changed ). Here are three I reach for constantly, plus the reduced-motion discipline that should wrap all of them. The mental model: MotionValues over state The single idea that fixes most jank: a MotionValue is a value Motion tracks outside of React. When it changes, Motion updates the DOM directly via transform or opacity — it does not call setState , so your component doesn't re-render. That's the whole trick. A number ticking from 0 to 4,200 should touch the DOM ~60 times a second and re-render React zero times. If a value changes every frame, it should live in a MotionValue, not in useState . State is for things that change when a user does something; MotionValues are for things that change continuously. Keep that line in your head and the rest of this falls out naturally. 1. A reading-progress bar with useScroll + useSpring The bar at the top of an article that fills as you read. The naive version listens to scroll events and sets state — which is exactly the re-render trap. Motion's useScroll hands you scroll position as a MotionValue already, so there's nothing to re-render. useScroll retu

Leetcode 27: Remove Element Leetcode 27 asks us to remove a specific value from an array. The value to be removed is passed in as a parameter to the function along with the array. Just as we did in Day 1, we will cover a naive approach and an optimized approach and discuss the trade-offs between them. I think in the end there's a pretty clear winner. Let's get started. For both approaches we will use the following values: nums = [1, 3, 3, 2, 4] val = 3 Approach 1: Naive (For Loop + Splice) This approach uses a for loop and leverages .splice() for removals. Solution: var removeElement = function ( nums , val ) { let k = 0 ; for ( let i = 0 ; i < nums . length ; i ++ ) { if ( nums [ i ] === val ) { nums . splice ( i , 1 ); i -- ; } else { k ++ ; } } return k ; }; We begin by initializing a variable k to 0. We then enter the for loop. The condition is standard: create a variable i initialized to 0, continue looping while i is less than nums.length to avoid going past the end of the array, and increment by 1 each time through. Each iteration checks one condition: whether nums[i] is equal to val . If true, we call .splice() on the array. The arguments we pass to splice are i and 1 . i is the index at which we want to start removing, and 1 tells splice to remove only that one element. We then decrement i . The reason for this took me some time to wrap my brain around, so I have included a visual below to make it concrete. The core issue is this: when splice removes an element, every element to the right shifts one index to the left. Without i-- , the loop would increment i on the next iteration and skip right over the element that just shifted in. i-- counteracts that by stepping i back, so after the loop increments it, i lands exactly where the shifted element now sits. If nums[i] !== val , we skip the splice and increment k instead. At the end we return k , which holds the count of elements remaining after all occurrences of val have been removed. Time complexity: O(n²)

GitHub热门项目 | An open-source, AI-powered career platform for resume optimization, mock interviews, and job tracking, Architecture Analysis and Portfolio Builder . 🌟 Star the repo to support us! 🤝 Ready to contribute? Read CONTRIBUTION.md to get started. I am unable to see all the mention so if want to merge pr and issue assignment contact me on linkedin. | Stars: 101 | 21 stars this week | 语言: JavaScript

GitHub热门项目 | https://hf.co/hexgrad/Kokoro-82M | Stars: 7,300 | 111 stars this week | 语言: JavaScript

GitHub热门项目 | Codex Desktop App - Cross-platform Rebuild | Stars: 2,178 | 13 stars today | 语言: JavaScript

GitHub热门项目 | Prettier is an opinionated code formatter. | Stars: 51,895 | 5 stars today | 语言: JavaScript

GitHub热门项目 | List of Permanent Free LLM API (API Keys) | Stars: 4,786 | 32 stars today | 语言: JavaScript

GitHub热门项目 | Native web workspace for Hermes Agent — chat, terminal, memory, skills, inspector. | Stars: 5,313 | 63 stars today | 语言: JavaScript

The message looked completely normal. A recruiter, a short pitch, a "take-home challenge" hosted on GitHub. Clone it, run npm install , get the dev server up, build a small feature, send it back. Standard stuff. I have done a dozen of these. This one was trying to steal my wallet keys and browser session data before I ever wrote a line of code. It did not hide the malware in the app. It hid it in the build tooling. That is the whole trick, and it is the reason a lot of experienced developers get caught. You read src/ , it looks fine, so you trust it. Nobody reads the lockfile. Nobody reads the postinstall script. That is exactly where the payload lives. Here is the full teardown: what the lure looks like, the exact red flags, how I investigated it without running it, and the defenses you should adopt today. The setup: Contagious Interview This is a known campaign. Security researchers track it as "Contagious Interview," attributed to North Korea-aligned actors. The pattern is consistent: You get contacted about a job, often blockchain or full-stack, often with a salary that is a little too good. You are given a code repository to clone and run as a "technical assessment." The repo runs malicious code at install or build time, not at runtime. The payload pulls a second-stage downloader, grabs your environment variables, crypto wallet files, browser-stored credentials, and keychain data, then exfiltrates them to a remote host. The genius of it is the framing. A normal developer reflex when running untrusted code is "I will read the code before I trust it." But you read the application code. You do not read what npm install does, because npm install is something you run a hundred times a week without thinking. Red flag 1: a postinstall script that does not belong The first thing I do with any unfamiliar repo is open package.json and read the scripts block. Specifically, I look for lifecycle hooks: preinstall , install , postinstall , prepare . These run automatically w

React + Mapbox GL JS: Custom Markers, Popups, and Bounds-Based Data Fetching If you've added a Mapbox map in a React app before, you've probably hit a wall pretty quickly: Mapbox GL JS manages its own DOM, and React manages a virtual DOM, and getting the two to play nicely takes some thought. Markers and popups are a great example of this tension — they're imperative APIs in a world where you want declarative components. This post walks through a pattern I've landed on for wrapping mapboxgl.Marker and mapboxgl.Popup in composable React components, and combining them with bounds-based data fetching to build something like a real estate or earthquake explorer map — where the data on the map updates as you pan and zoom. Here's what we'll cover: Wrapping mapboxgl.Marker in a React component that handles its own lifecycle Using createPortal to render custom marker content in React Fetching data from an API using the map's current bounding box Tracking an active marker with React state Wrapping mapboxgl.Popup in a component If you want to see the finished product first, the source code is on GitHub . The Core Challenge: Two DOMs Before we get into the code, it's worth understanding why this requires a pattern at all. When you use React's normal component tree, React controls the DOM. But mapboxgl.Marker also creates and manages DOM nodes — it places an element on the map at a specific geographic coordinate, handles repositioning as you pan, and removes itself cleanly when you're done with it. The approach here is to use React to manage the lifecycle of each marker (mount when data arrives, unmount when data goes away), while letting Mapbox handle the positioning . We use React's createPortal to render JSX content into a DOM node that we hand off to Mapbox. The example discussed below is a map that fetches earthquake data for the current viewport, displaying a custom Marker and Popup for each. As you move the map and the bounds change, new data is fetched and the Markers a

A client asked me for a simple thing. Not ChatGPT. Not an agent. Not a multimodal assistant that can explain invoices, generate React components, and write poetry in three languages. Just a small classifier embedded into a website. The job sounded boring in the best possible way: take some text, classify it, return a result, keep it fast. So I started looking at the usual solutions. And then I had one of those moments where you stop reading documentation, lean back, and ask: Are we seriously doing this? Because the answer I kept running into looked like this: download a huge runtime download a huge model initialize a big ML stack then classify one small piece of text In one setup, the path was getting close to something like 250 MB per user . For a simple classifier. On a website. From a server. Every time. No. Sorry. That is insane. The problem The web has a strange habit now. You ask for one small AI feature, and the answer is often: bring the entire construction company. But sometimes I do not need a construction company. I need one person on the construction site. One task. One tool. One result. This is especially true for simple classification, embeddings, semantic search, routing, filtering, ranking, small local decisions. Not every AI problem needs an LLM. Not every website needs a full inference engine. Not every user should pay a 250 MB download tax because we were too lazy to think smaller. So I started digging I wanted something simple: runs in the browser does not require a server for inference small enough to actually ship works with transformer-style models can tokenize text can run BERT-like forward inference can produce embeddings or classification input does not bring ONNX Runtime, Candle, ndarray, or half the internet with it At first I thought: “Surely someone already made the tiny version.” There are great tools out there. Transformers.js is powerful. ONNX Runtime Web is powerful. Candle is powerful. But that was exactly the problem. They are pow

Hello Dev Community! 👋 It is officially Day 12 of my journey to master the MERN stack! Today, I wrapped up Lecture 3 of Apna College's JavaScript playlist with Shradha Didi, focusing on a fundamental data type we use every day: Strings . Before today, I thought strings were just plain text wrapped in quotes. Today, I learned how much power JavaScript gives us to manipulate, slice, and dynamically format text. 🧠 Key Learnings From JS Lecture 3 (Strings) I explored how JavaScript handles text strings and the built-in properties and methods that make text manipulation effortless: 1. Template Literals (The Ultimate Game Changer) Shradha Didi introduced Template Literals , which use backticks ( ` ) instead of standard quotes. This allows us to perform String Interpolation —embedding variables directly inside a string using ${variable} . It makes code look clean and professional: javascript let obj = { item: "pen", price: 10 }; // Old way: console.log("The cost of", obj.item, "is", obj.price, "rupees."); // Modern way: console.log(`The cost of ${obj.item} is ${obj.price} rupees.`);

A few years ago, we started adapting our websites for mobile devices. Then we adapted them for...

AirDrop only works between Apple devices. Most alternatives require an app install, a cloud account, or route files through a third-party server. I wanted something simpler: Open a URL → discover nearby devices → send files. So I built LocalDrop — a peer-to-peer file transfer app that works entirely in the browser over local Wi-Fi. GitHub: https://github.com/akshaykdadheech/localdrop Live Demo: https://localdrop-4fddd39fb6ad.herokuapp.com How It Works Devices connected to the same Wi-Fi network automatically discover each other through a lightweight signaling server. Once discovered, WebRTC establishes a direct peer-to-peer connection: Browser A ──► Signaling Server ◄── Browser B └──────── WebRTC P2P ────────┘ The signaling server only helps devices find each other. File transfers happen directly between browsers via WebRTC and are DTLS encrypted, so the server never sees your files. Interesting Challenges Backpressure Handling WebRTC DataChannels on Chromium have a ~16 MB buffer limit. Sending data too aggressively can crash the tab. I solved this using: bufferedAmountLowThreshold Flow control based on drain events Cross-Platform Compatibility Different browsers expose different capabilities. Android Chrome supports the File System Access API iOS Safari does not This required separate file-receiving flows for each platform. Large File Transfers Keeping multi-gigabyte files in memory isn't practical. On Chrome, showSaveFilePicker() is triggered after the transfer completes, allowing transfer progress to remain visible throughout the process without buffering everything in RAM. Tech Stack Svelte 5 + Vite TypeScript WebRTC DataChannel Node.js + ws Docker Self-Hosting git clone https://github.com/akshaykdadheech/localdrop cd localdrop docker compose up -d Then open: http://your-ip:3001 from any device connected to the same Wi-Fi network. I'd love feedback from anyone who's worked with WebRTC DataChannels, especially on mobile browsers. If you find the project useful, a

GitHub热门项目 | draw.io is a JavaScript, client-side editor for general diagramming. | Stars: 5,755 | 164 stars this week | 语言: JavaScript