标签：#Web

How KlineVision does AI technical analysis with Next.js + Gemini, draws it on the real candles, and verifies every call it makes after the fact — misses included. Most "AI stock analysis" tools confidently tell you a chart looks bullish and then never look back. I wanted the opposite: a tool that records every call it makes and later checks whether the market actually agreed — and publishes the hit rate, misses included. That one constraint — keep yourself honest — ended up shaping most of the interesting engineering. Here's how KlineVision is put together. What it does Type a ticker ( AAPL , 600519.SH , 0700.HK ) — or drop a chart screenshot. You get a structured read : trend, support/resistance, candlestick + chart patterns, and 缠论 (Chan theory) structure — drawn directly onto the real candles , not hand-waved in prose. Works across US, A-shares, and Hong Kong markets. The stack Next.js (App Router) on Vercel Supabase (Postgres + RLS) for data & auth Gemini 3 Flash for the analysis itself EODHD + Yahoo Finance for market data GitHub Actions + Vercel Cron for the background jobs PostHog for product analytics Now the parts that were actually interesting to build. 1. "Never analyze fake data" The market-data layer had a silent fallback: when a provider rate-limited, it returned synthetic candles so the UI never broke. Great for a demo, terrible for a product whose entire value is trust — the model would write a beautiful, confident analysis of a chart that never existed . The fix was to make the data layer fail honestly : Yahoo (primary) → EODHD (fallback) → if only demo data is available → 503, no analysis If we can't get real candles, the user gets "live market data temporarily unavailable" — not a hallucinated read. For a trust tool, a silent fallback to fake data is the worst bug on the board. 2. Make the AI show its work A text blob saying "there's a double bottom" isn't credible. You have to see it on the chart. So the model returns structured overlays keyed to

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

I have a hobby site that needs a good interface that allows quick scrolling. it will kinda work like an outline where user scrolls between items with ability to drill down probably 2 levels. but I'd like to be able to have both a condensed and card interface together. maybe if scrolling of the left of the screen its stays in condensed view so scrolling is quick but if scrolling on the right the item currently in the middle goes into card view with extended text describing the item in more detail. I might start working on something in jsfiddle to show better what I want, but gemini AI says codepen is better to prototype for smartphones. I would like to optimize the interface for smartphones either android or ios, but be reasonably functional on desktops. has anyone seen anything like this or have opinions about codepen? submitted by /u/LastCivStanding [link] [留言]

i hope this is the right place to ask...i am a photographer from the US. i know nothing about web hosting. my friend set up my website on media temple. godaddy acquired MT at least a year ago. i assume i can move my site to a different company. who is solid? thank you!! submitted by /u/filmAF [link] [留言]

AI in 2026 is no longer best understood as a technology trend. It has become a structural layer...

Before you vibe your app, vibe your pallette. Make a fork of shadecn or completely start from scratch. Or fork fluent / carbon. Whatever. Add more variables! Motion, shadow, outline, glow. Play around? Your basis will only be as creative as your basis is, but you can really expand that. I've had fun once the system is set up going through various "give me a theme that feels like sadness and morning sunshine" to "angry red" just to see what it gives me based on semantics. You have to do "that" at every point. How does your typography system work, your base color set, your architecture sets. But it's repeat movements through those. submitted by /u/TheSleepingOx [link] [留言]

Hello everyone, I am a Computer Science and UX design graduate. I was planning on applying for UX/UI positions but it seems that the market is very small especially for a junior designer. I was thinking going back to front end dev since it has more positions available. So I would like to ask people who are currently in the industry what's the best roadmap to become a frontend dev in 2026? Obviously the first thing to do is to refresh my memory on HTML, CSS and JS. What comes after that? Typescript and then React? And then what? submitted by /u/George-G661 [link] [留言]

Hey everyone, Let me give you a quick introduction about myself. I’m a software engineer with over 10 years of experience. I’ve worked extensively with React.js, Next.js, PostgreSQL, Redis, Node.js/Express, NestJS, Docker, and Go. Lately, in my free time, I’ve been diving deeper into system design, distributed systems, and learning how to build highly scalable applications. The thing is, the stack I’ve been working with is mostly enterprise-focused, and from what I’ve seen, it doesn’t always align well with the typical freelance market. Because of that, I’ve decided to start learning Laravel seriously and use it as a way to build a freelance business and work directly with clients. Of course, I know my previous experience will still be valuable, but here’s my question: I’m not looking for a job. I’m looking to start my own business, get clients, and eventually grow it into a company. So I figured this would be one of the best places to ask people who are already in the market. What’s the current state of the Laravel freelance market? Is it worth investing my time into? Are there enough opportunities and clients out there? For context, my goal is to eventually reach somewhere between $5k–$10k/month. I’d love to hear from people who are actively freelancing or running agencies in this space. submitted by /u/MahmoudElattar [link] [留言]

Prologue A while ago, I decided to develop a fully accessible main navigation component in React and write a series of articles documenting the steps it took to create a non-trivial accessible component. In my last development article , I covered using an array of navigation objects to determine conditions and shift focus between components. This article covers Tab Key navigation. Note : This article is one of a series demonstrating building a React navigational component from scratch while considering accessibility through the process. The articles are accompanied by a GitHub repository with releases tied to one or more articles; each builds on the previous one until a fully implemented navigation component is complete. Each release and its associated tag contain fully runnable code for the article. The code discussed in this article is available in the release. and may be downloaded at release 0.7.0 . Links in the article will take you to the proper file in the tagged GitHub Repository. Because the code for this release is scattered across the useNavigation hook, line numbers are added to make it easier to locate in the linked GitHub file. Line numbers are also provided for those who would like to follow along with a downloaded copy. While code examples are written in JavaScript for brevity, all actual code is written in Typescript and targets React 19.x, all while using vanilla CSS. Examples use Next.js v16.x, which is not required to run the navigation component. You can view the requirements for the Tab Handling Keyboard Release along with previous requirements. Content Links Introduction Acceptance Criteria Tab Key Handling Link Button Shift+ Tab Key Handling Link Button Introduction As I've mentioned in earlier articles, keyboard handling has two disparate audiences: those who can see the screen and those who rely on a screen reader. The arrow, home and end keys, for the most part, rely on a user knowing where they are and being able to discern where they wan

How I Published My Own Validation Package on npm As developers, we've all done this: if ( ! email ) { throw new Error ( " Email is required " ); } if ( typeof email !== " string " ) { throw new Error ( " Email must be a string " ); } if ( ! email . includes ( " @ " )) { throw new Error ( " Invalid email " ); } Now imagine doing this for: User Registration Login APIs Product Creation Payment Requests Admin Panels Microservices The validation code starts growing faster than the actual business logic. The Problem In many Node.js projects, validation ends up being: Repetitive Hard to maintain Inconsistent across APIs Difficult to scale Every endpoint contains similar checks: if ( ! name ) ... if ( ! email ) ... if ( ! password ) ... if ( password . length < 8 ) ... As projects grow, these validations become scattered throughout the codebase. Existing Solutions There are already some excellent validation libraries available: Zod Joi Yup Express Validator I've used many of them and they're great. But for some smaller projects and APIs, I wanted something: Lightweight Easy to understand Minimal setup Zero configuration TypeScript friendly That's what led me to build Zero Validation . Introducing Zero Validation Zero Validation is a lightweight schema validation package for Node.js and TypeScript applications. The goal is simple: Define your validation schema once and validate data consistently everywhere. Installation npm install zero-validation Basic Example import { z } from " zero-validation " ; const userSchema = z . object ({ name : z . string (), email : z . email (), age : z . number (), }); const result = userSchema . parse ({ name : " John " , email : " john@example.com " , age : 25 , }); console . log ( result ); Handling Validation Errors const result = userSchema . safeParse ( data ); if ( ! result . success ) { console . log ( result . errors ); } Instead of crashing your application, you can safely inspect validation errors and return meaningful API responses

Anyone working with several projects and an AI assistant knows the problem: in every repo you explain anew how you name things, what the layer architecture looks like, why you deliberately don't use this one library. The decisions were made long ago. But they live in your head, scattered across repos, and the assistant only ever knows the slice it currently sees. So I started putting that knowledge in one place where both I and Claude can find it. Why Outline – and why self-hosted The choice fell on Outline , self-hosted on its own subdomain. Three reasons tipped the scales. First: I want to keep my data with me and not depend on a vendor. A knowledge store that all my decisions flow into over the years is exactly the kind of asset you don't want in someone else's hands. Second: full data export, any time. If I want to move to a different system tomorrow, I take everything with me. No lock-in. Third: self-hosting opens up better options later – for instance my own RAG, should I ever want to go deeper into searching across my own body of knowledge. I don't need it right now. But the door is open, and that's worth the effort. The cookbook – the heart of it Separate from the individual projects sits its own collection: the cookbook. Cross-project, generic, and that's exactly what makes it valuable. This is where it says how I build, regardless of which product I'm sitting at right now. Roughly, it's split into a few areas: Conventions – naming, code style, docblocks, git commits, markdown, package manager, writing style. The boring but decisive things you'd otherwise re-discuss three times per project. Backend – layer architecture, a unified API error format, test strategy, migrations and indexes, i18n, async jobs and idempotency. Frontend / mobile – feature-first architecture ( core/ , shared/ , features/ ), design system, forms, networking, state, routing, storage, styling, testing. Deployment – my standard setup with Caddy as the edge and a Hetzner VPS. Templates –

Cron's biggest problem isn't scheduling — it's silence. A cron job can fail every night for a month, and unless you're manually checking logs on the server, you won't know. No alert, no dashboard, no audit trail. Just a backup that doesn't exist when you need it, or a data sync that quietly stopped three weeks ago. Monitoring fixes this. But "cron job monitoring" means different things depending on the tool. Some watch for missing heartbeats. Some track full execution history. Some just page you when something breaks. This article compares six approaches — from writing your own monitoring scripts to using a fully managed scheduler with built-in observability — so you can pick the right one for your workload. Heartbeat Monitoring vs. Execution Monitoring Before comparing tools, understand the two fundamentally different approaches. Heartbeat monitoring (dead man's switch) is passive. Your cron job pings a monitoring URL after each run. If the ping doesn't arrive on schedule, you get an alert. This tells you whether a job ran — but not what happened . If the job runs but returns bad data, the ping still fires and the monitor stays green. Execution monitoring is active. The scheduler fires the job, captures the response, records the outcome, and alerts on failure. You get the full picture: status code, response body, duration, retry count, and a timeline of every execution. When to use each: Heartbeat monitoring makes sense when you're stuck with system cron. Execution monitoring makes sense when you're choosing a scheduler — you get monitoring, retries, and logging as part of the platform. Comparison at a Glance Tool Type Alerts Execution Logs Retries Free Tier DIY scripts Custom ⚠️ Whatever you build ⚠️ Whatever you build ⚠️ Whatever you build ✅ Free (your time) Healthchecks.io Heartbeat ✅ Email, Slack, webhooks ❌ No ❌ No ✅ 20 checks Cronitor Heartbeat + telemetry ✅ Email, Slack, PagerDuty ⚠️ Basic (duration, exit code) ❌ No ⚠️ 5 monitors Better Stack Uptime + heartb

I recently tested my agency website using Cloudflare’s “Is Your Site Agent-Ready?” checker. No affiliation with the tool. I was curious about what “agent-ready” actually means. My site scored 21/100 and reached Level 1: Basic Web Presence . It passed three checks: Valid robots.txt Working sitemap Rules for AI crawlers It failed several newer checks: Markdown content negotiation Content Signals HTTP Link headers Agent Skills discovery MCP Server Card WebMCP API and authentication discovery The interesting part is that this is not another SEO score. It checks whether AI agents can discover, understand, and interact with a website through machine-readable standards. For example, an agent could request a clean Markdown version of a page instead of processing the complete HTML. Applications can also publish structured information explaining their APIs, available tools, authentication process, and supported actions. Some checks seem practical today, particularly Markdown responses, crawler rules, and structured discovery. Others, such as agentic payment protocols and DNS-based agent discovery, still feel early for a normal business website. I am planning to implement Content Signals and Markdown negotiation first, then test whether Agent Skills would provide any real value. Has anyone implemented these standards on a production website? Did they improve anything beyond the scanner score? submitted by /u/kelisshekhaliya [link] [留言]

Saw a writeup this week about a new attack aimed at coding agents (Claude Code, Cursor, etc) and it's annoying in how simple it is. Attackers spray fake error logs to generate fake Sentry issues. The issue is written like a runbook, so when your agent goes to "fix" it, the suggested fix is to run a malicious package that quietly exfiltrates your env. The reason it works: the Sentry DSN is unauthenticated by design. Most sites embed the DSN in the front-end for client-side error reporting, and there isn't really a way around that if you want client-side telemetry. So anyone who has the DSN can fire events into your project. The attacker writes the fake issue to read like: "Runtime issue, no code change needed, just run this diagnostic." The "diagnostic" is a typosquatted npm package. They even dress up the event metadata to look like agent permission flags so the model thinks it's been cleared to run the command. What saved the engineer in this case was the agent itself catching the typosquat and refusing to install it. The net held this time, but I wouldn't want my whole defense to be "the model probably notices." The part I keep chewing on is where the control even belongs. "Don't trust external inputs" was the lesson with SQL injection and it still holds, but here the input is a Sentry issue and the executor is your agent, so I'm not sure which layer you fix it at. The DSN can't really be locked down, so that leaves the agent's run permissions or a package allowlist. Lock down permissions and you're approving everything by hand; lean on the allowlist and it breaks the moment something legit isn't on it. What would have caught this in your setup? Because "the model noticed the typosquat" feels like a control I don't want to depend on. submitted by /u/Any_Side_4037 [link] [留言]

I have a hypothesis that having an llm complete a few lines of your code - mostly boilerplate, could be better than prompting an entire file of code through it. Better in the sense that it isn't entirely vibe coding and it takes some cognitive load to code and the dev has better context of what is written. Do you think so? submitted by /u/GarrettSpot [link] [留言]

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

A production-minded walkthrough with a live Next.js demo — JSON.parse() vs partial-json + Zod for real-time AI dashboards. canonical: https://gauravthorat-portfolio.vercel.app/blog/react-llm-stream-json-parser

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

Recently i have been trying to learn full stack skills, springboot and react.js , These things are so overwhelming, I haven't started react.js yet, I mean there are so many things to remember ModelMapper, ObjectMapper, GrantedAuthority, User details, User detailsService,Logger, so many annotations, So many features Really getting confused, trying to build a resume based Ecommerce Project Even If I am able to make it , I know many will comment " It's very common, it's a basic project" dude it was so tough for me how can u say that submitted by /u/faangPagluuu [link] [留言]