标签：#product

Create trend motions in your browser! Discussion | Link

I bombed a system design interview last year — not because I didn't know the architecture, but because I spent the first 5 minutes fighting Excalidraw. So I built SystemDesignBoard — a free, keyboard-first whiteboard specifically for system design interviews. What it does You open it, press a key, and start drawing. No account, no onboarding, no drag-from-a-sidebar friction. R → place a Service node C → place a Database/Cache/Queue A → connect two nodes N → open the scratchpad for scale math The features I'm most proud of Animated connectors that show communication type Instead of just drawing arrows, connectors visually encode how services talk: ⇄ sync — paired dashes (request + ACK) ≋ stream — near-solid fast line with glow (continuous pipeline) This matters in interviews — your interviewer can glance at your diagram and immediately understand the communication pattern. Cloud provider badges Tag any node as AWS (EC2, Lambda, RDS, S3), GCP (GKE, Cloud Run, Firestore), or Azure. Each subtype has its own icon. Trade-off logging Right-click any node → Log Trade-offs → attach your CAP theorem stance, consistency level, and scaling strategy directly to the component. Diagram-as-Code Type: [Mobile App] -> [API Gateway] [API Gateway] -> [Auth Service] [Auth Service] -> [Users DB] [Feed Service] -> [Posts DB x3] [Feed Service] -> [Redis Cache] Hit Apply — it auto-lays out the whole architecture in seconds. Export to animated GIF Export your diagram as a GIF that shows live traffic flow animations. Great for sharing after an interview or in a design doc. Tech stack React + TypeScript + Vite @xyflow/react (ReactFlow v12) for the canvas Zustand + Immer for state with full undo/redo html-to-image + gifshot for PNG/GIF export It's free and open No signup required. Works entirely in the browser. Free during beta. 👉 systemdesignboard.com Would love feedback — especially from anyone who's done system design interviews recently. What's missing? What's annoying? Drop a comment below

📖 Originally published on my blog . Part of a series on building with Claude Code. For a while I'd watch the AI work and quietly grumble: a fairly big task, and it would finish one module before starting the next, while I just sat there waiting for it to clear one before the other's turn came up. The work itself was fine—it was just slow. Slow because it was stuck in a queue. Then it clicked: a lot of these modules have nothing to do with each other, so why make them go one after another? Split them up, let several agents work at the same time, done. What I want, and where it stops What I want is simple: the same work, for roughly the same tokens, with the wall-clock time cut way down. But let me put the boundary up front— not every task can be split this way . This is just an approach I've worked out for myself; take what's useful. The prerequisite: a clean architecture For several agents to work at once without stepping on each other, the prerequisite isn't the AI—it's your architecture . That task of mine could be split because it was already several modules, talking to each other through interfaces, with internal implementations that don't affect one another—as long as each one honors the interface contract, it can be built independently. Loosely coupled, highly cohesive, in other words. And I'd nailed that design down together with opus before writing a line: opus helps me think it through and lays out options, but I'm the one who decides . You can't cut corners here. Forcing parallelism onto an architecture you haven't cleanly split is like cutting a tangle of yarn into a few pieces that are all still knotted together—it only gets messier. Who runs the show, who plans, who does the work With the design settled, it's time to assign roles. The split I tend to use: opus runs the show —holds the big picture, hands out work, does the final check; sonnet does the TDD planning —per the design, it lays out how each module gets tested and implemented; haiku writes the

AI Coding Agents Need a Control Layer AI coding agents are getting good enough that the problem is changing. A year ago, the question was mostly: Can this thing write useful code? Now, for a lot of builders, the better question is: How do I supervise this thing once it is actually doing work? That shift feels important. Claude Code, Cursor, Codex, and similar tools are not just autocomplete anymore. They can plan, edit files, run commands, review code, and work across larger chunks of a project. That is powerful. It also gets messy fast. The bottleneck is moving The hard part is no longer just picking the best coding agent. It is figuring out how to manage agent work once multiple tools or sessions are active. Questions start showing up: What is each agent doing right now? What changed? What still needs human review? Where did approval happen? Which agent owns which task? Did two agents touch the same part of the codebase? What should be paused, redirected, or stopped? What happened while I was focused somewhere else? That is not really a prompting problem. It is a control problem. The current workflow is mostly duct tape A lot of agent workflows seem to rely on some combination of: terminal tabs tmux sessions git branches git worktrees editor diffs notes issue trackers rules files memory vibes That works for a while. But once agents become more autonomous, or once a builder runs more than one agent at a time, the workflow starts to need a real operating layer around it. Not because the agents are bad. Because the agents are getting useful enough to need supervision. The missing layer The layer I keep thinking about has a few jobs. State What is running? What is paused? What needs attention? Ownership Which agent owns which task, branch, file, or objective? Review What changed, and what still needs a human to look at it? Approval Where should the human say yes before work continues? Intervention When should a builder pause, redirect, compare, or stop an agent? Memor

I’m building ScriptTap, a no-root Android automation app for user-controlled phone workflows. The app lets people create scripts with taps, swipes, routines, screen-aware checks, OCR/text detection, image/pixel checks, variables, logic, and AI-assisted script creation. The technical side is hard, but the trust side may be harder. ScriptTap needs Android Accessibility permission because user-authored input automation requires it. That is a powerful permission. I do not want to minimize it, hide it behind vague onboarding copy, or expect people to click through without understanding what they are enabling. That creates a product-design problem. If the copy is too soft, it feels dishonest. If the copy is too warning-heavy, a legitimate automation tool can feel suspicious before the user even understands what it does. The explanation I am trying to make clear is: ScriptTap is no-root. Scripts are created and controlled by the user. Screen capture is user-controlled. It does not bypass Android permissions, lock screens, app security, or consent flows. Accessibility is required for overlay/input automation, so users should understand why it is being requested. The short version I keep coming back to is: ScriptTap uses Accessibility so your scripts can interact with the screen the way you tell them to. This is a powerful permission. You should only enable it if you understand and trust what the app is doing. For developers who have built apps with sensitive permissions: How did you explain the permission without either hiding the risk or scaring users away from a legitimate feature?

I know it sounds strange, but I am in my first year in CS Major, and I don't like posting things on social media, but I found lately that companies are more likely to hire people who are active on social media like X (Twitter). For me, I genuinely post my projects on LinkedIn, but not sharing things like today I learned something new etc... What's your opinion about that? Or How can I manage that?

A notes app that lives in your MacBook's notch. Discussion | Link

Every time you open a new session with an AI coding tool, it starts from zero. It does not know what you decided yesterday, what failed last week, or what comes next. You have to explain the project again. And again. EGC (Extended Global Context) fixes this. EGC is a local runtime that gives every AI coding tool you use a persistent memory. At the end of each session, the AI saves what it learned: decisions made, what failed, your preferences, what comes next. At the start of the next session, it loads that state back automatically. One install. Every tool. Every session. Website: https://fmarzochi.github.io/EGCSite What it looks like in practice You open Claude Code on a project you have not touched in two weeks. Without typing anything: State loaded from egc-memory via ~/.egc/state/Projects--MyApp.md Context and preferences acknowledged. Ready to pick up: - Test full install on a clean machine - Add GEMINI.md with session memory protocol - Publish v1.0.1 fix after clean install test passes The AI already knows what you were building, what decisions you made, what failed, and exactly where you stopped. You did not type anything. You just started working. How it works EGC ships two MCP servers that run locally during every session. egc-memory: 14 tools for persistent memory Tool What it does get_state Loads project memory at session start update_state Saves decisions, preferences, and next steps store_decision Persists a single decision to SQLite query_history Returns past decisions by timestamp search_history Full-text search with BM25 ranking working_memory_set Stores transient context with a TTL lesson_save Records cross-session knowledge with confidence decay lesson_recall Retrieves active lessons above a threshold detect_patterns Surfaces repeated commands and recurring errors compress_observations Compresses hook events to save token budget State files live at ~/.egc/state/<project-slug>.md . One file per project. Plain Markdown. Human-readable. egc-guardian:

Day 9. Template matching works. But screen sizes, resolutions, and Android versions might break everything. Eight days ago, the agent was an idea. Now it can read text, handle interruptions, and find icons on a screen. But there's a question I've been avoiding: does it work on any phone other than mine? The Cross-Device Problem Every screenshot I've taken, every icon I've cropped, every coordinate I've mapped—it's all on one device. My phone. Same screen size. Same resolution. Same Android version. Same DPI. Template matching relies on reference images that look exactly like the target on screen. Change the screen density, change the icon size, change the font scaling, and the match confidence drops. Suddenly "send_button.png" doesn't match anymore, and the agent can't press send. This isn't a bug in my code. It's a fundamental challenge in computer vision: reference-based matching breaks when the visual context changes. Today's Experiment I tested the same agent on a friend's phone—different manufacturer, different Android version, slightly larger screen. The results were humbling. Task My Phone Friend's Phone OCR (text recognition) ✅ 95% accuracy ✅ ~90% accuracy Find "Mom" in contacts ✅ Found ✅ Found Template match: send button ✅ 94% confidence ❌ 62% confidence Template match: back button ✅ 91% confidence ❌ 58% confidence OCR held up reasonably well because text is text. Fonts might change slightly, but the characters are the same. But the icons—the send button, the back arrow—were rendered at a different size and slightly different pixel arrangement on my friend's device. The agent failed to send the message. Why This Matters An AI agent that only works on one phone isn't an agent. It's a script. If I want this to be useful to anyone else—or even to myself if I change phones—it needs to be device-agnostic. Possible Solutions I'm Exploring Solution Pros Cons Multi-resolution icon library Simple. Just crop icons at different DPIs. Tedious. How many variants are eno

Give every customer their own Hermes or OpenClaw agent Discussion | Link

If you’ve spent any time working with autonomous AI coding agents recently, you know the drill. You give the agent a straightforward task: "Add a user profile page and link it to the navbar." The agent says, "I've got this." It writes some code. You run it, and it throws an import error. You paste the error back. The agent apologizes, rewrites the file, and now your routing is broken. You paste that error back. Ten iterations later, your config is mysteriously deleted, the navbar is entirely missing, and the agent is trying to install a deprecated version of React. This is the AI Agent Doom Loop. It happens because current agent frameworks mistake intelligence for discipline. We dump a 10,000-token SYSTEM_PROMPT.txt telling the agent everything about our project, hoping it remembers the architecture constraints on step 45 of its execution loop. It rarely does. I built Agent Rigor because I got tired of babysitting agents that code themselves into corners. The Root Cause: Context Rot When an agent starts a task, its context is pristine. But as it reads files, executes commands, and hits errors, its context window fills up with junk stack traces and previous failed attempts. By the time it's 20 steps deep, the original system prompt you carefully crafted is buried. The agent forgets the architecture guidelines. It starts prioritizing the immediate error in front of it over the overall goal. This is when it starts guessing, hallucinating, and making things worse. The Solution: Progressive Disclosure and Empirical Discipline Agent Rigor isn't a new LLM or a magic prompt wrapper. It's an operating system for agents that enforces strict empirical discipline . Instead of one massive prompt, Agent Rigor uses a 3-tier hierarchy: L1 (Apex Kernel): The absolute, non-negotiable laws. (e.g., "Never guess an API signature. Always grep or read the file first.") L2 (Phase Directors): Orchestration that only loads when the agent enters a specific phase (Planning, Execution, Verifica

This is a submission for the June Solstice Game Jam TypeForge: Turing-Inspired Intelligent Typing Coach What I Built TypeForge is a premium typing coach aligned with Apple's Human Interface Guidelines, built to help typists build speed and accuracy through automated, localized error diagnostics. TypeForge analyzes keystroke performance to isolate specific character transitions that cause delay or accuracy drops, then generates custom, adaptive exercises targeting those weaknesses. Developed for the June Solstice Game Jam, the project celebrates the power of computing and accessibility by turning raw diagnostics into a personalized educational experience. The solstice theme represents the journey of transition: taking a typist from darkness, meaning slow, error-prone typing, into light, meaning fluid, expert flow. Video Demo Live Application https://typing-forge-six.vercel.app/ Code https://github.com/shogun444/typingforge Flowchart Architecture graph TD User([User Typer]) -->|Keystrokes| Trainer[Typing Trainer Core] Trainer -->|Log Errors| Zustand[Zustand Stores] Zustand -->|Query Key Stats| Heatmap[Mistake Heatmap] Zustand -->|Identify Weaknesses| Generator[Drill Generator] Generator -->|Focus Word Pools| Trainer Zustand -->|Calculate Performance| Drawer[Analysis Drawer] How I Built It The application was built using Next.js for structure and routing, Tailwind CSS for premium glassmorphism styling, and Zustand for highly responsive state management. Development was accelerated throughout using Google's agentic AI coding assistant, Antigravity. I focused on clean Apple HIG spacing, micro-interactions, responsive scaling, and high-fidelity audio feedback to create a tactile, premium user experience. I also engineered custom canvas-based timeline sparklines to avoid heavy graphing packages and preserve maximum load performance. # === SYSTEM ARCHITECTURE === # app/ # Next.js pages including Settings and Profile views # stores/ # Zustand stores (typing-store, stats-stor

🌍🚀 Project Showcase: Carbon Footprint Tracker I'm excited to share one of my recent projects — a Carbon Footprint Tracker designed to help users better understand their environmental impact and encourage more sustainable lifestyle choices. As developers, we have the opportunity to build technology that not only solves problems but also creates awareness about important global challenges. This project was a great experience in combining technology, user experience, and sustainability into a single application. ✨ Key Features: • Carbon footprint calculation system • Clean and intuitive user interface • Responsive design for all devices • Real-time user interaction • Environmental awareness focused experience • Modern frontend architecture 🛠️ Technologies Used: • React • JavaScript • HTML5 • CSS3 • Git & GitHub 💡 What I Learned: • Building interactive user interfaces • State management and user input handling • Creating responsive layouts • Writing cleaner and more maintainable code • Designing applications around real-world problems 🔗 GitHub Repository: https://github.com/Prem759-0/Challenge-3-Carbon-Footprint 🔗 Live Demo: https://challenge-3-carbon-footprint.vercel.app/ I am continuously improving my skills through hands-on projects and exploring how technology can create meaningful impact. Every project teaches me something new and pushes me one step closer toward becoming a professional Full-Stack Developer. Feedback and suggestions are always welcome! 🙌

The local MCP gateway that cuts tokens ~90% Discussion | Link

Whitespace problems are the ones you can't see until they bite. A pull request where half the "changes" are trailing-space diffs. A shell script that breaks in CI because someone's editor saved it CRLF. A .env with a UTF-8 BOM that makes the first variable name mysteriously not match. A file with no final newline that turns one-line changes into two-line diffs forever. None of it shows up on screen. All of it shows up in git blame . Today, catching this takes three or four tools stitched together — and I got tired of that, so I built wssweep : one zero-config command that finds all the common whitespace smells and, with --fix , cleans them in place. $ npx wssweep src/app.js (2) 14: trailing-whitespace trailing whitespace - missing-final-newline no newline at end of file config.yml (1) - mixed-eol mixed line endings (CRLF×3, LF×1) ✖ 3 whitespace issues in 2 files (mixed-eol=1, missing-final-newline=1, trailing-whitespace=1) $ npx wssweep --fix # clean them It checks seven things: trailing whitespace, mixed CRLF/LF line endings, lone CRs, a missing final newline, extra trailing blank lines, a UTF-8 BOM, and tabs mixed with spaces in one indent. Non-zero exit on findings, so it's a CI gate. pip install wssweep gets the same tool in Python — byte-for-byte identical output and fixes. Why not editorconfig-checker / pre-commit / prettier? Because each does part of it: editorconfig-checker reports — but you have to author an .editorconfig first, and it can't fix anything. pre-commit 's trailing-whitespace / end-of-file-fixer / mixed-line-ending hooks do fix, but only inside the pre-commit framework, and they're three separate hooks. Nobody runs them ad-hoc on a fresh checkout. prettier fixes whitespace only as a side effect of reformatting all your code, and won't touch files it can't parse. dos2unix does line endings and nothing else. wssweep is the one npx / pip command, no config and no framework, that does the whole set at once and drops into any CI regardless of toolch

The problem GitHub shows your pull requests in whatever order they happened to be opened — not in the order they actually need your attention. A one-line typo fix and a PR touching authentication code get exactly the same visual weight in your inbox. Multiply that across a dozen open PRs and you spend more time deciding what to look at than actually reviewing. What I built PR Focus is a Chrome extension (Manifest V3) that sits on top of GitHub's PR pages. It combines three signals into a single priority queue: CI status — failing checks bubble up PR age — stale PRs don't get forgotten AI risk score (0–100) — weighted toward changes touching auth, database, or infra code Each PR also gets a plain-English summary generated from the actual diff (not the title someone wrote at 11pm), and you can generate an approve / request-changes draft review in one click, edit it, and send — without leaving the extension. Why BYOK instead of my own AI backend This was the decision I spent the most time on. Running my own AI backend would have meant: A server in the data path of every PR diff users review — a much bigger trust ask, especially for private repos. Either eating the AI cost myself (unsustainable as a solo dev) or marking it up into a subscription. Going BYOK (bring your own key — OpenAI, Groq, Mistral, or a local Ollama instance) flips both of those: Your GitHub token and AI key live in chrome.storage.local . There's no server of mine in the path — PR diffs only ever go to the AI provider you explicitly configure. Groq's free tier is generous enough to run the AI features for free for most individual workflows. You're paying provider cost directly, with zero markup, if you pay anything at all. How it's built Manifest V3 — required rethinking persistence patterns that worked under MV2's persistent background page; service worker lifecycle and content script injection needed more careful handling. GitHub REST + GraphQL APIs rather than DOM scraping — more upfront work, but

As developers, we often need to store webhook URLs, service endpoints, configuration strings, and other values that we don't want exposed directly in frontend code. Most solutions either require setting up a backend, paying for a service, or managing API keys. API URL (Generate your endpoint here): https://dg-encoder.scriptsnsenses.workers.dev/ So I built DG Encoder . A completely free , no-API-key service powered by Cloudflare Workers that lets developers store and retrieve text-based data through simple endpoints. ✨ What is DG Encoder? DG Encoder is a lightweight API that allows you to: Store any text value Receive a unique ID Retrieve the value later through an endpoint Restrict access to specific domains Edit stored entries Delete stored entries Use the service without API keys Use the service completely free 💸 Free Forever One of the main goals of DG Encoder is simplicity. There are: ✅ No API keys ✅ No signup requirements ✅ No subscriptions ✅ No paid plans ✅ No complicated setup Just open the website, encode your value, and start using it. 🔥 Why I Built It While building web applications, I noticed that many developers need a simple way to hide values from frontend code without setting up a full backend system. Common examples include: Discord webhooks Dynamic configuration values Service endpoints Internal URLs Integration strings DG Encoder provides a quick solution by storing those values behind randomly generated IDs. Your application only needs the generated ID instead of the original value. ⚡ Key Features Encode Anything Store any string and receive a unique identifier. { "id" : "abc123xyz" } Domain Restrictions Limit which websites can access a stored value. For example: example.com myapp.pages.dev Only approved domains can successfully use the decode endpoint. Edit Existing Entries Need to replace a webhook or endpoint? Update the stored value without generating a new ID. Delete Entries Remove data whenever it is no longer needed. No API Key Required De

a fast, glassy clipboard manager for macOS, Windows & Linux Discussion | Link

Foundation models for agentic coding and long-horizon work Discussion | Link

Everyone optimizes the buying experience. Almost nobody builds for what happens after checkout. Every appliance, device, and tool you buy comes with records that matter later: the receipt, purchase date, model number, serial number, the manual, and the warranty terms. Most people have no system for keeping those together — they're scattered across email, a kitchen drawer, screenshots, and random cloud folders. So when something breaks, the warranty claim dies on a single question: "Can you send proof of purchase and the serial number?" That's the gap we're building SnapRegisters for. The simple version of the fix (works with any notes app) The day anything substantial arrives, capture four things: The product The receipt The model / serial label (it fades — grab it early) The warranty card or manual Organize them by product, not by document . Instead of "where's that receipt," it becomes "open the dishwasher record." When support asks for details, it's a 10-second lookup instead of a 20-minute hunt. Where AI actually helps after the purchase The interesting part for builders: the post-purchase layer is a great fit for AI. Point a camera at a receipt and you can extract the model, serial number, and purchase date, then track the warranty automatically — turning a tedious filing chore into a 5-second snap. It's not flashy AI, but it's the kind that quietly saves people money (most warranty coverage goes unused simply because the paperwork is gone). If you've ever eaten a repair bill for something that was technically still covered, you've felt this problem. Curious how other builders think about the "boring but valuable" software gaps like this one. 📲 SnapRegisters is free on iOS: https://apps.apple.com/app/id6757603213