标签：#webdev

Feeling overwhelmed by the constant flood of new AI features, MCP servers, and agentic platforms? In a world full of tech noise, it's easy to get exhausted trying to keep up. I just watched an incredible video by Burke Holland where he strips away the hype and shares 10 highly practical, concrete strategies to make AI coding tools actually work for your daily workflow. If you want to stop overcomplicating your setup and start getting better production results, here is the ultimate breakdown. The 10 AI Coding Tips (TL;DR Summary) Huge shoutout and credit to Burke Holland for these insights: 1) Use Visual Studio Code to maximize your environment with powerful themes, extensions, and inline terminal chats. 2) Always turn on YOLO / "allow all" mode so your AI agent can execute commands seamlessly without breaking your flow with constant permission prompts. 3) Never run agents on your own machine , choosing instead to isolate them via remote SSH or dev containers so YOLO mode is completely safe. 4) Prototype and mock everything upfront to map out UI design languages and logic before implementing code. 5) Always plan and grill by leveraging interactive planning modes to answer critical edge-case questions before generating file. 6) Rubber duck your plans across different AI model families (like combining Claude and GPT) to cross-verify solutions and expose blind spots. 7) Utilize autopilot and sub-agents to delegate parallel tasks and route smaller, faster models where appropriate. 8) Use built-in browser tools to visually review live previews and directly prompt structural or stylistic adjustments. 9) Run iterative multi-model reviews on autopilot to catch hidden bugs and refine code quality until reaching a clear point of diminishing returns. 10) Learn from your session history using tools like Chronicle to analyze your prompting habits and continually optimize how you interact with the agent. 📚 Recommended Reading If you are looking to dive deeper into perfecting your

Authentication is broken at its foundation - not just inconvenient. Passwords are shared secrets: hand one to a server, and you have instantly doubled your attack surface. With over 5 billion passkeys now active globally and Google reporting a 99.9% lower account compromise rate compared to passwords, the industry has already moved. This guide covers how passkeys work cryptographically, how to implement them in TypeScript, and the pitfalls to avoid before going to production. Why Passwords Are Structurally Broken The core issue isn't that users pick weak passwords - it's that passwords require a shared secret stored on both sides. The Verizon 2025 DBIR found that 22% of all breaches started with stolen credentials, and 88% of web app attacks relied on them. In 2024, infostealer malware alone harvested 548 million passwords. Adding 2FA helps but doesn't fix the root problem: SMS codes are SIM-swap targets, and TOTP tokens can be phished in real time by proxy attackers who replay codes within their validity window. What Passkeys Actually Are A passkey is a credential built on public-key cryptography, standardized through the WebAuthn spec and FIDO2. When you register, your device generates a public-private key pair - the private key stays locked in hardware (Secure Enclave, StrongBox, or a hardware key), and the server only receives the public key. At login, the server sends a random challenge, your device signs it with the private key after biometric or PIN verification, and the server verifies the signature. No secret is ever transmitted. This eliminates credential stuffing, server-side breach exposure, and phishing - because passkeys are cryptographically bound to a specific origin domain. The Cryptography Worth Understanding The standard algorithm is ES256 - ECDSA with the P-256 curve and SHA-256. Each credential is tied to a specific relying party ID (your app's domain). A passkey created for yourapp.com cannot be used on yourapp-phishing.com because the origin i

Your password bar goes from "weak" to "strong" when you add characters. Have you ever wondered how React 'remembers' your inputs? 'State' is your answer. A state remembers what input you added. Assume you are typing your name "John", initial state is the blank slate (starting value, like empty input, counter at zero, or an empty whiteboard) in the input bar, whenever you add a new letter, a function named 'setState' is called to change the state from "" (empty input bar) to "J", then again to "Jo", again to "Joh", etc... And following the setState, React automatically re-renders the UI. Think of re-rendering as erasing everything and re-writing the UI with the new state. Initial state was "", then setState updates it from "" to "J". Following that, React automatically erases the first UI and then it will build a new UI with the new state. Why not just use a variable? You might be thinking, "Why don't just use variables and change them whenever you want it?", and you might do that, but the value only changes in your codebase, but the UI will still show the first value. (and that defeated the purpose) What is [state, setState] concept? const [state, setState] = useState('placeholder') is the basic syntax. useState provides an array of ['current-state', 'function to change state']. It is destructured to the two values (state = 'current-state' and setState = 'function to change state'). When you enter an input, the function is called and the 'current-state' will be updated to the 'new-state'. How to use it To use useState follow these two simple steps: Import useState from 'react' import { useState } from 'react'; Declare it (for example to input age): const [age, setAge] = useState(20); where, 'age' is current state. 'setAge' is the function that will create the new state. 20 is the placeholder. Now try it yourself! Open your React project and add a counter using useState. Watch the UI update every time you click.

I run Convertify , a free image converter built on Rust and libvips. Last week I decided to stop guessing about format performance and actually measure it. I took 50 real images (26 PNGs, 24 iPhone HEIC photos), ran 17 conversions through the production pipeline, and recorded every file size and encode time. Some results confirmed what everyone says. Others did not. The three results that surprised me 1. Converting HEIC to JPG makes files 14% bigger , not smaller. This one hurt. "Convert iPhone photos to JPG" is probably the most common advice on the internet. But HEIC wraps the HEVC codec, which compresses roughly 2x better than JPEG. Going from a better codec to a worse one means the file grows. Every time. If you actually want smaller iPhone photos: HEIC to WebP saves 43%, HEIC to AVIF saves 57%. 2. AVIF encodes 7x slower than WebP for 10% more compression. AVIF Q63: 55 KB, 1.30s per image. WebP Q80: 61 KB, 0.19s per image. That is a 10% size difference for a 7x speed penalty. For a single hero image, nobody cares. For a batch pipeline processing thousands of product photos, that is the difference between 3 minutes and 21 minutes. 3. PNG at 600 DPI is smaller than PNG at 300 DPI when rasterizing PDFs. This was the weirdest one. I was benchmarking PDF-to-image and noticed PNG output shrank from 2,221 KB at 300 DPI to 1,660 KB at 600 DPI. I spent an hour convinced I had a bug. Turns out it is a real property of PNG encoding. Higher DPI renders smoother gradients between adjacent pixels, and PNG's prediction filters (Paeth, sub, up) compress smooth gradients dramatically better than the sharp edges you get at lower resolutions. Not a bug. Just PNG being PNG. The quick reference table Conversion Size change Speed JPG to WebP Q80 -64% 0.19s JPG to AVIF Q63 -68% 1.30s PNG to WebP Q80 -92% 0.21s PNG to JPG Q85 -86% 0.07s HEIC to JPG Q85 +14% 1.90s HEIC to WebP Q80 -43% 5.64s HEIC to AVIF Q63 -57% 14.52s WebP to JPG Q85 +60% 0.09s AVIF to JPG Q85 +80% 0.15s What I actual

Part 2 of a beginner-friendly series on learning Python from scratch. In Part 1 , we installed Python, wrote our first program, and learned the syntax rules that hold everything together. Now it's time to start storing and working with information — which means variables and data types. What is a Variable? A variable is a name that points to a value stored in memory. Think of it as a labeled container you can put something into, and refer back to later by name. name = " Ramesh " age = 25 Unlike many other languages, Python doesn't need you to declare a variable's type ahead of time. You just assign a value with = , and Python figures out the type on its own. This is called dynamic typing . x = 5 # x is an integer x = " hello " # now x is a string — totally legal in Python This flexibility is convenient, but it also means you need to be a little more careful — Python won't stop you from changing a variable's type halfway through your program, even if that wasn't your intention. Variable Naming Rules Python is strict about how variable names can look: Must start with a letter or an underscore ( _ ) — never a number. Can only contain letters, numbers, and underscores. Cannot be a Python keyword ( class , for , if , etc.). Are case-sensitive — age , Age , and AGE are three different variables. age = 25 # valid _age = 25 # valid age2 = 25 # valid 2 age = 25 # invalid — cannot start with a number my - age = 25 # invalid — hyphens aren't allowed Naming conventions Python's style guide (PEP 8) recommends snake_case for variable names — lowercase words separated by underscores: first_name = " Ramesh " total_score = 95 Assigning Multiple Variables Python lets you assign several variables in a single line, which keeps code compact and readable. # One value to multiple variables x = y = z = 10 # Multiple values to multiple variables name , age , city = " Ramesh " , 25 , " Chennai " Data Types in Python Every value in Python belongs to a data type, which determines what kind of

The next attempt was the standard Maps URL: window . open ( `https://maps.google.com/maps?daddr= ${ lat } , ${ lng } ` , ' _blank ' ); This opens Maps, but in the browser — not the app. And it shows the route preview, not turn-by-turn navigation. What worked: Android Intent URLs Android supports a special URL scheme that tells Chrome to launch a native app directly: window . location . href = `intent://navigation/now?ll= ${ lat } , ${ lng } &title=Next+stop#Intent;scheme=google.navigation;package=com.google.android.apps.maps;end` ; Breaking it down: intent:// — tells Chrome this is an Android intent navigation/now?ll=${lat},${lng} — opens Maps in navigation mode, starting immediately #Intent;scheme=google.navigation — the URI scheme to use package=com.google.android.apps.maps — the target app package end — closes the intent syntax This opens the Google Maps app directly and starts turn-by-turn navigation automatically — no extra taps needed. It also works with Android Auto. The full function export function openNavigation ( destination : { lat : number ; lng : number }): void { window . location . href = `intent://navigation/now?ll= ${ destination . lat } , ${ destination . lng } &title=Next+stop#Intent;scheme=google.navigation;package=com.google.android.apps.maps;end` ; } Call it on any user gesture (tap, click) and it works without being blocked by the browser. The app The full PWA is open source if you want to see the context: 🔗 GitHub repo 🌐 Live app Built with React + TypeScript + Vite + Dexie.js + @vis .gl/react-google-maps. If you're building a PWA that needs to hand off to Google Maps navigation on Android, this intent URL is the cleanest solution I found. Hope it saves you the hour I spent figuring it out.

How we extract, translate, and reconstruct entire ebooks with Python while preserving every detail At LectuLibre, we built a service that translates entire books using large language models. Our users upload EPUB files, and our backend pipeline parses them, extracts the text, sends it to an LLM for translation, and then rebuilds the EPUB with the translated content—all while preserving the original formatting, images, and metadata. This sounded straightforward until we looked inside a real EPUB. EPUB is essentially a ZIP file containing a structured set of XHTML, CSS, and XML files. The content.opf file defines the reading order (spine), metadata, and manifest. The toc.ncx holds the table of contents. The actual text lives in XHTML documents, often split per chapter. To translate a book, we needed to: 1) reliably parse the EPUB, 2) locate all translatable text, 3) send it chunk by chunk to the LLM, and 4) rebuild the EPUB with the translated text while keeping every byte of the formatting intact. The Problem with Off-the-Shelf Libraries We initially reached for ebooklib , the most popular Python library for EPUB manipulation. It worked great for simple EPUBs—until we threw a few hundred real-world files at it. We quickly hit issues: Metadata loss : ebooklib didn’t fully preserve custom metadata or namespace-prefixed properties in the OPF. Namespace handling : When modifying XHTML, it could strip or mangle xmlns attributes, breaking rendering on some devices. TOC and spine sync : After rebuilding, the table of contents and spine often got out of sync unless we manually repaired them. Large files : Processing a 200‑chapter book consumed surprising memory because ebooklib loaded everything at once. We could have used a heavyweight tool like Calibre’s command-line interface, but that introduced external dependencies and wasn’t as programmatically flexible. Instead, we decided to stick with ebooklib for high-level book structure and augment it with lxml for precise XML c

How AI Will Shape the Technology Industry in 2027 We're roughly 6 months out from 2027, and the signals are already converging: AI is not coming — it has arrived, and the next wave will be fundamentally different from everything that came before it. For developers and tech professionals, 2027 isn't a distant horizon. It's the next major inflection point to prepare for now. Here's what the research, analysts, and industry leaders are saying about what's ahead. From General-Purpose to Task-Specific: The Enterprise AI Shift One of the clearest signals comes from Gartner (April 2025): by 2027, organisations will use small, task-specific AI models three times more than general-purpose large language models. The era of "one model to rule them all" is already ending at the enterprise level. Companies are learning that a fine-tuned, domain-specific model trained on their proprietary data consistently outperforms a generic LLM on their specific workflows. Faster, cheaper, more accurate, and harder for competitors to replicate. For developers, this has real implications: Skills in fine-tuning, RAG (retrieval-augmented generation), and model evaluation become more valuable than prompt engineering alone The ability to build and maintain internal AI pipelines on private data will be a core engineering competency Generic API integrations to OpenAI or Anthropic get replaced — or layered under — proprietary model infrastructure The companies building and maintaining these specialised models will have durable competitive advantages. The ones that don't will be running on shared infrastructure that their competitors can access equally. The Macroeconomic Wake-Up Call: AI Hits GDP in 2027 Goldman Sachs projects that AI may start to meaningfully boost US GDP in 2027 — marking the first measurable macroeconomic signal of the current AI wave. Paired with estimates that ~25% of tasks in advanced economies could be automated by 2027 (10–20% in emerging markets), the scale of workforce restr

AI isn't coming for your job. It already showed up, merged its first PR, and doesn't need a code review. The question developers keep dancing around — but rarely say out loud — is this: If GitHub Copilot, Cursor, and Claude can do what a junior dev does in a fraction of the time, what happens to junior devs? And more uncomfortably: what happens to mid-level devs in three years? The Uncomfortable Data Points This isn't speculation. It's already showing up in hiring data. Entry-level developer roles are contracting. Stanford's Digital Economy Lab (2025) found measurable decline in entry-level employment in AI-exposed roles — and software development is one of the most exposed. One senior dev + AI tools = the output of a small team. Brynjolfsson, Li & Raymond (NBER, 2023) showed generative AI productivity gains that compress what used to require multiple headcount into one. Goldman Sachs (2023) estimated significant white-collar labour market exposure — knowledge workers, not factory workers, are the primary target this time. This isn't the loom replacing weavers. It's the IDE replacing the person using the IDE. The Counter-Argument (And It's Not Weak) Here's where it gets interesting — because the doomsayer take isn't the whole story either. Every major technology wave destroyed jobs and created more than anyone predicted: The ATM didn't eliminate bank tellers — it lowered branch costs, banks opened more branches, teller roles increased for a decade The spreadsheet didn't kill accountants — it created an entire industry of financial analysts The internet didn't destroy publishing — it exploded the number of people who could publish The argument: AI raises developer productivity so dramatically that it expands the total addressable market for software. More products get built. More tools get created. More companies can afford to build what previously required a $500k engineering team. More demand for developers, not less. Where It Gets Complicated for Devs Specifically

If you've been following the AI market lately, you already know the headline numbers: DeepSeek V4 costs about 3% of what GPT-4o charges per token. GLM-4 runs benchmarks competitive with GPT-4 at roughly one-twentieth the price. Qwen delivers multilingual performance that rivals Claude for a rounding error in your cloud bill. The spreadsheets look incredible. The problem is actually using these models. Signing up for each provider means navigating Chinese-language dashboards, topping up separate wallets, managing six different API key formats, and dealing with SDKs that don't follow any consistent convention. Most developers give up after the second integration. That friction is why, despite the economics being objectively absurd in 2026, most teams still default to a single Western provider and eat the cost. AIWave exists to kill that friction. One API key. One endpoint. Fifty-plus models across eight Chinese labs, all speaking standard OpenAI-compatible format. Zero code changes to switch between DeepSeek, GLM, Qwen, MiniMax, and everything else. This post covers how the platform works under the hood, what the request lifecycle looks like, and how to integrate it in any language that can speak HTTP. The Fragmentation Problem, Quantified Before getting into the solution, here's what the Chinese LLM landscape actually looks like as of June 2026: Provider Flagship Model API Format Auth Method SDK Language DeepSeek V4-Pro Custom (DS format) Bearer token + signature Python, JS Zhipu GLM-4.5 OpenAI-compatible-ish JWT with expiry Python, Java Alibaba Qwen-3-Max DashScope (Alibaba) AK/SK + HMAC Python, Java, Go MiniMax MiniMax-Text-01 Custom REST API Key + Group ID Python Moonshot Kimi-K2 OpenAI-compatible API Key Python, JS Baidu ERNIE 4.5 Qianfan (Baidu) OAuth 2.0 Client Cred Python ByteDance Doubao-Pro Ark (Volcengine) IAM AK/SK + SigV4 Python, Go 01.AI Yi-Lightning OpenAI-compatible API Key Python Eight providers, seven different authentication schemes, four distinct A

If you've been following the AI market lately, you already know the headline numbers: DeepSeek V4 costs about 3% of what GPT-4o charges per token. GLM-4 runs benchmarks competitive with GPT-4 at roughly one-twentieth the price. Qwen delivers multilingual performance that rivals Claude for a rounding error in your cloud bill. The spreadsheets look incredible. The problem is actually using these models. Signing up for each provider means navigating Chinese-language dashboards, topping up separate wallets, managing six different API key formats, and dealing with SDKs that don't follow any consistent convention. Most developers give up after the second integration. That friction is why, despite the economics being objectively absurd in 2026, most teams still default to a single Western provider and eat the cost. AIWave exists to kill that friction. One API key. One endpoint. Fifty-plus models across eight Chinese labs, all speaking standard OpenAI-compatible format. Zero code changes to switch between DeepSeek, GLM, Qwen, MiniMax, and everything else. This post covers how the platform works under the hood, what the request lifecycle looks like, and how to integrate it in any language that can speak HTTP. The Fragmentation Problem, Quantified Before getting into the solution, here's what the Chinese LLM landscape actually looks like as of June 2026: Provider Flagship Model API Format Auth Method SDK Language DeepSeek V4-Pro Custom (DS format) Bearer token + signature Python, JS Zhipu GLM-4.5 OpenAI-compatible-ish JWT with expiry Python, Java Alibaba Qwen-3-Max DashScope (Alibaba) AK/SK + HMAC Python, Java, Go MiniMax MiniMax-Text-01 Custom REST API Key + Group ID Python Moonshot Kimi-K2 OpenAI-compatible API Key Python, JS Baidu ERNIE 4.5 Qianfan (Baidu) OAuth 2.0 Client Cred Python ByteDance Doubao-Pro Ark (Volcengine) IAM AK/SK + SigV4 Python, Go 01.AI Yi-Lightning OpenAI-compatible API Key Python Eight providers, seven different authentication schemes, four distinct A

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