标签：#dev

Every Flutter developer has run into the Sticky State Dilemma . You build a login screen. When authentication fails, your state container emits an error. You catch it in your UI and show a SnackBar . Everything works—until the user rotates their phone, pulls down the notification shade, or types on the virtual keyboard. Suddenly, the widget tree rebuilds. The state container is still holding AuthErrorState("Invalid password") . The UI listener fires again. And a duplicate snackbar appears out of nowhere. In this article, we’ll explore why domain state machines struggle with transient UI events, how the classic BLoC community worked around this with package:bloc_presentation , and how BlocSignal lets you handle one-shot side effects cleanly with zero additional package dependencies . 1. The Root Problem: Persistent State vs. Ephemeral Actions State management in Flutter is designed to model persistent truth over time: Is the user logged in? AuthState.authenticated(user) Is data loading? TodoState.loading What is the cart total? $49.99 Persistent state answers: "What is the system's current condition?" In contrast, UI presentation actions are ephemeral pulses : Show a brief SnackBar toast. Pop up an alert confirmation dialog. Push a new route on the Navigator stack. Vibrate the haptic motor. These actions answer: "What just happened that requires a one-time reaction?" ┌────────────────────────────────────────────────────────┐ │ State vs. Effects │ ├────────────────────────────┬───────────────────────────┤ │ Persistent State │ Ephemeral Side-Effect │ ├────────────────────────────┼───────────────────────────┤ │ • Survived by UI rebuilds │ • Consumed once & gone │ │ • Represented in signals │ • Triggered by an event │ │ • Backed by equality diffs │ • Zero domain state footprint │ └────────────────────────────┴───────────────────────────┘ 2. The Legacy Workarounds (And Their Hidden Costs) Historically in package:bloc and package:flutter_bloc , developers used one of three

The difference between a good infrastructure troubleshooter and someone who restarts services and hopes is a mental model. When "HTTPS times out" lands in your inbox, you don't guess — you know exactly which layer to interrogate first, and in what order. The network is a stack, so treat it like one Every request rides through the same layers, top to bottom: Application → TLS → Port → DNS → Gateway → Route → Interface That's the dependency order — TLS can't work if the port is closed, the port is meaningless if DNS resolved to the wrong host, and none of it matters if your interface has no IP. So you verify in the inverse order, from the ground up: Interface → IP → Route → Gateway → DNS → Port → TLS → Application Start at the bottom because a broken lower layer produces confusing symptoms higher up. Confirm each layer is healthy before you climb. The moment a layer fails, you've found your problem — everything above it is a red herring. Walk it: "HTTPS to api.example.com times out" 1. Interface — do we have a link and an address? ip addr show Look for your primary interface (say eth0 ) in state UP with an inet line like 192.168.1.20/24 . No inet ? DHCP failed or the link is down — stop here, nothing above will work. If the address is present and sane, climb. 2. Route — is there a path to the destination? ip route get 93.184.216.34 This shows the exact route the kernel would pick, including the source IP and gateway ( via 192.168.1.1 dev eth0 src 192.168.1.20 ). If you get "Network is unreachable" or no default route, you've found it. This is also the signature behind the classic curl error "No route to host." 3. Gateway — can we reach the first hop? ping -c3 192.168.1.1 ip neigh show ping tests reachability; ip neigh shows the ARP table. A gateway entry in state REACHABLE with a MAC address means L2 is fine. FAILED or INCOMPLETE means the gateway isn't answering ARP — a VLAN, cabling, or firewall problem. Note that many hosts drop ICMP, so treat a failed ping as a hi

The Quest Begins (The "Why") I remember the first time I tried to take a weekend side‑project from my laptop to something that felt “real”. I had a cute Express API that talked to Postman, a PostgreSQL container spun up with docker-compose up , and a React front‑end that lived in its own dev server. Everything worked beautifully … until I hit Ctrl+C on my laptop and the whole thing vanished. I needed a way to say, “Hey, keep this running even if I close my laptop, and if something crashes, bring it back up automatically.” I started poking at Docker Swarm, then Nomad, but the docs felt like reading ancient runes. That’s when a coworker slid over a Slack message: “Just try a Kind cluster. It’s K8s locally, and you’ll see why everyone talks about it.” Spoiler: it felt like discovering the secret level in a classic arcade game. Suddenly I could describe what I wanted my system to look like, and the cluster would make it happen — no more babysitting containers. The Revelation (The Insight) Kubernetes isn’t a mystical black box; it’s a declarative orchestrator . You tell it the desired state of your application (how many replicas, which image, what ports to expose) and it works relentlessly to match reality to that state. If a pod dies, Kubernetes spins up a new one. If you ask for three replicas and only two are running, it creates the missing pod. If you update the image tag, it rolls out the change pod‑by‑pod, keeping traffic flowing. Think of it like the save‑game system in a RPG: you define the story you want to experience, and the engine handles the gritty details of loading, saving, and recovering from crashes. The core objects you’ll meet early on are: Pod – the smallest deployable unit (one or more tightly coupled containers). Deployment – manages a set of identical pods, handles updates and rollbacks. Service – a stable network endpoint that load‑balances traffic to a set of pods. Ingress (optional) – exposes HTTP/HTTPS routes from outside the cluster to service

This is a submission for Frontend Challenge - Comfort Food Edition, Perfect Landing What I Built For the Perfect Landing prompt, I built Masala Dosa House , a warm and modern landing page inspired by one of my favorite comfort foods — South Indian Masala Dosa . 🇮🇳 The idea was to create a fictional restaurant website that feels like stepping into a familiar neighborhood dosa spot. The landing page focuses on: 🍽️ Hero section featuring Masala Dosa 🥞 Signature dishes 🥥 Chutneys and sambar 🌿 Traditional South Indian food experience ❤️ A warm, welcoming visual design 📱 Responsive layout for desktop and mobile ✨ Smooth interactions and animations 🎨 Food-inspired colors, typography, and visual elements 📍 Restaurant-style call-to-action sections Rather than creating a generic restaurant landing page, I wanted the entire experience to communicate the feeling behind comfort food — warmth, familiarity, and home . Demo 🍽️ Live Project: Masala Dosa House — A Taste of Home View the Masala Dosa House project on CodePen Journey I started by thinking about what makes a food website feel different from a regular landing page. For me, comfort food isn't only about the food itself. It's about the experience around it — the aroma, the warmth, the familiar presentation, and the feeling of sitting down for a meal that you already know you'll enjoy. That became the design direction for Masala Dosa House . I used a warm visual palette inspired by dosa, banana leaves, spices, chutneys, and traditional South Indian dining. The layout was designed to keep the food as the main focus while making the page easy to navigate. Building the experience I structured the landing page around a simple restaurant journey: Discover → Explore → Choose → Visit The hero section introduces the restaurant and immediately establishes the comfort-food theme. The menu section highlights signature dishes, while supporting sections provide more context about the restaurant and its food. I also focused on making the

This is a submission for Frontend Challenge - Comfort Food Edition, CSS Art . Inspiration For my CSS Art submission, I wanted to create something that represents comfort food from South India — Masala Dosa . 🇮🇳 A crispy, golden dosa served with potato masala, coconut chutney, tomato chutney, and a warm bowl of sambar is more than just a meal. It's one of those dishes that immediately feels familiar and comforting. I decided to recreate the entire plate using HTML and CSS , without using food images or external graphics. The goal was to turn a simple plate of masala dosa into a small CSS illustration while keeping the focus on CSS techniques such as: CSS gradients Radial and repeating gradients Border-radius based shapes Box shadows Pseudo-elements CSS animations Responsive layouts Layering and positioning The project is called "CSS Masala Dosa — A Plate of Comfort" . Demo 🍽️ Live CodePen Project: CSS Masala Dosa — A Plate of Comfort View the CSS Masala Dosa project on CodePen Journey I started with the idea of creating a single plate entirely from CSS . Instead of using an image for the dosa, I built the main shape using layered gradients and rounded shapes. The different colors and textures help create the crispy, golden appearance of the dosa. Then I added the individual elements of the meal: 🥞 Masala Dosa — built using multiple gradients, shadows, and layered shapes. 🥔 Potato Masala — represented using small CSS shapes for potato pieces, onions, and curry leaves. 🥥 Coconut Chutney — created using a circular CSS shape with subtle texture details. 🌶️ Tomato Chutney — another CSS-only circular element with layered gradients. 🥣 Sambar — built as a small bowl using nested circular elements and gradients. 🌿 Banana Leaf — created with gradients, shadows, and a CSS vein to give it a natural appearance. ♨️ Steam — animated using CSS @keyframes to give the dosa a freshly-served feeling. One of the things I particularly enjoyed was creating the food textures without images

This is a submission for Frontend Challenge - Comfort Food Edition, Perfect Landing What I Built Karachi Ki Raatein ("Karachi's Nights") — a single-page love letter to the street food that keeps my city awake after dark. Instead of a restaurant or a recipe box, I built it around a real pattern from home: Karachi basically runs on an unofficial food schedule. Maghrib means chai and something fried. Bun kabab happens standing up, mid-errand. Nihari is what you sit down for after Isha. Seekh kabab shows up wherever there's smoke. And halwa puri at 3am is for the people who never went to sleep in the first place. The whole page is built around that rhythm instead of a menu. A few things I'm happy with on the frontend side: A signboard hero with a flickering neon-style headline and hand-drawn CSS/SVG steam rising from a cup — no stock photography anywhere on the page, everything is drawn. A canvas-based particle steam system that replaces the static SVG once JS is available — real particles with drift, turbulence and upward acceleration, and they physically scatter when you move your cursor through them, like waving your hand through actual steam. A live "Night Clock" that reads your real local time ( Date , your timezone, nothing hardcoded) and marks whichever stall is "in season" right now with a pulsing "you are here" badge — so the page behaves differently depending on when you actually open it. A theme built for the medium : dark ink background, ember/turmeric accent colors, a hand-lettered chalk font for the "voice" of the thela-wala mixed with a bold display face for the signage, instead of the usual cream-and-terracotta food-site look. Respects prefers-reduced-motion everywhere (falls back to a static SVG steam loop and skips the canvas sim), keyboard-focusable throughout, fully responsive. Demo Journey I wanted to avoid the obvious comfort-food landing page — cream background, terracotta accents, a hero photo of a steaming bowl. It's a solid look but I see it ev

If you've only ever shipped linear-gradient(to right, blue, red) , you're using about one-third of what CSS gradients can do. There are only three functions, and the mental model for each is small. Here's the whole thing in one read. The one fact that makes everything click A gradient is not an image file. Per MDN , a <gradient> is a special kind of <image> that the browser generates at render time . So it: scales to any size without blurring (it's drawn, not sampled) weighs zero bytes (no file, no HTTP request) edits with one hex value instead of a re-export That's why gradients exist. Everything below is just how to steer them. Three functions, three shapes Function Shape Reach for it when linear-gradient() straight line along an axis backgrounds, buttons, overlays radial-gradient() outward from a center point spotlights, glows, vignettes conic-gradient() rotational sweep around a center pie charts, color wheels, spinners Linear - the workhorse background : linear-gradient ( to right , #ff7e5f , #feb47b ); /* orange→peach */ background : linear-gradient ( 135 deg , #6366 f1 0 %, #ec4899 100 %); /* indigo→pink */ Direction is an angle ( 45deg ) or a keyword ( to right , to top right ). Stops are a color plus an optional position. Radial - when the fade should read as light background : radial-gradient ( circle , #fff , #000 ); Shape ( circle vs ellipse ), center position, and sizing keywords ( closest-side , farthest-corner ) do the work. Because the fade tracks distance from a point, radial reads as depth - perfect for glows, vignettes, and spotlight effects. Conic - the one most people skip background : conic-gradient ( #f00 0 25 %, #0 f0 25 % 50 %, #00 f 50 % 75 %, #ff0 75 %); Conic sweeps by angle , not distance. That single difference makes it the right tool for pie charts and color wheels - effects that were hacky before conic-gradient() shipped. The rule that surprises everyone Two color stops at the same position don't fade - they make a hard edge: backgrou

Introduction For the past 10 days, I took part in the 10 Days of AI Voice Agents — #VoiceForBharat Edition challenge. During this challenge, I built an AI voice agent named Sadie. My goal was not just to make an AI that could talk. I wanted to build a voice agent that could understand users, remember conversations, use tools, make phone calls, connect users to humans, and hand conversations to specialist agents. This journey helped me understand that building a voice agent is much more than connecting an LLM with a text-to-speech API. The Problem Many people find it easier to speak than type. This can be especially useful for people who want to: Ask questions using their voice Learn through conversation Get quick information Speak in Hindi or English Use Hindi and English together Get help without using complicated interfaces I wanted to build a voice assistant that could make learning and getting information feel more natural. Instead of typing a question, users can simply speak to Sadie. What I Built Sadie is an AI voice agent that can: Have real-time voice conversations Understand Hindi-English code-mixed conversations Follow personality and safety rules Remember information with user permission Use external tools Make outbound phone calls Escalate conversations to humans Track call information Hand conversations to specialist agents The specialist agents I built are: Grammar Specialist Maths Specialist Full Stack Development Specialist How the System Works The basic architecture of my project is: User | | Voice ↓ LiveKit | ↓ Deepgram STT | ↓ Google Gemini / | \ / | \ Memory Tools Specialists \ | / \ | / ↓ Murf Falcon | ↓ User Voice Main Components Deepgram handles Speech-to-Text. Google Gemini acts as the brain of the agent and understands the user's request. Murf Falcon converts the AI's response into natural speech. LiveKit handles real-time audio communication. I also added memory, external tools, telephony, human escalation, analytics, and specialist agents

🌀 MOKSHA Devlog — August 15, 2026 Overview Today's session focused on implementing and refining the Shareera Gatee (body-motion) mechanic as a companion to Samaya Gatee (time-flow). Major work included UI/UX polish, physics integration, and karmic carry-over mechanics for praarabdha (accumulated karma from past lives). Commits & Changes 1. UI: Added HUD Element for Shareera Gati Commit: 8874bcc | 06:33 UTC Scope: HTML/JS refactoring of HUD elements Changes: Added new shareera-gatee HUD indicator (cyan, #67e8f9 ) Renamed ui-gatee → samaya-gatee for clarity Updated engine state tracking: _oldStats and _uiScales now include both samayaGatee and shareeraGatee _uiGlows state expanded for dual-gatee animations Files Modified: index.html — HUD markup src/engine.js — State initialization src/main.js — UI element references src/state.js — Animation loop updates Status: ✅ Foundational UI structure ready 2. UI:UX: Implemented Shareera Gatee Commit: 387e488 | 09:30 UTC Scope: Physics integration + dynamic speed modulation Changes: Karma-speed coupling: Punya/Paapa/Praarabdha now reduce player movement speed Base speed modifier: _sMod = 0.7^ashuvhaKarma × 0.8^shuvhaKarma × 0.7^praarabdha Body-motion indicators: 🐌 = slowed (< 100%) 🚶 = normal (100%) 🏃 = accelerated (> 100%) Samaya Gatee now represents relative time flow: Inverted modifier: karmaSpeedMul = (1/0.7)^ashuvhaKarma × (1/0.8)^shuvhaKarma Time accelerates under karma-debt, slows under merit Dynamic emojis: 🧊 (slow) / ⌛ (normal) / ⚡ (fast) Praarabdha snapshot on death: Speed multiplier carries forward to next rebirth Stored in _praarabdhaSpeedMul for persistent karma-weight Game Feel: Karma now directly affects both movement speed and time progression , creating dual gameplay feedback Files Modified: src/engine.js — Physics + HUD animation src/karma.js ��� Rebirth speed carry-over index.html — Icon symbols Status: ✅ Core mechanic implemented 3. praarabdha: No Reset of Samaya Gatee on Punarjanma Commit: 4305106 | 10:25 UTC

The Agentic Coding Revolution: How I Learned to Stop Typing and Start Delegating Or: what happens when your IDE becomes less of a text editor and more of a teammate. Remember when "AI-assisted coding" meant autocomplete suggestions that guessed your variable names? Those days are gone. Somewhere along the way, the tools stopped suggesting and started doing . They read your repo, run your tests, open pull requests, and sometimes fix bugs you didn't even know existed. Welcome to the era of agentic coding — and if you haven't restructured your workflow around it yet, this post is your crash course. What Actually Changed? The shift from code assistant to coding agent comes down to one capability: autonomy . A traditional assistant waits for your keystrokes. An agent receives a goal and figures out the rest. Dimension Code Assistant Coding Agent Trigger Your keystroke A stated objective Scope Single line or block Entire task, across files Feedback loop None Reads test output, retries, iterates Tool use Suggestion only Shell, browser, git, package managers Ownership You write, it suggests It drafts, you review The mental model that helped me most: stop thinking of the agent as an autocomplete and start thinking of it as a junior developer with access to your codebase. You wouldn't hand a junior engineer an undocumented task with no acceptance criteria. So why hand it to an agent? The Prompting Gap Is the New Debugging Here's the uncomfortable truth I discovered after a few months of daily agentic workflows: agents don't fail because they're dumb. They fail because our instructions are vague. Consider these two requests: ❌ Bad: "Make the app faster" ✅ Good: "Reduce p95 latency of the /search endpoint (currently 1.2s) to under 300ms. Focus on the database query layer first. Keep existing API contracts unchanged. Add a benchmark comparing before/after." The second version has a measurable goal, a constraint boundary, a starting hypothesis, and a definition of done. Agents th

Originally published on my Substack . I'm a Microsoft MVP based in Japan, writing in English about the AI agent systems I actually run in production. AI tools have multiplied. So have agents, skills, and automation scripts. And yet, somehow, my hands are never free. I wake up, open a dashboard, check notifications, go look at the logs for a failed job, and think, "wait, where was that process even running?" Every time I add one more automation, I add one more place I have to go check. That was me, up until last year. The cause was clear: I kept thinking about what to have AI do, and never once designed where I myself would touch things. So I rewrote my policy down to one line. There are only two things a human does: throw tasks into one place, and have conversations in one place. No other entry points get added. 🤖✍️ This article was co-written with AI — an AI agent (Claude Code) generated the draft automatically based on real collaborative work with Ebisuda, who then reviewed and revised it before publishing. In this series, I share the systems I've actually built using AI as case studies — including both the ones that worked and the ones that failed. What I Set Out to Build What I set out to build wasn't a specific tool or a specific agent. It was the design of the surface humans touch. The rule I settled on was just two lines. The only human entry points are Todoist (for dropping in things to do) and Discord (for conversation) Everything else gets pushed to the AI and scheduler side This is the opposite of "let's have AI do a ton of work." When people try to maximize what AI can do, they end up adding more tools. More tools means more settings screens, more places logs pile up, more places you have to go check "how's it doing now." Left unchecked, the number of automated processes and the number of places a human has to go look both grow together. So the thing I needed to decide first wasn't the scope of AI's work — it was the footprint on the human side. If you f

This is a submission for Weekend Challenge: Dog Days Edition What I Built Dogs don't stay long enough. That is the entire idea behind STAY. STAY is an interactive experience about time, attention, and memory. It compresses the life of a dog into a few minutes, lets you experience the small choices that make up that life, and then gives you a way to preserve the moments that mattered. The experience begins with Milo as a puppy. You spend his life making ordinary decisions: take the walk finish some work play for a while take the photo go somewhere new stay home give him the shoe he already destroyed anyway There is no perfect route. There is no "good owner" score. Life keeps moving either way. Milo grows from puppy to young dog, adult, mature dog, and eventually senior. His behaviour changes with him. He reacts quickly when he is young. He becomes calmer as he grows. Familiar toys and places return years later. His movements slow down. And somewhere in the interface, the number of days he has left keeps falling. The thesis behind STAY is simple: You cannot give a dog more years. You can give their years more life. Eventually, Milo's life ends. There is no dramatic death animation. For the whole experience, you have learned to expect Milo to occupy part of the screen. Then that space is empty. What remains are the moments you chose to keep. Those memories can be preserved as a verifiable proof on Solana devnet. But STAY does not end with simulated Milo. After his Memory Box is complete, the experience asks one final thing: Milo's story was simulated. Yours isn't. From there, users can photograph or upload a real moment with their own dog, add a name, date, and short note, and create a cryptographic attestation for that memory. The photograph itself does not need to live on-chain. Instead, STAY hashes the image locally, creates a deterministic memory manifest, and commits the proof through a real Solana transaction. The day will still disappear. The proof that it happe

Every glassmorphism snippet I've seen is backdrop-filter: blur() plus a white overlay. That's a blurred rectangle. Real glass bends what's behind it, hardest at the edge — and that part is missing everywhere. Built it for a production Angular app, pulled it out as a Claude Code plugin: https://github.com/stormaref/LiquidGlassSkill /plugin marketplace add stormaref/LiquidGlassSkill /plugin install liquid-glass@stormaref-skills The refraction: bake a displacement map into a canvas, wire up feImage → feDisplacementMap → feGaussianBlur , point the element at it with backdrop-filter: url(#filter) . Since it's a backdrop filter, the input is the live page behind the element — so it tracks scroll, theme and content changes with nothing to invalidate. Field ported from liquid-glass-js (MIT, credited), minus its html2canvas snapshot. Why it's a skill and not a gist — four rules, each of which fails as plausible-looking output: Glass needs a backdrop. Over a flat page it reads as a gray box, which sends you reaching for more blur — the exact move that kills it. The tint is colorless. Hue in the tint fights the hue coming through; the surface goes muddy. Children of a glass panel paint no surface. An opaque fill covers the refracted backdrop, which is the whole effect. You can't feature-query it. Safari parses backdrop-filter: url(#…) and paints nothing, so @supports says yes and your panel is blank. Gate on engine. The CSS is 200 lines. Knowing that #1 is why your glass looks nths of things looking subtly wrong. MIT. Happy to talk displacement math — the 128/255 ≠ 0.5 decly long to find.

I Built a Voice-First AI Tutor for Bharat in 10 Days 🇮🇳 — Here’s My Complete Journey Over the past 10 days, I participated in the 10 Days of Voice Agents challenge hosted by Murf AI. I built Vidya Vani, an intelligent, low-latency, multi-agent voice tutor that helps users practice spoken English and Mathematics. It features dynamic LLM question generation, memory retention across sessions, live analytics, and seamless agent handoffs—all powered by the blazing-fast Murf Falcon TTS and LiveKit WebRTC. This is the full story of why I built it, the architecture that powers it, the intense roadblocks I hit, and how you can build one too! The Problem: The Education Gap in Bharat India is a country of incredible diversity, but when it comes to foundational education—specifically English literacy and Mathematics—there is a massive accessibility gap. Quality education is often concentrated in urban hubs, leaving learners in rural and semi-urban areas without access to dedicated, patient tutors for 1-on-1 practice. While there are plenty of ed-tech apps and text-based AI chatbots available, they all suffer from the same fundamental flaw for foundational learners: friction. Practicing spoken English with a text-based chatbot is intimidating. It requires spelling proficiency, typing speed, and it does absolutely nothing to help with conversational confidence or pronunciation. The Solution: We needed a voice-first approach. By leveraging voice, we entirely remove the friction of typing and screen-staring. Users simply speak to their phone or computer, making the interaction as natural, accessible, and human as talking to a real teacher. Meet Vidya Vani & Aryabhata I set out to build a 24/7 educational voice tutor for the Learning & Literacy track of the challenge. But as the days progressed, I realized a single AI prompt trying to act as a master of all subjects was prone to hallucinations and confusion. So, I split the persona into two distinct experts. Vidya Vani: The Orchestr

This is a submission for Weekend Challenge: Dog Days Edition What I Built Remember Neko the cat and those Tamagotchi desktop pets from the 90s? I rebuilt that magic for 2026 — except your pet is a golden retriever puppy powered by an LLM. PawBot is a Chrome extension + browser demo where a cute pixel puppy : 🐕 Roams your screen like a classic desktop pet 🏃 Chases your cursor when you get close 🍖 Eats anything you drop — PDFs, code files, emoji, pasted text 💬 Barks back with short, mood-aware responses via Google Gemini 😴 Falls asleep if you ignore it too long (with Zzz particles!) ❤️ Reacts to pets — click to pet, double-click to wave Feed it a .pdf and it might say "Mmm, crunchy homework!" Ignore it for 40 seconds and it curls up with sad puppy eyes. Demo Full walkthrough on YouTube: Quick try locally: git clone https://github.com/Varshithvhegde/pawbot.git cd pawbot/web python3 -m http.server 8080 # → http://localhost:8080 Or load the Chrome extension: clone the repo → ./scripts/sync-extension.sh → Load unpacked → select the extension/ folder. Code Varshithvhegde / pawbot AI desktop puppy Chrome extension — pixel pet that eats your files and barks with Google Gemini PawBot 🐾 An AI desktop puppy that lives in your browser. A Tamagotchi/Neko-style pixel pet that roams your screen, chases your cursor, eats files & emoji you drop, and barks mood-aware responses powered by Google Gemini . Built for the DEV Weekend Challenge: Dog Days Edition . Demo 🎬 Watch on YouTube · 📝 DEV submission · 🔗 GitHub Features Feature Description 🐕 Pixel puppy Full sprite animations — idle, walk, run, eat, sleep, bark, wave 🍖 Feed anything Drop files, emoji, or paste text — pup chases food then eats it 🏃 Chase mechanics Food falls from above → pup runs to it → 4-frame eat animation 💬 AI barks Google Gemini generates short mood-based responses 😴 Sleep mode Ignore pup 40s → falls asleep with Zzz particles ❤️ Pet & wave Click to pet, double-click to wave paw ⌨️ Hotkeys F throw treat · B bark ·

From COD fraud nightmares to automated intelligence: the story of building a business platform for Bangladesh's e-commerce market. 🎯 The Problem That Started Everything Picture this. A small shop owner is managing their online business. They've got WooCommerce for the website, Excel sheets for stock tracking, Pathao open on one phone, Steadfast on another, and Facebook Page orders coming in through DMs. They have a physical notebook for customer history, and absolutely no way to know if a new customer is a fraudster who'll refuse the delivery. Every morning starts with copy-pasting order details from three different places. Every afternoon is spent manually messaging courier agents. Every evening is reconciling which orders got delivered, which got returned, and how much money actually came in. This isn't a unique story. This is the daily reality of thousands of SME owners, retailers, and e-commerce merchants. I built Vendzoo to end this chaos. Vendzoo is an all-in-one SaaS Business OS: POS, Inventory, Courier, Fraud Detection, Customer Intelligence, Marketing, and Analytics, all in one dashboard. 🌐 vendzoo.com This is the story of how it was built, the real problems we solved, and the decisions that shaped the product. 🏗️ The System at a Glance Vendzoo is built on Laravel 13 with PHP 8.3 , backed by MySQL, with a Tailwind CSS v4 and Vite 8 frontend. Nothing exotic, just a solid, modern stack chosen for reliability and developer ergonomics. What makes it interesting isn't the stack. It's the three layers sitting on top of it. The core layer handles POS, orders, inventory, invoicing, and multi-user access with role-based permissions. The integration layer connects to everything a merchant already uses: WooCommerce, Shopify, Facebook Commerce, Pathao, Steadfast, RedX, Carrybee, Firebase, Telegram, SMS, WhatsApp, and Email. The intelligence layer is where Vendzoo earns its "Business OS" label: a fraud risk engine, customer segmentation, churn prediction, courier perfor

1. Retomando: de imagens bem construídas a containers que conversam entre si Os artigos anteriores desta série cobriram como criar imagens eficientes e rodar containers isolados. Mas uma aplicação real raramente é um único container: normalmente há uma API, um banco de dados, um cache, talvez uma fila de mensagens — cada um em seu próprio container, precisando se comunicar. E containers, por padrão, são efêmeros: qualquer dado escrito dentro deles some quando são removidos. Este artigo cobre as duas peças que resolvem isso: redes (comunicação entre containers) e volumes (persistência de dados). 2. O problema do isolamento de rede por padrão Cada container recebe seu próprio namespace de rede, isolado dos demais e do host. Isso é uma característica de segurança, não um bug — mas significa que dois containers rodados de forma independente não conseguem se encontrar automaticamente: docker run -d --name api minha-api docker run -d --name banco postgres De dentro do container api , tentar acessar banco por esse nome simplesmente falha — cada container, isolado, só enxerga localhost como a si mesmo. A solução do Docker para isso é criar uma rede e conectar ambos os containers a ela. 3. Redes definidas pelo usuário (User-Defined Networks) docker network create minha-rede docker run -d --name banco --network minha-rede postgres docker run -d --name api --network minha-rede minha-api A partir daqui, dentro do container api , o hostname banco resolve automaticamente para o IP do container banco — o Docker roda um DNS interno para qualquer rede definida pelo usuário, resolvendo containers pelo nome (ou pelo alias definido com --network-alias , se houver mais de um). Isso é o motivo pelo qual strings de conexão em aplicações containerizadas costumam usar o nome do serviço em vez de um IP fixo: DATABASE_URL = postgresql :// usuario : senha @ banco : 5432 / meudb Comandos úteis para inspecionar redes: docker network ls # lista todas as redes docker network inspect minha-rede # d

This is a submission for Weekend Challenge: Dog Days Edition What I Built I love dogs. There, I said it. And yet, I am also scared of them. It is a strange combination. I can happily watch dog videos for hours, admire every dog I see on the street, and still instinctively tense up when one suddenly runs towards me. A lot of that comes from a traumatic experience I had with a dog as a child. You can grow up knowing that one experience doesn't define every dog you will ever meet, but sometimes your instincts don't get the memo. While thinking about this challenge, I started wondering if the problem was partly not understanding what I was seeing . If a dog is wagging its tail, what does that actually mean? If it is staring at me, should I move away? If it is barking, is it excited, nervous, protective, or something else? And if a dog is approaching me on a footpath, what should I actually do? That question became Pawsitive . Pawsitive is an interactive learning app for people who feel nervous around dogs. Instead of telling people not to be afraid, it tries to make encounters feel less unpredictable by teaching them how to recognise common body-language signals, understand situations, and make calmer decisions. But then I realised there was another side to the interaction. A dog owner might see their dog happily walking towards someone and think: "Don't worry, he's friendly!" The person approaching might be thinking: "Please don't let that dog come any closer." Both people can be looking at the same dog while experiencing completely different situations. So Pawsitive has two learning paths: people who are nervous around dogs and dog owners . The first helps people understand dogs and build confidence. The second helps owners recognise when someone might be uncomfortable, why giving people space matters, and why "my dog is friendly" doesn't necessarily make an approaching dog less intimidating. That became the idea behind the whole app: Two perspectives. One better inte

How we turned always-on Kafka sinks into on-demand workers that shrug off nightly bombardments — by scaling on the right signal, tuning per-pod drain rate, and keeping autoscaling from sabotaging itself. Every number in this post is measured from a local lab you can run yourself — the full code is on GitHub , and the Appendix has the commands. The problem We run a fleet of Kafka sinks — consumer services that read change events from Kafka, apply business logic, and write the result into a service-local database as a query-friendly materialized view. It keeps reads fast and independent from upstream systems, and it's a great pattern. But the workload has an awkward shape. Most sinks are idle most of the day, then buried in minutes. Traffic isn't steady: changes arrive in bursts, usually from nightly imports or CDC jobs. The rest of the day the topic is quiet. topic activity over 24h msgs ▲ │ ██ nightly import / CDC burst │ ██ │______________██______________ flat, idle ~22h/day └───────────────────────────────▶ time That shape creates two problems at once : Idle waste. When the topic is quiet, each sink still runs — it polls Kafka, holds connections, emits metrics, and occupies CPU and memory. Multiply one "small" sink across dozens of them and several regions, and you're paying around the clock for work that happens for a couple of hours a night. Spike lag. When the burst lands, a backlog builds fast. If consumers can't drain it quickly enough, consumer lag — the gap between what's been produced and what's been processed — climbs, and downstream reads start serving stale data. We want two things that sound contradictory: cost almost nothing when idle , and absorb the spike fast when it hits. Why the obvious autoscaler doesn't help The reflex is a Kubernetes Horizontal Pod Autoscaler (HPA) on CPU or memory. For sinks, that's the wrong signal. Sink work is I/O-bound : the consumer spends its time waiting on Kafka polls and database writes, not burning CPU. So when a ba

Building a Restaurant Reservation System with Node.js, Express & MongoDB - A Beginner's Guide Tags: #nodejs #express #mongodb #webdevelopment #tutorial #beginner Introduction Hey everyone! 👋 This is my first Dev.to post, and I'm excited to share what I've been learning. As a 5th-semester CS student, I've been diving deep into full-stack web development, and today I want to walk you through building a Restaurant Reservation System – a real project I built that taught me so much about backend architecture and database design. If you're just starting with Node.js, Express, and MongoDB, this post is for you! What We'll Build A simple but functional restaurant reservation system where: Users can browse available time slots Users can book a table for a specific date and time Admin can manage reservations Weekly scheduling (Monday-Sunday) 2-hour time slots Tech Stack: Backend: Node.js + Express Database: MongoDB Frontend: React + Tailwind CSS (we'll focus on backend in this post) Prerequisites Before we start, make sure you have: Node.js installed MongoDB running locally or MongoDB Atlas account Basic JavaScript knowledge VS Code or any code editor Project Setup 1. Initialize the Project mkdir restaurant-reservation-system cd restaurant-reservation-system npm init -y 2. Install Dependencies npm install express mongoose cors dotenv npm install nodemon --save-dev 3. Create Project Structure restaurant-reservation-system/ ├── models/ │ └── Reservation.js ├── routes/ │ └── reservations.js ├── config/ │ └── db.js ├── .env ├── server.js └── package.json Step 1: Set Up MongoDB Connection config/db.js const mongoose = require ( ' mongoose ' ); const connectDB = async () => { try { await mongoose . connect ( process . env . MONGODB_URI ); console . log ( ' MongoDB connected successfully ' ); } catch ( error ) { console . log ( ' MongoDB connection failed: ' , error ); process . exit ( 1 ); } }; module . exports = connectDB ; Step 2: Create Reservation Model models/Reservation.js co