标签：#webdev

In Chapter 2 we wrote our first tests and hit two bugs. Before we add more, we need the one skill everything else rests on: finding elements reliably . Get this right and your tests survive redesigns; get it wrong and they break every sprint. Code for this chapter is tagged ch-03 in the repo: https://github.com/aktibaba/playwright-qa-course — see src/tests/ui/locators.spec.ts . Locate the way a user perceives The brittle instinct is to grab elements by their structure — CSS classes, nth-child , XPath. All of that changes the moment a developer touches the markup. Playwright's recommended locators instead target what a user (and a screen reader) perceives: the role, the label, the visible text. Use them in this order of preference: getByRole — the role + accessible name (covers the vast majority of cases) getByLabel — form fields by their <label> getByPlaceholder — inputs without a label getByText — non-interactive content getByTestId — a deliberate data-testid , only when nothing semantic fits Here's the top of the priority list, live against Inkwell's home page: import { test , expect } from " @playwright/test " ; test ( " prefer role-based locators over CSS " , async ({ page }) => { await page . goto ( " / " ); await expect ( page . getByRole ( " button " , { name : " Global Feed " })). toBeVisible (); await expect ( page . getByRole ( " link " , { name : " Sign up " })). toBeVisible (); await expect ( page . getByRole ( " heading " , { name : " inkwell " })). toBeVisible (); }); getByRole("button", { name: "Global Feed" }) asserts two things at once — that an element with the button role exists and that its accessible name is "Global Feed". If a dev swaps the <div class="feed-btn"> for a real <button> , this locator keeps working; a CSS selector wouldn't. Strict mode is your friend Playwright locators are strict : if a locator matches more than one element, the action throws instead of silently picking the first. That catches ambiguous tests before they pick the

In Chapter 1 we argued that automation fails from a lack of structure , not a lack of tooling — and we met Inkwell , the dockerized app we test against. Now we install Playwright + TypeScript and write our first UI and API tests, deliberately simple. We'll also hit two real bugs along the way. I'm leaving them in on purpose — they're the exact problems the framework we build later is designed to prevent. Code for this chapter is tagged ch-02 in the repo: https://github.com/aktibaba/playwright-qa-course Before you start Make sure Inkwell is running (from Chapter 1): cd sut docker compose up -d --build --wait # web :3000, api :3001/api Install Playwright + TypeScript From the repo root: npm install -D @playwright/test typescript @types/node npx playwright install chromium That's it — Playwright bundles its own test runner, assertion library, and TypeScript support. No extra config to make .ts test files work. A minimal config — not a framework yet Two small files keep us honest from day one. First, never hard-code URLs in tests — put them in one place: // src/utils/env.ts export const env = { /** Inkwell SPA (nginx) — the UI base URL. */ webURL : process . env . WEB_URL ?? " http://localhost:3000 " , /** Inkwell API base, including the /api prefix. */ apiURL : process . env . API_URL ?? " http://localhost:3001/api " , } as const ; Then the Playwright config. We split tests into two projects — a fast api project and a Chromium ui project — because API tests need no browser and should run in milliseconds: // playwright.config.ts import { defineConfig , devices } from " @playwright/test " ; import { env } from " ./src/utils/env " ; export default defineConfig ({ testDir : " ./src/tests " , fullyParallel : true , reporter : " list " , use : { trace : " on-first-retry " , screenshot : " only-on-failure " }, projects : [ { name : " api " , testDir : " ./src/tests/api " , use : { baseURL : env . apiURL } }, { name : " ui " , testDir : " ./src/tests/ui " , use : { baseURL : e

Last weekend I started building SiteGrade — a free instant SEO audit tool that gives any website an A–F letter grade and the top fixes ranked by impact. I just launched it. This post is the build log: the architecture decisions that worked, the ones that didn't, and the gotchas you'd save time knowing about. If you're considering building a similar audit/scanner tool, or just want to see what a 2026 Next.js + Supabase + Stripe stack looks like in practice, this should be useful. Why I built it I got tired of family and friends asking me "how's the SEO on my website?" and not having a good answer to send back. Every existing tool I tried either cost $99+/month (Ahrefs, Semrush) or threw 200 metrics at people who just wanted to know if their site was OK. The wedge I built around: one letter grade, three top fixes, plain English, no signup. The paid tier ($29/mo) re-audits weekly and emails the report so non-technical users can track improvements as their developer makes them. The stack Nothing exotic. Everything is the obvious choice for a 2026 indie SaaS, which is the whole point — boring stack means I spent zero time fighting infrastructure and 100% of my time on the actual audit logic. Next.js 14 App Router — frontend + API routes in one repo Supabase — Postgres + auth + RLS + file storage, EU-hosted for GDPR Stripe — subscriptions + Billing Portal + webhooks Resend — transactional email (audit reports, weekly reports, Supabase auth via Custom SMTP) Vercel — hosting + cron jobs for the weekly re-audit cheerio — HTML parsing for the audit checks Google PageSpeed Insights API — Core Web Vitals + mobile performance Total monthly infrastructure cost at zero traffic: ~$0 (everyone on free tiers). At 100 paying customers it'd still be under $30/mo. The audit logic — what 15 checks look like in code Each audit runs 15 checks and produces a score from 0-100, then maps that to a letter grade (A: 90+, B: 75+, C: 60+, D: 45+, F: below 45). The checks are structured as pure fu

Welcome to the first chapter of a hands-on course where we build a production-grade Playwright + TypeScript automation framework — covering both API and UI testing — against a real, dockerized web app you run on your own machine. This isn't a "here are 5 Playwright tips" post. By the end of the series you'll have a framework with the same shape a real QA team ships: layered, parallel-safe, authenticating once and reusing the session, seeding data through the API and verifying it in the UI, and running sharded in CI. We build it one chapter at a time, and every line of code is in a public repo you can clone and run. Who this is for You can read basic JavaScript (variables, functions, async/await ). That's it. No Playwright or TypeScript experience required — we introduce both from zero. You've maybe written a few UI tests before and felt them turn into a tangle. This course is about the structure that prevents that. How the course works Each chapter is one post in this series, in order. Read them top to bottom. There's a companion GitHub repo — the single source of truth for all code: 👉 https://github.com/aktibaba/playwright-qa-course The repo carries one git tag per chapter ( ch-01 , ch-02 , …) so you can check out the exact state of the code at any point and compare it to what you have. Every chapter ends with what changed, so you can either build along or just read the diff. Get the code and run the app We don't test toy pages. The course runs against Inkwell — a small but real React + Express + PostgreSQL blogging app (articles, comments, tags, follow/favorite, JWT auth). It lives in the same repo under sut/ ("system under test") and ships as a one-command Docker stack with deterministic reset / seed endpoints, so your tests never race startup or fight flaky data. You'll need Node.js 18+ and Docker . # 1. Clone the course repo git clone https://github.com/aktibaba/playwright-qa-course.git cd playwright-qa-course # 2. Start the app (db + API + web), wait until eve

Se você já fez algum front-end interativo, já tem 80% do que precisa pra fazer um jogo simples. Game jams como a June Solstice são desculpa perfeita pra testar isso — três semanas, tema aberto, e você descobre que canvas + requestAnimationFrame levam longe. Por Que Desenvolvedores Web Deviam Fazer Game Jams A maioria dos devs que conheço nunca tentou fazer um jogo porque acha que precisa aprender Unity ou Unreal. Mas se você já mexeu com animações CSS, state management ou physics simulators básicos pra UI, você já cruzou metade da ponte. Game jams forçam escopo pequeno — você não vai fazer Elden Ring em três semanas, vai fazer um Snake com twist. E isso cabe perfeitamente no que o browser oferece. Além disso, jogos web rodam em qualquer lugar. Sem instalador, sem App Store review, sem build pra cinco plataformas. Você manda um link e qualquer um joga. Pra um jam onde o pessoal precisa testar dezenas de jogos rápido, isso importa. Canvas API: Seu Motor Gráfico Embutido O <canvas> existe desde 2010 e faz exatamente o que você precisa: desenhar pixels, shapes e imagens num loop de 60fps. A estrutura básica de qualquer jogo 2D cabe em 30 linhas: const canvas = document . querySelector ( ' canvas ' ); const ctx = canvas . getContext ( ' 2d ' ); const gameState = { player : { x : 50 , y : 50 , speed : 2 }, enemies : [] }; function update ( deltaTime ) { // Input handling if ( keys [ ' ArrowRight ' ]) gameState . player . x += gameState . player . speed ; if ( keys [ ' ArrowLeft ' ]) gameState . player . x -= gameState . player . speed ; // Game logic gameState . enemies . forEach ( enemy => { enemy . x += Math . sin ( Date . now () / 1000 ) * 0.5 ; }); } function render () { ctx . clearRect ( 0 , 0 , canvas . width , canvas . height ); // Draw player ctx . fillStyle = ' #00ff00 ' ; ctx . fillRect ( gameState . player . x , gameState . player . y , 20 , 20 ); // Draw enemies gameState . enemies . forEach ( enemy => { ctx . fillStyle = ' #ff0000 ' ; ctx . fillRect ( enemy .

Hello, I'm Maneshwar. I'm building git-lrc, a Micro AI code reviewer that runs on every commit. It is...

submitted by /u/cekrem [link] [留言]

Key takeaways Give an AI agent live web data by connecting it to Crawlora's hosted MCP endpoint — it calls documented tools (search, maps, commerce, social, finance) and gets normalized JSON back, with no scraping code or proxies to run. MCP (Model Context Protocol) is an open standard: agents discover and call tools through one interface instead of a bespoke integration per data source. Connect over Streamable HTTP at https://mcp.crawlora.net/mcp with your API key — about three minutes in Claude, Cursor, Cline, Windsurf, or any MCP client. One connection exposes 319 tools across 33 platforms (393 REST endpoints underneath): Google/Bing/Brave search, Google Maps, Amazon, YouTube, TikTok, Yahoo Finance, CoinGecko, and more. You pay only on a successful (2xx) response — failed calls are free — and the free tier includes 2,000 credits a month with no card. Versus writing your own scrapers: no per-source glue code, normalized JSON instead of HTML, and proxy routing, rendering, and retries handled behind the endpoint. You can give an AI agent live web data by connecting it to a hosted MCP endpoint : your agent calls documented tools — search, maps, e-commerce, app stores, social, finance, and more — and gets back normalized JSON, with no scraping code to write or proxies to run. This guide explains what MCP is, what data you can pull, how to connect in about three minutes, and what a real tool call and its response look like. Most LLMs are frozen at their training cutoff and can't see the live web. The usual fix — writing a scraper per source, then maintaining proxies, headless browsers, and parsers — is exactly the work teams don't want to own. MCP plus a hosted data server removes it: the model gets a stable set of tools, and the fetching lives behind an endpoint. What is MCP, and why does it matter for agents? The Model Context Protocol (MCP) is an open standard that lets an AI agent call external tools through one consistent interface. Instead of wiring a bespoke int

Let's shine a spotlight on the open-source ecosystem. What are the best OSS products launched this year from your perspective? Dropping here are some of my favorite, most inspiring product launches so far, in no particular order. 5 awesome open-source products launched on Product Hunt in 2026 OpenClaw Launched last February on Product Hunt, the AI that "actually does things" is the fastest ever growing project on GitHub with 300k+ stars and 70k+ forks. It created a new category, enabling 50+ related products like moltbook (acquired by Meta) and KiloClaw - both ranked #1 Product of the Day. Kilo Code First launched last year, the open-source agentic engineering platform (19k+ GitHub stars) launched a code reviewer and a new VS Code extension this year. Both ranked #1 Product of the Day and #1 Product of the Week. InsForge The backend platform launched 2.0, hit 10k GitHub stars, ranked #1 Product of the Day, #3 Product of the Week, and joined YC. The Product Hunt effect? Tailgrids The 3.0 release of this React UI library ranked #1 Product of the Day. Ghost The latest project by @haydenbleasel , maker of next-forge , Kibo UI , and Ultracite , just cracked Product Hunt again, ranked #1 Product of the Day. Wrapping up Over to you! What are the best open-source products launched on Product Hunt in 2026 from your perspective? More awesome dev-first product launches in this repository for inspiration. Launched 42+ dev-first products on Product Hunt. AMA. fmerian fmerian fmerian Follow Feb 23 '25 Launched 42+ dev-first products on Product Hunt. AMA. # discuss # startup # marketing 1 reaction Comments Add Comment 5 min read

Introduction People keep telling me TanStack Start is kind of a big deal, and I wanted to...

Sharing my personal fetch wrapper I use in all my projects. I also added some Axios features to reduce my dependencies and wrote a guide about it submitted by /u/patchimou [link] [留言]

Hello everyone, i'm in the process of implementing a Sellsy integration on my app which is, for those who don't know, a service to generate and send invoices, estimates etc ... They have an API that i'm using. Right now i'm using the API keys and account the commercial is using for generating its documents but i add "TEST" prefix to the clients i'm working on while developing so it doesnt collide with existing data. My question is more of an architectural implementation question: how would you guys approach not colliding with production data in dev and staging environments. For example: if i need to work on the API integration, to prevent generating and sending invoices or if i need to generate them but prevent colliding with production data. Should i create another Sellsy account ? DEV or STAGING prefixes ? Any ideas are welcomed PS: i already asked AI, looking for human answers only submitted by /u/armlesskid [link] [留言]

When I started building OpinioZone , my goal was simple: create a platform where users could compare products, read reviews, and make informed buying decisions. At first, it seemed like a straightforward web application. Store products, display specifications, and allow users to browse information. However, as the platform grew, I quickly discovered that building a review and comparison website involves many technical and architectural challenges. Choosing the Technology Stack I selected ASP.NET Core as the primary framework because of its performance, flexibility, and long-term support. For data storage, I chose SQL Server since it provides strong reliability and works well with complex relationships between products, categories, reviews, ratings, and specifications. This combination allowed me to build a scalable foundation while keeping development manageable. Designing the Database One of the biggest challenges was designing a database structure that could support multiple product categories. A smartphone and a car have very different specifications, but the platform needed to handle both efficiently. Instead of creating completely separate systems, I designed a flexible structure that could store category-specific attributes while maintaining a consistent user experience. This decision made it easier to add new product categories without major database changes. Building Product Comparisons The comparison feature became one of the most important parts of the platform. Users expect side-by-side comparisons to load quickly and display meaningful differences between products. To achieve this, I had to optimize queries and carefully structure specification data. Performance became increasingly important as the number of products grew. SEO Challenges For a content-driven website, SEO is critical. Every product page requires: Unique titles Descriptions Structured content Internal linking Fast page loading One lesson I learned early was that technical SEO and content q

I built ResizeKB — a free image and PDF resizer built specifically for Indian users. 25+ tools. Zero server uploads. Pure HTML, CSS, JavaScript. Here's how and why. The Problem Every Indian applying for government jobs, exams, or bank accounts hits the same wall — portals with strict KB limits rejecting documents. UPSC wants photo under 300KB. SSC wants under 50KB. Banks need Aadhaar PDF under 500KB. Every portal is different. Every rejection wastes someone's time and opportunity. Most people have no idea how to resize to an exact KB. They either give up or use random tools that upload their Aadhaar and PAN card to unknown servers. I built a tool that solves this in one click — with zero server upload. The Tech Stack No framework. No backend. No database. Canvas API for image processing pdf-lib for PDF compression Vanilla JavaScript only Cloudflare Pages for hosting — free, global CDN, auto deploys from GitHub Total infrastructure cost: ₹1,162 per year for the domain. Everything else free. Image Compression — The Binary Search Algorithm The core challenge is compressing to an exact KB target without over-compressing. Most tools use a fixed quality setting like 60% which destroys image quality. The right approach is binary search on JPEG quality: javascriptasync function compressToTargetSize(file, targetKB) { const targetBytes = targetKB * 1024; let low = 0.1; let high = 1.0; let result = null; const img = await loadImage(file); const canvas = document.createElement('canvas'); canvas.width = img.width; canvas.height = img.height; const ctx = canvas.getContext('2d'); ctx.drawImage(img, 0, 0); while (high - low > 0.01) { const mid = (low + high) / 2; const blob = await canvasToBlob(canvas, 'image/jpeg', mid); if (blob.size <= targetBytes) { result = blob; low = mid; } else { high = mid; } } return result; } This finds the highest quality setting that still hits your target KB. Result is the sharpest possible image at that file size — never over-compressed. PDF Compress

Two weeks ago I shared a collection of 6 financial calculators. The response was incredible, so I kept building. Today, fi-calc.com has 25 completely free calculators covering every major personal finance need: 🏠 Housing • Mortgage Calculator (full PITI + amortization schedule + pie chart) • Rent vs Buy Calculator • House Affordability Calculator • Refinance Calculator 💰 Investing & Retirement • Compound Interest Calculator • Investment Return Calculator • Future Value & Present Value Calculators • ROI Calculator • Retirement Savings Calculator • 401(k) Calculator • FIRE Calculator (Financial Independence) 💳 Debt & Loans • Loan Comparison Calculator • Auto Loan Calculator • Student Loan Calculator • Credit Card Payoff Calculator • Debt Payoff Calculator (Avalanche method) 📊 Everyday Finance • Budget Planner (50/30/20 rule) • Savings Goal Calculator • Inflation Calculator • Salary & Take-Home Pay Calculator • Net Worth Calculator • Currency Converter (15+ currencies) • CD Calculator • Sales Tax Calculator ✨ Tech Stack • Pure vanilla HTML/CSS/JS — no frameworks • Chart.js for animated interactive charts • Responsive design (mobile-friendly) • All calculations run client-side in your browser • No data collection, no accounts, no cookies 🔗 Give it a try: fi-calc.com The entire site is free and open. I built it because I was tired of calculator sites with paywalls, signup walls, and bloated ad experiences. Would love feedback from the community! What other calculators should I build next?

The way developers write software has genuinely changed. Not incrementally — fundamentally. A year...

The Problem Wasn't Writing It was starting. Sometimes I wanted: A social media caption A motivational quote A writing prompt A meaningful message But my mind would go completely blank. Not because I had nothing to say. Because: Coming up with the right words at the right moment is surprisingly difficult. We've All Done This Open a new tab. Search: "Motivational quotes" "Success quotes" "Life quotes" "Funny quotes" Scroll for 10 minutes. Copy one. Close the tab. Why I Built This Tool So I built something simple: 👉 https://allinonetools.net/quote-generator-tool/ A tool that instantly generates quotes across different categories. Whether you need: Motivation Success Life Leadership Creativity Social media inspiration You can generate quotes in seconds. No signup. No setup. Just: Click → Generate → Use What I Realized People don't always look for quotes because they need content. Often they're looking for: A different perspective. A good quote can do something interesting. It can say in one sentence what takes us paragraphs to explain. The Surprising Part The most popular quotes are rarely complicated. They're simple. Short. Easy to remember. Yet somehow they stick with us for years. Why Quotes Still Matter In a world full of endless content: Attention is limited Time is limited Patience is limited A strong quote delivers an idea instantly. That's powerful. The Problem With Searching Manually Most quote websites feel: Cluttered Slow Full of ads Hard to browse And sometimes you spend more time searching than actually reading. What I Focused On I wanted the experience to feel: Fast Clean Inspiring Fun to explore Because finding inspiration shouldn't require effort. What Surprised Me After building it: Some people used it for: Social posts Presentations Daily motivation Writing inspiration But one thing surprised me most. People kept generating quote after quote. Not because they needed one. Because they enjoyed discovering them. The Real Insight Sometimes tools aren't abo

In Modern Time applications are no longer simple monolithic systems. Today organizations run: Microservices Kubernetes Containers Serverless Functions Multi-Cloud Platforms Distributed Systems As infrastructure becomes more distributed, troubleshooting becomes significantly harder. A single user request may travel through: Frontend ↓ API Gateway ↓ Microservice A ↓ Microservice B ↓ Database When something breaks, the biggest challenge becomes: "What exactly happened?" This is where Observability becomes critical. 🔗 Resources ** Support the Journey on GitHub: If you're following along, consider starring and forking the repo:** https://github.com/17J/30-Days-Cloud-DevSecOps-Journey What is Observability? Observability is the ability to understand the internal state of a system by analyzing the data it produces. In simple words: Can we understand what is happening inside our systems? Observability helps engineers answer: Why is the application slow? Which service is failing? Which request caused the issue? What changed recently? Where is latency occurring? Without observability: Problem Exists ↓ Guessing Begins With observability: Problem Exists ↓ Evidence Available ↓ Faster Resolution Why Observability Matters Modern cloud-native systems generate enormous amounts of data. Example: 100 Microservices ↓ Millions of Requests ↓ Thousands of Containers Traditional monitoring alone is no longer sufficient. Organizations need: Visibility Insights Correlation Root Cause Analysis Observability provides all of them. Monitoring vs Observability Many people confuse monitoring and observability. Monitoring asks: What is wrong? Observability asks: Why is it wrong? Example: Monitoring: CPU Usage = 95% Observability: Which service? Which request? Which dependency? Which deployment caused it? Observability provides context. The Three Pillars of Observability Modern observability is built on three primary pillars. Metrics Logs Traces Or: Monitoring Logging Tracing Together they provide a

Intro AI Avatar is a completely free app that lets your VRoid (VRM) 3D avatar animate in...

submitted by /u/lune-soft [link] [留言]