标签：#web

Hey DEV community! 👋 I built IMGVO — a free image tool that works entirely in your browser. What it does Convert JPG, PNG, WebP, AVIF, HEIC and more Compress images up to 90% without quality loss Crop, resize, rotate, watermark Works offline (PWA) Why I built it Most image tools upload your files to servers. I wanted something private and instant. Tech 100% vanilla JavaScript No backend, no server Works offline as PWA Privacy first No files uploaded to any server. Everything runs locally in your browser. 🆓 Free, no signup required. 👉 Try it: https://imgvo.com Would love your feedback! 🙏

Hello, I'm Shrijith Venkatramana. I'm building git-lrc, an AI code reviewer that runs on every commit. Star Us to help devs discover the project. Do give it a try and share your feedback for improving the product. Large Language Models have made it surprisingly easy to generate text. Building a reliable AI application, however, is a completely different problem. Once you move beyond a simple "send prompt, get response" demo, you quickly encounter real-world concerns: Prompt management Structured outputs Multi-step workflows Tool calling Observability Evaluation Model switching Production debugging Many teams end up creating custom frameworks around OpenAI, Anthropic, Gemini, or local models just to manage these concerns. This is where Genkit comes in. Originally developed by Google, Genkit provides a framework for building AI-powered applications with a focus on workflows, tooling, observability, evaluation, and production readiness. While most examples online focus on Node.js, Genkit now has growing support for Go, making it an interesting option for backend engineers who want AI capabilities without introducing an entirely separate application stack. In this article we'll build practical examples and explore how Genkit helps structure real-world AI systems. Why Genkit Exists Most AI applications evolve like this: Phase 1: response := callLLM ( prompt ) Everything seems simple. Phase 2: You need: Retry logic Prompt versioning JSON outputs Tool integrations Tracing Metrics Human review workflows Now your codebase starts accumulating AI-specific infrastructure. Genkit attempts to provide these building blocks from day one. Think of it as: "Spring Boot for AI workflows" rather than "an LLM SDK." Installing Genkit for Go Create a new project: mkdir genkit-demo cd genkit-demo go mod init github.com/example/genkit-demo Install Genkit: go get github.com/firebase/genkit/go/ai Depending on your provider, you'll also install provider plugins. For Gemini: go get github.com/fi

A scraper can pass every check you wrote and still be wrong about the one thing you actually care about: how much it collected. No exception. No 500. No broken row. Exit code 0, logs green, every field valid. And the set on disk is a quarter of what the site actually has. I have run scrapers in production enough times to stop trusting a green run on its own, and this is the failure that taught me to count. TL;DR A paginated source can serve fewer rows than it claims and never throw — page caps, hidden offset limits, infinite scroll that "ends" early. Your status check (200), schema check (valid row), and byte check (you got data) all pass. None of them counts records. The tell: declared total vs unique ids collected. Or, when there's no declared total, the page that quietly repeats an earlier page. Below is a 40-line probe you can run right now. On a source that caps at 1,500 of a declared 4,000, it returned VERDICT: INCOMPLETE (missing 2500 rows) . This is a completeness check, not a correctness check. Different layer, different bug. What actually goes wrong You write the loop everyone writes. Walk ?page=1 , ?page=2 , keep going until a page comes back empty. Stop. Save. Done. The source has other plans. It says it has 4,000 records — the count is right there in the envelope, or in a "Showing 4,000 results" line in the HTML. But it only ever hands out real data for the first 30 pages. Page 31 doesn't error. It doesn't return empty either. It returns page 1 again. Still HTTP 200. Still 50 valid rows. Your loop has no reason to stop, so it grinds on until its own page budget runs out, collects a pile of rows, and exits clean. You now have 5,000 rows in hand and feel great about it. Looks like plenty. The catch: only 1,500 are unique. The page cap fed you the same first page over and over, and those duplicates hid the shortfall behind a big-looking row count. That is the exact shape of "50 rows passed every check while 4,000 existed" — the scraper saw a lot of rows an

Built a GitHub profile badge that shows where your visitors are coming from I wanted something more interesting than a simple profile view counter, so I built GitViewsMap. Add the snippet to your GitHub profile README (given in repo below) The badge tracks profile visits, and clicking it opens an interactive map showing the approximate locations of visitors. The project is open source and already deployed, so you can use it right away by replacing YOUR_GITHUB_USERNAME with your GitHub username. A few questions: Would you put something like this on your profile? What stats would you want besides a visitor map? Any features you'd like to see added? Repository: Utkarsh-rwt/gitViewsMap https://preview.redd.it/yanbotpzap5h1.png?width=663&format=png&auto=webp&s=2eba0193e266ffb74f5cabaf193d54ac5933bc71 https://preview.redd.it/bk15wl70bp5h1.png?width=1908&format=png&auto=webp&s=a9848597b593935c0a8e40d8bbd4f5479d6e8f16 submitted by /u/UtkarshRawat7 [link] [留言]

I was writing Playwright E2E tests for a small Three.js platformer and hit a confusing issue. Game context: https://games.xgallery.online/forest-quest/ The game worked in the browser. But in headless Chromium, enemies barely moved, jumps looked inconsistent, and the boss test would sometimes fail for no obvious reason. The problem was requestAnimationFrame throttling. In a headless run, the page does not always get normal frame pacing. My game loop depended on rAF, so waiting 1 second in the test did not mean the game simulation advanced like 1 second of real play. The fix was to expose a manual frame step in the game. The test can call a small internal function that advances one frame with a controlled timestamp. Then the test helper advances the game in small steps. Instead of waiting one big second, it calls that frame step about every 50ms. That made the tests deterministic enough to check real gameplay behavior. Example observations from the full run: L2 mushroom patrol delta: 1.071 L6 boss HP sequence: [7, 6, 5, 4, 3, 2, 1, 0] Boss phase switched: true The funny part is that the boss model did not need to be loaded for this to work. The boss could be a Meshy model or a gray fallback box. For E2E, the important thing was the state machine, collision, HP, and portal reveal. I would be careful with this kind of hook in a serious public game. For this tiny project, it is a testing helper, not a scoring or account system. I used to think of browser game testing as screenshot-heavy. This project reminded me that sometimes the best test hook is just a safe way to drive the loop yourself. submitted by /u/Top-Cardiologist1011 [link] [留言]

I wanted a simple place to see what games come out this week without digging through ten ad-heavy sites. I couldn't find one I liked, so I built it. gamecalendar.es What it does: - Releases week by week — you can scroll forward/back through weeks - "Recent" and "Most anticipated" views - Metacritic + OpenCritic scores on each game - Gaming events & showcases with countdowns and stream links - English + Spanish, light/dark mode - Works on mobile Honest context: - It's a personal project, built by one person in my spare time. - Game data comes from IGDB. I'm not affiliated with any company or store. - It's completely free. No ads, no accounts, no invasive tracking (just privacy-friendly analytics, no cookies). - Stack is plain HTML/CSS/vanilla JS, a Postgres database (Neon), hosted on Vercel. No frameworks — I wanted it fast and simple. It's brand new, so there are rough edges and the database is still being filled out. Any feedback — features, bugs, things that feel off — is genuinely welcome. submitted by /u/zwrkly [link] [留言]

Hey [ r/webdev ]( r/webdev )! I just open-sourced the frontend for a tool I built to solve a very real (and timely) problem in the cannabis space. With the 2025/2026 federal hemp law changes coming (seeds will no longer freely cross state lines), growers need to know exactly what genetics are available in their state. So I created CI Seed Map — a fully interactive, data-heavy map of 1,039 breeders, seed banks, dispensaries, and cultivators across 27+ states. Live demo: https://seed-map.poweredbyci.live Repo: https://github.com/Shannon-Goddard/seed-map-usa Key features I’m proud of: • Dual UI modes: Location mode (filter by type/state, marker clustering) + Breeder mode (searchable list of 924 unique breeders → show every location carrying them with custom logo markers). • Priority stacking — when a spot carries multiple selected breeders, the top one’s logo shows with a green ring + “+N” badge. • Rich popups with brand logo grids (up to 12 + “+more”), strain highlights, and hand-written editorial notes. • “Find Me” geolocation with branded radius circle, live search, mobile-first responsive design (collapsible filters, hamburger nav). • Age gate + strong data protection: AWS API Gateway + Lambda serving private S3 data via time-limited HMAC-SHA256 session tokens (no static JSON exposure). Tech stack: • Leaflet.js 1.9.4 + MarkerCluster • OpenStreetMap tiles • Vanilla JS + responsive CSS (mobile-first) • AWS Lambda (Python 3.12) + API Gateway + private S3 • 700+ processed brand logos, Nominatim geocoding pipeline, Formspree forms The dataset was manually researched and verified (huge shoutout to the data side), but the map itself was built lightning-fast with Amazon Q Developer helping on architecture, token system, responsive bits, etc. Would love any feedback on the UX, performance, code structure, or ideas for future enhancements (e.g. more advanced filtering, user submissions, etc.). Especially curious how the logo marker + priority logic feels! 🌱 (21+ only, obviou

submitted by /u/pilcrowonpaper [link] [留言]

https://umigalaxy.com combines a media tracker and an imageboard style forum. Features: Markdown support for the imageboard Both anonymous and logged in support User mentions in the imageboard for logged in users Media tracker of anime, manga, tv shows, movies, games Treasure and achievement system where users can earn limited cards for contributing to the media database Clan system where up to 50 people can join a clan and up to 5 clans can form an alliance Direct Messaging system Friend system Android and iOS apps in development submitted by /u/AutoMick [link] [留言]

I often have to use different email addresses and SSH keys when working for different clients. Managing `.gitconfigs` manually was always a PIA so I created this little tool for myself to help me manage them. Github: https://github.com/sgolovine/crgc NPM: https://www.npmjs.com/package/@sunnygg/crgc submitted by /u/_fat_santa [link] [留言]

This field test was against Next.js. The issue was Next.js #94450: https://github.com/vercel/next.js/issues/94450 The reported problem involved production browser source maps when React Compiler and Turbopack were involved. The visible symptom was that the final browser source map could expose transformed compiler output instead of preserving the original client source content. That matters because source maps are not just debugging extras. They are provenance artifacts. They tell the developer what source the browser output came from. If a source map claims to represent a source file but its sourcesContent contains compiler-transformed output instead of the original file content, then the debugging artifact has drifted from the source truth it is supposed to preserve. The useful diagnostic boundary was: original client source → transform source map → Turbopack source-map composition → final browser chunk map The important proof was that the Babel/React Compiler transform itself could produce a source map whose sourcesContent still represented the original client file. So the loss was not simply: React Compiler changed the code The sharper issue was: the browser source-map composition path was not preserving original source authority all the way into the final artifact That made the repair lane much narrower. The local repair candidate has two parts: Preserve the original loader input source in the Babel loader transform map. Fill missing source-map file provenance from the origin path when an incoming transform map omits it, so Turbopack has enough identity information to match the transform map back to the generated intermediate file during composition. The goal is not to rewrite source-map behavior broadly. It is not to patch the final browser map after the fact. It is to preserve source authority at the point where the transform map is composed into the browser artifact. A regression fixture was added around a React Compiler client component with an original sou

Most meeting tools help during a meeting, but the real challenge often starts before it. Users spend time searching for context, reviewing past interactions, and preparing discussion points. While building MeetMind, our goal was to make meeting preparation and follow-up simpler and more intuitive. As a frontend developer, I focused on designing user-friendly interfaces, building responsive components, and creating a smooth workflow from meeting preparation to post-meeting insights. In this article, I'll share the design decisions, frontend challenges, and lessons I learned while building the user experience behind MeetMind. How We Used Hindsight Memory to Make Our AI Meeting Assistant Actually Remember Things Hook I've been in too many meetings where I blanked on something a client told me weeks ago. You're sitting there, nodding, and somewhere in the back of your head you know they mentioned a budget number or a deadline — but you can't pull it up. That feeling is expensive. It erodes trust, slows decisions, and makes you look unprepared. That's the problem MeetMind was built to solve. And the hardest part of building it wasn't the AI — it was making the AI remember. What Is MeetMind — And How Does It Actually Work? MeetMind is a web application that functions as your AI-powered pre-meeting assistant. Here's the full user flow: Before a meeting: Type a contact's name, click "Get Briefing." The app retrieves everything stored about that person — notes, promises, project details — passes it to the LLM, and returns a structured briefing: a summary of past interactions, key reminders, and conversation openers grounded in your actual history with them. After a meeting: Type your notes and click "Save." The system stores them under that contact's name for next time. Under the hood: Python + Flask backend, Llama 3.3 70B on Groq's inference API, and a JSON-backed memory layer modeled on the Hindsight architecture. The interface is intentionally minimal. Two panels, two act

I’ve been working on a small project: a zero-knowledge, E2EE audio chat that runs in a single PHP/JS file. No database, messages delete after 24h. I managed to solve the NAT traversal issues by switching from Trickle ICE to Vanilla ICE (wait-and-retry approach), which finally lets me call between a PC and a 4G phone. I’m curious—from a cybersecurity perspective, what are the biggest risks in a P2P architecture like this? Besides the obvious metadata leaks from the signaling server, what else should I be looking at to harden the privacy? Any feedback or "this is a bad idea because..." comments are welcome! v2v.site submitted by /u/Alternative-Claim-41 [link] [留言]

While designing the database and Product Requirements Document (PRD) for an online school project, I ran into a problem I was not expecting. The school had multiple subscription plans. For simplicity, imagine: Live Class Plan:₦50,000 per term Video On Demand Plan: ₦30,000 per term Hybrid Plan (Live Classes + Video On Demand):₦70,000 per term. Initially this looked simple. Students subscribe. System charges them. Done. Then I asked: What happens if somebody changes plans halfway through the term? Suppose: A student already paid: Live Class Plan ₦50,000 Two months later: They decide: Upgrade to Hybrid Plan Do we charge: ₦70,000 again? That would be unfair. Do we charge: ₦20,000 difference? Maybe. But what if they already used most of their subscription period? This question led me to something called: Proration What Is Proration? Proration simply means: Charging customers only for the portion they actually use. Instead of pretending subscriptions always begin and end perfectly. Proration tries to answer: "How much value remains in the current subscription?" and "How much should the customer pay for the new one?" Simple Example Assume: Term Length: 100 Days Student buys: Live Plan ₦50,000 After: 40 Days they upgrade. This means: Used: 40 Days Remaining: 60 Days Value remaining: Remaining Value = Remaining Days / Total Days = 60 / 100 = 60% Remaining credit: 60% × ₦50,000 = ₦30,000 Hybrid costs: ₦70,000 Therefore: Amount to bill = New Plan Price − Remaining Credit = ₦70,000 − ₦30,000 = ₦40,000 Student pays: ₦40,000 instead of: ₦70,000 This feels fairer. Downgrades Are More Complicated What if: Hybrid user: ₦70,000 moves to: ₦30,000 plan Should the system: Refund money? Create account credits? Apply discount later? Ignore downgrades until renewal? This is where: Proration Rules become important. What Are Proration Rules? Proration calculations are useless without rules. The business must decide: Rule 1: How Is Remaining Value Calculated? Options: Daily basis Weekly basis

Last time I posted this game the UI looked totally different and the UX was honestly pretty rough. I'm happy with where it's at now, but the colors keep bugging me and I can't tell if it's just me staring at it too long. Quick context on what you're seeing: it's a roguelike where you pick a few technologies and use them to answer quizzes. Combos, multipliers, mods, the usual. The cards in the middle are Strikes, basically quiz minigames, and each one is tied to a tech like React, Next or Postgres. The card's color is how you tell which tech it is, so the palette is doing actual work, not just decoration. The bar at the bottom is the Mods Bar. Mods are one off modifiers you pick up during a run, like the cards in a deckbuilder. So: does it read as too much, or is the color earning its place? Roast it. submitted by /u/mister_pizza22 [link] [留言]

Most web scraping projects are not unique snowflakes. Track competitor prices. Enrich a list of leads. Audit a site for SEO. Pull training data for a model. It is the same handful of recipes, over and over. A web scraping template is one of those recipes, pre-wired: a ready-to-use JSON config that chains the right tools in the right order, so you copy it, point it at your targets, and run. CrawlForge ships 24 of them in the templates gallery . This guide is about using them well — not just copy-paste, but read, adapt, and cost them out before you scale. TL;DR: A CrawlForge template is a copy-paste JSON config that chains multiple MCP tools into one workflow (price monitoring, lead enrichment, SEO audits, market research, AI training data). There are 24 across 9 categories, each costing 3–19 credits per run. Run them from Claude/Cursor, the crawlforge CLI, or the REST API. Free tier = 1,000 credits, no credit card. Table of Contents What Is a Web Scraping Template? Templates Gallery vs the scrape_template Tool How to Use a Template the Right Way 8 Templates Worth Copying First The Other 16 Templates Customizing or Building Your Own FAQ What Is a Web Scraping Template? A template is a saved configuration that orchestrates two or three CrawlForge tools into one workflow with a business outcome attached. Instead of wiring search_web then scrape_structured then analyze_content yourself — and guessing every parameter — you copy a config that already does it. Each template in the gallery carries: A category — E-commerce, Research, Data Collection, Monitoring, AI & LLM, Sales, SEO, Content, or Advanced Scraping (nine in total). A difficulty — beginner, intermediate, or advanced. The tool chain it runs and a fixed credit cost per run (3–19 credits). A copy-paste JSON config with sensible default parameters. You run that config from any MCP client (Claude, Cursor, Windsurf), the crawlforge CLI, or the REST API. Same config, same shape of result. Templates Gallery vs the scrap

I wanted to do something entirely different than my normal, meet overwatch.earth Explore the world through a fully interactive 3D globe with real-time feeds from over 150,000 sources. Track live events as they happen—from earthquakes and satellite movements to live webcams, global transportation networks, and digital infrastructure. submitted by /u/tuxxin [link] [留言]

Hi all, About three years ago I built a small library called Trig.js to expose scroll data to CSS via data‑attributes. It recently got highlighted as one of the “Enterprise Heavyweights” of scroll animation libraries by CSSAuthor, which made me revisit the idea. I’d always planned to make a Cursor.js, so I built it and then I started wondering, what else could be exposed to CSS variables? That question spiralled into something bigger, and I’ve now ended up creating a full stack of small, browser‑native libraries that all share the same philosophy: Once I reached Keys.js, something clicked. Keys aren’t animation, they’re input. That led to the bigger question, could you build full applications or even games this way? The answer turned out to be yes, and that’s when I came up with State.js. For the first time, here’s the full stack together: Trig-js - exposes scroll data to CSS Cursor.js - exposes mouse/touch position Motion.js - a global clock for CSS‑driven animation Keys.js - exposes keyboard input State.js - a reactive state layer for HTML Gravity.js - a DOM‑element physics engine rendered in CSS Together, these for a declarative application/game engine using the native browser without webGL, webGPU or canvas. Your HTML is your state graph, the CSS is your rendering engine and JS becomes the wiring that connects everything up. These libraries all work independently or together. As every one of these open up capabilities that wasn't possible before that's why they are all individual so you can pick or choose or use them altogether for a complete stack. A few months ago I wouldn’t have believed half of this was possible in the browser without heavy abstractions. It’s made me realise how much capability we’ve historically hidden behind frameworks instead of exposing directly. I’m excited to share this approach and would love to hear your thoughts, ideas, or critiques. If you’re curious about browser‑native reactivity or CSS‑driven rendering, I’m happy to dive deeper.

I built AIPDFKit because I kept running into the same friction: needing to do something simple with a PDF -- redact some sensitive info, pull out a table, or convert a document to Markdown -- and every tool either required an account, put the good stuff behind a paywall, or made me wonder what was happening to my files afterward. PDFKit is my answer to that. PDFKit -- Free AI-Powered PDF Tools PDFKit is a free, browser-based PDF utility suite powered by AI, built for developers and technical professionals who need fast, reliable document processing without the friction of paid plans or mandatory accounts. Whether you're parsing data out of PDFs, sanitizing sensitive information, or converting documents into developer-friendly formats, PDFKit gets the job done in seconds. What it does AI-assisted PII redaction -- automatically detect and mask emails, phone numbers, names, and more Table extraction to Excel -- pull structured data out of PDFs without copying and pasting PDF to Markdown conversion -- especially useful for feeding document content into LLMs or RAG pipelines These aren't just format converters. The AI layer means the output is clean, structured, and actually ready to use. Privacy first No account creation required. PDFKit stores no user data and automatically deletes all uploaded files after one hour. For developers handling client documents or sensitive data pipelines, this is a meaningful differentiator over SaaS tools that retain files indefinitely. Who it's for Developers preprocessing PDFs before feeding them into RAG pipelines Anyone automating document workflows People who need to quickly extract structured data without spinning up a Python script Anyone dealing with sensitive documents who can't afford to have files sitting on someone else's servers It's the kind of utility you bookmark and reach for constantly. Built to be fast, free, and frictionless. Check it out: https://www.aipdfkit.com/ Would love to hear what features you'd find most usefu

Spent the weekend building a local tokenizer to stop leaking DB passwords and API keys to ChatGPT, literally can't stop testing edge cases. Written in pure TypeScript. Uses greedy reverse anchoring to mask credentials locally in the browser. Provided the core sanitizer logic here: https://github.com/abests/ghost-sanitizer-js submitted by /u/zero_backend_bro [link] [留言]