标签：#javascript

zxcvbn is the most widely used password strength estimator with 1M npm downloads a week. It's also 389KB gzipped and hasn't shipped a commit since 2017. Most sign-up forms are hauling that around just to block password123 . Poor password UX is a real conversion problem. A strength meter that adds 389KB to your bundle delays page load — on mobile, measurably so. Users who hit a slow registration page don't wait. They leave. The irony is that most of that weight goes toward catching passwords nobody is actually using to register on your site. So I built passcore - 3.0KB gzipped and 98.4% detection rate on real breach data - same as zxcvbn, benchmarked against a deduped list of passwords pulled live from RockYou, Adobe, HIBP, and other major leak lists. zxcvbn takes ~9.7ms to load — it's parsing 389KB of dictionary into memory on every cold start. passcore loads in ~0.2ms. It evaluates a password in ~2,600 nanoseconds. For a registration form, it's effectively invisible — no jank, no layout shift, no contribution to your Core Web Vitals score. The strength meter shows up before the user finishes typing their first character. How it works: passcore runs five detection layers on every password: Dictionary - All entries sourced directly from breach data, not a generic word list Keyboard patterns - qwerty , asdf , 1234 , numpad walks Repeats - aaaa , ababab Sequences - abcdef , 123456 L33t speak - decodes p@ssw0rd → password , m0nk3y → monkey , then dictionary lookup The dictionary is small by design. Every entry was chosen because it appears in real breach data - not because it's a common English word. Password1! is caught not by a 40k word list but by stripping the suffix and checking if the core word is in the breach list. It is. The scoring model: passcore returns a score from 0 to 4 - same scale as zxcvbn. The detection layers run first. A dictionary match, keyboard pattern, repeat, sequence, or l33t substitution scores 0 or 1 immediately - no further calculation. If

I automated my Gumroad product screenshots with Playwright I recently started packaging a few small frontend projects as digital products, and one surprisingly annoying part was preparing product screenshots. Manual screenshots quickly became messy: different browser sizes inconsistent cropping blurry images mobile screenshots were easy to get wrong Gumroad needed a square thumbnail every update meant taking screenshots again So I built a small local screenshot workflow with Next.js and Playwright. The workflow captures: desktop screenshots mobile screenshots square thumbnail images consistent PNG outputs route status checks basic console error reporting basic horizontal overflow checks The basic command flow is: npm run build npm run start npm run screenshots The script reads a simple config file, opens the configured local routes, captures each screenshot with consistent viewport settings, and exports the images into a predictable folder. For example: screenshots/gumroad/ landing.png dashboard.png template-preview.png mobile-preview.png thumbnail.png I found this especially useful when preparing Gumroad product galleries, because I could regenerate all product images after every UI change instead of taking screenshots manually. This is not a hosted screenshot service. It is just a local source-code workflow for people who want to generate product screenshots from their own Next.js pages. I packaged the workflow as a small Gumroad product here: https://remix410.gumroad.com/l/screenshot-automation-kit Curious how other developers handle product screenshots. Do you take them manually, use Playwright/Puppeteer, or use a design tool workflow?

TLDR TypeScript has 7 primitive types: string , number , boolean , null , undefined , bigint , and symbol . You use them to tell TypeScript what kind of value a variable holds. You write them in lowercase. TypeScript can often figure out the type for you. But knowing how each one works is key to writing safe and clear code. What Are Primitive Types? Primitive types are the simplest building blocks in TypeScript. Every piece of data in your program starts with one. They hold a single value. They are not objects. You cannot add methods or properties to them directly. TypeScript has 7 primitive types in total: Type What It Holds string Text like names, messages, or IDs number Any number: integers, decimals, negatives boolean Only true or false null An intentional empty value undefined A value that was never assigned bigint Very large whole numbers symbol A unique identifier value This article covers all 7. You will use string , number , and boolean the most in everyday TypeScript code. How to Use the string Type A string holds text. Use it for names, messages, emails, URLs, and any other text data. Basic string annotation let firstName : string = " Alice " ; let greeting : string = " Hello, world! " ; let empty : string = "" ; Three ways to write strings TypeScript supports the same three string styles as JavaScript: let single : string = ' Single quotes work fine ' ; let double : string = " Double quotes work too " ; let template : string = `Template literals with ${ firstName } ` ; Template literals (backticks) let you insert values inside a string with ${} . TypeScript checks the types of those inserted values too. let age : number = 30 ; let message : string = `I am ${ age } years old` ; // TypeScript checks that 'age' is compatible here What TypeScript catches with strings let name : string = " Alice " ; name = 42 ; // Error: Type 'number' is not assignable to type 'string'. name = true ; // Error: Type 'boolean' is not assignable to type 'string'. Once a variable

By the end of this article you'll have a small Node.js script that pipes a module-resolution error ( ERR_REQUIRE_ESM , ERR_MODULE_NOT_FOUND , Cannot use import statement outside a module ) plus the surrounding config into Claude and gets back a specific fix — not a Stack Overflow lecture. You'll also have four hardened prompts you can paste straight into claude.ai, and a script that auto-detects whether your project is CJS or ESM before you even ask. Everything below runs on Node 18+. Why "just use ESM" doesn't fix the CommonJS/ESM ERR_REQUIRE_ESM error The reason these errors waste so much time is that the failing line is almost never where the problem lives. You see this: Error [ERR_REQUIRE_ESM]: require() of ES Module /app/node_modules/node-fetch/src/index.js from /app/server.js not supported. and your instinct is to edit server.js . But the actual decision is made by four things you can't see from the traceback: the "type" field in your package.json , the "type" (or "exports" map) in the dependency's package.json , your file extension ( .js vs .mjs vs .cjs ), and — if you use TypeScript — the module and moduleResolution fields in tsconfig.json . node-fetch v3 went ESM-only; that's why require('node-fetch') blows up while v2 was fine. The traceback tells you none of that. This is exactly the shape of problem an LLM is good at: lots of small context scattered across files, one correct answer, and a human who keeps pattern-matching on the wrong line. The trick is to feed Claude the config alongside the error, not the error alone. A prompt that only gets the stack trace will confidently tell you to "convert your project to ESM," which is often the most destructive possible fix. Prompt 1 for Claude: force a root-cause classification before any code The failure mode of asking an AI to "fix my module error" is that it jumps to a rewrite. The fix is to make it classify first. Paste this into claude.ai, filling the three blocks: You are debugging a Node.js module resolut

Every hand-tracking demo shows you 21 dots. The interesting part is what nobody shows: turning dots into numbers someone can act on. Dots are a capability, not a product Run any modern hand-tracking model and you get 21 beautifully stable landmarks per hand at 30 FPS. Impressive — and by itself, worthless. No client has ever paid for dots. They pay for measurements : is this clearance compliant, is this part aligned, did this patient's range of motion improve. I learned this on utility infrastructure work, where the deliverable was never "we detected the wire" — it was the attachment height of that wire, and whether it violates clearance rules . Keypoints were step one of three. The demo: live metrics, not just a skeleton My portfolio's keypoint demo derives three measurements per hand, every frame: const wrist = lm [ 0 ]; const palm = distance ( wrist , lm [ 9 ]); // scale reference const pinch = distance ( lm [ 4 ], lm [ 8 ]) / palm ; // thumb tip ↔ index tip The crucial line is the scale reference . Pixel distances are meaningless — they change as you move toward the camera. Dividing by palm length (wrist to middle knuckle) gives a relative measurement that's stable under distance, and multiplying by the average adult palm length (~8.5 cm) converts it into an approximate real-world gap — the demo shows "≈ 3.2 cm" floating on the pinch line. In infrastructure work the same role is played by a known object dimension — a standard crossarm, a pole class height. Every measurement-from-pixels system needs its ruler. Finger counting is a geometric test (is each fingertip farther from the wrist than its middle joint?), and "hand openness" averages fingertip extension — three lines of geometry each, but they convert a model output into a readout a human understands instantly. Honest layering The landmarks come from MediaPipe's pretrained pipeline (palm detector → landmark regressor → gesture classifier, float16, WASM + GPU delegate) — Google's models, credited on the page

Training a network from scratch in raw NumPy, quantizing it to int8, and running it as ~80 lines of dependency-free JavaScript — with a parity test proving the browser matches Python to 1e-6. Why bother? MNIST is a solved problem Digit recognition is the "hello world" of ML — that's exactly why I used it. The model isn't the point. The point is everything around the model, which happens to be the part that matters in production work too: training without a framework, compressing for deployment, running inference in a constrained environment, and proving the deployed system matches the trained one. Training: just NumPy and math The network is a 784→128→64→10 MLP — hand-written forward pass, backpropagation, and Adam optimizer. No autograd, no framework: # backward pass, by hand dz3 = ( probs - y_batch ) / batch_size grads_w [ 2 ] = a2 . T @ dz3 da2 = dz3 @ weights [ 2 ]. T dz2 = da2 * ( z2 > 0 ) # ReLU mask grads_w [ 1 ] = a1 . T @ dz2 ... One trick that matters for a drawing demo specifically: shift augmentation . MNIST digits are centered; humans draw wherever they like. Training on randomly translated copies makes the model tolerant of sloppy placement. Combined with MNIST-style preprocessing at inference (crop to bounding box, scale into a 20×20 box, center by center-of-mass), real-world doodles classify reliably. Final test accuracy: 98.2% . Compression: int8 in 15 lines A float32 weight file would be ~430 KB. Symmetric int8 quantization cuts it ~4×: scale = np . abs ( w ). max () / 127.0 q = np . clip ( np . round ( w / scale ), - 127 , 127 ). astype ( np . int8 ) One scale factor per layer, weights stored as base64 in JSON: 145 KB total , and quantized test accuracy is identical to float — 98.2%. Inference: ~80 lines of plain JavaScript In the browser, the weights are dequantized once on load, and inference is three matrix-vector products with ReLU and a softmax. ~109K multiply-adds — about a microsecond-scale problem for any modern device. No TensorFlow.js (t

Camouflage has always been graded by human eyes. But the thing hunting for you in 2026 is increasingly a detection model — so test against that. The premise Surveillance is automated now: drones, trail cameras, perimeter systems — most of what "sees" runs an object-detection network. Which makes traditional camouflage evaluation (a person squinting at a photo) the wrong test. The right test is adversarial: run the actual detector against your concealment and measure what it finds. That's the whole demo: upload a photo, and an object-detection model hunts for people in it — at four simulated distances — producing a detection-range profile and a stealth score. Simulating distance with pixels You can't move the camera after the photo is taken, but you can simulate the dominant factor in long-range detection: pixels on target . A person at 50 m simply occupies far fewer pixels than at 5 m. So each analysis run downscales the image progressively and re-runs detection: const DISTANCE_LEVELS = [ { label : ' Close (~5m) ' , scale : 1 }, { label : ' Mid (~15m) ' , scale : 0.45 }, { label : ' Far (~30m) ' , scale : 0.22 }, { label : ' Very far (~50m) ' , scale : 0.12 }, ]; for ( const level of DISTANCE_LEVELS ) { const scaled = drawScaled ( image , level . scale ); const detections = await model . detect ( scaled , 10 , 0.15 ); // best 'person' confidence at this simulated range } The output reads like a range card: detected at 5 m with 96% confidence, 41% at 15 m, invisible beyond 30 m. A stealth score aggregates it: how poorly did the adversary see you, averaged across ranges? Honest about the model The detector is COCO-SSD (a pretrained MobileNet-based model from the TensorFlow.js team) running entirely on-device — I didn't train it, and the demo says so on the page. The contribution here is the evaluation framework : using detectors as adversaries, simulating range, and turning subjective "good camo" into a measurable profile. The full version of this concept goes further

A 1990s Nobel-adjacent therapy, a webcam, and 21 hand keypoints — recreating the mirror-box illusion for phantom limb pain, no hardware required. A therapy built on an illusion In the 1990s, neuroscientist V.S. Ramachandran discovered something remarkable: amputees suffering phantom limb pain often felt relief just by seeing their missing limb move again. His apparatus was almost comically simple — a box with a mirror. Put your intact hand in, look at its reflection where the missing hand would be, and move. The brain, watching the "missing" hand obey commands again, often dials the pain down. The limitation was never the science. It was the box: a physical apparatus, used in clinics, hard to scale, impossible to measure. Replacing glass with keypoints A webcam plus real-time hand tracking can produce the same illusion with better properties: webcam frame → hand landmark model (21 keypoints, on-device) → reflect: phantom[i] = { x: 1 − x, y, z } → render real hand (solid) + phantom twin (ghost) on canvas The reflection is one line of math. Everything around it is what makes the illusion land: const phantom = real . map ( p => ({ x : 1 - p . x , y : p . y , z : p . z })); The visual treatment matters more than I expected. The phantom hand is rendered as a ghostly cyan skeleton with a translucent palm fill, a "breathing" glow that pulses on a ~3 second cycle, and a fading afterimage trail of its last few frames — it reads as present but ethereal , which is exactly the perceptual story mirror therapy needs to tell. A dashed mirror plane down the center of the frame makes the reflection relationship legible at a glance. The engineering details that matter Tracking : MediaPipe HandLandmarker (Google's pretrained model — credit where due), running via WebAssembly with GPU delegate. ~30 FPS on a laptop. Privacy by architecture : every frame is processed on-device. For a medical-adjacent application, "video never leaves your browser" isn't a feature, it's a requirement. Lazy

Originally published on clintech.me If you've integrated Google Maps into a React app and seen Autocomplete randomly stop working, Directions silently fail, or the API throw google is not defined on second render — you've hit the duplicate loading bug. Here's exactly what caused it in my case and how I fixed it. The setup that broke things While building delivery address flows at POLOM — a production e-commerce platform — I integrated Google Places Autocomplete across 20+ screens. I had the Maps JavaScript API loading in two places: A provider.tsx for global script loading across the app A useLoadGoogleMaps hook inside a shared component This caused race conditions. The Autocomplete and Directions APIs were initialising before the script fully resolved in some renders, silently failing in others. The failure wasn't consistent, which made it harder to catch. The fix Step 1 — Remove the global load Delete the script tag or next/script call in provider.tsx . There should be exactly one place the Maps API loads. Step 2 — Centralise in a hook Move all loading logic into a single useLoadGoogleMaps hook using dynamic loading. If you're on Next.js, next/script with strategy="afterInteractive" inside the hook is the right approach. Step 3 — Guard before initialising if ( ! window . google ?. maps ) return ; Check that the API is fully available before attempting to attach Autocomplete or Directions . Don't assume the script load event means every namespace is ready. Step 4 — Scope your ref correctly Bind the autocomplete instance to inputRef.current explicitly. If the component remounts, re-initialise the binding — don't assume the previous instance is still attached. The result One load, one source of truth, no race conditions. Autocomplete and Directions worked consistently across all 20+ screens without reinitialising on every render. Security — the step most developers skip Restrict your API key at the Google Cloud Console level: HTTP referrers: whitelist your domain onl

As developers, we often lose hours to repetitive tasks - formatting data, debugging auth tokens, or wrestling with encoding issues. The right set of utility tools can cut that overhead significantly. Here is a curated breakdown of the categories and tools worth keeping in your daily workflow in 2026. JSON and Data Formatting Tools Working with raw, minified API responses is a real productivity killer. A browser-based JSON formatter with real-time validation and proper indentation helps you parse and debug responses in seconds - without sending your data to third-party servers. Similarly, XML is far from dead; SOAP APIs and enterprise integrations still rely on it, so a solid XML formatter with XPath support is worth having around. On the frontend, a CSS minifier that handles dead code removal and selector optimization can meaningfully reduce your page load times. Data Conversion Utilities Modern stacks often have to bridge the gap between formats. A JSON-to-XML converter is critical when integrating with legacy systems, but look for one that handles arrays and special characters correctly. CSV-to-JSON converters help structure flat export data from spreadsheets or databases into something your application can consume. And if your deployment pipeline involves YAML config files, a formatter that catches indentation errors before they break your CI/CD run is essential. Encoding and Security Helpers Base64 encoding comes up constantly - from embedding images in CSS to building HTTP Basic Auth headers. A reliable encoder/decoder handles all these cases without fuss. URL encoding matters too; unencoded special characters in query strings cause subtle API bugs that are surprisingly hard to track down. For authentication debugging, a JWT decoder lets you inspect token payloads without needing to verify the signature - ideal for local development and troubleshooting. Code Generation and Color Utilities Distributed systems need collision-resistant unique IDs - a UUID generato

I'm a 17-year-old IT student from Luxembourg. A few months ago I got tired of spending 2-3 hours a day manually browsing Upwork, Malt, and Freelancer looking for projects. So I built an automation system that does it for me — 24/7, on a Raspberry Pi 3. Here's what it does, how I built it, and every painful lesson I learned along the way. What the system does Scans Upwork, Malt, and Freelancer every 30 minutes Scores each job 0–100 with AI based on my profile Generates proposals in English, French, and German Sends the best jobs to Telegram with inline A/B buttons Tracks which proposal style gets more replies Sends daily stats and weekly market trend reports Reminds me to follow up after 3 days The stack n8n — self-hosted workflow automation (Docker on Raspberry Pi 3) Groq API (Llama 3.1-8b-instant) — AI scoring and proposal generation Supabase — PostgreSQL database for jobs, proposals, clients SerpAPI — searching job boards via Google Apify — scraping Upwork listings Telegram Bot API — alerts and bot commands Cloudflare Tunnel — HTTPS for webhooks Total running cost: ~$5/month. 7 workflows 01 - Job Discovery — runs every 30 minutes, searches 10+ sources, deduplicates via Supabase unique constraint on URL 02 - Proposal Generator — AI scores the job, generates two proposal variants (formal vs hook-first), sends to Telegram with A/B buttons 03 - Follow-up Reminders — checks Supabase every 3 days for unanswered proposals 04 - CRM via Telegram — full client management through bot commands (/jobs, /stats, /clients) 05 - Market Intelligence — daily report: how many jobs found, average score, top platforms 06 - Trend Analysis — weekly report on what skills are trending in automation 07 - Lead Generation — finds companies actively using Zapier or Make who might want to switch to n8n Lessons learned (the hard way) 1. Cyrillic text breaks JSON body nodes silently If you have Cyrillic characters in a JSON body field with newlines, n8n throws a "Bad control character" error. Kee

I got tired of paying for form services or spinning up a backend just to handle contact form submissions. So I built RG Forms — a contact form endpoint backed entirely by a Google Sheet you own. No server, no monthly fee, no third-party storing your data. The idea Most form tools store your submissions on their servers. You pay monthly, you depend on their uptime, and your data lives in their database. RG Forms does the opposite: every submission goes straight into a Google Sheet in your own Google Drive, sent by an Apps Script that you own and control. RG Forms provisions that sheet and script for you in about 90 seconds. After that, your endpoint runs forever at no cost — completely independent of any RG Forms server. Built for static sites If you host on GitHub Pages, Netlify, Vercel, Cloudflare Pages, or just plain HTML on a CDN, you've hit this wall: there's no backend to receive a form POST. The usual workarounds are a paid form service, a serverless function you have to write and maintain, or standing up a whole backend just for a contact form. RG Forms is built exactly for this. Your endpoint is a plain HTTPS URL you POST to straight from client-side JavaScript — no build step, no serverless function, no server of any kind. Drop the fetch call into your page and you're done. It pairs naturally with any static-site generator (Hugo, Jekyll, Astro, Eleventy, Next export) and any no-code builder that lets you add a snippet of JS. Your static site stays static; the form just works. How it's built RG Forms is a fully static web app. There's no RG Forms server, no database, no backend. Every API call during setup goes directly from your browser to Google using your own OAuth token. Setup (one time, in your browser): Your Browser ├─── Google OAuth ──▶ Short-lived token (memory only) ├─── Google Drive API ──▶ Creates Sheet + Drive folder └─── Apps Script API ──▶ Creates & deploys form handler Live endpoint (after provisioning): Your Website / App └─── POST to script

In my last post I complained — a lot — about product managers and how they made my life hell with vibe code. PS: apologies, manager, if you're reading this — but it's true. Now, I'm not here just to complain. There were a lot of learning opportunities too, like how to handle legacy / vibe code. Because at the end of the day, both are the same: no one knows how they work, but somehow they keep working. Touching them is like defusing a bomb — you never know how your change might cascade and break the core logic. The good news is that vibe code is much simpler than legacy. AI, in all its glory, tries to write perfect-looking code — proper function names, comments, the works — not like legacy code where a single function runs 500 lines, with spaghetti names all over that make no sense and comments that are out of date. And that makes it something I can actually handle. I still don't have a perfect, step-by-step playbook — but I've got pieces. The first one. The cheapest and the oldest one. The one the industry solved decades ago and the whole "AI built my app in a day" crowd somehow forgot exists. A linter. Yes, you heard me right. A linter. ESLint. Most people who've been in this industry already know it. It's the most boring, reliable tool in the box. But in an era where the answer to every problem is "add another AI," it's worth saying out loud why the boring tool still wins. What a linter actually is If you vibe-coded your way into this world, or you're new to web dev in general and have never heard the word "lint", here's the honest version. A linter is a set of rules you add to your repo. It reads your code without running it, checks it against those rules, and flags everything that's broken, sloppy, or about to bite you in production. The detail people get wrong: it's not a grep for bad words. A real linter parses your code into a syntax tree and actually reasons about its structure — what's imported, what's called, what's reachable, what types flow where. That's

GitHub热门项目 | Concise, consistent, and legible badges in SVG and raster format | Stars: 26,767 | 55 stars this week | 语言: JavaScript

GitHub热门项目 | Stop renting your intelligence. Own it with AnythingLLM. Everything you need for a powerful local-first agent experience | Stars: 61,365 | 71 stars today | 语言: JavaScript

Building a "paste a YouTube link, get a transcript" feature sounds trivial until you deploy it to a server. The moment your request comes from a datacenter IP instead of a residential one, YouTube responds with LOGIN_REQUIRED or quietly serves nothing. Here's how VidTranscriber handles it. The problem There are two ways to get text from a YouTube video: Existing captions — if the uploader (or YouTube's auto-caption) provides them, you can fetch the caption track directly. Fast, free, no transcription needed. Transcribe the audio — pull the audio stream and run it through a speech-to-text model (Whisper-family). Works for any video, but costs compute. Both start with talking to YouTube from your server — and that's where it breaks. YouTube aggressively gates datacenter traffic: the watch page and InnerTube API return LOGIN_REQUIRED , and naive audio fetching gets reCAPTCHA'd. The approach The fix is to separate where the request originates from where the work happens : A Cloudflare Worker handles the user request and orchestration. Caption/audio fetching is routed through a path whose egress isn't treated as a bot — so the LOGIN_REQUIRED wall doesn't trigger. Captions, when available, become the primary path (no transcription cost). Only when there are no usable captions do we fall back to downloading audio and running Whisper. Long jobs go onto a queue (Cloudflare Queues) so the request returns immediately and the transcript streams in as it completes. Why captions-first matters Most "transcript generator" traffic is for videos that already have captions — talks, tutorials, news. Serving those from the caption track is instant and free, which means the expensive Whisper path is reserved for the minority of videos that actually need it. That's the difference between a tool that's cheap to run and one that isn't. What's still hard IP reputation drifts — what works today can get throttled tomorrow, so the extraction path needs monitoring and fallbacks. Caption quality

I have watched founders lose sales calls they should have won. Not because they lacked skill. Not because the offer was wrong. Because they walked in to prove they were smart — instead of finding out whether the pain was real. Sales Is Diagnosis Plus Decision The call is not there for you to pitch. The call is there to find out: Is the pain real? Does the buyer have urgency? Does the budget exist? Can a fixed-scope sprint create a clear win? That is it. Four questions. Everything else follows from those. Sales is not pressure. Sales is diagnosis plus decision. 1️⃣ The Call Structure That Works Frame the call in the first 60 seconds: "I'll understand the current state, ask what is costing you, then tell you whether a sprint makes sense. If it doesn't, I'll say so." That sentence does 3 things: Sets expectations — no pressure, no hard close Signals competence — you have done this before Removes the buyer's guard — they can be honest about what is broken Then run this flow: 1️⃣ Current state — what exists now? 2️⃣ Pain — what is broken or slow? 3️⃣ Cost — what does it cost in time, money, trust, or delay? 4️⃣ Urgency — why now? 5️⃣ Decision — who approves? 6️⃣ Success — what would make this worth paying for? 7️⃣ Close — recommend the sprint or walk away 2️⃣ The Questions That Reveal Money These are the 6 questions I use to find whether a sprint is worth recommending: "What happens if this stays broken for another 30 days?" — reveals urgency and cost "What have you already tried?" — reveals how serious they are "Where does the current process lose leads, users, time, or trust?" — reveals the money leak "Who feels this pain most inside the business?" — reveals whether the buyer is also the decision-maker "What would make this an obvious win?" — reveals success criteria before you price "If we fixed only one thing first, what would matter most?" — reveals scope Listen for the answer with the money in it. That is the thing you fix. That is what you price. That is the sprin

The conversation I keep having with AI founders goes like this: "I've sent 50 DMs. No one is biting." Then I look at the offer. "I build AI automations for businesses." There is the problem. Bad, Better, Best — The Offer Anatomy Breakdown Most technical people sell their skill. Buyers do not buy skill. They buy a removed headache. Let me break down the bad/better/best framework I use for every offer I build: Bad: I build AI automations for businesses. Better: I help service businesses automate lead follow-up so no enquiry gets ignored. Best: I install a 7-day lead recovery system that captures, qualifies, follows up, and tracks every new enquiry — so missed leads stop disappearing into WhatsApp, email, and memory. The best version does 4 things in one sentence: Names the buyer — service businesses Names the painful outcome — missed leads disappearing Names the mechanism — a 7-day lead recovery system Names the specific result — follows up, tracks, captures That is not wordsmithing. That is the difference between getting ignored and starting a conversation. 1️⃣ The Eight-Part Offer Anatomy Every offer worth selling should answer all 8 of these: Part What It Does Buyer Who exactly has this pain? Pain What expensive thing is broken? Outcome What changes after the sprint? Mechanism What system creates the outcome? Timeline How quickly does the buyer see progress? Deliverables What exactly is included? Proof Why should the buyer believe it? CTA What is the next small step? If any row in that table is blank for your current offer — you are leaving money in the explanation gap. 2️⃣ The Offers That Actually Sell Here is what the strongest AI service offers look like right now. Not vague consulting. Fixed-scope sprints with outcomes. "I turn your AI-built app from fragile demo into launch-ready product" — auth, payments, logging, analytics, deployment, launch-readiness report — in 7–14 days. Price: $2,500–$7,500. "I build your founder-led GTM system" — content engine, lead c

TLDR tsc is the TypeScript compiler. It turns your .ts files into .js files that Node.js and browsers can run. Install it with npm install -g typescript . Run tsc to compile your whole project. Run tsc --watch to auto-compile on every file save. Run tsc --noEmit to check for errors without creating any files. What is the TypeScript Compiler? The TypeScript compiler is a tool called tsc . It reads your TypeScript files and turns them into JavaScript files. Your browser and Node.js cannot run TypeScript directly. They only understand JavaScript. So tsc acts as the bridge between what you write and what actually runs. Think of tsc like a spell checker for your code. It finds problems before your code ever runs. Then it produces clean JavaScript output for you. How to Install the TypeScript Compiler You install tsc using npm. There are two ways to do this. Option 1: Global Install (runs anywhere on your computer) npm install -g typescript After install, check it works: tsc --version You will see something like Version 6.0.3 . Option 2: Local Install (recommended for teams) npm install --save-dev typescript Then run it using npx : npx tsc --version Which one should you use? Use a local install for project work. This makes sure everyone on your team uses the same TypeScript version. Use a global install only for quick personal experiments. How to Compile a Single TypeScript File The simplest way to use tsc is to pass it a single file. Create a file called hello.ts : const message : string = " Hello, TypeScript! " ; console . log ( message ); Now compile it: tsc hello.ts This creates a new file called hello.js in the same folder: var message = " Hello, TypeScript! " ; console . log ( message ); Notice that TypeScript removed the : string type annotation. The output is plain JavaScript that Node.js can run. Run the output file: node hello.js # Hello, TypeScript! Important: When you pass a file directly to tsc , it ignores your tsconfig.json . It uses its own default setting

Last week I shipped something that would have sounded reckless two years ago: an MCP server that lets an AI agent write to a merchant's live Shopify store. Create discount codes. Build customer segments. Draft WhatsApp campaigns against real order data. Read-only agent integrations are everywhere now, and they're fine — but a read-only agent is just a chatbot wearing a dashboard. The useful version is the one that does the thing . The dangerous version is also the one that does the thing. A hallucinated SELECT is a wrong answer; a hallucinated discount code is free product going out the door. So before turning writes on, I sat down and listed every way an agent could hurt a store. Then I built one guardrail per failure mode. Here's the list — it's short, and I think it generalizes to any agent surface that touches business data. 1. Read-only by default. Writes are a per-token opt-in. The lazy design is one API key that can do everything the app can do. Instead, every agent token starts read-only — list customers, inspect segments, read campaign stats. Write capability is a separate flag the merchant flips per token: { "token" : "fav_mcp_…" , "scopes" : [ "read" ], // default "writeEnabled" : false // explicit opt-in , per token } This sounds obvious. It is obvious. It's also the single most-skipped step I see in agent integrations, because it's friction during development. Build the friction in anyway — "the agent could read everything but couldn't have sent that" is a sentence you really want available to you later. 2. Caps live in the tool schema, not the prompt. Early on I had a system prompt that said something like "never create discounts above 30%." You can guess how durable that is. Prompts are suggestions; schemas are physics. So the caps moved into the tool's input validation itself — the shape of it: // create_discount — validated server-side, not prompt-side { percentage : z . number (). min ( 1 ). max ( 100 ), // hard ceiling, enforced in the service exp