标签：#Web

Event Handling Basics in euv Project Code： https://github.com/euv-dev/euv euv is a Rust + WASM frontend UI framework that enables developers to build interactive web applications using the power of reactive signals and the html! macro. One of the most critical aspects of any UI framework is how it handles user interactions. In this article, we will take a deep dive into euv's event handling system — from inline closures to native event handlers, from input events to form changes, and from the comprehensive list of supported event names to utility functions that simplify common patterns. Table of Contents Inline Closure Events NativeEventHandler Input Events Form Change Events Supported Event Names Accessing Event Data Utility Functions for Event Handling Putting It All Together Inline Closure Events The most straightforward way to handle events in euv is through inline closures. You define the event handler directly within the html! macro using the move |event: Event| { ... } syntax. html! { button { onclick : move | event : Event | { } "Click me" } } This pattern is ideal for simple, self-contained event handlers that don't need to be reused across multiple components. The move keyword ensures that any captured variables (like signals) are moved into the closure, which is essential for the Rust ownership model. Inline closures work with any event type — not just onclick . You can use them for keyboard events, focus events, mouse events, and more. The closure receives an Event object that you can inspect to extract relevant data. NativeEventHandler For more complex scenarios where you need reusable event handlers or want to define handlers outside the html! macro, euv provides the NativeEventHandler type. This allows you to create named, parameterized event handler functions. pub fn counter_on_increment ( counter : Signal < i32 > ) -> NativeEventHandler { NativeEventHandler :: create ( "click" , move | _event : Event | { let current : i32 = counter .get (); counter

Every time I started a new AI chat session, it read my entire codebase. 50 files. Thousands of tokens. On every single message. Whether I was asking about authentication, database schema, or a single UI component — the AI read everything. I'm 16 and building AI-powered products. Token costs add up fast. Context windows fill up. The AI loses track of older files. Responses slow down. So I built something to fix it. The Problem When you work with AI on large projects, you face a choice: Give the AI too much context → burns tokens, hits context limits, slower responses Give it too little → AI misses important files, makes wrong assumptions There's no middle ground — or at least there wasn't. Introducing FolioDux FolioDux is a lightweight, open-source file-mapping standard for AI-assisted development. The idea is simple: instead of giving your AI every file, you give it a compact index that tells it where everything is and what it does . The AI reads the index first, identifies the relevant files, and reads only those. One file. Two rules. Any AI. It works with Claude, ChatGPT, Gemini, Cursor, Copilot — any tool that accepts a system prompt. How It Works You add one file — FOLIODUX.md — to your project root. # FOLIODUX · TaskFlow · v1.0 · 2026-06-18 · 17 files STACK: React19+TypeScript+Vite · Express+SQLite · JWT --- ## TASKS auth/login/register → AuthView.tsx, authService.ts, server.ts create/edit task → TaskForm.tsx, taskService.ts, server.ts, types.ts list/filter tasks → TaskList.tsx, taskService.ts database → db.ts, server.ts --- ## INDEX App.tsx | fe | root: routing, auth state, layout wrapper AuthView.tsx | fe | login + register forms, error display taskService.ts | svc | CRUD tasks, local cache, optimistic updates server.ts | be | Express: all routes — auth, tasks, projects, user db.ts | be | SQLite setup, schema creation, migrations on boot types.ts | typ | Task, Project, User, Status(todo|in-progress|done) --- ## GROUPS Frontend: App.tsx · AuthView.tsx · TaskLi

Ekehi platform has moved from hand-written HTML/CSS/JS pages to a typed, component-driven React 19 client and a module-based TypeScript Express/Node.js API. 0. Where we started and where we landed Before. A static client built from per-page folders ( landing/ , contributors/ , login/ , signup/ , admin/ ), each shipping its own index.html , a shared styles.css , and vanilla ES module scripts under client/shared/ . The server was an Express API written in plain JavaScript. After. Layer Before After Client Static HTML + CSS + vanilla JS React 19 + Vite 8 + TanStack Router + TypeScript 6 Styling One global styles.css Tailwind CSS 4 with @theme design tokens Data fetch scattered per page TanStack Query over a typed lib/api client Server Express in JavaScript Express + TypeScript, module-per-domain Repo Two loose folders pnpm workspace with shared git hooks Quality gate None ESLint 9, Prettier 3, Husky, commitlint, Vitest The migration ran in two phases on separate branches: **Phase 1 — client rewrite. **Phase 2 — server rewrite. 1. Why this framework? Choice: React 19 , rendered as a client-side SPA through Vite 8 , routed by TanStack Router . TanStack Router was chosen rather than React Router because it gives fully type-safe routes, first-class search-param typing, built-in code-splitting, and file-based route generation that pairs cleanly with Vite. 2. The folder and component structure The client uses a feature-sliced layout: code is grouped by domain, not by technical type. client/src/ ├── components/ │ ├── layout/ navbar.tsx, footer.tsx │ └── ui/ button, input, modal, select, dropdown, ... (design system) ├── config/ env.ts, env-schema.ts, endpoints.ts ├── features/ one folder per domain │ ├── auth/ auth.query.ts, auth.service.ts, auth.types.ts, components/, pages/ │ ├── opportunities/ pages/ │ ├── resources/ pages/ │ ├── submissions/ pages/ │ ├── admin/ pages/ │ └── site/ pages/ (landing, contributors) ├── lib/ │ ├── api/ request.ts, errors.ts, refresh.ts, types.t

Modern collaboration needs more than documents and chat messages. Teams need a shared visual space where ideas can be created, organized, and refined together in real time. That's why I built SyncCanvas — an AI-powered collaborative whiteboard that combines real-time multiplayer collaboration, infinite canvas drawing, and AI-assisted brainstorming into one modern workspace. The Problem Most collaboration tools focus on only one aspect of teamwork. Some are great for drawing. Others are excellent for documentation. AI tools often live in separate windows, disconnected from the creative workflow. I wanted a platform where teams could brainstorm visually while AI actively helped generate and organize ideas directly on the canvas. Introducing SyncCanvas SyncCanvas is an infinite multiplayer whiteboard designed for students, developers, teams, and creators. Key features include: Real-time collaboration with live synchronization Infinite canvas with pan and zoom Drawing tools, shapes, text, and sticky notes AI-powered content generation using Gemini Private room sharing Guest mode access PNG export support WiFi Rooms for local collaboration Real-Time Collaboration Collaboration is at the heart of SyncCanvas. Using Yjs and WebSockets, multiple users can work on the same board simultaneously while seeing updates instantly. Users can: View live cursors Track online participants Join private rooms using secure room codes Collaborate anonymously through guest mode This creates a seamless experience similar to working together in the same room. Infinite Canvas Experience The whiteboard is designed to be limitless. Users can: Draw freehand sketches Create rectangles and circles Add text elements Organize ideas with sticky notes Move freely across an infinite workspace Export workspaces as images The canvas is powered by Fabric.js, providing smooth rendering and flexibility for future enhancements. AI-Powered Brainstorming One of the most exciting features is the integration of G

A few months ago I was about to buy a flight. The page showed "Only 2 seats left at this price" in red letters. I hesitated, then refreshed the page out of curiosity. The counter said "Only 2 seats left" again. Same number. It had been resetting on every page load the whole time. That's when I started cataloguing every trick I'd seen on shopping sites and built a Chrome extension that flags them automatically, in real time, on any page. This isn't just my opinion — it's documented research In 2019, Princeton and University of Chicago researchers scraped 11,000 shopping sites and found dark patterns on more than 1,250 of them. The FTC has since fined several companies specifically for fake countdown timers and pre-checked subscription boxes. This isn't a grey area anymore — it's a known, studied, and increasingly regulated practice. The extension targets four categories that account for most of what's out there. The four patterns Fake urgency. Countdown timers that reset, "X people are viewing this" badges that never change, "only N left in stock" that's been static for a week. Trap checkboxes. A checkbox for "Yes, sign me up for the newsletter" that's pre-checked and styled to blend into the page so you don't notice it. Confirmshaming. The decline button reads "No thanks, I don't want to save money" instead of just "No thanks." Psychological pricing. Prices ending in .99 or .95 designed to register as a lower price bracket than they are. Why no AI this time My phishing detector used Claude because language and intent are genuinely ambiguous — you need a model that understands context. Dark patterns are different. They're structural. A countdown timer either resets on reload or it doesn't. A checkbox is either pre-checked or it isn't. That's a DOM query, not a judgment call. So this one runs entirely on regex and DOM inspection. No API calls, no latency, no cost per scan, works offline. Sometimes the boring solution is the correct one. Detecting the urgency pattern T

I was debugging an internal project management application built with SvelteKit and a Rust API. Locally, navigation felt almost instant. On the VPS, opening the Tickets, Timeline, and OpenSpec docs pages felt noticeably slower. Clicking a ticket also took too long before the preview panel became useful. My first assumption was infrastructure: Maybe the VPS was underpowered. Maybe PostgreSQL queries were slow. Maybe the reverse proxy added latency. Maybe SvelteKit SSR was taking too long. The measurements pointed somewhere else. The Baseline I started with the feature list endpoint used by both Tickets and Timeline. For a project with 52 tickets: Metric Result API response time ~4 ms Response size 353,956 bytes Number of tickets 52 The API was not slow. But it was returning around 354 KB for a list of only 52 items. The SvelteKit route payload showed the same pattern: Route Data payload Tickets 349,857 bytes Timeline 354,731 bytes This explained why local testing was misleading. On localhost, transferring and parsing a few hundred kilobytes is easy to miss. Once the app runs behind a VPS, reverse proxy, TLS, and a real network connection, the payload becomes much more visible. What Was Inside the Payload? I broke down the feature response by field. The descriptions alone accounted for: 296,177 bytes That was more than 80% of the complete response. The list endpoint was returning something similar to this for every ticket: interface FeatureListItem { id : string ; title : string ; status : string ; priority : string ; storyPoints : number | null ; dueDate : string | null ; description : string | null ; checkoutCommand : string | null ; openSpecCommand : string | null ; } The problem was not that these fields were useless. They were useful on the ticket detail panel. They were not useful when rendering the initial list. Timeline was even more wasteful. It used ticket status, dates, dependencies, and assignees, but still downloaded every full Markdown description. The D

For security reasons, we consider "Target app", as the target we practiced on, and the real name won't be disclosed in this post. The target app, was a niche music streaming platform, available in web and mobile PWA, meaning the structure is same but access is easier for cross platform. The app worked in this way : You register using an account, 3rd party like google or via email After that you can use the app for free with a 3 day window (3 day trial) After the 3 day you gotta buy subscription to continue listening The flaw, existed in the first step, when you register using an email, no verification happens! You could enter any type of string@something.com , a random password and start your free trial. So what happens is that first I use string1@something.com , for 3 days. When the time runs out, I use string2@something.com for another 3 days. And since the app's trial and actual subscription don't have any difference, and the 3 day time window is the only limitation, the user with such knowledge from the app doesn't need to buy any subscriptions while such flaw exists! Mitigation : Apply email verification step after user input, so they have to use the received link to verify their address Blacklist "temporary email" service's address or IPs, so users won't generate any email to register after their trial has expired. This way, the registration process isn't too complex while keeps app from attackers avoiding a "For ever free" usage on the app.

Imagine a user trying to upload a 100MB video or a high-resolution photo to your app. If you use the standard Rails file upload, that file travels from the user's browser to your Rails server, and then your server sends it to S3 or Google Cloud. This is a terrible way to do it. While that 100MB file is transferring, your Rails worker (Puma) is frozen. It can't handle other users. If three people upload large files at once, your whole app will stop responding. In 2026, the professional way to handle this is Direct Uploads . With Direct Uploads, the file goes directly from the user's browser to your cloud storage (S3, R2, etc.). Your Rails server only handles a tiny bit of metadata. It is faster for the user and much safer for your server. Here is how to set it up in Rails 8. STEP 1: Configure Your Storage First, make sure you aren't using the local disk for production. You need a cloud provider like AWS S3 or Cloudflare R2. In your config/storage.yml : amazon : service : S3 access_key_id : <%= ENV['AWS_ACCESS_KEY_ID'] %> secret_access_key : <%= ENV['AWS_SECRET_ACCESS_KEY'] %> region : us-east-1 bucket : my-app-uploads # Crucial for Direct Uploads! public : true Note: You must configure CORS in your S3/R2 dashboard to allow requests from your domain. If you don't do this, the browser will block the upload. STEP 2: The Rails Form Rails makes the backend part incredibly easy. You just add one attribute to your file field: direct_upload: true . <!-- app/views/users/_form.html.erb --> <%= form_with ( model: user ) do | f | %> <div class= "field" > <%= f . label :avatar %> <%= f . file_field :avatar , direct_upload: true %> </div> <%= f . submit "Save Profile" %> <% end %> When you add direct_upload: true , Rails automatically includes a JavaScript library that handles the "handshake" with S3. STEP 3: Adding a Progress Bar (The UX Win) Direct uploads can take a few seconds. If nothing happens on the screen, the user will think your app is broken. We can use the built-in Ac

The morning my own file lied to me Wednesday, May 21, start of session, coffee next to the keyboard. I ask the agent where we stand on the DEV.to series. Clean answer, articulated, "Four articles on stand-by, ready to publish." I reread. Half a second of unease, because I think I saw two or three of them go through DEV.to last week, but I slept in between and I'm no longer sure. I type the question that changes everything, "Are you sure articles remain to publish?" The agent re-queries the DEV.to API in parallel, opens scripts/devto/state.json , crosses the two. The four articles have been published for two or three days. What I just read wasn't a hallucination. The agent did exactly what was expected of it, namely open articles/backlog.md , read the table, restitute what it said. I'm the one who had stopped updating that file. sync-backlog.ts hadn't run after the pushes of last week. The markdown said "stand-by" while production said "published" . The typist didn't lie. She read faithfully a file I had written myself and that I was treating as authority while nothing was maintaining it. A summary is a Cache without a refresher This is the most common failure mode of a solo project that lasts. Each day produces two flows. On one side the matter that moves, made of commits, deploys, rows in the database, statuses that transition. On the other side the writings we draft to keep our bearings, namely backlog.md , the root MEMORY.md , the Sunday-night session note, the README of the folder we refactored last week. These writings are produced quickly, in the gesture that closes a sprint, and they are maintained slowly, or not at all, because nothing in the pipeline triggers to close them. R6 of the Counterpart Toolkit says it for SQL columns, Live / Snapshot / Cache mandatory . Any column derivable from other data must declare its category in the commit that creates it. If it's a Cache, the refresher mechanism ( GENERATED ALWAYS AS , SQL trigger, materialized view with pl

The invoice arrived on a Tuesday morning. $340. For a side project I'd built in a weekend. A small LLM-powered summarization tool — users paste text, model returns a summary. I'd done the math before launching: roughly $0.002 per request, ~500 requests/day, around $30/month. Totally fine. What I hadn't accounted for: system_prompt_tokens = 800 requests_per_day = 2000 # not 500 — it went viral in a group chat input_price_per_1M = 2.50 # GPT-4o daily_cost = (800 * 2000 / 1_000_000) * 2.50 = $4.00/day → $120/month just from system prompts Plus the actual user input tokens. Plus output tokens. $340 later, I had learned my lesson. The Real Problem: API Pricing Is Designed to Be Hard to Compare Every provider uses different units: OpenAI → per million tokens (input vs output, different rates) Pinecone → read units + write units + storage GB/month Stripe → % of transaction + fixed fee + monthly platform fee AWS Lambda → per GB-second + per request + data transfer None of it is comparable at a glance. You end up either building a spreadsheet from scratch every time or just guessing — and guessing gets expensive. What I Built After the invoice incident I started keeping a cost estimation spreadsheet. It grew. Eventually I turned it into APICalculators.com — 16 free, browser-based calculators covering the infrastructure decisions most AI/SaaS developers face: LLM APIs GPT-4o, Claude Sonnet, Gemini Flash, Llama — cost by model, context length, daily volume Side-by-side comparison at your exact usage Vector Databases Pinecone vs Qdrant vs Supabase vs Weaviate Enter index size + queries/day → monthly cost Serverless AWS Lambda vs Cloudflare Workers vs Vercel Functions Cost at your invocation volume and memory config Auth Providers Clerk vs Auth0 vs Supabase Auth vs Cognito Monthly cost by MAU tier Payment Processors Stripe vs Paddle vs Lemon Squeezy Real fee comparison on your transaction volume The System Prompt Problem, Solved in 30 Seconds Here's what the LLM cost calculator

Durante mucho tiempo asocié el desarrollo de software con programar funcionalidades: crear entidades, armar controladores, conectar una base de datos, validar formularios y hacer que una aplicación responda correctamente. Sin embargo, durante el Trabajo Final de la asignatura Desarrollo de Aplicaciones Web , entendí que programar es solo una parte del problema. El verdadero desafío aparece antes de escribir código: decidir qué arquitectura conviene, por qué conviene, cuánto cuesta, qué riesgos resuelve y qué complejidad agrega. El trabajo consistió en diseñar un sistema de gestión clínica que comenzaba como un MVP para una única clínica y evolucionaba progresivamente hacia una plataforma SaaS multi-tenant . Aunque fue un proyecto académico, el ejercicio nos obligó a pensar como si estuviéramos tomando decisiones técnicas en un contexto real: con restricciones de negocio, costos, equipo, seguridad, datos sensibles y crecimiento futuro. La principal enseñanza fue: la mejor arquitectura es la que responde mejor al momento del producto . El primer desafío: no sobrediseñar desde el inicio Cuando empezamos a pensar el sistema, la tentación era ir directamente a una arquitectura compleja: microservicios, eventos, colas, Kubernetes, múltiples bases de datos y despliegues independientes. Pero al analizar el escenario inicial, esa decisión no tenía sentido. El sistema comenzaba para una sola clínica, con un presupuesto reducido y con requisitos todavía en etapa de validación. En ese contexto, arrancar con microservicios hubiera agregado más problemas que beneficios: comunicación entre servicios, contratos, versionado, observabilidad distribuida, debugging más difícil y mayor costo de infraestructura. Por eso, una de las decisiones más importantes fue comenzar con una arquitectura en capas , desplegada como un único proceso. Esta elección permitió separar responsabilidades sin asumir desde el principio la complejidad de un sistema distribuido. La capa de presentación se encarg

As a solo developer I wanted a fast, mobile-friendly interactive map for Palworld that didn't bury me in ads. The result is Pindrop , and here are a few of the technical decisions behind it. Rendering 1000+ markers without jank The interactive map uses Leaflet with a custom marker-clustering layer. Markers are served as static JSON from the edge and hydrated client-side, so the first paint is server-rendered and the heavy marker work happens after. A breeding calculator as a pure function Palworld's breeding combos are deterministic, so the breeding calculator is just a lookup over a precomputed table rather than a backend call. That keeps it instant and fully cacheable. Stack Next.js (App Router) for SSR + static generation Leaflet for the map layer Supabase for the small amount of dynamic data Vercel for hosting and edge caching If you play Palworld, the guides section collects the breeding, location and boss notes I kept losing track of. Feedback from other devs welcome — especially on the clustering approach.

Pre: What is BlockSocial? BlockSocial is the ultimate social network for developers, bringing the energy of short-form video to the world of open source. Think of it as Facebook meets Instagram—a place to showcase your code, find inspiration, and build your developer brand through "Reels" and interactive dashboards. Github link: https://github.com/Hfs2024/BlockSocial 1. User Scenario & Workflow (The Fork System) The Setup User A : Publishes a post saying: "I love drinking Pepsi every day." User B : Is shy, but wants to tell their friend this is an unhealthy habit. User C : Is a malicious user who gossips. The Fork Mechanism User B creates a fork to discuss this post with User C via the POST /api/share endpoint. Data Copying : It copies the entire post contents except comments, likes, reports, and downloads. Chain Prevention : You can fork a forked post, but the system will fork the original source root, not the fork itself. Scope : It shares with only one user at a time to prevent unexpected group creation. Database Payload for Forks The following fields are appended to the document structure: { "share" : true , "shareId" : "post._id" , // The original post ID "sharedBy" : "req.currentUser.username" , // The user who shared or forked "shareTo" : "shareTo" , // The friend receiving the share "shareComment" : "comment || ''" // A quick comment on the post } Moderation & Enforcement Workflow If User C breaks trust and leaks the conversation, User B can report them via the POST /report/user endpoint. Verification : Administrators review interaction history to verify the violation. Account Termination : Bad users receive a permanent lifetime account ban. Data Scrubbing : All associated messages from the malicious user are removed. Blacklisting : The account is fully banned. The Blindspot : Face-to-face interactions remain outside system moderation boundaries 😅 2. Technical Implementation Details Dynamic Comment Identity Logic When a user submits a comment via POST /api/c

Static sites are great: fast, cheap to host, almost nothing to attack. Then you add a contact form and hit the same wall everyone hits — a static site can't process a submission. You need a backend. The usual answers are a third-party service (Formspree, Netlify Forms, Basin) or a small server you now have to babysit. Both add a dependency you don't control, a recurring bill, and — the part that bugs me most — your submission data lives on someone else's infrastructure. There's a third option I've been running for a while: one WordPress install, zero public pages, used purely as a form endpoint. Every form from every static site I own hits it. I own all the data. And because it serves no public HTML, its attack surface is close to nothing. The architecture Three pieces, each doing one job: WordPress — the backend. Locked down so hard it doesn't behave like a normal WP site anymore. A form plugin — handles building, validation, storage, email, file uploads. (I use CraftForms because it exposes a clean craftforms/v1 REST namespace and can also serve the form HTML to an external page — more on that below.) Your static frontend — Cloudflare Pages / Netlify / wherever. It either fetch es the REST endpoint on submit, or drops in an embed snippet. WordPress never serves a public request. It only processes submissions. The part that matters: locking it down The biggest WordPress attack vector isn't your host — it's outdated plugins . So the first move is brutal minimalism: one plugin, no theme, no page builder, no public frontend. A WP install with one plugin and a blocked frontend has almost no CVE surface, because none of the usual stuff is installed. The rest is one must-use plugin. Drop this in wp-content/mu-plugins/ (no activation needed) and you've blocked the four standard entry points: <?php if ( ! defined ( 'ABSPATH' ) ) exit ; // 1. Restrict the REST API to your form namespace only. // Kills user enumeration (/wp/v2/users), route discovery, the usual REST exploits

A few months ago, I was overwhelmed by everything happening in AI. Every week there was a new coding assistant, a new workflow, or someone claiming they built an app in just a few hours. It felt like if you weren't keeping up, you'd be left behind. I tried almost everything. Cursor. ChatGPT. Claude Code. Lovable. At first, I kept switching between tools, hoping one of them would magically make me a better developer. It didn't. The biggest lesson I learned wasn't about choosing the best AI tool. It was learning how to work with AI. These days, I don't start by asking AI to write code. I start by explaining the problem. I describe the feature, the business requirements, the edge cases, and what I want the final result to look like. Sometimes I ask ChatGPT to help me plan the implementation first. Once everything is clear, I pass that plan to an agentic coding assistant and start building. That one change made a huge difference. I spend less time writing boilerplate and more time thinking about architecture, user experience, and solving the actual problem. AI still gets things wrong, so I review everything before it goes into production. But instead of writing every single line myself, I'm guiding the process. Looking back, the first few months were the hardest. Now it just feels normal. The tools will keep changing, but I think the real skill is learning how to communicate with AI and use it as part of your development process. That's something worth investing in.

How to Access 50+ Chinese AI Models Through One API The Chinese AI ecosystem exploded in 2025-2026. DeepSeek dropped training costs by an order of magnitude. Qwen 3 ships 19 variants from 0.6B to 235B parameters. GLM-5 competes head-to-head with GPT-5 at 3% of the price. There's Kylin, Yi-Lightning, Hunyuan-T1, MiniMax-M1, Step-2-16K, and 40+ more models from a dozen labs. The models are incredible. The fragmentation is not. Every lab has its own API. Different auth headers. Different response formats. Different streaming protocols. Different error codes. If you wanted to try 5 models from 5 Chinese labs last year, you'd need 5 SDKs and 5 billing dashboards. Nobody has time for that. This is exactly the problem AIWave was built to solve. One API Key. 50+ Models. Zero Code Changes. AIWave is a unified API gateway that aggregates 50+ Chinese AI models behind a single endpoint. It speaks the OpenAI API format, which means every existing tool, SDK, and codebase in your stack works without modification. Here's what that looks like in practice: from openai import OpenAI # Point to AIWave instead of OpenAI client = OpenAI ( base_url = " https://api.aiwave.live/v1 " , api_key = " sk-your-aiwave-key " ) # Use DeepSeek V4 Pro response = client . chat . completions . create ( model = " deepseek-v4-pro " , messages = [{ " role " : " user " , " content " : " Explain MoE architecture " }] ) # Switch to GLM-5 — change one string response = client . chat . completions . create ( model = " glm-5 " , messages = [{ " role " : " user " , " content " : " Explain MoE architecture " }] ) # Try Qwen 3 235B — same thing response = client . chat . completions . create ( model = " qwen3-235b " , messages = [{ " role " : " user " , " content " : " Explain MoE architecture " }] ) That's it. Whatever you're already using — the OpenAI Python SDK, LangChain, LlamaIndex, Vercel AI SDK, a custom fetch wrapper — continues to work. You change the base URL and the model name, and suddenly you have acce

Every Solana program eventually hits the same question: where do I put my data, and how do I find it again later? Programs are stateless, so a program's data lives in separate accounts, each at an address. The moment you store something, you owe an answer to a problem databases tend to hide from you: what address does this live at, and how does the program find it again tomorrow? Program Derived Addresses are Solana's answer. The name scares people off, but the idea is mostly "an address you compute instead of remember, that only your program can control." The problem, in code Say each user gets a counter account. The normal way to make an account is to generate a fresh keypair and store data at its public key: import { Keypair } from " @solana/web3.js " ; const counter = Keypair . generate (); // counter.publicKey is something random, e.g. 7Hx4...9fT // create the account at that address, write count = 0 It works. But the address is random, so nothing connects this user to that address . Tomorrow, when the user comes back to increment, how does your program find their counter? You're forced to keep a lookup table somewhere: // the mapping you now have to store and never lose const counters = { " 9fYL...user1 " : " 7Hx4...9fT " , " B2k9...user2 " : " Qz1p...4dR " , // ...times ten thousand users }; Lose that table, lose the data, even though the accounts are right there on chain. You're storing files in a warehouse and writing the shelf number on a sticky note. The fix: compute the address from what you already know What if the address were a function of the user instead of random? Give a function the word "counter" and the user's public key, and it hands back a fixed address. Same inputs, same address, every time. No table. That's a PDA. PDAs are 32-byte addresses derived deterministically from a program ID and a set of seeds. The seeds are the meaningful inputs you pick (here, "counter" + the user's key). With @solana/web3.js , the library Anchor's client uses: im

TSRX is a TypeScript language extension developed by Dominic Gannaway, designed to build declarative user interfaces in a framework-agnostic manner. It compiles single .tsrx files to various runtime targets and supports scoped styles and declarative error handling. TSRX is currently in alpha and is open source under the MIT license. By Daniel Curtis

Hello Dev Community! 👋 It is officially Day 45 of my non-stop run toward full-stack engineering! Yesterday, I learned how to serve static HTML pages using Express routing. Today, I took a major step toward building premium, clean, and minimalist UI/UX styles by installing and mastering Tailwind CSS via the Tailwind CLI ! Instead of writing massive, chaotic external CSS stylesheet files, today I shifted to the industry-standard utility-first workflow to speed up my design iterations. 🧠 Key Learnings From Day 45 (Tailwind CSS Architecture) Tailwind doesn't give you pre-built components; it gives you atomic utility classes that let you build completely custom, high-end layouts directly inside your HTML structure. Here is the engineering breakdown: 1. Tailwind CLI Installation & Initialization I learned how to integrate Tailwind from scratch using npm packages instead of lazy CDN links. Installed the tailwindcss compiler core ( npm install -D tailwindcss ). Initialized the configuration hub using npx tailwindcss init . 2. Crafting the Content Map inside tailwind.config.js Understood how Tailwind optimizes final file weights using tree-shaking. I configured the structural template paths so the compiler knows exactly which files to scan for dynamic styling classes: javascript /** @type {import('tailwindcss').Config} */ module.exports = { content: ["./public/**/*.{html,js}"], // Scanning static folders cleanly theme: { extend: {}, }, plugins: [], }

Hello, I'm Maneshwar. I'm building git-lrc, a Micro AI code reviewer that runs on every commit. It is free and source-available on Github. Star git-lrc to help devs discover the project. Do give it a try and share your feedback. I boot up my machine. The desktop loads. And before I open my editor, before I check Slack, before I do a single productive thing, I right-click an empty patch of desktop and hit Refresh . Then I do it again. And again. I am a person who can explain event loops and reason about cache invalidation, and yet here I am, mashing F5 on a static wallpaper like it owes me money. If you've never done this, congratulations, you're better than me. If you have ... welcome. You're among friends. First, let's kill the myth There's a folk belief that refreshing the desktop is a tiny act of system maintenance. A little spring cleaning. A gift to your hardworking CPU. It is not. Manually refreshing your desktop does not : free up RAM reduce CPU load clear some mysterious cache make your PC faster in any way, shape, or form All it does is tell Windows Explorer to redraw the current view . That's it. That's the whole feature. What's actually happening under the hood Here's the part that's actually interesting (we're devs, we live for the "actually"). Windows doesn't repaint your entire screen on every frame, that would be wildly wasteful. Instead it leans on a composition engine that, with help from your GPU when one's available, only redraws the regions that changed since the last frame. Already drawn elements get cached and reused. Icons, the taskbar, your wallpaper they're all mostly static, so mostly left alone. When something genuinely changes (you save a file, delete a folder, plug in a drive), the OS detects it and tells the composition engine: "hey, this little rectangle changed, repaint just that." The desktop refreshes itself, automatically, all day long, without you ever touching anything. So the manual Refresh button is really just a manual overrid