DEV Community: Batuhan

DogSpeak Pro - Interactive Behavioral Sandbox & Procedural Acoustic Synthesizer

Batuhan — Fri, 14 Aug 2026 19:59:41 +0000

What I Built

I built DogSpeak Pro, an interactive acoustic and behavioral sandbox that translates canine expressions and sounds. The application aims to educate dog owners and enthusiasts on dog body language (ears, paws, snout, tail wags) through dynamic visual feedback and realistic, procedurally synthesized canine sounds.

Demo

Live Site: https://dogspeakpro.netlify.app
Source Code: https://github.com/batu-ta/dogspeak

How It Works

DogSpeak Pro combines three core web technologies with zero external frameworks or heavy assets:

Procedural Acoustic Synthesizer (Web Audio API):
No static audio files (.mp3 / .wav) are downloaded. All sounds are generated in real-time using mathematical oscillators, low-frequency oscillators (LFOs) for vibrato/growl rumbles, and custom white noise buffers for panting breaths. Real-time sliders allow modulations of the vocal pitch and vocal raspiness live.
Live Waveform Oscilloscope (HTML5 Canvas):
All audio outputs connect to an AnalyserNode. A requestAnimationFrame loop reads time-domain data and draws a glowing wave curve matching the color theme of the website.
Mouse-Tracking CSS Art:
The cartoonish dog is rendered entirely via semantic CSS shapes. The eyes dynamically track your cursor across the sandbox, and different vocalizations trigger physical reactions (head shaking, mouth opening, eyebrow expression changes).

Development Journey

Building this over the weekend pushed me to explore the limits of the Web Audio API. Shaping a triangle wave pitch sweep to sound like a natural dog bark required fine-tuning decay envelopes down to milliseconds.
Creating the mouse-tracking eye movement using basic bounding client coordinates and clamping the displacement vectors to a circle added a layer of physical life to the CSS character.

Unity Sentry-Gemini Debugger - Smash Unity Crashes with One-Click AI Fixes 🛠️🤖

Batuhan — Wed, 05 Aug 2026 16:08:02 +0000

Unity Sentry-Gemini Debugger: How We Automated Game Bug Smashes with Sentry and AI

This post is submitted for the DEV's Summer Bug Smash Challenge (Smash Stories / Best Use of Sentry / Best Use of Google AI categories).

🐛 The Bug

While playtesting our latest Unity game, we hit a frustrating, intermittent crash. The game would freeze, and our console log was cluttered with a cryptic NullReferenceException. Because the crash occurred randomly during game state changes, finding the exact script reference and state corruption manually was like looking for a needle in a haystack.

🔍 The Discovery

Fortunately, we had Sentry integrated into our build. An alert fired on our Sentry dashboard, pinpointing the issue:

Error: NullReferenceException: Object reference not set to an instance of an object
Location: PlayerController.cs in Update() at line 42.

Sentry gave us the trace, but we still faced a developer's daily friction: opening the codebase, finding the script, scrolling to line 42, analyzing the context, and writing the fix. This manual cycle felt too slow.

🕵️‍♂️ The Investigation & The Tool We Built

We wanted to automate this friction away. So, we built a custom tool directly inside the game engine: Unity Sentry-Gemini Debugger—a lightweight Unity Editor extension.

We designed it with zero external DLL dependencies to prevent assembly conflicts in Unity. Using C# and regex:

It queries the Sentry API to retrieve the latest project crashes and stack traces inside the Editor.
It automatically matches the stacktrace to our local script (PlayerController.cs) and renders a live code preview of the crash site.
It compiles the context (Sentry error + local code) and queries Google Gemini API for an immediate fix.

🚀 The Resolution

We launched our new editor tool (Window > Sentry-Gemini Debugger), fetched the active Sentry issue, and clicked Analyze with Gemini.

Gemini instantly detected that we were attempting to access a UI component ref that hadn't been initialized during Awake() when the game state reloaded. It provided the corrected code block.

We clicked Apply C# Fix. The tool:

Created a .bak backup of PlayerController.cs.
Overwrote the code with the fix.
Triggered a native Unity compilation reimport.

The bug was smashed, the script recompiled, and playtests resumed—all in under 15 seconds without leaving the Unity Editor!

🛠️ Tech Stack & Open Source Code

Language: C# (Unity Editor scripting)
API integrations: Sentry Web API & Google Gemini API
GitHub Repository: https://github.com/batu-ta/unity-sentry-gemini-debugger

💡 What We Learned (Sentry & AI Impact)

By bridging real-time error tracking (Sentry) and generative AI (Gemini) directly inside the Unity Engine, we turned debugging from a detective chore into a one-click automation.

Cozy Comfort Bistro - Comfort Food for the Soul

Batuhan — Wed, 05 Aug 2026 15:41:21 +0000

Cozy Comfort Bistro

Cozy Comfort Bistro is a virtual culinary sanctuary built for the DEV.to Frontend Challenge: Comfort Food Edition (Perfect Landing prompt).

It combines an immersive aesthetic, simulated ambient soundscapes, a personalized soul-food matcher quiz, and a custom plate builder—all designed to feel like a warm, rainy Sunday afternoon by the window.

🔗 Live Demo & Code

Live Demo: [https://cozycomfort-bistro.netlify.app]
GitHub Repository: [https://github.com/batu-ta/cozy-comfort-bistro]

🛠️ How It Works & Key Features

We combined both contest categories: a Perfect Landing Page that showcases premium frontend design principles, and a pure CSS Art piece serving as the hero element.

1. Interactive CSS Art (The Steaming Cup)

In the hero section, you will find a steaming cup of hot chocolate on a wooden saucer, built entirely in CSS.

Interactivity: Hovering over the cup makes the steam rise faster. Clicking anywhere inside the cup drops a fresh marshmallow with a realistic bounce animation.

2. Procedural Ambient Sounds (Web Audio API Synth)

To establish the ultimate cozy atmosphere, the site features synthesized ambient sounds. Instead of loading heavy audio files, the soundscapes are synthesized procedurally in real-time using the Web Audio API:

Rainy Cafe: Generates rain patter using filtered low-pass white noise combined with brief high-pass clicks.
Crackling Fireplace: Employs low-frequency rumble accompanied by randomly scheduled crisp impulse snaps to replicate burning logs.

3. The "Soul Food Matcher"

An interactive step-by-step quiz that recommends a comfort food classic based on your current mood, weather, and taste cravings.

4. Custom Plate Builder

Allows users to visually compile their perfect comfort meal (choosing a base, a main comfort dish, and toppings) directly on a virtual plate using dynamic CSS layered rendering.

💻 Tech Stack

Languages: Semantic HTML5, Vanilla JavaScript
Styling: Advanced Vanilla CSS (utilizing custom variables for instant transition between Midnight Cocoa, Teal Cabin, and Golden Sunset themes)
Audio Logic: Web Audio API

🎨 Design & Aesthetics

The application features curated warm HSL color palettes, custom typography (Playfair Display and Inter), modern glassmorphism panels, and smooth micro-animations that make the interface feel responsive and alive.