标签：#Productivity

Process mismatch In tools built for Scrum, a task is an input: something you file, size, and work on. In Shape Up, a task is an output — something discovered while building work that was already shaped and bet on. That's the core mismatch, and it plays out differently depending on the tool. Jira Jira does exactly what it was built to do. Its shape is Scrum's shape: a backlog, estimates, sprints. Teams bring Shape Up in anyway and try to make it fit the tool's shape. A scope becomes an epic. A task becomes a ticket. The pitch — Shape Up's document for a problem, its appetite, and a proposed solution — has no equivalent object in Jira, so it ends up living in a Confluence doc, disconnected from the work it's supposed to govern. The substitutions are each small and reasonable on their own: An estimate field is there, so it gets filled in — and the velocity report looks broken without it. Losing bets need somewhere to go, so they land in the backlog. They aren't dead, they're waiting — and now someone has to groom them. Appetite ("how much is this worth") quietly reverts to estimate ("how long will this take"). Before long, the team is running Scrum, with a backlog-refinement meeting back on the calendar. The tool's requirements pull the ceremonies back in. Linear Linear is fast and well made. It even has cycles. The mismatch here isn't a quality problem — it's an inheritance problem. Linear carries the same assumptions as Scrum, just executed better. When a cycle ends with work unfinished, Linear rolls it forward automatically into the next one. It's meant as a convenience feature. It's also the inverse of Shape Up's circuit breaker. Shape Up's bet is that the deadline is real. The whole mechanism depends on a hard stop forcing a decision — cut the scope and ship what's done, while there's still time to make that call. A tool that quietly carries unfinished work forward removes the one moment the method needs. Every six weeks, it says: the deadline was just a suggestio

So I had this idea that kept nagging at me. Every AI chat app works the same way. You type something, the model returns text or markdown, the UI renders it as a nice formatted paragraph. That is fine if you want an answer. It is genuinely boring if you want to actually build something. What if the AI could respond with a working game board you could click? What if saying "make it Barbie themed" actually transformed the whole interface while you watched? What if "add a starfield in the background" dropped an animated canvas behind your chat in real time? I spent a few weeks building exactly that. I call it FlowChat . Here is the live version: https://flowchat-public.varshithvh.workers.dev And yes, someone immediately asked it to play Tic Tac Toe and then asked it to switch to an Oppenheimer theme mid-game. I could not be prouder. The Idea Normal AI chat: model returns markdown, client renders it as text. Simple, predictable, boring. FlowChat: model returns raw HTML with CSS and JavaScript, client injects it directly into the DOM using a streaming protocol built on the browser's native template system. That one change makes the entire experience different. You are not reading about a game. You are playing one. You are not reading about a Barbie color palette. You are sitting inside one. The AI does not just answer questions. It rebuilds the UI from its responses . What You Can Actually Do With It I want to give you a feel for what this means in practice before getting into the technical bits, because the demos are more interesting than any architecture diagram. Games : Ask it to build Tic Tac Toe. You get a playable board, click-to-move, an AI opponent, win detection. Ask for Connect 4. Ask for Snake. The game renders in the chat as an agent bubble with a form inside it. Each move submits to the LLM which processes it and updates only the cells that changed. Themes : Say "change to a Barbie theme". The model injects CSS overrides and the whole interface turns pink. Me

Stop Waiting. Start Building. For a long time, I believed I needed to be "ready." Ready with a stronger portfolio. Ready with more skills. Ready with a clearer career plan. So I waited. Eventually I realized something uncomfortable: Confidence isn't built before you start. It's built because you start. I'm an AI & Data Science graduate figuring things out in public. Right now I'm: Learning AI beyond what college taught me. Building projects that solve real problems. Applying for internships and jobs. Documenting everything I learn. I don't have all the answers. But I do have curiosity. This blog is my commitment to consistency over perfection. I'll be sharing projects, mistakes, things I learn, career experiments, and ideas that hopefully help someone else who's also trying to figure things out. If you're also building before you feel ready Welcome. 🚀 Let's learn together. What was the project that finally pushed you to stop waiting?

It doesn't even have to be a big dramatic failures, more the small moments where something clicked and you went from trusting the output by default to double checking everything. For me it was watching an agent confidently rename a function across twelve files, then leave the original function untouched in a thirteenth file it apparently didn't search, with zero indication anything had been missed. It wasn't even a hard case, the file just wasn't in the directory it happened to grep first. What was your moment? And did it actually change your workflow afterward , or did the trust creep back in after a week like it always seems to for me?

I Built Flowstate Because We Somehow Made Productivity More Complicated Than The Actual Work Live: https://flowstate.chromitedev.xyz/ GitHub: https://github.com/ChromiteDev/flowstate We have a strange problem. Humans built some of the most advanced technology in history. We created: Computers that fit in our pockets Instant communication across the planet Machines that explore space Software that can do incredible things And somehow... We still struggle with: "What should I actually focus on today?" That is the problem I wanted to solve. So I built Flowstate . The productivity paradox We have never had more productivity tools. Seriously. Think about it. There are apps for: Tasks Notes Calendars Habits Goals Projects Time tracking Team management There is probably an app to help you organize the apps that organize your life. At some point we stopped being productive and started managing productivity. The funniest part? Sometimes creating the perfect productivity system becomes the biggest productivity project. You spend two hours making a beautiful workspace... Then realize: You have done absolutely nothing. A masterpiece of organization. Zero progress. The moment I realized something was wrong I noticed a pattern. People were not struggling because they were lazy. They were struggling because their attention was constantly being divided. Every day we fight: Notifications Endless information Too many choices Too many responsibilities Too many things competing for our attention The internet gave us unlimited access to information. But our attention? That is still limited. The question behind Flowstate I kept coming back to one question: "What actually deserves my attention right now?" Not: "What are all the possible things I could do?" Not: "How can I create the most complicated workflow imaginable?" Not: "Should I reorganize my folders for the fifth time?" (We have all been there.) The goal was simple: Create a tool that helps people find clarity. Introducing Flowsta

We've all had the same experience. You ask your coding agent to integrate with a new platform. It confidently writes code. It references endpoints that don't exist anymore. It misses required headers. It mixes API versions. It hallucinates authentication flows. None of this is surprising. Large language models don't "know" an API. They know about an API from their training data. Even when you hand them documentation, they're still trying to reconstruct a mental model from hundreds or thousands of pages of text. The problem isn't writing code. It's building context. Understanding an API is still mostly manual Every integration starts the same way. Read the authentication docs. Figure out the important entities. Learn the object relationships. Understand the common workflows. Find the endpoints that matter. Jump between documentation tabs for an hour. Only then do you actually start building. Ironically, AI made writing code dramatically faster while leaving this entire process mostly unchanged. Documentation wasn't designed for AI Most documentation is optimized for humans. OpenAPI specifications are optimized for machines. Neither tells the complete story on its own. The spec explains what exists. The documentation explains why it exists. Neither builds a coherent mental model. I wanted a better starting point That's why I built Scout. Scout takes an OpenAPI specification and the accompanying documentation, then synthesizes them into a grounded understanding of the platform. Instead of asking: "Can Claude figure this out?" The workflow becomes: import the API crawl the documentation build an understanding ask questions against grounded context generate integration code expose the same understanding to coding agents through MCP Everything runs locally. No hosted backend. No accounts. No telemetry. The interesting part isn't the AI The AI chat isn't the product. The generated code isn't the product. The MCP server isn't even the product. The product is the context tho

I run a consumer product company by myself. Physical inventory, two storefronts, multiple marketplaces, subscription billing, bookkeeping, tax filings, government paperwork, content in two languages, and a codebase that ships to production most weeks. Headcount: one. Not "one plus a virtual assistant." One. Three years ago this was not possible. It is also not possible today by keeping a chat window open and asking it questions. The thing that changed is not that models got smarter in the abstract. The thing that changed is that agents can now operate software the way an employee does : click through admin dashboards, fill in government forms, read email, write and deploy code, remember what happened last Tuesday, and run on a schedule without being asked. Once that is true, most of what a small company's staff does becomes a workflow you can write down, hand to an agent, and audit weekly instead of doing daily. Everything I run sits on five primitives. Tool names will churn every six months. These won't. 1. A browser-operating agent An agent that drives a real browser session with my real logins: seller dashboards, banking portals, government sites, ad platforms, email. This is the highest-leverage primitive, and it is the one most people skip. The reason is uncomfortable: roughly 90% of small-business operations live behind a login wall with no usable API. Your marketplace seller console. Your payment provider's merchant dashboard. Your country's tax portal. The grant program that still ships application forms as attachments. If your automation strategy requires an official API for everything, you will automate the 10% that already had one, and you will still be doing the other 90% by hand at 11pm. The browser agent is my hands. It logs in, navigates, reads what's on screen, fills forms, downloads documents, and reports what it found. 2. A coding agent An agent that reads my repositories, writes changes, opens a review pass, and deploys. I treat it exactly like a

This series follows a fictional conversation between an experienced engineer and his nephew. Every episode explores one stage of how software moves from an idea to production. 👦 Nephew: Uncle, requirements are clear. I checked the codebase — there's already a FavoritesService I can extend for Wishlist. Now can I open VS Code? 👨‍🦳 Uncle: Almost. Tell me — what do you think HLD even is ? You've heard the term in every interview. What do you think it actually means? 👦 Nephew: Some kind of... diagram? Boxes connected with lines, before you start coding? 👨‍🦳 Uncle: That's what it looks like. That's not what it's for . Let me ask differently. Why do you think experienced engineers insist on drawing this before touching code, when they could just start building? 👦 Nephew: ...to plan the work? 👨‍🦳 Uncle: Closer, but still not it. Here's the real answer: HLD exists to decide, in advance, where the walls go — so that six months from now, when someone adds a new feature, they know exactly which room to build it in, without knocking down a wall that was holding up the ceiling. 👦 Nephew: That's a strange way to describe a diagram. 👨‍🦳 Uncle: Then let me show you, instead of describing it. That's the only way this actually lands. What Talks to What 👨‍🦳 Uncle: Suppose we're building this at Flipkart. Not a college project — a company with hundreds of live services, where breaking one thing can affect ten others you've never even heard of. Here's the simplest picture for Wishlist. Frontend ↓ Wishlist API ↓ Wishlist Service ↓ Database 👦 Nephew: That's it? Four boxes? 👨‍🦳 Uncle: That's it. HLD answers exactly one question, and nothing more — what talks to what. Not how the button looks. Not what fields the database table has. Just: which component calls which, and in what direction. 👦 Nephew: Then why does everyone treat it like it's such a big deal? This took ten seconds to draw. 👨‍🦳 Uncle: Because the value isn't in the ten seconds you spend drawing it today. The value is in what i

Did you know that Kiro doesn't just have a Spec-Driven Development (SDD) flow, but also a bug fix workflow that helps you resolve one issue at a time? That's one of seven features worth knowing about. If you're completely new to Kiro, it's an agentic harness for the CLI, web, IDE, iOS, and more. It helps teams and individuals do their best work while coding. I've been using it since it launched in July last year, and I keep finding features I didn't know were there. (Full disclosure: I'm a Developer Advocate at AWS, and Kiro is a part of AWS. I use it every day, and I'll be forthcoming about the parts that are still preview or experimental.) Heads up: Kiro ships fast. I've flagged the version-sensitive bits of these features inline. Check the docs if something looks different in your build. 1. Stop approving every single command After talking to a lot of people about Kiro, one of the main pieces of feedback I get is on approving commands. When Kiro asks permission to run a shell command, the default reaction is to hit yes and move on. Then it asks again for the next git command. And the next one. Press Tab instead in the CLI. This allows you to edit it and put the exact permissions you'd like. For example you can be pickier on the trust tiers: git pull --rebase # this exact command git pull * # git pull with any arguments git * # anything git * # the entire shell tool Whatever you pick persists for the session and gets stored as a regex in your agent's allowedCommands . There's also /tools trust-all , which trusts everything. It's the documented replacement for the old /acceptall , and the security docs are blunt about it: don't use it in production or with sensitive data, and you're responsible for whatever it does. One version note: on CLI v3 this moves to a permissions.yaml file, so the agent JSON advice above is v2. More on v3 in a minute. Full details: tool permissions 2. The # menu is bigger than #file in the IDE Type # in the IDE chat and you get a list of co

Why Claude Code runs on Bun: runtime tradeoffs in TypeScript CLI tooling Anthropic recently shipped Claude Code — their agentic CLI coding assistant — on Bun instead of Node.js. For most product announcements, the runtime choice would be a footnote. Here it's worth unpacking, because the tradeoffs Anthropic navigated are exactly the ones you hit when building or evaluating TypeScript-heavy developer tooling: startup latency, bundling strategy, native module compatibility, and what "good enough" dependency management actually looks like in 2025. This isn't a Bun vs. Node benchmarking post. It's an examination of why the decision makes sense for a CLI tool specifically, what it signals about the broader ecosystem, and where the tradeoffs still bite you. Why runtime choice matters more for CLIs than for servers For a long-running server process, Node.js startup cost of 50–150ms is irrelevant — you pay it once. For a CLI invoked dozens of times per development session, cold-start latency is a first-class UX concern. Bun's startup time is consistently in the 5–15ms range for a simple script. Node.js lands closer to 50–80ms before your first line of application code runs. That delta is imperceptible in a single invocation. Run a CLI 30 times in a session and you've saved a couple of seconds — more importantly, you've removed the subjective sense of lag that makes a tool feel heavy. This is the same reason Deno has gained traction in scripting contexts despite losing the server-side battle to Node. Fast startup is a feature, and for AI-assisted tooling where the human is waiting in a tight feedback loop, it matters. Bun's bundler as a distribution primitive Bun ships a first-party bundler. For a CLI, this is significant. The standard Node.js distribution story for a TypeScript CLI involves: Compile TypeScript with tsc or esbuild Bundle with esbuild or rollup to collapse the dependency graph Either ship node_modules (large, fragile) or use a tool like pkg or nexe to produce

Free Online PDF Converter – Word, HTML, Image & More Tools Free online PDF converter with complete privacy protection. Merge, split, compress, sign, and convert PDFs directly in your browser — plus a free age calculator and scientific calculator. No uploads, no data storage. onepagepdfconverter.com I built One Page PDF Converter (onepagepdfconverter.com) — a set of 20+ PDF tools (merge, split, compress, sign, convert to/from Word/Excel/PowerPoint/images, etc.) plus a couple of everyday calculators, all running entirely client-side in the browser. There's no backend processing your files: no upload, no storage, no server round-trip. Everything happens locally via JS, so your documents never leave your device. That's the whole pitch — it's the same reason I built it, since most PDF tools online quietly funnel your files through a server you have no visibility into. All 20+ tools are free with no sign-up. Today I'm adding a small premium option: batch processing, for ₹9.99 per batch (~$0.10 USD), one-time — no subscription. Run a tool across multiple files in one go instead of one at a time. Everything else on the site stays free and unlimited. Tech-wise it's a single HTML file backed by client-side JS libraries — no framework, no build step. It's a PWA, so it installs and works offline once loaded. Would love feedback — especially on the privacy angle, the batch pricing, or tools you think are missing. Free Online PDF Converter – Word, HTML, Image & More Tools Free online PDF converter with complete privacy protection. Merge, split, compress, sign, and convert PDFs directly in your browser — plus a free age calculator and scientific calculator. No uploads, no data storage. onepagepdfconverter.com

A few months ago, I submitted a talk proposal to WordCamp US without really knowing what to expect. Today, I'm happy to say that it was accepted, and I'll be speaking at one of the largest WordPress conferences in the world. WordCamp US has always been one of the events I've looked up to in the WordPress ecosystem. As someone who has spent over a decade building content platforms with WordPress, contributing to open source, and working with teams across different countries, having the opportunity to share my experience on that stage is something I don't take for granted. My session is: Stop Blaming WordPress: Building a Real Editorial Workflow Without Leaving the Ecosystem Throughout my time working with WordPress, I've noticed a recurring pattern. When editorial teams struggle to publish content efficiently, WordPress often gets the blame. But after working with organizations of different sizes, I've learned that the CMS is rarely the real problem. The real challenges are usually: disconnected editorial processes; unclear content ownership; missing approval workflows; inconsistent governance; too much reliance on manual work. In this session, I'll share practical strategies for building scalable editorial workflows while keeping WordPress at the center of the ecosystem. The goal isn't to introduce another platform, it's to make the existing one work better. Speaking at WordCamp US is especially meaningful because I've been part of the WordPress ecosystem for many years. Being able to give something back to this community is an opportunity I'm genuinely grateful for. If you'll be at WordCamp US 2026 in Phoenix, I'd love to connect. 🎟️ Get your ticket: https://us.wordcamp.org/2026/tickets/ 💸 Use my speaker discount: speaker-friend20 during checkout for a discount on your ticket. See you at WCUS! 🚀

AI design tools have gone from generating blurry wireframe suggestions to shipping functional,...

I didn't set out to build a developer tool. For a long time now I've been working with AI on everything in my life — daily conversations about my daughters, planning projects, ideas for ones that don't exist yet. The goal was always the same: ease my life, get more done, and break the barrier between human and AI — stop treating it as a search box, start treating it as a partner. Somewhere along the way, the partnership got serious. The workspace where my projects live grew an instruction system for AI coding agents — the files everyone is writing now: AGENTS.md , CLAUDE.md , a skills directory, rules for how agents should plan, log, and verify their work. Then I asked an uncomfortable question: is any of it actually followed? Not "do the agents seem to follow it." Could anyone tell , from the repository alone, whether an instruction was followed? For most of my rules, the answer was no. My own audit found that the two checks my instructions said must run before every commit were invoked by nothing — no CI, no hook, no scheduled task. The rule had been enforced, for its entire life, by whoever remembered. Replaying my last 200 commits, the index-freshness rule alone would have failed on 29 of 61 eligible commits — roughly half. My instructions were not rules. They were hopes with formatting. So I wondered whether everyone else's are too. I wrote a tool and measured. What I measured, and the two honest limits that come before the numbers I analysed eight public agent-instruction collections — 1,332 instruction units, 17,611 individual instructions — each at a pinned commit SHA, with the raw per-repo JSON published alongside the tool. An instruction counts as CHECKABLE if a reviewer could tell from the repo whether it happened: it's a tick-box, or contains a runnable command, or names a concrete file artifact, or refers to an exit code, a diff, an assertion. Everything else is CLAIMABLE — the only evidence it happened is the agent saying so. Two limits, before any num

How you doin'? Let's talk about the Iconic thing we heard a lot: "server down, try later." Your daddy said it while trying to book a Tatkal ticket. Your cousin said it the day JEE results dropped and the portal turned into a spinning wheel of despair. It's become our national way of shrugging at technology — like the internet is weather, and servers just... go down sometimes, nobody's fault, act of god, try later na. Except it's not weather. Every single time a site goes down, there is a specific , findable reason, sitting in a log or a trace somewhere, and almost nobody ever looks at it because looking at it is annoying and "try later" is right there, free, zero effort. So for a hackathon, I decided to stop saying "server down hai" and start actually finding out what "down" means. I built a fake exam-results website, gave myself the power to break it on command, and then made myself watch — using an observability tool called SigNoz — exactly what "down" looks like from the inside, every single time. Turns out "server down" is not one thing. It's at least four different things wearing the same trench coat. Suspect #1: The database that forgot how to hurry This is the boring one and also the most common one. Somewhere behind your "check result" button, there's a database being asked a question, and sometimes that question takes way longer to answer than it should — too many people asking at once, a badly written query, whatever. The site isn't "down." It's just... waiting. Politely. Forever. I simulated this by literally telling my backend to nap for 3 seconds before touching the database: with tracer . start_as_current_span ( " db.query " ) as db_span : if state . db_slowdown : db_span . set_attribute ( " chaos.triggered " , " db_slowdown " ) time . sleep ( state . db_slowdown_seconds ) Then I opened SigNoz's trace explorer, sorted by duration, and there it was — a fat, unmissable span sitting right at the top labeled db.query , 3 seconds wide, with an attribute lit

The Scene It's 2 AM. You're staring at your screen, debugging why your dashboard keeps showing yesterday's data even after you've changed the filter. Your useEffect dependency array looks like a crime scene. You've got three useState hooks just to manage loading, error, and data. You added a cleanup function, but somehow the component still throws that dreaded warning: "Can't perform a React state update on an unmounted component." You take a sip of cold coffee. You wonder where it all went wrong. The Problem with useEffect for Data Fetching Let's be honest with ourselves. useEffect was never designed for data fetching. The React team gave us this hook to synchronize with external systems, DOM events, subscriptions, and timers. But somewhere along the line, we collectively decided to use it as our go-to tool for API calls. And look, I get it. When you're learning React, the pattern is simple: useEffect (() => { const fetchData = async () => { setLoading ( true ); const response = await fetch ( ' /api/users ' ); const data = await response . json (); setUsers ( data ); setLoading ( false ); }; fetchData (); }, []); It works. Until it doesn't. Here's what happens when your application grows: Race Conditions — When your user clicks filters too quickly, old requests return after newer ones and override your state. The UI shows mismatched data, and you waste hours adding request cancellation logic that nobody on your team fully understands. Unnecessary Re-renders — Every state update triggers a re-render. With useEffect , you're juggling at least three states: data , loading , and error . Three states, three renders, even before React mounts your actual content. Poor Caching — If a user visits a page, leaves, and comes back, your useEffect fires again. Same data, same API call, same network cost. Multiply this by a thousand users, and you're burning your backend for no good reason. Manual Cleanup Headaches — Need to cancel pending requests? Need to prevent state updates

LLM applications fail silently at the semantic level. Standard unit tests verify that functions return values, but they cannot detect if the output is factually wrong, off-tone, or missing steps. Evals fix this by running a prompt, inspecting the output, and programmatically or judgmentally deciding its quality. Why LLM Testing is Different Unit tests break on non-determinism. Temperature-driven randomness means identical inputs produce varying valid outputs, which defeats static equality checks. Semantic equivalence ("Paris is the capital" vs. "Capital is Paris") makes string matching useless. Small model or prompt updates cause gradual quality drift that only surfaces at scale. Tone and accuracy require judgment that basic assertions cannot encode. The Three Eval Types 1. Heuristic Evals check measurable properties: JSON validity, word counts, PII presence. They are fast and objective — ideal for regression gates on every pull request. 2. LLM-as-Judge uses a second LLM to grade output against a rubric. Best for subjective content too complex for code but too vast for manual review. 3. Human Evals are the ground truth. Use them to build your golden dataset, calibrate the LLM judge, and finalize decisions before major releases. Building Your Eval Infrastructure Start minimal: a Python script, a JSON file of test cases, and a loop comparing LLM output against assertions or a rubric. Curate a golden dataset of 500–1000 production-representative requests including edge cases and adversarial prompts. Refresh it quarterly to match user behavior drift. Automate the harness in GitHub Actions. Block deployments when pass rates drop below your threshold (90% is a common starting point). Run fast heuristic tests on every PR and full LLM-judge evals nightly. Key Tools PromptFoo — Open-source, YAML-based test cases with a built-in CLI runner and diff reporting. Braintrust — Hosted platform for dataset management and experimental comparison. Inspect — Open-source framework by th

Table Of Contents What is a Git worktree? Why use worktrees instead of several clones? A practical directory convention Everyday Git worktree commands Consolidating several independent clones Safety rules before starting Phase 1: Inventory every clone Phase 2: Choose the canonical repository Phase 3: Decide what each clone should become Phase 4: Convert one clone Moving a worktree Recovering a deleted .git worktree file When should a worktree be locked? When should git worktree prune be used? Final validation Quick reference Closing thoughts Have you ever ended up with a directory structure like this? ~/src/project ~/src2/project ~/src3/project ~/src4/project Each directory started innocently enough. One was for main . Another was for a feature branch. A third contained a half-finished experiment. The fourth had several untracked test files you were afraid to lose. Eventually, each clone had its own: stale view of the remote repository, duplicated Git history, local-only commits, modified files, ignored test artifacts, and unknown relationship to the others. Git worktrees are designed to solve this problem. A worktree gives you multiple checked-out working directories backed by one shared Git repository. Each working directory can have its own branch and uncommitted changes, while commits, branches, tags, remotes, and fetched objects remain shared. This article covers two things: How to use Git worktrees during normal development. How to safely consolidate several independent clones into one worktree-based layout without losing local work. The shell examples are written to work in both Bash and zsh . What is a Git worktree? A normal Git clone contains: the object database, commit history, branches, tags, remotes, remote-tracking references, and one checked-out working directory. A linked worktree adds another checked-out working directory to that same repository. For example: ~/src/project main ~/src/project-FEATURE-123 FEATURE-123 ~/src/project-HOTFIX-456 HOTFIX-45

Hey folks 👋 If you've ever wanted to save a video lecture, a livestream replay, or a podcast episode for offline listening, you've probably run into the usual options: sketchy "online video parser" websites that ask you to paste your link into their server, or desktop apps that want you to sign up and upload stuff. Neither feels great when the whole point is your content. I went looking for something better and ended up working with FlowPick — an open-source, privacy-first media downloader that runs entirely in your browser. No uploads, no accounts, no telemetry. Everything (sniffing, downloading, merging, transcoding) happens client-side with FFmpeg compiled to WebAssembly. In this tutorial we'll: Clone and run FlowPick locally Download our first HLS ( .m3u8 ) and DASH ( .mpd ) stream Build and deploy it Poke at the internals so we can customize it If you just want to try it without installing anything, there's a hosted version at https://flowpick.net (more below). The full source is on GitHub: https://github.com/ezwebtools/flowpick . 🔗 Repo: https://github.com/ezwebtools/flowpick · Live tools: https://flowpick.net A 30-second primer: what are HLS and DASH? Before we touch code, two words you'll see everywhere in this space: HLS (HTTP Live Streaming) uses a .m3u8 manifest that lists small .ts (or fMP4) segments. Common for live streams and a lot of video platforms. DASH (Dynamic Adaptive Streaming over HTTP) uses a .mpd manifest; video and audio usually travel as separate .m4s tracks. YouTube and Bilibili lean on this. The key idea: the "video" isn't one file. It's a playlist pointing at dozens (sometimes hundreds) of tiny segments. A downloader's job is to fetch all the segments, decrypt them if needed, and stitch them back into one playable file. That's exactly what FlowPick does — in the browser. What FlowPick is, in one paragraph FlowPick is a Nuxt 4 app that ships in two shapes: A browser extension that sniffs media from the current tab's network requests. An

Why browser-based? Every other "online tool" site uploads your PDFs and images to their server for processing. That means: Your sensitive documents sit on someone else's machine Processing speed depends on their server load File size limits, watermarks, or forced signups I built everything using client-side processing — Canvas API, pdf-lib, Tesseract.js (WebAssembly), and more. Your files literally never leave your device. What's included PDF Tools (28): Merge, split, compress, convert to Word/Excel, password protect, watermark, page numbers, metadata editor Image Tools (30): Compressor, background remover, crop, resize, DPI changer, EXIF viewer/remover, OCR (image to text), meme generator, QR code generator Developer Tools (42): JSON formatter, JWT decoder, Base64/Base32 encoder, regex tester, cron generator, SQL formatter, CSS/JS/HTML minifier Design Tools (14): CSS gradient, box shadow, border radius generators, color contrast checker (WCAG), Tailwind component builders Calculators (16): EMI, SIP, BMI, compound interest, salary tax, GST/VAT, ROI, fuel cost Plus text tools, unit converters, YouTube tools, utilities, and more. Tech Stack Next.js 15 (static export, deployed on Cloudflare Pages) TypeScript (strict mode) Tailwind CSS (dark mode) pdf-lib, pdfjs-dist (PDF processing) Tesseract.js (OCR — WebAssembly, zero dependency on external APIs) @imgly /background-removal (on-device AI background removal) SEO and Performance Every tool page includes: FAQ + HowTo structured data (visible in Google rich results) BreadcrumbList schema BlogPosting schema for blog articles Keyword-optimized titles and descriptions OG images for social sharing next/image with priority hints for fast LCP Try it toolshubs.app Looking for feedback — especially on the image compressor, PDF merger, and background remover. What tools would you add next?