标签：#webdev

Integrating AI and WordPress: From Idea to Execution, Real-World Challenges, and Practical Workflows The rise of artificial intelligence has fundamentally transformed our definition of an effective website. The era of static websites that merely served as digital placeholders is over. Today, Content Management Systems like WordPress—backed by custom AI capabilities—are evolving into intelligent, automated, and interactive assistants. Below is a detailed overview of our practical experience, architecture, completed implementations, and the technical hurdles we overcame while building custom AI tools for WordPress. 1. Why Integrate AI with WordPress? (Beyond Simple Plugins) Many people view AI in WordPress as limited to off-the-shelf content generation plugins or generic chatbots. However, real value is unlocked when custom AI tools are tailored specifically to a business's unique workflow and ecosystem. Our focus when implementing AI tools relies on three core principles: Complex Process Automation: Reducing human intervention in repetitive tasks, such as automatic categorization, SEO optimization, and metadata generation. Personalized User Experience: Delivering smart, exclusive responses to users based on real-time behavior and stored data. Direct and Secure Connectivity: Seamlessly bridging Large Language Models (LLMs) with the WordPress database and native hooks via APIs. 2. Featured Projects and Case Studies Throughout our development journey, we have brought several practical AI use cases from concept to live production environments: A) Intelligent Content Engine A custom tool integrated into the WordPress admin panel that analyzes article topics to: Generate an optimized SEO structure (Headings and target keywords). Draft initial content alongside image metadata (Alt text and Descriptions). Automatically suggest internal links based on existing posts inside the wp_posts database table. B) Context-Aware AI Support Agents Upgrading basic chatbots into smart agen

I spent last month reviewing JWT implementations across 12 open-source Node.js projects on GitHub — ranging from starter templates with 2k stars to production boilerplates used by teams at real companies. I found the same 6 mistakes in almost every one. None of these projects are bad. The developers are skilled. The mistakes are subtle, copy-paste errors from tutorials that nobody questioned. Here they are. Mistake 1 — The Secret Is Literally "secret" I found this in three separate projects: const token = jwt . sign ({ userId : user . id }, " secret " , { expiresIn : " 1h " }); This secret is in every JWT tutorial on the internet. It is in the jwt.io documentation. It is in the jsonwebtoken README. Developers copy it and forget to replace it. A 6-character ASCII secret has approximately 42 bits of entropy. A GPU cluster cracks it from a dictionary in milliseconds. Generate a real secret here — it takes 3 seconds and produces a 256-bit cryptographically random key. Mistake 2 — jwt.decode() Used in Auth Middleware // DANGEROUS — this is in a production auth middleware const decoded = jwt . decode ( req . headers . authorization . split ( " " )[ 1 ]); if ( ! decoded . userId ) return res . status ( 401 ). send ( " Unauthorized " ); jwt.decode() does not verify the signature. It reads the payload regardless of whether the token is valid, expired, or forged. An attacker can craft any payload they want and it will pass this check. The fix is two characters: jwt.verify() . const decoded = jwt . verify ( token , process . env . JWT_SECRET , { algorithms : [ " HS256 " ] }); Mistake 3 — Algorithm Not Specified in verify() // Missing algorithms option jwt . verify ( token , secret ); Without { algorithms: ['HS256'] } , the library trusts whatever algorithm is in the token's header. An attacker can create a token with alg: none and an empty signature — and jwt.verify() will accept it. Always specify the expected algorithm explicitly. Mistake 4 — Secret Committed to Version Cont

AI agents can reason about the web. But giving an agent unrestricted browser or network access creates a serious authority problem. The obvious solution is to restrict the tools available to the agent. Then I kept running into the opposite problem: Once the tool became sufficiently restricted, it lost many of the capabilities required to complete real work. I wanted both sides: Enough power to crawl, render, navigate, extract, capture, and investigate the web Explicit operator control over origins, credentials, budgets, browser hooks, profiles, and evidence So I built Cockroach Crawler . It is an open-source Node.js and TypeScript toolkit for AI agents, RAG pipelines, documentation indexing, research, QA, and web-data workflows. I connected it to OpenClaw and Codex , and the difference was honestly wild. Instead of giving the agents one narrow search tool, I gave them a bounded web-research layer that could crawl websites, inspect JavaScript applications, extract structured data, process PDFs, take screenshots, generate PDFs, inspect public sources, and return evidence with provenance. And for many public workflows, I did not need to configure a separate API key for every source. GitHub: https://github.com/AjnasNB/cockroach-crawler Documentation: https://cockroachcrawler.com/docs/ npm: https://www.npmjs.com/package/cockroach-crawler What changed after I connected it to OpenClaw and Codex? Before this, the agents could reason well, but their web access was limited. They could answer questions, write code, and work with the context I gave them. But once a task required deeper live-web investigation, I still had to manually combine several tools. After connecting Cockroach Crawler, they could: Crawl public websites Render JavaScript-heavy pages Follow sitemaps Search and map documentation sites Extract readable Markdown Extract structured fields with CSS, XPath, or restricted regular expressions Read local and remote PDFs Generate PDFs Take screenshots Handle bounded c

When ChatGPT, Claude or Perplexity answers a question about your product, it is not consulting a decade of PageRank. It fetches a handful of pages and tries to work out what your site is. That is a very different retrieval problem from classic search, and most sites are accidentally hostile to it. Why sitemaps are the wrong mental model A sitemap optimises for coverage — every URL, every paginated archive, every tag page. That is correct for a crawler with a huge budget and a ranking model to sort the noise afterwards. An LLM landing on your site has neither. It has a limited context window and one shot. If the first thing it ingests is 400 URLs of ?page=17 and /tag/misc , your three genuinely useful guides are buried. llms.txt inverts this. It is a small markdown file at your root that optimises for priority : # Your Product > One-line description of what this actually does. ## Docs - [ Quickstart ]( https://example.com/docs/quickstart ) : Install and first request in 5 minutes - [ API Reference ]( https://example.com/docs/api ) : Every endpoint with request/response examples Two rules make or break it: Every link carries a description. The colon-suffix annotation is what lets a model decide whether to fetch a page. A bare link list is barely better than a sitemap. Omit aggressively. If a page does not answer a question someone would ask, it does not belong. llms-full.txt and the context tradeoff llms-full.txt inlines expanded content rather than linking out, so a model can ingest everything in one request. This is genuinely useful for compact docs — and actively harmful for large sites, where you will blow the context window and get truncated mid-document. Rough heuristic: if your docs exceed roughly 50k tokens, ship llms.txt alone and let models fetch selectively. The part nobody mentions: it rots This is where most implementations quietly fail. You write the file, ship it, and three months later half the descriptions describe features you renamed and two links 4

Every frontend developer eventually reaches the same point. You know React. You know TypeScript. You know how to build components. But then you join a real project. Suddenly the questions are no longer about writing a component — they’re about engineering. How should the project be structured? Where should authentication logic live? When is React Context enough? When should React Query own the data? How do you prevent a codebase from becoming impossible to maintain? What makes a frontend application scalable? How do AI coding tools fit into modern development? These are the questions I kept asking myself while working on frontend applications. The problem wasn’t the lack of information. The problem was that the information was scattered across hundreds of blog posts, GitHub repositories, conference talks, documentation pages, and personal notes. Tutorials Teach Frameworks Modern tutorials are excellent at teaching frameworks. You can easily learn: React Vue Angular Next.js TypeScript But very few resources explain what happens after that. How do experienced teams actually build production frontend applications? How do they organize folders? How do they write maintainable code? How do they review pull requests? How do they optimize performance? How do they scale applications from one developer to twenty? Those are engineering problems — not framework problems. Frontend Engineering Is a Different Skill Writing React code doesn’t automatically make someone a frontend engineer. Frontend engineering includes topics such as: Project architecture Feature-based organization Authentication and authorization API design State management Data fetching strategies Performance optimization Accessibility Error handling Testing CI/CD Monitoring Code quality Documentation Team conventions These subjects rarely live in one place. AI Has Changed the Way We Build Software Another reason I started this project is the rise of AI coding assistants. Learn about Medium’s values Today many de

Many online image converters require users to upload their files to a remote server before processing. For ordinary images this may be acceptable, but for personal photos, screenshots and documents, privacy becomes an important concern. I built a lightweight online image converter that processes images directly in the browser. It currently supports: JPG PNG WebP HEIC GIF SVG BMP TIFF Why browser-based processing? The main goal was to make image conversion simple, fast and privacy-friendly. Because the conversion happens locally: Images are not uploaded to a server Users do not need to create an account There is no installation process Network upload time is avoided Private files remain on the user’s device The basic workflow is simple: Select an image Choose an output format Convert the file Download the result Challenges Browser-based image conversion still has some limitations. Different browsers support image formats differently, especially formats such as HEIC and TIFF. Large images may also consume more device memory during processing. Some format features may not be preserved after conversion. For example, transparency may be lost when converting to JPG, and animated images may become static depending on the selected output format. These limitations need to be handled through clear prompts and error messages.

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. You've probably noticed this if you've tried to fetch a public webpage in the last two years. You write four lines of Python. You get a 403. You add a User-Agent header. You get a 403 with better manners. You spin up headless Chrome and get a challenge page that spins forever. Eventually you go looking at pricing pages for data APIs, where a cheerful landing page offers to sell you back the exact same public HTML for $100 a month. Meanwhile the big labs vacuumed up that same web at a scale none of us will ever match, and now the standard way to read a page programmatically is to pay somebody. The web went from "open by default" to "open, but only if you look like a person holding a mouse." So let's talk about eight open source projects quietly clawing that access back. I've used most of these in anger. Some are brilliant. Quick note on star counts: I mention a few, because they are a decent signal of "somebody else has hit the bugs before you." They are not a signal of maintenance. A repo can have 70k stars and a last commit from 2023. Always check the commit graph before you check the star count. 1. Firecrawl: the one that turned a URL into a prompt What it does: you hand it a URL, it hands you clean markdown. Not HTML with the nav bar and the cookie banner and four newsletter modals. Markdown. Headings, paragraphs, links, done. It also does more than single pages. The crawl endpoint walks a whole site, map gives you a URL inventory without fetching everything, and structured extraction pulls typed JSON out of a page if you describe the shape you want. from firecrawl import Firecrawl app = Firecrawl ( api_key = " fc-... " ) doc = app . scrape ( " https://example.com/docs/getting-started " , formats = [ " markdown " ]) print ( doc . markdown

I wanted to add a background-removal tool to my site's image cluster that stayed true to the 100% client-side processing principle I already use for PDFs and image conversions. The path there was anything but linear: a library dropped over a licensing problem, a carefully chosen model that turned out more limited than expected, and a bug that froze the entire page — not just the tool — during computation. Here's the full build, including the parts that didn't work the first time. The starting problem: what's actually feasible for free? The initial idea was broad: remove backgrounds, and maybe unwanted objects too. The two tasks have very different difficulty levels. Removing objects requires inpainting — plausibly reconstructing the erased area — which in practice still means heavy generative models, impractical to run client-side with good quality on an average device. Removing a background , on the other hand, is a segmentation problem: separating a subject from its surroundings. That has much lighter models available, runnable entirely via WebAssembly with no server involved at all. So: background removal only, object removal shelved for later. The AGPL trap The first library that looked like a perfect fit turned out to be distributed under AGPL , a strong copyleft license. Free to use — but with a real catch for anyone embedding it in a public, closed-source web service: AGPL can require releasing the full source of the project that embeds it, under the same license. "Free for the end user" and "safe to drop into a closed-source commercial product" are two different questions, and it's worth answering the second one before writing integration code, not after deploying it. Before wiring any "free" AI library into a commercial project, check the exact license, not just the price tag. AGPL, GPL, and other strong copyleft licenses are fine for personal or internal tools, risky for a public closed-source product. The fix: switch to Transformers.js — Hugging Face's li

Ich habe einen echten Speedtest in Vanilla JS gebaut (mit Cloudflare API) Kein npm install. Kein React. Kein 200-MB-node_modules-Ordner. Nur HTML, CSS und ~250 Zeilen JavaScript, die deine echte Internetgeschwindigkeit messen. 👉 Live-Demo: dsl.nevik.de/speedtest Warum noch ein Speedtest? Es gibt Speedtest.net, FAST.com und dutzende andere. Warum also selbst bauen? Drei Gründe: Transparenz: Ich wollte genau verstehen, was gemessen wird – und was nicht. Größe: Die meisten kommerziellen Speedtests laden mehrere MB an Tracking-Scripts. Meiner ist eine einzige HTML-Datei mit eingebettetem JS. Kontrolle: Ich kann das Ergebnis direkt gegen den gebuchten Tarif des Nutzers bewerten und eine fundierte Empfehlung geben. Das Ergebnis ist ein Speedtest, der in unter 50 KB ausgeliefert wird, auf jedem Gerät läuft und echte Messwerte liefert – keine Schätzwerte. Die Architektur: Drei Phasen, drei Messungen Ein guter Speedtest misst drei Dinge: Ping (Latenz): Wie schnell kommt ein Datenpaket hin und zurück? Download: Wie schnell kommen Daten bei dir an? Upload: Wie schnell kommen Daten von dir raus? Für alle drei nutze ich die öffentliche Cloudflare-Speedtest-API , die unter speed.cloudflare.com läuft. Cloudflare betreibt eines der größten Edge-Netzwerke der Welt, hat Server in praktisch jedem Land und – ganz wichtig – erlaubt CORS für diese Endpunkte, sodass wir direkt aus dem Browser heraus messen können. Die zwei Endpunkte, die alles tragen: const CF_DOWN = ' https://speed.cloudflare.com/__down?bytes= ' ; const CF_UP = ' https://speed.cloudflare.com/__up ' ; __down?bytes=N liefert exakt N Bytes zurück. __up nimmt einen POST-Body beliebiger Größe entgegen. Das war's. Kein API-Key, keine Rate-Limits, die für unsere Zwecke relevant wären, keine Kosten. Phase 1: Ping messen (ohne WebSocket) Klassische Speedtests nutzen für den Ping oft WebSockets oder RTCPeerConnection -Tricks. Das ist komplex und fehleranfällig. Mein Ansatz: Wir laden einfach einen winzigen Datenblock (1 KB) fünfma

I just wanted to open a CSV file quickly. Instead, I got: Slow spreadsheet apps Online tools that upload my data Way too much friction So I defined a simple goal: Fast and frictionless Fully local (no uploads) Spreadsheet-like experience That’s what I built. What you can do with it Open CSV files instantly (drag & drop, no setup) Search and filter large datasets in seconds Edit data like a spreadsheet Export exactly what you see Why this matters Everything happens locally in your browser: Your data never leaves your device No account required No tracking, no storage Built with client-side JavaScript — no backend involved. Just open, edit, and export. How it works Built with client-side JavaScript — no backend involved. Spreadsheet-Like Editing Click a cell to select it, then press Enter or double-click to start editing. Press Enter again to save the value and move to the cell below. Use Option + Enter on macOS or Alt + Enter on Windows to insert a line break. You can also drag the small fill handle to copy a value across multiple cells. Export the Current View The exported CSV reflects the current table state, including: Search results Sorting order Visible columns Saved cell edits Try it yourself Open a CSV file, edit a few cells, and export it — all without uploading anything. 👉 https://csv-open.github.io/ No signup. No upload. Just works. Handles CSV files up to 25MB Supports multiple languages

As part of my learning journey with Django, I wanted to build a project that would challenge me beyond the basics. I decided to create RecipeHub, a web application where users can create, manage, and share recipes while exploring recipes from other users. The project started from a Django starter template, but I customized it by adding new features, redesigning the interface, and deploying it online. Features RecipeHub allows users to: Register and log in Create, edit, and delete recipes Browse recipes by category Save favourite recipes Upload recipe images Access a personal dashboard Use the application in both light and dark mode The application is fully responsive, making it easy to use on both desktop and mobile devices. Technologies Used I built the project using: Python Django Django Allauth PostgreSQL Tailwind CSS DaisyUI HTMX Vite Gunicorn Render GitHub was used for version control throughout the project. Challenges One of the biggest challenges was deployment. While everything worked locally, deploying to Render required configuring PostgreSQL, environment variables, and static files correctly. I also encountered an issue with uploaded recipe images. Since the application is hosted on Render's free tier, uploaded media is stored on an ephemeral filesystem, meaning uploaded images are lost after redeployment. Learning why this happens gave me a better understanding of the difference between development and production environments. Another challenge was redesigning the dashboards. I wanted them to feel clean and modern instead of looking like a default Django application, so I spent time improving the layout, spacing, and responsiveness. What I Learned This project helped me improve my understanding of: Django project structure Authentication and user management CRUD operations Database relationships Responsive UI design Git and GitHub workflows Deploying Django applications Debugging real-world issues More importantly, it taught me how to troubleshoot proble

How I Built an SSR Valorant Tracker with React, Supabase and Live Esports Data I recently built VALTRAIN , a player-focused Valorant platform that combines a Valorant Tracker, VCT match database and weapon skins explorer. The project started as a simple match history lookup page. It eventually became a much larger SSR application with player statistics, esports schedules, match detail pages, replay discovery, multilingual routes and searchable cosmetic data. The Main Product Areas VALTRAIN is divided into three primary areas. 1. Valorant Tracker The Valorant Tracker accepts a Riot ID and region. It can display: Current rank and RR Recent competitive and unrated matches KDA and combat score Headshot, body shot and leg shot data Competitive RR movement Lifetime performance statistics Individual match details and team compositions One challenge was handling incomplete or delayed data from an external player API. The interface needed useful loading, empty and error states instead of leaving users with an endless spinner. 2. VCT Match Database The VCT esports database stores upcoming and completed matches. Each public match can have: Tournament and stage information Team names and series scores Map-level results Player statistics Recent team form Official replay availability Related matches and internal links The project also includes an original VCT performance report generated from completed match records. 3. Valorant Weapon Skins The weapon skins database allows players to browse skins by collection, weapon type, rarity, price and chroma. The main performance challenge was preventing high-resolution media from slowing down the initial page load. Why I Moved the Site to SSR The original version relied heavily on client-side rendering. That worked for user interaction, but it created several problems: Public pages had limited initial HTML Search engines had to execute JavaScript Metadata was harder to control Dynamic routes occasionally returned weak fallback pages Firs

What happens when 5 parallel API calls hit for an expired JWT at the exact same millisecond. Imagine this: You’ve built a sleek, high-performance React dashboard. The UI is sharp, dark mode is gleaming, components are modularized, and React Query is executing parallel data fetches like a grand symphony. You brew a cup of coffee, open the app after lunch, hit refresh, and… BAM! You are immediately booted back to the Login screen. No warnings, no friendly error toasts—just a cold, ruthless redirect. You check your JWT expiration timer. The access token died 5 seconds ago, but your refresh token is valid for another 14 days. So why on earth did your app decide to kick you out like an uninvited party crasher? Welcome to the chaotic nightmare of Token Refresh Race Conditions in Axios Interceptors . In this article, we’ll walk through how parallel React queries can accidentally DDOS your own backend, why standard interceptor tutorials fail in production, how we built a promise-queue lock mechanism to solve it, and the subtle "gotcha" lurking in simple error detail checks that almost broke everything anyway. 1. The Problem: The Dashboard Stampede When a user logs into our app and opens the main dashboard, React Query triggers a stampede of concurrent API requests: GET /api/teams/users/ (Fetch team members) GET /api/teams/addresses/ (Fetch locations) GET /api/auth/profile/ (Fetch user profile) GET /api/auth/activity/recent/ (Fetch activity log) GET /api/notifications/ (Fetch unread alerts) Under normal circumstances, all five requests ride happily on the same valid Bearer <access_token> HTTP header. React App ---------------------------------------------> Django Backend GET /users/ [Bearer valid] ---> 200 OK GET /locations/ [Bearer valid] ---> 200 OK GET /profile/ [Bearer valid] ---> 200 OK The Ticking Time Bomb Fast forward 15 minutes. The short-lived access token expires. The user clicks on the "Analytics" tab. All 5 queries trigger at the exact same millisecond ( T = 0ms

When building a website, choosing a button design can take more time than expected. You may want something simple, soft, colorful, dark, outlined, or slightly unusual—but comparing many styles usually means repeatedly editing CSS and refreshing the page. To make that process easier, I created a browser-based button showcase. Try It Online You can use it directly from the following page: https://uni928.github.io/Uni928PublicHTMLs/index78.html There is nothing to install. Open the page, browse the available designs, and choose a button you like. Many Button Styles in One Place The page includes a wide range of button designs, including: Light and subtle buttons Solid-color buttons Dark buttons Gradient buttons Outline buttons Rounded and pill-shaped buttons Buttons with icons More experimental designs The buttons are displayed as actual interactive elements, so you can compare their hover, focus, and pressed states directly in the browser. Click a Button to Copy It The main feature of this tool is its copy workflow. Clicking a button copies a minimal HTML example for that design. This makes it easier to take only the button you need instead of copying the entire showcase page. The generated example includes the necessary HTML and CSS, so it can be pasted into a new file and tested immediately. Copy Features for Faster Comparison The site also includes additional copy-related features to make browsing a large number of designs more convenient. You can: Copy a button directly by clicking it Review the generated code Copy frequently used button types from the quick-copy panel Receive visual feedback after a successful copy Use copied examples as standalone HTML files This is especially useful when you want to compare several designs before deciding which one to use in a project. Useful for Prototypes and Small Projects This tool is intended for situations where you need a usable button quickly, such as: Creating a prototype Building a small static website Testing a landi

The Challenge Rendering a complex 153-concept-node, 1,200-edge mythic relationship topology for mobile devices without triggering main-thread layout thrashing or heavy client-side JavaScript execution. The Technical Approach Build-Time D3 Force Layout Computation : Pre-computing node coordinates and physics simulation during the Astro static build step. Zero-Runtime SVG Pre-rendering : Outputting the rendered topology as inline SVG with CSS design tokens, preserving 60 FPS scrolling on mobile. Canonical Lore Data Architecture : Structuring 153 canonical concept nodes across Tang Dynasty exorcistic texts ( Nuo rituals) and Black Myth: Zhong Kui motifs. Check out the live interactive relationship map: Black Myth Lore & Concept Map Official website: blackmyth.game

If you've been anywhere near AI job postings lately, you've seen the title: Forward-Deployed Engineer. Sometimes it's "Deployment Engineer" or "Solutions Engineer" or "Applied AI Engineer." Sarvam is hiring more than a hundred of them. Palantir built a large part of its business on them. OpenAI, Anthropic, and a long tail of AI startups are all competing for the same people. And yet, if you ask five engineers what an FDE is , you'll get five different answers. Let's fix that. The one-sentence definition A Forward-Deployed Engineer is an engineer who is deployed forward — to the customer — to take a powerful but generic product and make it solve that specific customer's real problem. The word "forward" is borrowed from the military sense: you're not back at HQ, you're out in the field where the actual work happens. For an FDE, "the field" is the customer's environment — their data, their workflows, their constraints, their stakeholders. Think of it as part engineer, part consultant, part founder-in-the-field. You build, but you build for someone specific, sitting right next to you . Why AI companies need this role so badly right now Here's the thing about modern AI products: they're incredibly powerful and incredibly generic . A foundation model or an AI platform can do a thousand things — but an enterprise customer doesn't want a thousand things. They want their one problem solved, with their data, inside their systems, respecting their compliance rules. That gap — between "powerful generic product" and "solves my specific problem" — is exactly where deals are won and lost. And it's too custom, too messy, and too high-stakes to solve with documentation alone. So AI companies send an engineer to close the gap in person. That engineer is the FDE. One strong FDE can be the difference between a seven-figure enterprise contract signing or walking away. That's why the role is: High-leverage — your work directly moves revenue Well-paid — companies pay up for people who can

As developers, we end up needing to convert or resize a file constantly — a screenshot that needs to be a PNG for docs, an asset that needs to hit exact social-preview dimensions, a PDF that needs merging before a demo. Reaching for ffmpeg , imagemagick , or a paid SaaS every time is overkill for a one-off task. Here are two free, no-signup web tools that cover most of that day-to-day friction. 1. FreelyConvert — general-purpose file conversion freelyconvert.com A browser-based converter covering documents, images, video, and audio: 500+ formats — PDF, DOC/DOCX, images (JPG/PNG/GIF/BMP/SVG/WEBP), video (MP4/AVI/MOV/MKV), audio (MP3/WAV/FLAC/AAC), spreadsheets, presentations No account/signup — upload, convert, download Batch conversion for multiple files in one pass Auto-delete after 24 hours and SSL encryption in transit Useful specifically for: PDF ↔ image conversions ( pdf-to-jpg , images-to-pdf ) Merging PDFs without touching a CLI tool Compressing video/audio for quick sharing Quick image compression when you don't want to script it 2. ImageResizer.dev — client-side image resizing/conversion imageresizer.dev This one's worth calling out for devs specifically: it runs entirely client-side via the Canvas API — nothing is uploaded to a server. That's a real difference if you're resizing anything you'd rather not send off-device, and it also means it's fast (no upload/download round trip). Features: Exact dimension presets for social platforms (Instagram, LinkedIn, X/Twitter, YouTube, TikTok, Pinterest, WhatsApp) — handy for generating OG images or social preview assets without hardcoding dimensions yourself Format conversion across JPG, PNG, WebP, AVIF, BMP, GIF, SVG Crop, flip, upscale , plus bulk resize/compress for batches Aspect-ratio locking to avoid distortion No account, no watermark Good fit for generating og:image assets, favicon prep, or resizing screenshots for a README without spinning up a script. Why bother mentioning these Neither requires an accoun

A headless content API has two kinds of callers, and it's tempting to secure them the same way. That's the mistake. There's a human logging into an admin UI to edit content, and there's a machine — a website, a build step — pulling published content through a delivery endpoint. They authenticate with different credentials, and those credentials have opposite properties. Treat them identically and you either make the machine path painfully slow or the human path dangerously weak. I built a small headless content API ( Depot ) partly to get this boundary right. Here's the reasoning. The two credentials A session proves "this human is logged in." Short-lived, rides in an httpOnly cookie, checked on management routes. A delivery token proves "this machine may read this account's published content." Long-lived, sent as a Bearer header, checked on every public read. Two auth surfaces, kept explicit: /** * - requireUser() — admin session (httpOnly JWT cookie) for the management API. * - requireToken() — a `depot_…` bearer token for the public delivery API. */ Why they get different hashing Here's the part people get wrong. Both credentials get stored as hashes — never plaintext — but not the same kind of hash , and the reason is entropy. Passwords are low-entropy. Humans pick summer2024 . An attacker who steals your DB will brute-force guesses against the stored hashes, so you want hashing to be deliberately slow — that's exactly what bcrypt's cost factor buys you: import bcrypt from " bcryptjs " ; const ROUNDS = 10 ; // deliberately slow — the point is to resist brute force export function hashPassword ( plain : string ): Promise < string > { return bcrypt . hash ( plain , ROUNDS ); } export function verifyPassword ( plain : string , hash : string ): Promise < boolean > { return bcrypt . compare ( plain , hash ); } Tokens are high-entropy. I generate them — 32 random bytes — so there's nothing to guess. A stolen hash can't be reversed by brute force because the keyspace i

Last month I set out to build a new product, and after a full week I had shipped exactly zero features. Not because I was slow. Not because the work was hard. Because before anyone could write a single line of business logic, my team had to re-decide a dozen things our company should have settled years ago . I've been a full-stack developer for almost five years — long enough to have worn most of the hats: WordPress developer, QA, frontend, backend, solution architect, founding engineer. I've built more than twenty web applications and a handful of mobile ones. Some of them I'm genuinely proud of: systems that poll PLCs every five seconds to watch over industrial equipment, a cybersecurity dashboard that mapped attacks across the world in real time using tree-based graphs, an OTT platform that streamed live events — including FIFA — to millions of concurrent viewers. Today I work on enterprise supply-chain finance software. So when I tell you the hardest part of that new product had nothing to do with code, I know how it sounds. Let me explain. The week that disappeared The experiment was ambitious on purpose. I wanted to build the new application — eventually a microfrontend inside a larger enterprise platform — but I didn't want to write most of it myself. I wanted Claude Code to implement while I acted as the architect: review, test, challenge, refine, repeat. That part worked. The AI wasn't the bottleneck. The bottleneck was everything that came before the first feature. Should we use React? Vite? Keep Create React App because the parent app still runs it — or migrate both? How does the parent consume the child, and does local development still work? Does authentication still work? Does routing? Do we adopt TypeScript when the existing app doesn't, knowing that splits one product into two standards? The app also had to feel native to the existing product — same spacing, typography, colors, interactions — except the company had a component library, not a design s

You have a row in Postgres. You want that same row in MongoDB — not tonight in a batch job, but the instant it changes. And next month you'll want it in Redis too, and maybe POSTed to some webhook. Today that's a Kafka cluster, a Debezium connector, a sink connector, a schema registry, and a weekend. For a job that is, at its heart, one sentence: a source → one or more destinations → kept in sync. Syncle is an open-source tool that does exactly that sentence, and nothing you didn't ask for. Connect your databases, draw a bridge from a source to one or more destinations, and the moment a row changes in the source it's written to every destination you linked. Any engine to any engine — PostgreSQL · MySQL/MariaDB · SQLite · MongoDB · Redis — plus HTTP endpoints when you need them. This post is a tour of what it does and, for the curious, how it's built. The core idea: a bridge A bridge reads rows from a source and writes each one to its destinations . A destination is either: another database — the headline feature. Postgres → MongoDB, MySQL → SQLite, MongoDB → Redis. One bridge can fan out to several databases at once, and bridges can chain (A → B → C). an HTTP endpoint — POST/PUT/PATCH each row to a URL with a payload you design, for feeding a service instead of a database. The interesting part isn't that it copies data — plenty of things copy data. It's the guarantees around how . No duplicates, ever Every database write is an idempotent upsert , keyed by columns you choose. So replays, retries, and at-least-once redeliveries never double-write. Under the hood each engine does it with its own native atomic operation: Engine Upsert PostgreSQL / SQLite INSERT ... ON CONFLICT MySQL INSERT ... ON DUPLICATE KEY UPDATE MongoDB updateOne(filter, ..., { upsert: true }) Inserts, updates, and deletes all propagate — a delete routes to a keyed delete on each target. Missing table? It builds it If the destination table or collection doesn't exist, Syncle creates it from the sou