标签：#webdev

What are the minimum requirements to have as a beginner web developer to be able to efficently learn and work online? like should you code in a private room? what kinds of desks are appropriate and what are not? how important is the calm atmosphere inside the house and outside? I know there is something called ergonomics and I want to ask programmers who have experience with learning and working from home and coding for long hours at home, if we categorize the working environments in 3 types: inapropriate, acceptable, good. What things should be in each category? Please share your experiences with any work environments you have/had. Thanks. submitted by /u/DurianLongjumping329 [link] [留言]

For years, whenever I needed to merge two PDFs or compress a file to upload to a government portal, I would Google "compress PDF", click the first result, and inevitably hit a paywall. "You have reached your 2 free files per day limit." Worse, I was uploading sensitive documents—tax returns, medical records, and NDAs—to random servers in God-knows-where just to strip out some heavy images. I decided to build an alternative. I wanted it to be 100% free, have absolutely no daily limits, and most importantly: zero server uploads . Here is how we built PDF Pro using Next.js and WebAssembly to process PDFs entirely natively inside the user's browser. The Architecture: Why WebAssembly? Traditional PDF tools (like Smallpdf or iLovePDF) use a monolithic server architecture. You upload your file to their AWS bucket, their backend runs a Python or C++ script (usually using Ghostscript or a proprietary library) to manipulate the PDF, and then you download the processed file. This architecture is expensive (high bandwidth and compute costs) and creates a massive privacy liability. By compiling a C++ PDF manipulation library down to WebAssembly (WASM) , we inverted the architecture. 1. The Build Process We took pdf-lib and custom C++ compression algorithms and compiled them to a lightweight .wasm binary. When a user visits PDF Pro Compress , their browser downloads the ~2MB WASM file once and caches it. 2. Client-Side Processing When you drag and drop a 50MB PDF into the UI, it never hits our server. Instead, the browser's JavaScript engine passes a Pointer to the file data directly into the WebAssembly memory buffer. The WASM module executes native C++ speeds directly on your local CPU to compress or merge the document. Performance Benchmarks Because there is zero upload and zero download time, the performance metrics are staggering: 10MB PDF Compression (Cloud): ~15 seconds (Upload) + 4 seconds (Process) + 5 seconds (Download) = 24 seconds . 10MB PDF Compression (PDF Pro WASM)

My CV is a PDF, and PDFs do not answer questions. So I built ask.hiten.dev : a streaming chat grounded in my actual career history, where a recruiter can ask "why should I hire you over another senior frontend engineer?" and get a real answer. The constraint that made it interesting: the total inference budget is zero. No OpenAI bill, no hosted vector DB, nothing. Here is what that actually took. Four free providers and a failover chain No single free tier is reliable enough to put in front of strangers. Groq's free tier caps at 100k tokens/day, and I hit that cap on day one. OpenRouter's free models come and go. Cerebras occasionally queues you out at busy times. The fix is boring and effective: an ordered provider chain, all OpenAI-compatible, walked per-request until one answers. Groq (llama-3.3-70b) -> OpenRouter (gpt-oss-120b:free) -> NVIDIA (llama-3.3-70b) -> Cerebras (gpt-oss-120b) Each provider is just a base URL, a key and a model name. The API route tries each in order; the first 2xx with a body wins, and the response streams straight through. The client gets an X-Provider header so I can see who served what in the logs. Two details that mattered: Empty env vars are not unset. Docker Compose's ${VAR:-} yields an empty string, which defeats ?? defaults in Node. Every key goes through a helper that coerces "" to undefined , otherwise a provider with no key "exists" and fails every request. You cannot cheaply probe a token-per-day cap. My health check hits GET /models on each provider (auth check, 60s cache). It tells you "key works, service up", not "you have tokens left". The failover chain covers the gap: a TPD-capped provider fails fast and the next one picks up. If every provider is down, the page itself says so. The health check runs server-side at render time, and instead of a broken chat you get a short maintenance note. Never ship a chat UI that can fail after the user has typed. Open-weight models do not follow formatting orders My site's voice avoi

Let’s all assume we’re able to do whatever is possible with CSS/HTML/JS. (No typescript or node.js due to hosting restrictions) How can one use it for their animation/storyboard portfolio, unlike making something like a wall of displayed art, how can it be made interactive in a professional way? I’m more interested in ideas that use the strength of web itself, not just decorative effects submitted by /u/Enc7 [link] [留言]

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

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

I'm working on a free SVG icon project called IconShelf and recently noticed something confusing. Analytics show decent traffic, but signups and conversions are much lower than expected. To investigate, I started reviewing sessions in Microsoft Clarity and found behaviour that makes me suspect that a significant portion of visits may be from bots, crawlers, or automated traffic. I'm already using Cloudflare Bot Management and several WAF rules. I'm curious how other developers handle this. What tools do you use to identify bot traffic? Do you rely on analytics, server logs, Clarity, or something else? How do you measure "real" traffic versus raw pageviews? Have you ever discovered that your actual human traffic was much lower than your analytics suggested? I'd love to hear what worked for you and any lessons learned from tracking user behavior and conversions. What is the solution from developer prospective? Here in the screenshot 70% are bots? https://preview.redd.it/19jsil0e5m6h1.png?width=2604&format=png&auto=webp&s=70591a9e33c635cfbaacc64c9af1b5800b6e2e74 submitted by /u/Parking_Pea5161 [link] [留言]

Background: I accidentally created a recursive loop with an AI agent that would have cost me $50+ in API calls before I noticed. Existing tools either cost money or only show you what already happened. So I built TokenFirefighter — a 100% free, local-only HTTP proxy. What it does: - Sits between your app and OpenAI/Anthropic on localhost:7272 - Tracks every API call cost in real time - Detects 4 types of runaway loops and blocks them - Has a terminal dashboard (no web UI needed) - Zero accounts, zero data collection, zero cost Install: npm install -g tokenfirefighter tokenfirefighter init tokenfirefighter start Then just set OPENAI_BASE_URL=http://localhost:7272/v1 in your .env. Would genuinely appreciate feedback from anyone who uses AI APIs regularly. GitHub: https://github.com/MohitBaghel24/tokenfirefighter submitted by /u/AdventurousMirror122 [link] [留言]

Title. I've looked and looked but found nothing. submitted by /u/yduow [link] [留言]

Breaks down package managers as different dependency models rather than "faster npm replacements". It compares npm, Yarn, pnpm, Bun, and Deno through reproducibility, compatibility, disk usage, and migration failure modes. submitted by /u/OtherwisePush6424 [link] [留言]

AI coding tools are changing how software gets built. Claude Code, Cursor, GitHub Copilot, Windsurf and other tools can generate code incredibly fast. For small tasks, they are already useful: write a component, explain a function, scaffold an endpoint, create a test, refactor a file. But after using AI in real projects, one thing becomes obvious: The problem is no longer code generation. The problem is engineering control. Most AI coding workflows still look like this: text idea -> prompt -> code -> fix -> prompt again -> more code -> lost context -> start over It feels fast at the beginning. Then the project grows. Requirements change. Architecture decisions disappear inside chat history. The AI forgets previous context. You start acting as product manager, architect, reviewer, QA, DevOps, and prompt engineer at the same time. That is not software engineering. That is vibe coding. ## Vibe coding works until it doesn't Direct AI coding is great when the task is isolated. Ask for a React component. Ask for a SQL query. Ask for a utility function. Ask for a unit test. No problem. But real software is not a collection of isolated snippets. Real software has: - business rules - architectural constraints - existing patterns - security concerns - database impact - deployment requirements - edge cases - regression risk - long-term maintenance When AI jumps directly from prompt to code, it often skips the thinking that should happen before implementation. The result may compile. But does it fit the architecture? Does it respect the domain? Does it create hidden technical debt? Does it solve the right problem? That is the gap we are trying to close with N45.AI. ## What is N45.AI? N45.AI is a framework that turns AI coding tools into a structured engineering workflow. It works with the tools developers already use, including Claude Code, Cursor, GitHub Copilot, and Windsurf. The idea is simple: Instead of treating AI as one generic assistant, N45.AI organizes the work like a

My daughter Emma is 11. She's been vibe coding lately, and honestly, she's pretty good at it. The...

Hey everyone, I am a frontend dev and design engineer with about 4.5 years of experience. I am currently looking for a full time role. I am hoping to join an agency or a product team that actually cares a lot about good design. I love building modern and clean websites with a minimalist touch. My approach to work is just based on first principles. I always try to think about how Apple would make things. Good design is not really about what you add, it is about what you refine. Here is what I use to build things: My stack: React, Next.js, TypeScript, and Tailwind CSS. Animations: Motion and GSAP for really smooth interactions. How I work: I focus heavily on the design intent and the core architecture to build pixel perfect layouts and animations from scratch. You can check out my work here: My Portfolio: https://deepbuilds.in Recent Build (Autumn): https://autumndev.vercel.app If your team is looking for someone who sweats the small details and wants to build some really cool stuff together, drop me a DM. Let's talk! submitted by /u/Party-Membership-597 [link] [留言]

Keeping validation schemas, OpenAPI docs, and test fixtures in sync requires manual effort. I built TriadJS as a POC to consolidate them in one place. You define the API once using a TypeScript DSL. The framework derives the following: Runtime validation OpenAPI 3.1 & AsyncAPI specs Database schemas via Drizzle Boundary tests (calling scenario.auto() reads schema constraints to generate fuzz tests) This is a pre-1.0 project with specific architectural compromises: Auto-generated tests abstract away edge cases, which can complicate debugging. Designed for AI: It optimizes for single-file context so LLMs can read the API without traversing multiple YAML and test files. This prioritizes scaffolding over standard modularity. There is are built in claude plugin with skills (schema DSL, endpoints, channels, BDD behaviors with the authoritative assertion phrase table, testing, adapters, Drizzle, CLI, DI) and 8 slash commands ( /triadjs:new , /triadjs:model , /triadjs:endpoint , /triadjs:channel , /triadjs:scenario , /triadjs:test , /triadjs:docs , /triadjs:validate ). I am looking for feedback on this architecture. Is this level of tight coupling an anti-pattern, or is the single source of truth worth the DSL requirement? Repo: TriadJS submitted by /u/justhamade [link] [留言]

Hey everyone — I've been building The Drive AI, a file intelligence API, and wanted to share it. The problem: If you're building an AI agent, RAG pipeline, or any app that needs to understand documents, you end up duct-taping together 5-6 different libraries — one for PDFs, one for screenshots, one for Office docs, one for markdown conversion, one for OCR. Each breaks differently and none give you structured output. What this does: Send any file or URL, get structured JSON back. Define a schema of what you need, and the API extracts it with typed fields, confidence scores, and citations pointing to where in the document the data came from. 107+ file formats — PDFs, Office docs (Word, Excel, PPT), 40+ code languages, images, videos, websites. One API handles all of them. Not just extraction. You can also: Convert anything to clean markdown Generate screenshots of URLs (with device presets, dark mode, full-page capture) Ask analytical questions about documents and get reasoned, step-by-step answers Get Open Graph images for link previews What makes it different from competitor? Most "file to X" APIs do one thing — thumbnails OR markdown OR extraction. This handles the full pipeline. And the extraction isn't just OCR-and-dump — you define a JSON schema, and it returns typed data with confidence scores. Think of it as "SQL for documents." The simple path-based API is also something I haven't seen elsewhere: GET /md/example.com/report.pdf gives you markdown. GET /example.com gives you a screenshot. No auth needed for basic usage. Free tier: 100 credits/month, no card required. There's also an interactive playground where you can test every endpoint without writing code. Would love feedback from anyone building with documents or doing AI agent work. What's missing? What would make you switch from your current setup? Give it a try at https://dev.thedrive.ai submitted by /u/karkibigyan [link] [留言]

zxcvbn is the most widely used password strength estimator with 1M npm downloads a week. It's also 389KB gzipped and hasn't shipped a commit since 2017. Most sign-up forms are hauling that around just to block password123 . Poor password UX is a real conversion problem. A strength meter that adds 389KB to your bundle delays page load — on mobile, measurably so. Users who hit a slow registration page don't wait. They leave. The irony is that most of that weight goes toward catching passwords nobody is actually using to register on your site. So I built passcore - 3.0KB gzipped and 98.4% detection rate on real breach data - same as zxcvbn, benchmarked against a deduped list of passwords pulled live from RockYou, Adobe, HIBP, and other major leak lists. zxcvbn takes ~9.7ms to load — it's parsing 389KB of dictionary into memory on every cold start. passcore loads in ~0.2ms. It evaluates a password in ~2,600 nanoseconds. For a registration form, it's effectively invisible — no jank, no layout shift, no contribution to your Core Web Vitals score. The strength meter shows up before the user finishes typing their first character. How it works: passcore runs five detection layers on every password: Dictionary - All entries sourced directly from breach data, not a generic word list Keyboard patterns - qwerty , asdf , 1234 , numpad walks Repeats - aaaa , ababab Sequences - abcdef , 123456 L33t speak - decodes p@ssw0rd → password , m0nk3y → monkey , then dictionary lookup The dictionary is small by design. Every entry was chosen because it appears in real breach data - not because it's a common English word. Password1! is caught not by a 40k word list but by stripping the suffix and checking if the core word is in the breach list. It is. The scoring model: passcore returns a score from 0 to 4 - same scale as zxcvbn. The detection layers run first. A dictionary match, keyboard pattern, repeat, sequence, or l33t substitution scores 0 or 1 immediately - no further calculation. If

I automated my Gumroad product screenshots with Playwright I recently started packaging a few small frontend projects as digital products, and one surprisingly annoying part was preparing product screenshots. Manual screenshots quickly became messy: different browser sizes inconsistent cropping blurry images mobile screenshots were easy to get wrong Gumroad needed a square thumbnail every update meant taking screenshots again So I built a small local screenshot workflow with Next.js and Playwright. The workflow captures: desktop screenshots mobile screenshots square thumbnail images consistent PNG outputs route status checks basic console error reporting basic horizontal overflow checks The basic command flow is: npm run build npm run start npm run screenshots The script reads a simple config file, opens the configured local routes, captures each screenshot with consistent viewport settings, and exports the images into a predictable folder. For example: screenshots/gumroad/ landing.png dashboard.png template-preview.png mobile-preview.png thumbnail.png I found this especially useful when preparing Gumroad product galleries, because I could regenerate all product images after every UI change instead of taking screenshots manually. This is not a hosted screenshot service. It is just a local source-code workflow for people who want to generate product screenshots from their own Next.js pages. I packaged the workflow as a small Gumroad product here: https://remix410.gumroad.com/l/screenshot-automation-kit Curious how other developers handle product screenshots. Do you take them manually, use Playwright/Puppeteer, or use a design tool workflow?

TLDR TypeScript has 7 primitive types: string , number , boolean , null , undefined , bigint , and symbol . You use them to tell TypeScript what kind of value a variable holds. You write them in lowercase. TypeScript can often figure out the type for you. But knowing how each one works is key to writing safe and clear code. What Are Primitive Types? Primitive types are the simplest building blocks in TypeScript. Every piece of data in your program starts with one. They hold a single value. They are not objects. You cannot add methods or properties to them directly. TypeScript has 7 primitive types in total: Type What It Holds string Text like names, messages, or IDs number Any number: integers, decimals, negatives boolean Only true or false null An intentional empty value undefined A value that was never assigned bigint Very large whole numbers symbol A unique identifier value This article covers all 7. You will use string , number , and boolean the most in everyday TypeScript code. How to Use the string Type A string holds text. Use it for names, messages, emails, URLs, and any other text data. Basic string annotation let firstName : string = " Alice " ; let greeting : string = " Hello, world! " ; let empty : string = "" ; Three ways to write strings TypeScript supports the same three string styles as JavaScript: let single : string = ' Single quotes work fine ' ; let double : string = " Double quotes work too " ; let template : string = `Template literals with ${ firstName } ` ; Template literals (backticks) let you insert values inside a string with ${} . TypeScript checks the types of those inserted values too. let age : number = 30 ; let message : string = `I am ${ age } years old` ; // TypeScript checks that 'age' is compatible here What TypeScript catches with strings let name : string = " Alice " ; name = 42 ; // Error: Type 'number' is not assignable to type 'string'. name = true ; // Error: Type 'boolean' is not assignable to type 'string'. Once a variable

I have an idea for an app but it requires payment to be done by escrow. I have absolutely no idea what I am doing, but I'm 20 so I just want to try a shot at this business Idea. I have build one or two websites with claude before, and it's alright. But when it comes to these issues, especially regarding payments in the thousands, I don't know if I should use AI for it. On the one hand, I don't have the money to hire a dev so I'd have to find investors which is extemely hard to, again, since I don't know what I'm doing, but on the other, I don't want to risk messing it up such that the payment doesn't go through because of a fault and someone who worked for hours wouldn't get the money he deserved and thus I'll be held legally. I could use some advice from those who've had experience in this field. P.S - Please suggest if you have other ideas I can use rather than escrow for payments submitted by /u/PeaceInLoneliness [link] [留言]

If bots are going to take over the internet, then for whom are we doing web development? Bots? Source: https://radar.cloudflare.com/traffic#bot-vs-human submitted by /u/chota-kaka [link] [留言]