标签：#web

Last Friday at 4:30 PM, my product manager walked over: "Hey, can you grab the titles from the Hacker News homepage and send me an Excel file?" I thought: That's it? Five minutes tops. Two hours later, I was still debugging CSS selectors. How Things Spiraled Out of Control Step 1: Initialize the Project mkdir hacker-news-scraper && cd hacker-news-scraper npm init -y npm install puppeteer Hit enter, waited three minutes. Puppeteer needs to download a full Chromium browser — over 200 MB. I stared at the progress bar and started questioning my life choices. Step 2: Write the Code "It's just a document.querySelectorAll , right?" That's what I thought. Then I opened my editor: const puppeteer = require ( ' puppeteer ' ); ( async () => { const browser = await puppeteer . launch ({ headless : true , args : [ ' --no-sandbox ' , ' --disable-setuid-sandbox ' ] }); const page = await browser . newPage (); try { await page . goto ( ' https://news.ycombinator.com ' , { waitUntil : ' networkidle2 ' , timeout : 30000 }); await page . waitForSelector ( ' .titleline > a ' , { timeout : 10000 }); const titles = await page . evaluate (() => { const items = document . querySelectorAll ( ' .titleline > a ' ); return Array . from ( items ). map ( el => ({ title : el . textContent , url : el . href })); }); console . log ( JSON . stringify ( titles , null , 2 )); } catch ( err ) { console . error ( ' Scraping failed: ' , err . message ); } finally { await browser . close (); } })(); I counted: 27 lines. And this is the minimal version — no User-Agent spoofing, no retry logic, no proxy support, no concurrency control. Add all of that and you're well past 50 lines. Step 3: Run It node index.js Error: Navigation timeout of 30000 ms exceeded . Switched to domcontentloaded , got past that. But then waitForSelector timed out — because .titleline was a relatively new class name. Hacker News had silently changed it from .storylink at some point, and nobody sent me the memo. Step 4: Debug Set head

When Mozilla shut down Pocket in July 2025, I lost my favorite tool. Worse, none of the English alternatives (Instapaper, Readwise, Matter, Raindrop) had Japanese UI, and their article extraction was mediocre on Japanese pages. So I built one. It's called Readbox — Japanese-first, English-too, read-later as a PWA. Here's what I learned shipping it. The stack Next.js 15 App Router + TypeScript strict (no any ) Supabase (Postgres + Auth + RLS) Stripe (JPY + USD prices, locale-routed) Tailwind CSS Service Worker for PWA install + offline read Three things that bit me 1. Article extraction on Vercel serverless First attempt: Mozilla Readability + jsdom. Doesn't bundle on Vercel because of ESM compatibility issues and the 50MB serverless function size limit. I tried 6 approaches — Webpack externals, dynamic imports, edge runtime — none worked cleanly. Ended up using Jina Reader , which returns clean Markdown/HTML from any URL. Trade-off: third-party dependency, rate limits at scale. But it works today, and it's free. 2. Storing article body on-device I didn't want to host millions of articles' worth of HTML on Supabase (cost + privacy). Solution: extracted HTML lives in the browser's IndexedDB only (via Dexie); only metadata (URL, title, tags, read status) syncs to the server. Trade-off: cross-device sync of body content doesn't work seamlessly. Acceptable for a "read it later" workflow where you usually read on the device you saved on. 3. i18n routing — the silent sitemap killer For Japanese + English from one codebase: app/[locale]/ segment with /en prefix for English (default Japanese has no prefix, to preserve old URLs). Middleware detects cookie / Accept-Language and redirects accordingly. The gotcha (cost me a launch-day hour): middleware matcher excludes _next , api , image extensions — but if you forget .xml/.txt/.webmanifest , sitemap.xml and robots.txt get rewritten to /ja/sitemap.xml (which doesn't exist as a route → 404). Fix: export const config = { matcher

I got tired of explaining to people why their "simple weather widget" needed an API key, a signup form, and a credit card. So I built a weather API that doesn't need any of that. Here's how you can add live weather to your personal website, portfolio, or side project in about 60 seconds. The old way (painful) Most weather APIs make you: Create an account Verify your email Generate an API key Paste that key into your code Worry about rate limits Get an email when your "free tier" expires For a weather widget on a personal site? That's overkill. The Nimbus way (one fetch, done) I made a public API that doesn't need keys. Just call it. fetch ( ' https://nimbus-api-gxuc.onrender.com/api/v1/weather?city=Berlin ' ) . then ( response => response . json ()) . then ( data => { console . log ( data ); }); That's it. No headers. No tokens. No signup. Real example: Put it on your site Here's a working snippet you can drop into any HTML page right now: <div id= "weather-widget" > <p> Loading weather... </p> </div> <script> fetch ( ' https://nimbus-api-gxuc.onrender.com/api/v1/weather?city=Berlin ' ) . then ( res => res . json ()) . then ( data => { const weatherHtml = data . temp_celsius + ' °C • ' + data . description + ' <br>Wind: ' + data . wind_speed_kmh + ' km/h • Humidity: ' + data . humidity_percent + ' % ' ; document . getElementById ( ' weather-widget ' ). innerHTML = ' <strong> ' + data . location + ' </strong><br> ' + weatherHtml ; }) . catch ( function () { document . getElementById ( ' weather-widget ' ). innerHTML = ' <p>Weather not available right now</p> ' ; }); </script> Change Berlin to any city. It works. Why did I build this? Because I got tired of closed source APIs that change their pricing every 6 months. Nimbus is open source. The code is on GitHub. You can read it, fork it, or run your own version if you don't trust me. The API is free because hosting a weather endpoint costs me almost nothing, and I'd rather lose money than put up a paywall. Try it righ

I recently started using NewsAPI for scraping news articles online but this only works in your localhost, can anyone recommend any free APIs that work in production too (especially when deploying with Vercel)🙏 submitted by /u/Expensive_Bank9080 [link] [留言]

Hi, I was working on extension that has an end-to-end encrypted sync, and when user first time install the extension on a browser where it needs to download all the data (can be a few hundreds or thousands), then it was taking a huge amount of time in the first place then I spend some time researching and found that using workers with a worker pool is the best thing I can do to improve the performance, now it's significantly faster as compared to previous encryption/decryption approach where everything was inside the main thread and being done one by one. but, it's still not like the protonmail inbox where I never see any decryption progress when I login and open the inbox, so, how does that work and how can I make my tool work like that? and as I can't explicitly set that how many workers will actually work in parallel during runtime, as it's up-to the browser based on the available resource, so, is there any other way to get the most out of the workers to make the encryption decryption even faster? btw, I'm currently using the same salt per batch of 100 items, salt, iv, derived keys are generated once and passed to those workers for batches, so, workers are not doing same thing again for common tasks, decreased iteration from 600K to 400K for faster performance. so, if anyone can help me understanding how these works, and how can I make it even better, I'll really appreciate that :) submitted by /u/nhrtrix [link] [留言]

This is only for freelancers who build websites in the EU/UK. What headless cms do you use, as some don’t allow you to choose server location? How do you store your clients websites? Do you self host using gitea? submitted by /u/Fine-Market9841 [link] [留言]

I'm working on a few client sites where translation costs are getting ridiculous. I started looking into whether we can do more on the client side and came across someone or a company? experimenting with Chromium's built-in translation neural net instead of calling external APIs. Has anyone here tried building around window.translation yet? How flaky is the model loading? What kind of fallback are you using when the browser hasn't downloaded the language pack? Mostly curious about the architecture, especially around handling the initial load and performance on lower end devices. (I apologize if links are not allowed, not use to posting much) submitted by /u/Old_Acanthisitta1396 [link] [留言]

Hey guys. We used to write our backend code primarily in python flask. And then we added nextjs/react for frontend. But the way it was done by previous devs was nextjs talks to flask internally on localhost and passes requests onto flask after handlingu the auth. As there's only one public subdomain. But often times it feels so ceremonial. Because flask has a route. Then nextjs has an equivalent route. And for basic stuff it almost looks equal size in the 2 places. There's endpoints just to pass a request on. And then someone suggested to do rewrites for certain stuff but that just splits the ability to where do you find code related to a certain thing like whitelabel. You go and first find it in nextjs routes, then u see if it's in any of the rewrites. And then you go and dig the flask equivalent. Since nextjs is totally really a real backend. And it anyways sits in the middle to interject every request due to auth etc. Makes me wonder if it's a bad idea to let it handle most of the crud stuff. Because rn it gets a request to say serve a logo. It gets a route handles headers etc and sends a request to flask hey can you grab that logo for me. And then ships it back. But it's gonna take just a few lines more for nextjs to end up doing the whole thing itself. Now the only issue is. That would sort of split the duties a bit. And the line might be slightly arbitrary. I personally prefer if we can keep all the business logic in python as that's what our team understands best. And also do certain data science stuff for which you anyways need python. But overall is it a bad idea to split duties between 'backends' like this. Especially the simpler crud stuff. Or how else would you suggest the backend handles the requests. Is route handlers the way or rewrites. Thanks. submitted by /u/Consistent_Tutor_597 [link] [留言]

You took the offer. The team uses Cursor or Copilot for almost every PR, runs an internal RAG bot over the docs, and at least one senior engineer is building agent workflows on the side. Your onboarding doc is half-written because the person who owned it left, and the codebase has roughly 40% more surface area than the org chart suggests, because LLMs have made it cheap to ship adapters, scripts, and one-off services nobody fully owns. This is the environment most junior engineers walk into in 2026. The traditional advice — read the codebase, ask questions, find a mentor — still applies, but it doesn't tell you what to prioritize when the senior engineers around you are visibly faster than you because they've internalized tools you've never touched. Below is a 90-day plan that assumes you have decent fundamentals (you can write a function, you understand HTTP, you've used git) but you're new to working in a codebase where AI is a first-class collaborator. Days 1-30: read more than you write, and read what the AI reads The biggest mistake juniors make in AI-heavy teams is opening Cursor on day three and trying to ship a feature. You will produce code that compiles, passes the obvious tests, and quietly violates three conventions nobody wrote down. Your PR will get approved by a tired senior because rejecting AI-generated junior code costs political capital. You will learn nothing. Instead, spend the first month doing three things in roughly equal proportion: 1. Read the codebase the way the AI reads it. Look at how the repo is structured for retrieval. Most AI-heavy teams have a CLAUDE.md , .cursorrules , AGENTS.md , or an internal RAG index. These files encode the conventions, the patterns the team wants reinforced, and — critically — the things the team has had to tell the AI not to do . Forbidden patterns are usually the result of an incident. Read them. Ask which incident produced each one. 2. Read closed PRs, not open ones. Open PRs are noisy. Closed PRs from th

Google I/O 2026: MCP Is Now Infrastructure Google I/O used to be about new models. This year it was about what those models do - and how they connect to everything else. MCP was everywhere. Not as a novelty. Not as an experiment. As the assumed plumbing. Here's what actually shipped. Gemini Spark Will Run on MCP for Third-Party Tools The headline agent at I/O 2026 was Gemini Spark - a 24/7 AI agent that runs on cloud VMs, works while your devices are off, and handles long-running tasks across Gmail, Docs, and Calendar. Spark integrates with Google Workspace apps first, then expands to third-party tools via MCP over the summer. That's the part worth sitting with. Google built its flagship consumer agent and then said: for everything outside our walls, we'll use the open protocol. A year ago, MCP was a specification from Anthropic. Today, Google built its flagship consumer AI agent on it. Cursor, Copilot, Windsurf, Mistral, Grok - they all support it too. When the company that runs Search, Gmail, Android, and Chrome commits to MCP as the integration layer for its flagship product, the protocol debate is effectively over. Managed Agents Get MCP Servers by Default Google also launched Managed Agents through the Gemini API - a setup where a single API call provisions a remote Linux environment with its own isolated sandbox. Each agent gets its own ephemeral sandbox provisioned with skills, Model Context Protocol (MCP) servers, and server-side tools. Full integration with A2A and Agent Platform governance and security are coming soon. Managed Agents are powered by the Antigravity agent and built on Gemini 3.5 Flash. Developers can define custom agents through versionable markdown files such as AGENTS.md and SKILL.md, rather than building complex orchestration layers from scratch. This is Google offering hosted execution, sandboxing, state handling, and MCP tool access as a bundled service. The enterprise pitch is operational abstraction - you define the agent, Google runs

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

Demystifying WebP to PNG: How to Secure Serverless Edge Routing Configurations Safely We have all been there. You are building a high-performance, modern web application and you decide to store all user-generated assets in modern, ultra-compressed WebP formats. It is a smart move for your Google Lighthouse scores. Then, the legacy enterprise integration request hits your inbox. A major client needs to pull these same assets dynamically, but their internal 15-year-old reporting engine only supports PNG. Suddenly, you need to configure a runtime conversion pipeline that handles complex input schemas, transforms formats on the fly, and manages edge routes without exposing your internal database claims or API secrets. Setting up secure serverless edge routing configurations to convert images on-demand can quickly turn into a security nightmare. If you do not handle incoming credential tokens correctly, you risk forwarding sensitive OAuth scopes or database keys directly to downstream image-processing worker nodes. In this guide, we will break down exactly how to architect a lightweight, secure, and fast edge routing pipeline that validates incoming image request schemas and converts WebP to PNG without leaking sensitive backend credentials. The Problem Modern edge runtimes like Cloudflare Workers, Vercel Edge Functions, or AWS CloudFront Functions are incredibly fast, but they have strict execution limits. They run on V8 isolates, meaning you do not have a full Node.js environment with unlimited memory and access to heavy C++ binaries like sharp or canvas without paying a massive cold-start penalty. If you want to support legacy clients by converting WebP to PNG on the fly, you are faced with three major challenges: Bundle Size Restrictions : Edge functions typically restrict your code size to 1MB or 2MB. Bundling heavy native libraries to parse image bytes is a recipe for deployment failures. Credential Leakage : Edge routers often intercept incoming JWT authorization

Modern QA automation is extremely effective when testing traditional web applications. APIs can be validated reliably, user flows can be scripted with precision, and infrastructure monitoring has become mature enough to detect most operational problems before users even notice them. Browser-based casino games are different. Over the last few years, many iGaming teams have invested heavily in automation frameworks, synthetic monitoring and infrastructure observability. On paper, this should make production environments safer and more stable than ever before. Yet operators still encounter situations where everything appears healthy internally while players experience visibly broken gameplay sessions in production. This creates one of the most frustrating categories of bugs in modern iGaming. The backend responds correctly. Monitoring dashboards remain green. APIs continue returning valid responses. Error logs show nothing alarming. Meanwhile, players encounter frozen reels, broken bonus transitions, stuck autoplay sessions or visual states that no longer match the actual game logic running underneath. From the platform perspective, the game is technically alive. From the player perspective, the game is unusable. This gap exists because most traditional QA systems were designed around structured applications rather than visually driven environments. Frameworks such as Selenium, Playwright or Appium work extremely well when the application exposes predictable UI structures and accessible states. In browser games, however, much of the real application state exists visually rather than structurally. Modern slot games often rely on canvas rendering, WebGL pipelines, animation-heavy transitions and custom rendering engines. A scripted automation flow may successfully click buttons and validate network responses while the actual gameplay session is visually frozen for the player. In many cases, the DOM itself provides little meaningful information about what is truly happeni

This is a submission for the GitHub Finish-Up-A-Thon Challenge What I Built I built So Lai , a local-first profit tracker for small online shops in Vietnam. The goal is simple: help a seller answer the question they often cannot answer from platform revenue alone: Is my shop actually profitable after product cost, marketplace fees, shipping subsidies, discounts, ad spend, returns, and pending COD? So Lai is not trying to be a full POS, CRM, or inventory suite. It focuses on the painful middle layer that many small sellers still manage through scattered spreadsheets: Product cost by SKU Orders from Shopee, TikTok Shop, Facebook, Zalo, or livestream sales Platform fees, shipping cost, vouchers, and discounts Ad spend by channel and SKU Return/cancellation status COD received vs. pending Net profit by order, product, and sales channel The app runs locally with Node.js and JSON storage, so it does not require paid APIs or cloud setup. GitHub repo: https://github.com/klauski24/so-lai Demo Run locally: git clone https://github.com/klauski24/so-lai.git cd so-lai npm start Open: http://127.0.0.1:4182 What the demo shows: A Vietnamese-language dashboard called Sổ Lãi Shop profile setup Clear explanation of where the numbers come from CSV import for products, orders, and ad costs Manual order entry Profit analysis by channel and SKU Alerts for loss-making products, high COD pending, and high return rate CSV and Markdown report export Screenshots are included in the repository: so-lai-desktop.png so-lai-mobile.png The Comeback Story The first version was too vague. It started as an English-named dashboard called ProfitLens . It had some useful calculations, but it did not feel practical yet. The biggest problems were: The app used Vietnamese currency but had an English product name. There was no place to define the shop. It was not clear where the data should come from. The dashboard looked like a demo, not something a seller could actually use. I reworked the project into So

Bugs, crashes, glitches... Game development is full of them, and even experienced teams run into issues. But while no game is perfect, that doesn't mean we should stop chasing better quality. In this live session, we'll look at why even seasoned game development teams make mistakes and how you can reduce the number of issues in your own projects. What's the talk about? The speaker, Gleb Aslamov, developer advocate and static analyzer developer at PVS-Studio, will walk you through common and less obvious reasons behind code errors, share real-world bug examples from actual game projects, discuss development practices that help prevent bugs before release, and demonstrate tools designed to catch those issues early. Gleb will show some amusing bug examples from projects like osu!, GZDoom, and SanAndreas Unity. The discussion will cover how code reviews, testing, and CI/CD, combined with profilers, dynamic analyzers, and static analyzers, can help detect issues long before players ever encounter them. Also, expect to see static analysis in action, including warnings that reveal performance-sensitive issues and other hidden problems in game code. When? Mark your calendar for June 2, 2026, at 1:00 PM UTC+1 . Join the live talk and learn how to make your game code more reliable—one bug at a time. P.S. And don't forget to check your inbox to confirm the registration!

The numbers just dropped. April ecommerce growth came in at 11% more than double the total retail sales growth rate for the same period. For developers building ecommerce infrastructure, this isn't just a market stat. It's a load test result. And a lot of backends are failing it quietly. Here's what 11% ecommerce growth actually means technically and the five infrastructure decisions that determine whether your client captures it or gets buried by it. What 11% growth means at the infrastructure level 11% more orders. 11% more simultaneous channel requests. 11% more concurrent inventory mutations across every connected platform. The sync architecture that handled last year's volume handles this year's volume — until it doesn't. The failure mode is predictable: javascript// Last year's volume const ordersPerDay = 500; const syncWindowsPerDay = (24 * 60) / 15; // 96 const ordersPerWindow = ordersPerDay / syncWindowsPerDay; // 5.2 // This year's volume at 11% growth const ordersPerDayNow = ordersPerDay * 1.11; // 555 const ordersPerWindowNow = ordersPerDayNow / syncWindowsPerDay; // 5.8 // During a flash sale at 10x velocity const peakOrdersPerWindow = ordersPerWindowNow * 10; // 57.8 // 57 orders processed against potentially stale stock per 15-minute window // Up from 52 last year seemingly small, meaningfully worse at the tail The difference between 52 and 58 orders per window sounds minor. At the tail peak flash sale velocity, multiple channels firing simultaneously — it's the difference between manageable oversell exposure and a crisis. The five infrastructure decisions that matter Sync architecture polling vs event-driven This is the highest leverage decision. Everything else builds on it. javascript// Polling — what most systems still run // Sync lag: up to 15 minutes // Cost at 11% growth: proportionally worse setInterval(async () => { const stock = await getSourceOfTruth(); await syncToAllChannels(stock); }, 15 * 60 * 1000); // Event-driven — sync lag approache

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

If you refresh a page quickly, sometimes the new AudioContext will be faulty, it won't pick up any audio and throws no errors. Fix is to create and immediately close a throwaway context before creating your real one: await new AudioContext().close(); const ctx = new AudioContext(); submitted by /u/GramDanD [link] [留言]

In your opinion what would you say is the quintessential CRUD app? If you were to make a sample demo app utilizing and comparing the different tech stack (eg Laravel vs Django vs Spring Boot etc), which CRUD app would be the best? Thanks submitted by /u/Temporary_Practice_2 [link] [留言]

Making a personal website and trying to showcase projects I've worked on and trying to make it filterable. But I can not for the life of me figure out how the javascript part works? W3schools has been amazing and digestible up until this point. Using this as my base but what do I replace in the java part to make it filterable???? https://preview.redd.it/a35guno7yt3h1.png?width=1990&format=png&auto=webp&s=169b5610856995b84e1cee0881dac68dbc8be32d submitted by /u/ToxicGhostJuice [link] [留言]