标签：#dev

You can't imagine how bad my experience with Next.js has been recently. I have two projects running on the same Ubuntu laptop: One Next.js app One TanStack app The Next.js dev server was literally the biggest process on my entire machine, sitting at almost 4GB of RAM and absolutely murdering my old Lenovo. Even Brave and VScode consume less memory. Meanwhile, the TanStack app was using around 800MB. Still not amazing, but nowhere near as insane. Out of frustration, I asked an AI to help optimize the Next.js setup. It ended up changing some config to force Webpack instead of the default Turbopack setup and also added limits to how large the cache could grow. Believe it or not, memory usage dropped from nearly 4GB down to around 1–2GB. That's still a ridiculous amount of RAM for a dev server, but at least it no longer tries to consume every available resource on my laptop. Maybe Vercel is thinking that everybody has a fancy Macbook M4 with 64GB ram?! P.S. both codebases are small, max 50k lines in each. submitted by /u/hanzo2349 [link] [留言]

I added real-time activity logging and security scoring to my Claude Code dashboard The problem with just seeing costs Knowing how much you spent is useful. But it's not enough. The real question is: what is your AI actually doing? Which files did it read? Which commands did it run? Is your environment even safe to run it in? I couldn't answer any of those. So I built the answers in. What's new in v0.1.17 Activity Log — see every action in real-time Claude Code logs everything via hooks. Every file read. Every command executed. Every API call. Risk-labeled. Timestamped. Live. Set it up once in ~/.claude/settings.json : { "hooks" : { "PostToolUse" : [{ "matcher" : ".*" , "hooks" : [{ "type" : "command" , "command" : "curl -sf -X POST http://localhost:3000/api/actions -H 'Content-Type: application/json' --data-binary @- 2>/dev/null || true" }] }] } } Then open http://localhost:3000/activity . Watch your AI's actions stream in real-time. This is the audit layer AI agents have been missing. Security Score — how safe is your Claude Code environment? Scored out of 100. Checks 7 things: Is Bash(sudo *) in your allow list? (-20) Is ~/.ssh/** in your deny list? (-20) Is Bash(curl *) unrestricted? (-15) Are .env files protected? (-15) Is strictMode enabled? (-10) Is Bash(rm *) restricted? (-10) Are hooks configured? (-5) I scored 90/100. What's yours? The point isn't to shame anyone. It's to make the invisible visible — so you can make informed decisions about what your AI is allowed to do. Try it npm install -g @notenkidev/claude-token-dashboard claude-token-dashboard Open http://localhost:3000 GitHub: https://github.com/notenkitoclient-cpu/claude-token-dashboard This started as a simple token counter. It's becoming something bigger — an observability layer for AI agents. More coming.

Your security scanner just came back with 6 flagged items. All missing HTTP headers. You did what any reasonable developer does: Googled each one, copy-pasted the recommended config, and shipped a fix in 20 minutes. Job done. Security score green. PR merged. You also probably shipped at least two of them wrong. Here is the thing nobody tells you about HTTP security headers: knowing what to add is the easy part. Understanding why it matters, when it actually doesn't, and how a misconfigured one breaks your app in production — that's where most developers fall short. This isn't another "add these 7 headers to secure your app" post. This is the one that explains what's actually happening. First, The Contrarian Take Missing a security header is not automatically a vulnerability. If you do bug bounties, this will save you a rejection. If you're a dev, it'll save you from cargo-culting configs that don't apply to your app. Context is king. X-Frame-Options: DENY is a valid security header. YouTube doesn't use it. Because the entire point of YouTube is for people to embed its videos in iframes. Applying that header would break a core product feature. That's not a security oversight — it's a deliberate design decision. A missing Content-Security-Policy header is not a vulnerability in itself. It only becomes relevant if you already have an XSS problem to mitigate. CSP is defense-in-depth. Not a fix for a broken input sanitisation layer. This matters because a lot of developers (and worse, automated scanners) treat these headers like a binary checklist. Present = secure. Missing = vulnerable. Reality is messier than that. Now — with that said — let's talk about what each one actually does. #1. HTTP Strict Transport Security (HSTS) Most developers think HSTS is just "force HTTPS." It's more precise than that. When your app redirects http:// to https:// , that first request is still unencrypted. For a fraction of a second, on a public network, that window exists. An attacker on

This series provides your roadmap for the machine age, exploring how to move from vulnerable prototypes to resilient systems through layered defense, robust MLOps, and integrated governance. By Claudio Masolo

I’m building a company monitoring app that reads Firebase data coming from multiple bus DMS devices and returns KPIs for a Svelte dashboard. Is FastAPI a good backend choice for this, especially for a secure, production-ready, scalable, and maintainable API? If not give me please alternatives . I also need a good FastAPI template or guide to start from, a secure way to connect it with Firebase, and the best way to package the app for both Windows and Android. What I need to use ? submitted by /u/Successful-Life8510 [link] [留言]

TypeORM 1.0 is the first major release of the open-source TypeScript and JavaScript ORM since its inception in 2016. This version modernizes platform requirements, removes deprecated APIs, and introduces numerous bug fixes and new features. TypeORM now supports ECMAScript 2023, dropping older Node.js versions and dependencies while enhancing security and migration processes. By Daniel Curtis

Since mid-March 2026, a significant chunk of Claude users have been hitting this error whenever Claude tries to render an inline diagram, chart, or interactive widget: Failed to set up MCP app for "visualize". Check that claudemcpcontent.com is not blocked by your network or browser. The instinct is to blame your network. I went through the same cycle — switched DNS to Cloudflare 1.1.1.1, tried Google 8.8.8.8, disabled browser extensions, tested across browsers. Nothing worked. Then I ran a direct DNS lookup: nslookup claudemcpcontent.com 1.1.1.1 Output: Server: 1.1.1.1 Address: 1.1.1.1# 53 *** Can't find claudemcpcontent.com: No answer Same result with 8.8.8.8. The domain doesn't resolve — at all, from any resolver. Not a user-side issue. What's Actually Happening Claude's visualize feature depends on an external domain — claudemcpcontent.com — to serve the MCP app that renders inline SVG/HTML widgets. When that domain goes down, the feature breaks silently with a misleading error that makes it look like a local network problem. There's an open GitHub issue tracking this (#34820 on anthropics/claude-code) filed March 16, 2026. It has 50+ affected users, no official fix, and was labeled invalid because it was filed on the wrong repo. Anthropic hasn't responded substantively. The visualize infrastructure had multiple incidents throughout April 2026. The Workaround Instead of asking Claude to generate a diagram or chart (which triggers the broken MCP visualizer), ask it to generate a PNG file using Pillow. Instead of: "Create a bar chart showing X" Say: "Create a bar chart showing X as a PNG file using Pillow" Claude writes Python, executes it via its bash tool, and drops a downloadable PNG in the outputs directory. No MCP dependency. No claudemcpcontent.com . Completely different rendering pipeline. Works for bar charts, line graphs, flowcharts, architecture diagrams — anything you'd normally visualize inline. TIL Claude's inline visualizer depends on an external dom

When building a small content site, the framework is usually not the hardest part. The harder part is deciding what each page should be responsible for. A lot of sites start as a simple article list. That works for a while, but it becomes messy when visitors arrive with different search intents. Some users want to learn what something means. Some want download or setup information. Others are trying to fix a specific issue. Those users should not all land on the same generic page. The structure I use For a small Next.js content hub, I like to separate routes by intent: Homepage: broad entry point Learn hub: basic explanations and guides Learn detail pages: specific guide topics Download page: download or install intent Fix hub: troubleshooting entry point Fix detail pages: specific issue pages English and Japanese routes: language-specific entry points This structure is simple, but it keeps the site easier to maintain. Page role comes first Before writing a page, I define its role. A learn page answers what something is, how it works, and what a beginner should understand first. A download page answers where a user should get something, what should be checked before installing, and which platform or device matters. A fix page answers what is not working, what should be checked first, and whether the problem is related to permissions, notifications, device settings, or installation. The page role decides the title, description, internal links, and body structure. Why this helps SEO This approach helps avoid pages competing with each other. For example, a download page should not try to rank for every tutorial query. A troubleshooting page should not read like a general homepage. Each page can link to related pages, but the primary intent stays clear. That makes the site cleaner for both users and search engines. Metadata and sitemap discipline In a Next.js App Router project, I also like to keep metadata and sitemap updates close to the route change. For example: If

It is time to put my proposition made in my previous blog post to the test. Is it possible to spec an application for execution by an agent without encoding it in source? Let's find out. One type of application every knowledge worker is familiar with is task management. Every task has a lifecycle status, dependencies on other tasks, and a history of progress. Let's give agents their own. TaskTrack is a simple but non-trivial task management system variant implemented as a Specify spec. It goes beyond checkbox-based to-do lists that agents sometimes use internally and mimics the key system features listed above. TaskTrack defines two procedures: a "Plan Authoring Run" to create an interconnected set of tasks from requirements and a "Plan Execution Run" to advance a previously authored plan toward completion. One execution run might not always be enough to achieve completion, because TaskTrack allows requesting human feedback and incorporating it during the next execution run. Furthermore, every execution run is divided into "Task Processing Run" sub-procedures to allow for advanced agent context management. TaskTrack implements all of this in less than 300 lines of text. If the implementation used source code, then, depending on the programming language, this would be enough space to implement only the required file I/O operations (TaskTrack uses files for simplicity, not a database). Natural language can easily become quite bloated, but a stringent, scientific writing style and extensive use of what the Specify standard offers can effectively counter that. The official test is, how could it be any other way, the implementation of yet another uninspired Breakout clone. The requirements, the completed TaskTrack plan, and the deliverable are contained in the repository. If you want to run the test yourself, the included README file contains the necessary information, including the launch prompts for both the authoring agent and the execution agent. Please note how both

Fallback rules are where an AI API gateway becomes operationally valuable. The goal is not to blindly retry every failed LLM call. The goal is to choose the right backup model, provider, or budget path based on the workflow, customer tier, latency target, and risk of a lower-quality answer. A practical fallback policy should define: which failures are retryable; which workflows may downgrade models; which customers or API keys are allowed to use premium fallback routes; how budget caps change routing behavior; what metadata gets logged so the team can debug cost and quality later. 1. Classify traffic before routing Do not write one global fallback rule for every request. Start by classifying traffic: Critical user-facing : support chat, checkout assistance, customer-facing agent answers. Non-critical user-facing : summaries, title generation, enrichment, recommendations. Internal automation : triage, labeling, data cleanup, back-office agents. Batch jobs : long-running summarization, extraction, report generation. Experiments : tests, staging, evaluation, prompt tuning. Each class should have a different fallback budget and quality floor. 2. Decide what counts as a retryable failure Good retry candidates: upstream timeout; 429 rate limit; temporary 5xx provider error; network interruption; overloaded model endpoint; streaming connection drop before useful output. Poor retry candidates: invalid API key; malformed request payload; unsupported tool-call schema; content policy rejection; user quota exhausted; deterministic validation failure. Retrying non-retryable failures usually burns tokens and hides product bugs. 3. Example fallback policy matrix Traffic class Primary route First fallback Second fallback Hard stop Critical user-facing frontier model same-class model on second provider cheaper model with explicit uncertainty after 2 provider failures Non-critical user-facing balanced model cheaper model cached/default response after budget cap Internal automation lo

I keep seeing shit all over about companies producing 95% of their code using AI. I see people saying they now write 100k lines of code a day. I am seeing this everywhere and as a CTO and solo eng, this has given me major fomo. For the past few months I have been working on everything I can to get to this level. I tried Ralph loop, goals, compound engineering, and my own mixture of things. No matter what I just keep finding that slop is coming out the other end and my time to review and fix (by prompting or by manually fixing) is 1. feeling like a pretty huge time sink and 2. sucks way worse than just using my brain to write to code. it is much less rewarding/ fun fixing retarded code than it is writing something elegant myself. I know AI is a huge productivity booster when I can use it for internal tools, scripts, prototypes, and boiler plate or highly defined work. other than that, it seems like it is kind of a time sink, especially for production and legacy apps. You guys experiencing this too? seriously, is the shit about crazy good ai output out there real and if so, how do I attain it? my tech advisor thinks it’s total BS and even said Google engineering is pulling back their AI use in coding some submitted by /u/l300TS [link] [留言]

My Previous Deployment Choices Since I mostly do web development using Ruby on Rails, these were my go-to options for deployment: PaaS like Heroku, Render, or Railway Serverless setups (Cloud Run + NeonDB) Honestly, I didn’t have any major complaints. PaaS costs a bit more, but in return, you get a clean UI and dead-simple workflows like GitHub integration. If the cost bothered me, I’d just go serverless. For my personal servers—where huge traffic isn't exactly a concern—going serverless meant the app would just sleep when inactive, allowing me to run services for around 50 yen a month. Compared to the headache of clicking through complex AWS or GCP dashboards to piece things together based on architecture diagrams, it was a walk in the park. I was perfectly content. Seriously. Kamal Became the Default in Rails 8 Everything changed when Rails 8 dropped. I heard they adopted Kamal as the official deployment tool. Kamal — Deploy web apps anywhere From bare metal to cloud VMs using Docker, deploy web apps anywhere with zero downtime. kamal-deploy.org Kamal? Is deploying really going to get any easier? I mean, I’m doing completely fine right now, though... That’s what I thought. But once I gave it a shot, it felt like being struck by lightning. This is an absolute game-changer. All you have to do is run rails new , throw your server's IP address into deploy.yml , and run kamal setup . That’s it—your app is deployed. For every release after that, it's just kamal deploy . I couldn't believe how simple the deployment workflow was. # deploy.yml service : my-app image : my-user/my-app servers : web : - 192.0.2.1 # Just swap in your VPS IP address here proxy : ssl : true host : app.example.com # Set up your domain here Sure, you have to bring your own server, but Kamal prides itself on being able to deploy absolutely anywhere. I rented a couple of VPS instances from Hetzner for about $10 a month each to host SuperRails and LazyCafe . From what I looked into, you can't really

Im a freshman college student, for a credit, I have to intern at an NGO and do community outreaches The one that I'm fixed to join asked me to revamp their website, understandable since I'm an engineering student, except i only have minimal knowledge. I'm interning for a month and would really like to learn this into a learning lesson but as of now, im extremely overwhelmed and have no idea where to start. All I've done is very basic HTML, CSS and JAVASCRIPT, nothing practical on an actual website. I would really really appreciate any help with how to approach this challenge. All help would be appreciated, thank you submitted by /u/Internal_Sector_1802 [link] [留言]

Web Security: OWASP Top 10 and How to Fix Them (2026) Security isn't a feature you add later — it's built into every layer. Here's how the top 10 vulnerabilities work and how to prevent them. #1 Broken Access Control // ❌ Vulnerable: User can access anyone's data app . get ( ' /api/users/:id ' , ( req , res ) => { const user = await db . users . findById ( req . params . id ); res . json ( user ); // No check if requester owns this data! }); // ✅ Secure: Always verify ownership app . get ( ' /api/users/:id ' , async ( req , res ) => { // Check: Is the logged-in user requesting their OWN data? if ( req . params . id !== req . user . id && req . user . role !== ' admin ' ) { return res . status ( 403 ). json ({ error : ' Access denied ' }); } const user = await db . users . findById ( req . params . id ); res . json ( user ); }); // ✅ Better: Use middleware for all protected routes const requireOwnership = ( resourceType ) => async ( req , res , next ) => { const resource = await db [ resourceType ]. findById ( req . params . id ); if ( ! resource ) return res . status ( 404 ). json ({ error : ' Not found ' }); if ( resource . userId !== req . user . id && req . user . role !== ' admin ' ) { return res . status ( 403 ). json ({ error : ' Access denied ' }); } req . resource = resource ; // Attach for route handler next (); }; app . get ( ' /api/posts/:id ' , auth , requireOwnership ( ' posts ' ), ( req , res ) => { res . json ( req . resource ); }); #2 Cryptographic Failures // ❌ Storing passwords in plain text or weak hashing const password = " password123 " ; db . users . insert ({ email , password }); // NEVER DO THIS! // ✅ Proper password hashing with bcrypt const bcrypt = require ( ' bcrypt ' ); const SALT_ROUNDS = 12 ; // Higher = slower = more secure (12 is good balance) async function hashPassword ( password ) { return bcrypt . hash ( password , SALT_ROUNDS ); } async function comparePassword ( password , hash ) { return bcrypt . compare ( password , hash ); /

Web Security: OWASP Top 10 and How to Fix Them (2026) Security isn't a feature you add later — it's built into every layer. Here's how the top 10 vulnerabilities work and how to prevent them. #1 Broken Access Control // ❌ Vulnerable: User can access anyone's data app . get ( ' /api/users/:id ' , ( req , res ) => { const user = await db . users . findById ( req . params . id ); res . json ( user ); // No check if requester owns this data! }); // ✅ Secure: Always verify ownership app . get ( ' /api/users/:id ' , async ( req , res ) => { // Check: Is the logged-in user requesting their OWN data? if ( req . params . id !== req . user . id && req . user . role !== ' admin ' ) { return res . status ( 403 ). json ({ error : ' Access denied ' }); } const user = await db . users . findById ( req . params . id ); res . json ( user ); }); // ✅ Better: Use middleware for all protected routes const requireOwnership = ( resourceType ) => async ( req , res , next ) => { const resource = await db [ resourceType ]. findById ( req . params . id ); if ( ! resource ) return res . status ( 404 ). json ({ error : ' Not found ' }); if ( resource . userId !== req . user . id && req . user . role !== ' admin ' ) { return res . status ( 403 ). json ({ error : ' Access denied ' }); } req . resource = resource ; // Attach for route handler next (); }; app . get ( ' /api/posts/:id ' , auth , requireOwnership ( ' posts ' ), ( req , res ) => { res . json ( req . resource ); }); #2 Cryptographic Failures // ❌ Storing passwords in plain text or weak hashing const password = " password123 " ; db . users . insert ({ email , password }); // NEVER DO THIS! // ✅ Proper password hashing with bcrypt const bcrypt = require ( ' bcrypt ' ); const SALT_ROUNDS = 12 ; // Higher = slower = more secure (12 is good balance) async function hashPassword ( password ) { return bcrypt . hash ( password , SALT_ROUNDS ); } async function comparePassword ( password , hash ) { return bcrypt . compare ( password , hash ); /

Big update. The PDF hub is fully built out and a whole set of Office conversion tools just shipped. PDF hub complete (18 tools): Merge, split, compress, rotate, reorder, extract pages, remove pages, watermark, page numbers, protect, unlock, extract images, and more. Office ↔ PDF (6 tools): Word to PDF Excel to PDF PowerPoint to PDF PDF to Word PDF to Excel PDF to PowerPoint Office ↔ Office (3 tools, fully browser-side, no file upload): Word to Excel Excel to Word PowerPoint to Word Other recent updates: WordPress plugin updated to include the new PDF tools Chrome extension v1.1.0 updated with PDF support 1.6K pages now indexed on Google across 25 languages That brings the site to 61 free tools across three hubs (Image, PDF, Office), no signup required.

Building a Real-Time Chat Feature with Django Channels and React Real-time features have become table stakes for modern web applications. Whether it is a customer support widget, a collaborative tool, or a social platform, users expect instant communication without page refreshes. In this article, I will walk through how we built a production-ready real-time chat feature using Django Channels and React at UCDREAMS. Why Django Channels? Django is traditionally synchronous. It handles one request at a time per worker. This works fine for standard HTTP requests, but WebSocket connections require persistent, bidirectional communication. Django Channels extends Django to handle WebSockets, background tasks, and asynchronous protocols alongside traditional HTTP. The beauty of Channels is that it does not replace Django. It layers on top, letting you keep your existing models, ORM, authentication, and admin panel while adding real-time capabilities. For a team already invested in Django, this is a massive advantage over introducing an entirely separate real-time server. Setting Up the Backend Start by installing Django Channels and a channel layer. Redis is the recommended backend for production use: channels == 4.0 . 0 channels - redis == 4.2 . 0 daphne == 4.0 . 0 Configure your Django settings: INSTALLED_APPS = [ ... " channels " , ] ASGI_APPLICATION = " your_project.asgi.application " CHANNEL_LAYERS = { " default " : { " BACKEND " : " channels_redis.core.RedisChannelLayer " , " CONFIG " : { " hosts " : [( " 127.0.0.1 " , 6379 )], }, }, } Building the WebSocket Consumer The consumer handles WebSocket connections: import json from channels.generic.websocket import AsyncWebsocketConsumer class ChatConsumer ( AsyncWebsocketConsumer ): async def connect ( self ): self . room_name = self . scope [ " url_route " ][ " kwargs " ][ " room_name " ] self . room_group_name = f " chat_ { self . room_name } " await self . channel_layer . group_add ( self . room_group_name , self . cha

I work on a computer all day. Multiple projects, lots of switching, constant interruptions. A while back I noticed I was losing track of my own work. Not really the big things but mostly the small stuff. The decision I made on Tuesday about why I structured something a certain way. The thing I was halfway through when a Slack message pulled me away. The task that never made it onto any list because it felt too small to write down (but I ended up forgetting about after lunch until 2 days later). By Friday I'd look back at the week and genuinely struggle to piece together everything I actually did. I tried obsidian (and still actively use it). I also tried just being more disciplined. None of it fully stuck because the friction of capturing things manually meant I only ever captured the stuff I already remembered. The messy ad-hoc stuff that actually eats a lot of my time never made it anywhere. I'm curious if other people deal with this. Not the big project management stuff because that's mostly solved, but rather, the stuff in between. The context that lives in your head and disappears the moment you get interrupted. How do you handle it?

I've been working on a map poster editor as a side project. You pick a location, choose a style and color palette, and export a print-quality map. The tricky part is that each palette controls 15+ individual colors (road hierarchy from motorway down to service roads, water, terrain, buildings, text, etc.) and there are 80+ palettes organized into three categories. Current flow in screenshots: Full editor, style controls in the left sidebar Entry point with active palette preview + Browse and Fine Tune buttons Category picker (Terrain / Urban / Balanced), these are basically folders describing what the palette emphasizes Palette grid within a category, around 10 per category with swatch thumbnails Fine Tune panel with every individual hex color, grouped by section (Base, Roads, Water & Land, Buildings, Terrain) The tension is that casual users want "pick a palette, done" in one or two clicks. But power users want to tweak individual road colors or swap the water tone. Right now these are two completely separate flows and I'm not sure either one is great. Things bugging me: Two-click drill-down (category then palette) before anything changes. Is that necessary organization or just unnecessary friction? Fine Tune is hidden behind a button. People who find it love it, but is it too buried? 15+ hex inputs grouped by label. It works but feels intimidating. Are there better patterns for this? The preview problem. Right now palettes show diagonal color swatches, which are compact but pretty abstract. A mini-map preview showing each palette applied would be way more useful, but then I'd basically be replacing a clean card grid with a wall of tiny maps that are probably too small to actually read. Would a hover preview work? A single shared preview pane that updates as you browse? Or are swatches actually fine and I'm just overthinking this? If you landed on this editor cold and wanted to change the color scheme, what would you expect to see? What would you change? React + Ma