DEV Community: ContardoRM

When Recipes Become Protest: A Chilean Comfort Food Landing Page

ContardoRM — Sun, 02 Aug 2026 17:08:23 +0000

This is a submission for Frontend Challenge – Comfort Food Edition, Perfect Landing.

What I Built

I built Comfort Food Funa, an interactive landing page inspired by a Chilean internet tradition known as a “funa gastronómica.”

A funa gastronómica is a humorous collective intervention in which people fill an institution's social media comments with traditional Chilean recipes. Instead of insults or destructive actions, the comment section becomes an unexpected cookbook filled with dishes that evoke home, memory, and shared identity.

My landing page recreates that phenomenon as a completely fictional and peaceful simulation.

A fictional museum post appears beside a live comment feed. New recipes gradually arrive as if a community were taking over the comment section in real time.

The recipes include:

Cazuela de Vacuno
Pastel de Choclo
Completo Italiano
Sopaipillas Pasadas
Empanadas de Pino

The default interface is in English so an international audience can understand the concept. However, the comments remain intentionally in Spanish to preserve their original Chilean voice. Each recipe also includes a short, optional English summary.

The site does not contact any social network, publish real comments, or interact with a real museum.

Demo

🌐 Live English experience:

https://comfort-food-funa.pages.dev/

🇨🇱 Spanish experience:

https://comfort-food-funa.pages.dev/es/

💻 Source code:

https://github.com/ContardoRM/comfort-food-funa

Desktop experience

The desktop layout places the fictional publication beside the live recipe feed, allowing the original post and the collective response to be understood together.

Mobile experience

On mobile, the experience becomes a single-column flow while preserving the language selector, theme control, live feed, pause action, and readable recipe content.

The live experience includes:

English and Spanish routes
Light and dark themes
Keyboard navigation
Pause and resume controls
Progressive recipe comments
Optional English summaries
Accessible simulation feedback
Responsive mobile and desktop layouts
Reduced-motion support
A strict maximum of 24 live comments in the DOM

Journey

Finding a different interpretation of comfort food

I did not want to create another restaurant menu or conventional recipe collection.

For me, comfort food is not only about ingredients. It is also about memory, family language, regional identity, and the feeling of returning home.

The idea of a funa gastronómica allowed me to connect those emotions with a distinctly Chilean digital tradition. In this experience, recipes become a collective voice.

The social media interface is therefore not just decoration. It is the narrative mechanism of the project.

Translating context without erasing the culture

One of the main design challenges was making the concept understandable to English-speaking judges without removing what made it authentic.

I decided to:

Make English the default interface language
Provide a complete Spanish route at /es/
Keep usernames, recipes, dish names, idioms, and emojis in Spanish
Mark each recipe comment with lang="es-CL"
Explain visibly why the comments remain untranslated
Offer short, optional English summaries

This approach translates the context, but not the voices participating in the fictional intervention.

Progressive enhancement

The application is statically generated with Astro.

Two complete recipe comments are included in the original HTML before JavaScript runs. The language navigation, hero, museum post, image, cultural explanation, recipes, and footer remain available without client-side JavaScript.

Svelte then enhances the page with:

The live feed
Pause and resume behavior
Relative timestamps
Like and save states
Accessible feedback messages
English summary controls
Dark-mode persistence
Visibility-aware scheduling

If JavaScript fails, the core story remains understandable.

Accessibility

Accessibility was treated as part of the architecture rather than a final checklist.

The project includes:

Semantic landmarks
A keyboard-accessible skip link
Visible focus indicators
Localized document languages
lang="es-CL" on Spanish comments
Accessible language navigation with aria-current
aria-pressed for toggle states
aria-expanded and aria-controls for summaries
Accessible live regions
Keyboard-operable controls
Reduced-motion support
Responsive reflow
Localized alternative text
Automated axe checks on both language routes

The feed announces important state changes without making the entire scrolling region constantly live.

Usability and performance

The desktop interface uses two columns: the fictional post on the left and the live recipe feed on the right. On smaller screens, the layout becomes a single readable column.

The simulation uses recursive setTimeout scheduling instead of an uncontrolled interval.

It also:

Pauses when the browser tab becomes hidden
Resumes when the user returns
Avoids forced autoscrolling while someone is reading older comments
Keeps no more than 24 comments in the DOM
Cleans timers and event listeners when the component is destroyed
Uses local avatars and a locally hosted museum image
Produces no external image requests during navigation

The museum photograph is a public-domain image served locally as an optimized WebP file.

CSS and visual identity

The project uses Tailwind CSS 4 through @tailwindcss/vite, with shared behavior defined in src/styles/global.css.

CSS is not only decorative here. It directly supports the challenge criteria.

For accessibility, the styles provide visible focus states, a focus-revealed skip link, reduced-motion fallbacks, stable image dimensions, text wrapping, responsive reflow, and contrast-aware light and dark themes.

For usability, the interface follows a mobile-first structure:

One column on smaller screens
A balanced post-and-feed composition on desktop
Clear hover, focus, active, and pressed states
Consistent spacing and hierarchy
A constrained internal feed that avoids uncontrolled page growth

A synchronous script in the document head applies the saved theme before the first paint, preventing a flash of the wrong color scheme.

For creativity, the red and blue design tokens reference Chile without directly reproducing its flag. Warm accents, recipe labels, social cards, and subtle motion connect food, memory, digital culture, and collective participation.

The incoming-comment animation communicates the feeling of a live takeover, while reduced-motion users receive the same information without depending on animation.

Technical architecture

The project uses:

Astro static site generation
Svelte 5 islands
TypeScript
Tailwind CSS 4
Vitest
Playwright
axe-core
Cloudflare Pages

Astro produces two static routes:

/
/es/

Cloudflare Pages publishes the generated dist directory directly, so the project does not require a Cloudflare runtime adapter.

The site also includes localized canonical URLs, Open Graph metadata, Twitter metadata, and hreflang links.

Testing

The current test suite includes:

3 unit tests
21 Playwright end-to-end tests
Automated axe checks on both routes

The tests cover:

English and Spanish localization
Keyboard navigation
Theme switching
Reduced motion
Pause and resume
Visibility API behavior
Progressive enhancement without JavaScript
Initial server-rendered comments
Hydration without duplicate comments
A maximum of 24 comments in the live DOM
Rotation of older comments
Responsive layouts
Canonical and alternate-language metadata
The locally hosted museum image
A valid robots.txt

The final validation completed with no Astro or Svelte errors, warnings, or hints.

What I learned

The most valuable lesson was that localization is not always the same as translating every word.

Keeping the recipes in Spanish made the experience more authentic, but it required additional work to make the cultural context and interface accessible to an international audience.

I also learned how progressive enhancement can improve storytelling. Rendering the first recipes as static HTML ensures that the central idea survives before hydration and even when JavaScript is unavailable.

Finally, this project reinforced that accessibility, CSS, performance, and narrative design should not be treated as separate layers. The strongest results came from designing them together.

I designed the cultural framing, selected the interaction model, reviewed every generated change, and validated the final behavior through local tests and production checks.

AI-assisted development disclosure

AI-assisted tools, including Codex, were used during planning, implementation review, test generation, debugging, and documentation refinement.

All resulting changes were reviewed, executed, and validated locally before publication. The final architecture, cultural framing, accessibility decisions, and published result were selected and verified by me.

Image credit

The museum hero uses “Philadelphia Museum of Art, main building” by Rgordon6~commonswiki, released into the public domain.

A locally optimized copy is served by the application to avoid depending on a third-party image host during navigation. Full attribution and source information are available in the repository README.

What I am particularly proud of

I am most proud that the interaction is not separate from the idea.

The live feed, Spanish comments, English summaries, social interface, and DOM rotation all reinforce the same story: comfort food can carry memory and identity, and sometimes a recipe can become a form of collective expression.

I would love to know:

Which dish tastes like home to you, and what story would you post with its recipe?

The Agentic SRE: How Google Cloud NEXT '26 Made AI Feel Less Like a Chatbot and More Like a Teammate

ContardoRM — Mon, 27 Apr 2026 00:40:50 +0000

This is a submission for the Google Cloud NEXT Writing Challenge

If I had to choose one singular takeaway from the Google Cloud NEXT '26 livestreams especially after witnessing the Developer Keynote and sessions like Build ProductionReady Agents on Google Cloud from a distance it would be this AI is no longer confined to a chatbox it's now integrated into actual work

For quite some time now many of us in the DevOps and SRE fields have utilized AI in a rather straightforward manner. We prompt it to assist us in generating code deciphering errors condensing log data or accelerating the more monotonous aspects of our roles And certainly this capability proves valuable Nevertheless it still retains the essence of collaborating with an exceptionally intelligent assistant that patiently awaits directives What seemed distinct observing NEXT '26 on the internet was the evident transformation from "AI assisting your cognition" to AI actually performing actions. It wasn't sorcery, nor complete dominion, and certainly not unfettered. However, it felt considerably nearer to an active participant than a passive conversationalist.

That notion persisted with me long after absorbing the event's recaps. Thus, I resolved to personally investigate.

The Trial Giving an Agent a Command Line and an Assignment

Rather than merely delving into further literature or viewing recorded demonstrations, I configured an independent AI operative within a cloud environment and granted it command line privileges. Its designation was AlfredClaw. My objective was to ascertain if this pervasive "Agentic SRE" concept could genuinely alleviate the everyday challenges faced by SREs and DevOps specialists. Not within a simulated setting, but with actual responsibilities.

Frankly, it's precisely at this juncture where matters began to captivate. For as soon as an operative gains entry to utilities, interfaces, and a command line, the modality of your engagement undergoes a metamorphosis. You cease posing inquiries like, "Might you elucidate this?" and commence soliciting, "Could you address this?"

Compliance Efforts That Often Drain Time and Effort

Lets begin with one of the least thrilling aspects of engineering compliance. I requested assistance from the agent for SOC 2 and ISO 27001 preparations. My expectation was drafts templates or at minimum a robust starting point. Instead it accomplished even more. It produced an Executive Leadership Oversight Charter crafted meeting minutes prepared calendar invitations and transmitted all to my Notion workspace via API readiness for scrutiny and audit actions.

This might not strike you as the most compelling demonstration but in practice it proved exceptionally valuable. Much of the difficulty doesnt stem from intricate technical challenges. It arises from dispersed tasks that no one desires to undertake and everyone consistently delays. This is precisely the domain where agents can profoundly impact.

Cloud Expenses and Posture Avoiding Dashboard Navigation

Next I explored something more operational. I inquired about cloud expenses. Rather than directing me to specific locations it utilized the native command-line interface queried billing data compiled the information and provided the direct answer my monthly expenditure was 0.00 still within the complimentary tier. It proved valuable, and its capabilities further evolved. A JSON configuration it generated, for deploying an event rule via command-line, allowed infrastructure events — such as virtual machine creation or privileged IAM user additions — to initiate email alerts by utilizing the cloud provider's native notification service.

At that point, the perception shifted from "AI as a helper" to "AI as an operator." Human decision-making wasn't superseded, yet the burden of manual tasks significantly diminished.

A Security Lab Test That Resembled Reality

To explore the concept more extensively, I subjected it to a local CTF environment, specifically utilizing OWASP Juice Shop running within Docker. My directive to the agent was straightforward: commence reconnaissance.

Subsequently, it initiated its own exploration of the target. Employing the terminal, it inspected endpoints, pinpointed routes, and navigated through the application incrementally, requiring minimal guidance. Ultimately, it formulated an SQL injection payload, successfully circumventing the login screen independently.

What particularly impressed me wasn't solely its capacity to execute commands. It felt like it remained tethered to the goal, flexible in its moves by what it discovered, and advanced onward, much like a person genuinely wrestling with a predicament.

So, What's Different for SREs?

That was the bit that occupied my thoughts after the test. Much of what was conveyed in the Google Cloud NEXT '26 digital presentations seemed to indicate this very thing: the landscape for DevOps and SRE is evolving. We've moved beyond simply authoring scripts and pipelines. Our emerging role involves architecting safeguards and constraints for systems capable of independent action.

For me, that’s the essence of the transformation. The trajectory of SRE likely won't be confined to the mundane tasks of scrutinizing logs, reviving services, and repeatedly addressing the same kind of problem for what feels like the hundredth occasion. It’s more probable that it will incorporate autonomous agents that identify issues, assemble relevant information, suggest resolutions, confirm effectiveness, and perhaps even implement secure corrective measures, allowing people to concentrate on oversight, boundaries, infrastructure design, and potential hazards. In such a realm, the occupation shifts from meticulously executing every action manually to strategically determining which elements an agent can interact with, what necessitates authorization, the extent of automation's reach, cost containment strategies, access protocols, and minimizing potential fallout. Moreover, crafting an all-encompassing system that is both monitorable and undoable becomes paramount.

This evolution aligns more profoundly with the trajectory of our endeavors.

Concluding Reflections

The Google Cloud NEXT '26 event profoundly illustrated for me that artificial intelligence has transcended mere conversational interaction. It is evolving into entities we can equip with instruments, background information, and delegated duties.

After direct engagement—leveraging an agent to assist with regulatory compliance, cloud monitoring, and a secure, managed experimental environment—the future direction became remarkably evident. The advent of agents is no longer a mere theoretical possibility; it is rapidly emerging as the subsequent stratum of routine engineering responsibilities.

For Site Reliability Engineers, the actual predicament presently isn't the impending arrival of agents. It hinges on our preparedness to establish the necessary constraints, oversight mechanisms, and confidence framework surrounding them.