The latest articles on DEV Community by Filipe Vieira (@fvds). https://dev.to/fvds https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1445648%2Fff96dc0a-b53a-417b-9358-221259384022.jpg https://dev.to/fvds en Filipe Vieira Sun, 14 Jun 2026 03:52:53 +0000 https://dev.to/fvds/building-an-interactive-festa-junina-with-vanilla-js-4d4p https://dev.to/fvds/building-an-interactive-festa-junina-with-vanilla-js-4d4p <p><em>This is a submission for the <a href="https://dev.to/challenges/june-game-jam-2026-06-03">June Solstice Game Jam</a></em></p> <p><em>(🇧🇷 Para a versão em Português, role até o final do post / Scroll down for Portuguese!)</em></p> <h2> What I Built </h2> <p>While the Northern Hemisphere celebrates the summer solstice, here in Brazil, this astronomical event marks the arrival of winter. We celebrate it with a massive, traditional, and culturally rich event called <strong>Festa Junina</strong> (June Festival)!</p> <p>To honor this theme, I built <strong>Arraial do Solstício</strong> (Solstice Festival), a digital interactive courtyard entirely from scratch using <strong>Vanilla JavaScript, HTML5 Canvas, and CSS</strong>. No heavy game engines, just pure code!</p> <p>The project features a living Hub and 3 distinct minigames (endless runner, physics balancing, and a frantic clicker), fully equipped with a real-time global language switcher (i18n) and a local <code>localStorage</code> Medal Board!</p> <h2> Video Demo </h2> <p> <iframe src="https://www.youtube.com/embed/lgspQX8jW2A"> </iframe> </p> <h2> Code </h2> <div class="ltag-github-readme-tag"> <div class="readme-overview"> <h2> <img src="https://assets.dev.to/assets/github-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"> <a href="https://github.com/filipevieira" rel="noopener noreferrer"> filipevieira </a> / <a href="https://github.com/filipevieira/arraial" rel="noopener noreferrer"> arraial </a> </h2> <h3> </h3> </div> <div class="ltag-github-body"> <div id="readme" class="md"><div class="markdown-heading"> <h1 class="heading-element">Arraial do Solstício 🌽🔥</h1> </div> <p>Bem-vindo ao <strong>Arraial do Solstício</strong>, uma Festa Junina interativa construída inteiramente com tecnologias web nativas! Este projeto foi criado para a <em>June Solstice Game Jam</em> do Dev.to, unindo a temática global do solstício com a nossa riquíssima cultura brasileira.</p> <div class="markdown-heading"> <h2 class="heading-element">🎮 Jogue Agora</h2> </div> <p><a href="https://filipevieira.github.io/arraial/" rel="nofollow noopener noreferrer"><strong>Clique aqui para jogar online!</strong></a></p> <div class="markdown-heading"> <h2 class="heading-element">✨ Funcionalidades</h2> </div> <ul> <li> <strong>Hub Interativo:</strong> Um pátio vivo com fogueira animada, bandeirinhas, e caipiras passeando aleatoriamente pela vila. Tudo embalado com música temática junina!</li> <li> <strong>Minigame: Pula Fogueira 🔥</strong>: Desvie das fogueiras, pegue pamonhas e coma maçãs do amor neste endless runner super divertido.</li> <li> <strong>Minigame: Ralando a Pamonha 🌽</strong>: Teste sua velocidade no mouse para ralar o milho antes que a barraquinha não aguente o tranco!</li> <li> <strong>Minigame: Equilibrando o Quentão 🍷</strong>: Mantenha o equilíbrio do copo de quentão com movimentos precisos do mouse.</li> <li> <strong>Sistema de Ranking 🏆</strong>: Pontuações locais (via <code>localStorage</code>) para você competir com…</li> </ul></div> </div> <div class="gh-btn-container"><a class="gh-btn" href="https://github.com/filipevieira/arraial" rel="noopener noreferrer">View on GitHub</a></div> </div> <h2> How I Built It </h2> <h3> 🗺️ The Hub: A Living Courtyard </h3> <p>When you enter the app, you are greeted by a central bonfire, clickable stalls, and <strong>characters walking around randomly</strong>. To bring the scene to life without overloading the DOM, I used inline SVG to draw the characters and manipulated their positions with pure JavaScript.</p> <h3> 🔥 Minigame 1: Fire Jumper </h3> <p>Chrome's classic dinosaur game got a festive version! Here, you control a character who needs to jump over bonfires, collect <strong>pamonhas</strong> (corn treats for points), and <strong>candy apples</strong> (for invincibility). This was rendered frame-by-frame using the <code>&lt;canvas&gt;</code> API with a parallax effect for the background.</p> <h3> 🍷 Minigame 2: Drink Balancer (Quentão) </h3> <p>The challenge here is to keep a cup of <em>Quentão</em> (a traditional hot mulled wine) upright using just your mouse! Instead of a complex physics engine, I used basic math to calculate the cup's rotation and inertia based on the mouse position. If you tilt it too much, the cup "spills" with a fluid animation using <code>ctx.rotate()</code>.</p> <h3> 🌽 Minigame 3: Corn Grater (Pamonha) </h3> <p>A "click/swipe as fast as you can" game, where the player has to "grate" corn by dragging the mouse frantically. Each grated corn adds to your score, and the difficulty increases until the grater structure (literally) explodes.</p> <h3> 🌍 Internationalization (i18n) &amp; 🏆 Local Ranking </h3> <p>Since the jam is global, I implemented a custom i18n module! The game automatically detects your browser language and serves the UI in English or Portuguese, switching instantly without page reloads. <br> To spice things up, I integrated a global "Medal Board" using the browser's <code>localStorage</code> API, keeping the Top 3 high scores for each minigame. Creating games in Canvas and Vanilla JS gives you incredible control over pixels and performance, plus it's an excellent logic exercise!</p> <h1> 🇧🇷 Versão em Português </h1> <p><em>Esta é uma submissão para a <a href="https://dev.to/challenges/june-game-jam-2026-06-03">June Solstice Game Jam</a></em></p> <h2> O que eu construí </h2> <p>Enquanto o Hemisfério Norte celebra o solstício de verão, aqui no Brasil esse evento marca a chegada do inverno e a nossa tradicionalíssima <strong>Festa Junina</strong>!</p> <p>Para honrar o tema, construí o <strong>Arraial do Solstício</strong>, um pátio digital interativo feito do zero com <strong>Vanilla JavaScript, HTML5 Canvas e CSS</strong>. Sem engines pesadas, apenas código puro!<br> O projeto conta com um Hub vivo e 3 minigames distintos, totalmente equipado com troca de idioma em tempo real (i18n) e um Quadro de Medalhas usando <code>localStorage</code>.</p> <h2> Vídeo de Demonstração </h2> <p> <iframe src="https://www.youtube.com/embed/lgspQX8jW2A"> </iframe> </p> <h2> Código Fonte </h2> <div class="ltag-github-readme-tag"> <div class="readme-overview"> <h2> <img src="https://assets.dev.to/assets/github-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"> <a href="https://github.com/filipevieira" rel="noopener noreferrer"> filipevieira </a> / <a href="https://github.com/filipevieira/arraial" rel="noopener noreferrer"> arraial </a> </h2> <h3> </h3> </div> <div class="ltag-github-body"> <div id="readme" class="md"><div class="markdown-heading"> <h1 class="heading-element">Arraial do Solstício 🌽🔥</h1> </div> <p>Bem-vindo ao <strong>Arraial do Solstício</strong>, uma Festa Junina interativa construída inteiramente com tecnologias web nativas! Este projeto foi criado para a <em>June Solstice Game Jam</em> do Dev.to, unindo a temática global do solstício com a nossa riquíssima cultura brasileira.</p> <div class="markdown-heading"> <h2 class="heading-element">🎮 Jogue Agora</h2> </div> <p><a href="https://filipevieira.github.io/arraial/" rel="nofollow noopener noreferrer"><strong>Clique aqui para jogar online!</strong></a></p> <div class="markdown-heading"> <h2 class="heading-element">✨ Funcionalidades</h2> </div> <ul> <li> <strong>Hub Interativo:</strong> Um pátio vivo com fogueira animada, bandeirinhas, e caipiras passeando aleatoriamente pela vila. Tudo embalado com música temática junina!</li> <li> <strong>Minigame: Pula Fogueira 🔥</strong>: Desvie das fogueiras, pegue pamonhas e coma maçãs do amor neste endless runner super divertido.</li> <li> <strong>Minigame: Ralando a Pamonha 🌽</strong>: Teste sua velocidade no mouse para ralar o milho antes que a barraquinha não aguente o tranco!</li> <li> <strong>Minigame: Equilibrando o Quentão 🍷</strong>: Mantenha o equilíbrio do copo de quentão com movimentos precisos do mouse.</li> <li> <strong>Sistema de Ranking 🏆</strong>: Pontuações locais (via <code>localStorage</code>) para você competir com…</li> </ul></div> </div> <div class="gh-btn-container"><a class="gh-btn" href="https://github.com/filipevieira/arraial" rel="noopener noreferrer">View on GitHub</a></div> </div> <h2> Como eu construí </h2> <h3> 🗺️ O Hub: Um Pátio Vivo </h3> <p>Quando você entra no app, é recebido por uma fogueira central, barraquinhas clicáveis e <strong>personagens passeando aleatoriamente</strong>. Usei SVG inline para desenhar os caipiras e manipulei as posições via JS.</p> <h3> 🔥 Minigame 1: Pula Fogueira </h3> <p>O clássico jogo do dinossauro ganhou versão junina! Renderizado frame a frame via <code>&lt;canvas&gt;</code>, com direito a efeito parallax. Você coleta pamonhas (pontos) e maçãs do amor (invencibilidade).</p> <h3> 🍷 Minigame 2: Equilibrando o Quentão </h3> <p>O desafio é manter um copo de quentão em pé usando o mouse! Em vez de usar uma engine de física complexa, usei matemática básica para calcular a rotação e inércia do copo.</p> <h3> 🌽 Minigame 3: Ralando a Pamonha </h3> <p>Um jogo estilo "clique o mais rápido que puder", arrastando o mouse freneticamente até o ralador (literalmente) explodir.</p> <h3> 🌍 Internacionalização (i18n) e 🏆 Ranking Local </h3> <p>Criei um sistema i18n do zero para jogadores do mundo todo jogarem em Inglês ou Português. Também integrei um "Quadro de Medalhas" usando a API de <code>localStorage</code> para salvar seus recordes!</p> <p>Criar jogos em Canvas e Vanilla JS te dá um controle absurdo sobre os pixels e a performance, além de ser um excelente exercício de lógica. Qual sua barraquinha favorita na Festa Junina? Conta aí nos comentários! 👇</p> devchallenge junesolstice javascript gamechallenge Filipe Vieira Fri, 22 May 2026 21:03:38 +0000 https://dev.to/fvds/the-real-world-test-how-geminis-new-interface-won-over-my-wife-and-mother-in-law-who-are-totally-42b4 https://dev.to/fvds/the-real-world-test-how-geminis-new-interface-won-over-my-wife-and-mother-in-law-who-are-totally-42b4 <p><em>This is a submission for the <a href="https://dev.to/challenges/google-io-writing-2026-05-19">Google I/O Writing Challenge</a></em></p> <p>Google I/O 2026 brought incredible technical announcements, robust models, and massive context windows. But as someone who lives and breathes technology, I’ve come to realize that the greatest Artificial Intelligence revolution often isn't in the number of parameters of a cloud-hosted model, but rather in <strong>how everyday people interact with it on the ground</strong>.</p> <p>To test the true impact of this year's updates, I decided to observe the ecosystem right inside my own home. My wife and my mother-in-law don’t work in tech and have always viewed these generative AI tools as something distant, complex, or purely "a programmer thing."</p> <p>Everything changed with the arrival of the new Gemini mobile interface, driven by the new design language and faster models presented at the event.</p> <h2> ⚡ Fluidity and Speed: My Wife's Experience </h2> <p>Previously, when someone tried to interact with an AI assistant on a phone, the response usually came in massive blocks of plain text, or with that "typing effect" that gave the distinct feeling of waiting for a machine to process data. </p> <p>When my wife opened the new Gemini app and started talking to the AI, her reaction was immediate. The response came <strong>promptly and incredibly faster</strong> than any previous version. </p> <p>Google's big win here was refining the interface: the text now reconstructs itself in real time, prioritizing visual elements and scannable highlights. She even commented on how <strong>much more fluid and natural</strong> the interaction felt. The barrier to entry that used to feel like a "rigid oracle" vanished, making way for a real, dynamic, and extremely agile conversation.</p> <h2> 📸 Going Beyond Text: The Camera Test with My Mother-in-Law </h2> <p>Another fantastic breakthrough from Google I/O was the evolution of real-time multimodality on mobile devices. For non-tech folks, the concept of "multimodality" sounds like Greek, but in daily practice, it translates to pure magic.</p> <p>My mother-in-law decided to put this intelligence to the test in a very spontaneous way: she simply <strong>made a funny face at the camera</strong> while interacting with the app. </p> <p>The AI's response was instantaneous. Gemini not only captured the video feed flawlessly, but it <strong>identified her exact facial expression and joked about the situation</strong>. My mother-in-law was completely surprised. Seeing a technology understand the context of such a subtle human behavior—and doing it instantly—transformed her perception that AI is just a glorified text search engine.</p> <h2> 🎯 The Takeaway: The Best Technology Is the One That Becomes Invisible </h2> <p>As developers, we love to discuss architecture, latency, and API updates. However, Google I/O 2026 reminded me of a valuable lesson about Product and User Experience (UX): <strong>it doesn't matter if you have the smartest model in the world if the interface scares away the end user.</strong></p> <p>By focusing on an interface that responds fluidly and understands natural inputs like voice and images without friction, Google has finally broken out of the tech enthusiast bubble. Seeing Gemini transform into an accessible and fun assistant for my family is living proof that the future of AI is, above all, human.</p> devchallenge googleiochallenge