submitted by /u/Fcking_Chuck [link] [留言]

GitHub热门项目 | Self-hosted family planner - tasks, calendars, shopping, meals, budget. Your data, your server. | Stars: 1,205 | 25 stars today | 语言: JavaScript

Angular is well served for icons. Material Symbols alone runs to thousands of glyphs, and the community wrappers pull in dozens of other sets on top. Geography is where the shelf runs out. You get globes and map pins, sometimes a set of flags, rarely the outline of Japan and almost never the six states of the GCC. GeoIcons ships country and area icons as Angular standalone components, 422 of them at the time of writing. Adding one takes three steps: install the package, import the component by its ISO code, and render its selector. npm i @geoicons/angular import { Component } from ' @angular/core ' ; import { Us } from ' @geoicons/angular/countries ' ; @ Component ({ selector : ' app-root ' , imports : [ Us ], template : `<geoicon-us aria-label="United States" />` , }) export class App {} See it live on geoicons.io → That is the whole path. Below: inputs, styling, accessibility, and picking an icon when you only know the country at runtime. Key takeaways Install @geoicons/angular , import each country by its ISO 3166 alpha-2 code in PascalCase, and add it to the component's imports array. The class is Us ; the selector you write in the template is <geoicon-us /> . Styling props are explicit inputs, because Angular has no rest spread. Everything else goes on the host element. Icons render as decorative unless you name them, so reach for aria-label only where no adjacent text says the country. Step 1: Install the Angular package Add the package to your project: npm i @geoicons/angular It needs @angular/core and @angular/common 15.1 or newer, plus rxjs 7 or newer. That 15.1 floor comes from hostDirectives , which the icons use to share their styling inputs and which landed in that release alongside standalone components . The package sets "sideEffects": false , so the CLI can drop what you never import. List three icons in a component and you ship three. Why that matters for icon libraries . Step 2: Import by ISO code Every country ships as a named export under its ISO

This article describes an anonymized enterprise implementation. Company names, internal domains, repository identifiers, ticket numbers, and proprietary control names have been intentionally removed or generalized. Multi-factor authentication is often described as a login problem: enter a password, receive a code, confirm identity. That model was not enough for the system described in this case study. The product ran in an in-store environment where the same tablet could be used by several people during a transaction: an employee initiating the process; a manager approving or supporting it; a customer reviewing and signing on their own device. The challenge was not simply to prove that a user knew a six-digit code. We needed to create a secure, short-lived handoff between a shared in-store session and the customer’s personal phone, without leaking the downstream signing session or allowing multiple devices to claim the same transaction. This post explains the architecture, the security model, the trade-offs, and the production practices behind that platform. The actual problem: secure device handoff The workflow started on a shared tablet. At a certain point, the customer needed to continue part of the process on their own phone. The platform therefore had to answer several questions: How does the phone prove that it belongs to the customer currently standing in front of the employee? How does the shared tablet know that the correct phone claimed the correct session? What happens if the QR code is scanned twice? How do we prevent session identifiers and tokens from appearing in URLs, browser history, logs, or referrer headers? How do we notify the phone immediately when verification succeeds? How do we ensure that a single-use signing URL is never exposed before verification? Those constraints turned a seemingly small MFA feature into a distributed-system problem involving identity, real-time communication, concurrency, edge delivery, infrastructure, and operational

Hello Dev Community! 👋 It is officially Day 166 of my full-stack engineering track! Today, I designed and implemented the active messaging canvas component ( ChatContainer.jsx ) for my messaging app, QuickChat ! 💬📷⚡ Focusing on dynamic chat alignment, text bubble rendering, image attachments, and input controls was today's core milestone. Here is how I structured the component. 🛠️ Technical Breakdown: ChatContainer & Attachment Pipeline As captured in my UI and VS Code setup ( Screenshots ): 1. Dynamic Alignment & Sender Detection Conditioned flexbox directions based on authentication state so sender messages lock to the right while recipient messages render on the left: javascript

Article URL: https://openai-git-upstream.openai.chatgpt.site/ Comments URL: https://news.ycombinator.com/item?id=49131737 Points: 9 # Comments: 1

Most days now, I merge pull requests without reading the diff. That sentence used to describe someone I would not have hired. So let me be precise about what changed, because it isn't confidence and it isn't recklessness. It's that I moved the things review was catching to somewhere that catches them earlier. Here's the honest version of how that happened. The problem was arithmetic, not philosophy I run several coding agents in parallel. That produces more diff per day than I can read. Not "more than I feel like reading" — genuinely more than fits in a working day. When that happens you have exactly two options: Generate less, so it fits what you can read. Make it safe to not read. I picked the second one. Not because I'm brave, but because option 1 means throwing away the reason I set this up. The uncomfortable part: option 2 is not a mindset. It's a list of specific things that have to be true. Here's mine. 1. The rules live in a file, not in review comments Every code review I've ever done, the majority of my comments were mechanical. This function is too long. This nesting is too deep. Why is this any ? Machines can say all of that. So I made them say it, as errors : " max-lines-per-function " : [ " error " , { max : 60 , skipBlankLines : true }], complexity : [ " error " , 20 ], " max-depth " : [ " error " , 4 ], " max-nested-callbacks " : [ " error " , 4 ], Plus eslint-plugin-sonarjs with cognitive-complexity as an error, and @typescript-eslint 's strict preset — any banned, non-null assertions banned. Nothing here is novel. What's different is the next part. 2. The rules are stricter than a human team would tolerate This is the part I find genuinely interesting. If you put those thresholds on a human team, you get a PR relaxing them within a week. Not because engineers are lazy — because "this function is 63 lines and splitting it makes it worse" is sometimes true , and arguing about it every time is exhausting. Lint strictness has always been a trade-off be

This is a submission for Frontend Challenge - Comfort Food Edition, CSS Art . Inspiration I'm from El Salvador, and here comfort food has one name: pupusas . Thick corn tortillas stuffed with cheese, beans and chicharrón, served with curtido (pickled cabbage slaw) and tomato salsa. It's our national dish, but more than that — it's the food you eat at a plastic table at night, under one warm light, with the comal hissing somewhere behind you. That last image is what I wanted to capture. Not just the plate: the moment . So the piece has a light switch. Demo Two things to try: "Bañar en salsa" — pours salsa over each pupusa with a staggered cascade. "Apagar la luz" — turns the whole scene into a night pupusería, lit only by a flickering candle (veladora). Journey Everything is CSS: gradients, border-radius , box-shadow and blend modes. No images, no SVG, no libraries. JavaScript is 15 lines — two class toggles. The tablecloth is the flex. The blue-and-white geometric mantel is five bands built entirely with repeating-conic-gradient and repeating-linear-gradient — chained diamonds, sawtooth rows, chevrons. Zero background images. This was the part I rewrote the most until the patterns locked together. The night is one single element. When you turn off the light, I'm not repainting anything. A single overlay div with mix-blend-mode: multiply holds two stacked radial gradients: near-white around the candle (multiplying by white changes nothing — so that IS the light), falling off to deep blue at the edges. The steam even turns moonlit-blue for free, because that's just what multiply does to white pixels. One div, one blend mode, full day/night mood shift. Corn kernels are two offset dot grids. The mazorca's kernels are two radial-gradient grids shifted by half a cell — which is exactly how kernels interlock on a real cob. That half-cell offset is the difference between "corn" and "polka dots". The curtido is seven crossed stripe layers. White and purple cabbage, carrot, c

React Hooks have revolutionized how we write React components, offering a powerful way to manage state and side effects directly within functional components. This paradigm shift has led to cleaner, more readable, and often more maintainable codebases by moving away from the complexities of class components. Why the Shift to Hooks? Before Hooks, managing stateful logic and side effects often meant relying on class components. This approach could introduce several challenges: understanding this binding, managing complex lifecycle methods across different phases of a component's life, and dealing with "wrapper hell" – deeply nested component structures resulting from Higher-Order Components (HOCs) and render props when trying to reuse logic. Hooks solve these problems by allowing developers to "hook into" React features directly from functional components. This makes logic reuse more straightforward and components inherently easier to understand and test. Essential React Hooks at a Glance Let's explore the core Hooks that form the backbone of modern React development: 1. useState : Adding State to Functional Components The useState Hook is the most fundamental. It allows you to declare state variables in functional components. Instead of dealing with this.state and a separate this.setState() method, useState provides a direct variable for your state and a dedicated function to update it. This simplifies local component state management significantly, making it more intuitive and less prone to errors. 2. useEffect : Handling Side Effects The useEffect Hook is designed for performing side effects in functional components. Side effects encompass operations like data fetching from an API, setting up event listeners or subscriptions, or directly manipulating the DOM. This Hook consolidates logic that was previously spread across multiple lifecycle methods like componentDidMount , componentDidUpdate , and componentWillUnmount in class components. A key aspect of useEffect i

This article was originally published on BuildZn . Everyone talks about multi-agent systems but few show you how to actually coordinate them without a ton of boilerplate and deadlocks. I spent weeks trying to get agents to talk, especially when building something like FarahGPT's multi-agent trading system, often hitting insane latency. Turns out, qm can drastically simplify this, and this qm multiplayer AI agent tutorial will show you how to cut task completion times by 20% using a specific Node.js workflow. Why Multi-Agent Systems Aren't Just Hype Anymore (and qm Helps) Single LLM calls hit a wall, fast. You get generic answers, struggle with complex, multi-step tasks, and prompt engineering becomes a full-time job. I've built 9-agent YouTube automation pipelines and an AI gold trading system that needed to analyze market data, news sentiment, and historical trends concurrently. Trying to jam all that into one prompt for a single agent? Forget about it. You need a collaborative AI agent architecture . That's where multi-agent systems shine. You break down complex problems into smaller, manageable tasks, assign them to specialized agents, and have them work together. Think of it like a dev team: one person focuses on backend, another on frontend, another on CI/CD. This is how you handle real-world complexity, and it's how I scaled FarahGPT to 5,100+ users. The challenge? Orchestration. How do these agents communicate? Who manages their state? How do you ensure they don't step on each other's toes or get stuck waiting for slow upstream tasks? This is exactly where qm , a lightweight agent harness, becomes a game-changer for building AI teams. It gives you the primitives to define agents, tasks, and workflows without drowning in custom event loops. The Core Concept: Task Delegation in qm Most qm examples show simple agent interactions. Agent A asks Agent B. Done. But what if Agent A needs to delegate a task that itself needs parallel sub-tasks, and then aggregate the

JWT Validation: Verifying Tokens for Authentication and Authorization A practical guide to JWT validation — the process of checking a JSON Web Token's signature, claims, and structure to confirm a request is genuinely authenticated and authorized — covering signature verification, standard claim checks, key rotation, validation in ASP.NET Core, and the mistakes that most commonly lead to broken or bypassed validation. Table of Contents Introduction Anatomy of a JWT Signing Algorithms What "Validation" Actually Checks Signature Verification and Key Rotation Standard Claim Validation Validating JWTs in ASP.NET Core Custom Validation Logic Token Revocation: JWT's Fundamental Limitation Validating JWTs Across Services Common Vulnerabilities Debugging Validation Failures Quick Reference Table Conclusion Introduction A JWT arriving in an Authorization: Bearer <token> header is just a string until it's actually validated — and validation is doing considerably more work than it might first appear. It's not just "does this look like a JWT" or even just "is the signature valid" — proper validation confirms the token was issued by a trusted party, intended for this specific API, still within its valid time window, and hasn't been tampered with in any way. Get any one of these checks wrong or skip it, and you can end up with an API that accepts tokens it absolutely shouldn't. builder . Services . AddAuthentication ( JwtBearerDefaults . AuthenticationScheme ) . AddJwtBearer ( options => { options . Authority = "https://login.microsoftonline.com/{tenant-id}/v2.0" ; options . Audience = "api://my-api" ; }); Those two lines look simple, but they configure a genuinely thorough validation pipeline underneath — this guide covers exactly what that pipeline actually checks, why each check matters, and where things commonly go wrong when validation is configured incorrectly or bypassed under pressure. 1. Anatomy of a JWT Three parts, dot-separated eyJhbGciOiJSUzI 1 NiIsInR 5 cCI 6 IkpXVC

Project Overview The project is a React-based web application that fetches data from a REST API and displays it in a dynamic dashboard. Users can navigate between pages, search data, and interact with multiple components that rely on asynchronous API calls. While testing the application, I noticed that navigating away from a page during an active API request occasionally caused React warnings and unnecessary memory usage. This issue affected the application's stability and could lead to performance degradation over time. The problem was caused by an asynchronous operation continuing even after the component had been unmounted. For example, an API request initiated inside useEffect would still complete after the user navigated away, attempting to update the component's state. React would warn that a state update was attempted on an unmounted component. Before useEffect(() => { fetch("/api/users") .then((res) => res.json()) .then((data) => setUsers(data)); }, []); If the component unmounted before the request finished, the callback still attempted to update the state. After I solved the issue by using the AbortController API to cancel the request during cleanup. useEffect(() => { const controller = new AbortController(); fetch("/api/users", { signal: controller.signal, }) .then((res) => res.json()) .then((data) => setUsers(data)) .catch((err) => { if (err.name !== "AbortError") { console.error(err); } }); return () => controller.abort(); }, []); This ensures that pending requests are cancelled when the component unmounts, preventing unnecessary state updates and avoiding memory leaks. Code Prince3963 (Patel Prince) / Repositories · GitHub Prince3963 has 48 repositories available. Follow their code on GitHub. github.com My Improvements This fix focused on improving both performance and application reliability. What I improved Prevented memory leaks caused by unfinished asynchronous requests. Added proper cleanup logic inside useEffect. Eliminated React warnings about u

AI Agent 市场设计:让 Agent 像 App 一样被交易与编排 App Store 把「软件」变成了可被一键购买、安装、评分的商品,AI 时代对应的实体是「Agent」。一个 Agent = 一段可被复用的提示词 + 工具集 + 知识库 + 模型路由配置。本文讲清楚一个 Agent 市场需要哪些核心机制,以及 IHUI-AI 的实现路径。 一、Agent 市场的产品定义 什么是「可上架的 Agent」 不是所有对话 prompt 都能成为商品。一个可上架的 Agent 必须满足: 可独立运行 :用户购买后能立刻用,不需要再写代码。 可复用 :不同用户用同一个 Agent 都能得到稳定结果。 可定价 :有明确的使用边界(次数 / 时长 / 调用规模)。 可评估 :有客观的质量指标(成功率 / 满意度 / 失败率)。 Agent 定义格式 IHUI-AI 用一份 schema 描述可上架的 Agent: const MarketplaceAgentSchema = z . object ({ id : z . string (). uuid (), name : z . string (), description : " z.string(), " // 核心能力 systemPrompt : z . string (), tools : z . array ( z . string ()), // 引用工具/MCP server knowledgeBases : z . array ( z . string ()), // 绑定 RAG 知识库 modelRouting : z . object ({ default : z . string (), // 默认模型 fallback : z . string (). optional (), // 降级模型 }), // 定价 pricing : z . object ({ model : z . enum ([ " free " , " subscription " , " per_call " , " revenue_share " ]), price : z . number (), currency : z . string (). default ( " CNY " ), trialQuota : z . number (). default ( 0 ), }), // 评估 metrics : z . object ({ successRate : z . number (), avgLatencyMs : z . number (), rating : z . number (). min ( 0 ). max ( 5 ), usageCount : z . number (), }), }); 二、四种定价模型 模型 适用 优点 缺点 免费(Free) 引流、品牌 Agent 易扩散 无直接收入 订阅(Subscription) 高频工具型 Agent 收入稳定 流失需运营 按调用计费(Per Call) 低频高价值 Agent 与成本对齐 用户预算焦虑 分成(Revenue Share) 内容生成型 Agent 创作者激励 结算复杂 IHUI-AI 默认采用 订阅 + 按调用混合 :基础功能订阅包月,超出额度按调用计费,创作者拿 70% 分成。 三、Agent 质量评估:四维评分 简单的「5 星好评」不够,因为容易被刷分。IHUI 用四维加权: 任务成功率(40%) :Agent 完成用户原始任务的比率,由 LLM-as-Judge 自动评估。 用户评分(25%) :真实用户打分,过滤异常分布(全是 5 星或 1 星)。 响应延迟(15%) :首 token 时延 + 总时长,归一化到 [0,1]。 稳定性(20%) :错误率 + 重试率,错误越少分越高。 def agent_score ( metrics ) -> float : return ( 0.40 * min ( metrics . success_rate , 1.0 ) + 0.25 * metrics . user_rating / 5 + 0.15 * ( 1 - min ( metrics . p95_latency / 30_000 , 1 )) + 0.20 * ( 1 - min ( metrics . error_rate / 0.1 , 1 )) ) 这个分数实时更新,作为市场搜索排序的依据。 四、Agent 编排:从单个 Agent 到 Agent 工作流 单个 Agent 的能力有上限。Agent 市场的真正价值在于「让用户像搭积木一样编排多个 Agent」。

Coding agents usually do not drift because they are incapable. They drift because the task leaves too much room for interpretation. A request like “clean up authentication” sounds clear to a human who already knows the codebase. To an agent, it can mean anything from renaming one helper to replacing the entire authentication stack. The fix is not a longer prompt. It is a brief with four explicit parts : Outcome Context Guardrails Definition of Done Below is the exact structure I use. 1. State the outcome as an observable change Describe what should be different for the user or system when the work is complete. Weak: Fix the login bug. Better: When a user submits an expired magic link, show the existing “Link expired” message and offer a button that requests a new link without leaving the page. The better version gives the agent a destination. It does not prescribe the implementation, but it makes success testable. 2. Give only the context that changes the decision Context is useful when it removes ambiguity. It becomes noise when it is a tour of the whole repository. Useful context often includes: The relevant entry point or route The existing component or service that should be reused A similar implementation elsewhere in the codebase The command used to run the relevant tests A known constraint, such as backwards compatibility Example: The page is implemented in app/auth/verify/page.tsx . Reuse requestMagicLink() from lib/auth/client.ts . The existing error-message styles live in components/auth/AuthNotice.tsx . That is enough to start investigating without pretending we already know the final patch. 3. Add guardrails that define the change boundary Guardrails prevent a small task from becoming an accidental rewrite. A useful set might be: Do not change the public API. Do not add dependencies. Keep the current visual design. Do not edit generated files. Limit changes to the authentication flow and its tests. If a database migration appears necessary, stop and expl

If you've tried building a Chrome extension recently, you've probably hit Manifest V3 and spent an hour just figuring out why your background page stopped working. MV3 replaced background pages with service workers, changed how content scripts communicate, and made permissions stricter. The official docs are... not great. So here's the structure that actually works. The folder structure chrome-extension/ ├── manifest.json ├── popup/ │ ├── popup.html │ ├── popup.css │ └── popup.js ├── options/ │ ├── options.html │ └── options.js ├── content/ │ └── content.js ├── background/ │ └── service-worker.js ├── utils/ │ └── storage.js └── icons/ The manifest.json (MV3) The biggest MV3 gotcha: background scripts are now service workers. { "manifest_version": 3, "name": "Your Extension", "version": "1.0.0", "permissions": ["storage", "activeTab", "scripting"], "action": { "default_popup": "popup/popup.html" }, "background": { "service_worker": "background/service-worker.js" }, "content_scripts": [ { "matches": [""], "js": ["content/content.js"] } ] } Communicating between popup and content script This trips up almost everyone. The popup can't directly access the page DOM — it has to message the content script. // popup.js const [tab] = await chrome.tabs.query({ active: true, currentWindow: true }); await chrome.tabs.sendMessage(tab.id, { type: 'RUN_ACTION' }); // content.js chrome.runtime.onMessage.addListener((message, sender, sendResponse) => { if (message.type === 'RUN_ACTION') { // do something on the page sendResponse({ success: true }); } return true; // keeps the channel open for async response }); The return true at the end is critical — without it, async responses silently fail. Storage that syncs across devices Use chrome.storage.sync instead of localStorage. Here's a utility wrapper that makes it clean to use anywhere: const Storage = { async get(key) { return new Promise((resolve) => { chrome.storage.sync.get([key], (result) => resolve(result[key])); }); }, async set