标签：#JavaScript

Last week I shipped something that would have sounded reckless two years ago: an MCP server that lets an AI agent write to a merchant's live Shopify store. Create discount codes. Build customer segments. Draft WhatsApp campaigns against real order data. Read-only agent integrations are everywhere now, and they're fine — but a read-only agent is just a chatbot wearing a dashboard. The useful version is the one that does the thing . The dangerous version is also the one that does the thing. A hallucinated SELECT is a wrong answer; a hallucinated discount code is free product going out the door. So before turning writes on, I sat down and listed every way an agent could hurt a store. Then I built one guardrail per failure mode. Here's the list — it's short, and I think it generalizes to any agent surface that touches business data. 1. Read-only by default. Writes are a per-token opt-in. The lazy design is one API key that can do everything the app can do. Instead, every agent token starts read-only — list customers, inspect segments, read campaign stats. Write capability is a separate flag the merchant flips per token: { "token" : "fav_mcp_…" , "scopes" : [ "read" ], // default "writeEnabled" : false // explicit opt-in , per token } This sounds obvious. It is obvious. It's also the single most-skipped step I see in agent integrations, because it's friction during development. Build the friction in anyway — "the agent could read everything but couldn't have sent that" is a sentence you really want available to you later. 2. Caps live in the tool schema, not the prompt. Early on I had a system prompt that said something like "never create discounts above 30%." You can guess how durable that is. Prompts are suggestions; schemas are physics. So the caps moved into the tool's input validation itself — the shape of it: // create_discount — validated server-side, not prompt-side { percentage : z . number (). min ( 1 ). max ( 100 ), // hard ceiling, enforced in the service exp

A few months ago I was doing a final pre-release review on a client project before handing it...

Building a URL shortener with Cursor, ChatGPT, AWS Lambda, API Gateway, and Cloudflare taught me more about shipping software than writing code. Since last year, Cursor has been my go-to development assistant for daily tasks. But at the beginning of this year, just using it to generate snippets didn't feel like enough anymore. Having studied programming since 2011, I knew what modern AI tools could do, but I wanted to test their limits. I decided to build a full project—a URL shortener—without writing a single line of frontend or backend code myself. For the stack, I chose Node.js with TypeScript, React with Vite, and AWS Lambda to handle redirects. While I used ChatGPT to debate architectural trade-offs, Cursor generated the entire codebase. Watching a functional application take shape so quickly was the exact moment a line was crossed for me. It made me realize how fundamentally software development is shifting: our role is evolving from code writers to architectural decision-makers and problem-solvers. But truth be told, this project and this post represent a massive personal milestone. Like many developers, I have a graveyard of half-finished projects on my machine. This is one of the first times I've pushed a personal project all the way to production. Writing this and exposing my work to the community is a huge first step for me. This isn't just a story about code or AI—it's about the challenge of finally shipping something. The Stack Before asking Cursor to write a single line of code, I wanted to map out the architecture. I didn't need a massive enterprise system for a URL shortener, but I did want something flexible enough to support future features and experiments. To validate my ideas, I used ChatGPT to debate the pros and cons of different architectural approaches. We eventually settled on this stack: Backend: Node.js + TypeScript Frontend: React + Vite Database: MongoDB Atlas Redirects: AWS Lambda Entry Point: AWS API Gateway DNS / CDN: Cloudflare Secur

GitHub热门项目 | The library for web and native user interfaces. | Stars: 245,699 | 547 stars this week | 语言: JavaScript

Exactly one year ago, my terminal was a blank slate. I started where almost everyone does , wrestling with HTML, CSS, and JavaScript, trying to understand the web pixel by pixel. What began as curiosity quickly turned into a full obsession. I went from building simple static pages to diving deep into full-stack development. Here’s what that intense first year of constant building, breaking things, and shipping real projects has looked like. The Leap into Modern Frameworks Once vanilla JavaScript started feeling limiting, I jumped into React . Component-based thinking completely changed how I approached interfaces. Then came Next.js — it bridged client-side beauty with server-side power and pushed me into a true full-stack mindset. The Ultimate Test: Lynvista Safaris The biggest challenge was building lynvistasafaris.com , a live travel booking platform for a real client. This project forced me far beyond tutorials and into real engineering problems. I had to implement: Payment infrastructure from scratch with Daraja API (M-Pesa STK pushes) and Paystack for international transactions. A robust database layer using Drizzle ORM + MySQL. Custom business logic , including a multi-currency pricing system with special validation rules for currencies like GBP. It was messy , many late nights debugging webhooks, schema mismatches, and edge cases , but shipping it taught me more than any course ever could. What One Year Taught Me Syntax is just a tool. The real skill is learning how to break down complex problems, debug effectively, and keep iterating even when things break in production. I’m incredibly proud of the progress I’ve made in 365 days (402 contributions later), but I know I’m still at the very beginning. For the next phase, I’m focused on shipping more projects, writing about the crazy bugs I encounter, and deepening my architectural and full-stack skills. If you want to see what I’m building right now, check out my GitHub .

If you've ever built a file upload feature, you've probably hit this: a user uploads a photo from their iPhone, and your app breaks. No preview, no compression, just a silent failure — because the file is .heic and browsers can't read it. HEIC is Apple's default photo format since iOS 11. Every iPhone photo taken today is HEIC. And virtually every JS image compression library just ignores the problem. I spent a weekend building PixSqueeze to fix that. The problem with HEIC in the browser Browsers use the <canvas> API to compress images. You draw the image onto a canvas, call canvas.toBlob() , and get a compressed file back. Clean, client-side, zero server cost. The problem: canvas.drawImage() only works if the browser can decode the image first. And no major browser can decode HEIC natively — not Chrome, not Firefox, not even Safari on macOS (Safari on iOS can, but that doesn't help your web app). So when a user picks a HEIC file, your image element fires onerror , your canvas stays blank, and your compression pipeline silently does nothing. The solution: server-side conversion, then client-side compression PixSqueeze handles this in two stages: Stage 1 — Server converts the format HEIC (and TIFF, camera RAW) files get sent to a small Express server. The server uses heic-convert running in a dedicated worker thread to convert to JPEG. Worker threads matter here — HEIC decoding is CPU-intensive WASM work, and running it on the main event loop would block every other request. Stage 2 — Client compresses the result The converted JPEG comes back to the browser, where the normal canvas-based compression pipeline takes over. Quality, resize, watermark hooks — all the usual options. The detection is important too. You can't just check file.type — iOS often sets HEIC files with an empty MIME type. PixSqueeze checks the ISO Base Media File Format magic bytes directly: async function isHeicFile ( file ) { const buffer = await file . slice ( 0 , 12 ). arrayBuffer (); const byt

GitHub热门项目 | Fast, unopinionated, minimalist web framework for node. | Stars: 69,125 | 86 stars this week | 语言: JavaScript

GitHub热门项目 | Open source RabbitMQ: core server and tier 1 (built-in) plugins | Stars: 13,696 | 3 stars today | 语言: JavaScript

GitHub热门项目 | Source Code for Sigma Web Development Course | Stars: 11,451 | 17 stars today | 语言: JavaScript

GitHub热门项目 | 🔥 基于大模型和 RAG 的智能问数系统，对话式数据分析神器。Text-to-SQL Generation via LLMs using RAG. | Stars: 6,231 | 10 stars today | 语言: JavaScript

GitHub热门项目 | Burning through your subscriptions too fast? Paying for stuff you never use? Stop guessing. OpenUsage is free and open source. | Stars: 2,808 | 17 stars today | 语言: JavaScript

GitHub热门项目 | 分流规则、重写写规则及脚本。 | Stars: 26,570 | 109 stars today | 语言: JavaScript

If you’ve ever built a slide-out cart drawer, a dynamic free-shipping bar, or custom analytics tracking for a Shopify store, you've run straight into this brick wall: Shopify themes do not emit consistent, trustworthy cart events. You write a perfect event listener, only to find out a third-party product-bundle app uses old-school XMLHttpRequest (XHR) instead of fetch to add items to the cart. Your listener misses it completely, the cart drawer stays shut, and your user thinks the button is broken. Most developers end up copying and pasting messy, brittle window.fetch overrides into their projects. Frustrated by solving this over and over again, I built Shopify Cart Broadcaster —a zero-dependency, 2 KB utility that intercepts both Fetch and XHR requests seamlessly to provide universal DOM events. 👉 Check out the source on GitHub: Rabin-p/shopify-cart-broadcast (If this saves you an afternoon of debugging, drop a ⭐!) The Nightmare of the /cart/add Response Even if you successfully listen to Shopify's /cart/add.js request, Shopify throws another curveball at you. When you add an item to the cart, the server responds with only the item(s) that were just added —not the updated state of the entire cart. If your slide-out cart drawer needs the new total price to see if a discount threshold is met, you are out of luck. You're forced to manually chain another fetch('/cart.js') request to get the true state. My utility handles this annoying race-condition out of the box. It detects the mutation type, intercepts it, pushes the true cart events to the window and displays it beautifully. window . addEventListener ( ' shopify:cart-updated ' , ( e ) => { // Always gives you the accurate, updated cart object! console . log ( ' New Cart Total: ' , e . detail . cart . total_price ); });

🏆 This is a submission for the June Solstice Game Jam 🎯 What I Built Turing's Frequency is a browser-based rhythm game where you decrypt encrypted radio signals by listening to musical patterns and recreating them. Each signal carries a message from a historical figure who changed the world — voices that were silenced, ignored, or forgotten, now restored through your rhythm. 🎮 👉 PLAY THE GAME LIVE 👈 📖 The Story The game is set in 1954 , on the desk of Alan Turing at the University of Manchester. A radio crackles with fragmented transmissions — encrypted messages carrying words of Pride , resistance , and identity . You are a student who has found Turing's last notebook, and with it, the key to decrypting these signals. 🌅 The connection to the June solstice: As you decrypt each signal, the screen literally brightens — from near-darkness to a flood of golden light. The solstice is the moment light and dark trade places, and this game makes that transition tangible. 🎬 Video Demo 👆 Watch the full gameplay loop: title → story → rhythm gameplay → decrypted messages → victory screen with solstice light effect. 🕹️ How to Play Key Action 1 2 3 4 Play notes ↑ ↓ ← → Arrow keys (alternative) Space / Enter Advance screens 🎧 Listen to the signal pattern 🎹 Repeat the notes in order 🔓 Decrypt the message 🌅 Restore the voice 💻 The Code The entire game is a single HTML file (~32KB) with zero external dependencies . No frameworks, no libraries, no asset files — just HTML, CSS, and vanilla JavaScript. mamoor123 / turings-frequency Turing's Frequency - A Rhythm of Light. June Solstice Game Jam 2026 entry. ⚡ Key Technical Decisions 🔊 Web Audio API for all sound: Every tone is synthesized in real-time using oscillators. The game uses a pentatonic scale (C4, E4, G4, C5) so every combination of notes sounds pleasant. No audio files needed. function playTone ( freq , duration = 0.3 , type = ' sine ' , volume = 0.3 ) { const osc = audioCtx . createOscillator (); const gain = audioCtx . create

Originally published on danholloran.me There's a moment every CSS developer knows: you want to tweak a single property based on some condition — a viewport width, a user preference, a custom property — and instead of a clean one-liner you end up with a whole new @media block, duplicated selectors, and maybe a dash of JavaScript to handle the edge cases. It works, but it never feels right. The CSS if() function changes that. Shipping in Chrome 137, it brings inline conditional logic directly into your property declarations, letting you express branching style logic without leaving the property itself. How if() Works The syntax is a sequence of condition-value pairs, evaluated top to bottom until one matches: property : if ( condition : value ; else : fallback ); The function supports three types of conditions: style() — queries computed CSS custom property values media() — runs an inline media query supports() — feature-detects a CSS property or syntax You can chain them with else : button { padding : if ( media ( width >= 1024px ): 0.5rem 1.5rem ; else : 0.75rem 1.25rem ); } That's a responsive padding rule with zero extra @media blocks. Three Practical Uses 1. Touch-Friendly Targets with media() The pointer media feature lets you distinguish mouse users from touchscreen users. The accessible minimum tap target is 44px; mouse users can get away with smaller: .icon-button { width : if ( media ( any-pointer : fine ): 32px ; else : 44px ); height : if ( media ( any-pointer : fine ): 32px ; else : 44px ); } Previously this needed a full @media (any-pointer: coarse) block. Now it reads like what it is — a single property with two states. 2. Theme Switching with style() Custom properties are often used to carry design tokens — theme flags, component variants, status values. The style() query lets you branch on them inline: .status-badge { --status : pending ; background : if ( style ( --status : complete ): #22c55e ; style( --status : error ): #ef4444 ; else : #f59e0b );

In JavaScript, truthy and falsy values are concepts related to boolean evaluation. Every value in JavaScript has an inherent boolean "truthiness" or "falsiness," which means they can be implicitly evaluated to true or false in boolean contexts, such as in conditional statements or logical operations. What Are Truthy Values? Truthy values are values that are evaluated to be true when used in a Boolean context. Simply put, any value that is not explicitly falsy is considered truthy. These are some truthy values Non-zero numbers: 42, -1, 3.14 Non-empty strings: "hello", "0", " " Objects and arrays: {}, [] Functions: function() {} Dates: new Date() Symbols: Symbol() BigInt values other than 0n: 10n if ( 42 ) console . log ( " This is truthy! " ); if ( " hello " ) console . log ( " Non-empty strings are truthy! " ); if ({}) console . log ( " Objects are truthy! " ); Output This is truthy ! Non - empty strings are truthy ! Objects are truthy ! What Are Falsy Values? Falsy values are values that evaluate to false when used in a Boolean. JavaScript has a fixed list of falsy values false 0 (and -0) 0n (BigInt zero) "" (empty string) null undefined NaN document.all (used for backward compatibility) if (0) console.log("This won't run because 0 is falsy."); if ("") console.log("This won't run because an empty string is falsy."); if (null) console.log("This won't run because null is falsy."); Truthy vs. Falsy Evaluation in JavaScript Whenever JavaScript evaluates an expression in a Boolean (e.g., in an if statement, a logical operator, or a loop condition), it implicitly converts the value into true or false based on whether it is truthy or falsy. With if Statement let s = " JavaScript " ; ​ if ( s ) { console . log ( " Truthy! " ); } else { console . log ( " Falsy! " ); } Output Truthy ! Logical Operators with Truthy and Falsy Logical operators like && (AND) and || (OR) work with truthy and falsy values && (AND): Returns the first falsy operand or the last operand if all are tr

JAVASCRIPT CONDITIONAL STATEMENTS JavaScript conditional statements are used to make decisions in a program based on given conditions. They control the flow of execution by running different code blocks depending on whether a condition is true or false. Conditions are evaluated using comparison and logical operators. They help in building dynamic and interactive applications by responding to different inputs. Types of Conditional Statements 1. if Statement The if statement checks a condition written inside parentheses. If the condition evaluates to true, the code inside {} is executed; otherwise, it is skipped. Executes code only when a specified condition is true. Useful for making simple decisions in a program. Syntax : if ( condition ) { // code runs if condition is true } let x = 20 ; ​ if ( x % 2 === 0 ) { console . log ( " Even " ); } ​ if ( x % 2 !== 0 ) { console . log ( " Odd " ); }; Output Even 2. if-else Statement The if-else statement executes one block of code if a condition is true and another block if it is false. It ensures that exactly one of the two code blocks runs. Used when there are two possible outcomes. The else block runs when the if condition is not satisfied. let age = 25 ; ​ if ( age >= 18 ) { console . log ( " Adult " ) } else { console . log ( " Not an Adult " ) }; Output Adult 3. else if Statement The else if statement is used to test multiple conditions in sequence. It executes the first block whose condition evaluates to true. Allows checking more than two conditions. Evaluated from top to bottom until a true condition is found. const x = 0 ; ​ if ( x > 0 ) { console . log ( " Positive. " ); } else if ( x < 0 ) { console . log ( " Negative. " ); } else { console . log ( " Zero. " ); }; Output Zero . 4. Using Switch Statement (JavaScript Switch Case) The switch statement evaluates an expression and executes the matching case block based on its value. It provides a clean and readable way to handle multiple conditions for a single varia

GitHub热门项目 | Локальный API-прокси для Qwen AI с поддержкой сохранения контекста диалогов и управления сессиями через REST API | Stars: 207 | 13 stars today | 语言: JavaScript

GitHub热门项目 | Fast and low overhead web framework, for Node.js | Stars: 36,440 | 23 stars today | 语言: JavaScript

GitHub热门项目 | 一个基于 JavaScript 的网盘文件下载地址获取工具。基于【网盘直链下载助手】修改 ，支持 百度网盘 / 阿里云盘 / 中国移动云盘 / 天翼云盘 / 迅雷云盘 / 夸克网盘 / UC网盘 / 123云盘 八大网盘 | Stars: 15,746 | 84 stars today | 语言: JavaScript