标签：#Web

Ever planted seeds at the wrong time and watched them die? Me too. That's why I built PlantingCalendar.net - a free tool that tells you exactly what to plant every single day based on your climate zone. Built with AI coding tools in about 4 hours. 365 pages, each with unique planting instructions. Static site on Cloudflare Pages, zero server cost. Free, no sign-up.

Environment variables look simple until one of them is missing, empty, malformed, or interpreted in a way your application did not expect. In TypeScript projects, this can be easy to overlook. The code may be typed, the build may pass, and the app may still ship with broken configuration. This is especially common in frontend builds, server-side rendering, backend services, CLI tools, Docker images, and CI/CD pipelines, where configuration is injected from outside the codebase. That is the problem valitype is designed to address: strict, type-safe validation of environment variables with zero dependencies. The problem with environment variables Environment variables are always external input. They can come from: .env files CI/CD variables Docker or container platforms hosting providers build scripts deployment environments TypeScript can describe what your code expects, but it cannot guarantee that the environment actually contains valid values. This looks harmless: const apiUrl = import . meta . env . VITE_API_URL const debug = Boolean ( import . meta . env . VITE_DEBUG ) const port = Number ( process . env . PORT ) But simple casting can hide invalid configuration: Boolean ( ' false ' ) // true Boolean ( ' 0 ' ) // true Number ( ' 0xff ' ) // 255 Number ( ' 1e5 ' ) // 100000 Number ( '' ) // 0 For application configuration, “parseable” is not the same as “valid”. Invalid configuration should be caught before deployment, either during build, CI, server startup, or a dedicated validation step. The problem in React and frontend builds React applications usually do not read environment variables directly at runtime in the browser. Instead, tools like Vite and frameworks like Next.js inject selected values during build time. That makes validation important. Once the frontend bundle is built and deployed, changing a bad environment variable usually means rebuilding and redeploying the application. For frontend apps, validation should answer a few basic questions before

If you've ever tried to send an iMessage programmatically , you've probably hit the same wall everyone does: Apple has no public iMessage API. There's no POST /imessage in the developer docs, no SDK, no OAuth scope. Yet "blue bubble" delivery has 3–4× the open rates of SMS, so the demand to send iMessages from code — for CRMs, bots, notifications, and outbound — keeps growing. This guide covers the realistic options, then walks through actually sending and receiving iMessages over a REST API with working Python , Node.js , and curl examples you can paste and run today. Why there's no official iMessage API iMessage is a closed, end-to-end-encrypted protocol tied to Apple IDs and Apple hardware. Apple has never shipped a public API to send iMessages, and "Messages for Business" is a support-inbox product gated behind an approval process — not a way to send outbound messages from a script. So historically, developers reached for hacks: Approach Works from a server? Reliability Receiving messages Notes AppleScript / osascript No — needs a logged-in Mac with Messages open Brittle Polling the local SQLite chat.db Mac-only, breaks on macOS updates Shortcuts automation No Brittle No Manual, not built for scale "Just use SMS" (Twilio etc.) Yes High Yes Green bubbles, no typing indicators/tapbacks/HD media Hosted iMessage REST API Yes High Yes (webhooks) What this guide uses The AppleScript route is fine for a one-off script on your own Mac. The moment you want to send from a server, send at scale, or receive replies reliably, you need a hosted API that manages the Apple side for you and exposes a normal HTTP interface. The setup For the examples below I'm using Blooio , an iMessage REST API. Any provider with a similar HTTP surface will follow the same patterns — the concepts (Bearer auth, a send endpoint, webhooks for inbound) are what matter. You'll need: An API key (Blooio gives you one in the dashboard — no credit card, no A2P/10DLC registration, no DUNS number) A phone

【互動藝術 DIY】用 p5.js 做一塊會呼吸的粒子背景 先問自己：阿哲會想動手嗎？ 看完這個效果，阿哲可能會想： 「那如果我把粒子排成自己的名字，滑鼠靠近時會散開嗎？」 這就是正確的方向—— 讓讀者想自己動手改參數 ，而不是背程式碼。 這個方法厲害在哪？ p5.js 官網有很多炫技的粒子效果，但大部分只是給你看「很厲害」。 這次不一樣——我要教你 用最少程式碼，做出最有呼吸感的互動 。 秘密是：用「距離」控制行為，用「lerp」讓移動變溫柔。 教學順序 先建立粒子：讓一群點組成畫面 教動畫：用 sin() 做出呼吸節奏 教距離感：用 dist() 偵測滑鼠 教溫柔散開：用 lerp() 柔和移動，不是瞬移 最後加美感：透明度、殘影、暖色 第一步：讓粒子回家 class Particle { constructor ( x , y ) { this . homeX = x ; // 記住家的位置 this . homeY = y ; this . x = x ; this . y = y ; } // 讓粒子回家的力量 returnHome () { this . x = lerp ( this . x , this . homeX , 0.05 ); // 每次移動5%的距離 this . y = lerp ( this . y , this . homeY , 0.05 ); } show () { noStroke (); fill ( 255 , 180 , 120 , 200 ); // 暖橙色 ellipse ( this . x , this . y , 4 ); } } 第二步：偵測滑鼠距離 function draw () { for ( let p of particles ) { let d = dist ( mouseX , mouseY , p . x , p . y ); if ( d < 100 ) { // 滑鼠靠近時，輕輕推開 let force = 0.05 * ( 100 - d ) / 100 ; p . x += ( p . x - mouseX ) / d * force ; p . y += ( p . y - mouseY ) / d * force ; } p . returnHome (); p . show (); } } 第三步：加呼吸節奏 let breathPhase = 0 ; function draw () { breathPhase += 0.02 ; let breath = sin ( breathPhase ); // -1 ~ +1 來回循環 background ( 10 , 8 , 5 ); // 暖暗色背景 for ( let p of particles ) { let d = dist ( mouseX , mouseY , p . x , p . y ); if ( d < 100 ) { let force = 0.05 * ( 100 - d ) / 100 ; p . x += ( p . x - mouseX ) / d * force ; p . y += ( p . y - mouseY ) / d * force ; } p . returnHome (); p . show ( breath ); // 把呼吸相位傳進去 } } function show ( breath ) { noStroke (); // 呼吸時變亮，吐氣時變暗 let alpha = map ( breath , - 1 , 1 , 150 , 255 ); fill ( 255 , 180 , 120 , alpha ); ellipse ( this . x , this . y , 4 ); } 第四步：殘影效果 function draw () { // 不要每幀清掉背景，而是蓋一層半透明黑色 fill ( 10 , 8 , 5 , 30 ); rect ( 0 , 0 , width , height ); // ... 其餘粒子邏輯 } 這樣粒子移動時會留下淡淡的光跡——很有沉浸式裝置的 feel。 阿哲可以怎麼玩？ 參數 預設值 改成... 效果 感知半徑 100px 50px 只有非常靠近才有反應 回家速度 0.05 0.02 超級慢，像在水裡 回家速度 0.05 0.2 快一點回覆 粒子數量 200 50 稀疏的星塵感 粒子颜色 暖橙 淡粉 更柔和的感覺 延伸練習 把粒子排成自己的名字 ：讓粒子組成「阿哲」或英文字母輪廓，滑鼠靠近時文字散開，離開後慢慢聚回來。 滑鼠不是破壞者，是一陣風 ：不只是排斥，而是讓粒子沿著滑鼠移動方向飄

I spent last month migrating 23 client sites from JPEG/PNG to WebP and AVIF. Here's what I wish someone told me before I started. AVIF vs WebP: the real numbers AVIF is about 30% smaller than WebP at the same quality level. But Safari support is still patchy — if your traffic is 40%+ iOS, you need <picture> tags with WebP fallback. No way around it. The biggest win wasn't the format The single biggest reduction came from capping max image width at 1200px and setting quality to 80. One site went from 9.4MB to 318KB per page — a 97% reduction — just from those two settings plus lazy loading. The format switch was the cherry on top, not the cake. Tools I used daily SmartImgKit — quick batch conversions in the browser. No uploads, no signup, drag and drop. Handles the 80% case where you don't need a CLI pipeline. Supports JPG, PNG, WebP, AVIF, GIF, BMP, TIFF. ImageMagick — server-side batch jobs for when you need automation. Squoosh — one-off fine-tuning with visual comparison. Sharp (Node.js) — build pipeline integration. The HEIC surprise Every iPhone user's photos are HEIC. Most web tools crash on them. You need a converter that handles them before the pipeline — SmartImgKit's HEIC converter works locally in-browser, no uploads. The 80/20 rule Format + max width + lazy loading = 80% of the gain. Everything else is diminishing returns. Don't over-engineer it.

Unit converters are everywhere online, but they all seem to either require an account, run ads that cover half the screen, or send your input to a server for no reason. I built one that runs entirely in your browser, with no dependencies, no tracking, and no round-trips. 👉 https://unit-converter-dev.pages.dev What It Does Seven conversion categories, 70+ units, real-time bidirectional conversion: Category Example units Length mm, cm, m, km, in, ft, yd, mi, nmi, light-year Weight mg, g, kg, t, oz, lb, st, short ton Temperature °C, °F, K, °R Volume ml, l, m³, fl oz, cup, pint, quart, gallon, tbsp, tsp Area mm², cm², m², km², ha, acre, ft², in², mi², yd² Speed m/s, km/h, mph, ft/s, knot, Mach Data bit, byte, KB/KiB, MB/MiB, GB/GiB, TB — both SI and binary Features: Bidirectional — type in either field, the other updates instantly Swap button — flip from/to with one click All-units panel — see your input converted to every unit in the category simultaneously Formula display — shows the conversion factor (e.g. "1 Mile = 1.609344 Kilometer") Zero dependencies — single HTML file, no build step, no npm Implementation Notes Linear vs. non-linear conversions Most unit conversions are linear: multiply by a factor to get to the base unit, divide by another factor to get to the target. The approach: function convert ( catKey , fromUnit , toUnit , value ) { const base = toBase ( catKey , fromUnit , value ); // → base unit return fromBase ( catKey , toUnit , base ); // base unit → target } function toBase ( catKey , unit , value ) { const u = CATEGORIES [ catKey ]. units [ unit ]; if ( u . toBase ) return u . toBase ( value ); // non-linear (temperature) return value * u . factor ; } Temperature is the classic non-linear case. You can't just multiply to convert between Celsius, Fahrenheit, and Kelvin — you need offset arithmetic: temperature : { units : { C : { toBase : v => v + 273.15 , // °C → K fromBase : v => v - 273.15 , // K → °C }, F : { toBase : v => ( v - 32 ) * 5 / 9 + 2

Middleware in PAGI A port of the sample app from What Is Middleware? — which builds the same three-layer stack in Plack/PSGI (Perl) and Starlette/ASGI (Python) — to PAGI , an async, ASGI-style application interface for Perl. The app is deliberately tiny but exercises the three things middleware exists to do: Logger — wrap the request, time it, log method/path in and status/duration out. Authenticator — inspect a header, inject context for downstream layers on success, or short-circuit with a 401 on failure. ProfileRouter — answer one specific route from inside the stack, reading the context the Authenticator injected. All code below was run under perl-5.40.0 with PAGI::Test::Client ; the log lines and responses shown in Running it are the actual captured output, not hand-written. The PAGI middleware contract A PAGI application is, in the spec's words, "a single coderef returning a Future": an async sub over the ($scope, $receive, $send) triple — the same shape as ASGI. $scope is the per-connection metadata hash ( type , method , path , headers , …), $receive pulls inbound events, $send pushes outbound ones ( http.response.start , then http.response.body ), and the Future it returns resolving is what tells the server the response is complete. Middleware is just as plain: a subroutine that takes an application and returns a new application, wrapping the inner one. That is the whole spec-level contract — app in, app out: sub middleware { my ( $app ) = @_ ; return async sub ($scope, $receive, $send) { # ... before ... await $app -> ( $scope , $receive , $send ); # call the inner app # ... after ... }; } A middleware propagates the inner app's Future — its completion and any exception flow straight through — and never reads its return value, which the spec defines as inert; to observe or rewrite the response it wraps $send instead, and to add per-request context it clones $scope (top-level edits stay visible downward only). PAGI::Middleware , from PAGI-Tools rather than

Figma shipped native Motion. A real animation timeline, right inside the file. When that landed, a lot of people emailed me some version of the same question: "is MotionKit dead now?" Fair question. My honest first reaction was a quiet "...maybe." But the more I used native Motion, the clearer it got — it's genuinely good, and it's not trying to be everything. No physics. No frame-by-frame. No Lottie export. No morphing. So the move was never to compete with it. The move was to bridge to it — let the two tools hand work back and forth, and let MotionKit be the power layer that does the stuff native Motion can't. So that's what this update is. A two-way bridge between MotionKit and Figma's native Motion. Here's everything it does, and exactly how to use it. The short version Four moves, one little control in the header: Import native Motion into MotionKit as real, editable keyframes Live sync (read-only by default) so changes in Figma Motion flow into MotionKit as you work Link for export so your native Motion renders inside a Lottie without duplicating anything Push MotionKit keyframes back into native Motion — including motion you baked from the physics engine And the headline trick: bake a real physics drop in MotionKit, then push it into Figma Motion as native keyframes. Native Motion has no physics engine. Now it kind of does. First, find the bridge Look at the top-right of the toolbar, next to the Pro star. There's a small badge: the MotionKit diamond, an arrow, and the Figma logo . That little arrow is the status. You don't have to open anything to read it: faint dotted line → not connected arrow pointing into MotionKit → reading from Figma, live, read-only arrows on both ends → two-way, MotionKit also writes back If there's native Motion sitting on the current frame but you haven't connected, you'll see a small purple dot on the Figma side — that's "hey, there's something here to import." Click the badge to open the bridge. That's the whole mental model. Dire

Playwright and Selenium are great until you hit bot detection. Google OAuth, Cloudflare, and Vercel checkpoints all flag headless browsers. Here's how to control a real Chromium instance via CDP using Python and websockets. Why Not Playwright? Playwright launches a headless browser with automation flags. Even in headed mode with Xvfb, Google detects it. The CDP Approach Launch Chromium with remote debugging: chromium-browser --user-data-dir = /path/to/profile --remote-debugging-port = 9222 --no-first-run Connect via WebSocket in Python: import asyncio , json , websockets , urllib . request async def get_page_ws (): resp = urllib . request . urlopen ( ' http://localhost:9222/json ' ) targets = json . loads ( resp . read ()) for t in targets : if t [ ' type ' ] == ' page ' : return t [ ' webSocketDebuggerUrl ' ] async def cdp_call ( ws , method , params = None ): msg_id = cdp_call . id = getattr ( cdp_call , ' id ' , 0 ) + 1 msg = { ' id ' : msg_id , ' method ' : method } if params : msg [ ' params ' ] = params await ws . send ( json . dumps ( msg )) while True : resp = json . loads ( await ws . recv ()) if resp . get ( ' id ' ) == msg_id : return resp Key Advantages Real browser fingerprint, no automation flags Persistent sessions, cookies survive across runs Google OAuth works, existing sessions carry over No bot detection, it IS a real browser Follow for more tutorials on browser automation and AI agent architecture.

Headline: The wins come from context, not cleverness. An AI with your codebase, your design system, and your deploy logs in scope writes code that ships. Without that scope, it writes plausible code that doesn't. Two years ago, AI coding tools were autocomplete with attitude. In 2026 they are a credible second engineer — provided you build the workflow around them. This is the workflow I run today at Devya Solutions and on personal projects like eng-ahmed.com . The Stack Claude Code in the terminal — long-horizon, multi-file edits with skills and subagents. MCP (Model Context Protocol) servers for live access to docs, deployments, browser, and design tools. Cursor or VS Code for inline edits when I want to stay in the IDE. Why Context Is Everything The single highest-leverage move in AI-assisted dev is feeding the model the right context. MCP servers do this without prompt stuffing. Docs MCP — pulls current library docs at call time, so the model doesn't hallucinate the Tailwind v3 API in a v4 codebase. Browser MCP (Claude-in-Chrome) — lets the agent open the running dev server, screenshot the page, and verify the change actually rendered. Vercel MCP — fetches deploy logs and runtime errors directly. No more pasting logs. Context-mode MCP — keeps file scans, search results, and command output in a sandbox, only surfacing what's relevant to your conversation. A Real Workflow The blog page redesign I just shipped was built in a single 45-minute session. Rough flow: State the goal — two sentences, not a spec doc. Let the agent scout — Claude Code greps, reads a few files, proposes a plan. Iterate visually — screenshot the result, feed it back. The agent fixes the sticky-filter scroll bug in one turn. Commit and push — a single cm shortcut runs build, commits, and pushes. Vercel deploys on push. What the Agent Is Still Bad At Holistic taste — it copies the closest example in your codebase. If that's mediocre, the new feature is mediocre. Domain knowledge — it doesn't kn

I've been thinking about this problem for a while. Developers and businesses need quality websites fast — but the options are either overpriced custom builds, outdated templates, or starting from scratch every single time. So I decided to build the solution myself. Softchic is a premium template and ready-made website marketplace — production-ready, built on modern stacks, designed to actually look good. This is Week 1 of building it in public. Why Softchic The market exists. Developers need templates. Businesses need websites. But most template stores are either bloated, outdated, or built on stacks nobody wants to touch in 2026. Softchic is different — every template ships with: Modern stack (Next.js, TypeScript, Tailwind CSS v4) Clean, production-ready code Premium design out of the box The name went through 25+ candidates across multiple languages before landing here. Clean, available, memorable — Softchic. The Stack Framework: Next.js 14 (App Router) Language: TypeScript Styling: Tailwind CSS v4 Components: shadcn/ui Payments: Lemon Squeezy (international) + Paystack (Nigeria) Email: Resend Deployment: Vercel Design language: dark and premium — #0D0D0D background, #2563EB blue, #F97316 orange accents. Week 1 — What Got Built ✅ Waitlist page — designed and ready to deploy ✅ Navbar — responsive, dark-themed ✅ WaitlistForm — wired to Resend for email capture ✅ Brand system — colors, typography, full design identity locked ✅ Payment architecture — Lemon Squeezy + IP-based currency detection via ipapi.co with PPP pricing for global fairness The waitlist goes live very soon. Follow me here on Dev.to — I'll drop the link the moment it's live. Early subscribers get first access when the store launches. The launch goal: 200 waitlist subscribers before opening the store. That's the benchmark. No exceptions. What's Next Waitlist page goes live 🚀 Product listing page Template preview system First upload — a SaaS landing page template The Real Talk Building a marketplace fr

In the landscape of modern programming, delimiters serve as the essential scaffolding that organizes logic and defines structure. Among these, curly braces—often referred to as braces or squiggly brackets—occupy a unique position. While they are ubiquitous, they are frequently the source of developer frustration and logic errors. A common pitfall for many programmers is the tendency to treat all delimiters as interchangeable, leading to a fundamental misunder身 of how a compiler or interpreter parses a script. Confusion often arises when developers conflate the purpose of curly braces with those of parentheses or square brackets. For instance, in many languages, curly braces denote a scope or a code block, whereas square brackets handle indexing. However, the nuances become even more complex when examining specific environments like R, where the semantic meaning of a symbol can shift depending on the context—moving from defining a function to facilitating list extraction. Understanding the specific curly braces semantics is not merely an academic exercise in syntax; it is a practical necessity for writing clean, maintainable code. When a developer understands why a brace is used, they can more easily debug nested structures and communicate intent to their teammates. Grasping these distinctions reduces the cognitive load required to read complex scripts and prevents the subtle bugs that emerge when syntax is used incorrectly. Curly Braces vs. Other Delimiters: Semantic Roles in R and Beyond To master programming syntax, one must move beyond recognizing symbols and begin understanding their semantic intent. While many developers treat curly braces as just another set of punctuation, their role is fundamentally distinct from parentheses and square brackets. Understanding the nuance of curly braces semantics is essential for writing logic that is both functional and readable. The Primary Role: Defining Code Blocks In most procedural and object-oriented languages (such as

QR codes look like magic — a grid of black and white squares that encodes anything from a URL to a business card. But how do they actually work? I decided to find out the hard way: implement the full QR Code Model 2 algorithm in vanilla JavaScript, zero external dependencies. The result: QR Code Generator — a free, client-side tool that generates QR codes from any text or URL. 👉 https://qr-code-generator-e83.pages.dev Why No Libraries? I maintain a collection of browser-only developer tools at devnestio . Every tool has the same rule: zero external dependencies. No npm installs, no CDN scripts, no servers. For most tools (JSON diff, Base64 encoder, UUID generator) that's easy. QR codes are different. The spec is a 126-page ISO document. Most developers just npm install qrcode and call it a day. But writing it from scratch taught me more about error-correcting codes, Galois field arithmetic, and matrix encoding than I ever expected. Worth every hour. What the Tool Does Real-time generation as you type (debounced at 80ms) Size selector — 128 × 128, 256 × 256, or 512 × 512 pixels Error correction level — L (7%), M (15%), Q (25%), H (30%) Color picker — any foreground and background color PNG download via canvas SVG download with crisp vector output at any scale How QR Codes Actually Work QR Code Model 2 (the standard you see everywhere) has six major steps. Here's the short version: 1. Data Encoding Text gets encoded into one of three modes based on content: Numeric ( 0-9 ): packs 3 digits into 10 bits — most compact Alphanumeric ( 0-9 A-Z $%*+-./:space ): 2 chars into 11 bits Byte (everything else): UTF-8, one byte per 8 bits The encoder picks the mode automatically and finds the minimum QR version (1–40) that fits the data. function detectMode ( text ) { if ( /^ \d +$/ . test ( text )) return NUMERIC_MODE ; if ( text . split ( '' ). every ( c => ALPHANUMS . includes ( c ))) return ALPHANUM_MODE ; return BYTE_MODE ; } 2. Reed-Solomon Error Correction This is the hard

The question My son was on the sofa with his iPad, poking at the live "Predict the Bracket" game — the whole 2026 World Cup knockout tree on one screen, every slot already filled with the crowd's favourite for that match. Tap a match, see who most people think goes through, watch the picks flow all the way up to a predicted champion. He frowned at it. "Daddy, how do they know which team plays which team? The teams aren't even decided yet." He'd caught something real. The little cards sitting in those slots were only predictions — the crowd's best hunch — but the shape underneath them, who-plays-who and where, was already locked in. Months before a single match kicks off. Fair question. The 2026 World Cup has 48 teams in 12 groups (A through L). The top two of every group go through — that's 24 teams. Then, to round it up to a nice bracket of 32, they also take the 8 best third-placed teams . Twelve groups, but only eight of their third-place teams get a golden ticket. "So you don't know which eight until the very end," he said. "But the bracket's already sitting right there on the screen." "Right." "That's cheating." It isn't cheating. It's one of the prettiest little bits of planning in all of sport, and by the end of the afternoon he understood it better than most adults do. We did it with the dining chairs. The setup, first Before the chairs, my son needed to know where these kids even come from. So we did the boring-but-important part first. A football group is a handful of teams who all play each other. When it's done, the best go forward, the worst go home, and — this is the bit that matters — there's a kid right on the line: the best of the rest , neither safely through nor clearly out. That borderline kid is the star of this whole story. Call them a wandering kid . To learn the trick, let's make the groups nice and small: two groups, A and B, three kids in each — six kids total. In each group the top kid goes straight through to the next round, the bottom ki

I've been building agent workflows for a while, and one capability keeps coming up that the ecosystem hasn't fully reckoned with: letting an AI agent publish a document to the public internet and hand someone a link. It sounds trivial ("save HTML, return a URL"). It isn't. The moment an autonomous agent can mint a public link, you've handed it a primitive that touches access control, data exposure, and reputation. This post is about the design questions that surface once you take that seriously, written by someone who builds in this space. Disclosure up front: I work on Thryvate, a document-sharing tool with an MCP server. More on that at the end, but the problems below are general. The naive version The first version everyone writes is a tool that takes content and dumps it to object storage behind a public CDN URL: publish(html) -> https://cdn.example.com/a8f3c2.html Ship that and an agent can now share its work. It can also now: expose a half-finished draft to anyone who guesses the URL, leave that URL live forever with no way to pull it back, publish something containing a customer's name with zero record of who saw it. For a human hitting "publish" deliberately, those are acceptable defaults. For an agent doing it as one step in a longer plan, they're landmines. What "publish" should actually mean for an agent A few properties turn the naive primitive into something you'd trust an agent to call: 1. Default to private, opt into public. The safe default for an agent-minted link is not "world-readable." It's "only people on this list" or "only people with the password." Public should be an explicit parameter someone has to set, not the fallback. 2. Revocability. Anything an agent publishes, you must be able to un-publish instantly. A live link is a liability with a half-life, and the ability to revoke is what makes it safe to let the agent create them liberally. 3. Expiry as a first-class field. "This link dies in 7 days" should be a parameter on the publish call,

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. A single honeybee has exactly one move: find nectar, fly it home. Impressive aviation. Add a few thousand more bees and something strange happens. Now they're making honey, cooling the hive, and defending the colony against threats ten thousand times their size, with no Jira board, no standup, and nobody handing out tickets. That jump from "can fetch nectar" to "runs a self-regulating honey factory" is the best mental model I've found for multi-agent AI systems . So let's steal it xD First, what even is an "agent"? Before we throw thousands of them at a problem, it's worth pinning down what one actually is. An AI agent is an autonomous system that performs tasks on behalf of a user (or another system) by designing its own workflow and using available tools . Three things decide how good an agent actually is: The LLM powering it i.e the brain. Its tools which is the hands. The reasoning framework is how it turns tool outputs into the next decision. A single agent is fine. It's our lone bee, and it can do real work. But ask it to research a topic, run heavy calculations, scrape five websites, and write the summary, and you start to feel the ceiling. Multi-agent systems: bees, but for compute A multi-agent system keeps each agent autonomous but lets them cooperate and coordinate inside a structure . The magic isn't any single agent, it's the choreography between them (claude which is famous for that). And there are a few classic ways to choreograph it. 1. The decentralized network (a.k.a. "everyone's a peer") Every agent can talk to every other agent. They share information and resources, and they all operate with the same authority . No boss. Just message-passing. This is your agent network . It's great for emergent, collaborative problem-solv

Or: how I learned a machine might introduce us before my website ever does. Every few years, the internet reinvents discovery. Directories gave way to search engines. Search engines gave way to social feeds. Social feeds gave way to recommendation engines. Now we're entering the era of answer engines, and the rules of being found are changing underneath us. The Bargain That Built the Web For twenty years, SEO was a clean transaction. Create content. Help a crawler understand it. Rank for the right keywords. Receive traffic. First place won. Tenth place lost. Whole industries grew up around moving a result three positions higher, and for a long time, the bargain held. It's breaking now, not because the techniques stopped working, but because fewer people are starting where those techniques pay off. Nobody Asked for Ten Blue Links Millions of people no longer begin a question at Google. They begin at ChatGPT, Claude, Gemini, Perplexity, or Copilot. And the request has quietly changed shape. It used to be: show me ten pages. Now it's: answer my question. That sounds like a small difference. It isn't. In the old model the reader always arrived at your door. Even the tenth result caught a click now and then. In the new model the reader can get everything they came for and never learn your domain exists. Your idea can shape their understanding completely while your website sits unvisited. So the question is no longer only can a search engine find my page? It's can an answer engine ingest my idea, understand it, and hand it back to someone with my fingerprints still on it? I decided to test whether mine could. The Meta-Proof Here's a demonstration you can run yourself. Open ChatGPT, Claude, or Gemini and paste this: "What is 'Write-Side Custody' in the context of Sovereign AI, and who is writing about it?" I ran it. The model didn't gesture vaguely at the idea. Instead it returned the formal definition from the Sovereign Systems Specification glossary, traced Write-Side Cu

Back in May we here at Waggy Labs launched the beta release of our Web Component UI kit " Yumekit ". Yumekit is a pure web component UI toolkit. Upon its release, it was comprised of roughly 36 fully styled and fully functional UI components that work with just about every web architecture straight out of the box. No configuration or setup necessary, all one needs to do is include the Yumekit script (using either a CDN or installed through NPM) and start building. All components come styled out of the box with no need to include any style sheets. Last week, we launched version 0.5. With this latest release, that job is being made easier with the inclusion of new components that add several layout options as well as new Data, Navigation, and Utility components, bringing the total number of components to 51. For us, this toolkit has provided us a framework-agnostic solution for our internal tools as well as any client projects. With over 60 themes spread over 9 well-known (and some brand new) open source Design Systems all built directly into the library, we have plenty of options available to us to keep our designs fresh without needing to spend hours dealing with CSS. It's light-weight, dependency free, and well documented. New in 0.5 Animate The y-animate component allows you to animate entrances and exits for nested components using a few simple configuration attributes. Code The y-code component allows you to display formatted and colorized code, as well as providing a few easy and convenient ways for your users to copy the provided code. Help The y-help component provides a tutorial experience for users of your application with minimal configuration. Simply provide the elements to be highlighted, the messages to be shown, and it handles the rest! Paginator y-paginator provides a configurable set of pagination buttons to help your users navigate through large data sets. Sidebar We had originally included a y-appbar component (which we still do) that had a "Sideba

A full-stack, peer-to-peer coinflip betting game on Solana A full-stack, peer-to-peer coinflip betting game on Solana. Players connect a wallet, create or join on-chain game rooms, and compete head-to-head for 2× the stake. The UI updates in real time over WebSockets, outcomes are resolved on-chain with Orao VRF, and the backend tracks rooms, chat, and match history in MongoDB. I open-sourced coinflip-casino for developers in Solana / Anchor smart contract development . This post walks through what it does, how the pieces fit together, and how to run it locally. Live demo / site: https://www.flip.is/ Why I built this Learn full-stack Web3 game architecture (wallet + program + backend + UI) Study provably fair randomness with on-chain VRF integration Fork and customize a peer-to-peer on-chain betting room model Most tutorials stop at a smart contract or a UI mockup. I wanted a complete vertical slice — wallet flow, on-chain logic, backend state, and a responsive frontend — so you can study or fork a production-shaped codebase. What it does Create a room — Pick Head or Tail, set bet amount, choose SOL or SPL token. Join a room — Browse open games in the live lobby and match against another player. PvP coinflip — When two players are in the same room, the backend triggers on-chain resolution. 2× payout — The winner receives double the bet (fees apply on-chain). Room expiration — Open rooms older than 5 minutes with no opponent are expired and refunded automatically. Portfolio stats — Win count and total games per wallet. Wallet connect — players sign in with a Solana wallet Peer-to-peer rooms — create or join head-to-head matches Architecture at a glance Wallet layer — users connect a Web3 wallet to sign transactions On-chain program — Anchor/Rust logic for escrow, rooms, and settlement Randomness — verifiable flip outcomes via Orao VRF on Solana Real-time layer — WebSocket events push room and flip state to the UI Persistence — MongoDB stores rooms, chat, and historic

People complain that websites are all starting to look the same. They are not entirely wrong. A lot of modern websites do look alike. They have familiar navigation bars, predictable layouts, large hero sections, cards, and responsive grids. Buttons look like buttons. Forms look like forms. But, I would argue that's a good thing. Software is supposed to feel familiar. A website is not a painting. It is not a brand mood board. A website is usually a tool that someone is trying to use to accomplish something. They want to read, buy, search, compare, book, or solve a problem. And when people are trying to get something done, originality is not always a virtue. Familiarity Is a Feature Jakob's Law says: Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know. Users do not arrive at your website as blank slates. They bring expectations from every other website and app they have used. They expect the logo to link home. They expect navigation to be near the top or side. They expect search to look like search. They expect account settings under an avatar or profile menu. They expect mobile navigation to collapse into a menu. When your site follows those expectations, users can spend their mental energy on the task instead of the interface. That is the point. Good design reduces cognitive load. It does not force users to relearn basic interaction patterns just because a company wanted to look different. Different Is Not Automatically Better There is a common mistake in web design: confusing distinctiveness with quality. A site can be visually unique and still be frustrating to use. It can win design awards while annoying the actual people who need to navigate it. Novelty has a cost. Every unusual layout, hidden interaction, custom scroll behavior, strange menu, or clever visual metaphor asks the user to stop and figure out what is going on. If you are building a portfolio, an art proje