标签：#Web

Guren is a fullstack TypeScript framework for Bun. I started it because I wanted Laravel's shape in TypeScript, and I kept going for a different reason: once I was handing most of the code to agents, what I wanted from a framework was a way to check what came back. gurenjs / guren Guren is a Bun-native TypeScript MVC framework that unites Laravel-like ergonomics with Hono, Inertia.js, React, and Drizzle ORM, aiming to deliver a fast, elegant full-stack workflow that keeps frontend and backend work in sync. Guren The fullstack TypeScript framework for the AI-agent era. Laravel-style conventions, end-to-end type safety, and built-in agent introspection and verification — routing, controllers, ORM, authentication, and Inertia.js + React in one cohesive experience that humans and AI coding agents navigate from the same map. v2 — Stable. Breaking changes only in major releases, per the release policy . Quick Start # 1. Scaffold a new app with authentication (dependencies install automatically) bunx create-guren-app my-app --auth cd my-app # 2. Run migrations and seed the demo user (SQLite by default — no server needed) bun run db:migrate bun run db:seed # 3. Start the dev server bun run dev Open http://localhost:3333 and sign in at /login with demo@example.com / secret . Add features as you go bunx guren add auth # Authentication bunx guren add resource posts --fields " title:string,body:text " # CRUD resource bunx guren add queue # Background jobs … View on GitHub I like the way Laravel and Rails let you build. A feature is a route, a controller, a model and a view, and authentication, queues, mail and validation are already wired together before you start. TypeScript has the parts. Hono for HTTP, Drizzle for the ORM, Zod for validation, Inertia and React for rendering, all of them good. What's missing is an agreed way to connect them, so every project ends up wiring it slightly differently, and I've written that wiring more times than I want to count. The mistakes move

Hello, I'm Maneshwar. I'm building git-lrc, a Micro AI code reviewer that runs on every commit. It is...

Liar’s Dice sounds like a perfect game to put onchain. The rules are simple, every move can be verified, and you don’t need a centralized game server deciding who won. There is just one problem. Blockchains are public. Liar’s Dice only works if your dice are private. If I simply stored every roll inside a normal smart contract, anyone could inspect the state and know exactly what everyone was holding. At that point, there is no bluffing. You would basically be playing poker with everyone's cards face up. So I built FHE Liar’s Dice , a decentralized version of the game where your dice remain encrypted while the game is being played. Not hidden behind a backend. Not stored privately in some database. Encrypted onchain. And the interesting part is that the smart contract can still use those encrypted dice to determine whether you are lying. The problem with putting hidden-information games onchain Most blockchain games actually benefit from transparency. If you're building something like chess, every player is supposed to know the complete state of the board. Liar’s Dice is different. Each player starts with five dice that only they should be able to see. Players then make public claims about the combined dice across the entire table. You might say: There are six 4s on the table. The next player has two choices. Raise the bid. Or call your bluff. The entire game comes from the fact that nobody knows exactly what everyone else is holding. But a traditional smart contract has the opposite property. Its state is transparent. Even if the frontend refuses to display your dice, someone can simply inspect the contract, query the state, watch events, or build their own interface. Hiding something in the UI isn't privacy. I needed the actual game state itself to remain secret. FHE turned out to be a very good fit for the game I built the game using Fhenix CoFHE . Fully Homomorphic Encryption is interesting because it allows computation to happen directly over encrypted values.

Your modal is open, centered, perfect. Then someone flicks the overlay and the page behind it scrolls away underneath. Everyone's first fix is the same three lines: useEffect (() => { document . body . style . overflow = open ? " hidden " : "" ; }, [ open ]); It works on your laptop. Then the bug reports arrive: On iPhone the page still moves. iOS Safari rubber-band scrolls the document by touch even with overflow: hidden on <body> . Something else got wiped. "" isn't necessarily what was there before — you just erased whatever your design system or CSS-in-JS had set inline. Two overlays, one frozen page. A drawer and a lightbox both own body.style.overflow ; close them in the wrong order and the page never scrolls again. The layout jumps the instant the desktop scrollbar disappears. useScrollLock from @reactuses/core is those three lines with the hard parts handled: it restores the exact inline overflow it replaced, adds a touchmove guard on iOS that still lets your modal's own content scroll, exposes the lock as React state you can render off, and works on any element — not just <body> . This post covers what it actually does line by line, why overflow: hidden is not enough on iOS, how it compares to the position: fixed and body:has(dialog[open]) approaches, and the six gotchas that show up in real apps. Quick Start npm install @reactuses/core import { useScrollLock } from " @reactuses/core " ; import { useEffect } from " react " ; function Modal ({ open , onClose , children }: ModalProps ) { // a getter, not `document.body` — see the SSR gotcha below const [, setLocked ] = useScrollLock (() => document . body ); useEffect (() => { setLocked ( open ); return () => setLocked ( false ); // release even if we unmount while open }, [ open , setLocked ]); if ( ! open ) return null ; return ( < div className = "overlay" onClick = { onClose } > < div className = "sheet" onClick = { e => e . stopPropagation () } > { children } </ div > </ div > ); } The signature: const [

Amazon Web Services has extended Amazon Bedrock AgentCore with runtime instances, a new compute option that gives AI agents persistent infrastructure purpose-built for complex long-running workflows and multi-agent coordination. By Matt Saunders

I kept running into a boring problem that was harder to debug than it should have been: text that looked normal, but behaved wrong the moment I pasted it into a CMS, a spreadsheet, or a code comment. Search would fail. Line breaks would get weird. A heading copied from ChatGPT would drag Markdown markers along with it. Sometimes the only visible clue was that the punctuation felt slightly "off." What finally made this manageable wasn't some big NLP trick. It was going back to the dumb, reliable layer: exact character matching. The tool I built for this is basically a pile of small, deterministic cleanups for the specific junk that copied text tends to accumulate — full-width punctuation mixed into ASCII, invisible Unicode code points, curly quotes, em dashes, leftover Markdown, and whitespace noise. The most useful part is the invisible-character scan, not the cleaning The piece I trust most in the whole component is the part that explicitly names which invisible characters it cares about, then counts them by code point. It's not doing a vague "this text seems suspicious" pass. It has a hard-coded inventory: const invisibleDefs = [ { key : " zwsp " , codes : [ 0x200b ] }, { key : " zwnj " , codes : [ 0x200c ] }, { key : " zwj " , codes : [ 0x200d ] }, { key : " bomZwnbsp " , codes : [ 0xfeff ] }, { key : " wordJoiner " , codes : [ 0x2060 ] }, { key : " softHyphen " , codes : [ 0x00ad ] }, { key : " bidiMarks " , codes : [ 0x200e , 0x200f , 0x202a , 0x202b , 0x202c , 0x202d , 0x202e ] }, ]; const codesToRegex = ( codes ) => new RegExp ( `[ ${ codes . map (( c ) => " \\ u " + c . toString ( 16 ). padStart ( 4 , " 0 " )). join ( "" )} ]` , " g " ); const analyzeInvisible = ( str ) => { const breakdown = invisibleDefs . map (( def ) => ({ key : def . key , count : ( str . match ( codesToRegex ( def . codes )) || []). length , })); const total = breakdown . reduce (( sum , row ) => sum + row . count , 0 ); return { breakdown , total }; }; I like this because it's brutall

A teammate opened a PR titled "fix hero heading on small screens." The diff added a media query. Mine, reviewing it, found four more already in that file — one per breakpoint, added over eighteen months by four different people, each one patching the width the last person didn't think of: .hero-heading { font-size : 3rem ; } @media ( max-width : 1200px ) { .hero-heading { font-size : 2.5rem ; } } @media ( max-width : 992px ) { .hero-heading { font-size : 2.25rem ; } } @media ( max-width : 768px ) { .hero-heading { font-size : 1.75rem ; } } @media ( max-width : 480px ) { .hero-heading { font-size : 1.5rem ; } } Five rules to make one number — the font size of one heading — track the width of the screen it's on. And it still didn't work everywhere: resize the window to 850px and the heading is stuck at the 992px value, a little too big for the space it actually has. Every gap between breakpoints is a size nobody chose, it's just whatever the nearest rule left behind. Here's the part that stings: none of this has been necessary since 2020. The fix that isn't a breakpoint at all clamp() takes three values — a minimum, a preferred value, and a maximum — and returns whichever one the situation calls for: .hero-heading { font-size : clamp ( 1.5rem , 1rem + 2vw , 3rem ); } Read it as a sentence: never smaller than 1.5rem, never bigger than 3rem, and in between, scale with the viewport. The five media queries above collapse into that one line — and unlike them, it doesn't have gaps. clamp() recalculates the size continuously, every pixel the viewport moves, so there's no "850px value" that got left behind. It's a formula, not a lookup table. The middle value is where the "preferred" size lives, and it's 1rem + 2vw — a fixed part plus a viewport-relative part — not just 4vw on its own. That's not decoration. It's the one part of this pattern worth getting right, because the shortcut version quietly breaks something. The version that looks fine and isn't The formula you'll see

React Router v8 was released on June 17, 2026, with minimal breaking changes and new baselines. Key updates include an ESM-only build and default middleware settings. React Router v6 and Remix v2 have reached End of Life. Developers should follow specific migration guidelines to update their applications, while some are considering alternatives like TanStack Router. By Daniel Curtis

I didn't want to write another "what's new in Next.js 16.3" post. Enough of those exist. I wanted to...

Can't believe I spent 2 weeks writing this. Last week, I gave a talk at a Cursor community event...

Most write-ups on this subject are about technique. This one is about the three decisions you should make before you write any code, because in my experience every project that went badly went badly for a reason that was decided on day one and not noticed until much later. I have built this kind of collection twice, for competitive analysis and for a partner-vetting workflow. Neither of them needed to touch anything behind a login, and I want to explain why that turned out to be the useful constraint rather than the limiting one. Line one: the login wall is a boundary A login wall is a statement about who the content is for. Treating it as an engineering obstacle to be routed around is the decision that puts a project on the wrong side of everything: terms of service, the platform's own detection, and in several jurisdictions the law. So the first line is simply: if it requires an account to see, it is out of scope. Not "hard," not "for later." Out of scope. I am not going to discuss techniques for getting past one, and I would be sceptical of any article that does. The interesting engineering question here is not how to see more. It is how much you can actually do with what is openly published, and the honest answer is: considerably more than people assume before they check. This constraint also has a practical benefit that is easy to miss. A pipeline built only on openly available data does not break when authentication changes, does not require credential management, and does not put an account at risk. Mine has survived two platform changes that took down colleagues' authenticated collectors. Line two: public does not mean unrestricted The second line is the one developers get wrong most often, and it has nothing to do with access. Data being publicly visible says nothing about whether you may store it, for how long, or what you may do with it. In the EU and UK, information about an identifiable person is personal data whether or not they published it themselves

I spend a lot of time in the AI space -- reading papers, building things, talking to engineers who are actually shipping. And there is a gap between what the demos show and what production systems actually look like that nobody is being fully honest about. So here is my honest take on where things actually are. The Problem With How We Talk About AI Agents Everyone is calling everything an "agent" right now. A function that calls a tool? Agent. A chatbot with memory? Agent. A script with a loop? Agent. This dilution is not just semantic. It is causing real engineering mistakes. When you do not have a precise definition for what you are building, you end up over-engineering simple pipelines and under-engineering genuinely complex ones. I have seen teams spend weeks adding "agentic" orchestration to workflows that would have been fine as a single well-structured prompt. Here is the definition I keep coming back to: an agent is a system that has an objective, not just an instruction. It decides what to do next. It handles failure. It knows when it is done. Everything else is just a fancy function call. 🟢 If your system needs a human to tell it each step, it is not an agent. It is a chat interface. 🔵 If your system can recover from a failed tool call and try a different approach, you are getting somewhere. ✅ If your system can decompose a goal into subtasks and delegate them, that is the real thing. What Is Actually Happening in Production Right Now The honest picture from teams I follow and talk to: Most real agent deployments are narrow. They do one thing well. Customer support triage. Document extraction. Code review on a specific codebase. They are not general-purpose reasoning engines. They are purpose-built pipelines with some intelligence in the decision layer. The teams getting good results are not chasing the latest model release. They are obsessing over: ☑️ Tool design -- what can the agent actually call, and how clean is the interface ☑️ Failure handling -- wh

_Ran into an open-source project called PrivaMesh yesterday and decided to look under the hood since their architecture choice is wild. Basically, it is an iOS chat application that functions without a backend. No central infrastructure, no corporate servers, nothing. The onboarding flow requires absolutely no phone numbers, emails, or personal identifiers. There is no account registry database to hack, which completely eliminates the usual honeypots for data leaks. Instead of routing data through a standard server farm, this thing uses the Solana blockchain as a raw transport layer. Every encrypted payload is wrapped into a transaction and pushed directly to one-time destination addresses. The cryptography stack is actually solid: they combined X3DH handshakes with Double Ratchet for rolling keys and forced fixed-size padding so observers cannot guess the length of your text. The social graph stays fully hidden because the app constantly rotates delivery points and adds decoy traffic to mess with timing analysis. It is a pretty cool practical application of web3 state machines instead of the usual token speculation. Check the repo if you are into decentralized networking._

How to keep APIs secure, consistent, compliant, and manageable as your organization grows. I've...

Hace unos meses empecé a construir Utiligo , una colección de calculadoras en español: horas extras, IVA, aguinaldo, préstamos, IMC. La premisa técnica era simple y me la tomé en serio: cero dependencias de JavaScript en el navegador . Sin React, sin frameworks de UI, sin librerías de gráficos. Ni una. Esto es lo que aprendí construyéndolo. Por qué cero dependencias La mayoría de estas herramientas hacen aritmética. Sumar horas, aplicar un porcentaje, dividir un salario entre 30. Enviar 40 KB de framework al navegador para calcular salario / 30 / 8 es desproporcionado, y en América Latina —donde está mi audiencia— buena parte del tráfico llega por móvil con conexiones irregulares. El stack quedó así: Astro en modo output: 'static' , que genera HTML puro <script is:inline> con JavaScript de toda la vida para la interactividad Cloudflare Pages para servirlo El resultado: páginas que funcionan antes de que termine de cargar cualquier cosa. Lo que sí duele de esta decisión Sería deshonesto contarlo como si no tuviera costes. Los gráficos hay que dibujarlos a mano. El gráfico de pastel del presupuesto mensual es SVG generado con trigonometría: var end = start + pct * 2 * Math . PI ; var x1 = cx + r * Math . cos ( start ), y1 = cy + r * Math . sin ( start ); var x2 = cx + r * Math . cos ( end ), y2 = cy + r * Math . sin ( end ); var large = pct > 0.5 ? 1 : 0 ; svg += ' <path d="M ' + cx + ' , ' + cy + ' L ' + x1 + ' , ' + y1 + ' A ' + r + ' , ' + r + ' 0 ' + large + ' ,1 ' + x2 + ' , ' + y2 + ' Z"/> ' ; Con una librería serían tres líneas. Aquí son treinta y hay que entender el arco elíptico de SVG. ¿Vale la pena? Para un gráfico, sí. Para un dashboard entero, probablemente no. No hay reactividad. Cada oninput actualiza el DOM a mano. Funciona bien con diez campos; con cien sería insostenible. El generador de QR tuve que escribirlo. Codificación Reed-Solomon incluida. Fue el fin de semana más educativo del proyecto y el que menos recomendaría repetir. El bug que me enseñó

🚀 Technical Briefing: This tutorial is part of our deep-dive series on Agentic Workflows at Gate of AI . For the full technical breakdown, interactive code sandbox, and the native Arabic translation, visit the original article here . An evaluation-first guide to deciding whether GPT-4o mini fine-tuning is justified for a narrowly defined language task. This article uses the available research context rather than assuming unverified API capabilities, model snapshots, pricing, or deployment features. GPT-4o Mini Fine-Tuning: Start With Evidence, Not an Upload Fine-tuning is often presented as the next step after prompt engineering, but the available evidence does not support treating it as an automatic upgrade. Before preparing a dataset or committing to a training workflow, define the task, establish a baseline, select measures that reflect the real objective, and decide what result would justify changing the system. The verified research context is especially relevant for text transformation. A TREC 2024 Plain Language Adaptation of Biomedical Abstracts study evaluated prompt engineering, a two-AI-agent approach, and fine-tuning with OpenAI GPT-4o and GPT-4o mini models. Its objective was to simplify biomedical abstracts for a K-8 audience, approximately 13- to 14-year-old students. The study used qualitative assessments for simplicity, accuracy, completeness, and brevity on 5-point Likert scales, together with readability measures including Flesch-Kincaid grade level and the SMOG Index. Its results are a useful warning against simplistic claims. Prompt engineering with GPT-4o mini and the two-agent approach showed stronger qualitative performance in that evaluation. Fine-tuned models excelled in accuracy and completeness, but were less simple. The paper also reported that GPT-4o mini prompt engineering outperformed the evaluated iterative two-agent and GPT-4o fine-tuning approaches on its qualitative results. That is not a universal verdict on fine-tuning. It is ev

Si sabes Python pero el frontend te frena, NiceGUI es una de las mejores noticias de los últimos años: te permite construir aplicaciones web completas —con botones, formularios, gráficos y navegación— usando solo Python. ¿Qué es NiceGUI? Es un framework construido sobre FastAPI (backend) y Quasar/Vue (frontend). Tú escribes Python; NiceGUI genera la interfaz en el navegador y mantiene sincronizado el estado por ti. No necesitas HTML, CSS ni JavaScript para empezar. Lo simple que es Una app con un botón que muestra un mensaje son literalmente cuatro líneas: from nicegui import ui ui . button ( ' Saludar ' , on_click = lambda : ui . notify ( ' ¡Hola! ' )) ui . run () La jerarquía de la interfaz se expresa con context managers , que reflejan cómo se anidan los elementos: with ui . card (): ui . label ( ' Iniciar sesión ' ). classes ( ' text-xl font-bold ' ) usuario = ui . input ( ' Usuario ' ) clave = ui . input ( ' Clave ' , password = True ) ui . button ( ' Entrar ' , on_click = lambda : entrar ( usuario . value , clave . value )) Añadir estado reactivo, formularios, tablas o rutas ( @ui.page('/panel') ) es igual de directo. ¿Para qué es ideal? MVPs y prototipos: validar una idea en días, no semanas. Dashboards internos y paneles de datos. Herramientas internas para tu equipo, sin montar un frontend aparte. Demos de modelos de IA o scripts que necesitan una interfaz. ¿Cuándo NO es la mejor opción? NiceGUI renderiza en el cliente, así que para sitios donde el SEO del contenido es crítico (un blog, una landing pública que debe posicionar) conviene complementarlo con buenas meta etiquetas y datos estructurados, o valorar renderizado en servidor. Para aplicaciones, dashboards y herramientas internas es una elección excelente y muy productiva. Rendimiento y despliegue Una app NiceGUI se despliega como cualquier app de FastAPI/Uvicorn, normalmente detrás de nginx con systemd. Sirve los estáticos desde nginx y usa ui.run(show=False) en producción para no abrir un navegador

I built Suzi Chat to bring back the nostalgic feel of late-90s/early-2000s browser chat rooms. Key Features: Create and customize your own public or private chat rooms instantly from the browser. Built-in multiplayer casual board games (Chess, Checkers, Gomoku). No complicated setup—straightforward web-based access. Built using a NestJS backend and running on a dedicated Linux VPS. Live Platform: https://suzichat.com Looking for feedback from other developers on the UI layout, room creation flow, and multiplayer lobby stability.

Introduction I did something stupid. I built a superhero-themed Nuxt app, connected it to an Anthropic model through Amazon Bedrock , and gave it a tool that deletes files from my computer. In fact, if I wasn't careful, it could have deleted all my files! The first time I tried it, I didn't use any sort of approval mechanism. And as you expected it just deleted things. Then I looked into how my coding agent works, and I learned about tool approvals. I learned that AI SDK 7 has a tool approval at the model-call level. It works by pausing for an approval, showing an approval window, and then deleting it. I then put Kiro CLI behind the same interface using Agent Client Protocol (ACP). Watch the full video on YouTube . Prerequisites You need: Node.js 22 or later. AI SDK 7 requires Node.js 22 and uses ECMAScript modules (ESM). npm 11 or another package manager that works with Nuxt 4. AWS credentials available through the standard provider chain. Access to an Amazon Bedrock model in your AWS Region. The AWS CLI if you want to list the inference profiles available to your account. An authenticated Kiro CLI installation for the optional ACP section. Step 1: Create the Nuxt app Create the project and install the versions used in the recorded demo: npx nuxi@latest init nuxt-agent-approval cd nuxt-agent-approval npm install \ nuxt@4.5.2 \ vue@3.5.41 \ ai@7.0.66 \ @ai-sdk/vue@4.0.66 \ @ai-sdk/amazon-bedrock@5.0.57 \ @aws-sdk/credential-providers@3.1111.0 \ @nuxt/ui@4.10.0 \ zod@4.4.3 npm install -D @iconify-json/lucide@1.2.123 Register Nuxt UI and expose the Amazon Bedrock settings through server-side runtime config: // nuxt.config.ts export default defineNuxtConfig ({ modules : [ ' @nuxt/ui ' ], css : [ ' ~/assets/css/main.css ' ], runtimeConfig : { awsRegion : process . env . AWS_REGION ?? ' us-west-2 ' , bedrockModelId : process . env . NUXT_BEDROCK_MODEL_ID } }) Add the two Nuxt UI imports: /* app/assets/css/main.css */ @import "tailwindcss" ; @import "@nuxt/ui" ; You can c

At what point did you start to think you were an engineer? An engineer. What a lofty,...