DEV Community: BlinkNBuild

I'm an ECE Student Who Vibe Codes Hardware Projects — Here's What Google I/O 2026 Actually Changed for Me

BlinkNBuild — Thu, 21 May 2026 19:12:46 +0000

Submitted as part of the Google I/O 2026 Writing Challenge

Most Google I/O recaps look the same: benchmark tables, pricing comparisons, model spec sheets.

This one won't.

I'm an Electronics & Communication Engineering student and the person behind BlinkNBuild, a YouTube channel where I build ESP32, Arduino, and Raspberry Pi projects. I also vibe code a lot: browser-based OLED pixel editors, circuit diagram tools, IoT dashboards — all shipped from a single HTML file to Netlify on zero budget.

When I watched the Google I/O 2026 developer keynote, I wasn't evaluating these announcements as an ML researcher or a senior web developer. I was asking one question: does any of this actually change what I can build on a Tuesday night with no sleep and a free API tier?

For the first time in a while — yes. Genuinely.

The Shift That Actually Matters

Something Sundar Pichai said in the keynote stuck with me:

"We've transitioned from AI that simply assists you, to agents that can independently navigate complex tasks across your entire workflow."

If you've spent time babysitting an LLM through a multi-step project — manually copy-pasting between steps, correcting it after every tool call, re-explaining context it forgot — you know exactly why this matters. The gap between "AI that helps" and "AI that owns a task" is enormous in practice. Google just made a serious move toward closing it.

Here's what actually shipped, and why I think it matters for builders like us.

Gemini 3.5 Flash: The First Flash That Beats a Pro Model

This is the headline announcement, and it deserves more than a spec table.

The Flash series has always been the "fast and cheap" tier — you trade capability for speed and cost. Gemini 3.5 Flash breaks that tradeoff entirely. It outperforms Gemini 3.1 Pro on coding and agentic benchmarks:

76.2% on Terminal-Bench 2.1 (coding) vs 70.3% for 3.1 Pro
1656 Elo on GDPval-AA (real-world agentic tasks)
83.6% on MCP Atlas (tool-use reliability)
84.2% on CharXiv Reasoning (multimodal understanding)

Meanwhile it runs at 4× the speed of comparable frontier models with a price of $1.50/$9 per 1M tokens — less than half what GPT-5.5 costs for the same output.

For a student building hobby projects on a free or low-cost API plan, that last sentence is everything.

The context window is 1M tokens (1,048,576 to be exact), with dynamic thinking on by default — meaning the model auto-allocates extra compute when the problem is hard and skips it when it's simple. You don't tune this. It just works.

One honest caveat: there's a regression on 128k long-context retrieval (MRCR v2 dropped 7.6 points versus the preview). If you're doing RAG over massive multi-hundred-page documents, that's worth knowing. For the typical IoT/maker project — sensor code, dashboard logic, firmware debugging — it's not relevant. 3.5 Flash is still the best thing in the Flash tier by a wide margin.

I tested it immediately via AI Studio after the keynote. I gave it a prompt to generate Arduino sensor code with a web dashboard interface. The output was noticeably more structured and the code ran first-try in a way that older Flash models didn't always manage.

For makers and side-project builders: if you're still on 3.1 Pro for budget reasons, you can now get better results at lower cost. That's a direct upgrade.

Google AI Studio: More Than a Key Generator

I'll be honest — I've always thought of AI Studio as "the place you go to get an API key." I didn't think of it as a serious development environment.

I/O 2026 changed that framing entirely.

Native Android vibe coding is now in AI Studio. You can describe what you want, and it generates a Kotlin Android app — not a web wrapper, an actual native Android project. Combined with one-click deploy to Cloud Run and Firebase integration, you can go from idea to deployed app without ever leaving the browser.

There's also an Export to Antigravity button — one click and your entire project state, including all context, moves to local Antigravity development. No re-explaining, no re-scaffolding.

And a new AI Studio mobile app is available for pre-registration this week, so you can capture ideas on the go and have a prototype waiting when you get back to your desk.

For someone who builds projects that need a companion app (sensor dashboards, remote control interfaces, IoT monitors), the setup overhead for native apps just collapsed.

Managed Agents: The Feature I'm Most Excited to Build With

This is the one that's going to change my actual projects.

Google introduced Managed Agents in the Gemini API — a single API call that spins up a fully provisioned agent running inside an isolated Linux container. Files and state persist across follow-up calls. The agent can reason, use tools, execute code, and iterate without you manually orchestrating every step.

Why does this matter for makers?

Because most IoT projects need more than one-shot generation. You want to describe a problem — "I have a noisy ADC reading from my soil moisture sensor, help me clean it and write the data to a CSV" — and have something that can work through it. Run the code, see it failed, debug it, retry. Not just hand you a code block and wish you luck.

Managed Agents are designed for exactly that loop. One API call. Persistent state. Real execution environment. I'm planning to build a small agent that reads ESP32 serial output and iterates on firmware fixes autonomously. That workflow was genuinely not practical before this.

Antigravity 2.0: The Bigger Picture

Underneath all of this is Antigravity 2.0 — Google's agent-first development platform, now a full three-component rebuild: a standalone desktop app, a new CLI (written in Go, replacing the old Gemini CLI), and an SDK for custom agents.

A few things worth noting if you're evaluating it:

The desktop app orchestrates multiple agents in parallel, schedules background tasks, and has native voice command support. You describe a problem; specialized subagents divide the work.

The Antigravity CLI replaces the Gemini CLI entirely — Google is asking existing users to migrate. For makers, this is good news: you can now script around it, pipe results into your own tooling, and integrate it into terminal-based workflows naturally.

The Managed Agents in the Gemini API give you the Antigravity agent harness without the full local setup. One API call provisions a sandboxed Linux environment. This is the lowest-friction entry point for builders who don't want to install a full desktop tool.

I Built Something With It — Here's the Receipt

This isn't just theory. I used Antigravity 2.0 to build and ship a real project: a free, browser-based PDF to Image converter that runs 100% offline, no server, no uploads, no account required.

The entire thing — from idea to live app on Netlify — took under an hour.

That's not a marketing claim. That's what it felt like to go from "I have a problem" to "this is deployed and usable by anyone." The old workflow would've taken me an evening at minimum: scaffolding the PDF.js rendering pipeline, debugging canvas GPU memory exhaustion on large documents, wiring the File System Access API fallback for Firefox. Antigravity handled the architecture and iteration. I steered.

🔗 Live App → pdf-2-image.netlify.app
📦 GitHub → pdf-2-image source code

The use case matters too: most AI tools (including Gemini and ChatGPT) parse PDFs as raw text streams, which silently mangles math equations, circuit diagrams, and scanned notes. Converting each page to a high-res image first — before uploading to an AI tool — fixes that entirely. It's a problem every ECE student hits.

If you want the full technical writeup (PDF.js rendering loop, canvas memory management, File System Access API), I've covered it in detail here.

What I'm Building Next

Based on what shipped at I/O 2026, here's what I'm immediately trying:

ESP32 firmware debug agent — using Managed Agents to read serial output, identify errors, and iterate on fixes autonomously, without me manually copy-pasting error messages back and forth
Android companion app — using AI Studio's Kotlin vibe coding to generate a native sensor dashboard, deployed with one click to Cloud Run
Antigravity CLI pipeline — a terminal-scripted subagent workflow that takes a GitHub README, extracts a bill of materials, and auto-generates an Instructables-style writeup

None of these were practical to build before this week.

The Honest Take

Google I/O 2026 wasn't one moonshot announcement. It was a lot of things getting meaningfully better at the same time — the model, the tooling, the agent infrastructure, the developer experience — in a way that adds up to a real shift in what a solo builder can accomplish.

The old Flash tradeoff (speed vs. capability) is gone. The old AI Studio limitation (great for prompts, not for building) is gone. The old agent friction (manually orchestrate everything yourself) is shrinking fast.

For ECE students, makers, and side-project builders on a tight budget: this is the best the Gemini stack has ever been, and it's available right now on the free tier.

Go build something.

Useful Links

Gemini 3.5 Flash on Google AI Studio — free tier, no credit card required
Antigravity 2.0 — agent-first dev platform (desktop + CLI + SDK)
Google I/O 2026 Developer Keynote recap
PDF to Image Converter — the project I shipped with Antigravity in under an hour
BlinkNBuild on YouTube — where I document builds like the ones described above

What's the first thing you'd build with Managed Agents + Gemini 3.5 Flash? Drop it in the comments — I'm especially curious what the embedded and IoT folks here are thinking.

I Built a Free PDF to Image Converter That Runs 100% in Your Browser 🖼️⚡

BlinkNBuild — Thu, 21 May 2026 18:34:18 +0000

Ever uploaded a PDF with math equations to ChatGPT or Gemini and watched it completely butcher the formula?

That kept happening to me with ECE study notes. The AI was hallucinating integrals and matrix expressions. Turns out most AI tools parse PDFs as text streams — not images — so anything visual (equations, diagrams, scanned pages) breaks silently.

The fix is simple: convert each PDF page to a high-res image and upload that instead. AI vision models handle it perfectly via OCR.

The problem? Every existing tool either charges you, asks you to sign up, or uploads your file to their server.

So I built the tool I needed. 100% offline. Zero uploads. Open source.

🔗 Live App → pdf-2-image.netlify.app
📦 GitHub → github.com/S-SUJAN-S/pdf-2-image

Why AI Misreads Your PDFs

When you upload a PDF to most AI tools, they extract raw text — the same way pdftotext works. This means:

LaTeX / math equations → garbled unicode or skipped entirely
Scanned textbook pages → blank (no text layer at all)
Circuit diagrams, annotated figures → completely invisible to the text parser

The moment you switch to image input, the AI switches to its vision model + OCR pipeline. It reads everything — equations, handwriting, diagrams — accurately.

What I Built

PDF to Image is a single-page web app. Drop a PDF. Get images. Nothing leaves your device.

Features

✅ 100% Private — all processing runs inside the browser using PDF.js + HTML5 Canvas. No server, no uploads, ever.
✅ 4 Quality Levels — 1× (72 DPI) to 4× Ultra HD (288 DPI)
✅ PNG and JPEG output — choose based on your use case
✅ Direct Folder Save — saves all pages straight to a local folder using the Web File System Access API (no 50-click download loops)
✅ ZIP Download — package every page into one archive with a single click via JSZip
✅ Memory-Safe Rendering — explicit canvas + worker cleanup after each page so even 200-page PDFs don't crash your tab
✅ Drag & Drop — works on the whole page
✅ Lightbox Gallery — click any converted page to zoom in
✅ Works fully offline after first load

Tech Stack

No frameworks. No build step. No npm install.

Layer	Technology
Structure	Semantic HTML5
Logic	Vanilla JavaScript (ES6+)
Styling	Pure CSS3 with custom properties + backdrop-filter
PDF Engine	Mozilla `PDF.js` v3.11.174
Archiving	`JSZip` v3.10.1
Icons	FontAwesome v6.4.0

The entire app is ~1,537 lines across 3 files. Open index.html and it just works.

How It Works — Core Rendering Loop

PDF.js renders each page onto a hidden <canvas>. That canvas gets exported as a PNG/JPEG Blob. That's it.

// PDF never leaves the browser — loaded from ArrayBuffer
const pdfDocument = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;

for (let pageNum = 1; pageNum <= pdfDocument.numPages; pageNum++) {
  const page = await pdfDocument.getPage(pageNum);

  // Scale controls DPI: 1.0 = 72 DPI, 4.0 = 288 DPI
  const viewport = page.getViewport({ scale: scaleValue });

  const canvas = document.createElement('canvas');
  canvas.width = viewport.width;
  canvas.height = viewport.height;

  await page.render({
    canvasContext: canvas.getContext('2d'),
    viewport: viewport
  }).promise;

  const dataUrl = canvas.toDataURL('image/png', 0.95);

  // Release GPU backing store immediately — critical for large PDFs
  canvas.width = 0;
  canvas.height = 0;
  page.cleanup();
}

The canvas.width = 0 after each page is the important bit. Without it, rendering 100+ pages back-to-back exhausts GPU memory and crashes the tab around page 30–40.

Direct Folder Save

Instead of downloading 50 individual files, you pick a local folder and all pages save directly into it — one click, zero prompts. This uses the File System Access API:

async function saveImagesToLocalFolder() {
  const dirHandle = await window.showDirectoryPicker();

  for (const imgObj of convertedImages) {
    const fileHandle = await dirHandle.getFileHandle(imgObj.name, { create: true });
    const writable = await fileHandle.createWritable();
    await writable.write(imgObj.blob);
    await writable.close();
  }
}

Supported on Chrome/Edge 86+. Firefox users fall back to the ZIP download automatically.

The Actual Workflow

Here's how I use it now when studying:

Open pdf-2-image.netlify.app
Drop the PDF (textbook chapter, scanned notes, whatever)
Set quality to 2× (144 DPI) — sharp text, reasonable file size
Save to folder or grab the ZIP
Upload images directly to Gemini / ChatGPT

The difference in how accurately the AI reads the content is significant — especially for anything with equations, diagrams, or handwriting.

Challenges Building This

Memory management on large PDFs was the hardest part. Browsers don't garbage-collect canvas GPU memory fast enough when rendering 100+ pages sequentially. Spent a while debugging why 150-page PDFs froze the tab — the fix was aggressively calling canvas.width = 0 and page.cleanup() after every single render.

File System Access API edge cases — permission revocation mid-save, network drives, cross-origin restrictions. Required proper error handling and graceful fallback to individual Blob downloads.

Run It Locally in 30 Seconds

git clone https://github.com/S-SUJAN-S/pdf-2-image.git
cd pdf-2-image
python -m http.server 8000
# Open http://localhost:8000

No npm. No config. Any static HTTP server works — it's just HTML, CSS, and JS.

Open Source — PRs Welcome

MIT licensed. Things I'd love help with:

Page range selection (e.g. convert only pages 5–12)
Multi-PDF batch processing
WEBP output format
Firefox File System Access API support

Fork it → github.com/S-SUJAN-S/pdf-2-image

I Built a Free OLED Pixel Editor for Arduino & ESP32 🖊

BlinkNBuild — Sun, 19 Apr 2026 05:15:17 +0000

I kept converting OLED bitmaps manually for every Arduino project — drawing on graph paper, counting pixels, writing byte arrays by hand.

So I built a tool that does all of it visually.

🔴 Live → oled-pixel-editor.netlify.app
⭐ GitHub → S-SUJAN-S/oled-pixel-editor

📺 Watch the full tutorial on how to use this:

What it does

Think MS Paint — but every pixel maps directly to a pixel on your SSD1306 OLED display.

15 shape tools — circle, ellipse, triangle, star, arrow and more
Selection system — move, resize, copy, paste, crop
16 resolution presets — 128×64, 128×32, 96×16 and more + custom up to 1024×1024
Export as PNG, CSV, C Array, or a complete Arduino sketch (.ino)
80-step undo/redo, touch + pinch-zoom support
Single HTML file — no install, works offline

The export that actually matters

Click Arduino Sketch → get a complete .ino ready to flash:

display.clearDisplay();
display.drawBitmap(0, 0, myBitmap, 128, 64, SSD1306_WHITE);
display.display();

Open in Arduino IDE → Upload. Done.

⚠️ Currently configured for ESP8266 NodeMCU. Multi-board support (ESP32, Uno, Nano) is on the roadmap.

What's next

[ ] Image import — auto-dither PNG/JPG to monochrome
[ ] Video import — frame-by-frame OLED animations
[ ] Multi-board export — ESP32, Arduino Uno/Nano, STM32

It's free, open source, and I'm actively building on it.
If you use OLED displays in your projects, give it a try and let me know what you think 👇

— Sujan, BlinkNBuild

I Vibe Coded a Balloon Popping Game Using Claude AI 🎈

BlinkNBuild — Tue, 17 Mar 2026 04:00:00 +0000

What I Built 🎮

A fully playable balloon popping arcade game that runs entirely in the browser — built using Claude AI (vibe coding). No React, no libraries, no build tools. Just one index.html file.

🎈 Play it live → balloon-blaster.netlify.app
💻 Code → github.com/S-SUJAN-S/balloon-blaster

What is Vibe Coding?

Vibe coding = you describe what you want to an AI, it builds it, you iterate, you ship.

No boilerplate. No setup. No framework debates. Just:

Describe the idea
Let the AI build it
Test, tweak, ship

I used Claude AI for the entire thing — and honestly it was a great experience.

What's in the Game

🎯 3 balloon sizes with different point values
💥 Combo multiplier system
⚡ 8 power-ups — Rapid Fire, Shield, Tri-Shot, Freeze, Extra Life, Bomb, Double Score, Laser
🎆 Particle burst effects on every pop
🌠 Animated star background with meteor streaks
📱 Mobile touch support
💾 High score saved locally
🔊 Sound effects — all synthesized in-browser, zero audio files
3 difficulty levels — Easy, Medium, Hard

How I Built It

Honestly? I just described what I wanted to Claude AI and iterated.

"Make a balloon shooting game in a single HTML file, portrait canvas, with a shooter at the bottom, balloons falling from the top, combo system, and power-ups"

From there it was just:

Testing what worked
Describing what to fix or add
Deploying to Netlify with a drag and drop

Total time from idea to live URL — a couple of hours.

Run It Locally

git clone https://github.com/S-SUJAN-S/balloon-blaster.git
cd balloon-blaster
# Just open index.html in your browser

No npm install. No config. Just open and play.

Deploy in 30 Seconds

Go to netlify.com
Drag your index.html onto the drop zone
Done — live URL instantly

What I Learned

Vibe coding is a real workflow. You don't need to understand every line to ship something fun and working. The key is knowing what you want to build clearly enough to describe it — the AI handles the how.

Drop a comment if you want me to do a proper walkthrough of the vibe coding process — I'll make a full video on BlinkNBuild!

🎮 Play → balloon-blaster.netlify.app
💻 Code → github.com/S-SUJAN-S/balloon-blaster
📺 Watch → youtube.com/@BlinkNBuild

Built with Claude AI ⚡ | BlinkNBuild

I Built a 3D Snake Game with Three.js — Runs in a Single HTML File

BlinkNBuild — Mon, 02 Mar 2026 14:31:43 +0000

I challenged myself to build a full 3D browser game with zero dependencies and no build step. Just one index.html and a Three.js CDN link.

The result is Serpentine — a 3D snake game with WebGL graphics, particle effects, and mobile joystick support.

🎮 Gameplay Demo

✨ Features

3 difficulty levels — Easy, Medium, Hard
WebGL 3D graphics with particle effects on food pickup
Mouse, Joystick & Swipe control modes
Persistent high scores per difficulty
Achievement toasts at score milestones
Zero dependencies — pure HTML + JS

🕹️ Controls

Input	Action
Mouse	Guide the snake
WASD / Arrows	Keyboard
Space	Pause / Resume
M	Switch control mode

🔗 Links

🎮 Play Live → serpentine-game.netlify.app
⭐ GitHub → github.com/S-SUJAN-S/serpentine-game
🎲 itch.io → s-sujan-s.itch.io/serpentine-3d-snake

Feel free to fork it and build on top — the source is clean and readable!

Building a Free Markdown to PDF Converter (No Sign-ups, 100% Browser-Based)

BlinkNBuild — Tue, 24 Feb 2026 18:58:07 +0000

The Problem

I was constantly frustrated with existing markdown to PDF converters. Most of them:

Required sign-ups and accounts
Had paywalls or subscription fees
Uploaded your files to their servers (privacy concerns)
Had clunky interfaces
Broke formatting on code blocks or math equations

I just wanted something simple that worked in my browser without jumping through hoops. So I decided to build my own.

What I Built

A completely free, browser-based markdown to PDF converter that runs 100% client-side. No servers, no data collection, no sign-ups required.

Try it here: https://free-markdown-to-pdf.netlify.app/

GitHub: https://github.com/S-SUJAN-S/free-markdown-to-pdf

Key Features

Live Preview - See your formatted content as you type
Syntax Highlighting - Code blocks look professional with Highlight.js
Math Equations - LaTeX math rendering using KaTeX
Multiple Themes - Dark mode, light mode, and high contrast
Customization - Adjust fonts, spacing, margins to your liking
Privacy First - Everything runs in your browser, zero data collection
No Installation - Just open the URL and start using it

Tech Stack

I kept it simple and used:

React (loaded via CDN)
Babel Standalone (for in-browser JSX compilation)
Marked.js (markdown parsing)
Highlight.js (syntax highlighting for code)
KaTeX (LaTeX math rendering)
Google Fonts (Fraunces, DM Sans, JetBrains Mono)

The entire thing is a single HTML file - no complex build process, no npm dependencies to install locally. Just clone and open!

How It Works

The workflow is super simple:

Paste your markdown content
See it formatted in real-time
Customize if needed (fonts, themes, spacing)
Use your browser's print function to save as PDF

Since everything runs client-side, your content never leaves your browser. I literally cannot see what you're converting even if I wanted to.

Why a Single HTML File?

I wanted this to be as accessible as possible. Anyone should be able to:

Clone the repo and open index.html
Host it anywhere (GitHub Pages, Netlify, their own server)
Modify it without needing to understand webpack or build tools
Use it offline once the page loads

Plus, it makes the code easy to read and understand for beginners.

Use Cases

I built this originally to save formatted conversations and notes, but people can use it for:

Converting documentation
Creating PDFs from markdown notes
Formatting research papers
Saving formatted conversations from AI tools
Quick markdown previewing
Any markdown → PDF needs

Challenges I Faced

1. Math Rendering

Getting KaTeX to work properly with various LaTeX syntax was tricky. I had to handle both inline math ( $...$ ) and display math ($$...$$) correctly.

2. Print Styling

Making sure the PDF output looked exactly like the preview required a lot of CSS tweaking with @media print queries.

3. Theme Switching

Implementing multiple themes while maintaining consistency across all UI elements took more work than expected.

4. Code Block Formatting

Ensuring code blocks looked good in both the preview and the final PDF required careful styling.

What's Next?

I'm thinking about adding:

Export to Word/HTML formats
Preset templates for different document types
Batch conversion (multiple files at once)
More theme options
Table of contents generation
Custom CSS injection

What features would you find useful? Let me know in the comments!

Open Source

The project is fully open source with an MIT license. Feel free to:

Use it for any purpose
Fork it and make your own version
Submit PRs for improvements
Report bugs or request features

Links:

🌐 Live Demo: https://free-markdown-to-pdf.netlify.app/
💻 GitHub Repo: https://github.com/S-SUJAN-S/free-markdown-to-pdf

Try It Out!

I'd love to hear your feedback. If you find it useful, give it a star on GitHub! And if you find bugs or have feature suggestions, open an issue.

Happy converting! 🚀

Have you built any side projects to solve your own problems? Share them in the comments!