AI 资讯
The Security Bug Every Node.js Developer Ships to Production
Last year I was doing a code review for a startup. Everything looked fine on the surface, clean code, good structure, tests passing. Then I noticed this: const query = `SELECT * FROM users WHERE email = ' ${ req . body . email } '` That's it. That's the bug. SQL injection, sitting right there in a startup that had been in production for 8 months. Nobody caught it. Not the developer, not the reviewer, not the CTO. Here's the thing, it's not that developers are careless. It's that this kind of bug is invisible until it isn't. The code works perfectly. Tests pass. Users are happy. Until someone types ' OR '1'='1 in the email field and walks straight into your database. The bugs I see most often 1. Raw SQL with user input // 🚨 This is everywhere const query = `SELECT * FROM users WHERE email = ' ${ email } '` // ✅ Use parameterized queries const query = ' SELECT * FROM users WHERE email = $1 ' db . query ( query , [ email ]) 2. Secrets in environment variables... committed to git # .env DATABASE_URL = postgres://user:actualpassword@prod-db.company.com/mydb STRIPE_SECRET = sk_live_... Then .env ends up in the repo because someone forgot to add it to .gitignore . I've seen this more times than I want to admit. GitHub's secret scanning catches some of these, but not always before someone has already cloned the repo. 3. JWT tokens that are never actually verified // 🚨 Decoding is not the same as verifying const user = jwt . decode ( token ) // ✅ Always verify const user = jwt . verify ( token , process . env . JWT_SECRET ) jwt.decode just reads the token. Anyone can forge it. jwt.verify actually checks the signature. The names are confusingly similar and the wrong one silently works in development. 4. No rate limiting on auth endpoints // 🚨 Anyone can try a million passwords app . post ( ' /login ' , async ( req , res ) => { const user = await db . findUser ( req . body . email ) // ... }) // ✅ Add rate limiting const authLimiter = rateLimit ({ windowMs : 15 * 60 * 1000 , m
AI 资讯
One Agent or Many? Orchestrating AI Agents Without the Mess
Hello, I'm Maneshwar. I'm building git-lrc, a Micro AI code reviewer that runs on every commit. It is...
AI 资讯
I built a 50+ feature wellness app in a single HTML file as a student — here's why
Most people lose hours pretending to work or study. I was one of them. I kept setting Pomodoro timers and ending up scrolling Twitter during breaks. That's not rest. That's just a different kind of distraction. So I built Mognota — a free wellness companion for screen workers. The Problem You don't have a discipline problem. You have a system problem. Your brain has a hard biological limit. Sustained attention peaks at 20-45 minutes before quality drops sharply. Long unfocused hours are not work — they are the feeling of work. The solution isn't more willpower. It's intentional recovery. What I Built Mognota pairs a Pomodoro timer with 50+ guided wellness activities: 👁️ 20-20-20 eye break reminders 🫁 Guided breathing & 7 pranayama techniques 🧘 Desk yoga, HIIT, Tai Chi, stretches 🎵 Binaural beats & ambient soundscapes 🧠 Meditation & NSDR protocols 📓 Gratitude journal, mood tracker, brain dump 🎮 Sudoku, sliding puzzle, fractal explorer The Technical Part This is what dev.to might find interesting: Pure HTML, CSS, vanilla JS — zero frameworks Everything in a single HTML file All 8 notification sounds synthesized with Web Audio API localStorage only — nothing leaves your device Works offline once loaded 109+ languages supported No npm. No build step. No dependencies. Just open and use. Try It 👉 https://mognota.com/ Completely free. No account. No ads. Forever. Would love brutal honest feedback from this community.
AI 资讯
How to Put an LLM in Your Product Without Wrecking Your Costs or Your Latency
Adding an AI feature looks deceptively easy. You sign up for an API key, paste in a prompt, and within an hour you've got a working demo that makes the whole team lean over your shoulder. Then you ship it, traffic arrives, and two things happen at once: your latency graph develops a long, ugly tail, and your monthly bill arrives with a number that makes finance schedule a meeting. The gap between "impressive demo" and "production feature" is almost entirely about cost and latency engineering. The model is the easy part. Here's how to cross that gap. First, understand what you're actually paying for Most LLM APIs bill by tokens — roughly ¾ of a word each — and they bill both directions: the tokens you send (input) and the tokens the model generates (output). Output tokens are usually several times more expensive than input tokens, which has a non-obvious consequence: a verbose prompt is cheaper than a verbose answer. This reframes optimization. People obsess over trimming their prompts while letting the model ramble for 800 tokens when 80 would do. If you want to cut cost, the highest-leverage move is almost always constraining the output : ask for JSON, ask for a single sentence, set a max_tokens ceiling, and tell the model explicitly to be terse. Latency follows the same logic. Generation is sequential — the model produces one token at a time — so output length is the single biggest driver of how long a request takes. A 50-token answer is fast almost regardless of model. A 2,000-token answer is slow even on the fastest infrastructure. Lever 1: Don't call the model when you don't have to The cheapest, fastest LLM call is the one you never make. Two techniques eliminate a startling share of traffic. Caching identical and near-identical requests. Many real-world prompts repeat — the same FAQ-style question, the same document summarized twice, the same classification of similar inputs. A cache keyed on the normalized prompt turns a repeat request into a sub-millisecond
产品设计
Amazon Zoox's latest robotaxi looks (marginally) less like a toy car
Amazon-owned Zoox has introduced its new autonomous vehicle meant for for large-scale production.
AI 资讯
Monorepo Dependency Security — Vulnerability Scanning Across Packages
A monorepo can look like one repository, but security teams should treat it as many applications living under one roof. One repo may contain 10 frontend packages, 5 backend services, 3 shared utility libraries, 2 mobile apps, and one root lockfile that does not tell the full story by itself. Monorepo dependency security means scanning the root dependency graph, every workspace package, shared libraries, lockfiles, and generated SBOMs. If you scan only one file, you may miss the vulnerable package that ships in production. Why Monorepos Create Unique Vulnerability Challenges Monorepos centralize multiple packages, apps, services, and libraries inside one repository. This improves code sharing, dependency alignment, refactoring, CI caching, and cross-team collaboration. It also creates a security problem: one repository can contain many different dependency trees, owners, deployment targets, and risk profiles. A typical JavaScript or TypeScript monorepo may include apps/web , apps/admin , apps/api , packages/ui , packages/auth , packages/logger , and packages/config . Each package may have its own package.json . Some packages are deployed to production. Some are internal libraries. Some are build-only tools. Some are used by every app. A vulnerability in one package can affect one app, many apps, or the whole repo depending on how dependency relationships are structured. The biggest issue is shared code. If packages/auth depends on a vulnerable version of jsonwebtoken , every application that imports packages/auth may be affected. If packages/ui uses a vulnerable utility such as lodash , every frontend app that consumes that UI package may inherit the same risk. If a build tool dependency is compromised, the risk may appear during CI/CD rather than runtime. Real CVEs show why this matters. CVE-2021-23337 affected lodash through command injection in template handling. CVE-2022-31129 affected moment through inefficient parsing that could cause denial of service. CVE-202
AI 资讯
Compute astrology charts in the browser: no node-gyp, no .se1 files, no AGPL
If you've wired Swiss Ephemeris into a Node astrology app, you know the ritual. You npm install sweph , and now every machine needs Python plus a C/C++ toolchain, because the package compiles Swiss's C code via node-gyp at install time (make/gcc on Linux, Xcode on macOS, Visual C++ Build Tools on Windows). It works on your laptop. Then it explodes: Apple Silicon: node-gyp can't find full Xcode behind Command Line Tools. Slim Docker / CI images: no Python, no build-essential , so the install dies. Serverless: the .node binary you built locally won't load on Amazon Linux (wrong arch or glibc). Then there's the data. Neither sweph nor swisseph bundles the .se1 ephemeris files; you download them yourself and point the library at a path. The modern set is 2 MB, the full GitHub set is 100 MB. And since 2.10.1 , sweph is AGPL-3.0 (LGPL only under a professional license), a real obligation to weigh for a closed-source SaaS backend. The pure-Rust alternative XALEN Ephemeris is an analytical engine written entirely in Rust and licensed Apache-2.0. Three things make it interesting for JS/TS devs: No node-gyp. The Node addon is napi-rs, which ships prebuilt per-platform binaries via npm. No Python, no C compiler, no compile step. A real WASM build via wasm-bindgen, so you compute charts client-side in the browser: no server round-trip, no backend copyleft. Zero data files. The core math (VSOP87A, ELP2000-82, IAU precession/nutation, an 8,870-star catalog) is analytical and compiled into the binary. No .se1 to host. import init , * as xalen from " xalen-ephemeris " ; // WASM build, runs in the browser await init (); // load the .wasm module const chart = xalen . computeChart ({ datetime : " 1990-04-12T08:30:00Z " , lat : 28.6 , lon : 77.2 }); console . log ( chart ); // planet longitudes, house cusps, etc. Swiss via Node XALEN (pure Rust) Build deps node-gyp + Python + C compiler none: prebuilt binary / .wasm Runtime data .se1 files (2 to 100 MB) none, compiled in Browser / WASM
AI 资讯
A Practical Guide to Decomposing Legacy Java Monoliths
How to Decompose a Legacy Java Monolith Without Disrupting Business Operations The Java monolithic applications have been supporting businesses for years. In these applications, the entire business logic, presentation layer, and data access layer are bundled into a single unit. These architectures are functional but hard to scale, maintain, and improve due to changing business needs. An expert Java app development company helps growing organizations in addressing this issue through Java modernization services. Instead of developing a whole software application from scratch, firms can transform their software in stages with the right boundaries. The biggest challenge here is to determine where to make those cuts in a bundle. Poorly chosen service boundaries create operational complexity issues and long-term maintenance problems. Understanding how to identify seams in the monolith application helps in achieving modernization successfully. Let's take a look at what contributes to the success of monolith decomposing and how organizations can approach it wisely. Why Organizations Are Modernizing Legacy Java Monoliths The legacy Java monolith applications were built during a time when monolithic architecture was common. They were optimized for easy deployment and centralized management. But today, businesses require flexibility. This is due to challenges such as Slow release cycles Increasing maintenance costs Limited scalability Complex dependency management Difficult onboarding new developers Growing technical debt These issues have increased the demand for software architecture modernization in business sectors. Modern architecture gives the following advantages to the teams: Deploy features independently Scale services individually Improve system resilience Accelerate development cycles Support cloud-native environments The objective of architecture modernization is to create a technical foundation that supports future business growth. Understanding business goals of
AI 资讯
Stop Building Boring Interfaces for Cool Systems
Why developer tools deserve a design language of their own - and how I built one for my own corner of the web Somewhere along the line, we collectively agreed that "functional" had to mean "boring." Open almost any developer tool, internal dashboard, or technical log and you'll find the same thing: a sterile corporate wiki. Grey on white. The same SaaS design system everyone copied from the same three component libraries. Rounded cards, a sans-serif font, a faint drop shadow. It works. It's also completely forgettable. But here's the thing nobody says out loud: when you're building for engineers - or building your own space on the web - you are under no obligation to follow the standard playbook. The intersection of system design and visual identity is one of the most under-explored areas in frontend architecture. We obsess over latency, bundle size, and runtime dependencies, then slap a default theme on top and call it done. The backend gets all the craft. The interface gets a template. I wanted to do the opposite. Building VOID_PROTOCOL When I put together my own developer log - https://blog.naveenr.in - I deliberately stepped away from the standard minimalist tech blog. Instead, I built out a full design system I call the VOID_PROTOCOL × Manga Editorial Design System: dark-only, type-driven, built on Astro 6, Tailwind 4 (CSS-first @theme tokens), and React 19 islands. The name isn't decoration. VOID_PROTOCOL started on my https://naveenr.in portfolio, which runs in two modes. There's a minimal version, and there's an immersive one - and in immersive mode the background is a real-time 3D simulation of a sentinel entity. It's not a looping video; it actually responds to your movement, clicks, and scroll. When you leave it alone long enough, it sleeps. And when it sleeps, it dreams - it dreams my initials. (Yes, really. It started as a joke and I kept it.) That entity is the soul of the whole identity: black, empty, void-like space and a cool blue palette, a deep-sp
AI 资讯
How to Build a Crypto Trading Bot in Python — Step-by-Step Guide with Source Code
Building a real-time crypto trading bot sounds like a weekend project — until exchange APIs return cryptic errors, WebSocket connections drop mid-trade, and rate limits turn your strategy into a debugging nightmare. After building my own bot from scratch, I learned that reliability is what separates a hobby script from a system that actually survives in production. This guide walks through the entire process: modular bot architecture, a real-time trading loop, plug-in strategies, backtesting, paper trading, and deployment to a $5 VPS — with production reliability patterns baked in from day one. Full source code included — the free AlgoTrak Backtest Lab on GitHub has 5 classic strategies, a complete backtesting engine, and Jupyter notebooks to get started immediately. Architecture Overview Before writing code, here's the modular structure we'll build: crypto_bot/ ├── strategies/ │ ├── rsi_strategy.py │ ├── macd_strategy.py │ └── ... # Plug in your own ├── core/ │ ├── trader.py # Data fetching + order execution │ └── logger.py # File + DB logging ├── config/ │ └── settings.json ├── cli.py # Entry point ├── bot.py # Main loop └── logs/ Each strategy is a standalone Python class. The trader handles exchange communication. The CLI lets you switch between strategies, symbols, and modes (paper vs live) without touching code. Real-Time Trading Loop Here's the core loop that runs every candle interval: while True : df = fetch_ohlcv ( symbol , interval ) signal = strategy . evaluate ( df ) if signal == " BUY " : trader . buy ( symbol , quantity ) elif signal == " SELL " : trader . sell ( symbol , quantity ) sleep ( next_candle_time ()) Three key points: fetch_ohlcv() pulls the latest OHLCV candle data from the exchange Your strategy evaluates the last N candles and returns a signal Orders execute only on valid signals — no guesswork Modular Strategy Example (RSI) Strategies follow a simple class interface. Here's a complete RSI strategy: import pandas as pd import pandas_ta a
AI 资讯
Optimizing Geofence Transitions: Battery Efficient Background Logic in Android
We have all been there: a meeting starts, and suddenly your phone rings. I built Muffle to automate silent profiles, but the biggest hurdle wasn't the UI—it was making sure the app didn't destroy the user's battery while monitoring GPS coordinates. The Trap of Continuous Location Updates Early prototypes used LocationManager with frequent updates. This is the fastest way to get your app uninstalled. Keeping the GPS radio active in the background forces the device to wake the CPU constantly, leading to significant battery drain. To solve this, I moved away from active polling and shifted to the GeofencingClient API. Leveraging GeofencingClient for Passive Monitoring Instead of calculating distance from a point every few seconds, I transitioned to system-level geofencing. By defining circular regions around locations like the office or a mosque, the OS handles the monitoring at the hardware abstraction layer. kotlin val geofencingRequest = GeofencingRequest.Builder() .setInitialTrigger(GeofencingRequest.INITIAL_TRIGGER_ENTER) .addGeofences(geofenceList) .build() This approach allows the OS to do the heavy lifting. The app stays in a dormant state until the location provider signals a transition. The kernel only wakes the app when the device enters or exits the radius. The Trade-off: Precision vs. Power Using GeofencingClient means accepting a slightly slower trigger time compared to raw GPS polling. Sometimes, there is a delay of a few seconds as the device wakes from a deep sleep state. For a utility like Muffle, this is a fair trade-off. Users prefer their phone to silence five seconds after entering a building rather than finding their battery dead by noon. To mitigate the delay, I combined geofencing with a secondary intent service that performs a final check once the geofence trigger hits, ensuring that we aren't just reacting to a momentary GPS jitter. Final Thoughts By offloading the monitoring to the platform's native geofencing API, I was able to keep Muffle
AI 资讯
How to turn a color palette into clean CSS variables
Picking colors is the fun part. Wiring them into a codebase that stays maintainable is where most palettes fall apart. Here's the approach I use. 1. Name colors by role, not value Don't scatter hex codes everywhere: css .button { background: #6366f1; } .link { color: #6366f1; } Define them once as custom properties, referenced by role: :root { --color-bg: #f7f7f8; --color-surface: #ffffff; --color-text: #1f2937; --color-muted: #9ca3af; --color-accent: #6366f1; } .button { background: var(--color-accent); } .link { color: var(--color-accent); } Now re-theming the whole app is a few edits in one place. 2. Skip pure black and pure white #000 on #fff feels harsh on screens. Pull both back: --color-text: #1f2937; /* near-black */ --color-bg: #f7f7f8; /* off-white */ Most layouts instantly look more intentional. 3. Dark mode is almost free Because the colors are role-based variables, you just override the values: @media (prefers-color-scheme: dark) { :root { --color-bg: #0f1115; --color-surface: #1a1d24; --color-text: #e5e7eb; } } Every component using var(--color-bg) adapts automatically. A shortcut I got tired of hand-converting palettes into this, so I built a free tool, PaletteCSS, that copies any palette straight out as CSS variables, Tailwind or SCSS — and has a color palette generator if you need a starting point. But honestly, the three rules above matter more than any tool. What conventions do you use to keep a color system maintainable? PaletteCSS — a free tool to discover, create and share color palettes and CSS gradients. Copy any palette as hex, CSS variables, Tailwind or SCSS. No signup. https://palettecss.com**
AI 资讯
What I Learned Building an SEO-Focused Gaming Website with Next.js
Over the past few months, I've been building a gaming website focused on Elden Ring guides, calculators, and tools. While the project started as a simple hobby, it quickly became an interesting experiment in SEO, content strategy, and web development. Here are some lessons I learned along the way. Building the Site Was Easier Than Getting Traffic Launching a website with Next.js was straightforward. Getting visitors was much harder. Many developers underestimate how competitive search traffic can be, especially in gaming niches where large sites already dominate search results. Publishing a website is only the first step. Why I Chose Next.js The project uses: Next.js TypeScript React Tailwind CSS The biggest advantage was SEO. Server-side rendering and static generation helped ensure that search engines could easily crawl and index pages. Performance was also excellent compared to many traditional CMS solutions. Tools Attract Different Users Than Articles One interesting discovery was that calculators and interactive tools behave differently from standard content pages. For example: Guides answer questions. Tools solve problems. A player may read a guide once, but they might return to a calculator dozens of times while planning different character builds. This makes tools valuable long-term traffic assets. Internal Linking Matters More Than Expected When new content was published, internal links helped search engines discover and understand related pages. For example: Build guides linked to calculators. Calculator pages linked to stat guides. Stat guides linked to weapon builds. This created a stronger topical structure around the Elden Ring ecosystem. Search Traffic Takes Time One of the biggest lessons was patience. Many pages received: Zero impressions Zero clicks No rankings for days or even weeks. Then suddenly search impressions started increasing as Google tested pages across different queries. Traffic growth was rarely linear. Content Clusters Work Well Inst
创业投融资
Thank you DEV community: the Thinking Engineer Toolkit is live
Over the past weeks, I’ve been sharing a series of posts that gravitate around one question: How do...
AI 资讯
Translating Windows system audio in real time — driverless, with no virtual cable
I build Voxis, an open-source Windows app that translates whatever your system is playing — a video, a game, the other side of a call — and plays the translation back as spoken voice, a few seconds behind the speaker. No subtitles, no virtual audio cable, no bot joining your meeting. The "no virtual cable" part is the bit worth writing about. Almost every system-audio tool on Windows tells you to install VB-CABLE or VoiceMeeter, or to drop a bot into your call. Voxis doesn't, for incoming audio. This post is how that capture engine works, and the sharp edges I hit building it in Python. I'll be specific about what's hard and honest about what's not mine to fix. The goal Read the exact audio the user is hearing — the post-mix system output — at 16 kHz mono, and do it without installing anything. Then stream it to a translation model and play the result back, all while the original keeps playing underneath. Three constraints fall out of that: Driverless. If it needs a reboot and a driver, it's not zero-setup. No self-feedback. The app plays translated audio into the same system mix it's capturing . Naively, it would capture its own voice and translate the translation. That has to be impossible by construction, not patched with an echo gate. Realtime-safe. Capture can't stall. If the downstream VAD or garbage collector hiccups, the WASAPI ring buffer must not overflow. WASAPI process-loopback: capturing the mix, minus yourself Windows 10 version 2004 added the ApplicationLoopback API — a way to activate an IAudioClient in loopback mode scoped to a process tree, either including only that tree or excluding it. Excluding our own process tree is exactly what constraint #2 needs: the captured mix is everything the user hears, with Voxis's own output removed. You don't get this client from the normal IMMDeviceEnumerator path. You activate it by name through ActivateAudioInterfaceAsync , passing the loopback parameters in a PROPVARIANT carrying a BLOB : params = AUDIOCLIENT_
AI 资讯
Making product recalls executable with Aurora DSQL and Vercel
Live demo: https://safestate.vercel.app , code: https://github.com/usv240/safestate A product recall today is basically a notice. It lives on a webpage, or a PDF, or an email that somebody is supposed to read. Say the problem out loud and it gets uncomfortable fast. A recalled crib can be listed and sold to another family, and nobody in that sale ever sees the recall. Reselling recalled goods is actually illegal, and recalled infant products have killed kids. I spent this hackathon building something to close that gap. I called it SafeState, and the idea is small: make the recall do something. When a second-hand item is listed or sold, the marketplace checks SafeState first, and recalled units get blocked right at checkout. It is precise down to the serial number, so safe units still sell. It runs on the stack this hackathon is about. A Next.js front end on Vercel, with Amazon Aurora DSQL behind it. Why DSQL is the whole point here The promise SafeState has to keep is this: the moment a recall lands in any region, no marketplace anywhere should ever read that product as "safe" again. That is a strong consistency problem, not a nice-to-have. If there is any window where a recalled product still looks safe, that is exactly when it gets sold. An eventually consistent store or a nightly sync leaves that window open. DSQL's active-active, multi-region setup with strong consistency is what closes it. I set up a real peered cluster across us-east-1 and us-east-2, with us-west-2 as the witness. Write a recall through one region's endpoint and you can read it back from the other region right away. There is a page in the app that lets you run that yourself. The one trick that makes it work DSQL runs on snapshot isolation (PostgreSQL REPEATABLE READ) with optimistic concurrency. It catches write-write conflicts at commit time. Snapshot isolation will not protect you from write skew, so I had to design around that. To guarantee that a recall and a sale of the same product actua
AI 资讯
I launched Beach Day API today
Today I launched Beach Day API , a developer API for real-time beach, ocean, water quality, advisory, amenity, access, and condition data. The goal is simple: make it easier for developers to build apps and tools around beach conditions without having to manually gather data from scattered sources. Beach Day API currently supports beaches across the United States and Australia , and returns structured JSON that can be used in travel apps, weather apps, surf tools, tourism websites, hotel and resort platforms, map-based search experiences, local discovery apps, and coastal safety dashboards. What the API includes Beach Day API can provide data such as: Beach profiles GPS and location data Ocean and weather conditions Water quality grades Advisories and closures Amenities Access details Beach-specific safety and visitor information A proprietary Beach Day Score The Beach Day Score is designed to give developers a fast way to surface whether a beach looks like a good choice for visitors on a given day. Why I built it Most weather APIs are broad. They can tell you temperature, wind, rain, or general conditions, but they usually do not answer the real user question: “Is this a good beach day?” That question depends on more than weather. It can involve water quality, advisories, closures, ocean conditions, amenities, beach access, and the actual visitor experience. Beach Day API is built around that more specific use case. Example use cases Some things developers could build with it: A beach finder app A surf or coastal conditions app A hotel or resort beach conditions widget A local tourism guide A travel planning tool A map-based beach discovery experience A safety dashboard for advisories and closures A recommendation engine for nearby beaches Built for simple integration The API uses API-key authentication and returns clean JSON responses. I wanted it to be straightforward enough that a developer could start testing quickly and then build it into a real product withou
AI 资讯
React useIsomorphicLayoutEffect: Fix the SSR useLayoutEffect Warning (2026)
You added a useLayoutEffect to measure a tooltip, shipped it, and the next time your Next.js (or Remix, or Gatsby) dev server rendered a page on the server, the console lit up: Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. The warning is correct, the suggested fix ("only use it on the client") is unhelpful, and the obvious workaround — just switch to useEffect — quietly reintroduces the visual bug you used useLayoutEffect to kill in the first place. useIsomorphicLayoutEffect is the small hook that resolves the standoff. This post explains exactly why the warning happens, why the two naive fixes are both wrong, and what the one-line hook actually does. Why useLayoutEffect Exists At All React gives you two effect hooks that look nearly identical: useEffect runs after the browser has painted. Its callback is queued and fires asynchronously once the frame is on screen. useLayoutEffect runs before the browser paints, synchronously, right after React has mutated the DOM but before the user sees anything. That timing difference is the whole point. If you need to read layout — getBoundingClientRect , scrollHeight , the measured width of a node — and then write a style based on it, you have to do it before paint. Otherwise the user sees one frame of the wrong layout, then a flicker as your useEffect corrects it. The canonical example is a tooltip that has to position itself relative to its own measured size: function Tooltip ({ targetRect , children }) { const ref = useRef < HTMLDivElement > ( null ); const [ pos , setPos ] = useState ({ top : 0 , left : 0 }); useLayoutEffect (() => { const { height , width } = ref . current ! . getBoundingClientRect (); // place the tooltip above the target, centered s
AI 资讯
Why I Still Believe in Zero-Cost BFF Layers After 6 Months (And What Broke)
Why I Still Believe in Zero-Cost BFF Layers After 6 Months (And What Broke) Honestly, I didn't expect to be writing this article. Six months ago, I built capa-bff — a zero-cost BFF framework that won a hackathon gold medal — and I thought I had it all figured out. "This is perfect," I told myself. "Zero configuration, works with any Spring Boot app, solves all the frontend aggregation problems." Spoiler alert: It didn't. Don't get me wrong — it's still great for what it is. But here's the thing about building developer tools: the real world has a way of humbling you. Let me walk you through what I learned, what works, what doesn't, and who should actually use this thing. What Even Is a BFF Anyway? If you're new to the term, BFF stands for Backend For Frontend . It's that intermediate layer between your frontend clients (web, mobile, mini-programs) and your backend services. The idea is simple: instead of making the frontend stitch together data from multiple backend APIs, you have this middle layer that does it for you. ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ Frontend │ -> │ BFF │ -> │ Backend │ │ (Web/Mobile)│ │ Aggregation │ │ Services │ └─────────────┘ └─────────────┘ └─────────────┘ The benefits are clear: Fewer network calls from the client Customized responses for each client type Better caching opportunities One place to handle auth/transformations But here's the catch most articles don't tell you: adding a BFF layer means another service to maintain , another deployment , another thing that can break . For small teams and startups, that cost can feel too high. That's exactly why I built capa-bff: I wanted a zero-cost BFF layer that you can just drop into your existing Spring Boot app. No new service, no extra deployment — just add the dependency and start aggregating APIs. How It Actually Works (Code Example) Let me show you the basics. With capa-bff, you define your aggregation in a simple annotation: @BffRoute ( path = "/user-dashboard" ) public
AI 资讯
Top Open Source Coding Agents to Replace Claude Code in 2026
Claude Code is a genuinely powerful CLI coding agent. Its context window handling and multi-file reasoning set a high bar in 2026. But it comes with real constraints - it requires an Anthropic API key, charges per token, locks you into Claude models only, and its source code is closed. For developers running local-first workflows, working in air-gapped environments, or simply preferring auditable tooling, those limitations are dealbreakers. The good news: the open-source ecosystem has matured significantly. Nine production-ready alternatives now cover every major workflow pattern - from terminal-first pair programming to fully autonomous task execution. Why Open Source Matters for AI Coding Agents AI coding agents operate at a high level of system trust. They write files, run commands, and modify your repository. That makes transparency genuinely important - not just philosophically. Open-source licensing lets you read the code, audit its behavior, self-host without sending data to a third party, and customize it for your team's needs. Beyond trust, the practical advantages are real. Open-source agents are model-agnostic by design. They connect to whichever LLM you prefer - Claude, GPT, Gemini, DeepSeek, or a local model via Ollama - letting you optimize for cost and capability on a per-task basis rather than being locked to one pricing tier. OpenCode - The Closest Open-Source Drop-In for Claude Code OpenCode has emerged as the de facto open-source answer to Claude Code in 2026, crossing 161,000 GitHub stars under an MIT license. It connects to over 75 LLM providers via Models.dev - including local Ollama models - and lets you switch providers mid-session. Internally it uses a dual-agent architecture: a Plan agent handles task decomposition while a Build agent executes changes. LSP integration brings symbol resolution into the terminal. Multi-session support lets you run parallel agents on the same project simultaneously. OpenAI Codex CLI - Auditable and Sandbox-Fir