标签：#webdev

I've been working on an open-source project called Canary. It reads your code diffs, understands which UI flows are likely affected, and lets Claude Code tests those flows in a real browser. Under the hood, Canary ships with a QuickJS WASM sandbox that exposes the full Playwright API, allowing Claude to perform long-running browser workflows such as authentication, onboarding flows, form submissions, and navigation across complex applications. Each run captures: Screen recordings Playwright traces HAR files Network requests Console logs Screenshots Unlike most agent runs, every Canary session also generates a reusable Playwright script that can be cleaned up and replayed locally or in CI with zero inference cost. Canary UI submitted by /u/wixenheimer [link] [留言]

You pick a tool on the canvas, and in real-time you get suggestions on what you can add next, how your tools pair together, or what can be missing. There are also recommended tech stacks available for different project types. Web apps are one of the primary types, but the tooling also covers data projects, automation and so on. In total there are over 150 tools present. Everything in the app is rule-based, there’s no AI there yet whatsoever. I do plan to add an AI chat later, but it will be built on the same deterministic engine. It’s a beta for now. The builder and the tools catalogue are fully functional, user accounts are also planned for later. But this core part will stay free to use without accounts. Paid plans, if introduced, would cover extras like AI features. For my own tech stack, it’s Vue.js for frontend, FastAPI for the backend and PostgreSQL for the database. https://tekyous.dev submitted by /u/sartek1 [link] [留言]

5 Principles of Survival for Software Engineers Adapted from Leon Business School's "5 Principles of Survival" Your stack won’t save you. Your principles will. In the wild, survival isn’t about having the best gear. In software, survival isn’t about having the absolute best framework. It’s about how you operate when production is on fire, the roadmap shifts overnight, and AI just turned your "moat" into a weekend hobby project. Here are 5 core principles that keep you alive in modern software engineering. 1. 🔥 Adapt or Perish Change is not optional; it is the price of survival. In the wild: The species that cannot adapt to winter dies. In software: The team that cannot adapt to change dies slowly at first, then all at once. "Localhost is for amateurs" used to be a strongly held belief. Now, Claude writes a full CRUD API in 30 seconds on localhost . "We’re a React shop" was a proud identity. Now, HTMX ships the same feature before your Webpack build even finishes. Your identity as an engineer cannot be tied to a specific tool. Your identity is solving problems . The syntax is temporary. Agreement on what to build is what actually matters. 🛠️ Survival Action Every quarter, deliberately kill one "we’ve always done it this way" rule in your workflow. 2. 🧭 Stay Calm Under Pressure Panic is the first casualty of poor preparation. In the wild: Panic burns critical calories and gets you lost. In software: Panic causes a git push --force to main on a Friday at 4:59 PM. Outages don’t kill companies. Panicked responses do. The team that has clear runbooks, relies on feature flags, and can execute a rollback in under 90 seconds stays calm. Why? Because they prepared when it was quiet. If your first step in incident response is opening X (Twitter) or complaining in a public Slack channel, you have already lost. 🛠️ Survival Action If you don't have a tested rollback plan, you don't have a deployment plan. Write it down before your next release. 3. 💡 Resourcefulness Over Resources

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

If you've ever hit Unexpected token in JSON at position 42 or Unterminated string , there's a good chance an unescaped character broke your payload. JSON is strict about what's allowed inside a string, and the fix is almost always escaping . Here's the practical version. What does escaping a JSON string mean? A JSON string is wrapped in double quotes. Any character that would confuse the parser must be replaced with a backslash escape sequence. Escaping doesn't change the meaning of your text — it just makes the string valid JSON so parsers can read it. Unescaping is the reverse: turning those sequences back into readable characters (handy when you copy a value out of logs or an API response). The characters you must escape JSON defines exactly seven characters that must be escaped inside a string: Character Escaped as Double quote " \" Backslash \ \\ Newline \n Carriage return \r Tab \t Backspace \b Form feed \f The forward slash / may optionally be escaped as \/ , but it isn't required. Unicode can be written as \uXXXX (four hex digits). JSON escape examples Double quotes — He said "hello" becomes: "He said \" hello \" " Backslashes (Windows paths) — C:\temp\file.txt becomes: "C: \\ temp \\ file.txt" Newlines and tabs — a two-line, tabbed string becomes: "Line 1 \n Line 2 \t Tabbed" How to escape and unescape JSON in code In production you rarely escape by hand — every language has it built in. JavaScript const escaped = JSON . stringify ( text ); // escape const back = JSON . parse ( escaped ); // unescape Python import json escaped = json . dumps ( text ) # escape back = json . loads ( escaped ) # unescape Java (Jackson) ObjectMapper mapper = new ObjectMapper (); String escaped = mapper . writeValueAsString ( text ); String back = mapper . readValue ( escaped , String . class ); C# (.NET) using System.Text.Json ; string escaped = JsonSerializer . Serialize ( text ); string back = JsonSerializer . Deserialize < string >( escaped ); Common escaping mistakes (and f

I shared last Tuesday, but the post was removed as Showoff which can post only on Saturdays. Here again! No external CSS, JS, icon, font frameworks. Manage your composable CSS and HTML partials with a YAML data-driven approach, side-by-side using pure Markdown files. Home widgets: Hero, Bento, Showcase, Action Cards (plug and play) Responsive and adaptive layouts. Support for light and dark modes. Support for multiple documentation sets. Support for a blog. Implement a menu via Hugo configs. Customizable sidebars using Hugo data templates. Plug-and-play/ repeatable home page blocks using separate partials/ css/ data templates. Integrate a search via Pagefind. Demo: https://dumindu.github.io/E25DX/ Demo Setup: https://github.com/dumindu/E25DX/tree/gh-pages/example GitHub: https://github.com/dumindu/E25DX So, No need Hundreds of NPM Packages & Thousands of CSS Classes For A Modern And Modular Technical Documentation & Blog Setup In 2026 submitted by /u/dumindunuwan [link] [留言]

In the last update, I introduced MDL as an HTML-first language for building websites and apps with less noise. This update is about the next layer: adapters . The goal is simple: MDL source should describe intent. Adapters decide how that intent becomes deployable HTML. Why adapters? I don’t want MDL to become locked into one frontend framework. Instead, the same MDL structure should be able to target different deployment styles: static HTML MDL-native runtime attributes HTMX future template or framework adapters So this: form@api(post /api/login)@result(loginResult)@swap(replace): .input@type(email)@required .btn-primary@type(submit)(Sign in) status@id(loginResult): Waiting. Can become plain HTML: html <form method= "post" action= "/api/login" > Or HTMX: html <form hx-post= "/api/login" hx-target= "#loginResult" hx-swap= "outerHTML" > Security before convenienceThe important part is that MDL does not pass behavior attributes through blindly. Raw HTMX attributes like this are blocked: mdl form@hx-post(/api/login): Instead, MDL uses intent-based attributes: mdl form@api(post /api/login): Then the adapter validates and translates it. Current safety rules include: external api(...) URLs are rejected raw @hx-* attributes are blocked raw browser events like onclick(...) are blocked unsafe URL schemes like javascript: are blocked broad form inclusion like @params( ) is blocked @inherit( ) is blocked @disinherit(*) is allowed because disabling inherited behavior is safer That means MDL can support HTMX without making MDL source depend directly on HTMX’s full raw surface area. New HTMX adapter attributesThe HTMX v2 adapter now supports more behavior attributes: mdl @select-oob(...) @swap-oob(...) @disabled(...) @disinherit(...) @encoding(...) @history-elt(...) @inherit(...) @params(...) @preserve(...) @prompt(...) @replace(...) @request(...) @sync(...) @validate(...) Example: mdl form@api(post /api/profile)@result(profileResult)@swap(replace)@params(email csrfToken)@disable

I grew tired of mocks lying to me and the extra complexity they bring. This led me back to a classic design pattern: the Command. The idea is simple: separate an action from its execution. I wanted a functional take on this, though: no classes, no mutation, just pure functions returning plain data. Most importantly, I wanted it without the academic vocabulary of category theory. The result is a tiny library a developer could master in a single afternoon. It removes the need for mocking libraries and comes with additional benefits such as time-travel debugging. submitted by /u/aijan1 [link] [留言]

Inspired by Nir Eyal's "beliefs are tools" framework Beliefs are tools, not truths. Tech stacks are too. Pick the ones that work for you. Most "tech debt" is actually "belief debt". We hold onto frameworks, patterns, and processes long after they stop serving the product. To build great software, we need to introduce a core rule: If a tech belief or "best practice" doesn’t solve a real problem for you right now, it must be treated as false. Here is how to audit your tech beliefs using 5 filters. 1. ARE THEY USEFUL? The real question isn’t "Is this the best tech?" It’s "Does this serve the user?" Tools are tools. Keep the ones that ship. Bad belief (Treat as False): "We need Kubernetes because it’s the industry standard." Useful belief (True for Now): "A $5 VPS serves 10k users. We’ll use K8s when we have a scaling problem, not a resume problem." If your architecture choice doesn’t make the core loop faster, cheaper, or simpler for users, it’s not serving you. Delete it. 2. ARE THEY TESTED? A useful stack holds up when the world pushes back. Pay attention to production, not the trending blog posts. Bad belief (Treat as False): "Microservices are inherently more scalable"—said before you even have 2 concurrent users. Tested belief (True for Now): "Our monolith handles 50 req/s perfectly. We’ll split services only when latency exceeds 300ms in prod." Load test it. Dogfood it. If it only works in a conference slide deck, it’s a story, not a tool. 3. ARE THEY OPEN? A tech choice you can’t change has stopped being a tool and has become a cage. Hold opinions firmly, but hold implementations loosely. Bad belief (Treat as False): "We’re a React shop forever." Open belief (True for Now): "React serves us today. If HTMX lets us ship this feature in 2 days instead of 2 weeks, we’ll use HTMX." In a famous study on hope, Curt Richter’s rats swam for 60 hours when they believed rescue was coming. Your team will grind for years on a legacy stack if they believe it can actually be r

Optimizing Laravel Performance: Conquering the N+1 Query Problem with Eager Loading As full-stack developers, building performant applications is a continuous challenge. One of the most insidious yet common performance bottlenecks encountered in Laravel applications is the "N+1 query problem." This issue can significantly degrade response times, inflate database load, and ultimately lead to a poor user experience. Fortunately, Laravel provides a powerful and elegant solution: eager loading using the with() method. This tutorial will walk you through understanding the N+1 problem and effectively using eager loading to keep your applications fast and efficient. Understanding the N+1 Query Problem Imagine a scenario where you need to display a list of blog posts, and for each post, you also want to show the name of its author. In a typical Laravel application, your Post model would likely have a belongsTo relationship with a User model. Let's look at a common, yet inefficient, way this might be implemented: 1. The Inefficient N+1 Approach Consider a controller fetching all posts and a view attempting to display the author's name: app/Http/Controllers/PostController.php (N+1 Example): namespace App\Http\Controllers ; use App\Models\Post ; use Illuminate\Http\Request ; class PostController extends Controller { public function index () { $posts = Post :: all (); // Fetches all posts return view ( 'posts.index' , compact ( 'posts' )); } } resources/views/posts/index.blade.php (N+1 Example): <h1>Blog Posts</h1> @foreach ($posts as $post) <div class="post-item"> <h2>{{ $post->title }}</h2> <p>Author: {{ $post->user->name }}</p> <!-- Accessing related user inside loop --> <p>{{ Str::limit($post->body, 150) }}</p> </div> @endforeach Why this is N+1: 1 Query: SELECT * FROM posts; – This initial query fetches all your posts. N Queries: For each $post in the loop, when you access $post->user->name , Laravel lazy-loads the associated User model. If you have 10 posts, this will exe

This is a submission for the GitHub Finish-Up-A-Thon Challenge OpsPilot AI: Reviving an Unfinished AI-Powered Operations Platform with GitHub Copilot What I Built OpsPilot AI is an AI-powered operations assistant designed to help DevOps engineers, SREs, and operations teams investigate incidents, monitor service health, and gain actionable operational insights. The project originally started as a side project inspired by my experience working in production support and monitoring environments. I built an initial version to validate the idea but never fully completed it. The core concept was promising, but several important features and usability improvements were still missing. Through the GitHub Finish-Up-A-Thon Challenge, I revisited the project and transformed it into a much more complete and polished MVP. Key features include: AI-powered incident analysis Root cause investigation assistance MTTR analytics dashboard Service health monitoring Incident trend analysis Executive reporting insights Modern responsive user interface Demo Live Application GitHub Repository OpsPilot AI helps operations teams reduce investigation time and improve operational visibility through AI-powered workflows and analytics. The Comeback Story When I first started OpsPilot AI, it was mainly an experiment to explore how AI could assist operations teams during incident investigations. Although the foundation was built, the project was left unfinished because of limited time and competing priorities. The original version lacked: Incident analytics Meaningful operational insights Root cause investigation workflows Executive reporting capabilities A polished user experience For this challenge, I focused on completing the project and turning it into a usable MVP. What I Added AI Incident Analysis Enhanced the platform with AI-powered incident summaries and investigation assistance. Operations Analytics Added dashboards to track: Mean Time To Resolution (MTTR) Incident frequency Service health

Rails GuardDog: Advanced Security Scanner for Rails Introduction Today I'm excited to announce Rails GuardDog v0.1.0 — an open-source security scanner for Rails that goes beyond traditional tools like Brakeman. While Brakeman is excellent for catching basic Rails vulnerabilities, Rails GuardDog focuses on newer vulnerability classes that most tools miss: AI/LLM prompt injection, DoS/ReDoS patterns, supply chain attacks, and more. The Problem Modern Rails applications face new security challenges: AI/LLM Integration - How do you prevent prompt injection when integrating with ChatGPT, Claude, or Anthropic? ReDoS Attacks - Catastrophic backtracking in regex can bring down your app Supply Chain Attacks - Typosquatted gems that look like popular libraries IDOR Gaps - Objects accessible without proper authorization checks Advanced Secrets - Hardcoded API keys that Brakeman misses Rails GuardDog detects all of these. What is Rails GuardDog? Rails GuardDog is a lightweight gem that adds comprehensive security scanning directly to your Rails applications. 12 Security Checkers SQL Injection - String interpolation in queries XSS - Unescaped output in views CSRF - Disabled protection verification Mass Assignment - permit! vulnerabilities (fixes Brakeman #1942, #1918) Open Redirect - User input in redirects Hardcoded Secrets - API keys, tokens, passwords (always-on, fixes #1989) DoS/ReDoS - Unbounded queries, dangerous regex patterns IDOR - Object access without authorization AI/LLM Prompt Injection - User input flowing to LLMs Rate Limiting - Missing rack-attack configuration Supply Chain - Typosquatted gems using Levenshtein distance GraphQL - Missing field-level authorization Features 📊 Multiple report formats : Console, HTML, JSON 🔍 AST-based analysis : Uses parser gem for deep code understanding ⚡ Async support : Built-in Sidekiq integration 📈 Zero dependencies : Only requires parser and ast gems 🚀 Production-ready : Tested and battle-ready 📝 CWE/OWASP mappings : Every find

https://preview.redd.it/xse99kmwom5h1.png?width=3072&format=png&auto=webp&s=af121137b68e58c524be2f99f3a1b2ab6dacc22e After years of frustration with cloud-based video editors that charge by the minute and require massive server farms, I built OpenVideo - an AI-native video editing platform that does everything in your browser. **What makes it different:** 🚀 **Browser-Based 4K Rendering** - Hardware-accelerated using WebCodecs + PixiJS. Export 4K video without any server-side processing. 🤖 **AI-Native from Day One** - Semantic search across your video library (find clips by content, not filenames), automatic captions with AI transcription, and an AI Director that helps organize your footage. **Tech Stack:** - Frontend: Next.js 15 - Backend: NestJS + Fastify - DB: PostgreSQL + Drizzle ORM - Rendering: PixiJS + WebCodecs - AI: Gemini API + pgvector It's open source and I'd love feedback from the community. Check it out: https://github.com/openvideodev/openvideo What features would you want to see in a browser-based video editor? submitted by /u/snapmotion [link] [留言]

A lot has changed since I posted this 6 months ago. serverlist.dev is a comparison tool for VPS, Dedicated and GPU Servers. I fetch data multiple times a day and present it fairly with no prioritization or hidden advertisement. You decide which columns to sort, which values to filter and which product matters most to you. When I last posted this on r/webdev I got five main pieces of feedback: We would like a "Compact view" option --> Done Some CTA and other strings seem pushy ("Claim Deal") --> Improved The site is lacking any additional value beside being a data catalogue --> read more below The filter need debounce and the whole table has very bad performance --> I significantly imrpoved the table performance by using tanstack virtualization. Sorting and filtering anything is now instant! We would like cPanel, Plesk, Managed properties --> still working on that. I am also thinking of "support IaC" what other information might be relevant for you? Since the last time I also worked on many new features: Hourly Pricing where applicable I now show the hourly price of a product. You can also filter for "Hourly price available" In-Table Comparison (desktop version only) when you select one product with the checkbox on the left, all other product's values are either green or red depending on their relative performance. Helping you to quickly identify if there might be a better deal that you overlooked. Product specific page clicking the compare button on a product or clicking its name now brigns you to a more detailed page showing the historical price change of that product and also two categories "What you get for a similar price" and "Similar servers by specs" where differences are also marked in green or red colour. Price Index alongside the product specific historical data I am also collecting averages for the entire industry so you can compare all providers at once. Right now I have "RAM per 1€", "CPU Cores per 1€" and the average price for generic SKU tiers like 4G

Why we need it ? Suppose we have multiple databases and want to distribute data among them. Instead of searching every database when we need some data, we use a rule that tells us exactly which database should store a particular record. Method 1: Modulo Based Distribution Imagine we have 3 databases DB-A , DB-B , DB-C Each record has a unique ID. Now We decide the database using ID % Number_of_Databases for e.g. 16 % 3 = 1 So record 16 goes to database index 1 (DB-B). This works fine until we add another database. The same record becomes 16 % 4 = 0 Now record 16 should be stored in DB-A instead of DB-B. The problem is that when the number of databases changes, a huge amount of data gets remapped to different databases. This can cause Massive data migration , Increased CPU and network usage Method 2: Consistent Hashing Instead of using modulo, imagine a circular ring numbered from 0 to 99. We place our databases on the ring: DB-A -> 0 DB-B -> 25 DB-C -> 50 DB-D -> 75 Now we pass the data unique id through a hash function and it will give the location of that data on the ring for e.g. User ID = 12345 hash(12345) = 42 now we get the position we Move clockwise. Store the data in the first database you encounter This means we store the 42 position data at the DB-C Now What Happens When We Add a New Database? Suppose we add DB-E -> 37 now only the data between 26 to 37 needs to move from DB-C to DB-E. The rest of the data stays exactly where it was. This is the biggest advantage of Consistent Hashing much less data migration , easier scaling , lower operational cost Now there is one more thing in this method which is Virtual Nodes One issue is that some databases may receive much more traffic than others. To balance the load, the same database can appear multiple times on the ring. DB-A -> 0, 40, 80 DB-B -> 25, 65 DB-C -> 13, 50, 90 DB-D -> 75 These extra positions are called virtual nodes. Any corrections? Is there anything else I should know about this topic? Please let

I had an interview with a big observability company and I wanted to impress the interviewer, with my recent interest in development with C, I built a simple microservice project using golang and created a fully usable C microservice that has Redis and an HTTP server included, and more.. It was very fun seeing this side of C and to know my personal limits and challenge them. It was a cool project and I learned a lot :) btw; I got rejected and didn't even have the chance to show my project in the interview :( You can checkout the project on github: https://github.com/AhmedAbouelkher/micro_market/tree/main/invoice-service Happy to hear your thoughts. submitted by /u/AhmedMahmoud201 [link] [留言]

I was unlocking my phone 60 times a day just to see my todos, calendar, and unread counts. Every unlock pulled me out of whatever I was doing. So I built a black-and-white display that shows it all at a glance. It sits on my desk like a picture frame. No backlight. No notifications. No sounds. How it works: Raspberry Pi driving a 7.5" Waveshare e-ink panel Server renders the whole screen as an 800×480 1-bit PNG with node-canvas The Pi just fetches the image and draws it (e-ink hates fast refreshes, so this keeps it sipping power) Pulls from Todoist, Google Calendar, weather, and RSS Updates every 30 minutes Now, phone unlocks dropped from 60 a day to about 15. The info didn't go anywhere, it just stopped living behind a lock screen. It is completely free and open-source (still in wip) https://quietdash.com EDIT: wrong title, I didn't build the eink display, I built the dashboard that lives on it submitted by /u/InnerPhilosophy4897 [link] [留言]

Hey r/webdev , I recently built Cyclic Habits, a habit tracker that replaces traditional checklists with a living circular clock face where your habits appear as glowing orbit rings. This lets you see your daily momentum and balance at a glance in a more intuitive and visual way. It features an immersive Focus Mode, satisfying haptics, clean analytics, full offline support. The web app is live here: https://cyclichabits.vercel.app submitted by /u/A_J07 [link] [留言]

Most developers learn CSS specificity once. They remember: #id > .class > div Then move on. Until one day… Everything looks correct. The CSS is present. The selector is correct. The z-index looks higher. And yet the UI is broken. That’s when CSS specificity stops being a beginner topic and becomes a production debugging problem. The Production Incident That Started This Recently, I was working on a microfrontend application. Everything worked fine initially. I opened a page, launched a modal and the UI looked correct. Then I navigated to another microfrontend. Its CSS got loaded. After returning to the original microfrontend, suddenly: ❌ Modal appeared behind page content ❌ Overlay behaved incorrectly ❌ z-index looked correct but wasn't working DevTools showed my CSS rule still existed. Yet another CSS rule was winning. The culprit? CSS Specificity. 🧠 What is CSS Specificity? CSS specificity is the algorithm browsers use to decide: Which CSS rule wins when multiple rules target the same element. Browsers don't simply apply: "The last CSS rule." That's one of the biggest misconceptions. Specificity is calculated first. Only when specificity is equal does source order become important. ⚔️ Example .modal { z-index : 9999 ; } .some-library .modal { z-index : 100 ; } HTML: <div class= "some-library" > <div class= "modal" ></div> </div> Many developers expect: .modal to win because the value is larger. But CSS doesn't compare values first. It compares selectors. 🧮 How Specificity Works Specificity is usually represented as: ID - CLASS - TYPE Specificity Table Selector Specificity * 0-0-0 div 0-0-1 .modal 0-1-0 [type="text"] 0-1-0 :hover 0-1-0 #dialog 1-0-0 Inline Style Highest MDN defines specificity as the weight browsers calculate to determine which declaration gets applied when multiple selectors match the same element. Example Calculation Selector: button .primary Contains: button → 0 -0-1 .primary → 0 -1-0 Total: 0-1-1 Another selector: #header button .primary Contai

I'm a frontend developer (react) with about 7 years experience working on design systems, component libraries, and static site generators integrated with CMS. I've been out of work for months now and am finding it really difficult to land interviews let alone job offers, and am considering going freelance with the aim of building basic websites for small businesses. I'll be targeting physio/wellness businesses, so wiring up contact us forms and integrating booking systems is about as complicated as it'll get on a technical level. The client should be able to make basic content updates like adding blog posts or updating employee profiles on a "meet the team" page. Even if I manage to get clients on retainer I want to do what's right by them, so while I'd be most at home building a site with Astro and hooking it up to Contentful, I doubt that's the most client-friendly offering. I've been playing around with WordPress but on first impressions it feels very cumbersome. So it got me thinking what other freelance developers use and feel works well for them and their clients. submitted by /u/TheCowardlyPickle [link] [留言]