标签：#frontendchallenge

This is a submission for Frontend Challenge - Comfort Food Edition, Perfect Landing Mexico is our heritage. Yet, we have no family there to visit. That sounds sadder than it is. What it actually meant, for the years before my wife and I were married and most of our time off since, is that we had to go find it ourselves. No family kitchen waiting. No grandmother's recipe with an address attached. Just the two of us and a country that is ours and that we did not know. So we did what every hungry person in a new city does...we ate. Six cities, six completely different cuisines, and somewhere in there it stopped feeling like traveling. A tlayuda from a stand outside Santo Domingo in Oaxaca. An hour in line at El Yaqui with a michelada in Rosarito. Different food every time. Same feeling every time, and there is no English word for that feeling. There is a Spanish one. What I Built Sobremesa is the time you stay at the table after the food is gone, still talking. Not the meal. The part after the meal. That is the whole site. Six meals across six Mexican cities, and the thing it measures is not how good the food was. It is how long we stayed. Tijuana, one hour. Rosarito, two. Ensenada, one. Guadalajara, ninety minutes. Mexico City, two hours. Oaxaca, two. The page adds them up at the end. Nine hours and thirty minutes at six tables. Comfort food usually means a kitchen you can go back to. We do not have one over there. So the six tables became it. The stand at Plaza Santo Domingo is the family table. The hour in line at Tacos El Yaqui is the Sunday afternoon table. Each entry has the dish, where we ate it, one verified fact about the food, and one line that is just ours, from our experience. There is a form at the bottom where you add your own table and download a card of it, generated in your browser. Nothing gets sent anywhere. One static HTML file. No framework, no build step, no tracking, no cookies, no storage. Two fonts off Google Fonts and nothing else. Designed an

What I Built Gnoke Books works like an actual printed magazine on a table — you grab the...

This is my official entry for the Frontend Challenge - Comfort Food Edition under the CSS Art category. Inspiration 🍚🐟 When thinking about "comfort food," I didn’t want to pick a generic burger or pizza. I wanted to build something tied directly to home and my culture: Ilish Polao (Hilsha fish cooked with fragrant rice). Hilsha is the national fish of Bangladesh, and Ilish Polao—paired with a side of spicy-sweet tomato chutney—is the ultimate comfort meal in our house. Translating a dish loaded with personal memory into raw CSS felt like the perfect way to combine culture with code. Demo mahbubasultanaety.github.io GitHub Repository: MahbubaSultanaEty / hilsha-polao How I Built It Instead of relying on SVGs or background images, every visual element in this piece is built from scratch with HTML elements and pure CSS styling. Here is a quick breakdown of what went into the scene: Fish-Shaped Platter: Built using layered border-radius curves and subtle box-shadows to mimic ceramic depth. The Polao Mound: Formed using rounded CSS containers with layered gradient textures. Scattered Rice Grains: Instead of hardcoding dozens of tags in HTML, I used a tiny JS script to generate and randomly position rice grains over the mound so the texture feels natural rather than grid-like. The Hilsha Piece: Crafted with CSS clip-paths and custom border geometries to get the signature cut and inner texture right. Animated Steam: CSS keyframe animations controlling opacity and vertical translate transforms to give the food a hot, fresh feel. Garnishes & Sides: Added cinnamon sticks, bay leaves, green chilies, and a small side bowl of tomato chutney to complete the plate. The Sprinkle of Javascript: Rice Generation Hardcoding hundreds of rice grains in static HTML felt redundant. So I used the minimal for loop JS approach to scatter them: This tiny bit of scripting saved me time and made the plate look organic every single render. Takeaways Building CSS art always forces you to think dif

This is a submission for Frontend Challenge - Comfort Food Edition, CSS Art. ...

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

This is a submission for Frontend Challenge - Comfort Food Edition, CSS Art. Inspiration For me comfort food has never really been about the plate. It's about who's sitting around it. I grew up in Pakistan, and the memory that comes back first is everyone crowded around the dastarkhwan over a steaming handi of chicken biryani. Someone always grabs the serving spoon before anyone else. Someone asks for more raita. The jalebis are gone before the meal even properly starts, and there's a glass of chilled lassi at every place. So I didn't want to draw a dish. I wanted to draw that — the small ritual of the first plate being served — using only HTML and CSS. Demo Live Demo : https://waasilaasif.github.io/Dastarkhwan/ Source Code : https://github.com/WaasilaAsif/Dastarkhwan Journey This went well past drawing static shapes. The centerpiece is a brass handi overflowing with biryani, framed by the usual suspects: raita, jalebis, lassi, an empty plate, and the serving spoon resting beside the pot. All of it is HTML and CSS — gradients, layered pseudo-elements, border-radius pushed to its limits, CSS-only shadows, and a fairly stubborn amount of keyframe choreography. The animation was the part I actually cared about. I didn't want things to just move. I wanted a sequence. A hand comes in, picks up the spoon, scoops from the handi, serves onto the plate, adds a spoonful of raita, sets the spoon back down, and the whole table settles into its idle state before the loop starts again. Getting the food recognizable was harder than getting it to look nice. Making a lump of gradients read as "that's a chicken leg" or "that's clearly biryani and not just yellow rice" took a lot more fiddling than the playful final result suggests. Like a lot of people in this challenge, I used AI in the process — I worked with Claude to iterate on the harder animation timing. It's a tool in the workflow, not a shortcut past the thinking. What stuck with me is that CSS can carry a story, not just sty

This is a submission for Frontend Challenge - Comfort Food Edition, CSS Art . Inspiration Hyderabadi dum biryani is more than a dish to me—it is a ritual. The sealed handi, the slow charcoal heat, the suspense before the atta crust is broken, and the first rush of saffron, mint, birista, and spice all feel inseparable from the experience. I wanted to turn that moment into an interactive midnight poster: Hyderabad’s skyline behind a copper handi, with the food hidden until the viewer breaks the seal. Demo Click BREAK THE SEAL to lift the lid and reveal the four biryani layers. How it works The artwork is built with HTML and CSS only: A native <details> / <summary> control stores the open and closed states. CSS :has() coordinates the seal crack, lid lift, layer reveal, steam, labels, embers, and state-aware copy. Rice grains, mint leaves, birista, spices, meat, copper patina, flour dust, the skyline, and the moon are all CSS shapes. There are no images, SVGs, canvas, JavaScript, gradients, or frameworks. A mobile composition and prefers-reduced-motion keep the piece responsive and accessible. The reveal is deliberately choreographed: seal cracks → lid lifts → layers separate → labels arrive → steam settles Journey The hardest part was keeping the illustration detailed without losing the strong poster silhouette. I iterated on three areas: Material: hammered copper marks, soot, flour residue, dough cracks, and print texture. Depth: curved food layers, overlapping grains, steam arches, and ingredient silhouettes. Motion: a staged opening sequence rather than making every element animate at once. The most satisfying decision was using a semantic HTML control for the interaction. The artwork still works with a keyboard, and disabling motion does not hide the final state. I used Codex as an iterative coding and visual-critique partner. I directed the concept, cultural references, composition, and final decisions, while the agent helped implement and test the CSS system. Wh

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

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

This is a submission for Frontend Challenge - Comfort Food Edition, CSS Art. ...

This is a submission for Frontend Challenge - Comfort Food Edition, CSS Art . Inspiration I'm from El Salvador, and here comfort food has one name: pupusas . Thick corn tortillas stuffed with cheese, beans and chicharrón, served with curtido (pickled cabbage slaw) and tomato salsa. It's our national dish, but more than that — it's the food you eat at a plastic table at night, under one warm light, with the comal hissing somewhere behind you. That last image is what I wanted to capture. Not just the plate: the moment . So the piece has a light switch. Demo Two things to try: "Bañar en salsa" — pours salsa over each pupusa with a staggered cascade. "Apagar la luz" — turns the whole scene into a night pupusería, lit only by a flickering candle (veladora). Journey Everything is CSS: gradients, border-radius , box-shadow and blend modes. No images, no SVG, no libraries. JavaScript is 15 lines — two class toggles. The tablecloth is the flex. The blue-and-white geometric mantel is five bands built entirely with repeating-conic-gradient and repeating-linear-gradient — chained diamonds, sawtooth rows, chevrons. Zero background images. This was the part I rewrote the most until the patterns locked together. The night is one single element. When you turn off the light, I'm not repainting anything. A single overlay div with mix-blend-mode: multiply holds two stacked radial gradients: near-white around the candle (multiplying by white changes nothing — so that IS the light), falling off to deep blue at the edges. The steam even turns moonlit-blue for free, because that's just what multiply does to white pixels. One div, one blend mode, full day/night mood shift. Corn kernels are two offset dot grids. The mazorca's kernels are two radial-gradient grids shifted by half a cell — which is exactly how kernels interlock on a real cob. That half-cell offset is the difference between "corn" and "polka dots". The curtido is seven crossed stripe layers. White and purple cabbage, carrot, c

Project Overview The project is a React-based web application that fetches data from a REST API and displays it in a dynamic dashboard. Users can navigate between pages, search data, and interact with multiple components that rely on asynchronous API calls. While testing the application, I noticed that navigating away from a page during an active API request occasionally caused React warnings and unnecessary memory usage. This issue affected the application's stability and could lead to performance degradation over time. The problem was caused by an asynchronous operation continuing even after the component had been unmounted. For example, an API request initiated inside useEffect would still complete after the user navigated away, attempting to update the component's state. React would warn that a state update was attempted on an unmounted component. Before useEffect(() => { fetch("/api/users") .then((res) => res.json()) .then((data) => setUsers(data)); }, []); If the component unmounted before the request finished, the callback still attempted to update the state. After I solved the issue by using the AbortController API to cancel the request during cleanup. useEffect(() => { const controller = new AbortController(); fetch("/api/users", { signal: controller.signal, }) .then((res) => res.json()) .then((data) => setUsers(data)) .catch((err) => { if (err.name !== "AbortError") { console.error(err); } }); return () => controller.abort(); }, []); This ensures that pending requests are cancelled when the component unmounts, preventing unnecessary state updates and avoiding memory leaks. Code Prince3963 (Patel Prince) / Repositories · GitHub Prince3963 has 48 repositories available. Follow their code on GitHub. github.com My Improvements This fix focused on improving both performance and application reliability. What I improved Prevented memory leaks caused by unfinished asynchronous requests. Added proper cleanup logic inside useEffect. Eliminated React warnings about u

This is a submission for Frontend Challenge: Comfort Food Edition , CSS Art: Comfort Food. What I Built A pure CSS art scene of the ultimate Hong Kong comfort food: a steaming bowl of wonton noodle soup (雲吞麵) at a late-night dai pai dong. Nothing says "home" to me like a midnight bowl of wonton noodles under a glowing paper lantern — so I recreated that feeling entirely in CSS: no images, no SVG, just divs, gradients, border-radius tricks, and keyframe animations. The scene includes: 🥣 A classic HK porcelain bowl with the iconic blue rim stripe pattern (repeating-linear-gradient) 🍜 Golden broth with a noodle nest built from repeating-radial-gradient concentric arcs 🥟 Four pleated wontons, half-submerged at the broth line 🥢 Wooden chopsticks resting across the rim (tapered with clip-path) ♨️ Soft, organic steam wisps — blurred gradient blobs on staggered transform/opacity loops 🏮 A swaying red paper lantern casting a warm light cone 🌙 Moon, twinkling stars, bokeh lights, a flickering pink neon 雲吞麵 sign, chili oil saucer, and a cup of tea Demo zsp67x2nfnudg.kimi.page 👆 Live full-screen demo — watch the steam rise, the lantern sway, and the neon sign flicker. View page source to see the full CSS — every technique is commented! Journey Design goal: I wanted the warmth of the lantern light to contrast against the cool indigo night, with a subtle purple dusk at the horizon — the exact feeling of sitting at a Hong Kong street stall at 1am. Techniques I'm proud of: The steam was the hardest part. Thin wisps disappeared against the sky, so I layered blurred radial-gradient blobs (13% wide, filter: blur) with keyframes that hold a long visible opacity plateau (0 → .7 → .65 → .38 → 0). Four wisps run on two different periods (6s / 7.2s) with delays locked 25% of a cycle apart, so at least one wisp is always near peak — the bowl never stops steaming. The bowl is a single div with border-radius: 0 0 50% 50% / 0 0 100% 100% for the porcelain body; the broth ellipse's own border d

--- title : " Perfect Landing — Soul & Spoon (Comfort Food Edition) — Research Summary" published : false tags : [ " frontend" , " html" , " css" , " javascript" , " accessibility" , " performance" , " react" , " svelte" ] cover_image : " https://images.unsplash.com/photo-1543353071-087092ec393a?q=80&w=1600&auto=format&fit=crop&ixlib=rb-4.0.3&s=3" canonical_url : " " series : " " --- Perfect Landing — Soul & Spoon Research Summary A concise, ready-to-paste DEV post that summarizes the research, design decisions, technical choices, and next steps for the Soul & Spoon landing-page project — a warm, accessible, performance-minded single-page site celebrating soul food. What I Built Soul & Spoon — Comfort Food Landing Page is a single-page landing site that showcases soul-food plates with a polished, modern frontend. The static prototype includes: Hero with a full-bleed background and clear CTAs. Featured dishes section with responsive cards and descriptive copy. Gallery of soul-food plates with a keyboard-accessible lightbox. Contact form with client-side validation and toast feedback. Responsive, accessible, and performant implementation using semantic HTML, picture / srcset /WebP, lazy loading, and minimal JavaScript. Research Summary and Rationale Design goals Evoke warmth and comfort through color, rounded shapes, and soft shadows. Prioritize readability and hierarchy for quick scanning on mobile and desktop. Keep interactions simple and predictable: smooth scroll, accessible modal, and unobtrusive toast notifications. Accessibility findings Semantic elements ( header , main , section , figure , figcaption , footer ) improve screen-reader navigation and SEO. Keyboard operability is essential: gallery images must be focusable and open via Enter/Space; Escape should close the lightbox. ARIA attributes ( aria-hidden , aria-expanded , role="dialog" ) plus focus management significantly improve modal usability. Performance findings Images dominate page weight; srcset an

This is a submission for Frontend Challenge - Comfort Food Edition, CSS Art. Inspiration Comfort...

We're back with another Frontend Challenge, and this time we're hungry! 🍜🥧 Running through August 16 , Frontend Challenge: Comfort Food Edition invites you to build something inspired by the food that makes you feel at home. Show off the dish you make when nothing else will do, build a site for a restaurant that exists (or one that only lives in your head), share the recipe you've been perfecting for years, or put a spotlight on a regional dish that deserves more attention. Whether you're a CSS connoisseur, a JavaScript chef, or somewhere in between, there's a prompt here for you. We hope you give it a try! The Prompts CSS Art: Comfort Food Create a work of art using primarily CSS! Let food be your inspiration: a steaming bowl of ramen, a stack of pancakes, a perfectly cut slice of pie, or the dish you grew up eating. CSS Art Submission Template Note: We're now allowing a sprinkle of JavaScript in CSS Art submissions! However, judging will continue to focus primarily on the CSS component, so keep JavaScript usage light and purposeful. The star of the show should still be your CSS skills. Perfect Landing: Comfort Food Build a polished, functional landing page with a food theme. This could be a real or imaginary restaurant, a recipe collection, a food festival, a love letter to a regional dish, or anything else you can imagine, as long as it captures the theme and demonstrates excellent frontend fundamentals. Perfect Landing Submission Template Note: You may use JavaScript, TypeScript, Dart, WebAssembly, or any other browser-compatible language/runtime in your Perfect Landing submissions! Show us what modern web development can do. Judging Criteria and Prizes CSS Art submissions will be evaluated on: Creativity Effective Use of CSS Aesthetic Outcome Perfect Landing submissions will be evaluated on: Accessibility Usability and User Experience Creativity Code quality Prizes Each prompt winner will receive a DEV++ Membership and an exclusive DEV Badge. All Participants w

You've built todo apps, counters, and forms. But can you handle a grid of 50 cells that reference each other through formulas? This challenge pushes your state management skills into real spreadsheet territory — formula evaluation, two-way cell bindings, and an interface that juggles editing, selection, and keyboard shortcuts all at once. 🔥 Start the Challenge Now 🧩 Overview Build a spreadsheet with real-time formula evaluation. You'll wire up a 10-row × 5-column grid where cells support basic values and Excel-style formulas (like =A1+B2), column and row selection, and a formula bar that mirrors what you're typing. ✅ Requirements Render a spreadsheet with column headers A through E and rows 1 through 10 Each cell uses an <output> element for the computed value and an <input> overlaid for editing Click a cell to edit; press Enter or blur to commit the change Formulas starting with = must be evaluated: Arithmetic: =1+1 → 2 Cell references: A1= 5 and B1= =A1+3 → 8 Click a column header to select/deselect that column Click a row number to select/deselect that row Selecting a column deselects any row and vice-versa Backspace clears the selected column or row Click outside the table deselects everything A formula bar ( fx ) mirrors the editing cell's value Cells must start empty — no default values 💡 Notes Use useState for cells, selected column, and selected row. No need for useReducer here. Each cell uses two overlapping layers: a visible <output> for the computed value and an invisible <input> for the raw formula. Toggle with opacity-0 / opacity-100 so the input stays mounted. Evaluate formulas with eval : generate JS const declarations from all cell values, wrap them in an IIFE, and evaluate. Recompute every cell on any change — cells can reference each other. 🧪 Tests renders the app title renders the spreadsheet with column headers A-E and rows 1-10 renders cells with initial empty values allows editing a cell and displays the new computed value evaluates a simple fo