标签：#web

Every developer I know has the same reflex now. Hit an unfamiliar concept, paste it into ChatGPT, read the explanation, move on. I did this for months. It felt efficient. Then I noticed a pattern: I was reading a lot of clear explanations and retaining almost none of them. I could follow along perfectly in the moment and then draw a blank a week later when I actually needed the knowledge. The problem was not ChatGPT. The problem was using a general-purpose conversational tool for a job it was never designed to do. Here is what I switched to, and why it works better. The three failure modes of using a chatbot to learn Passive consumption feels like learning. Reading a good explanation triggers the feeling of understanding without the work that creates actual memory. You nod along, it makes sense, and nothing sticks. This is the biggest trap. There is no retrieval practice. The research on this is well established: you remember things by pulling them out of memory, not by putting them in repeatedly. A chatbot will explain the same concept ten different ways, but it will never make you answer a question you cannot immediately answer. That struggle is the mechanism. Confident hallucination is dangerous when you are the beginner. If you already know a topic, you can spot when an AI is subtly wrong. If you are learning it for the first time, you cannot, and you may internalize something incorrect with full confidence. For technical material, this is a real cost. What actually works better Tools that quiz you. Anything built around retrieval practice and spaced repetition beats passive reading by a wide margin. If a tool generates questions from your material and makes you answer them over spaced intervals, it is working with how memory actually forms rather than against it. Tools that read YOUR source material. This one is huge for technical learning. Instead of asking a model to answer from its general training data (which may be outdated or wrong for your specific libra

Jake Lazaroff discussed the AT Protocol as a framework for distributed applications beyond social networking. He emphasised a local-first architecture where users maintain data in PDSs while leveraging shared infrastructure for synchronisation and updates. The presentation included experiments showcasing collaborative tools and highlighted the benefits of reduced reliance on app-specific backends. By Olimpiu Pop

Try the demo: K-Saju Crew For fun only. K-Saju is an entertainment project. The K-Pop roles below are a playful interpretation of saju-inspired signals, not personality assessment or advice. A two-person compatibility page can stay stateless with almost no effort. Put both birth dates in a URL, render the result on the server, and the link is the record. No account, no database, no cleanup job. That was already a product rule in K-Saju. We do not retain personal inputs. A result is reproducible from its GET parameters. Then we built /crew : “What if your friend group debuted as a K-Pop group?” A creator makes a link, sends it to a group chat, and each friend enters their own birth date. At three to seven members, the app assigns distinct positions, shows pairwise chemistry, and creates a shareable poster. The fun part is the casting. The engineering problem is that the social flow needs a temporary shared state. A link cannot accumulate submissions by itself. This post is about the decisions behind that feature: where we allowed state, how we made the result durable without retaining a lobby forever, and how we kept the casting explainable instead of treating it as a black-box score. The conflict: a self-service group flow needs somewhere to collect data There were two clean but incomplete options. The first was to keep everything stateless. The creator would enter all members' dates at once, then receive a result URL. It matched our existing architecture, but it defeated the point of sharing a link. The person who starts the group often does not know everyone else's date, and asking them to collect it in a chat creates friction before the feature has started. The second was a conventional persistent group object. It would make joining easy, but it would turn a deliberately stateless service into one that keeps user-provided dates indefinitely unless we built retention and deletion policies around it. We chose a hybrid instead: The lobby is temporary state. It store

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

Hello Dev Community! 👋 It is officially Day 136 of my software engineering marathon! Today, I engineered the absolute heart of my MERN Stack capstone application, Sprintix : The complete Product Collection Grid & Faceted Filter Sidebar View ( /collection ) ! ⚛️🛍️🗂️ To prepare the application for seamless full-stack state management integration later, I built this layout using dynamic state arrays and object schemas. This ensures that switching from demo arrays to live API streams will happen effortlessly. 🛠️ Deconstructing the Day 136 Catalog Architecture As displayed across my browser rendering workspace in "Screenshot (311).jpg" and "Screenshot (312).jpg" , phase one of the product engine splits into structural layout segments: 1. Faceted Category Filter Sidebar Organized dedicated verification check-boxes mapping out specific consumer collections: Categories: Segmented target groups (Men, Women, Kids). Type Filters: Segmented style formats (Top Wear, Bottom Wear, Winter Wear). Styled within minimal box borders to give users an uncluttered desktop searching experience. 2. Header Control Grid & Sort Registries Installed a top-level workspace header showing "All Collection" alongside an interactive drop-down management node ( Sort by: relevant / low-to-high / high-to-low ). Ready to hold local state flags that rearrange the data arrays instantly before looping. 3. Deep Route Parameter Mapping Preparation Look at the hover elements in "Screenshot (311).jpg" ! Every single rendering card passes localized hex-token structures mapping toward dynamic pathways like: text /product/:id (e.g., /product/6a436b5c921b7aa010d29318)

Hey DEV community! 👋 Like a lot of you, I had a mental list of "quick tool" bookmarks scattered everywhere — a word counter here, a slug generator there, a Lorem Ipsum generator somewhere else. I got tired of it, so I built Yanapex: a single site with free, no-signup tools for text, images, and everyday dev tasks. A few things I focused on: Everything runs client-side. No text or files get uploaded to a server, so it's safe to paste sensitive drafts or code. No accounts, no paywalls. Open a tool and use it immediately. Fast and lightweight, built for quick one-off tasks instead of full blown apps. One of the first tools is a Word Counter ( https://yanapex.com/en/tools/text-tools/word-counter/ ) with real-time word/character/sentence counts and reading time estimates. There are 26 tools so far across text, image, and developer utilities. Would love feedback from this community: what's a small tool you constantly have to search for online that you wish just existed in one place?

Hello Dev Community! 👋 It is officially Day 134 of my software engineering marathon! Today, I successfully extended the layout grids of my MERN Stack capstone e-commerce application, Sprintix , by implementing fully responsive feature banners, newsletter hooks, and a clean global footer! ⚛️🛡️📬 A premium storefront relies heavily on trust anchors and consistent site-wide navigational structures. Today's focus was ensuring these terminal layers look flawless across all viewport breaking thresholds. 🛠️ Deconstructing the Day 134 Interface Terminal As captured in my local hosting environments within "Screenshot (301).jpg" and "Screenshot (302).jpg" , the system layout introduces high-fidelity structural blocks: 1. Trust Policy Infrastructure Positioned a 3-column micro-service layer layout framing crucial customer success policies (Easy Exchange, 7 Days Return, 24/7 Support). Balanced standard tracking font sizes and vector alignments to maintain optimal layout readability. 2. Immersive Newsletter Conversion Segment Engineered an engaging email onboarding banner using rich layered visual configurations. Integrated a responsive inline input element paired with an absolute action button to ensure the container shifts scales perfectly when transitioning down to mobile form factors. 3. Consolidated Multi-Grid Footer System Look at "Screenshot (302).jpg" ! Structured a highly scalable flex-wrapping matrix containing: Brand Identity Columns hosting contextual descriptive descriptions. Navigational Routing Indexes pointing clearly to operational views (Home, About Us, Privacy Policy). Direct Touchpoints aggregating structural contact details. Finished off the grid matrix with a clean full-width divider row holding structural copyright information. 💡 The Technical Win: Designing for Fluid Responsiveness First When building high-traffic online stores, mobile responsiveness isn't a secondary polish step—it has to be native. Writing components with flexible flexbox wrapping, relat

I recently found an old project I built with a friend around 2017–2018: a perk calculator for the game Firefall. The application allowed players to browse perks by category, drag them into a build, track the available perk points and automatically filter incompatible options based on the selected class. Looking at the code today, there are many things I would structure differently. The JavaScript could be better organised, responsibilities could be clearer, and the overall architecture would benefit from more modern practices. Still, I decided to preserve it as it is. Older projects are useful reminders that progress is not only visible in the technologies we use, but also in how we model problems, organise code and make technical decisions. It is not a showcase of how I would build the same application today. It is a snapshot of how I approached a real problem at that point in my career. Repository: https://github.com/lksvn/firefall-perk-calculator

A hands-on comparison where I tested BrowserAct and Agent Browser using the SannySoft browser...

This is a submission for Weekend Challenge: Passion Edition . During the World Cup , millions of people can watch the same match. But every stadium tries to say something different before kickoff. Sometimes it is belief. Sometimes defiance. Sometimes memory. Sometimes unity. I follow football closely, and some of the moments I remember most are not goals. They are the few seconds before kickoff when the camera pulls wide and an entire stand reveals one message at once. That was the idea behind Tifo Forge . It is an interactive experience that turns a team, a supporter emotion, and a symbol into an animated stadium tifo. Not another match tracker. Not another football chatbot. Tifo Forge turns supporter emotion into a stadium moment. What I Built Tifo Forge asks the user to make three choices: A national team A supporter emotion A visual symbol The emotions are simple on purpose: Believe Defy Unite Remember The symbols include ideas such as lightning, a phoenix, wings, a heart, and dawn. Once those choices are made, Gemini creates a structured design plan. The browser then turns that plan into an animated stadium display. I deliberately avoided uploads, accounts, and long setup screens. I wanted someone to open the page and reach the reveal in under a minute. Three choices are enough to raise the stand. The final result can be replayed, reset, or saved as an SVG poster. Demo Try Tifo Forge: https://tifo-forge.vercel.app/ I kept thinking about those few seconds before kickoff when everyone in the stadium knows something is about to happen, but nobody has seen the full picture yet. That became the interaction: Choose the team ↓ Choose the feeling ↓ Choose the symbol ↓ Raise the tifo When the user clicks Raise the Tifo , the stadium darkens. Rows of cards flip into place. The pattern spreads across the curved stand. The central symbol appears, and the chant locks into position. The user is not asking for a random poster. They are deciding what the stand believes, how it

Last month, an AI coding agent handed me a beautiful fix. Five lines. Elegant. It reused an existing helper, matched the codebase style, compiled on the first try. Exactly the kind of diff we've all learned to praise since "make the agent write less code" became the standard advice. It was also completely untested, and it sat on a password-recovery path. That diff taught me something I now consider the central problem of AI-assisted coding in 2026: we've spent a year teaching agents to write less code, and almost no time teaching them to prove the code they kept actually holds. The two failure modes Every AI coding agent fails in one of two directions. Failure mode #1: the over-build. You ask for a date comparison; you get a new dependency, a ValidationService class, and a config layer. This one is well known — it's why minimal-code prompts and skills became popular, and they genuinely work on it. Failure mode #2: the confidently small diff. Minimal, clean, written after reading half the flow, verified never — dropped onto a path that handles money, auth, or user data. It compiles. It demos. It detonates in week three. Here's the uncomfortable part: fixing #1 aggressively makes #2 more likely. When the objective function is "shortest diff," the first things to quietly disappear are edge-case handling, failure-path tests, and the guard clause that looked optional. The diff gets smaller. The blast radius doesn't. A five-line change to a payment path is more dangerous than a four-hundred-line internal script that runs once. Code size is not risk. Blast radius is risk. Yet almost every skill and prompt in this category optimizes for size alone. What a guard does differently This is why I built Guardsman 💂 — an open-source skill that behaves less like a minimalist and more like the royal guard in front of the palace: nothing passes the post unchallenged, and the level of challenge depends on what's behind the gate. Three duties, on every task: 1. Read the standing orders

Interactive Rive mascots can react, think, talk, and connect to real AI, SaaS, web, and mobile products. Your SaaS Mascot Should Do More Than Just Sit There 👀 A lot of products have mascots. They look great on landing pages. Maybe they wave. Maybe they blink. Maybe there is a small looping animation. And that's it. But I think a product mascot can do much more. What if your mascot actually knew what was happening inside your product? That's the idea I've been exploring with Mascot Engine . I don't just want to animate characters. I want to build interactive mascot systems that connect to real products . From a mascot animation to a product system Imagine you're building an AI app. A user opens the app. The mascot is idle . The user sends a message. The mascot starts thinking . The AI begins responding. The mascot switches to talking . The task completes. The mascot celebrates . Something goes wrong? The mascot reacts to the error . The flow could look like this: User Action ↓ Product State ↓ Runtime Input ↓ Rive State Machine ↓ Mascot Reaction This isn't a video. It isn't a GIF. It isn't a pre-rendered animation playing randomly. The product controls the mascot at runtime. That's where things become interesting. A mascot can understand product states Well... not literally understand them 😄 The application still owns the logic. But we can expose a small runtime contract from the Rive file. For example: emotion = 2 isTalking = true lookX = 40 lookY = -10 celebrate = trigger error = false The developer controls these values from the application. The Rive State Machine handles the character behavior. The application controls what happened . The mascot system controls how the character reacts . I really like this separation. Why I use Rive for interactive mascots Traditional animation tools are great for videos and motion design. But product animation has different requirements. The character needs to react to application events. The animation may need runtime values. De

Here is a design decision we made early, wrote into the architecture as an invariant, and have refused to revisit since: our agent accepts no commands. Not "we don't currently use that feature" — the hub has no way to tell an installed agent to do anything at all. No remote execution, no self-update, no "collect this for us right now". It sends data outward, and that is the entire surface. This is not a limitation we are working around. It is the product. And it costs us features that customers ask for, which is exactly why it is worth explaining. The uncomfortable arithmetic of remote control Any tool that can update a plugin across fifty client sites is, by construction, a tool that can execute code on fifty client sites. Any dashboard that can restart a service on your server holds, somewhere, a credential that lets it in. This is not a flaw in those products — it is what they are for. You cannot automate a repair without the power to perform it. But that power has an owner, and the owner has a login, and the login has a support team, and somewhere in that chain there is a version of the software with a bug in it. When the tool is compromised, the blast radius is not the tool. It is every machine the tool could reach. The industry has already run this experiment at scale. In July 2021, attackers exploited a vulnerability in a widely used remote monitoring and management platform. They did not break into a single company — they broke into the thing that had access to the companies. Roughly sixty managed service providers were hit, and through them, an estimated 800 to 1,500 downstream businesses were encrypted in a single weekend, with a $70 million ransom demand attached. Read that shape again, because it is the whole argument: the victims did nothing wrong. They had bought a well-known product from a serious vendor and installed it exactly as instructed. Their compromise arrived through the door they had deliberately, sensibly, contractually left open — the one

Concept design for a building is slow and expensive. A homeowner planning an extension, or a contractor trying to win a job, is stuck between two bad options: pay a drafter $500–2,000 for a concept package, or fight SketchUp's learning curve for a week. Meanwhile the actual idea — "a 4-bed duplex with a garage and a palm out front" — fits in one sentence. So I built Forge3D Spaces : you type that sentence, and a few seconds later you're walking through a furnished 3D house in your browser — with measured floor plans, DXF for AutoCAD, and a cost estimate that come out of the same model. No install. Here's how it works under the hood. The pipeline: sentence → structured plan → building The naive approach — "ask an LLM to emit a 3D scene" — falls apart fast. Models are bad at spatial consistency; walls don't meet, rooms overlap, doors float. So the LLM never touches geometry directly. It emits a structured program , and a deterministic solver turns that into a watertight building. The prompt becomes a spec. A strict JSON-schema call (OpenRouter, json_schema response format with every field required) turns "4-bed duplex with a garage" into a room program: room types, target areas, adjacencies, storeys. A slicing-tree solver lays it out. This is the old floorplanning trick from chip design — recursively split a rectangle with horizontal/vertical cuts until every room has its area. A squarify pass keeps rooms from collapsing into corridors. The output is exact rectangles with real dimensions, guaranteed non-overlapping and gap-free. Walls, openings, roof, furniture get generated from the solved plan. Every door and window is placed by rule, not by vibes. Because the plan is a real data structure, the 2D floor plan, the 3D model, the elevations, and the bill of quantities are all views of the same thing . Drag a wall and they all move together. Nothing drifts out of sync, because there's nothing to sync — it's one model. The rendering: WebGPU, and the fallback you actually

Most WooCommerce product pages still show the same thing stores have shown for 20 years: a handful of flat photos. I spent the last few months building Noorifa, a plugin that replaces that with an interactive Three.js viewer — customers rotate the model, zoom in, and switch colors/materials on specific meshes in real time, synced to the store's actual WooCommerce variations. The 3D rendering part was the easy 20%. The other 80% was a series of small, specific problems that don't show up in a Three.js tutorial. Here are four of them. 1. A directional light rig can't light a face it can't see Early on, customers rotating a table model would find the underside of the tabletop rendering near-black — no matter how far I pushed the light intensity. The rig at the time was a single key light plus a hemisphere ambient: scene . add ( new THREE . HemisphereLight ( 0xffffff , 0x444444 , 1.2 ) ); const keyLight = new THREE . DirectionalLight ( 0xffffff , 1.2 ); keyLight . position . set ( 3 , 5 , 4 ); scene . add ( keyLight ); The bug was geometric, not a brightness problem: keyLight sits above the model, so its light direction only reaches surfaces whose normal faces back toward it. A downward-facing surface — the underside of an overhanging tabletop — can't receive any direct contribution from a light positioned above it, at any intensity. Cranking the brightness slider was scaling a number that was multiplying against zero. The fix was closer to actual three-point studio lighting: key, fill, and rim from above for shape and separation, plus a dedicated light from below, and a brighter hemisphere ground color to approximate bounced light: scene.add( new THREE.HemisphereLight( 0xffffff, 0x888888, 1.1 * brightness ) ); const keyLight = new THREE.DirectionalLight( 0xffffff, 1.1 * brightness ); keyLight.position.set( 3, 5, 4 ); const fillLight = new THREE.DirectionalLight( 0xffffff, 0.5 * brightness ); fillLight.position.set( -4, 2, 3 ); const rimLight = new THREE.DirectionalLigh

No hacking — a passive scan only looks at what your browser already downloads when it opens a page. Here's what I found: 6 of 15 load their Supabase database directly client-side. The public API key sits in the page source. That's fine if Row-Level Security is configured right — but it's one wrong setting away from "anyone can read the whole table." 14 of 15 ship no Content-Security-Policy — a simple, high-value hardening against script injection, almost always missing. Is this theoretical? No. Two apps I audited with the owner's permission: A social app: the profiles table — user names, cities, and a password hash — readable by a logged-out stranger. Closed in an afternoon. A paid learning app: 155 paid study sheets and 4,872 answers were readable by anyone, with no account and no subscription — its entire paid catalogue, a single API call away. The paywall lived only in the front-end; the database served everything to everyone. Loading Supabase in the browser isn't the mistake. Not enforcing access in the database (RLS) is. And the tools you build with won't tell you — they'll happily ship it. If you built something on Lovable / Bolt / Replit with real users (or paying ones), it's worth 60 seconds to check what a stranger can already see. I made a free tool that runs the surface check (passive, no signup): sealdy.dev Happy to answer questions on how RLS leaks happen and how to lock them down.

The Developer's Guide to Picking the Right Coding LLM at Scale Six months ago, I was staring at our monthly AI bill — $14,000 and climbing fast. We were using the "premium" model for everything, including trivial code completions. That night, I built a small internal benchmark to figure out which models actually earn their cost. What I learned reshaped how we think about AI tooling, vendor lock-in, and what "production-ready" really means. Here's the raw truth from my testing rig, what we shipped, and how we cut costs by 70% without touching output quality. Why I Stopped Trusting Default Recommendations Every vendor says their model is the best. Every benchmark site ranks things differently. Most "best of" lists are either sponsored or built on vibes. I needed numbers that matched my actual workflow: generating Python services, debugging JavaScript race conditions, implementing TypeScript algorithms, and reviewing Go for security. So I took ten models, threw identical prompts at them, and scored them myself. No vendor PR. No cherry-picked examples. Just the same five tasks, run the same way, scored on the same rubric. Here are the ten models I tested, with their output pricing per million tokens — because at scale, that's the metric that decides whether your AI strategy is viable or a margin killer. Model Provider Output $/M DeepSeek V4 Flash DeepSeek $0.25 DeepSeek Coder DeepSeek $0.25 Qwen3-Coder-30B Qwen $0.35 DeepSeek V4 Pro DeepSeek $0.78 DeepSeek-R1 DeepSeek $2.50 Kimi K2.5 Moonshot $3.00 GLM-5 Zhipu $1.92 Qwen3-32B Qwen $0.28 Hunyuan-Turbo Tencent $0.57 Ga-Standard GA Routing $0.20 Before you ask: yes, I tested against the originals. I also tested against Global API's unified routing layer, which lets you hit any of these through one endpoint. More on that later — it became the architectural decision that actually saved us. My Benchmark Methodology (No Marketing Fluff) I built five tasks that mirror what my engineers actually do every week. Not synthetic acad

I wanted to build something different from the usual fan project. Instead of recreating gameplay, I asked a different question: How well do players actually remember the worlds of Super Mario Odyssey? The result is OdysseyGuessr, a browser game inspired by GeoGuessr. Players receive a screenshot from one of the game's Kingdoms and must place a marker on the correct location. Every meter counts. The project includes: Browser-based gameplay Single-player with customizable rounds Real-time multiplayer with a 5,000 HP battle system Community-submitted locations Admin moderation tools One of the biggest challenges wasn't the gameplay—it was collecting interesting locations that were difficult but still fair. Watching players confidently choose the wrong cliff or rooftop has been surprisingly entertaining. If you're interested in browser games or Nintendo fan projects, I'd love to hear your feedback. Play here: https://odyssey-guessr.lovable.app OdysseyGuessr is an unofficial fan project and is not affiliated with Nintendo.

What’s up everyone! Back again for my daily drop. We talk a lot about deployment frequency and lead time for changes, but if you're a solo dev or part of a small team building something like LaunchAlly , there’s one metric that rules them all: Time to Recovery (TTR) from a bad push. When you're marketing, coding, and handling support all at once, a broken main branch is a massive bottleneck. Here is my quick tip for today: Invest 20 minutes into setting up strict automated rollbacks . If a deployment fails health checks, let the system revert it instantly without your intervention. Spend lots of hours working today...happy to go to bed now:) What’s your go-to strategy for handling failed deployments on the fly?

Submission: Edu-Insight Assistant What I build I built the Edu-Insight Assistant, a tool designed for educators to bridge the gap between complex school management data and actionable insights. It allows teachers to query students performance data using natural language, turning educational evaluation into a conversation rather than a manual data-processing task. Demo 🔗 Link: Passion-challenge How I Built It I utilized Next.js for a responsive, performant frontend and hooked it up to Google Gemini 3.5 API. The core logic involves a server-side API route that takes a teacher's natural language questions, prompt Gemini to generate the necessary SQL, and execute that query against a database. This architecture makes data exploration accessible to non-technical educators. Prize Categories: - Best Use of Google AI : Leveraged Gemini 3.5 Flash for natural language-to-SQL translation and result interpretation. - Best Use of Snowflake: Designed with an extensible data layer ready for production-scale analytical workloads in Snowflake.