标签：#web

I'm working on a free SVG icon project called IconShelf and recently noticed something confusing. Analytics show decent traffic, but signups and conversions are much lower than expected. To investigate, I started reviewing sessions in Microsoft Clarity and found behaviour that makes me suspect that a significant portion of visits may be from bots, crawlers, or automated traffic. I'm already using Cloudflare Bot Management and several WAF rules. I'm curious how other developers handle this. What tools do you use to identify bot traffic? Do you rely on analytics, server logs, Clarity, or something else? How do you measure "real" traffic versus raw pageviews? Have you ever discovered that your actual human traffic was much lower than your analytics suggested? I'd love to hear what worked for you and any lessons learned from tracking user behavior and conversions. What is the solution from developer prospective? Here in the screenshot 70% are bots? https://preview.redd.it/19jsil0e5m6h1.png?width=2604&format=png&auto=webp&s=70591a9e33c635cfbaacc64c9af1b5800b6e2e74 submitted by /u/Parking_Pea5161 [link] [留言]

Background: I accidentally created a recursive loop with an AI agent that would have cost me $50+ in API calls before I noticed. Existing tools either cost money or only show you what already happened. So I built TokenFirefighter — a 100% free, local-only HTTP proxy. What it does: - Sits between your app and OpenAI/Anthropic on localhost:7272 - Tracks every API call cost in real time - Detects 4 types of runaway loops and blocks them - Has a terminal dashboard (no web UI needed) - Zero accounts, zero data collection, zero cost Install: npm install -g tokenfirefighter tokenfirefighter init tokenfirefighter start Then just set OPENAI_BASE_URL=http://localhost:7272/v1 in your .env. Would genuinely appreciate feedback from anyone who uses AI APIs regularly. GitHub: https://github.com/MohitBaghel24/tokenfirefighter submitted by /u/AdventurousMirror122 [link] [留言]

Title. I've looked and looked but found nothing. submitted by /u/yduow [link] [留言]

Breaks down package managers as different dependency models rather than "faster npm replacements". It compares npm, Yarn, pnpm, Bun, and Deno through reproducibility, compatibility, disk usage, and migration failure modes. submitted by /u/OtherwisePush6424 [link] [留言]

AI coding tools are changing how software gets built. Claude Code, Cursor, GitHub Copilot, Windsurf and other tools can generate code incredibly fast. For small tasks, they are already useful: write a component, explain a function, scaffold an endpoint, create a test, refactor a file. But after using AI in real projects, one thing becomes obvious: The problem is no longer code generation. The problem is engineering control. Most AI coding workflows still look like this: text idea -> prompt -> code -> fix -> prompt again -> more code -> lost context -> start over It feels fast at the beginning. Then the project grows. Requirements change. Architecture decisions disappear inside chat history. The AI forgets previous context. You start acting as product manager, architect, reviewer, QA, DevOps, and prompt engineer at the same time. That is not software engineering. That is vibe coding. ## Vibe coding works until it doesn't Direct AI coding is great when the task is isolated. Ask for a React component. Ask for a SQL query. Ask for a utility function. Ask for a unit test. No problem. But real software is not a collection of isolated snippets. Real software has: - business rules - architectural constraints - existing patterns - security concerns - database impact - deployment requirements - edge cases - regression risk - long-term maintenance When AI jumps directly from prompt to code, it often skips the thinking that should happen before implementation. The result may compile. But does it fit the architecture? Does it respect the domain? Does it create hidden technical debt? Does it solve the right problem? That is the gap we are trying to close with N45.AI. ## What is N45.AI? N45.AI is a framework that turns AI coding tools into a structured engineering workflow. It works with the tools developers already use, including Claude Code, Cursor, GitHub Copilot, and Windsurf. The idea is simple: Instead of treating AI as one generic assistant, N45.AI organizes the work like a

My daughter Emma is 11. She's been vibe coding lately, and honestly, she's pretty good at it. The...

Hey everyone, I am a frontend dev and design engineer with about 4.5 years of experience. I am currently looking for a full time role. I am hoping to join an agency or a product team that actually cares a lot about good design. I love building modern and clean websites with a minimalist touch. My approach to work is just based on first principles. I always try to think about how Apple would make things. Good design is not really about what you add, it is about what you refine. Here is what I use to build things: My stack: React, Next.js, TypeScript, and Tailwind CSS. Animations: Motion and GSAP for really smooth interactions. How I work: I focus heavily on the design intent and the core architecture to build pixel perfect layouts and animations from scratch. You can check out my work here: My Portfolio: https://deepbuilds.in Recent Build (Autumn): https://autumndev.vercel.app If your team is looking for someone who sweats the small details and wants to build some really cool stuff together, drop me a DM. Let's talk! submitted by /u/Party-Membership-597 [link] [留言]

Keeping validation schemas, OpenAPI docs, and test fixtures in sync requires manual effort. I built TriadJS as a POC to consolidate them in one place. You define the API once using a TypeScript DSL. The framework derives the following: Runtime validation OpenAPI 3.1 & AsyncAPI specs Database schemas via Drizzle Boundary tests (calling scenario.auto() reads schema constraints to generate fuzz tests) This is a pre-1.0 project with specific architectural compromises: Auto-generated tests abstract away edge cases, which can complicate debugging. Designed for AI: It optimizes for single-file context so LLMs can read the API without traversing multiple YAML and test files. This prioritizes scaffolding over standard modularity. There is are built in claude plugin with skills (schema DSL, endpoints, channels, BDD behaviors with the authoritative assertion phrase table, testing, adapters, Drizzle, CLI, DI) and 8 slash commands ( /triadjs:new , /triadjs:model , /triadjs:endpoint , /triadjs:channel , /triadjs:scenario , /triadjs:test , /triadjs:docs , /triadjs:validate ). I am looking for feedback on this architecture. Is this level of tight coupling an anti-pattern, or is the single source of truth worth the DSL requirement? Repo: TriadJS submitted by /u/justhamade [link] [留言]

Hey everyone — I've been building The Drive AI, a file intelligence API, and wanted to share it. The problem: If you're building an AI agent, RAG pipeline, or any app that needs to understand documents, you end up duct-taping together 5-6 different libraries — one for PDFs, one for screenshots, one for Office docs, one for markdown conversion, one for OCR. Each breaks differently and none give you structured output. What this does: Send any file or URL, get structured JSON back. Define a schema of what you need, and the API extracts it with typed fields, confidence scores, and citations pointing to where in the document the data came from. 107+ file formats — PDFs, Office docs (Word, Excel, PPT), 40+ code languages, images, videos, websites. One API handles all of them. Not just extraction. You can also: Convert anything to clean markdown Generate screenshots of URLs (with device presets, dark mode, full-page capture) Ask analytical questions about documents and get reasoned, step-by-step answers Get Open Graph images for link previews What makes it different from competitor? Most "file to X" APIs do one thing — thumbnails OR markdown OR extraction. This handles the full pipeline. And the extraction isn't just OCR-and-dump — you define a JSON schema, and it returns typed data with confidence scores. Think of it as "SQL for documents." The simple path-based API is also something I haven't seen elsewhere: GET /md/example.com/report.pdf gives you markdown. GET /example.com gives you a screenshot. No auth needed for basic usage. Free tier: 100 credits/month, no card required. There's also an interactive playground where you can test every endpoint without writing code. Would love feedback from anyone building with documents or doing AI agent work. What's missing? What would make you switch from your current setup? Give it a try at https://dev.thedrive.ai submitted by /u/karkibigyan [link] [留言]

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

There is a moment, about ten minutes into using Lovable, where you feel like the future has arrived. You type a few sentences, and a real website appears. It looks good. It works. You did not write a line of code. We get it. That moment is genuinely impressive, and Lovable deserves the credit it gets for it. But a website is not a launch. It is a thing you live with. You update your hours. You add a blog post. You publish a case study. You change a price. You hire someone and want them to handle the news page without breaking anything. That is where the two platforms stop looking alike. So instead of comparing the first ten minutes, this post compares the next ten months. What Lovable actually builds Lovable is an AI coding tool. When you describe your site, it writes a React application: components, state, routing, build tooling. Your content, the actual words and images on your pages, lives inside that code. This is a fine architecture for a web app. It is an awkward one for a website, because every future change is a code change. Want to fix a typo in a testimonial? That sentence is a string inside a React component. You can ask the AI to change it, and it usually will. But you are editing software to edit a sentence. Your marketing person is not going to do that. Your client definitely is not. And there is a quieter problem underneath. The site Lovable generates depends on a specific framework, a specific set of packages, and a build pipeline. Frameworks move fast. The React app that builds cleanly today may need dependency updates a year from now just to keep working. Someone has to own that, and it is probably you. What SleekCMS builds SleekCMS starts from a different assumption: most businesses do not need a web application. They need a website, and a website is mostly content. So when you describe your site to SleekCMS, you get two things: First, your content as structured data. Your pages, your services, your team bios, your blog posts all live in a CMS, in

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

I have an idea for an app but it requires payment to be done by escrow. I have absolutely no idea what I am doing, but I'm 20 so I just want to try a shot at this business Idea. I have build one or two websites with claude before, and it's alright. But when it comes to these issues, especially regarding payments in the thousands, I don't know if I should use AI for it. On the one hand, I don't have the money to hire a dev so I'd have to find investors which is extemely hard to, again, since I don't know what I'm doing, but on the other, I don't want to risk messing it up such that the payment doesn't go through because of a fault and someone who worked for hours wouldn't get the money he deserved and thus I'll be held legally. I could use some advice from those who've had experience in this field. P.S - Please suggest if you have other ideas I can use rather than escrow for payments submitted by /u/PeaceInLoneliness [link] [留言]

If bots are going to take over the internet, then for whom are we doing web development? Bots? Source: https://radar.cloudflare.com/traffic#bot-vs-human submitted by /u/chota-kaka [link] [留言]

Sorry for my dumb questions and bad English hope this is the right place to post to understand my concerns. I'm a new college student in computer programming but my degree is a just a 2 years studying for introducing courses, I've been studying all types of "Introduction to C++" "Introduction to computers" and those types of courses including the one for web development which caught my attention so much more than the rest and I feel it suits me more especially there is a back/front end and full stack which the person will do while studying, while other courses didn't get my attention, anyways, I've been thinking to study web development full stack by myself online or using books, and do some types of projects to self learn more because school barely cover a little, while looking around I always see that AI will take over this field of IT, and people talking about AI coding apps like "Cursor" which will make all of this really helpless, everytime I check I get different opinions and no real answers, I try to study online on YouTube or Udemy and each creator covers a different types with no clear path of this field, I just want to know if there is a specific way, like a source or a books or anything up-to-date about this field and how I can do it, so I thought this is the only place where I can ask people about it. Sorry for the long post and apologize my English. submitted by /u/Imaginary-Fox-7696 [link] [留言]

https://preview.redd.it/tj6mb8uzxj6h1.png?width=2336&format=png&auto=webp&s=5576f4c3bcfb905fdc0154b5c45a46316be880dd I asked Apple directly about the current recommended way to guide users through installing a Progressive Web App from Safari on iOS. My question was dismissed. And every other question relating to it was dismissed or hidden after being published. The reason I asked is because the install flow for PWAs on iOS keeps getting harder to explain to normal users. In the latest iOS developer beta, the path appears to be something like: 3 Vertical Lines Share button Scroll down Add to Home Screen There is no obvious install prompt, no clear browser level affordance, and no simple language that maps to what people expect when they hear “install this app.” I understand Apple has its own platform incentives, but this affects real web products. For developers building web-first tools. The frustrating part is not just that the flow is bad. It is that Apple does not seem interested in acknowledging the issue when asked directly. Am I missing something here? How are other web developers handling PWA onboarding on iOS right now? Are you building custom instruction screens? Avoiding PWAs entirely? Sending users to the App Store instead? Or just accepting the drop-off? I attached the screenshot because I think this is worth discussing more publicly. submitted by /u/Jacoby_Broadnax [link] [留言]

The End of Vibe Coding: Why I Switched to Structured AI Workflows I spent 3 months "vibe coding" my SaaS. Then I realized I was spending more time fixing AI's mistakes than if I'd written it myself. Here's the system that changed everything. In early June 2026, two HN threads with a combined ~1,300 comments told me something had shifted. Thread 1 (~1,100 comments): "What was your 'oh shit' moment with GenAI?" Thread 2 (~230 comments): "What tools have you made for yourself since AI?" Both threads had the same pattern: people started with unfiltered excitement ("I built a whole app in one weekend!"), then hit a wall ("I'm spending more time fixing its bugs than writing code from scratch"). I know the feeling. I lived it. The Vibe Coding Trap When I started building MultiPost — an AI-powered cross-platform content tool — I was deep in "vibe coding" mode: Me: "Make it look better" AI: *adds Tailwind, restyles everything* Me: "Add a filter by date" AI: *adds a date picker, breaks the layout* Me: "Fix that bug where posts don't show" AI: *fixes the filter, introduces a null pointer* Me: "Okay now add a dark mode toggle" AI: *regenerates half the component from scratch* Three weeks later I had a working feature and zero understanding of how any of it actually held together. This was my daily rhythm for weeks. Fast output, slow cleanup. The ratio kept getting worse as the codebase grew. I was optimizing for speed of generation instead of speed of delivery . The "Oh Shit" Moment It came when I reviewed a feature I'd built entirely through unstructured AI sessions. The feature worked. But: The code had 3 different patterns for the same thing (Auth0 token handling in one place, hardcoded keys in another) Error handling was inconsistent — some functions returned null, others threw, others returned Result types Database queries were scattered across the codebase instead of in a repository layer A security reviewer would have cried The AI didn't do this maliciously. It did this

Your health data is probably the most sensitive information you own. Yet, most "AI Health Assistants" today require you to ship your symptoms, moods, and medical history to a cloud server. In the era of Edge AI and Privacy-preserving machine learning , this is no longer a trade-off we have to make. By leveraging the MLX Framework and Apple Silicon's unified memory, we can now run on-device LLMs like Llama-3-8B directly on an iPhone. This tutorial explores how to build a 100% offline, local health journal that summarizes your daily wellness without a single byte leaving your device. If you're looking for more production-ready patterns for secure AI, definitely check out the advanced guides over at Wellally Tech Blog . Why MLX-Swift? 🍏 Apple's MLX is a NumPy-like array framework designed specifically for Apple Silicon. When brought into the Swift ecosystem via mlx-swift , it allows us to tap into the GPU and Neural Engine with incredible efficiency. The Architecture: 100% Offline Inference Unlike traditional CoreML conversions that can be rigid, MLX allows for dynamic graph execution. Here is how the data flows from your typed notes to a structured health summary: graph TD A[User Input: Health Notes] --> B[SwiftUI View] B --> C{Privacy Layer} C -->|Local Only| D[MLX-Swift Engine] D --> E[Llama-3-8B Quantized Model] E --> F[Unified Memory / GPU] F --> G[Local Inference] G --> H[Markdown Health Summary] H --> B style C fill:#f9f,stroke:#333,stroke-width:4px style E fill:#00ff0022,stroke:#333 Prerequisites 🛠️ Device : iPhone 15 Pro or later (8GB RAM is highly recommended for Llama-3-8B). Software : Xcode 15.3+, iOS 17.4+. Tech Stack : MLX Framework, SwiftUI, Llama-3-8B (4-bit quantized). Step 1: Setting Up the MLX Engine First, we need to integrate the mlx-swift package. In your Package.swift , add: . package ( url : "https://github.com/ml-explore/mlx-swift-chat" , branch : "main" ) Now, let's initialize the model. Because we are on a mobile device, we must use a quantiz

Webflow's code export has two problems. It is only available on paid Workspace plans, and even when you pay, it does not include your CMS content: collection lists export as empty states, collection pages export with nothing in them. If your site has a blog, the export gives you a site without a blog. Forms and search are disabled in exported code too, per Webflow's own docs. Meanwhile, the published site is sitting on a CDN, fully rendered. Every CMS page is real HTML. wget --mirror will happily fetch all of it. What wget gives you, though, is not deployable. I migrated a production Webflow site this way and hit the same five breakages everyone hits, so I turned the fixes into a Claude Code skill that runs the whole workflow. This post is the five breakages, because they are useful whether or not you use the skill, and they apply to Framer, Squarespace, and friends with different domain names. Setup: the mirror itself The one wget incantation that matters, because Webflow serves assets from a separate CDN domain and you have to tell wget to follow it: wget --mirror --convert-links --adjust-extension \ --page-requisites --span-hosts \ --domains = yourdomain.com,cdn.prod.website-files.com \ --no-parent https://yourdomain.com/ This downloads every page plus the CSS, JS, images, and fonts they reference, and rewrites URLs to relative paths. It looks complete. It is about 90% complete, and the missing 10% is invisible until the page renders blank. Breakage 1: the page renders blank, console says "integrity" The symptom: your mirrored page shows raw unstyled text or nothing at all, and the console says Failed to find a valid digest in the 'integrity' attribute . The cause is subtle. Webflow ships its <link> and <script> tags with SHA-384 SRI hashes. wget's --convert-links rewrites URLs inside the downloaded CSS files, which changes their bytes, which means the SRI hash no longer matches, which means the browser silently refuses to apply the stylesheet. The file is right