标签：#javascript

CalcMora just crossed 200 live tools calculators and converters spanning finance, health, math, unit conversions, date/time, everyday life, and sports. It's a small milestone against the bigger target (3,000 tools within a year), but it's the first one that felt like proof the approach actually works. What CalcMora is A free calculator and converter site, built to be fast and genuinely useful rather than bloated with unnecessary interactivity. Every tool lives on its own page, static by default, ad-supported, and designed to actually rank and hold up in search rather than just exist. The stack is intentionally boring: Astro for static output, hosted on Cloudflare Pages . No client-side framework runtime, no heavy JS bundles. That choice is mostly why the site stays fast even as the tool count climbs into the hundreds; static pages don't get slower just because there are more of them. Consistency at scale Going from a handful of tools to 200 forced us to think hard about repeatability. Every tool page follows the same underlying template: a calculator, supporting explanatory content, an FAQ section, and standard trust/attribution elements (author info, last-updated date, disclaimers where relevant). That consistency is what makes it realistic to keep scaling toward thousands of pages without every single one needing a bespoke pass. Structured data (schema.org markup) is baked into every page too; it's a big part of why individual calculators show up well in search, and it's applied consistently rather than as an afterthought. New: embeddable tools The other big addition alongside the 200-tool mark is an embed system — every tool on CalcMora can now be dropped into someone else's site as a lightweight, ad-free widget. Site owners get a copy-paste snippet, no signup required. The implementation leans on a couple of iframe and query-param tricks to keep embedded calculators fast and chrome-free (no header, footer, or ads, just the tool), without needing any JS framework

The Subscription Fatigue is Real I was paying $47 for ChatGPT Plus, $29 for Jasper, $19 for Grammarly, $16 for Copy.ai, and $15 for an SEO tool. That's $126/month just for AI writing tools. So I built my own. Five tools, one dashboard, completely free to start. Here's how each one works and what it replaces. 1. AI Content Writer (Replaces Jasper, Copy.ai — $66/month combined) The content writer generates blog posts, articles, product descriptions, and marketing copy. You pick: Content type : blog post, article, product description, marketing copy, newsletter Tone : professional, casual, friendly, authoritative, humorous, persuasive Length : short (100-200 words), medium (300-500 words), or long (800-1200 words) The key difference from Jasper: no templates, no "brand voice" setup. You just describe what you want and get it. Simpler, faster. 2. AI Email Composer (Replaces Grammarly Business — $16/month) This one handles the emails I hate writing: Cold outreach to potential clients Follow-up emails after meetings Professional inquiries Customer support replies You set the formality level (formal, semi-formal, casual) and urgency. It writes the subject line AND the body. I've used it for 50+ cold emails last month. 3. Social Media Caption Generator (Replaces Later + caption tools — $29/month) Generates 3 caption variations per request. Platform-specific: Instagram : emojis, hashtags, engagement hooks Twitter/X : concise, thread-ready LinkedIn : professional, thought-leadership style TikTok : casual, trend-aware Options for emojis, hashtags, and CTAs are toggleable. You can mix and match from the 3 generated options. 4. AI Code Helper (Replaces GitHub Copilot Chat — $10/month) Five modes: Generate : write code from description Debug : find and fix errors in pasted code Explain : break down complex code Refactor : improve code quality Convert : translate between 20+ languages Supports Python, JavaScript, TypeScript, Java, C++, Go, Rust, SQL, and more. Not as deeply integr

After several weeks of optimization and community feedback, AnimaStage Lite v1.2.3 is now available. The biggest milestone of this release is that AnimaStage Lite is now available on Google Play, alongside the browser version. 📱 Google Play https://play.google.com/store/apps/details?id=com.webmmd.suite 🌐 Browser https://animastage-lite.app What's new in v1.2.3 📱 Google Play Release AnimaStage Lite is now officially available on Android through Google Play, making it easier to access the editor without manually installing APKs. ⚡ Multi-model performance improvements Working with multiple characters is now much smoother. Improvements include: Performance governor now reacts to the number of visible models. Background characters use a lighter rendering path. When playback is paused, Bullet Physics is simulated only for the selected character. Bullet Physics substeps are capped to improve stability and maintain FPS. 🔄 Physics stability A new Global Physics Stability Registry helps keep simulations more reliable across different scenes. Added: Fix Physics — a soft physics reset that restores the simulation without interrupting the animation timeline. This was implemented after feedback from users who experienced unstable physics when working with multiple models. 🛠 Bug fixes Fixed: SITE_URL is not defined in officialProject.ts General stability improvements Various internal cleanups Project goals AnimaStage Lite is an experimental browser-native MikuMikuDance studio built with WebGL and WASM. Current features include: PMX / PMD support VMD animation playback Bullet Physics Timeline editor MP4 export Browser + Android support The long-term goal is to make MMD creation accessible without requiring a desktop installation. Links 🌐 Website https://animastage-lite.app 📱 Google Play https://play.google.com/store/apps/details?id=com.webmmd.suite 💻 GitHub https://github.com/FBNonaMe/animastage-lite Feedback, bug reports, and feature suggestions are always appreciated. Every relea

GitHub热门项目 | LINGUISTIC ENGINE FOR AI | Stars: 762 | 159 stars this week | 语言: JavaScript

GitHub热门项目 | Any agent Skill: generate beautiful architecture diagrams with dark/light theme toggle and PNG/JPEG/WebP/SVG export | Stars: 1,603 | 86 stars today | 语言: JavaScript

GitHub热门项目 | Pashov Audit Group Skills | Stars: 912 | 5 stars today | 语言: JavaScript

GitHub热门项目 | Claude Code learns from your corrections: self-correcting memory that compounds over 50+ sessions. Context engineering, parallel worktrees, agent teams, and 17 battle-tested skills. | Stars: 2,510 | 39 stars today | 语言: JavaScript

There's a paradox nobody wants to say out loud: the same frameworks companies pick because they're "enterprise-ready," "scalable," and "industry standard" are, for an LLM writing code, a minefield. Angular , React with its whole ecosystem, Nx with its monorepos: these are powerful tools, built by humans to coordinate teams of humans on massive codebases. And for that purpose, they're often the right choice — if your primary constraint is coordinating hundreds of engineers over a decade, the conventions and tooling of an established framework earn their keep. But there's a second actor in the room now. When the one writing the code is an AI, the very traits that make these frameworks "robust" turn into pure friction. The argument I'm making isn't "Angular and React are obsolete." It's narrower: we've historically optimized software architecture for human cognition, and LLMs introduce a different cost model that may favor simpler, more deterministic architectures — at least in some domains. Let's break down why, in three points. 1. The Token Tax (and the Cognitive Bottleneck) An LLM doesn't "understand" code the way we do — it processes it token by token, and every token costs something: money, latency, and context window that could otherwise be spent reasoning about the actual problem. Try asking an AI to generate a simple input form in a typical Angular/Nx context. To do it "properly" it has to: create the component (separate .ts , .html , .css files) declare the @Component with all its metadata import and wire up the right modules possibly touch an NgModule or a standalone-components config navigate 4-5 folder levels inside a typical Nx structure ( apps/ , libs/ , feature-x/ , data-access/ , ui/ ...) All of this before writing a single line of actual logic. That's architectural complexity that, for a human, pays for itself over time thanks to tooling, autocomplete, and internalized conventions. For an LLM generating text sequentially, it's a tax paid on every singl

React useIntersectionObserver Hook: Lazy Load & Detect Visibility (2026) You want to load an image only when it scrolls near the viewport. Or fire an analytics event the first time a card is actually seen . Or trigger "load more" when the user reaches the bottom of a list. Every one of these is the same question — is this element on screen yet? — and for years the answer was a scroll listener that fired hundreds of times a second, re-read getBoundingClientRect() on each tick, and still managed to miss the edge cases. IntersectionObserver is the browser API that answers that question correctly, asynchronously, and off the main thread. useIntersectionObserver is the hook that wires it into React without the useEffect / useRef /cleanup boilerplate — and without the leak-on-unmount and stale-closure bugs the hand-rolled version always ships. This post covers the real @reactuses/core API, the three patterns you'll actually reach for, and how to tune threshold , rootMargin , and root . SSR-safe and typed. Why Not Just Use a Scroll Listener? The old way to know whether an element was visible looked like this: listen to scroll , and on every event measure the element against the viewport. useEffect (() => { function onScroll () { const rect = el . getBoundingClientRect (); if ( rect . top < window . innerHeight ) { setVisible ( true ); } } window . addEventListener ( ' scroll ' , onScroll ); return () => window . removeEventListener ( ' scroll ' , onScroll ); }, []); This has two problems baked in. First, scroll fires on the main thread, dozens of times per second, and getBoundingClientRect() forces a synchronous layout each time — that's exactly the recipe for janky scrolling. Second, it only catches elements crossing the viewport ; the moment your scroll happens inside a container, you're re-deriving geometry by hand. IntersectionObserver flips the model. You hand the browser a target and a threshold, and it tells you — asynchronously, batched, off the scroll path — when

It was during a live client demo. The AI was mid-session. The user was answering questions. Everything was going perfectly. Then — this: "Sorry, there was an error processing your request. Please try again." The client looked at us. My manager looked at me. I looked at my laptop and wanted to disappear. The Investigation First thing I checked: OpenAI dashboard. No failed runs. Nothing. I checked our server logs. There it was: run_timeout — after exactly 60 seconds But here's the thing — the run wasn't failing. It was just slow. OpenAI was still processing. Our backend gave up at 60s. OpenAI finished at 87s. We quit too early. Why Does This Happen? The longer a session gets, the more history OpenAI has to process. Early in a session: 3–5 seconds. Mid-session (10+ messages): 30–50 seconds. Long sessions: 60–90+ seconds. Our hardcoded limit of 60 seconds wasn't matching reality. The Fix Step 1: Made the timeout configurable via environment variable. # .env OPENAI_RUN_TIMEOUT_MS=150000 Step 2: Updated the polling loop to use it. const TIMEOUT_MS = parseInt ( process . env . OPENAI_RUN_TIMEOUT_MS ) || 150000 ; const TERMINAL = [ ' completed ' , ' failed ' , ' cancelled ' , ' expired ' , ' requires_action ' ]; while ( ! TERMINAL . includes ( runStatus . status )) { if ( Date . now () - startTime >= TIMEOUT_MS ) throw new Error ( ' run_timeout ' ); await new Promise ( r => setTimeout ( r , 1000 )); runStatus = await openai . beta . threads . runs . retrieve ( threadId , run . id ); } Step 3: Deployed. No more errors. Lessons Learned Always handle ALL 5 terminal states — not just "completed" Never hardcode timeouts for AI workloads — they vary by session length Your error logs and OpenAI dashboard together tell the full story What's Next I'm exploring runs.stream() — streaming responses in real time, no polling, no timeouts. Will write a follow-up once it's in production. Have you hit this before? How did you handle it? Drop it in the comments.

i did something dumb last month. on purpose. i sat down, opened a next.js app, and tried to make hydration fail in every way i could think of. not because a bug forced me to. not because i was debugging something. just because i wanted to see it. understand it from the inside. and honestly? best few hours i've spent learning anything in a while. why i even did this you know how you use something for months and you think you get it, but you don't really get it? hydration was that for me. i knew the surface-level thing: server renders HTML, client takes over, they gotta match. cool. got it. moving on. except i didn't get it. i just got the vibe of it. every time i saw hydration mismatch, i'd ask claude, fix the immediate thing, feel vaguely annoyed, and move on. i never stopped to ask why that specific thing broke it. i was treating symptoms, not understanding the actual disease. so i decided to break it deliberately. if i caused the errors myself, i'd actually have to understand what i was doing. the setup basic next.js app. app router. a few pages. nothing fancy. i wasn't trying to build anything. i was trying to destroy something, carefully, so i could see what fell apart and why. break #1: the obvious one - new Date() on render this is the classic. everyone's seen it. export default function Page () { return < div > { new Date (). toLocaleString () } </ div > } server renders this at, say, 14:00:00. by the time react runs on the client and tries to reconcile, it's 14:00:01. the strings don't match. react screams. thing is, i knew this would happen. what i didn't think about was why react cares. here's the thing: react isn't doing a full diff on the entire DOM after hydration. it's trusting that the server HTML is a valid starting point and it's just attaching event listeners and state to it. but if the content doesn't match, it doesn't know what to trust. it can't partially hydrate "mostly correct" HTML. it either matches or it doesn't. so it throws the warning, a

I needed to convert 500 product images from one format to another. Server-based solutions quoted $15-50/month for batch processing. So I built a client-side solution using Web Workers and OffscreenCanvas. The Architecture The key insight: Canvas operations on large images block the main thread. The fix: Web Workers handle image decoding/encoding off the main thread OffscreenCanvas renders without DOM access — perfect for worker contexts Transferable objects pass image data between workers with zero-copy const worker = new Worker ( ' processor.js ' ); const canvas = new OffscreenCanvas ( 800 , 600 ); // Worker processes image, main thread stays responsive Real Performance Processing 500 images (average 2MB each) on a mid-range laptop: Server upload approach: 12 minutes (mostly upload time) Browser-local with Workers: 3 minutes 40 seconds Memory usage: Stable at ~400MB with proper cleanup The Tools I packaged this into webp2png.io for batch WebP conversion and svg2png.org for vector batch processing. For barcode generation, genbarcode.org uses similar worker-based rendering for bulk label generation. If you're processing more than 50 images, Workers + OffscreenCanvas is the way to go. Your server bill will thank you.

🚀 Build Your First Space Shooter Game with Limn Engine A Complete Step-by-Step Tutorial for JavaScript Beginners Welcome! In this tutorial, you'll build a complete space shooter game using Limn Engine — a zero‑configuration 2D game engine that runs in your browser. What you'll build: A spaceship that moves, shoots bullets, fights waves of enemies, and keeps score. All in about 100 lines of code . By the end, you'll understand: How to create a game loop How to handle keyboard input How to detect collisions How to use particles for visual effects How to manage game state (lives, score, game over) 🎮 Want to play the finished game? Click here to play Space Shooter Live! Before We Start What You Need A text editor (VS Code, Notepad, or any code editor) A web browser (Chrome, Firefox, Edge) Limn Engine — download epic.js from limn-engine-doc.vercel.app What You Should Know Basic JavaScript (variables, functions, arrays, if-statements) How to open an HTML file in a browser No game development experience required! Step 1: The HTML Structure Every Limn Engine game starts with a simple HTML file. <!doctype html> <html> <head> <script src= "asset/epic.js" ></script> </head> <body> <script> // All your game code goes here </script> </body> </html> What's happening: <script src="asset/epic.js"> — loads the Limn Engine library Everything inside the second <script> tag is your game code Save this as game.html and open it in your browser. You should see a blank canvas with a blue gradient background. Step 2: Setting Up the Game The first thing we need is a Display — this is the engine that creates the canvas, runs the game loop, and handles input. const display = new Display (); display . perform (); // Activates performance mode (dual-canvas rendering) display . start ( 800 , 600 ); // Creates an 800×600 canvas What's happening: new Display() — creates the engine display.perform() — turns on high-performance mode display.start(800, 600) — creates a canvas 800 pixels wide and 600 p

The three-layer model works. Part 1 of this series is the invoice incident that proved it. Part 2 is...

GitHub热门项目 | SVG icons for popular brands | Stars: 25,297 | 7 stars today | 语言: JavaScript

GitHub热门项目 | Free, simple, and intuitive online database diagram editor and SQL generator. | Stars: 37,731 | 230 stars today | 语言: JavaScript

Every npm project is one malicious package away from a supply-chain breach. NPM Safety Guard catches threats that npm audit completely misses — from DPRK backdoors and typosquatted packages, to exposed API keys and AI credential theft hidden inside your node_modules. This video walks through all 23 detection layers, one by one, showing exactly what each layer catches and how it protects your project in real time. 🛡️ Intro NPM Safety Guard is the most comprehensive npm security scanner for developers. It ships as a VS Code extension (also works in Cursor and Windsurf) and a JetBrains plugin (WebStorm, IntelliJ IDEA, and all IntelliJ-based IDEs). It runs silently in the background and alerts you to supply-chain threats, malware, CVEs, and credential leaks — before they can cause damage. Layer 1 — Known Malicious Packages Checks every package in your package.json against a bundled database of documented supply-chain attacks, including DPRK/Lazarus Group backdoors, the infamous event-stream compromise, and dozens of other confirmed malicious packages. The database is also synced against a live remote feed so newly discovered threats are caught even before you update the extension. Layer 2 — CVE Vulnerabilities Queries the Google OSV.dev API for known CVEs across all your direct dependencies. No API key needed — it is completely free. Results are cached for 24 hours to minimize network calls. CVSS scores are mapped to severity levels (Critical, High, Medium, Low) so you always know exactly how serious each vulnerability is and which version fixes it. Layer 3 — Install Script Hooks Flags packages that declare preinstall, postinstall, install, or prepare npm scripts. These hooks run automatically during npm install — before any of your own code executes — making them the number one real-world vector for supply-chain malware delivery. Legitimate packages that genuinely need install scripts (like node-gyp and imagemin) are automatically whitelisted. Layer 4 — Deep Tarball AS

"Prop drilling is bad, use Context" is repeated everywhere — but the actual cost stays abstract. So I put the two approaches side by side with live render counters. Click one button and the difference is impossible to miss. ▶ Live demo: https://context-vs-props-drilling.vercel.app/ Source (React 19 + TS): https://github.com/dev48v/context-vs-props-drilling Two identical 4-level trees, both React.memo 'd. One threads a value down as a prop through every level; the other provides it once via Context and reads it only at the leaf. Change the value: Prop drilling → 4 components re-render. Every component on the path receives the changed prop, so all of them re-render — and each intermediate is cluttered with a value it does nothing with except pass along. Context → 1 component re-renders. The intermediates take no value prop, so they're skipped (memoized, props unchanged). Only the consumer leaf re-renders. The summary tallies it on every click: 4 vs 1 . Why Context skips the middle This is the part that surprises people: with Context, an intermediate component can be skipped even though a descendant re-renders . < ThemeCtx . Provider value = { val } > < A /> { /* memo, no props → skipped on value change */ } </ ThemeCtx . Provider > const A = memo (() => < B />); // skipped const B = memo (() => < C />); // skipped const C = memo (() => < Leaf />); // skipped const Leaf = () => { const value = useContext ( ThemeCtx ); // ← re-renders on context change return < div > { value } </ div >; }; React re-renders context consumers directly when the provider value changes — it doesn't need to re-render the components in between. With prop drilling there's no such shortcut: the only way the value reaches the leaf is through every parent, so every parent must re-render. The catch — Context isn't a free lunch Context isn't a "no re-renders" button. Every consumer re-renders whenever the provider value changes — there's no built-in selective subscription. One big, chatty context ca

You submitted your extension, waited days for review, and got back a rejection with a violation called "Purple Potassium." Your extension looks fine to you, so what does it even mean? Here is what it is, why it happens, and how to catch it before you ever hit submit. What "Purple Potassium" actually means "Purple Potassium" is Google's internal tag for excessive or unused permissions . Your manifest requests access to something your code does not actually use, and the reviewer flags it. It is one of the most common reasons a Chrome extension gets rejected, and it is frustrating precisely because the extension works fine in testing. Review is checking something testing never does: whether every permission you ask for is justified by your code. The usual causes 1. API permissions you declared but never call. You added tabs , bookmarks , or cookies to your manifest at some point, but there is no chrome.bookmarks.* call anywhere in your code. 2. Host access that is too broad. You requested <all_urls> when your extension only touches one site: // Flagged "host_permissions" : [ "<all_urls>" ] // Better "host_permissions" : [ "https://*.example.com/*" ] Leftover permissions after removing a feature. You shipped a feature that needed downloads, later removed the feature, and forgot to remove the permission. The tabs misunderstanding. The tabs permission does not grant access to the tabs API. Basic methods like chrome.tabs.create() work without it. It only grants four sensitive Tab properties: url, pendingUrl, title, and favIconUrl. If you declare tabs but never read those, it counts as unused. How to fix it by hand List everything in permissions, optional_permissions, and host_permissions. For each one, search your code for the matching chrome. call. Remove any permission with no usage. Narrow and other broad patterns to the specific hosts you need. In your reviewer notes, write one plain sentence per sensitive permission explaining why you need it. Reviewers often lack con

Prediction markets just hit $3.6B in volume. I wanted to know what the biggest traders were betting on — in real time. So I built WhaleTrack. Here's how it works under the hood. The Problem Polymarket has a public leaderboard. But it only shows P&L totals — not what whales are currently betting on, not their recent activity, not their win rate. If you want to follow smart money, you're flying blind. I wanted something that answered: what are the top traders doing right now? The Stack Vanilla JS frontend (no framework, keeps it fast) Vercel serverless function as a backend proxy (avoids CORS issues) Polymarket's public data API — no auth required Step 1: Finding the Whales Polymarket exposes a leaderboard endpoint: https://data-api.polymarket.com/v1/leaderboard?limit=20 This returns traders ranked by P&L. I pull the top 10, grab their wallet addresses, and that's my whale list. Step 2: Fetching Live Activity For each whale wallet, I hit: https://data-api.polymarket.com/activity?user={address}&limit=20 This returns their recent trades — market name, size in USDC, timestamp. Refreshes every 60 seconds. Step 3: Calculating Win Rate (the tricky part) The key is the redeemable flag — redeemable: true means they won, currentValue: 0 + redeemable: false means they lost. Took a few wrong attempts with cashPnl (always negative, not useful). Step 4: The Whale Alert Banner Every 60 seconds I check for trades over $5,000 placed in the last 10 minutes. When it fires, a green banner slides down with the whale name, market, and amount. Auto-dismisses after 12 seconds. First time I saw it fire live with a $28K bet — genuinely exciting. Results 129+ users in the first few days Zero ad spend Traffic from Twitter, Reddit, Quora What's Next More whale wallets (suggestions welcome) Click-through to open the same market on Polymarket directly Email/push alerts for big trades Check it out: whaletrack.app All feedback welcome — especially if you spot a whale I'm missing.