标签：#JavaScript

A request starts at 10:00:00.900 and finishes 200 ms later. Your latency log says -800 ms . That sounds impossible until the machine corrects its clock between the two reads. Then ordinary code turns an adjustable wall clock into a broken stopwatch. The subtraction that works—until it does not This is probably hiding in one of your metrics helpers: async function timed ( operation ) { const startedAt = Date . now (); const result = await operation (); return { result , durationMs : Date . now () - startedAt , }; } Most of the time, this reports a sensible number. That is what makes it dangerous. Date.now() answers a calendar question: how many milliseconds have passed since the Unix epoch according to this machine? The answer must remain comparable with logs, users, and other computers, so synchronization software is allowed to correct it. A correction can change its rate, jump it forward, or move it backward. If either correction lands between the two calls, the subtraction measures the clock adjustment as if it were work. A timestamp is a coordinate. A duration is a distance. They need different instruments. Your computer already has two kinds of clock Operating systems expose several clocks, but two mental buckets cover most application code: Question Clock JavaScript example “When did this happen?” Wall clock Date.now() , new Date() “How long did this take?” Monotonic clock performance.now() A wall clock follows civil time. It has an epoch and can be serialized as an ISO timestamp. A monotonic clock starts at an arbitrary origin and promises that later readings will not be lower than earlier readings. wall: 1000 ── 1001 ── 0998 ── 0999 clock correction monotonic: 40 ───── 41 ───── 42 ───── 43 On Linux, CLOCK_REALTIME is settable wall time . CLOCK_MONOTONIC cannot be set and does not make discontinuous jumps backward, although gradual frequency adjustment can affect its rate. Linux even has CLOCK_BOOTTIME for a monotonic counter that includes suspended time. Thre

You ask an LLM for JSON. You get this: json { "name": "test", "valid": True, "items": [1, 2, markdown Three problems in one response: markdown fences the LLM wasn't supposed to add, True instead of true (Python literal), and the response was cut off mid-array. JSON.parse() throws on all three. A linter tells you what's wrong. But you're left fixing it manually. I kept hitting this wall so often that I built a dedicated repair pipeline: AI JSONMedic . Why existing tools don't cut it JSONLint / JSONFormatter — great for valid-ish JSON with one missing comma. Not built for LLM failure modes: they flag errors but don't repair them. jsonrepair (npm) — solid library, handles many cases. AI JSONMedic actually uses it as a last-resort fallback. But it doesn't tell you what it changed, and doesn't handle all the LLM-specific cases we needed. The 14 failure modes we target Through building this, we catalogued how LLMs specifically break JSON: Markdown fences — ` json wrapping the output Trailing commas — [1, 2, 3,] (the model "runs out" of items but adds one more comma) Python literals — True , False , None instead of true , false , null Single quotes — {'key': 'value'} instead of double quotes Smart quotes — "key" (curly quotes from copy-paste) Unclosed brackets — truncated at max_tokens mid-array or mid-object Unclosed strings — "value without closing Concatenated objects — {"a":1}{"b":2} when streaming produces multiple chunks NDJSON — newline-delimited JSON that needs wrapping Python-style comments — # this is a comment inside JSON JavaScript-style comments — // inline or /* block */ Escaped backslashes — \\n instead of \n Duplicate keys — same key appearing twice (ambiguous — we warn, not silently pick) BOM / encoding issues — UTF-8 BOM at start of response What makes the repair pipeline different Each pass targets one failure mode. The order matters — strip fences first, then normalize quotes, then fix commas, then close truncated structures. Each change is tracked. The

So I built a Chrome extension that does one very stupid thing: it waits a random amount of time, then screams at you like a goat if you don't dismiss the notification fast enough. Simple idea. Should've been a simple build. It was not, because Manifest V3 said no. The plan was easy, in my head Here's what I thought I needed: chrome.alarms to fire at a random interval chrome.notifications to show a "you good?" popup If the user ignores it for 60 seconds, play a goat sound Step 3 is where things fell apart. Because in Manifest V3, your background script isn't a persistent background page anymore — it's a service worker. And service workers have the audio capabilities of a rock. No Audio() object. No Web Audio API. Nothing. You can't just do new Audio('goat.mp3').play() and call it a day, because there's no DOM for it to live in. I found this out the way everyone finds out things in MV3: by writing the obvious code, watching it silently fail, and then spending 20 minutes wondering if I'd misspelled "goat." Enter: the offscreen document Chrome's answer to "service workers can't do X" for a bunch of X's (audio playback included) is the offscreen document API . It's exactly what it sounds like — a hidden HTML page that exists purely so your extension has something with a DOM, so it can do DOM things. In my case, playing an mp3 of a goat losing its mind. The flow ends up looking like this: service worker (background.js) → creates an offscreen document if one doesn't exist → sends it a message: "play the sound" offscreen.html/offscreen.js → has an <audio> tag → actually plays the sound → closes itself when done It's a little bit like hiring a stunt double because the main actor (your service worker) isn't allowed near water. The offscreen document does the wet work, then goes home. Rough version of what that looks like in code: // background.js async function playGoatSound () { if ( ! ( await chrome . offscreen . hasDocument ())) { await chrome . offscreen . createDocument

Every time I needed to check whether my microphone actually worked before a call, or whether a key on a used keyboard was dead, I ended up on some sketchy "free online tester" that wanted an account, showed six ad banners, and — the worst part — happily streamed my webcam to a server I knew nothing about. So I built the thing I actually wanted: TestOnDevice — 118+ device tests that run 100% in the browser. No installs, no account, and nothing you record ever leaves your machine. Here's what I learned building it. The core constraint: the network is off-limits The single rule that shaped the whole project: no device data touches a server. No webcam frames, no audio buffers, no keystrokes, no sensor readings. That constraint turned out to be freeing rather than limiting, because modern browser APIs are genuinely powerful. Almost every "device test" is just a Web API plus a bit of rendering: What you're testing The API doing the work Microphone / speakers MediaDevices.getUserMedia , Web Audio ( AnalyserNode ) Webcam getUserMedia , <video> , MediaStreamTrack.getSettings() Keyboard keydown / keyup , KeyboardEvent.code Mouse / touch / stylus Pointer Events, PointerEvent.pressure Gamepads Gamepad API MIDI keyboards Web MIDI API Display ( dead pixels , refresh rate ) Fullscreen + requestAnimationFrame Motion / orientation DeviceOrientationEvent , DeviceMotionEvent A live mic meter, entirely local The microphone test is a good example of how little you need. Grab a stream, wire it into an AnalyserNode , and compute RMS on each frame for a level meter — no recording, no upload: const stream = await navigator . mediaDevices . getUserMedia ({ audio : true }); const ctx = new AudioContext (); const analyser = ctx . createAnalyser (); ctx . createMediaStreamSource ( stream ). connect ( analyser ); const data = new Uint8Array ( analyser . frequencyBinCount ); function tick () { analyser . getByteTimeDomainData ( data ); let sum = 0 ; for ( const v of data ) { const x = ( v - 128 )

The feature was supposed to be the easy one. NotebookLM generates flashcards. My extension reads them...

🚀 JavaScript Fundamentals (Week-03): Building a Strong Foundation "Before learning frameworks like React or backend technologies like Node.js, it's essential to build a strong understanding of JavaScript fundamentals. A solid foundation makes advanced concepts much easier to learn." Introduction During Week-03 of my Full Stack Development learning journey, I focused on understanding the fundamental concepts of JavaScript . Instead of only writing code, I wanted to understand how JavaScript works behind the scenes . In this week, I learned about variables, hoisting, different types of scope, execution context, call stack, closures, the this keyword, call() , apply() , bind() , module patterns, and clean coding principles like DRY and KISS . In this blog, I'll explain each concept in a simple and beginner-friendly way with examples. 📚 Topics Covered What is JavaScript? Variables ( var , let , const ) Hoisting Scope Global Scope Function Scope Block Scope Lexical Scope Scope Chain Execution Context Call Stack The this Keyword call() , apply() , and bind() Closures Module Pattern Common var vs let Bugs DRY Principle KISS Principle Conclusion 📌 What is JavaScript? JavaScript is a high-level, interpreted, single-threaded programming language used to build interactive and dynamic web applications. Initially, JavaScript was designed to run only in web browsers, but today it can also run on servers using Node.js . Some common uses of JavaScript include: Creating interactive web pages Form validation DOM manipulation API communication Web application development Backend development with Node.js Example console . log ( " Hello, JavaScript! " ); Output Hello , JavaScript ! 📦 Variables Variables are containers used to store data. JavaScript provides three ways to declare variables: var let const var Characteristics Function Scoped Can be redeclared Can be reassigned Hoisted var name = " Sai " ; var name = " Rahul " ; console . log ( name ); Output Rahul let Characteristics Block

Strings & Text Processing: Text Isn't as Simple as It Looks If someone asks you what's the simplest type of data in programming, there's a good chance you'll say strings . After all, they're just text. A person's name is a string. An email address is a string. A password is a string. Even the message you're reading right now is just a collection of strings. At first glance, there doesn't seem to be much to learn. You create a string, print it, compare it with another string, and move on. But after writing a few programs, things start getting... strange. You convert "hello" into uppercase, yet the original string somehow stays the same. An emoji that looks like a single character suddenly reports a length of 2 . Joining thousands of small strings together makes your program unexpectedly slower. And then someone introduces you to something called Regex , which looks less like code and more like an ancient spell. None of these are bugs. They're simply the result of how strings actually work behind the scenes. In this lesson, we'll uncover those hidden details one by one. Surprise #1: Why Didn't the String Change? Take a look at this code. const original = " hello " ; const shouted = original . toUpperCase (); console . log ( original ); console . log ( shouted ); What would you expect the output to be? Many beginners think the output will look like this: HELLO HELLO But that's not what happens. Instead, JavaScript prints: hello HELLO The original string remains exactly as it was. Why? Because strings are immutable . What Does "Immutable" Mean? The word immutable simply means: Once something is created, it cannot be changed. Think of a printed book. If you want every occurrence of the word hello to become HELLO , you don't magically change the ink that's already on the paper. Instead, you print a new copy with the updated text. Strings behave in a similar way. Whenever you use methods like: toUpperCase() toLowerCase() replace() concat() the original string stays untouch

Hey everyone! 👋 First of all, thank you so much for all the support, feedback, and feature suggestions since the Product Hunt launch. Every comment has been incredibly valuable, and I've already started implementing some of your ideas. Today I'm excited to share a new update to Rizzzler ! 🌙 ✨ What's New? 🎨 2 Brand-New Themes I've added two new themes , giving you even more ways to personalize your profile and match your own style. Whether you prefer something clean, vibrant, or expressive, there's now even more variety to choose from. 👀 Live Preview Panel One of the most requested improvements is finally here! You can now preview your showcase page while editing it . No more guessing how your profile will look after saving—see your changes in real time before publishing. 🎵 Audio Preview Choosing background music is now much easier. Instead of selecting tracks blindly, you can now preview audio directly before applying it to your profile. ✨ Profile Picture Decorations Want your profile to stand out even more? You can now add Profile Picture Decorations to give your avatar a unique look and make your showcase even more personal. More decoration styles will be added in future updates! ❤️ Thank You The feedback from the GitHub community and Product Hunt has been incredibly helpful. Many of these improvements came directly from community suggestions, and I'll continue building Rizzzler based on your ideas. If you have feature requests, bug reports, or suggestions, I'd love to hear them! 🔗 Try Rizzzler Website https://rizzzler.onrender.com Product Hunt https://www.producthunt.com/p/rizzzler-show-yourself-off GitHub https://github.com/DeveloperPuneet/Rizzzler-Stable Thank you for supporting Rizzzler! 🚀

Error handling has a quiet problem. You catch an error deep in a call stack, wrap it in something...

The openFDA enforcement API is free, keyless, and well documented on the surface. It is also full of failure modes that return HTTP 200 with quietly wrong data. Every number and error string below was measured against the live API on 2026-07-20; anything I could not reproduce has been cut. Pick the right endpoint first There are four recall-shaped endpoints and they are not interchangeable. Choosing wrong gives you a different universe of records with no warning. Endpoint Records What it is drug/enforcement.json 17,793 Recall Enterprise System (RES) drug recalls device/enforcement.json 39,519 RES device recalls food/enforcement.json 29,224 RES food recalls device/recall.json 58,756 CDRH device recall database, a different schema entirely The three enforcement endpoints share their schema. device/recall.json does not: its fields include cfres_id , product_res_number , k_numbers , root_cause_description , event_date_posted , event_date_terminated and recall_status , and it has no classification field at all ( count=classification.exact returns HTTP 404 "Nothing to count" ). If you are filtering for Class I, you want an enforcement endpoint. The two families also refresh on different clocks. On 2026-07-20 the three enforcement endpoints reported meta.last_updated of 2026-07-08, while device/recall.json reported 2026-07-17. The OR bug that silently returns the wrong answer This is the single most expensive trap, and it is undocumented. An unparenthesized OR discards every clause except the last one. All figures below are from food/enforcement.json . search=classification:"Class I" OR state:"CA" returns 4,003 - exactly the count for state:"CA" alone. Reverse the operands and you get 12,809 - exactly classification:"Class I" alone. Wrap it: search=(classification:"Class+I"+OR+state:"CA") returns 14,822 in both orders. That is the real union (12,809 + 4,003 - 1,990 overlap, and the AND of the two clauses does return 1,990). No error is raised in any case. The nastier varia

Every time you run a JavaScript program, a lot happens behind the scenes. Variables are allocated memory, execution contexts are created, functions are pushed onto the call stack, and the engine starts executing your code. But before we dive into all of that, let's first understand what JavaScript actually is and why it was created. An Introduction to JavaScript What is JavaScript? JavaScript is a programming language that was originally created in 1995 by Brendan Eich in just 10 days while he was working at Netscape. JavaScript is a high-level programming language primarily used to make web pages interactive. Today, it is also used to build servers, mobile applications, desktop software, and much more. Why was JavaScript created? JavaScript was created to make web pages alive . But what does "alive" mean? it means adding interactivity (e.g., animations, clickable buttons, popup menus, etc.) to the static web pages. Today, JavaScript isn't limited to browsers. With runtimes like Node.js, it can also be used to build backend applications and APIs, which allow you to add more functionality to a website. Did you know? When JavaScript was created, it initially had another name: “LiveScript”. Where can JavaScript be used? In your browser — every interactive website uses it (Facebook, YouTube, Gmail). On servers — through Node.js, you can build backend APIs. In mobile apps — using frameworks like React Native. In desktop apps — VS Code itself is built using JavaScript (Electron). In smart devices, games, robots, and much more. Now that we know what JavaScript is, another question comes to mind: How does JavaScript execute my code? Before answering that, let's first understand Who executes my code? . The answer is: The JavaScript Engine The JavaScript Engine We already know what JavaScript is, but what exactly is this engine ? The "Engine" A JavaScript engine is a piece of software responsible for executing JavaScript code. Every environment that runs JavaScript, whether i

GitHub热门项目 | Voice-to-text dictation app with local (Nvidia Parakeet/Whisper) and cloud models (BYOK). Privacy-first and available cross-platform. | Stars: 4,671 | 190 stars this week | 语言: JavaScript

GitHub热门项目 | 猫抓 浏览器资源嗅探扩展 / cat-catch Browser Resource Sniffing Extension | Stars: 20,754 | 214 stars this week | 语言: JavaScript

GitHub热门项目 | MCP server for interfacing with Godot game engine. Provides tools for launching the editor, running projects, and capturing debug output. | Stars: 4,810 | 25 stars today | 语言: JavaScript

GitHub热门项目 | 一个人人都能部署的基于 js 的弹幕 API 服务器，支持爱优腾芒哔咪人韩巴狐乐西埋帆弹幕直接获取，兼容弹弹play的搜索、详情查询和弹幕获取接口规范，并提供日志记录，支持vercel/netlify/edgeone/cloudflare/docker/hf等部署方式，不用提前下载弹幕，没有nas或小鸡也能一键部署。 | Stars: 2,789 | 13 stars today | 语言: JavaScript

GitHub热门项目 | A cross-platform, customizable science fiction terminal emulator with advanced monitoring & touchscreen support. | Stars: 44,986 | 8 stars today | 语言: JavaScript

Introduction A callback function is one of the most important concepts in JavaScript. It allows one function to execute another function after completing a task. Callback functions are widely used in JavaScript for handling asynchronous operations such as API requests, file reading, event handling, and timers. What is a Callback Function? A callback function is a function that is passed as an argument to another function and is executed later. In simple words: A callback is a function that is called after another function finishes its work. Syntax function greeting () { console . log ( " Good Morning! " ); } function welcome ( callback ) { console . log ( " Welcome! " ); callback (); } welcome ( greeting ); Output Welcome! Good Morning! Explanation greeting() is the callback function. welcome() accepts a function as a parameter. callback() executes the greeting function after printing "Welcome!". Real-Life Example Imagine you order food at a restaurant. You place the order. The chef prepares the food. After the food is ready, the waiter serves it. Here, serving the food happens only after preparation is complete. This is exactly how callback functions work. Example 1: Email Sending function emailSent () { console . log ( " Email Sent Successfully! " ); } function sendEmail ( callback ) { console . log ( " Sending Email... " ); callback (); } sendEmail ( emailSent ); Output Sending Email... Email Sent Successfully! Example 2: Download File function downloadComplete () { console . log ( " Download Complete! " ); } function downloadFile ( callback ) { console . log ( " Downloading File... " ); callback (); } downloadFile ( downloadComplete ); Output Downloading File... Download Complete! Why Do We Use Callback Functions? Callback functions are useful because they: Execute code only after another task finishes. Improve code reusability. Handle asynchronous operations. Make event handling easier. Help avoid repeating code. Where Are Callback Functions Used? Some common u

I've just published a small npm package called @modyra/core that came out of a very specific pain: handling "slightly complex" app state in frontend projects without ending up with a mess of context, custom hooks and scattered stores. The focus of the package is: Minimal API, all in TypeScript, no hidden magic No heavy runtime: just tools to model the core of your app as a set of state modules Designed to plug into React/Angular/vanilla JS without forcing you to rewrite everything The idea is to treat your app's domain as a set of "core units" with clear responsibilities: each unit exposes state, actions and rules, and the rest of the app simply consumes them. It came out of a few projects where Redux/Zustand/signals etc. were fine, but started to feel either too verbose or not very close to the actual business domain. If you feel like taking a look and tearing it apart, feedback (including harsh ones) is very welcome: naming, API design, examples - everything is still fresh enough to change. And if you think the approach is worth exploring, a star on GitHub would really help me keep pushing the project forward.

For a long time I ran product extraction off a database of custom selector configs. Hundreds of retailers, each with its own set of CSS selectors mapped field by field: price here, title there, image over there. It worked. It was also a treadmill. Every retailer that redesigned its frontend silently broke its config, and the maintenance tax grew with every retailer I added. Hundreds of configs is hundreds of things that can rot without telling you, usually right before someone downstream asks why a brand's prices went null. At some point I stopped feeding it. The scraping platform I ran at my last engagement fed a 20M+ product catalogue at millions of pages a day, and the thing that made that survivable wasn't better per-site config. It was leaning on almost no per-site config at all. The pattern Instead of one careful parser per site, run several cheap generic extractors on every page, in parallel: JSON-LD. A huge share of e-commerce pages ship a schema.org/Product block because Google rewards it. It has name, price, currency, availability, images. It's the closest thing to a public API hiding in the HTML. OpenGraph tags. og:title , og:image , product:price:amount . Lower quality than JSON-LD, but present on sites too lazy for structured data, because everyone wants pretty link previews. Microdata / RDFa. Older sites, still surprisingly common outside the US. Embedded state. __NEXT_DATA__ , window.__INITIAL_STATE__ and friends. A JSON blob the site's own frontend hydrates from. Heuristics. A price-shaped string near a currency symbol inside the main content region. The largest above-the-fold image. The h1 . Dumb, and dumb works more often than you'd think. None of these is reliable alone. OG price tags go stale, JSON-LD sometimes describes the wrong variant, heuristics grab the crossed-out "was" price. The trick is you don't pick an extractor. You pick per field, and you let agreement between sources carry the decision. Confidence merge Each extractor emits candida

Installation traceless-style is published to npm. It has no required dependencies at runtime and one optional dependency ( @swc/core ) that the SWC-backed extractor uses for large codebases. 1. Install the package npm install traceless-style # or pnpm add traceless-style # or yarn add traceless-style The package ships pre-built. There is no postinstall step. Peer dependency Required? What for react ≥ 18 Optional Only needed for the React components in traceless-style/dark and traceless-style/rtl ( <TracelessRoot /> , <ThemeToggle /> , <RtlToggle /> ). next ≥ 14 Optional Only needed if you use traceless-style/nextjs . webpack ≥ 5 Optional Only needed if you wire up the raw webpack plugin. vite Optional Only needed for traceless-style/vite . @swc/core Optional Auto-loaded for projects ≥ 100 source files. Falls back to the legacy parser if installation failed. 2. Pick an integration You're using… Install one of Next.js (App Router or Pages) traceless-style/nextjs Webpack directly (CRA-style or Rspack) traceless-style/webpack Vite traceless-style/vite Rollup traceless-style/rollup esbuild traceless-style/esbuild Just Node + a build script The CLI: npx traceless-style Each integration page contains a copy-paste config snippet. 3. Run init (recommended) npx traceless-style init This zero-config scaffolder: Detects your framework (Next, Vite, Remix, Astro). Adds the bundler plugin to your config file. Adds <TracelessRoot /> to your root layout (anti-flash dark + RTL script). Creates traceless-style.config.js if missing. Adds dev / build scripts to package.json if missing. Suggests installing the VS Code extension via .vscode/extensions.json . The scaffolder is idempotent — re-running it will not duplicate edits. 4. Verify the install Create a tiny component: // app/test-install.tsx import { tl } from " traceless-style " ; const $ = tl . create ({ hello : { color : " tomato " , padding : " 1rem " , fontSize : " 1.25rem " }, }); export default function Test () { return < div