标签：#challenge

Weekly Challenge 385 Each week Mohammad S. Anwar sends out The Weekly Challenge , a chance for all of us to come up with solutions to two weekly tasks. My solutions are written in Python first, and then converted to Perl. Unless otherwise stated, Copilot (and other AI tools) have NOT been used to generate the solution. It's a great way for us all to practice some coding. Challenge , My solutions Task 1: Uncommon Words Task You are given two sentences. Write a script to return list of all uncommon words, order is not important. My solution This is relatively straight forward. I start with a Counter called word_freq which is a special type of dictionary which is ideal for counting frequencies. I take one or more sentences as input. I loop through each sentence, separate them by spaces and increment the word_freq counter. I then return all words that have a frequency of 1 . Since Python 3.6, dictionaries maintain their order. Therefore the words in the output will maintain their order from the supplied sentences. from collections import Counter def uncommon_word ( * sentences : str ) -> list : word_freq = Counter () for sentence in sentences : word_freq . update ( sentence . split ()) return [ word for word in word_freq if word_freq [ word ] == 1 ] Perl does not maintain order of hashes. For the Perl solution, I sort the unique words alphabetically. This is an example of stacking sort , map (to quote strings) and grep (to filter duplicated words) in a single function. sub main (@sentences) { my %word_freq = (); foreach my $sentence ( @sentences ) { foreach my $word ( split /\s+/ , $sentence ) { $word_freq { $word } ++ ; } } say " ( " . join ( " , ", sort map { qq{"$_"} } grep { $word_freq { $_ } == 1 } keys %word_freq ) . " ) "; } Examples $ ./ch-1.py "apple banana apple" "banana orange" ( "orange" ) $ ./ch-1.py "cat dog" "bird fish" ( "cat" , "dog" , "bird" , "fish" ) $ ./ch-1.py "the quick brown fox" "the quick" ( "brown" , "fox" ) $ ./ch-1.py "hello" "hello" () $ ./

This is a submission for DEV's Summer Bug Smash: Smash Stories powered by Sentry . The Challenge: Flying Blind in Production Pull Request - https://github.com/NishikantaRay/InsightTrack/commit/a70ca0a00c8cd169a93b300cfcb450b5ecbde7f8 Before this summer, our analytics platform, InsightTrack , had a fundamental flaw in how it handled observability. We were tracking standard JavaScript errors via a basic window.onerror handler, but it was just noise. We had no stack traces, no grouped fingerprints, and absolutely no release context. If a customer integrated 10 different sites into our platform, we couldn't accurately tell them if a specific spike in errors was a brand-new issue or a resurrected bug from three deployments ago. We were flying blind, and our users were feeling the pain of delayed bug resolutions. The ultimate "bug" wasn't a single line of broken code; it was our entire error observability pipeline. The Solution: A Deep-Dive Sentry Integration We decided to smash this architectural bug by building a native, robust integration with Sentry . We didn't just want to add a widget; we wanted to bring Sentry's rich context (fingerprinted grouping, permalinks, regression status, and user-impact counts) directly into the InsightTrack dashboard so traffic and bugs could be watched side-by-side. How We Built It To make this work seamlessly at scale (where one customer might poll 10 independent Sentry projects simultaneously), we built a dual-path ingestion system: The Polling Backstop: We set up a bounded worker pool (to prevent slow projects from stalling the fleet) that polls the Sentry API every 5 minutes. To respect rate limits, we built an adaptive cadence —active projects poll frequently, while quiet or erroring projects exponentially back off. The Near-Real-Time Webhook: For instant visibility, we allowed users to point a Sentry Internal Integration webhook at our API. Using HMAC signatures verified in constant time against a stored secret, new or regressed is

This is a submission for Frontend Challenge - Comfort Food Edition, CSS Art . Inspiration Egusi soup with pounded yam. Jollof gets the headlines, but egusi is the quiet one that actually holds Nigerian homes together. Melon seeds, ugu, palm oil, and a dome of pounded yam you eat with your hands. I already sent this challenge a love letter to jollof for the Perfect Landing prompt. This is the companion piece, and it targets a different audience: not a flat poster, but a photograph with real depth. The entire table sits in a single CSS perspective plane, so the bowl is genuinely a bowl. You look down into it. Demo A morsel of pounded yam is resting on top of the dome. Press "Dip the yam" and watch it lift off, cross the table, drop into the soup and come back stained. No JavaScript anywhere near it. Journey The rule I set myself: zero JavaScript. The one interactive moment runs on a checkbox and a sibling selector. The checkbox stays keyboard focusable, the label carries a visible focus ring, and if you've asked your system for reduced motion, the morsel skips the flight and just shows up stained. The whole scene is sized in container query units, so it scales as one object from a phone to a desktop without a single media query for layout. Some of the tricks I'm proud of: The table is one plane with transform-style: preserve-3d and a rotateX , so everything standing on it uses translateZ to mean "up off the table" The bowl is six rings flaring up the Z axis. The top two are masked hollow, otherwise, they paint straight over the soup, and the whole thing reads as a solid disc. That bug is what taught me the technique The soup sits below the rim on the Z axis, so you see the inner wall and the shadow it throws across the curds The pounded yam is six contours stacked into a dome, each one a little brighter as it climbs toward the light The egusi curds are eleven stacked radial gradients, the palm oil pools at the rim through an inset shadow, and the oil sheen is a blurre

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 chose to build a classic Dum Biryani — the ultimate comfort food! 🍛 There is nothing quite like opening a steaming handi of biryani and seeing the rich, saffron-colored rice dotted with fried onions, mint, and spices. It's a dish that brings people together and feels like a warm hug, making it the perfect inspiration for the Comfort Food challenge. Demo Here is my CSS Art representation of a traditional Biryani Handi! I built this primarily using vanilla CSS to create the realistic clay texture of the pot, the individual grains of rice, the steam animations, and the garnishes. I added a tiny bit of JavaScript just for a subtle mouse-parallax tilt effect and a saffron sparkle when you click the pot. https://github.com/pandeynitish23/dev_css_chalange/ https://dev-css-chalange.nitishkumar-nk-np.workers.dev/ Journey Building this was a really fun exercise in CSS gradients and positioning! What I'm most proud of: The Clay Handi: I used layered radial and linear gradients along with inset box shadows to give the pot a realistic, 3D clay texture with lighting highlights. The Rice & Garnishes: Creating individual rice grains, mint leaves, and onion crisps using CSS border-radius and positioning was tedious but incredibly rewarding when it all came together. The Atmosphere: Adding animated steam and floating background spice particles helped bring the scene to life and make it feel hot and fresh. It was a great challenge keeping the JavaScript minimal and relying on pure CSS for the heavy lifting of the art itself!

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...

Hey all, as part of our expanding challenge program we want to update and clarify some challenge...

This is a submission for DEV's Summer Bug Smash: Smash Stories powered by Sentry. This happened a...

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 DEV's Summer Bug Smash: Smash Stories powered by Sentry. Did anyone ask for...

Deliberately best-effort — a settings tweak failing shouldn’t fail a deployment that already succeeded. It surfaces as public: false in the response and a visible warning in the UI, rather than silently handing someone a broken link. Live Stripe checkout failed on day one. Test mode worked perfectly. Live mode returned: Invalid line_items[0]: the product tax code is missing… Product tax code is required for Managed Payments, which is enabled by default on your account. A whole class of bug that only exists in production. I reproduced it directly against Stripe’s API before touching code, then opted the session out of Managed Payments — rather than inventing a tax classification, since whether to collect sales tax is a business decision, not a code one. The meta-lesson Every one of these five bugs was invisible to the test suite. The unit tests were green the entire time — because they tested my parsing logic, and every bug was in the query I sent or the transport I sent it over. Four of them were only findable by hitting the live endpoint and reading actual output. The 1996–2006 bug in particular looked like a total success from every angle except one: 566 results, HTTP 200, tests passing, correct shape. You had to actually look at the dates. Best Use of Sentry Not submitting to this category — DAREALTYTE doesn’t currently use Sentry. Worth being straight about it, since this project is a decent argument for adding it. Bugs 4 and 5 both returned HTTP 200 with well-formed payloads. Error monitoring wouldn’t have flagged either one; nothing threw. What would have caught them is exactly what I ended up doing by hand — inspecting real production responses and noticing the values were wrong even though the shape was right. The one place Sentry would have paid off immediately is Bug 3. The Safari Load failed was reported to me as a screenshot from a phone, with no stack trace and no way to reproduce it in my own environment. A Session Replay or a captured client-side exce

This is a submission for DEV's Summer Bug Smash: Smash Stories powered by Sentry . Every developer has experienced that moment when a project works perfectly but doesn't feel perfect. That was exactly what happened while I was building my Gem Price Estimator , a web application designed to estimate gemstone values based on multiple characteristics and pricing rules. The calculations were accurate. The interface looked good. But something bothered me. It wasn't as responsive as I wanted it to be. That small delay was enough to make the application feel slower than it should, and I knew there had to be a better way. This wasn't about fixing a crash or a broken feature. It was about finding the hidden performance bottleneck. The Project The Gem Price Estimator analyses several gemstone properties and combines them to generate an estimated market value. The estimation process considers multiple factors, including: Carat weight Color Clarity Cut Other pricing adjustments Every user interaction triggered a complete recalculation of the estimated value. Initially, this approach worked well while the project was small. As the pricing logic became more sophisticated, however, the application started doing significantly more work than necessary. The First Sign Something Was Wrong Nothing was technically broken. There were no JavaScript errors. No failed requests. No database issues. The application simply felt slower every time users adjusted the estimator. Those tiny delays might seem insignificant individually, but together they reduced the smoothness of the overall experience. I wanted every adjustment to feel nearly instant. That became my goal. Investigating the Problem My first assumption was that the issue was caused by database operations. So I started checking: Database queries Network activity Browser Developer Tools Console logs Individual calculation steps Surprisingly... None of those were the real problem. The application wasn't waiting on the database. It wasn'

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 DEV's Summer Bug Smash: Clear the Lineup powered by Sentry. ...

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

Two people asked a context compressor two completely different questions. It gave them the same answer. Not a similar answer — byte for byte the same 544 characters. Here's what that looked like: query="Fix the IntegrityError on commit" level=L0 -> 159 tok cache_hit=False query="Explain the tax rounding TODO in compute_tax" level=L3 -> 159 tok cache_hit=True identical output: yes (544 chars both) Different question. Different compression level. Same 544 characters, served from cache. Finding it I wasn't looking for this. I was auditing something else entirely — measuring how much meaning a context compressor loses, not how fast it runs. My harness feeds the same corpus through the compressor with different queries and checks which critical substrings survive: file paths, error types, line numbers, identifiers. I noticed two rows in my results table were identical. Same token count, same output. My first assumption was that my own harness had a bug — that I was passing the same query twice and hadn't noticed. So I changed the second query to something with no words in common with the first, and bumped the compression level from L0 to L3, which should change the output dramatically on its own. Same 544 characters. That was the moment it stopped being my bug. The cause One line: sid = content_hash(content) That sid was doing two jobs. It was the shadow ID — the handle used to refer to a stored document. And it was also the cache key. As a shadow ID it's correct: the same content should get the same handle. As a cache key it's wrong, because the output of compress() doesn't depend only on the content. It depends on the content and the query and the compression level. Two of those three inputs were simply not part of the key. So the first caller warmed the cache for a piece of content, and everyone who touched that same content afterwards got the first caller's answer — regardless of what they actually asked for. Why this is worse than a stale cache A stale cache gives y

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