标签：#Java

CORS Errors Explained: Every Fix, Every Framework (2026 Guide) TL;DR — A CORS error means the browser blocked a cross-origin request because the server did not explicitly allow it. The fix is always server-side : return the correct Access-Control-Allow-Origin header from your backend. This guide covers every CORS error type, a step-by-step diagnosis flow, and copy-paste fixes for Express, FastAPI, Next.js, nginx, Cloudflare Workers, and Vercel. You can inspect and validate your CORS headers live with the CORS Header Checker — no curl, no Postman, no install. What CORS Actually Is (and Why the Browser Enforces It) The Same-Origin Policy (SOP) is a browser security rule: JavaScript running on https://myapp.com can only read responses from requests made to the same origin — same scheme, same host, same port. Everything else is cross-origin. CORS — Cross-Origin Resource Sharing — is the mechanism that lets servers selectively relax the Same-Origin Policy. A server adds HTTP headers to its responses that tell the browser: "it is okay to share this response with code from origin X." Without those headers, the browser reads the response, then silently discards it and throws a CORS error into your console. Three things to burn into memory before you read further: CORS is enforced by the browser, not the server. curl and Postman do not check CORS — they always get the response. Only browsers do CORS. If your API works in Postman but fails in the browser, CORS is almost certainly why. The fix is server-side, always. Browser extensions that "disable CORS" are masking the problem in your local browser only. They break for every real user. Never ship code that depends on them. Preflight is a separate request. For non-simple requests (anything with a custom header, a JSON body, or methods other than GET/POST), the browser sends an OPTIONS request first to ask for permission. Your server must handle this correctly. The Four CORS Error Types — Diagnosed from the Console Message Err

Every year, developers ask the same question: "Which programming language should I learn next?" And...

This is a submission for Frontend Challenge - Comfort Food Edition, Perfect Landing What I Built The leaf is the page. For my CSS Art entry, I drew my mother's Sunday meal: sixteen dishes on a banana leaf, each one placed where Telugu tradition puts it. For Perfect Landing, that artwork became the navigation. Tap any dish on the leaf and the page takes you to that dish's course. Scroll instead, and you move through the meal in eating order: ghee first, then the curries, the pulusu, rasam, the rice varieties, the crunch, the sweet, and finally perugu. The scroll is the serving order. The structure of the page is the structure of the meal. It is deliberately not a restaurant. No menu cards, no reservation form, no gallery. One family, one Sunday, eight courses, and the rules my mother enforces at each one. The part I cared most about: a screen reader is served this meal the same way my mother serves it. The heading order, the tab order, and the reading order all follow the eating order. Tap targets on the leaf move focus to the course they open, so keyboard and screen reader users travel with everyone else. Telugu headings carry lang="te" so they are pronounced as Telugu, not mangled as English. The course nav marks where you are. And with reduced motion on, the smooth scrolling and the ghee-pour animation both settle down together. Demo Things to try: tap the rice mound (or the ghee spoon) on the leaf and see where it takes you. Press Tab from the top of the page and watch the skip link appear before anything else. Scroll and watch the Telugu nav track your course. Turn on reduced motion and take the calm version of the same journey. Every visual on the page is CSS. No images, no SVG, no canvas. Journey The concept came from the eating itself. On a banana leaf, order is information: neyyi before anything, perugu always last. Most landing pages invent an information architecture. This meal already had one, and it is thirty years older than CSS grid. My whole job was n

A few months ago I got frustrated. I needed to compress a PDF quickly. Found a tool online — it asked me to create an account first. Found another — it had so many ads the actual button was invisible. Found a third — it uploaded my file to their servers and I had no idea what happened to it after. I thought: this shouldn't be this hard. So I built EazyStudio — a suite of 80+ browser-based tools where everything runs 100% in your browser, no signup, no intrusive ads, no files ever leaving your device. What's inside Here's a snapshot of what's available: PDF tools Compress, merge, split, rotate PDFs PDF to Word, Excel, JPG and back Add watermarks, protect with passwords Image tools Background remover (runs locally in browser) Image compressor, resizer, converter AI image upscaler Color palette extractor, color picker Developer utilities JSON formatter/validator Base64 encode/decode URL encoder, HTML entity converter Regex tester JWT decoder API tester (Postman-lite) CSS gradient generator, box shadow generator Finance & math EMI calculator, SIP calculator GST calculator, compound interest, tip splitter Unit converters (length, weight, temperature, data) And more QR code generator Password generator Text tools (word counter, case converter, lorem ipsum) Device preview tool The technical approach: browser-first The biggest design decision was: nothing gets uploaded to a server. For PDF operations I use PDF.js and pdf-lib running in the browser. For image tools it's canvas + WebAssembly (WASM) modules. For background removal I'm using a WASM-based segmentation model that loads client-side. This has three benefits: Speed — no upload round-trip, works on large files instantly Privacy — your files never touch my server Cost — zero storage, zero egress bandwidth The downside: WASM modules add initial load time. I worked around this with lazy-loading — the WASM only loads when you first use that specific tool. What I learned building this 1. People hate signups more than I ex

GitHub热门项目 | 基于Dineshkarthik的项目， 电报视频下载，电报资源下载，跨平台，支持web查看下载进度 ，支持bot下发指令下载，支持下载已经加入的私有群但是限制下载的资源， telegram media download,Download media files from a telegram conversation/chat/channel up to 2GiB per file | Stars: 5,440 | 7 stars today | 语言: JavaScript

GitHub热门项目 | Character Generator based on Universal-LPC-Spritesheet | Stars: 1,539 | 10 stars today | 语言: JavaScript

GitHub热门项目 | 洛雪音乐源 | Stars: 7,541 | 36 stars today | 语言: JavaScript

PDF merge, split, and compress sound like the most boring possible features to build. Take some files, do an operation, return a file. I believed that too, until real user files started hitting the backend and every one of these tools broke in a different, specific way. Here's what actually went wrong, and what fixed it. The PDF that wasn't actually a PDF The first crash report was a "corrupted file" error on a PDF that opened fine in every desktop viewer. Turns out plenty of real-world PDFs are technically malformed, a missing xref table, a truncated stream, an object reference pointing at nothing but viewers like Chrome and Acrobat are extremely forgiving about it. Most Python PDF libraries are not. try : reader = PdfReader ( file_path , strict = False ) except PdfReadError : # strict=False alone doesn't save you from everything — # some files need the xref table rebuilt from scratch reader = PdfReader ( file_path , strict = False ) reader . _override_encryption = True strict=False fixed maybe 70% of the "corrupted" reports. The rest needed a repair pass first — scanning the raw byte stream for object markers and reconstructing a valid cross-reference table before the normal parser ever touches it. Painful to write, but it turned "please fix your PDF" into "it just works," which matters a lot when the whole pitch of the tool is "no signup, just upload and go." Merging PDFs is not free, memory-wise The naive merge implementation loads every input PDF fully into memory, concatenates pages, writes the output. Fine for two 200KB files. Not fine when someone merges fifteen scanned documents at 40MB each, because now you're holding the equivalent of 600MB of parsed PDF objects in memory at once on a backend container that doesn't have unlimited RAM. The fix was switching to incremental writes process one input file at a time, write its pages to the output stream, then explicitly drop the reference before moving to the next file: writer = PdfWriter () for path in input_p

Ship a compliant cookie banner in Laravel and actually gate analytics and marketing scripts on the user's choice, using the wirecookies-saved event and a plain localStorage object as the consent gate. Wirecookies is a Laravel package which handles the cookies consent for you. It gives you a consent banner and a preferences modal from a single Blade tag, and, more usefully, it hands you a plain localStorage object and a browser event you can use as the gate for your analytics and marketing scripts. This article is built around that gate, not around how the banner looks. One thing to get out of the way first, because it will bite you otherwise: Wirecookies ships no JavaScript of its own and uses wiremodal's JS to open the preferences modal. If you skip the wiremodal import in the install steps, the banner still shows and Accept all / Reject all still work, but the Configure button and the floating re-open button silently do nothing, with no error in the console. Do the JS step. How to install Pull the package in with Composer. The service provider is auto-discovered, so there is nothing to register. composer require edulazaro/wirecookies Wirecookies depends on edulazaro/wiremodal , which Composer pulls in for you. Now import the stylesheet in resources/css/app.css , after a wire* base (wiremodal or wiretoast) that defines the theme tokens. /* resources/css/app.css */ @import '../../vendor/edulazaro/wiremodal/resources/css/wiremodal.css' ; @import '../../vendor/edulazaro/wirecookies/resources/css/wirecookies.css' ; Then bundle wiremodal's JS. This is the step that makes the Configure and re-open buttons work, so do not skip it. // resources/js/app.js import ' ../../vendor/edulazaro/wiremodal/resources/js/wiremodal.js ' ; How to use it Drop the single Blade component once, near the end of your layout. <x-wirecookies :policy-url="route('cookies')" /> First-time visitors get a bottom banner after a short delay. When they choose Accept all, Reject all, or save from the Con

🕉️ Devlog — गुरु-दीक्षा: Teaching Karma Without Breaking Immersion "गुरु बिना ज्ञान नहीं।" Without a Guru, there is no knowledge. The Problem Moksha is a game rooted in Sanatan Shastra — Vedic Karma mechanics, Sanskrit concepts, rebirth cycles. It's intentionally deep. And that depth was quietly becoming its biggest barrier. New players would start the game and immediately face naama-jaap, vairaagya, prarabdha, chetana-jagriti — all at once, with no guidance. Within the first 30 seconds, most had no idea what they were doing or why. The game needed a tutorial. But it needed one that didn't betray what Moksha is. Why a Normal Tutorial Wouldn't Work The obvious solution — pause the game, show a tooltip, unpause — felt completely wrong for Moksha. Spiritually, a hard pause breaks the flow of consciousness. Mechanically, isPaused = true is deeply wired into audio ducking, gamepad state, and ambient layers. Hijacking it for tutorial logic would have introduced subtle bugs across every system. An earlier attempt at a tutorial (Issue #30) tried to live inside engine.js itself. That was worse — the engine is already the heaviest file in the codebase, and embedding tutorial step state there violated the entire modular architecture we'd been building toward. So I scrapped both approaches and started over. The Solution: गुरु-दीक्षा (Guru's Initiation) The new system is built around one philosophical reframe: a Guru doesn't stop the world to teach. They walk alongside you. This became the technical foundation too. A New Module — src/tutorial.js TutorialManager is a self-contained ES6 class. It doesn't import from engine.js or touch any game state directly. Instead, main.js passes it an engine state snapshot every frame via checkCompletion(state) . The tutorial reads — never writes. engine.js ──(no connection)──> tutorial.js main.js ──(snapshot feed)──> tutorial.js Zero coupling. Zero risk to existing systems. Slow Motion, Not Hard Pause When a tutorial card is visible, the game

Your cron expression can be valid and still never run A cron parser can answer one question— does this have five fields and legal tokens? —while your scheduler needs a different answer: will this job ever run, and will it run when I intended? That gap is where silent cron failures live. A schedule can be syntactically valid, return no parser error, and still be impossible, surprisingly broad, or operationally noisy. Here is a small semantic checklist you can run before deploying a schedule. 1. Check the calendar, not only the grammar Consider: 0 0 30 2 * This has the right five-field shape: minute, hour, day of month, month, day of week. But February has no day 30. A syntax-only validator can label it valid, while a calendar-aware validator should tell you that its approximate frequency is never. That distinction is important in CI: treat a parse error as a broken input, but treat an impossible calendar match as a review failure. Both deserve attention, but they need different messages. The same idea applies to leap days. 0 0 29 2 * is meaningful, but it does not fire in non-leap years. Whether that is correct depends on the job; the validator should surface the edge case instead of silently deciding for you. 2. Be explicit about day-of-month/day-of-week semantics This expression is a classic source of surprises: 0 0 1,15 * 1 Many traditional cron implementations treat a restricted day-of-month and a restricted day-of-week as an OR , not an AND. In that model, the job runs on the 1st, the 15th, or Monday. Someone reading the expression as “the 1st or 15th when it is Monday” will get a different schedule. This is not a universal rule across every scheduler, so check the documentation for the runtime that will execute the job. The useful validation behavior is to warn whenever both fields are restricted and force the author to choose the intended semantics. For example, a lightweight pre-deployment check can start like this: function semanticWarnings ( expression ) {

Headline: Node.js executes TypeScript files directly — node script.ts works with no loader, no ts-node, and no build step — by stripping type annotations at load time. Type stripping is on by default since Node.js 23.6 and ships in the 22.18 LTS release, but it only covers erasable syntax: I enforce that with TypeScript 5.8's erasableSyntaxOnly flag, moved type checking to tsc --noEmit in CI, and left my decorator-heavy NestJS services on their existing build. Key takeaways Node.js runs .ts files natively by replacing type annotations with whitespace, a mechanism called type stripping. It is enabled by default since Node.js 23.6 and in the 22.18 LTS release; on Node 22.6–22.17 it sits behind --experimental-strip-types . Type stripping handles only erasable syntax. enum , namespace with runtime code, and constructor parameter properties need the separate --experimental-transform-types flag. Node.js never type-checks and never reads tsconfig.json . The type checker is still tsc --noEmit , run in CI or a pre-commit hook. TypeScript 5.8's erasableSyntaxOnly compiler option turns every non-erasable construct into a compile error, which guarantees a file Node.js can run. Relative imports must spell out the .ts extension, and Node.js refuses to strip types inside node_modules — published packages still ship JavaScript. Can Node.js run TypeScript without a build step? Yes, for most application code. Node.js 22.6 introduced type stripping behind the --experimental-strip-types flag, Node.js 23.6 turned it on by default, and the 22.18 release brought the default-on behavior to the LTS line. On Node.js 24 — the current LTS and my daily runtime — node script.ts simply executes. // hello.ts const greet = ( name : string ): string => `Hello, ${ name } ` ; console . log ( greet ( ' Node 24 ' )); console . log ( process . features . typescript ); // 'strip' The mechanism matters. In strip mode Node.js replaces every type annotation with whitespace instead of compiling the file, so l

Claude Code in CI: Running Agentic Code Review, Test Generation, and Auto-Fix on Every Pull Request This article was written with the assistance of AI, under human supervision and review. Why Agentic Code Review in CI Changes Everything Most CI failures waste hours on manual intervention because traditional bots flag problems but never fix them. Developers open a pull request, the linter fails, tests break, and someone must context-switch from their current work to diagnose and patch the issue. This context-switching compounds across teams until the cost of maintaining CI hygiene exceeds the value it provides. Claude Code running in auto mode solves this by operating as an autonomous agent inside the CI pipeline. When a pull request triggers the workflow, Claude Code reviews the diff, generates missing tests, attempts to fix failures, and posts structured feedback as review comments—all without human intervention. The developer receives actionable fixes instead of error logs. This distinction is critical. Traditional CI bots detect and report. Agentic CI detects, repairs, and documents. The ROI appears in two places: reduced time-to-merge for routine issues and preserved cognitive capacity for architectural decisions that actually require human judgment. Key Takeaways Claude Code in auto mode runs unattended in CI pipelines with a safety classifier blocking dangerous commands before execution. Agentic CI performs code review, test generation, and auto-fix in a single workflow—eliminating the manual context-switch loop. Production deployments require cost controls (token budgets per PR), scoped file permissions, and exit conditions to prevent runaway execution. GitHub Actions, GitLab CI, and Azure DevOps all support Claude Code integration through environment variables and secrets management. The pattern that works now is scoped, single-responsibility agents—one for review, one for test generation, one for auto-fix—not a single agent attempting all tasks. Claude Code

This guide is a collection or a summary on how to install and use a footprint of Apache Hadoop. I tried to follow an old version 2.7.1 guide that I created few years ago and adjusted this to use the latest version. Apache Hadoop 3.5.0 is used below; check the Apache releases page before future installations. These instructions target Linux (Ubuntu/Debian) for development or testing. Production clusters need Kerberos, network controls, encryption, monitoring, backups, and an upgrade plan. Do not expose HDFS or YARN ports to the internet. Native single-node installation Prerequisites sudo apt-get update sudo apt-get install -y openjdk-17-jdk openssh-client openssh-server pdsh curl tar java -version Hadoop requires Java and SSH; pdsh is recommended by the current Apache single-node documentation. Find JAVA_HOME if needed: readlink -f "$(command -v java)" | sed 's:/bin/java::' Download and install Pin the version for repeatable installs and verify Apache's SHA-512 checksum: export HADOOP_VERSION=3.5.0 cd /tmp curl -fLO "https://archive.apache.org/dist/hadoop/common/hadoop-${HADOOP_VERSION}/hadoop-${HADOOP_VERSION}.tar.gz" curl -fLO "https://archive.apache.org/dist/hadoop/common/hadoop-${HADOOP_VERSION}/hadoop-${HADOOP_VERSION}.tar.gz.sha512" sha512sum -c "hadoop-${HADOOP_VERSION}.tar.gz.sha512" sudo tar -xzf "hadoop-${HADOOP_VERSION}.tar.gz" -C /opt sudo ln -sfn "/opt/hadoop-${HADOOP_VERSION}" /opt/hadoop sudo chown -R "$USER":"$USER" "/opt/hadoop-${HADOOP_VERSION}" Add this to ~/.bashrc, adjusting JAVA_HOME if necessary: export JAVA_HOME=/usr/lib/jvm/java-17-openjdk-amd64 export HADOOP_HOME=/opt/hadoop export HADOOP_CONF_DIR="$HADOOP_HOME/etc/hadoop" export HADOOP_HDFS_HOME="$HADOOP_HOME" export HADOOP_YARN_HOME="$HADOOP_HOME" export HADOOP_MAPRED_HOME="$HADOOP_HOME" export PATH="$PATH:$HADOOP_HOME/bin:$HADOOP_HOME/sbin" Then load and verify it: source ~/.bashrc sed -i "s|^# export JAVA_HOME=.*|export JAVA_HOME=${JAVA_HOME}|" "$HADOOP_HOME/etc/hadoop/hadoop-env.sh" had

This is a submission for Frontend Challenge - Comfort Food Edition, Perfect Landing 🍳 Pixel Chef AI — A Memory Kitchen That Learns Your Taste What I Built Pixel Chef AI is an interactive AI cooking companion built around a simple idea: Food is not only about recipes. It is about memories, habits, emotions, and personal taste. Instead of being a traditional recipe generator, Pixel Chef AI creates a complete AI-powered cooking journey: 🧊 Enter the Memory Kitchen 🥬 Choose ingredients 🤖 Let AI analyze flavors and nutrition 🔥 Cook with real-time AI guidance 🍽️ Reveal your final dish 🧬 Build your personal Taste DNA Every cooking session becomes a memory. Over time, the AI learns your cooking preferences, flavor choices, and habits to create a more personalized kitchen experience. The core question behind this project: What if your AI assistant could remember how you cook and become your personal kitchen companion? ✨ Features 🧠 AI Taste Intelligence Pixel Chef AI is designed around the idea that cooking decisions are personal. The AI analyzes: Ingredient combinations Flavor balance Nutrition information User preferences It can: Predict flavor direction Suggest ingredient improvements Recommend better combinations Adapt suggestions based on cooking goals 🤖 AI Cooking Companion A pixel AI chef accompanies users throughout the entire cooking process. The AI provides: Ingredient analysis Flavor recommendations Cooking suggestions Real-time guidance during cooking Personalized feedback The goal is to make AI feel like a kitchen partner, not just a chatbot. 🧊 Interactive Pixel Kitchen The experience starts inside a cozy pixel-art kitchen. Users can: Open the fridge Select ingredients Create their own combinations Watch AI analyze their choices The kitchen becomes a place where users interact with AI through cooking. 🔥 AI Cooking Simulation Cooking becomes an interactive experience instead of a simple result page. During cooking: A cooking timeline controls progress Different coo

What is output of ""2">"10"" true or false At first glance, this looks completely wrong. We all know that: 2 > 10 is obviously: false Because 2 is smaller than 10. But what happens when we add quotation marks? "2" > "10" The result is: true 😱 Wait… how can 2 be greater than 10? The answer is simple: ""2"" and ""10"" are not numbers. They are strings. 🔢 Numbers vs. Strings In JavaScript, these two values are different: 2 This is a number. While: "2" This is a string. The quotation marks tell JavaScript that the value should be treated as text. So: 2 > 10 compares two numbers: 2 > 10 → false But: "2" > "10" compares two strings. And that's where things get interesting! 🔤 How Does JavaScript Compare Strings? When JavaScript compares two strings, it uses lexicographical comparison. You can think of this as comparing text in a dictionary-like order, based on the character values. Let's compare: "2" "10" JavaScript looks at the first character of each string: "2" → first character is 2 "10" → first character is 1 Since the character ""2"" comes after ""1"" in the ordering used for the comparison, JavaScript determines: "2" > "10" as: true So: console.log("2" > "10"); outputs: true 🧪 Let's Compare Both Cases Case 1: Numbers console.log(2 > 10); Output: false Because JavaScript compares the actual numerical values: 2 is less than 10 Case 2: Strings console.log("2" > "10"); Output: true Because JavaScript performs a string comparison. The important thing is: 2 → Number "2" → String The quotation marks can completely change how JavaScript interprets the value. ⚠️ What About Mixed Types? Now look at this: console.log("2" > 10); Here, one value is a string and the other is a number. JavaScript handles this differently. In this case, it converts the string ""2"" into a number for the comparison. So the comparison effectively becomes: 2 > 10 The result is: false This is why understanding data types is extremely important when programming. 💡 The Big Lesson These three comparisons

Every time I needed to "compress an image online" or "merge a PDF", I ended up on some site that makes you upload your file to their server. For a random meme, fine. For a contract, an ID scan, or anything private? No thanks. So I built QuickKit — a growing kit of 38 free tools that run 100% in your browser. Your files and text never leave your device. No signup, no watermarks, no tracking of what you process. How it works (the fun part) The whole thing is a static site — no backend, no database, no server cost. Everything happens client-side with browser APIs: Image compressor / resizer → the Canvas API ( canvas.toBlob(type, quality) ) Image → PDF / Merge PDF → jsPDF and pdf-lib, entirely in-page Password / UUID generators → the Web Crypto API ( crypto.getRandomValues ) for real cryptographic randomness QR codes → generated locally, no redirect or tracking baked in Hash generator (SHA-256/1/512) → the SubtleCrypto API Countdown timer & "days since" counters → shareable via the URL itself (state encoded in query params), so there's still no backend Because nothing is uploaded, the tools are faster and more private than upload-based services — and they even work offline once loaded (it's an installable PWA). A few of the tools Files & docs: image compressor, image resizer, image→PDF, merge PDF. Dev utilities: JSON formatter, Base64, hash generator, UUID, timestamp converter, case converter. Everyday: QR generator, word counter, unit/percentage/age calculators, world clock, "your life in weeks". The privacy architecture, in one line If the browser can do it, there's no reason to send the user's data to a server. That principle killed all the usual costs (no servers, no storage, no compliance headaches) and made privacy the default instead of a feature. Would love feedback — especially on tools you wish existed. What "online X converter" do you use that you wish ran locally? 👉 quickkit.space

A finished browser game is a bundle of static files. Whether you built it in Phaser, Three.js, Babylon.js, Godot, or plain canvas code, the output uploads anywhere, which is exactly why the publishing decision trips people up. Every channel accepts the same build, so the choice is never technical. It is about who owns the audience, who owns the money, and who owns the URL. Here is how the three channels actually compare once you have shipped to all of them. The Three Channels Game portals aggregate thousands of titles, monetize with ads, and share revenue. Indie platforms like itch.io act as storefronts you control, with community feedback attached. Self-hosting on your own domain gives you everything except an audience. Most developers who do this well use more than one at the same time. The marginal cost of adding a channel is usually just reading the submission guidelines and wiring up an SDK, so treating them as either/or leaves reach on the table for no reason. What Portals Actually Require CrazyGames reaches over 20 million monthly players and runs a two stage process. Basic Launch takes your game with minimal integration and tests it with a limited audience for around two weeks. Hit their engagement benchmarks and you are invited to Full Launch, which needs the full SDK for ads, auth, cloud saves, and analytics. Their technical bar for Basic Launch is an initial download under 50 MB, fewer than 1,500 files, and PEGI 12 content. Poki is curated and editorially reviewed, leans mobile-responsive, and pulls strong search traffic with a younger audience. GameDistribution syndicates across hundreds of publisher sites through an embed widget, so you get reach but little brand visibility. Newgrounds still rewards experimental work with a community that engages rather than an SDK that monetizes. The trade in all four cases is the same: the portal brings the players, and in return it owns the player relationship and can change terms whenever it wants. Self-Hosting With

This is a submission for Frontend Challenge - Comfort Food Edition, Perfect Landing * What I Built: * I built Ember & Spice which is an interactive landing page celebrating Tandoori Paneer Tikka, one of North India's most iconic comfort foods. The site is built for a fictional restaurant of the same name and brings the dish to life through immersive visuals and interactive features. * The page includes: * A hero section with an aesthetic AI-generated tandoori video A sizzle effect — click the Sizzle button and sparks fly across the image An interactive skewer builder where you stack paneer, peppers, and onions then grill them A spice dial slider that visually changes the marinade heat from Mild to Fiery A CSS-art tandoor oven that roasts your built skewer An ingredient tasting plate — click cards to add items A recipe checklist with a live progress bar A reservation form with client-side validation Fully responsive, mobile-first design with scroll-reveal animations Demo: ** Live site* : https://tandoori-paneer.vercel.app/ **Github *: https://github.com/jogadiyadipak28-art/tandoori-paneer * Journey: * I chose Tandoori Paneer Tikka because it's the kind of dish that carries memory (PS: It's my favorite dish) the smell of charcoal, the bright orange marinade, skewers shared at family gatherings. I wanted the page to feel as warm and alive as the dish itself. The most fun part was building the interactive Kitchen Lab, the skewer builder, spice slider, and tandoor oven are all pure vanilla JS and CSS, no libraries. Getting the tandoor CSS art to glow and the skewer pieces to animate onto the rod was deeply satisfying. I'm particularly proud of the sizzle effect, clicking the button sends 16 spark particles flying across the hero image and story photo, with a brief brightness flash. It's a small touch but it makes the page feel reactive and alive. What I learned: How powerful IntersectionObserver is for scroll-reveal without any libraries. CSS aspect-ratio for keeping the

This is a submission for Frontend Challenge - Comfort Food Edition, Perfect Landing What I Built The Comfort Atlas is a spinning 3D globe of comfort food from ~100 countries. Virtually travel the globe and have a taste of the comfort foods from 100~ countries. Moussaka in Greece, Jollof Rice in Nigeria, Pho in Vietnam. There is also a "featured dish of the day" that rotates deterministically so it's the same for everyone visiting that day. And the fun feature: visitors can type in their own comfort dish and generate a downloadable, passport-stamp-style card in one of three color styles. Demo https://comfort-atlas.netlify.app/ Journey I started with a flat SVG world map, clickable countries, keyboard support, a hover tooltip on the map, all built on real elements so accessibility came for free. It worked fine, but it looked very meh. So i decided to try something i have never done before. Make a globe! I used cobe which promised a 3D globe out of the box. First attempt rendered absolutely nothing but floating dots. 😂 With a lot of the help of my friend claude, we found out that their docs are outdated, and there is not a createGlobe() draws exactly one synchronous frame and expects you to drive a requestAnimationFrame loop calling .update() yourself. Two things on the globe I'm especially proud of, because neither had any library support: a hover tooltip that tracks a marker in 3D space, and a fading "trail" of great-circle arcs between the countries you've visited. Both came down to translating the projection math out of a minified bundle into something readable, then reimplementing it myself. What I would do next: dark mode. What I learned: a lot about accessibility in 3D/canvas, which is so much more difficult than the 2d one, one check for a11y is never enough. Maps are hard, and getting something to track a moving 3D object from regular DOM is even harder. Licensed under MIT Fun fact: I don't like Moussaka, even though i am greek, my comfort food is Pizza. xD