标签：#Web

For twenty years, "ranking" meant one thing: get indexed, get crawled, get a position on a results page. Every Shopify store's SEO checklist was built around that single goal. Sitemap submitted, meta tags filled in, Core Web Vitals green, done. That checklist still matters. It's also no longer sufficient, and most stores haven't noticed yet. Two different systems, two different jobs Google's index and an LLM's answer engine are not the same kind of system, even though they both "read" your store. A search index is a retrieval system. It crawls a page, tokenizes the content, stores it, and matches it against a query at request time. Ranking is a function of relevance signals backlinks, click-through behavior, freshness, page experience. The unit of output is a list of links. The user does the synthesis. An LLM-based answer engine is a generation system. When someone asks ChatGPT, Perplexity, or Claude "what's a good Shopify store for sustainable activewear," the model isn't returning a ranked list of crawled pages. It's generating a single answer, and it decides which brands to name in that answer based on which entities it has high confidence are real, relevant, and well-attested across multiple sources. The unit of output is a sentence. The model does the synthesis, and your store either gets a mention in that sentence or it doesn't. This is the gap. A store can be fully indexed sitemap clean, every product page crawlable, ranking on page one for its category and still never get named in an AI-generated answer. Indexing is a necessary condition for citation. It is not a sufficient one. What "citable" actually requires Citation in an LLM context isn't about keyword matching. It's closer to reputation modeling. Three things tend to separate stores that get cited from stores that don't: Entity consistency across the web. The model needs to resolve "your brand" as a single, stable entity across multiple independent sources your own site, marketplaces, press mentions, r

React useIntersectionObserver Hook: Lazy Load & Detect Visibility (2026) You want to load an image only when it scrolls near the viewport. Or fire an analytics event the first time a card is actually seen . Or trigger "load more" when the user reaches the bottom of a list. Every one of these is the same question — is this element on screen yet? — and for years the answer was a scroll listener that fired hundreds of times a second, re-read getBoundingClientRect() on each tick, and still managed to miss the edge cases. IntersectionObserver is the browser API that answers that question correctly, asynchronously, and off the main thread. useIntersectionObserver is the hook that wires it into React without the useEffect / useRef /cleanup boilerplate — and without the leak-on-unmount and stale-closure bugs the hand-rolled version always ships. This post covers the real @reactuses/core API, the three patterns you'll actually reach for, and how to tune threshold , rootMargin , and root . SSR-safe and typed. Why Not Just Use a Scroll Listener? The old way to know whether an element was visible looked like this: listen to scroll , and on every event measure the element against the viewport. useEffect (() => { function onScroll () { const rect = el . getBoundingClientRect (); if ( rect . top < window . innerHeight ) { setVisible ( true ); } } window . addEventListener ( ' scroll ' , onScroll ); return () => window . removeEventListener ( ' scroll ' , onScroll ); }, []); This has two problems baked in. First, scroll fires on the main thread, dozens of times per second, and getBoundingClientRect() forces a synchronous layout each time — that's exactly the recipe for janky scrolling. Second, it only catches elements crossing the viewport ; the moment your scroll happens inside a container, you're re-deriving geometry by hand. IntersectionObserver flips the model. You hand the browser a target and a threshold, and it tells you — asynchronously, batched, off the scroll path — when

A few months ago I was applying for jobs and stumbled across Jobscan. It looked exactly what I needed — paste your resume, paste the job description, see how well you match. Then I saw the price. $49.95/month. As a student, that's a week of groceries. I closed the tab. But the problem didn't go away. I kept wondering — why is my resume getting rejected before a human even reads it? ATS systems are filtering people out and nobody tells you why. So I built ClearScan. What it does: Scans your resume against a job description. Shows exactly which keywords you're missing. Checks ATS compatibility across 5 platforms (Workday, Taleo, Greenhouse, Lever, iCIMS). Scores your bullet points using STAR format analysis. Gives you a transparent breakdown — you can see why you got the score you did. That last part matters to me a lot. Most tools just give you a number. ClearScan shows you the math. Where it stands: Launched today. First paying customers already. Free tier gives you 2 scans/month — enough to feel the product before deciding. Pricing starts at €3.99/month. Built for students, priced for students. Live at clearscan.fyi — would genuinely love your feedback, especially from developers who've dealt with ATS hell themselves.

OpenAI usage page, check spend. Anthropic console, check spend. Add it up in my head. Close both...

An AI gateway is the control point between your applications and the LLMs they call. It’s where cost, security, reliability, and governance get managed across every model and provider at once. Skip it, and AI sprawl quietly turns into runaway spend, security gaps, and outages you didn’t see coming. Here’s why a gateway has become core infrastructure. Almost nobody adopts AI in a tidy, planned way. One team ships a support chatbot on OpenAI. Another prototypes on Anthropic. A third fine-tunes an open model on its own GPUs because the latency was better. A year later you’ve got dozens of applications, several providers, API keys scattered across repos, and no single answer to a simple question: what are we spending, and what data are we sending where? That’s the gap an AI gateway fills. It sits between your applications and the models, and it turns fragmented, ungoverned access into something you can actually manage. The reason organizations end up needing one is straightforward — production AI creates problems that application code was never designed to solve. Let’s walk through them. The problems an AI gateway solves Cost that’s invisible until the invoice arrives LLM spend is uniquely easy to blow up. A retry bug, an agent stuck in a loop, an unbounded batch job — any of these can multiply tokens overnight. And when every team holds its own provider key, finance gets one large number with no story behind it. A gateway changes that. It enforces budgets and rate limits per user, team, and application, tracks token spend as it happens, and attributes every dollar to a cost center. TrueFoundry, for instance, lets platform teams set hard caps so a single bad deploy can’t drain the AI budget. The detail matters because cost control only works if it’s enforced before the spend, not discovered after it. Security and credential sprawl Without a gateway, provider keys end up hardcoded in notebooks, committed to repos, and copied onto laptops. There’s no clean way to rotate t

Traditional content pages are often designed for a linear reader. The introduction sets context, the middle develops the idea, and the conclusion ties everything together. AI retrieval does not always work that way. A system may identify smaller content units, pull the most relevant section, compare it with other sources, and use that fragment to support an answer. The full page still matters, but the retrievable blocks inside the page matter just as much. A useful Tumblr post explains the idea in simple terms: https://www.tumblr.com/digitalisedsoul/820825642809573376/ai-does-not-read-your-content-like-a-human?source=share For Dev Community readers, the pattern is familiar. Poorly structured inputs lead to weaker outputs. If content is dense, vague, or dependent on surrounding paragraphs, it becomes harder to extract and reuse. If content is modular, clear, and properly scoped, retrieval becomes easier. Marketing teams can learn a lot from this. A strong content page should behave like a set of well labelled components. Each section should answer a specific question. Headings should be descriptive, not decorative. Paragraphs should avoid vague references such as the above point or this approach when the section may be read independently. Definitions should appear close to the terms they explain. Examples should include enough context to stand alone. Proof should be written as text, not only displayed as graphics. Internal links should connect related concepts in a way that helps both readers and systems understand the topic map. A page about AI search visibility, for example, should not only include one broad explanation. It should break the topic into useful blocks: what AI visibility means, why AI systems retrieve passages, how source trust works, what makes content reusable, and how brands should measure answer presence. Each block becomes a possible answer unit. That structure does not weaken the reader experience. It improves it. Developers, marketers, and busi

I needed to convert 500 product images from one format to another. Server-based solutions quoted $15-50/month for batch processing. So I built a client-side solution using Web Workers and OffscreenCanvas. The Architecture The key insight: Canvas operations on large images block the main thread. The fix: Web Workers handle image decoding/encoding off the main thread OffscreenCanvas renders without DOM access — perfect for worker contexts Transferable objects pass image data between workers with zero-copy const worker = new Worker ( ' processor.js ' ); const canvas = new OffscreenCanvas ( 800 , 600 ); // Worker processes image, main thread stays responsive Real Performance Processing 500 images (average 2MB each) on a mid-range laptop: Server upload approach: 12 minutes (mostly upload time) Browser-local with Workers: 3 minutes 40 seconds Memory usage: Stable at ~400MB with proper cleanup The Tools I packaged this into webp2png.io for batch WebP conversion and svg2png.org for vector batch processing. For barcode generation, genbarcode.org uses similar worker-based rendering for bulk label generation. If you're processing more than 50 images, Workers + OffscreenCanvas is the way to go. Your server bill will thank you.

Most of us share files constantly: config files, API specs, design assets, build artifacts. And most of us don't think too hard about where they end up. That's exactly what Zero-Knowledge Architecture (ZKA) is designed to address. But the term gets thrown around loosely, so let's break down what it actually means — and what to look for. The Core Idea: The Server Shouldn't Have to Trust You Traditional cloud storage works roughly like this: You upload a file The server encrypts it (or doesn't) The server holds the key You trust them not to look Zero-knowledge flips this entirely. In a true ZKA system: Encryption happens on your device , before data leaves your control The keys never leave your side — the server never sees them The server handles only encrypted blobs — it's a pipe, not a vault The phrase you'll hear is: "We can't read your data even if we wanted to." That's the point. Why This Actually Matters Here's a concrete scenario: you're sharing a .env file with a contractor. You use a cloud service. The service gets breached a week later. With standard encryption (server holds the key): the attacker potentially has your secrets. With ZKA: the attacker has an encrypted blob that's useless without the key they never had. Beyond breach scenarios, ZKA also helps with: Regulatory compliance — GDPR, HIPAA, and similar frameworks become easier to demonstrate when the service provider has zero access to the data Reduced trust surface — you're not trusting the company, their employees, or anyone who might compel them legally What Real ZKA Looks Like in Practice There's a big difference between claiming zero-knowledge and actually implementing it. Here's what to look for: ✅ Client-side encryption Files should be encrypted in the browser or app before upload. Not on the server. If encryption happens server-side, it's not zero-knowledge — it's just encrypted storage. ✅ Key management stays with you Where do the keys come from? How are they shared with recipients? In a rea

IF YOU'VE been developing htmx apps for a while, you might have tried to cache the HTML fragments generated by your server as htmx responses. Caching htmx fragments is the equivalent of caching JSON responses in a SPA. Eg, you might have a fragment response from GET /users/:id that renders a user detail view. You might want to cache this view to avoid expensive queries in the backend if you know the user details haven't changed. But when you start caching htmx fragments, a problem pops up: the style doesn't match the rest of your app. You might be rapidly iterating on the app and making adjustments (small or big) to its CSS. You quickly start to notice that annoyingly frequently, your user fragments are not updating to the latest style. Sure, you can do a hard reload and force the fragment to have the latest style. But surely there must be an easier way? Content negotiation Enter the version headers: Accept-Version : a request header set by your frontend to instruct the backend what version of a resource it wants Version : a response header set by your backend to inform the frontend what version of the resource it is serving. Basically, the backend and frontend have to agree on the version, otherwise they automatically do a hard reload. You can think of this as a lightweight form of content negotiation. Here's a pseudo-code for a backend middleware that shows the rules: if Accept-Version header not in request then continue with request pipeline else if Accept-Version header value = the expected version then continue with request pipeline else if request method is GET then respond with 200 OK empty body and a response header HX-Redirect: request target else continue with request pipeline finally add response header Version: expected version end The meat of this middleware is the redirect if the expected and actual versions don't match. This ensures that the response htmx fragment style can't drift out of sync with the rest of the app. Now, let's look at some of the d

If you've spent any time building or working with APIs, you've probably realized that the terminal is...

TL;DR Centred a sidebar brand mark in the collapsed rail (open-source starter kit) — pure CSS, no JS. A CRM app got a "daily cockpit" dashboard (hot leads + overdue follow-ups) plus a full favicon/PWA icon set. An analytics product's ingest pipeline learned to handle messy uploads — files with no date column and no numeric measure — and a nasty metrics bug got squashed. A spread day across three repos. Quick tour. Centring a collapsed sidebar logo (CSS only) Kickoff , my open-source Laravel starter kit, had a small visual snag: when the sidebar collapses to a narrow rail, the header switches to a column — but the brand mark sat off-centre. The content area is ~72px, yet the logo kept its width and a leftover space-x margin, nudging it left of the nav icons. No JavaScript needed. Make the logo and toggle full-width, centre their content, and zero the leftover child margins when collapsed: [ data-flux-sidebar ][ data-collapsed ] .sidebar-header .app-logo { width : 100% ; justify-content : center ; padding-inline : 0 ; } /* kill the leftover space-x margin pushing it off-centre */ [ data-flux-sidebar ][ data-collapsed ] .sidebar-header .app-logo > * { margin : 0 ; } Lesson: when a flex container changes direction, old horizontal margins don't disappear — they just push things in the new axis. Tag the element, scope the override to the collapsed state, done. A CRM "daily cockpit" A CRM app I work on got a dashboard rebuild: instead of a generic landing screen, the first thing you see is what needs action today — hot leads and overdue follow-ups. The cockpit framing matters more than the widgets: surface the work, don't make people hunt for it. Also shipped a full favicon/PWA icon set and a branded responsive landing page, with feature tests so the brand pass didn't quietly break routing. Ingest that survives real-world files The bigger chunk of the day went into an analytics/dashboard product's ingest pipeline. Real uploads are messy, so the pipeline now copes with the

you probably didn't think about this when you signed up. you entered your card details, verified...

The three-layer model works. Part 1 of this series is the invoice incident that proved it. Part 2 is...

AI makes it easier to build the wrong thing with confidence. That is the part I think a lot of beginner builders and freelancers miss. The obvious story is that AI makes execution faster. That is true. I can ask an AI coding tool to explain an error, compare implementation options, inspect a project, write code, refactor a screen, generate a QA checklist, or help me pick up where I left off. That is a huge change. But speed is not the whole story. When the tool gets faster, your judgment becomes more important, not less. You have to decide what the project is allowed to become. You have to decide which tradeoffs are acceptable. You have to decide whether the output actually matches the user's job. You have to decide when the AI is solving the real problem and when it is decorating the wrong one. In my freelance work, AI changed the job from searching and stitching to directing, reviewing, and verifying. That sounds cleaner than it feels. Directing means you need to know what outcome you want. Reviewing means you need to notice when the answer is plausible but wrong. Verifying means you cannot treat a green checkmark, a pretty screen, or a confident explanation as proof that the app actually works. The beginner mistake is believing AI removes the need to think clearly. The better rule is this: AI removes some friction from execution, then hands you more responsibility for scope. The Faster Tool Still Needs A Smaller Job When I started using AI heavily for software work, the old research loop changed immediately. Before modern AI tools, a lot of software work meant digging through documentation, old forum posts, Stack Overflow answers, YouTube videos, outdated examples, and half-related blog posts until something clicked. You stitched pieces together and hoped the tutorial you found still matched the version of the framework you were using. Now you can ask the tool directly. That is better. It is also dangerous if you confuse a fast answer with a good product decision

If you're starting a web project, you're probably starting with a CSS reset, and for most of us, that means reaching for a trusted community solution - dropping it in and moving on. If you're building a design system, though, that habit may be working against you. The existing solutions The community reset ecosystem is genuinely good. Each tool approaches the browser compatibility problem from a slightly different angle. Some examples include: Eric Meyer's Reset is a classic: it zeros out margins, padding, and font sizes across every element, giving you a completely blank slate. It's minimal and predictable, which made it influential. Normalize.css smooths over inconsistencies while preserving the ones that are actually useful. sanitize.css and modern-normalize continue that evolution - incorporating contemporary best practices like box-sizing: border-box , improved form element handling, and accessibility-aware defaults. The problem isn't that any of these are bad. The problem is that they're all deliberately, necessarily generic. They can't know anything about your typeface, your color palette, your spacing scale, or how your interactive elements should behave. That's by design - they're tools for everyone, which means they're perfectly tailored for no one. The problem If you're building a design system, generic is exactly what you don't want your reset to be. The moment you drop in one of these resets and start building, you find yourself doing a second round of work. You apply your typeface to body . You reset margins on headings. You make form elements inherit fonts. You define focus styles. You're re-resetting - applying your design language on top of a layer that just cleared out the browser's defaults and replaced them with... more defaults you'll override. Worse, that duplication doesn't stay in one place. Every component you build either re-declares these foundational styles or silently assumes they're already set upstream. You end up with either redundanc

Most developers expect to go through multiple interview rounds, coding assessments, or take-home assignments before getting hired. That wasn't my experience. I ended up working with the YouTuber I had admired for years without an interview, without an exam, and without even sending a resume. Here's how it happened. It Started Long Before the Opportunity I started freelancing when I was in Class 9. At first, it wasn't about building a career. I simply enjoyed creating websites and wanted to gain experience while earning some money. Over the years, I worked with different clients, solved different problems, and learned something from every project. Those freelance gigs taught me much more than writing code—they taught me how to communicate with clients, deliver on time, and take ownership of my work. The Opportunity A few months ago, one of my favorite YouTubers posted in his WhatsApp community that he was looking for someone to build a website. I happened to be a member of that group. As soon as I saw the message, I reached out and told him I could build it. Instead of spending time wondering whether I was "good enough," I decided to let my work answer that question. Building It in Under 24 Hours Once I received the project, I focused entirely on delivering it as quickly as possible without compromising quality. I completed the website in less than 24 hours. After reviewing it, he requested a few modifications. I implemented them immediately and delivered the updated version. At that point, I assumed the project was finished. The Unexpected Offer A few days later, he contacted me again. He had another web application that had been stuck because a previous developer couldn't complete it. He asked if I could take over. That conversation eventually turned into a job offer. No coding interview. No aptitude test. No technical assessment. Just trust built through delivering one project well. What I Learned Looking back, I don't think I got the job because I replied quickly

Every Sanity marketing site ends up with a page builder. An array of sections, an insert menu, a render loop that maps block._type to a component. You've built it. I've built it. We've all built the same thing. And every one of them ships with the same bug. You add a new section. You wire it into the schema. You add a renderer. You add a component. You add the type. And then — because there are five places to touch and you're a human — you forget one. The section renders blank in production. Or it never shows up in the insert menu. Or it fetches no fields because you missed the GROQ projection, so it renders as nothing at all. No error. No red. Just a hole on the page where a section should be. The annoying part isn't the bug. It's that you'll hit it again on the next project, in exactly the same way, because you rewrote the whole thing from scratch — again. The section tax Here's what "add a section" actually costs in a typical Sanity + Next.js page builder: Schema — a new *Section object type, registered in your schema index. GROQ — a new conditional in the page-builder projection so the block's fields actually come down. Component — the React component that renders it. Renderer map — an entry mapping _type → component. Types — the block variant in whatever union your frontend renders. Miss #2 and the block arrives empty. Miss #4 and it silently skips. Miss #5 and TypeScript shrugs because your union is hand-maintained and now lies. Three different failure modes, all of them quiet, all of them "works on my machine until it doesn't." Now look at those five places and ask: which of them is actually unique to your site? The component is. It's welded to your design system — your spacing, your tokens, your brand. Nobody can reuse it and nobody should. The other four are plumbing . "Look up _type in a map, call the renderer, keep the map in sync with the schema and the query." That code is byte-for-byte the same idea on every project you've ever built. So why is it livi

Semantic HTML and Accessibility: Building Better Websites Introduction Semantic HTML is the practice of using HTML elements that clearly describe the purpose of the content on a webpage. Instead of using many <div> elements, semantic tags such as <header> , <nav> , <main> , <section> , <article> , and <footer> make the page easier to understand. Semantic HTML is important because it improves accessibility, helps search engines understand web pages, and makes code easier to read and maintain. Before: Non-Semantic HTML <div class= "header" > <h1> My Portfolio </h1> </div> <div class= "navigation" > <a href= "index.html" > Home </a> <a href= "about.html" > About </a> </div> <div class= "content" > <p> Welcome to my portfolio website. </p> </div> After: Semantic HTML <header> <h1> My Portfolio </h1> </header> <nav> <a href= "index.html" > Home </a> <a href= "about.html" > About </a> </nav> <main> <section> <p> Welcome to my portfolio website. </p> </section> </main> Accessibility Issues I Found 1. Images Missing Alternative Text Before: <img src= "images/profile.jpg" > After: <img src= "images/profile.jpg" alt= "Profile picture of Grace Loko" > Adding alternative text allows screen readers to describe images to users with visual impairments. 2. Navigation Was Not Semantic Before: <div> <a href= "index.html" > Home </a> <a href= "about.html" > About </a> </div> After: <nav> <a href= "index.html" > Home </a> <a href= "about.html" > About </a> </nav> Using the <nav> element helps assistive technologies identify the website navigation. 3. Form Inputs Had No Labels Before: <input type= "text" placeholder= "Your Name" > After: <label for= "name" > Name </label> <input type= "text" id= "name" name= "name" > Labels improve accessibility by helping screen readers identify each form field. Conclusion This accessibility audit helped me understand the importance of semantic HTML and accessible web design. By replacing non-semantic elements with semantic tags, adding image alt text,

[v0.3.0] - 2026-06-29 🚀 Added Checkpoint Mechanism — ReActCore introduces three checkpoints during streaming: content_ended (after text content), before_tool_calls (before tool calls), and after_tool_calls (after tool calls), enabling precise interception and state synchronization of the execution flow. Message Queue System — Added a new MessageQueue class in run.py , supporting async enqueue, drain, and remove operations. Users can now queue messages while the LLM is running; queued messages are sent automatically after the current task completes. The frontend introduces a QueueBar component to display queued messages, with CSS spinning animation, single-line ellipsis, and hover-to-delete functionality. Queue Message Merging — MessageQueue.drain_all() now merges consecutive messages with the same name into a single message, preventing fragmented user input when multiple queue entries share the same sender. Queue WebSocket Events — The execution event protocol introduces three new event types: message_queued , queue_drained , and queue_returned ( useRunWebSocket.ts ). The frontend processes queue state updates in real time. Stop & Queue Integration — When the user clicks Stop, pending queued messages are returned to the input box via queue_returned . Checkpoint stops cleanly clear the queue and automatically start the next message. System Notification Messages — Introduced the SystemMessage type (with notification role) to separate error messages from assistant content. Errors are now rendered as independent notification bubbles, no longer embedded within assistant message cards. tiktoken Real-Time Token Estimation — ReActCore initializes a tiktoken encoder on startup for real-time token counting during streaming. Unknown models fall back to o200k_base . 🔧 Improved Custom Model Name Auto-Complete — The model name field in ModelManager has been upgraded from Select to AutoComplete , allowing users to type custom model names not in the predefined list. Message Block T

I built this project as an entry for the H0: Hack the Zero Stack with Vercel v0 and AWS Databases Hackathon. #H0Hackathon Inspiration Justice moves slowly. I learned that firsthand as my family navigated a legal dispute. What struck me wasn't just the stress — it was that things were quite disorganised. Documents were paper-based or buried somewhere in emails. Updates came through WhatsApp messages. Simple documents took a really long time to draft and send. The system was fragmented and difficult to navigate. Companies like Harvey tackle document drafting well, but legal research tools and LLM wrappers can hallucinate case law, citing judgments that don't exist. I knew that if I was going to build something for this space, it had to be grounded in real, verifiable law. That led me to Laws Africa, which provides structured access to actual South African legislation and court judgments. I also noticed a problem that lawyers experience daily: the mechanical work. Logging into court portals to file a case. Hunting through OneDrive, Google Drive, and Dropbox for the right version of a document. Sifting through hundreds of emails to find something relevant to a matter. Onboarding a new client when the intake form is a PDF someone emails you. These are not AI problems. They are automation problems — and lawyers or their secretaries are doing them manually every single day. That became Agently. What Agently Does Agently is a legal workspace that handles the full lifecycle of a matter, from the moment a client submits an intake form to the day the case closes. Matter Management. Every client engagement lives in a structured matter. Documents, emails, notes, contacts, workflows, and AI conversations are all scoped to it. A lawyer can open a matter and immediately see everything relevant. AI Agent with Real Legal Research. The AI connects to Laws Africa's knowledge bases — South African legislation, court judgments, and municipal law — so research is grounded in actual legal