标签：#Web

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

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

The fastest way to trust a generated API is not to read the code and not even to run its tests locally; it is to make the code stand up as an actual HTTP server and answer real requests before you let it anywhere near a merge request. Most failures in LLM-generated backend code hide between static correctness and runtime truth: a missing dependency that only matters when the process starts, an assumption about a default host, a path parameter that works in pseudocode but not in the framework's route parser, or a response shape that drifts from what the client expects. A local unit test can pass while every one of those problems remains invisible, because the test never starts the process, binds a port, or sends a request over a socket. The loop worth describing is deliberately narrow. Use a free model to draft a small HTTP endpoint from a short specification, then deploy that draft to a disposable server where you can send it real requests, observe the response, and decide whether the generated code deserves to become part of your project. MonkeyCode's free model access and free server option make that loop easy to try without paying for a host or hand-rolling a local container, but the workflow is useful with any model and any temporary runtime you already have. Disclosure: This article was prepared as part of MonkeyCode's product outreach. Start by asking the model for something tiny but externally observable. A health route plus an echo route is enough, because the point is not to demonstrate cleverness but to prove that the generated service can bind, route, validate query parameters, and return JSON under real HTTP conditions. Have it generate a FastAPI application, for example: from fastapi import FastAPI from pydantic import BaseModel app = FastAPI () class Echo ( BaseModel ): message : str @app.get ( ' /health ' ) def health (): return { ' status ' : ' ok ' } @app.post ( ' /echo ' ) def echo ( body : Echo ): return { ' received ' : body . message } That code

Building Samar: My 10-Day Voice AI Agent Journey with Murf Falcon Over the past 10 days, I built Samar , a multilingual AI voice agent for a Bharat Digital Bank use case as part of the 10 Days of Voice Agents – VoiceForBharat Edition challenge. The project started as a simple voice assistant and gradually evolved into a more complete Voice AI system capable of remembering users, using real-time tools, making outbound calls, escalating sensitive situations to humans, analyzing calls, and handing specialized conversations to another AI agent. 🎯 The Problem Banking can sometimes be difficult to navigate, especially when users need quick information or assistance without going through multiple screens and menus. I wanted to build a voice-first banking assistant that could provide natural conversations while also maintaining security and knowing when it should involve a human. That's where Samar comes in. 🤖 What is Samar? Samar is a multilingual banking voice agent designed to help users with general banking-related queries. It can: Answer general banking questions Provide financial information Remember returning users with consent Fetch real-time information using tools Find nearby branches Provide exchange-rate information Make outbound reminder calls Escalate sensitive issues to human support Track call analytics Hand specialized conversations to a specialist agent The voice experience is powered by Murf Falcon , the fastest TTS API used in this challenge. 🏗️ How the System Works At a high level, the voice interaction follows this flow: User Speech ↓ Speech-to-Text ↓ LLM / Agent Logic ↓ Memory or Tool Calling ↓ Text-to-Speech ↓ User hears the response The system uses real-time voice communication through LiveKit, an LLM for reasoning and conversation, speech recognition for understanding the user, and Murf Falcon for natural voice generation. 🚀 Important Features 1. Voice AI with Guardrails Samar has a clear banking role and follows safety rules. It does not ask users

Building Roshni: An Ultra-Low Latency, Multi-Agent Financial Voice Assistant for Bharat 🇮🇳 How I built an end-to-end, multilingual financial voice AI using Murf Falcon, LiveKit Agents, Deepgram Nova-3, Google Gemini, and Next.js during the 10 Days of AI Voice Agents Challenge. 🌟 1. The Problem & Why Voice Matters for Bharat In India, financial inclusion has accelerated rapidly with UPI, digital banking, and government-backed credit initiatives. However, navigating complex interest rates, eligibility criteria for government schemes (like PM Mudra or Sukanya Samriddhi Yojana), and understanding formal banking terms remains intimidating for millions of citizens—especially in regional and tier-2/3 heartlands where digital interfaces can be overwhelming. Text-first interfaces fail where voice thrives. When rural entrepreneurs or first-time bank customers have questions, they don't want to navigate complex web forms or read dense PDFs. They want to ask a direct question in their language and get an immediate, clear, spoken answer. To solve this, I built Roshni AI (and her specialist counterpart, Vikram ) — an ultra-low latency, conversational financial assistant engineered for natural voice interactions in English, Hindi (Devanagari script), and Hinglish. 🏗️ 2. High-Level Architecture & Tech Stack Building a real-time conversational agent requires synchronizing four core pipelines with sub-second latency: [ 👤 User Microphone ] │ (WebRTC Audio Stream) ▼ ┌─────────────────────────────┐ │ LiveKit Agents Worker │ └──────────────┬──────────────┘ │ ┌───────────────────────┼───────────────────────┐ ▼ ▼ ▼ ┌─────────────┐ ┌─────────────┐ ┌─────────────────┐ │ Deepgram │ ────► │Google Gemini│ ────► │ Murf Falcon │ │ Nova-3 │ │ (LLM) │ │ Fast TTS │ │ (Fast STT) │ │ │ │ (Anisha / Samar)│ └─────────────┘ └──────┬──────┘ └────────┬────────┘ │ (Tool / Handoff) │ ▼ ▼ ┌───────────────┐ [ 🔊 Audio Output ] │ SQLite Memory │ │ & Analytics │ └───────────────┘ The Stack: TTS (Text-to-Speech):

This is a submission for Frontend Challenge - Comfort Food Edition Perfect Landing. What I...

Building Pure Dart Web Apps Without Compromise When developers evaluate Dart for the web, they typically face a stark tradeoff: Flutter Web : Exceptional for canvas-driven applications, design systems, and cross-platform desktop/mobile parity—but heavy for content-first landing pages, docs, and fast-loading SEO sites. Jaspr Web : A lightweight, component-driven framework that compiles pure Dart to HTML and CSS with instant first paint and full search engine indexing. When we built the official documentation and showcase site for BlocSignal , we knew Jaspr was the perfect foundation. But like many engineers diving into a new UI paradigm, our initial implementation took a shortcut: we used raw StatefulComponent lifecycles and manual .subscribe() callbacks to wire up our state machines. It worked—but it wasn't idiomatic. In this behind-the-scenes case study, we walk through the process of dogfooding bloc_signals_jaspr across blocsignal.dev , replacing manual subscription glue with declarative consumer components, achieving 100,000 operations/sec in compiled JavaScript , and exploring the sheer developer ergonomics of Dart 3.13 primary constructors . The "Manual Subscription Trap": Why Raw .subscribe() Fails at Scale In classic Flutter or Jaspr development, when you create a state machine without framework-level consumer widgets, you might be tempted to subscribe inside initState() : // ❌ THE ANTI-PATTERN: Manual subscription glue in StatefulComponent class LiveVisualizerState extends State < LiveVisualizer > { late final LiveCounterBloc _bloc ; @override void initState () { super . initState (); _bloc = LiveCounterBloc (); // ⚠️ Flaw 1: Every state change triggers a full component setState _bloc . state . subscribe (( _ ) { if ( mounted ) setState (() {}); }); } @override void dispose () { // ⚠️ Flaw 2: Manual dispose tracking _bloc . close (); super . dispose (); } } While this appears harmless in a simple counter demo, it introduces three severe architectural flaws:

Why Environment Variables Matter Every app has secrets: API keys, database URLs, admin passwords. Hardcoding them in source code is a one-way ticket to leaks. Even if your repo is private, you never know who forks it or what CI logs expose. Environment variables are the standard way to keep configuration out of code. But using them safely requires a few habits that go beyond just process.env . The Basics: Loading and Accessing In Node.js, you read env vars with process.env . But you should not access them raw everywhere. Create a central config module that validates and exposes them. // config.js const required = [ ' DB_URL ' , ' API_KEY ' , ' PORT ' ]; for ( const key of required ) { if ( ! process . env [ key ]) { throw new Error ( `Missing required env var: ${ key } ` ); } } module . exports = { dbUrl : process . env . DB_URL , apiKey : process . env . API_KEY , port : parseInt ( process . env . PORT , 10 ), }; Fail fast at startup. If a required variable is missing, crash immediately rather than failing later in a confusing way. Never Commit .env Files Tools like dotenv load variables from a .env file for local development. That file must stay out of version control. Add .env to your .gitignore immediately. Also add .env.local , .env.production , etc. if you use them. Instead of committing the actual values, commit a .env.example with placeholder or fake values. This documents what is needed without exposing anything. # .env.example DB_URL = postgres :// user : password @ localhost : 5432 / mydb API_KEY = your - api - key - here PORT = 3000 Use a Validation Library Manual checks are fine for small projects, but for anything serious use a schema validator like envalid or joi . They give you type coercion, defaults, and clear error messages. // with envalid const { cleanEnv , str , num } = require ( ' envalid ' ); const env = cleanEnv ( process . env , { DB_URL : str (), API_KEY : str (), PORT : num ({ default : 3000 }), }); module . exports = env ; This catches m

A user reports that they keep getting logged out. Not immediately — after a while, randomly, always...

This is a submission for Frontend Challenge - Comfort Food Edition, Perfect Landing What I...

مرتين خلال أسابيع صار موقعنا يبدو سليمًا تمامًا ولا يستجيب للضغط. الصفحة تُحمَّل، والتصميم في مكانه، والكونسول نظيف، والزوار لا يستطيعون فتح أي رابط. في المرتين لم يكن السبب خطأً برمجيًا بالمعنى المعتاد. كان سلوكًا موثّقًا في المتصفح يعمل كما صُمّم تمامًا، لكنه انطبق على نطاق أوسع مما توقّعنا. والأخطر أن اختباراتنا الآلية مرّت بنجاح في الحالتين. الحادثة الأولى: إعداد واحد عطّل سبعين عنصرًا أضفنا ويدجت مساعد ذكي للموقع، وفيه إعداد يفتح نافذة المحادثة تلقائيًا عند دخول الزائر. فعّلناه. بعدها صارت الصفحة ميتة. الروابط لا تُفتح، والأزرار لا تستجيب، وحقول البحث لا تستقبل كتابة. السبب أن الويدجت يعتمد نمطًا شائعًا في نوافذ الحوار: عند فتح النافذة، يضع السمة inert على كل ما عداها حتى لا يتشتت التركيز ولا يهرب مؤشر لوحة المفاتيح خارجها. سلوك صحيح ومطلوب في الحوارات. المشكلة أن الفتح التلقائي يجعل هذه الحالة هي حالة الصفحة الافتراضية عند كل زيارة . سبعون عنصرًا في الصفحة ورثوا inert ، وبقوا كذلك حتى يغلق الزائر نافذة لم يطلب فتحها أصلًا. // ما يفعله الويدجت عند الفتح document . querySelectorAll ( ' body > *:not(.assistant-root) ' ) . forEach (( el ) => el . setAttribute ( ' inert ' , '' )); و inert ليست سمة تجميلية. الفحص السريع يوضح مداها: const el = document . querySelector ( ' a.main-cta ' ); el . offsetParent !== null ; // true — العنصر مرئي getComputedStyle ( el ). pointerEvents ; // 'auto' — لا شيء يمنع المؤشر el . getBoundingClientRect (). width ; // 180 — له مساحة حقيقية el . matches ( ' :disabled ' ); // false — ليس معطّلًا el . closest ( ' [inert] ' ) !== null ; // true ← هنا الجواب كل فحص اعتدنا عليه يقول إن العنصر سليم. inert تعمل في طبقة أخرى: تُخرج العنصر وكل أبنائه من شجرة الوصول، وتلغي استقباله لأحداث المؤشر والتركيز، بلا أي أثر في الأنماط المحسوبة . لماذا مرّت الاختبارات اختباراتنا كانت تسأل الأسئلة المعتادة: هل العنصر موجود في الـDOM؟ هل هو مرئي؟ هل نصّه صحيح؟ الإجابات كلها نعم. ما كشف العطل كان لقطة شاشة نظر إليها إنسان ، ثم محاولة ضغط واحدة. الفحوص البرمجية كانت تصف صفحة سليمة بينما الزائر يرى صفحة جامدة. إن كنت تستخدم أي مكوّن يطبّق inert ، أضف هذا التأك

You own a domain. Your website lives on it. With Cloudflare's free plan you can make anything@yourdomain.com - any address, invented on the spot - land in your regular Gmail inbox. No Google Workspace subscription, no mail server, no changing registrars. About 30 minutes, $0. What you get: A catch-all : every address at your domain forwards to one inbox. Free disposable addresses: give netflix@yourdomain.com to Netflix and bank@yourdomain.com to your bank. When spam arrives addressed to one of them, you know who leaked your address. Your website, untouched. One limitation: this is receive-only . You can reply as you@yourdomain.com from free Gmail via "Send mail as", but the mail goes out through Google's servers without your domain's blessing, so some recipients see "via gmail.com" and strict spam filters may object. If sending from the domain matters, that's what Google Workspace is for. For receiving, read on. You need: a domain (registered anywhere; it stays there), a free Cloudflare account, and an inbox to receive the mail. Step 1: Add your domain to Cloudflare Log in at dash.cloudflare.com, click Add a domain , pick the Free plan. Cloudflare scans your existing DNS and imports what it finds. Review this list carefully - the scan is good but not guaranteed complete, and whatever it misses stops resolving after the switch. Check what your DNS really says from any terminal: dig +short A yourdomain.com dig +short MX yourdomain.com dig +short NS yourdomain.com If the MX query returns nothing, you have no existing email service and this migration is pure upside. If it returns something, understand what that mail service is before proceeding. Step 2: The gotcha - where does your DNS actually live? That NS query tells you who currently answers DNS for your domain, and it is not always your registrar. In my case the nameservers pointed at NS1 ( *.nsone.net ) - Netlify DNS . My registrar just held the registration; the DNS zone lived in Netlify, from clicking "use Netli

Over the last 10 days, I built FinSaathi, a voice-first AI assistant for the Financial Services track of the VoiceForBharat challenge. The goal was simple: build an assistant that can talk naturally with users, understand financial and government-scheme related queries, remember relevant information, use tools, and know when a human or specialist should take over. What started as a basic voice agent gradually became a complete system with memory, tools, outbound calling, human escalation, call analytics, and specialist-agent handoffs. 💡 The Problem Financial and government-scheme processes can involve eligibility requirements, documents, deadlines, and complicated terminology. For users who are more comfortable speaking than typing, voice can make these interactions much more natural. For example, a user can simply ask: "PMJJBY ke liye main eligible hoon?" Instead of navigating through multiple forms, FinSaathi can understand the request, collect the required information, perform an eligibility check, and explain the result conversationally. The goal is not to replace banks or human support, but to provide a conversational first layer of assistance and escalate situations when human help is required. 🏗️ Architecture USER │ ▼ LiveKit │ ▼ Speech-to-Text │ ▼ LLM / Agent │ ┌────────────┼────────────┐ ▼ ▼ ▼ Memory Tools Escalation │ │ │ └────────────┼────────────┘ ▼ SQLite DB │ ┌──────┴──────┐ ▼ ▼ Human Support Analytics Dashboard Dashboard │ ▼ Murf Falcon │ ▼ USER Technology Stack Component Technology Frontend Next.js / React AI Agent LiveKit Agents Real-time Transport LiveKit Text-to-Speech Murf Falcon Backend Python API FastAPI Database SQLite Calling SIP / LiveKit 🎙️ Key Features Indian Voice & Natural Conversations FinSaathi uses Murf Falcon for text-to-speech and supports natural Hindi/Hinglish conversations. The goal was to make the interaction feel more like talking to an assistant rather than interacting with a traditional chatbot. Safety Guardrails Financial co

La Abuela — Comfort Food from Madrid 🍲 A cozy, fully accessible landing page for an imaginary family restaurant in Madrid, built from scratch with vanilla HTML, CSS and JavaScript for the DEV Frontend Challenge: Comfort Food Edition. 🔗 Live demo: https://laabuela.bmops.tech 💻 Interactive pen (CodePen): The story La Abuela ("the grandmother") is a tiny four-table restaurant in Lavapiés, Madrid. In 1987, Abuela Carmen opened it with one rule: if it wouldn't be served at her Sunday table, it wouldn't be served here. Forty years later, the menu still has three dishes — caldo, croquetas, lentejas — and the pot still simmers for three hours. The page tells that story through a warm terracotta-and-cream palette and five illustrations drawn entirely in pure CSS — no images, no SVG, no canvas. What I built Hero — a clay pot in pure CSS: gradient body with layered inset shadows for volume, decorative band, handles, a two-tongued fire with a glowing core, a wooden table with grain, a light sweep across the heading, and animated organic steam Our story — a bowl of caldo with a wooden spoon and a terracotta heart, all divs and box-shadows The menu — three dish cards, each with its own pure-CSS illustration: a steaming bowl of caldo, three golden croquetas with crispy texture and a pool of salsa, and a dark bowl of lentils with nine individual grains The recipe — an accessible accordion unlocking Abuela's caldo, step by step Quotes — from regulars (including one from Osaka who cried into the caldo) Booking form — with inline validation, clear labels and a friendly confirmation Footer — hours, address, and a wink to Carmen The art is pure CSS — no images, no SVG Every illustration is built the way : nested absolutely-positioned divs, layered box-shadow (inset shadows give the clay its volume and the croquettes their crust), organic border-radius , and radial gradients for light. The pot alone uses four shadow layers to feel round instead of flat. The steam is animated with pure CS

A gift card image is not an ordinary profile photo. It can contain a redeemable code, a PIN, a receipt, an email address, an order number, and location metadata from the camera. A single authorization bug can therefore expose both personal data and something that behaves like a bearer secret. This article designs the upload path as a security boundary. The examples are implementation-neutral TypeScript so the controls can be mapped to your framework, image decoder, object store, and queue. The goal is not “secure file upload” in the abstract. It is a narrower property: Collect only the evidence needed for a decision, keep the original out of normal review paths, and make every retained copy private, attributable, and short-lived. Start with staged disclosure Do not begin by asking for the entire card and receipt. Most first-pass routing decisions need only structured facts: brand and issuing country currency and face value physical card or e-code proof type available whether the redeemable area is still covered Only request an image after those fields show that visual proof is necessary. For the first image, instruct the user to keep the code or PIN covered and exclude unrelated receipt lines. If a later step genuinely needs a live code, collect it through a separate, purpose-built secret field—not as another image in a support chat. That separation changes the failure mode. A bug in the ordinary proof viewer should not automatically reveal a spendable credential. The FTC explains why the distinction matters: someone who has the gift card number and PIN may be able to take the funds even without holding the physical card. Treat those values as secrets, not harmless text printed in a photo. Threat-model the whole path An upload control on the browser is useful feedback, but it is not a trust boundary. Model at least these failures: Threat Example Required control Secret exposure A full PIN appears in a proof image or log Staged disclosure, detection, restricted escal

How I Bypassed NVIDIA's Phone Verification to Access 70+ Free AI Models from Bangladesh No VPN. No fake number. Just a browser console and an API call. If you are a developer in Bangladesh, you have probably hit the same wall I did. You go to build.nvidia.com , excited to try out the latest models on the NVIDIA NGC API. You click Generate API Key . And then — a phone verification gate appears. You look for your country code. Bangladesh is not on the list. NVIDIA says: "If your location isn't listed, please check again soon." I checked. It has been that way for a while. I am a student and independent builder from Dhaka, Bangladesh . I experiment with AI products and developer tools under the Alaminnna brand. I needed access to these models for a side project, not for enterprise production. Waiting for official support was not an option, so I looked for a legitimate workaround. Here is what I found. Table of Contents The Two Verification Gates Step 1: Create an Organization Account Step 2: Generate the API Key via Console Why This Works What You Actually Get Quick Test Final Thoughts The Two Verification Gates NVIDIA has two separate phone verification checkpoints: Account creation on the NVIDIA Build portal. API key generation inside the NGC dashboard. Both ask for a phone number. Both block Bangladesh. But here is the critical insight: the UI and the API are not the same system. The web interface enforces phone checks. The API itself does not. That gap is what makes this workaround possible. Step 1: Create an Organization Account (No Phone Needed) Personal NVIDIA accounts trigger phone verification immediately. Organization accounts, however, do not — at least not during the initial signup flow. Here is what I did: Go to build.nvidia.com/minimaxai/minimax-m3 . Click Generate API Key . Enter your email and create a password. Complete the hCaptcha verification. Check your email for a 6-digit verification code and enter it. On the "Almost Done" page, click Submit . You

Floating labels. Inline validation. Custom checkboxes, radios, and a toggle switch. A gradient button with a press-down micro-interaction. Every bit of it below is CSS — no form library, no useState , no event listener wiring up a class toggle. That's form.fscss — the module in the FSCSS ecosystem. Same philosophy each time: solve the hard visual problem once, ship it as importable mixins, let the browser do the actual work. <script src= "https://cdn.jsdelivr.net/npm/fscss@1.1.24/exec.min.js" defer ></script> <style> @import (( * ) from form ) @ form-root () @ form-group (. form-group ) @ form-input (. form-input ) @ form-label (. form-label ) @ form-float (. form-group , . form-input , . form-label ) @ form-checkbox (. form-checkbox ) @ form-btn (. form-btn ) @ form-btn-primary (. form-btn-primary ) </style> <div class= "form-group" > <input class= "form-input" type= "text" placeholder= " " > <label class= "form-label" > Full name </label> </div> <label class= "form-checkbox" > <input type= "checkbox" checked ><span></span> I agree to the Terms </label> <button class= "form-btn form-btn-primary" > Create account </button> The two tricks doing all the work Forms feel like they need JavaScript because most tutorials reach for it immediately. Two native CSS mechanisms cover almost everything a "modern" form needs. Floating labels run entirely on :placeholder-shown . Give the input placeholder=" " — a literal space, not empty — and the browser now knows, purely in CSS, whether the field is empty and unfocused: .form-input :focus + .form-label , .form-input :not ( :placeholder-shown ) + .form-label { top : -9px ; font-size : 11px ; color : var ( --form-accent ); } No state, no class toggling on keyup. The label just reacts to what the browser already knows about the input. Checkboxes, radios, and the switch all use the classic checkbox-hack: the real <input> stays in the DOM (so it keeps native keyboard support and form submission) but is visually hidden, and a sibling

Adding online payments to a web application can make it easier for customers to purchase products, subscribe to services, book appointments, or pay invoices. But payment integration involves more than adding a payment button to a website. A reliable integration needs a payment gateway, backend APIs, secure authentication, payment status handling, webhooks, and proper error management. This guide explains the basic process of integrating a payment gateway into a web application, using Razorpay as an example. 1. Understand How Payment Gateway Integration Works A typical payment flow looks like this: Customer → Web App → Backend → Payment Gateway → Bank/Payment Network The customer starts the payment from your website. Your backend creates the payment order through the gateway. The customer then completes the payment using a supported payment method. After the transaction, your application needs to confirm whether the payment was successful before providing the product or service. A simplified flow is: Customer selects a product or service. Your backend creates an order. The payment gateway generates the required payment details. Checkout opens for the customer. Customer completes the payment. The gateway returns payment information. Your backend verifies the payment. A webhook can update your system about payment events. Your database records the final payment status. The application confirms the order. 2. Choose the Right Payment Gateway Before starting development, compare payment gateways based on factors such as: Supported payment methods Transaction fees API documentation Developer tools Settlement process Refund support International payment support Webhook capabilities Security requirements Customer support For an Indian web application, gateways such as Razorpay can support common payment methods including UPI, cards, net banking, and wallets, depending on the account and applicable availability. The important thing is to choose a gateway that fits your applic

Category: My AI Experiments There's a mental model most people use when working with AI: describe your problem, get a solution. It works well enough, until it doesn't. And when it fails, the failure is invisible — because AI doesn't say "I don't have enough to go on." It gives you a confident, well-reasoned, completely wrong answer. I learned this the hard way during a website security investigation. The AI and I ran a thorough analysis, reached a clear conclusion, and were wrong. Not because the AI was weak — because I gave it the wrong kind of input. When I changed the input, the same AI found the answer in seconds. That gap — between the input that produces a wrong answer and the input that produces a right one — is what I want to talk about. The Investigation That Almost Failed My website was secretly redirecting visitors to a virus site. The attack was sophisticated: it only targeted specific browsers, fired at most once per device per day using a cookie-based cooldown, and left no trace in any file. I asked AI to help investigate. I described the symptoms. We searched through files together — .htaccess , theme functions, plugin code. Everything looked clean. The AI identified the most suspicious external element in scope: a Chinese analytics script called 51.la. I removed it. The redirect stopped. I called it solved. Three weeks later, the identical attack appeared on another site I manage. No 51.la anywhere. This time, instead of describing the symptoms, I gave the AI something different: the actual rendered HTML of an affected page, fetched using the exact browser User-Agent and IP type that triggered the attack. The AI found an 83KB malicious JavaScript payload injected into every page. Inside it: a WeChat browser detector, a link-click hijacker, a cookie-based daily cooldown. The payload was stored in the WordPress database — in plugin configuration data — where no file-level search could ever find it. Same AI. Same type of problem. Completely different ou

It can be daunting to determine who's responsible for showing ads on the websites we visit, or who's harvesting data from the mobile apps we use every day. That information is already semi-public, but it is not easily parsed and traditionally much of it has remained walled away in the hands of large advertising platforms. Not anymore: A powerful and free new service called DecryptAds scrapes and correlates this adtech data and makes it simple to quickly learn a great deal about the entities that are tracking you.