标签：#Web

I spent the last while building the HMRC integration for TapTax , a Making Tax Digital (MTD) app for UK sole traders. MTD is the UK government's programme that pushes tax filing out of paper and spreadsheets and into software talking directly to HMRC's APIs. I have integrated with a fair few third-party APIs. Stripe, Plaid-style banking, the usual. HMRC is its own animal. Some of it is genuinely well designed, some of it caught me completely off guard, and a couple of things cost me a full day each before the penny dropped. So here are the five things that surprised me most. Each one is the surprise, then the fix, with a short snippet from our actual TypeScript backend. Not tax advice, just engineering notes from someone who has now stepped on the rakes so you do not have to. 1. The API version lives in the Accept header, and getting it wrong is a 406 Most APIs version in the URL: /v2/thing . HMRC versions through content negotiation. You ask for a version in the Accept header, like application/vnd.hmrc.5.0+json , and if you ask for a version that endpoint does not serve, you get a 406 Not Acceptable . No helpful "did you mean v3" message. Just 406. The part that bit me: different endpoints are on completely different versions at the same time. Obligations is on v3.0, the self-employment cumulative summary is on v5.0, calculations are on v8.0, ITSA status is on v2.0. There is no single "current" version to pin. The fix was to make the version a required argument on the request wrapper so you can never forget it, and set it per call: // src/services/hmrcApi.ts const headers = { Authorization : `Bearer ${ accessToken } ` , Accept : `application/vnd.hmrc. ${ apiVersion } +json` , // e.g. "5.0" ... hmrcConfig . getFraudHeaders ( req ), }; One more trap: versions get withdrawn. Obligations used to answer on v2.0; that now returns a 404, not a 406, so it looks like a missing resource rather than a stale version. When an HMRC call 404s, check the version before you go hunt

Last week someone tried to copy my visa API's database. They didn't succeed — they got 0.6% of it before I cut the key — but the 251 requests they left behind are a near-perfect teaching case for what targeted API extraction actually looks like from the defender's side. Here's the forensic walkthrough. The target One endpoint: GET /api/v1/visa?from={passport}&to={destination} It returns the visa rule for a passport→destination pair — visa type, allowed stay, conditions. The full matrix is ~39,585 pairs . That matrix is the product. The evidence The attacker's requests weren't spread across the map. They were a sweep, one passport at a time: Passport Destinations pulled Coverage 🇦🇪 UAE (ARE) 195 ~100% of that passport's matrix 🇦🇺 Australia (AUS) 53 ~1/4, interrupted 🇨🇳 China (CHN) 2 test calls 249 unique pairs, near-zero duplicates. Whoever wrote this was methodical: validate that one full passport comes out cleanly, then move to the next. Reading the cadence The timestamps are where a scrape gives itself away. Minute by minute: 11:56 2 ← test phase (incl. the one failure) 11:57 1 11:58 25 ┐ 11:59 26 │ 12:00 20 │ ~25 req/min, dead regular … │ = one request every ~2.4s 12:07 21 ┘ No human reads visa rules on a 2.4-second metronome for 11 minutes. This is a loop. The fingerprint Four signals — and the point isn't nationality, it's that the request parameters themselves leaked the intent: Handle: visadb_scraper . It signed its own work. Email: throwaway @temp.com . No intention of receiving anything. Languages: en + zh , on a product with no Chinese-market surface yet. Error signature: the very first call (CHN→THA, in Chinese, 11:56:45) failed, then everything ran clean. Classic "calibrating the script" tell. The math 250 records is 0.6% of the base. At 25 req/min, a full dump would've taken ~26 hours . This wasn't a dump — it was a feasibility test . They proved a whole passport comes out easily, then stopped, nowhere near the 3,000/month free-tier ceiling. What I coul

Guia prático para adicionar verificação por código OTP via WhatsApp oficial no seu sistema, com exemplos em Node.js, PHP e Python — e comparação honesta de custos entre WhatsApp, SMS e e-mail Como implementar OTP (código de confirmação) por WhatsApp no Brasil Se você tem um cadastro, login ou checkout, em algum momento vai precisar confirmar que o usuário realmente controla o número de telefone que informou. Esse é o trabalho do OTP ( One-Time Password , ou senha de uso único): você envia um código, o usuário digita, você confere. No Brasil, mandar esse código por WhatsApp costuma ser melhor que por SMS — mais gente lê, entrega mais e custa menos. Neste post eu mostro como implementar isso na prática, com código que roda, e comparo os canais de forma honesta (inclusive citando alternativas pagas). Por que WhatsApp e não SMS? Critério WhatsApp oficial SMS E-mail Entregabilidade Alta Média Baixa (cai em spam) Taxa de leitura ~98% ~90% ~20% Custo por envio ~R$ 0,03 R$ 0,08–0,15 Baixo, mas pouco lido Copiar código Botão nativo Manual Manual O SMS ainda é um bom fallback para quem não usa WhatsApp, mas como canal principal de OTP no Brasil, o WhatsApp ganha na maioria dos casos. ⚠️ Use sempre a API oficial do WhatsApp (WhatsApp Business Platform) , não automação de WhatsApp Web. Automação não oficial derruba a entrega e corre risco de bloqueio pela Meta. O fluxo em 2 passos Toda implementação de OTP tem a mesma forma: Enviar o código ( send ) → você gera um código e manda pelo canal. Verificar o código ( verify ) → o usuário digita e você confere. O detalhe importante: a resposta do send confirma que a mensagem foi aceita , mas a entrega no aparelho é assíncrona. Para OTP isso não é problema — a própria verificação já é a prova de entrega . Se o usuário digitou o código certo, chegou. Você não precisa de webhook nem de polling de status. Implementando com uma API pronta Você pode falar direto com a WhatsApp Business Platform, mas isso exige aprovação de template, gestão

A JWT isn't just JSON you can inspect. It's a live bearer token. Here's a safer way to decode one. A few days ago I was reviewing a bug with a teammate. They wanted to see what was inside an access token, so they copied it into the first JWT decoder Google returned. It wasn't a dummy token. It was a production access token with almost an hour left before it expired. Nobody was trying to do anything risky—it was just the quickest way to inspect a JWT. That's exactly why this keeps happening. The thing people forget A JWT looks like this: header.payload.signature The payload isn't encrypted. It's just Base64URL-encoded JSON. Because of that, people often think: "The payload isn't secret, so the token is probably safe to paste." Those aren't the same thing. The payload may be readable, but the token itself is still your credential . Anyone holding it can usually authenticate as you until it expires. Why online decoders make me nervous Some JWT tools only decode locally in your browser. Others offer things like signature verification, claim validation, or key management. Features like those often require talking to a backend, which means the token gets sent somewhere else. Maybe the site is trustworthy. Maybe it isn't. From the UI alone, you usually can't tell. Even if a decoder claims everything runs client-side, I don't like assuming that's true when I'm holding a production credential. You don't need a website to inspect a JWT Most of the time I'm only interested in the payload anyway. echo " $TOKEN " \ | cut -d '.' -f2 \ | base64 --decode \ | jq Because JWTs use Base64URL encoding, you may need to translate the alphabet and add padding first: decode_jwt () { local payload = $( echo -n " $1 " | cut -d . -f2 | tr '_-' '/+' ) while [ $(( ${# payload } % 4 )) -ne 0 ] ; do payload = " ${ payload } =" done echo " $payload " | base64 --decode | jq } decode_jwt " $TOKEN " That gives you the claims, expiration time, issuer, audience—everything most people open a decoder for.

An investigation agent flagged "the license API PHP returns Japanese-hardcoded messages" and we sat down to fix it. But something felt off the moment we opened the file — the version running on the production server didn't match the latest commit in the local repo . Stranger still, production had more recent features than our local checkout . A bit of digging turned up the truth: months earlier, someone had hot-patched the production file in response to a different user issue, and that change had never been committed back to git . This post walks through how we detected that drift, and the two-stage strategy we used to merge production back into the local repo safely. How this regression silently slips in If we'd written the fix on top of our local repo and uploaded it to production, here's what would have happened: all the production-only improvements get overwritten and quietly disappear . In our case, the production file had a half-year-old language-handling addition for the "Early Bird Bonus" feature — when a USD customer buys, client_name is set to 'Early Bird Bonus' ; for JPY customers it's '早期利用特典' . None of that existed in our local git. A normal PR-merge-and-deploy cycle would have silently rolled back the Early Bird i18n logic , regressing English users' display back to Japanese. Catching this was half luck. Opening the file to start the fix, I noticed code I didn't recognize, ran git blame , and the lines were nowhere in git history . That's when alarm bells went off. Two-stage rollforward — make production the source of truth first The strategy we landed on was a two-stage merge. Stage 1 (rollforward sync) : Pull the production file straight into the local repo. Apply the diff in the "production → local" direction, not the other way . After this, the local repo's HEAD matches what's actually running on production. # Pull the production file into the local repo scp -i ~/.ssh/key layer2024@host:wpmm.jp/public_html/license/api/register_free.php \ /tmp/regis

Three months ago, the idea of an AI agent earning money autonomously was a thought experiment. Today, it's a $0-budget repo on GitHub. AIA — Autonomous Insight Agent is what I shipped this week. It's an LLM agent that: Collects signal from 6 free public APIs every 6 hours (Hacker News, GitHub trending, V2EX, dev.to, Lobsters, HN Algolia) Curates 100+ raw items down to 40 ranked, topic-tagged, de-duped entries using deterministic scoring (recency × source weight × topic boost × negative penalty) Publishes a free public dashboard at https://razel369.github.io/aia/ Exposes a paid x402 API at https://aia-x402.rmalka06.workers.dev — USDC on Base, no KYC, no API key, the HTTP 402 status code IS the payment request Auto-bids on agent marketplace jobs (MoltJobs) where AIA fits — research, data, competitive intel Fulfills accepted jobs autonomously — generates a research report from the latest feed, submits via the same API Why x402 matters The x402 protocol (Coinbase, https://x402.org ) revives the long-reserved HTTP 402 Payment Required status code as a real machine-to-machine payment primitive. The flow: Agent → GET /v1/signals → 402 + PAYMENT-REQUIRED header → Agent signs a USDC payment to my wallet → Agent retries with PAYMENT-SIGNATURE header → 200 OK + PAYMENT-RESPONSE header + signal JSON No Stripe, no accounts, no monthly subscriptions. Pay $0.01 USDC per call, instantly settled on Base. The agent consumer never has to ask a human to buy credits. Why this is novel Most "data feeds" today are static dumps or human-curated. AIA is the first agent-curated, agent-paid-for, agent-consumed stream. The LLM layer IS the moat — anyone can scrape HN, but de-noising, de-duping, and topic-classifying 100+ items into 40 ranked signals in 17 seconds is the actual product. The killer line in my dev plan: every job AIA accepts on MoltJobs can be fulfilled by calling its own paid endpoint. The agent pays for its own LLM compute via marketplace earnings — a positive feedback loop tha

OpenNG Foundation and spartan/ui 1.0 are the headline topics this week: a new home for libraries like Spectator and Elf, and spartan/ui, a stable shadcn-inspired component library for Angular. Also in brief: Storybook's Angular modernization through AnalogJS, the end of ng-conf, and AI Dev Craft in Las Vegas. OpenNG Foundation Maintaining open-source libraries is hard work. Developers often do it in their spare time, committing to years of maintenance, adding new features, and responding to user requests. Last episode, we reported that the ngneat organization was taken down for unknown reasons. While we still don't know why it happened, a new home has emerged for its popular libraries like Spectator and Elf: the OpenNG Foundation. Gerome Grignon, known for CanIUseAngular and as the organizer of Ng-Baguette, announced the foundation, which is already hosting these libraries. Alongside Gerome, the current OpenNG team also includes Dominic Bachmann, organizer of Angular Lucerne and author of the angular-typed-router library. OpenNG Foundation · GitHub OpenNG Foundation has 8 repositories available. Follow their code on GitHub. github.com spartan/ui 1.0 spartan/ui has officially released its 1.0 version. It provides an "accessible, production-ready library of more than 55 components" with fully customizable styling. After debuting in August 2023 with 30 primitives, it now reaches stable in 2026 with a modern architecture built around signals, standalone components, zoneless change detection, and SSR. Originally initiated by Robin Götz, a full team quickly formed around the project. spartan/ui can be seen as the Angular equivalent to shadcn/ui, famous for its customizability. While similar open-source alternatives exist, spartan/ui was the pioneer and has a proven track record of active maintenance over the years. Announcing spartan/ui 1.0 Robin Goetz Robin Goetz Robin Goetz Follow for Playful Programming Angular Jun 24 Announcing spartan/ui 1.0 # angular # webdev 8 reac

Maintaining a robust testing pipeline or managing automated node infrastructure often requires orchestrating dozens of isolated EVM wallets. Over time, these automated Python or JavaScript configurations inevitably hit a common wall: the accumulation of fragmented token dust across multiple layers (Ethereum, Arbitrum, Base, BSC, etc.). Trying to clear these micro-balances manually or writing one-off scripts to sweep individual assets scale operational costs rapidly. Each network requires separate RPC updates, custom middleware logic, and redundant gas overhead, turning standard infrastructure hygiene into an engineering bottleneck. The Problem with Traditional Asset Sweeping When handling larger developer setups or wallet clusters, custom scripts face three major friction points: Redundant Network Fees: Batching transfers without native contract-level optimization burns excessive gas when scaling to 50+ addresses. RPC Disruption: Constantly querying and broadcasting batch transfers via public or even shared private endpoints can trigger rate limits. Data Contamination: Manually routing funds from dense testing nodes increases the risk of cluster cross-contamination. To resolve this friction within our decentralized dev pipelines, we deployed a streamlined utility layer: CryptonEquity Terminal ( https://cryptonequity.com ). Building a Unified Utility Layer for Multi-Chain Workflows The terminal introduces a non-custodial Cross-Chain Dust Sweeper designed to eliminate fragmented operational friction. Instead of manually deploying individual sweeping scripts per account, the infrastructure automates multi-chain scanning and groups asset consolidation into a single transaction link. Simultaneous Layer Aggregation: Automatically detects micro-balances across dominant EVM networks at once. Gas Mitigation: Designed to structure transfer paths to limit redundant network fee overhead. Zero Onboarding Friction: Operating strictly on a non-custodial architecture, it requires n

The Federal Bureau of Investigation (FBI) said today it worked with industry partners to seize hundreds of domains associated with NetNut, a sprawling residential proxy service operated by the publicly-traded Israeli company Alarum Technologies [NASDAQ: ALAR]. The action comes roughly two weeks after KrebsOnSecurity published findings from multiple security firms connecting NetNut to the Popa botnet, a collection of at least two million devices that have been compromised by malicious software with little or no consent from victims.

TL;DR: Most extensions block Google's AI Overviews by hiding the panel with a content script after it renders — fragile, flickery, and always a step behind Google's markup changes. A better approach: force udm=14 at the network layer with declarativeNetRequest , so the AI Overview never loads. The content script becomes a backstop, not the main mechanism. One Chrome API mystery — AI Mode being invisible to four different extension APIs — shows why the DOM was never the right layer. Google puts an AI Overview at the top of most search results now, and a lot of people would rather it didn't. So there's a whole shelf of Chrome extensions that remove it. Almost all of them work the same way, and I think that way is a mistake. The obvious approach, and why it's a trap The default move is DOM-hiding: inject a content script, wait for the AI Overview panel to render, find it by class name or attribute, and set display: none . It's the first thing anyone reaches for, and it works — until it doesn't. The problems are all baked into the approach. You're reacting after the render, so there's a flash of AI content before your script catches it. You're matching against Google's markup, which is obfuscated and reshuffled constantly, so every layout change is a silent breakage. And you're paying for DOM churn on a page you don't control. You end up in a permanent game of catch-up against a page that changes whenever Google feels like it. The deeper issue is that you're operating one layer too high. The panel is a symptom . By the time it's in the DOM, the work is already done — the server decided to send it, the page rendered it, and now you're scrambling to un-render it. If you can move the decision earlier, none of that scramble has to happen. The thesis: prevent it at the network layer Google Search takes a parameter, udm , that selects which result vertical you get. udm=14 is the plain "Web" results view — the classic list of links, no AI Overview, no AI Mode. It's Google's ow

Here's the thing: i Cut My LLM Bill 40x and Rewrote Nothing: A CTO's Migration Story Six months ago my CFO slid a single line item across the table. OpenAI: $4,800 for the month. I'd like to say I was surprised, but I'd been watching the number climb for two quarters. What actually surprised me was how little it took to bring that number down to under $200 without anyone on my engineering team writing new code, without a single regression, and without telling my customers anything had changed. This is the story of how we did it, what we evaluated, what broke, and what I'd tell any other CTO walking into the same conversation with their finance lead. The Real Cost of Vendor Lock-In I've been a CTO long enough to recognize the pattern. You pick a vendor. The vendor becomes the default. Procurement assumes you're locked. Your engineers build abstractions around their quirks. Six months later nobody can tell you what it would actually cost to switch because the switching cost has become invisible. It's just "how we do things." OpenAI was that vendor for us. GPT-4o handled our summarization pipeline, our customer support copilot, and a few internal tools I'd hacked together on a Saturday. We were paying $2.50 per million input tokens and $10.00 per million output tokens. At our volume, those numbers add up faster than you'd think because the output side balloons in conversational workloads. Here's the arithmetic that should scare every CTO: at $10/M output, every million tokens of generated text costs a dime on the dollar. If your product generates a 1,000-token response for 100,000 users a day, that's 100 million tokens a day, which is $1,000 a day in output alone. That's $30,000 a month. Just for one feature. The 40x claim I keep seeing isn't marketing spin. DeepSeek V4 Flash charges $0.18/M input and $0.25/M output. Do that math against GPT-4o and the comparison is brutal. Multiply your current OpenAI output spend by 0.025 and you'll get the rough number you'd pay for

I love board games — especially the kind you can play without leaving home. You just call your friends, drop a link, and you're playing in minutes. At some point, I caught myself wondering: how realistic is it to build a complete game almost entirely with AI? Not a prototype, but something actually playable. I decided to find out. Three days later, I had a working browser-based board game: rooms, multiplayer, bots, chat, full game sessions. But the most interesting thing turned out to have nothing to do with AI writing code. What's the Game? The game is called "Growing City" (Растущий город). It's an economic board game about developing your own city. Each turn, players roll a die, buildings activate, income flows in, and you earn money to buy new structures. Gradually you build up enterprises, construct your economic engine, and race to complete all the key buildings before your opponents. You can play directly in the browser with no registration. I wanted the simplest possible entry: open the site, enter a nickname, create or join a room. If the mechanics seem familiar — you're not imagining it. I was inspired by a well-known city-building board game. Day 1: AI Really Can Write Games I'm not a developer. I work in tech, but I don't code professionally. Over the past few months I've been experimenting heavily with vibe coding, so I decided to build this project the same way. I didn't start with code at all. First, I wrote out the mechanics in detail: what cards exist, how a turn plays out, what should happen in each situation. Once the logic settled, I started gradually converting the description into code using AI. Day 2: Writing the Game Was Just the Beginning When the first playable version appeared, it quickly became clear that the code was far from the hardest part. The biggest problem was balance . If you leave everything as-is, players find the single most profitable strategy within a few games and repeat it endlessly. I had to manually tweak card costs, adj

When looking for a Property Management System (PMS) dashboard for a hotel project, I noticed most existing solutions look like they were built in 1998. I decided to code a modern, premium dashboard from scratch using pure HTML and vanilla CSS. I focused on two main design trends: Dark Mode and Glassmorphism. Here is a breakdown of how I approached the design, along with some CSS snippets you can use in your own projects. The Dark Mode Color Palette Instead of using pure black (#000000), I used a deep slate blue for the background. This reduces eye strain for hotel staff working night shifts and feels much more premium. `css :root { --bg-dark: #0f172a; /* Deep slate / --surface-dark: #1e293b; / Slightly lighter surface / --accent-gold: #facc15; / Premium gold for CTAs */ --text-main: #f8fafc; } body { background-color: var(--bg-dark); color: var(--text-main); }` The Glassmorphism Effect For the statistics cards (like Revenue and Occupancy Rate), I used a subtle glass effect to make them pop off the dark background without looking flat. `css .stat-card { background: rgba(30, 41, 59, 0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; padding: 24px; transition: transform 0.3s ease; } .stat-card:hover { transform: translateY(-5px); }` The Result By combining these modern design tokens with a clean CSS Grid layout, the dashboard feels incredibly sleek. It tracks live bookings, room statuses, and RevPAR seamlessly. Want the full code? If you are a developer, agency, or freelancer building a SaaS or a booking system, you don't have to start from scratch. I've packaged the complete, fully responsive HTML/CSS template. You can see the design and grab the source code here to save yourself 20 hours of coding: 👉 Download the Lumina PMS Template Happy coding! Let me know if you have any questions about the CSS architecture in the comments.

Every sprint starts with optimism. The board is clean, the story points are perfectly balanced, and the team is ready to ship. Then, Tuesday happens. The CEO wants a "quick favor." A major client finds a critical bug in production. The marketing team urgently needs a landing page tweak. By Thursday, your pristine sprint board is buried under a mountain of "urgent" tickets that were never discussed in planning. This is Unplanned Work , and it is the silent killer of engineering velocity. Why Unplanned Work is So Dangerous It’s not just that unplanned work takes time. The real damage comes from context switching . When a developer is deeply focused on building a new feature, forcing them to stop, spin up a local environment for a different repository, debug a legacy issue, and then try to return to their original task destroys their flow state. A "10-minute quick fix" actually costs the company an hour of lost productivity. When this happens multiple times a week: Deadlines Slip: The tasks you actually committed to get pushed back. Burnout Increases: Developers feel like they are working hard but accomplishing nothing. Trust Erodes: Management wonders why the team can't stick to a timeline. How to Protect Your Team You cannot eliminate unplanned work completely. Bugs will happen, and production will break. But you can manage it. 1. The "Firefighter" Rotation Instead of letting unplanned work disrupt the entire team, assign one developer per sprint to be the "Firefighter" (or Batman/Support). Their only job for that sprint is to handle urgent bugs, ad-hoc requests, and unblock others. The rest of the team is completely shielded. 2. The 20% Buffer Rule If you have 100 hours of developer capacity, never plan 100 hours of feature work. Always leave a 20% buffer specifically for unplanned tasks. If no fires start, you can pull from the backlog. If fires do start, your deadline isn't destroyed. 3. Track the "Ghost" Tickets The worst kind of unplanned work is the kind that h

We have all been riding the massive vibe coding wave lately. It feels like pure magic to sit back, tell an AI assistant what to build, and watch a full application appear out of thin air. But if you have ever tried to take that exact same web workflow and deploy a smooth, native app onto an iPhone or Android, you know exactly where the frustration sets in. Are you a vibecoder who loves to build applications and you have built many websites? You have built and deployed many websites. Now you really want to make a mobile application that could disrupt the market and go really viral. Have you heard of FlutterFlow ? Have you tried using it? If the answer is no, then I will tell you about FlutterFlow and then you can decide whether you want to check it out and vibe code mobile applications. I will share the app that I created as well. What is FlutterFlow anyway? Have you ever tried building mobile applications and heard of Flutter and Dart? If you haven't, you should definitely check them out. When I was in college looking for a path to choose whether to pursue app development or web development. I explored both options. While exploring app development, I used and built applications using Flutter, an open-source framework created by Google, which uses a programming language called Dart. While Flutter itself is built by Google, FlutterFlow is an independent, visual low-code platform founded by ex-Google engineers. Today, many of us are familiar with AI vibe-coding tools like Cursor and Claude, which allow us to generate code for websites using conversational prompts. FlutterFlow, however, operates differently than vibe-coding: instead of writing code through chat prompts, it provides a visual, drag-and-drop canvas where you can build and design native mobile applications visually while it automatically generates clean Flutter code in the background. I recently had the opportunity to attend a workshop held by the FlutterFlow team and there, I was blown away by the magic of

Why Our AI Agent Still Stumbles on Full-Stack Apps We've all been there. You're riding high on the AI hype, picturing your agent effortlessly spinning up features, leaving you free for higher-level architectural decisions. You feed it a prompt like, "Build me a simple user profile page with authentication, connected to a database, using Next.js and TypeScript." You hit enter, grab a coffee, and expect magic. More often than not, what you get back is… well, it's something . It might be syntactically correct, perhaps even impressive in parts. But when you try to integrate it, to make the pieces talk to each other harmoniously, it often feels like trying to connect a square peg to a round hole. The agent struggles, and frankly, so do we trying to fix its output. The Seams, Not Just the Parts: Why Full-Stack is More Than Sum of Its Halves In my experience, AI agents, especially Large Language Models, are fantastic at generating code for isolated problems. Need a React component? A SQL query? A utility function? They'll often nail it. But a full-stack application isn't just a collection of frontend, backend, and database parts. It's the intricate, often implicit, contracts between them. Think about a modern Next.js application. It’s a beautifully complex dance: Server Components vs. Client Components: This paradigm shift fundamentally changes where state lives, where data is fetched, and how interactivity is handled. An AI might generate a useState hook inside a Server Component, completely missing the architectural intent. Data Fetching Strategies: getServerSideProps , getStaticProps , route handlers , fetch directly in Server Components – each has specific implications for caching, performance, and where your data lives at runtime. An AI might pick an inefficient or incorrect strategy based on a simplified prompt. Type Safety Across Boundaries: TypeScript is a lifesaver, but defining types that perfectly mirror your database schema, API responses, and frontend state re

If you're anything like me, your Chrome toolbar probably looks like a collection of tiny puzzle pieces. Grammar checker. Screenshot tool. Summarizer. Writing assistant. Code explainer. Translator. Email helper. At one point I had more than a dozen extensions installed. Chrome became slower, pages loaded later, and every extension wanted permission to "read and change all your data." Then I started experimenting with AI tools instead. Not everything was better—but some things surprised me. Here's what I learned after replacing most of my browser extensions with AI. 1. Grammar Checkers I used to rely on grammar extensions that constantly underlined my writing. Now I simply paste my draft into an AI assistant and ask: Improve grammar while keeping my writing style. The biggest advantage isn't fixing mistakes—it's preserving tone. Traditional grammar tools often make everything sound the same. AI can make your writing cleaner without removing your personality. 2. Article Summarizers This was probably the easiest replacement. Instead of installing a summarizer extension, I paste the article and ask: Summarize in 5 bullet points Give me the key takeaways Explain it like I'm a beginner What important details are missing? The last prompt is especially useful because summaries sometimes leave out important context. 3. Code Explanation This has become one of my favorite AI use cases. Instead of searching Stack Overflow for every unfamiliar function, I simply paste the code and ask: Explain this line by line Why was this approach chosen? Is there a better alternative? What's the time complexity? The answers aren't always perfect, but they're often enough to understand what's happening before diving into documentation. 4. Writing Commit Messages This is something I didn't expect AI to help with. Instead of writing: fixed stuff I can paste my git diff and ask for a concise commit message. Example: feat: add JWT authentication middleware fix: resolve login redirect loop refactor:

Stop Treating Databases Like Dumb Storage! A Modern Approach to Data Layer Optimization Introduction In the rapidly evolving landscape of cloud-native applications, the database often remains the last bastion of outdated architectural thinking. Too many development teams, even in 2026, treat their databases as little more than dumb storage – a simple receptacle for data. This oversight invariably leads to an insidious problem: what was once perceived as a cost-saving cloud server rapidly transforms into an expensive, resource-hungry bottleneck that devours compute cycles, memory, and, most critically, developer sanity. The knee-jerk reaction to performance woes—throwing more hardware at an unoptimized SQL database or poorly designed NoSQL schema—is not scalable backend design; it's procrastination. This approach might temporarily mask symptoms, but it fundamentally ignores the root cause, leading to spiraling costs and increasing technical debt. Modern backend design demands a paradigm shift: treating your data layer as a strategic, highly optimized component rather than a generic storage utility. The path to true scalability, resilience, and cost-efficiency begins with intelligent data management from day one. Architectural Walkthrough: Embracing Smart Data Strategies Instead of "sharding your problems" through reactive, unguided horizontal scaling, embrace smart data partitioning . This isn't just about distributing data; it's about strategically organizing it to align with your application's access patterns and business domains. 1. Smart Data Partitioning & Query Patterns: Imagine an e-commerce application. Instead of sharding all orders data uniformly, consider partitioning by a natural business key, like customer_id or product_category . This ensures that common queries (e.g., "get all orders for customer X") are localized to a single partition, minimizing cross-partition operations. // Conceptual Service for Order Management class OrderService { private final

The conversation around Agentic AI often focuses on one goal: making agents more autonomous. More tools. More reasoning. More planning. More independence. It sounds like progress. But is more autonomy always the right answer? As software engineers, we rarely optimize for "more." We don't build distributed systems when a monolith is sufficient. We don't introduce microservices because they're fashionable. We choose architectures that balance capability with complexity. The same principle applies to AI agents. The question isn't "How autonomous can my agent be?" It's "How autonomous should my agent be?" Autonomy Is a Design Decision When people talk about autonomy, they often think of it as a feature that an agent either has or doesn't have. In reality, autonomy is a design decision. Every time we allow an agent to make another decision on its own, we are increasing its responsibility. That responsibility comes with benefits, but it also introduces new engineering challenges. More autonomy means the agent can adapt to situations that weren't anticipated during development. It can make progress toward a goal without being guided through every step. At the same time, it becomes harder to predict, validate, debug, and trust. Autonomy isn't free. Thinking in Terms of an Autonomy Spectrum Instead of treating autonomy as a binary concept, it helps to think of it as a spectrum. At one end are systems that simply generate responses. They have no authority to take action. As autonomy increases, agents begin suggesting actions, invoking tools, planning multiple steps, and eventually deciding how to achieve a goal with minimal human involvement. The important observation is that every step along this spectrum increases both capability and complexity. That's why the objective shouldn't be to reach the highest level. It should be to stop at the level your problem actually requires. More Autonomy Isn't Always Better Imagine building an internal HR assistant. Its primary responsibil

Every blog post needs an OG image. Without one, your links look blank on Twitter, LinkedIn, and Slack — just a plain URL that nobody clicks. Most developers solve this by spinning up a headless browser, loading an HTML template, taking a screenshot, and uploading it somewhere. It works, but now you're maintaining a Puppeteer instance, dealing with font rendering quirks, and burning server resources on something that should be simple. There's a faster approach: design your OG images as HTML templates and let a screenshot API handle the rendering. The Idea: HTML Templates as OG Images Think of your OG image as a tiny webpage. You already know HTML and CSS. Build a 1200×630 template with your blog title, author name, maybe a gradient background — whatever fits your brand. Host it or pass it as raw HTML. Then call an API to screenshot it. Done. A basic template might look like this: <div style= "width:1200px;height:630px;display:flex;align-items:center; justify-content:center;background:linear-gradient(135deg,#1a1a2e,#16213e); font-family:Inter,sans-serif;padding:60px" > <div style= "color:#fff;text-align:center" > <h1 style= "font-size:48px;margin:0" > {{title}} </h1> <p style= "font-size:24px;color:#8892b0;margin-top:20px" > {{author}} · {{date}} </p> </div> </div> Replace the placeholders on your server, then send the resulting HTML (or a URL pointing to it) to the API. Calling the API With ScreenshotRun , a single curl request captures the rendered template as a PNG: curl -X POST "https://api.screenshotrun.com/v1/screenshot" \ -H "Authorization: Bearer YOUR_API_KEY" \ -H "Content-Type: application/json" \ -d '{ "url": "https://yourblog.com/og-template?title=My+Post+Title", "viewport_width": 1200, "viewport_height": 630, "format": "png" }' The response gives you the image file. Save it to your CDN, set the og:image meta tag, and you're done. No browser to manage, no Chrome binary eating RAM on your CI server. Wiring It Into Your Build If you publish with a static sit