标签：#Java

Ok so first, let me be honest. This post is partly me venting. I've been maintaining node-dependency-injection for about 9 years now. 300 stars on GitHub. Not exactly viral. And every time I look at InversifyJS or tsyringe climbing in popularity I think "yeah, but at what cost". So let me explain my problem with decorators. The coupling nobody talks about When you write this: @ Injectable () export class UserService { constructor (@ Inject ( MAILER_TOKEN ) private mailer : IMailer ) {} } Where does that @Injectable() live? In your DI framework. Which means your UserService — which is domain logic, business rules, the thing that should outlive any framework decision — now has a direct dependency on your IoC container library. Your domain knows about your infrastructure. That's the wrong direction. I know, I know. "It's just a decorator, it doesn't do anything". But it's still an import. It's still coupling. And if you ever want to swap the container, or move that service somewhere else, or just test it without spinning up the whole container — you now have to think about it. With NDI, your service is just a class: export class UserService { constructor ( private mailer : IMailer ) {} } That's it. No imports from my library. No decorators. No metadata. The service doesn't know it's being injected. The wiring lives completely outside — in a YAML file or in a bootstrap file. Your domain stays clean. "But Symfony does decorators and it's fine" Symfony doesn't use decorators in services actually. The DI config is external — YAML, XML, PHP config files. Your service is just a PHP class. That's literally what inspired NDI from the beginning. What NDI actually does Quick example. You have two payment providers and you want to inject the right one based on context: services : payment.stripe : class : ' payments/StripePayment' keyed : group : payment key : stripe default : true payment.paypal : class : ' payments/PaypalPayment' keyed : group : payment key : paypal checkout.ser

Hello Dev Community! 👋 It is officially Day 41 of my continuous streak toward full-stack MERN engineering! Yesterday, I migrated my codebase from native Node boilerplate to Express.js. Today, I dived straight into the absolute core mechanism that makes Express so incredibly powerful in Prashant Sir's (Complete Coding) masterclass : Middlewares . Before today, I thought requests hit an endpoint and immediately returned a response. Today, I learned how to intercept, inspect, and modify that request before it ever reaches the final route handler! 🧠 Key Learnings From Node.js Lecture 9 (Middlewares) A middleware is essentially a function that executes during the Request-Response cycle, having full access to the req , res , and the next middleware function in line. Here is the technical breakdown: 1. The Anatomy of Middleware Unlike a standard route handler that takes (req, res) , a middleware takes a third powerful argument: next . If you don't invoke next() , your request will hang forever and the browser will eventually timeout! 2. Built-in vs. Custom Middleware Custom Middleware: Wrote my own custom functions using app.use((req, res, next) => { ... }) to act as a security guard or global logger. Built-in Middleware: Explored how Express natively handles data types using structures like express.json() and express.urlencoded() , which automatically parse inbound request bodies so we don't have to manually handle streams anymore! javascript const express = require("express"); const app = express(); // Custom Global Logging Middleware app.use((req, res, next) => { console.log(`[${new Date().toISOString()}] ${req.method} request to ${req.url}`); next(); // Pass control to the next handler in line! }); app.get("/dashboard", (req, res) => { res.send("Welcome to the secure dashboard layer!"); }); app.listen(8000);

Why your brain learns faster by doing than by studying, and the neuroscience that explains...

The problem I kept running into I'm a chronic tab hoarder. At any given time I've got 40–80 tabs open across two windows. Chrome's built-in Memory Saver is aggressive in the wrong ways — it hibernates tabs I'm actively referencing. And the built-in task manager is a two-step detour that still doesn't tell me which tabs I should actually close. So I built Tab Memory Manager. What it does Per-tab memory estimates — A live MB count next to every open tab. Sorted by memory usage by default. There's a live total on the toolbar icon so you always know what Chrome is consuming right now. Smart suggestions — The extension flags your biggest, stalest tabs: ones that are idle the longest and consuming the most. It never suggests your active tab, pinned tabs, tabs playing audio, or domains you've whitelisted. Hibernate, don't close — This was the core design decision. Hibernating frees the memory but keeps the tab alive in your strip — it reloads when you click it. Much safer than closing, especially mid-research. Bulk cleanup — Select multiple tabs or hit Apply on the suggestions panel. See the total memory you'll reclaim before you commit. Undo list — Closed something by mistake? There's a "Recently cleaned" panel. One click to restore. Tab grouping — Groups all your open tabs by domain into color-coded Chrome tab groups, instantly. The interesting technical bit: memory estimates Chrome's stable extension API doesn't expose exact per-tab memory. The chrome.processes API that does exists only on Dev and Canary builds — not the Chrome that 99% of people use. So Tab Memory Manager uses calibrated estimates based on tab state, domain patterns, and known Chrome process overhead. These are clearly labeled "est." in the UI. If you're on Dev or Canary, you can switch on real per-tab memory in settings. The warning Chrome shows about "processes requires dev channel" is a Chrome-generated note about that optional API — the extension works completely normally without it. It's not a bug

One of the challenges I faced while building my LaTeX Writer project was implementing version control and project forking in a storage-efficient way. A typical LaTeX project contains multiple files. Even a simple project usually has a "main.tex" file, bibliography files, images, style files, and other supporting documents. If I stored a complete copy of every file for every version or fork, storage requirements would grow rapidly. Imagine a project with four files and ten versions. Storing the entire project for every version would mean storing the same files repeatedly, even when only one line changed. Forking would create an even bigger problem because every fork would require another complete copy of the project. Instead of accepting this inefficiency, I started researching how large platforms solve the same problem. GitHub was the obvious inspiration. Learning from GitHub GitHub does not store a complete copy of a repository every time a change is made. Instead, it stores content separately and uses references to connect files, commits, and repositories. This idea became the foundation for my own implementation. Project Structure Whenever a new project is created, a default file called "main.tex" is generated automatically. The project itself does not directly contain file contents. Instead, it stores metadata such as: Project ID Owner ID Root Folder ID File References Each file also has its own metadata record containing: File ID File Name Blob ID Project ID Owner ID Folder ID The actual content is not stored inside the file metadata. Instead, the content lives inside a separate entity called a Blob. Loading a Project When the editor loads a project, it reconstructs the directory structure using metadata. The process works like this: Retrieve the project's Root Folder ID. Find all folders belonging to that folder hierarchy. Find all files belonging to each folder. Build the directory tree for the frontend. Because files and folders are stored independently, the

A practical walkthrough of SQL-First persistence: no XML, no Mapper interfaces, no generated queries. I maintain a Java backend that handles ~1M requests/day. For persistence, we used to run MyBatis. The XML was manageable at first, then it wasn't. Dynamic conditions became <if> tag soup. A simple join query needed three files and two languages. We switched to a simpler approach. Here's how it works for the most common case: single-table CRUD. What You Need Java 21+ Spring Boot (any 3.x) A database (H2 for the demo, MySQL/PostgreSQL for production) That's it. No XML parser, no code generator, no annotation processor. The Project pom.xml src/main/java/example/ DemoApplication.java user/ User.java -- entity UserDao.java -- data access UserCond.java -- query conditions src/main/resources/ application.yml schema.sql Three Java files for a complete CRUD API. The Entity @Data @Builder @Table ( "sys_user" ) public class User { @Id private Long id ; private String name ; private Integer age ; private String email ; // ... other fields // These four are auto-managed: private LocalDateTime createTime ; private Long createBy ; private LocalDateTime updateTime ; private Long updateBy ; private Byte dr ; // 0 = active, 1 = soft-deleted } @Table maps to the database table. @Id marks the primary key (Snowflake ID by default). The audit fields and soft-delete marker are handled automatically—you don't set them in business code. The DAO @Repository public class UserDao extends BaseDao < User > { // Empty. All CRUD methods inherited. } BaseDao provides save , saveBatch , update , delete , findById , list , page , count , exists . For single-table operations, this is all you need. The Conditions @Getter @Setter @Builder public class UserCond extends BaseCondition { private String name ; private Integer ageMin ; private Integer ageMax ; private Byte dr ; private Object [] ids ; @Override protected void addCondition () { and ( "name LIKE" , name , 3 ); // 3 = %value% and ( "age >=" , ag

How we built a medicine-substitution engine that refuses to be clever There is a category of bugs where the code looks perfectly correct in code review, the unit tests pass, the demo on stage goes beautifully, and a real person dies. Medicine substitution is one of them. We built Agada — point a phone camera at a medicine strip in India, and the app tells you whether the drug is registered with the regulator, what it does, and whether a chemically identical version is available at the government pharmacy for a fraction of the price. The point is real: Indians spend about ₹65,000 crore a year out of pocket on branded medicines when the same molecule sits in a Jan Aushadhi Kendra at a tenth of the cost. The Dolo-650 story (₹32 vs ₹4.90 for the same paracetamol) is the most famous example, not the only one. The hard part isn't the camera, the OCR, or the price lookup. The hard part is the substitution engine — the piece of code that decides "is this salt the same as that salt." Get that wrong in the wrong direction, and the app cheerfully tells a user that their 500mg anti-epileptic can be replaced with a 200mg one, because the strings look similar. So we built a matcher that refuses to be clever. This post is about the parts we deleted. The starting problem A user scans "Crocin 500mg Tablet IP". A Jan Aushadhi record says "Paracetamol 500 mg". A naive matcher says: both contain "500", both contain "Paracetamol" (or "Acetaminophen", which is the same thing in a different country), ship it. The user buys the generic. Savings: ₹20. Everyone wins. Now consider: Crocin 650 Advance vs Dolo 650 — same molecule, same dose, different brands. Fine. Augmentin 625 vs Augmentin 375 — same two salts, different ratio. The combo tolerance might let it through, but the clinical implication is real. Levofloxacin 500 vs Ofloxacin 400 — both fluoroquinolones, both "similar," but levofloxacin is the levo-isomer of ofloxacin and is dosed at roughly half. A "fuzzy" match here could halve so

📚 Limn Engine — Complete API Reference Quick Navigation Class Purpose Level Display Canvas, game loop, input, camera, scenes 🟢 L1 Component Every visible game object 🟢 L1 Camera Viewport control (follow, shake, zoom) 🟡 L2 move Movement, physics, particles, helpers 🟢 L1 state Read-only query helpers 🟢 L1 TileMap Grid-based levels 🟡 L2 Tctxt Rich text with backgrounds 🟢 L1 Sound Single audio file 🟢 L1 SoundManager Multiple sounds, volume control 🔴 L4 ParticleSystem Emit, burst, continuous emitters 🟠 L3 Sprite Spritesheet animation 🟡 L2 Display The heart of every Limn Engine game. Creates the canvas, runs the game loop, captures input, manages the camera, and controls scenes. Constructor const display = new Display (); Properties Property Type Description .canvas HTMLCanvasElement The game canvas .context CanvasRenderingContext2D 2D drawing context .keys Array Boolean array indexed by keyCode .scene Number Current active scene (default 0) .camera Camera Attached camera instance .deltaTime Number Time since last frame (seconds) .fps Number Current frames per second .frameNo Number Total frames elapsed .x / .y Number false Methods Method Parameters Description .start(w, h, node) width, height, parentNode Initialise canvas and start game loop .perform() — Activate dual-canvas pipeline (call before .start() ) .add(comp, scene) Component, scene number Register a Component for rendering .stop() — Pause the game loop .scale(w, h) width, height Resize canvas after start .backgroundColor(color) CSS color Set background colour .lgradient(dir, c1, c2) direction, color, color Linear gradient background .rgradient(c1, c2) color, color Radial gradient background .fullScreen() — Enter fullscreen .exitScreen() — Exit fullscreen .tileMap() — Build TileMap from display.map and display.tile Usage const display = new Display (); display . perform (); display . start ( 800 , 600 ); display . backgroundColor ( " #0a0a2a " ); const player = new Component ( 40 , 40 , " blue " , 100 , 100 ); d

(Without Fighting upload_max_filesize ) You deploy your app. A user picks a 400 MB video. They hit upload. The progress bar freezes. Then — nothing. You check the logs. POST Content-Length exceeded post_max_size . Again. We've all been there. The fix is usually "raise PHP limits" or "use S3." Both work — until you're on shared hosting, a legacy VPS, or a client who won't touch php.ini . That's the problem Pinion solves. What is Pinion? Pinion is an open-source resumable chunked upload protocol for PHP. Instead of one giant multipart/form-data request, the browser sends the file in small parts (default: 5 MB). The server stores each part, then assembles the final file on disk. Three steps. That's the whole contract: init → upload parts → complete Package Registry Role pinoox/pinion Packagist PHP server engine @pinooxhq/pinion-client npm Browser client Protocol id: pinion · version: 2 Why not just use S3? Object storage is great. But sometimes you need files on your server : A CMS media library on local disk A Laravel app without cloud budget Shared hosting with no S3 SDK An admin panel behind a simple PHP API Pinion isn't a CDN or a storage service. It's a protocol — a stable HTTP contract that works in plain PHP, Laravel, or Pinoox. How it works (30-second version) sequenceDiagram participant Browser participant API participant Disk Browser->>API: POST /init (filename, size, fingerprint) API-->>Browser: upload_id, chunk_size, missing_indexes loop Each part Browser->>API: POST /upload (chunk + SHA-256 hash) API->>Disk: store part end Browser->>API: POST /complete API->>Disk: assemble file API-->>Browser: done ✓ Resume is built in. The client sends a fingerprint ( name:size:lastModified:type ). If the connection drops, the same file picks up where it left off — only missing parts are re-uploaded. Integrity too. Each part gets a SHA-256 chunk_hash . The server can reject corrupted chunks before they pollute your disk. Server side: 10 lines of PHP composer require pinoo

I promised myself that starting this week I'd switch to lighter topics. But on Monday, my JSNation...

You've written retry logic. It probably looks something like this: async function withRetry ( fn , retries = 3 ) { for ( let i = 0 ; i < retries ; i ++ ) { try { return await fn (); } catch ( err ) { if ( i === retries - 1 ) throw err ; await new Promise ( r => setTimeout ( r , 200 * ( i + 1 ))); } } } You test it locally. You simulate a slow dependency like this: const fakeDB = async () => { await new Promise ( r => setTimeout ( r , 200 )); // simulate DB return { id : 1 , name : ' test ' }; }; Your retry logic works. Tests pass. You ship it. Then in production, your app starts dropping requests under load. The problem isn't your retry logic. It's your fake. Real dependencies don't have flat latency Here's what your Postgres instance actually looks like in production: p50: 5ms — half of all queries finish in under 5ms p95: 50ms — 95% finish under 50ms p99: 200ms — 99% finish under 200ms p99.9: 2000ms — that one unlucky query during a GC pause Your setTimeout(fn, 200) simulates the worst case, every single time. That's not how production works. And because it's not how production works, your retry logic has never actually been tested against reality. The bugs hide in the variance — not in the slow case, but in the unpredictability. What the real distribution looks like Latency in distributed systems follows a lognormal distribution . It's right-skewed: most requests are fast, a meaningful minority are slow, and a small tail is very slow. This shape comes from how real systems work: GC pauses — Java, Go, and even Node's garbage collector occasionally stops the world Cold caches — first query after a cache miss is always slower Network jitter — packet routing isn't deterministic Noisy neighbors — other workloads on the same hardware compete for resources Connection pool exhaustion — when all connections are busy, new queries wait None of these are constant. They're random, rare, and multiplicative — which is exactly what produces a lognormal shape. Why this matters fo

Naive Bayes ran real spam filters for years, and it's the rare ML model whose "training" is just counting . No gradient descent, no iterations — count words, apply Bayes' rule, multiply. I built one from scratch and visualised exactly which words push a message toward spam. 📨 Interactive demo (type a message): https://dev48v.infy.uk/ml/day6-naive-bayes.html This is Day 6 of MachineLearningFromZero — algorithms from scratch, no scikit-learn. 1. Bag of words — order doesn't matter Naive Bayes treats a message as a set of words. "free cash now" and "now cash free" look identical to it. That throws away grammar, but for spam detection the words present matter far more than their order — and it makes the math tiny. 2. Training = counting For every word, how often does it appear in spam vs ham? for ( const { text , label } of trainingData ) for ( const w of tokenize ( text )) counts [ label ][ w ] = ( counts [ label ][ w ] || 0 ) + 1 ; free and click flood spam; meeting and tomorrow live in ham. One pass over the data, done. 3. Bayes' rule flips the question You measured P(words | spam) , but you want P(spam | words) . Bayes flips it: P(spam | words) ∝ P(spam) × P(words | spam) P(spam) is the prior (how common spam is); the likelihood multiplies in the word evidence. 4. "Naive" = pretend words are independent The trick that makes it fast: assume each word is independent given the class, so the likelihood is just a product: P(words | spam) = P(w1|spam) × P(w2|spam) × ... Real words aren't independent ("credit" and "card" co-occur), so it's a naive lie — but the classification still lands right astonishingly often. 5. Smoothing + logs keep it stable Two practical fixes. Add 1 to every count (Laplace smoothing) so an unseen word doesn't zero out the whole product. And add logarithms instead of multiplying tiny probabilities, which would underflow to 0: score [ label ] = Math . log ( prior [ label ]); for ( const w of words ) score [ label ] += Math . log (( counts [ label ][

Most "compress your image" websites upload your photo to a server. You don't need one. The browser's own canvas can re-encode an image at any quality — I built a drag-and-drop compressor in about 30 lines , and your photo never leaves your machine. 🗜️ Try it (drop a photo): https://dev48v.infy.uk/solve/day9-image-compressor.html 1. Catch the dropped file — locally drop . addEventListener ( " drop " , e => { e . preventDefault (); const file = e . dataTransfer . files [ 0 ]; // stays in the tab, 0 bytes uploaded loadImage ( file ); }); For sensitive images (IDs, screenshots), "never uploaded" is a real feature, not just a nicety. 2. Decode it into an <img> A dropped file is just bytes. Load it via a local blob: URL: const img = new Image (); img . src = URL . createObjectURL ( file ); await img . decode (); 3. Draw it onto a canvas Now the browser holds the raw pixels, detached from the original file format: canvas . width = img . naturalWidth ; canvas . height = img . naturalHeight ; canvas . getContext ( " 2d " ). drawImage ( img , 0 , 0 ); 4. Re-encode at a quality (this IS the compression) canvas . toBlob ( blob => { preview . src = URL . createObjectURL ( blob ); showSize ( blob . size ); }, " image/jpeg " , 0.7 ); // 0.7 = 70% quality JPEG and WebP are lossy — they discard detail the eye barely notices. That third argument is the entire compression dial; a small quality drop often halves the file size. 5. Hand the result back as a download link . href = URL . createObjectURL ( blob ); link . download = " compressed.jpg " ; // the browser saves it, no server The takeaway FileReader → Image → Canvas → toBlob is a surprisingly powerful local image pipeline. The same four steps do resizing, format conversion, cropping, watermarking — all client-side, all private. A whole category of "image tools" needs no backend at all. Open it and drop a photo.

There's a brand new ariaNotify() method — defined by the WAI-ARIA 1.3 Specification — that provides a means of programmatically triggering narration in a screen reader. The Siren Song of ariaNotify() originally handwritten and published with love on CSS-Tricks . You should really get the newsletter as well.

GitHub热门项目 | Zotero is a free, easy-to-use tool to help you collect, organize, annotate, cite, and share your research sources. | Stars: 14,498 | 14 stars today | 语言: JavaScript

GitHub热门项目 | A tool for writing better scripts | Stars: 45,542 | 9 stars today | 语言: JavaScript

GitHub热门项目 | Make Any Website into CLI & Use your logged-in browser by AI agent. | Stars: 24,627 | 95 stars today | 语言: JavaScript

Hello Dev Community! 👋 It is officially Day 39 of my non-stop run toward full-stack MERN engineering! Yesterday, I mapped out basic HTTP verbs like GET and POST. Today, I advanced into Prashant Sir's (Complete Coding) backend masterclass to tackle one of the most critical core operations: Handling Data Streams and Body Parsing . When a user submits a form or uploads data, the server doesn't receive the file all at once. It arrives as an asynchronous stream of network data chunks. Today, I learned how to collect and decode those packets natively! 🧠 Key Learnings From Node.js Lecture 7 (Streams & Buffers) Node.js is designed to be non-blocking and memory-efficient. Here is the technical breakdown of how it intercepts client payloads: 1. Inbound Streams & Data Chunks I learned that incoming POST data is treated as a Readable Stream . Instead of loading a massive data file into the server memory instantly, Node transmits the payload in tiny pieces called Chunks (hexadecimal binary data). 2. Event Listeners for Requests ( req.on ) Natively, we don't have an instant req.body object. We have to listen to the network events on the incoming request stream: req.on("data", (chunk) => { ... }) : Fires every single time a fresh chunk of binary data arrives at the network interface. We push these raw chunks into a temporary array. req.on("end", () => { ... }) : Fires automatically once the stream concludes and all chunks have arrived safely. javascript if (req.url === "/submit" && req.method === "POST") { let body = []; req.on("data", (chunk) => { body.push(chunk); // Collecting raw binary chunks }); req.on("end", () => { // Concatenating and converting hexadecimal binary buffers into a readable string layout let parsedBody = Buffer.concat(body).toString(); console.log("Received Form Payload:", parsedBody); res.writeHead(200, { "Content-Type": "text/plain" }); res.end("Data received and parsed successfully!"); }); }

Hello Dev Community! 👋 It is officially Day 38 of my unbroken streak toward mastering the MERN stack! Yesterday, I learned how to extract query strings from the URL bar. Today, I took a massive step forward into full-stack backend architecture by diving into Prashant Sir's (Complete Coding) roadmap to master HTTP Request Methods . Up until now, our server treated every incoming request the same way. Today, I learned how to make the backend execute completely different actions based on the "intent" (HTTP Verb) of the user! 🧠 Key Learnings From Node.js Lecture 6 (HTTP Verbs) An endpoint is no longer static when you map request methods against it. Here is the technical breakdown of what I locked down today: 1. Cracking req.method I discovered that the incoming Request object holds a crucial property called req.method . This tells the server exactly what action the client wants to perform. 2. The Big Four Core Methods GET: Used when the user simply wants to read or fetch data from the server (e.g., viewing a product page). POST: Used when the user wants to securely send or create new data on the server (e.g., submitting a signup form). PUT/PATCH: Used to update existing data records. DELETE: Used to wipe a specific data entry from the server storage. javascript const http = require("http"); const server = http.createServer((req, res) => { if (req.url === "/api/data") { if (req.method === "GET") { res.writeHead(200, { "Content-Type": "text/plain" }); res.end("Fetching and reading secure database records..."); } else if (req.method === "POST") { res.writeHead(201, { "Content-Type": "text/plain" }); res.end("Securely creating and injecting new data into the server!"); } } else { res.end("Standard Route"); } }); server.listen(8000);

Hello Dev Community! 👋 It is officially Day 37 of my continuous streak toward mastering the MERN stack! Yesterday, I configured clean structural routing to map pages like /about or /contact . Today, I advanced further into Prashant Sir's (Complete Coding) backend roadmap to tackle an essential data communication concept: URL Parsing and Query Parameters . When a user searches for something or filters products on an e-commerce platform, that data is passed directly inside the URL string. Today, I learned how to intercept and decode that data natively! 🧠 Key Learnings From Node.js Lecture 5 (The URL Module) An incoming URL is much more than just a text path; it is a complex structured object. Here is the technical breakdown of how I dissected it today: 1. Ingesting the Native url Module I explored Node's legacy and modern URL parsing engines. By passing the raw req.url string into the parser, Node breaks down the web address into a fully accessible metadata object. 2. Dissecting Pathname vs Query String I learned the difference between the structural endpoint location and the dynamic data payload: Pathname: The core location path (e.g., /search or /api/products ). Query: The actual data key-value strings attached after the question mark ? (e.g., ?name=ali&id=7 ). javascript const http = require("http"); const url = require("url"); const server = http.createServer((req, res) => { // Parsing the URL path and query parameters together cleanly let parsedUrl = url.parse(req.url, true); let pathname = parsedUrl.pathname; let queryData = parsedUrl.query; // Converts query text into a clean JS Object! if (pathname === "/search") { res.writeHead(200, { "Content-Type": "text/plain" }); res.end(`Searching logs for user: ${queryData.name} with ID: ${queryData.id}`); } else { res.end("Standard Endpoint View"); } }); server.listen(8000);