DEV Community: Ifeanyi Chima

Writing unit test for Firefox private browsing window

Ifeanyi Chima — Sun, 05 Jul 2026 17:35:35 +0000

Our indicator looks like this: an icon + a label.

The browser has an indicator for when a user is in private mode. The indicator lives in two places under different instances:

The first instance is when the user is in "Horizontal Tabs" when the browser tabs are in the TabsToolbar (tab-bar or toolbar). So, the indicator shows both the icon and it's label.
The second instance is when the user has "Vertical Tabs" turned on. So, the indicator moves or shows up in the Navbar (which contains extensions, address bar) and this time only the icon shows up, no label.

Our task is to write a unit test to confirm that the icon shows up in both instance.

We start off by running this search grep -r "private-browsing-indicator-with-label" --include="*.xhtml" --include="*.js" --include="*.css" .

We found two things.

The "Shared" CSS file that controls the visibility of this icon browser/themes/shared/browser-shared.css
The browser/base/content/private-browsing-indicator.inc.xhtml — this is where the indicator's actual markup (HTML-like structure) lives.

Now, we can check the CSS file for where it controls the visibility of the indicator by using this syntax grep -n -A 10 "private-browsing-indicator-with-label" browser/themes/shared/browser-shared.css

What we find out in the file:

.private-browsing-indicator-with-label {
  :root:not([privatebrowsingmode="temporary"]) &,
  #navigator-toolbox:not([tabs-hidden]) #nav-bar > & {
    display: none;
  }
  #navigator-toolbox[tabs-hidden] #nav-bar > & {
    margin-inline-end: var(--space-medium);
    > .private-browsing-indicator-label {
      display: none;
    }
  }
}

What this means:

When the window isn't a private window (we are in normal mode) - it will hide the indicator completely.
When we have horizontal tabs in private window, hide the indicator from the navbar (which contains extensions, address bar) and then the indicator will move to the TabsToolbar (which actually browser tabs).

The image above shows that we are still in horizontal tabs

When we have vertical tabs while still in private window, the private-browsing-indicator will move to the navbar and then hide the label part of the indicator and keep only the icon.

The above image shows vertical tabs enabled

Writing the tests

Before we begin writing the tests, we would need to find other existing tests in the codebase to take inspiration from them, by using the search query:

grep -n "is_visible\|isVisible\|is_hidden\|isHidden" testing/mochitest/BrowserTestUtils/BrowserTestUtils.sys.mjsand then we read the file sed -n '325,350p' testing/mochitest/BrowserTestUtils/BrowserTestUtils.sys.mjs

This gives us a lot of information:

What to check: both copies of .private-browsing-indicator-with-label (one inside TabsToolbar, one inside nav-bar)
How to toggle vertical tabs: by using the pref sidebar.verticalTabs as seen here

SpecialPowers.pushPrefEnv({ set: [["sidebar.revamp", true], ["sidebar.verticalTabs", true]] })

Task structure: add_task(async function () {...})
Check visibility: BrowserTestUtils.isVisible(element)
How to open a private window (modern style): BrowserTestUtils.openNewBrowserWindow({ private: true })


/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

"use strict";

// The private browsing indicator lives in two possible spots:
// - Inside #TabsToolbar (shown with icon + label, for horizontal tabs)
// - Inside #nav-bar (shown with icon only, for vertical tabs)
// This test makes sure at least one copy is always visible in a
// private window, no matter which tabs layout is active.

add_task(async function test_indicator_horizontal_tabs() {
  const win = await BrowserTestUtils.openNewBrowserWindow({ private: true });

  let tabsToolbarIndicator = win.document.querySelector(
    "#TabsToolbar .private-browsing-indicator-with-label"
  );
  let navBarIndicator = win.document.querySelector(
    "#nav-bar .private-browsing-indicator-with-label"
  );

  ok(
    BrowserTestUtils.isVisible(tabsToolbarIndicator),
    "Indicator should be visible in TabsToolbar with horizontal tabs"
  );
  ok(
    BrowserTestUtils.isHidden(navBarIndicator),
    "Indicator in nav-bar should be hidden with horizontal tabs"
  );

  await BrowserTestUtils.closeWindow(win);
});

add_task(async function test_indicator_vertical_tabs() {
  await SpecialPowers.pushPrefEnv({
    set: [
      ["sidebar.revamp", true],
      ["sidebar.verticalTabs", true],
    ],
  });

  const win = await BrowserTestUtils.openNewBrowserWindow({ private: true });

  let tabsToolbarIndicator = win.document.querySelector(
    "#TabsToolbar .private-browsing-indicator-with-label"
  );
  let navBarIndicator = win.document.querySelector(
    "#nav-bar .private-browsing-indicator-with-label"
  );

  ok(
    BrowserTestUtils.isHidden(tabsToolbarIndicator),
    "Indicator in TabsToolbar should be hidden with vertical tabs"
  );
  ok(
    BrowserTestUtils.isVisible(navBarIndicator),
    "Indicator should be visible in nav-bar with vertical tabs"
  );

  await BrowserTestUtils.closeWindow(win);
  await SpecialPowers.popPrefEnv();
});

add_task(async function test_indicator_not_shown_in_normal_window() {
  const win = await BrowserTestUtils.openNewBrowserWindow();

  let indicators = win.document.querySelectorAll(
    ".private-browsing-indicator-with-label"
  );

  for (let indicator of indicators) {
    ok(
      BrowserTestUtils.isHidden(indicator),
      "Indicator should never be visible in a normal (non-private) window"
    );
  }

  await BrowserTestUtils.closeWindow(win);
});

Explaining the test:

Now, here is what this test is doing. Remember at the beginning, I said our private browsing lives in two possible spots:

Inside #TabsToolbar (shown with icon + label, for horizontal tabs): This is when we have private browsing enabled, but we are still using horizontal browser tabs (the default)
Inside #nav-bar (shown with icon only, for vertical tabs): This is when the user has enabled / turned on Vertical browser tabs.

Test 1: Horizontal Browser Tabs

The first test is saying open a private browser window using await BrowserTestUtils.openNewBrowserWindow({ private: true }); and then we are making sure that when we are in Horizontal Mode - the navbar indicator IS NOT showing. The only indicator that should be showing in Horizontal Mode is the tabsToolbarIndicator

Test 2: Vertical Browser Tabs

We open a private browser window using await BrowserTestUtils.openNewBrowserWindow({ private: true }); and now, we assume that the user has turned on vertical tabs, how do we do that in our test ?.... by using this pref to turn on vertical tabs during the test run

await SpecialPowers.pushPrefEnv({
    set: [
      ["sidebar.revamp", true],
      ["sidebar.verticalTabs", true],
    ],
  });

Now, in Vertical Mode the only indicator that should show is the navBarIndicator and the other one should not show. Also do not forget to close the browser window and cleanup the Pref using

await BrowserTestUtils.closeWindow(win);
await SpecialPowers.popPrefEnv();

Test 3: Normal Browser Window

In this test, we turn off private browsing and we make sure that none of those labels either navBarIndicator or tabsToolbarIndicator show up when the user is NOT using private browsing.

TLDR:

What each test does, briefly

test_indicator_horizontal_tabs: opens a private window in normal (default) tabs mode, checks the TabsToolbar copy is visible and the nav-bar copy is hidden.
test_indicator_vertical_tabs: turns on vertical tabs mode, opens a private window, checks the opposite: nav-bar copy visible, TabsToolbar copy hidden.
test_indicator_not_shown_in_normal_window: opens a completely normal, non-private window, and makes sure neither copy shows up at all, since this isn't a private window in the first place.

SUMMARY:

When a user switches Firefox to private browsing mode, the indicator shows up, and the bug report was that there was never a unit test to ensure that the indicator is present in various browsing modes

Horizontal tabs mode (while private browsing is turned on)
Vertical tabs mode (while private browsing is turned on)
Normal browsing mode.

Find the Patch Here: https://phabricator.services.mozilla.com/D310523

Find the Bug Here: https://bugzilla.mozilla.org/show_bug.cgi?id=1927615

THANK YOU

[Boost]

Ifeanyi Chima — Mon, 29 Jun 2026 08:29:49 +0000

Weekly community-sourced tech resources

Hemapriya Kanagala for The DEVengers

Jun 26

Dev Opportunity Radar #5: A Fully Funded Trip to AWS re:Invent, Google Cloud Career Launchpad, and a $1,000 Award

#discuss #community #opportunities #resources

9 min read

[Boost]

Ifeanyi Chima — Tue, 23 Jun 2026 13:37:49 +0000

KristinZ

Jun 8

From React Developer to AI Engineer: What Actually Changes

#typescript #ai #webdev #career

6 min read

Solstice cipher: Turing complete

Ifeanyi Chima — Mon, 08 Jun 2026 20:49:21 +0000

This is a submission for the June Solstice Game Jam

What I Built

Solstice Cipher is a browser-based game built around the tension between light and darkness — the core theme of the June Solstice.

The screen is split into two halves: pitch black on the left, golden yellow on the right. A Caesar cipher is presented to the player in a floating modal. Decode it correctly and the light grows. Guess wrong and the darkness creeps forward.

The game ends when either side fully consumes the screen. Darkness wins by default if you keep getting answers wrong.

The cipher words are selected randomly from a pool of over 6,500 common English words and encrypted using Caesar cipher with a shift of 3. Google's Gemma 4 model handles the encryption of each word on the server, with a verified fallback to ensure the player always gets a mathematically correct puzzle.

Video Demo

Code

MasterIfeanyi / solstice-game

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.js. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.

Learn More

To learn more about Next.js, take a look at the following resources:

Next.js Documentation - learn about Next.js features and API.
Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more…

View on GitHub

How I Built It

The stack is Next.js 16 with JavaScript, plain CSS modules, and Tailwind v4.

The architecture is built around a single GameContext using React's Context API, which broadcasts game state to every component without prop drilling. localStorage persists the light and dark widths across page refreshes so your progress survives an accidental reload.

The word selection pipeline works like this: a random word is picked on the server from a curated list of 6,500+ words sourced from Google's open source 10,000 most common English words list. That word is sent to Gemma 4 via OpenRouter to encrypt using Caesar cipher shift 3. Our server then verifies Gemma's encryption independently and corrects it silently if there is a mismatch, so the player always gets a valid puzzle.

For true randomness, a unique seed and offset generated with Math.floor(Math.random() * 1000000) is passed with every request. A rate limit fallback handles OpenRouter 429 responses gracefully by falling back to local encryption, and a network failure fallback handles complete internet loss.

Key architecture decisions:

DRY principle applied throughout with reusable Button, Modal, Header, and Navbar components.
A storage.js utility abstracts all localStorage operations with SSR safety guards.
Caesar cipher logic lives in one encryptCaesar function used everywhere on the server.
useRef tracks recently used words to prevent Gemma from repeating itself without triggering re-renders.

Prize Category

Best Ode to Alan Turing

As a computer science grad myself, I look up to Turing. His work in cryptography inspired this mini-game. I am in awe of his ability to turn a problem of decrypting German messages into a mathematical problem and then how he built a physical machine that took his instructions and was able to decrypt German signals.

That same spirit lives in Solstice Cipher. The Caesar cipher is one of the oldest encryption algorithms in history, and this game puts the player in the position Turing's team faced at Bletchley Park: staring at encrypted text and racing to decode it.

Best Google AI Usage

Google's Gemma 4 model powers the encryption engine of every round via OpenRouter. Each word selected for the player is sent to Gemma 4 with a structured prompt instructing it to apply Caesar cipher shift 3 and return a verified JSON response. The server independently verifies Gemma's output and corrects any mismatch, ensuring the AI is genuinely doing cryptographic work on every single round rather than acting as a simple random number generator.

Copilot with an Eagle eye

Ifeanyi Chima — Mon, 25 May 2026 19:31:49 +0000

This is a submission for the GitHub Finish-Up-A-Thon Challenge

What I Built

In Nigeria today, insecurity and corruption is a very big issue with no hope in sight of solving it as they both go in tandem. I have been in multiple situations where I wished I could contact emergency services as soon as possible but to no avail. Also, to be honest when I started this project in 2025, the goal was to provide a very simple way to combat corruption by turning even the layman into a watchful vigilante. So, the goal of this project was to prototype a simple system called "Eagle Eye" that will allow you to make reports to the appropriate authorities about corruption and any insecurity in an area.

I really hope to make this platform or website actually grow into a nationwide tool complete with an admin dashboard and a response team. I took massive inspiration from the London underground railway system: "see something, say something".

Demo

Live link: https://ifeanyi-eagle-eye.netlify.app/home

GitHub Repo: https://github.com/MasterIfeanyi/Eagle-Eye-App

The Comeback Story

The project was previously using Firebase before and I racked up a bill of $180 which hurt massively, so I decided to re-write it using Nextjs and MongoDB, and my assistant of choice was GitHub Co-pilot. I chose Nextjs and MongoDB because Nextjs to me feels like a full-stack option with a built-in /api folder and MongoDB Atlas is a free database service that I could use to store reports and perform authentication of users. Along the way I decided to add a page where you could get phone number of emergency services. If not for this hack-a-thon, I may have never come back to this project because I have been putting it off for some time as I am was busy.

My Experience with GitHub Copilot

Building Eagle Eye was not a smooth process. There were moments where the project felt completely stuck, and honestly, GitHub Copilot was a massive part of that process, as I primarily write Nextjs, but Co-pilot guided me and took away my fears. GitHub Copilot helped me think through the architecture from the ground up, guiding decisions like how to structure the Next.js app directory, how to handle authentication with JWT and cookies, and how to connect the frontend to MongoDB. When I hit bugs, like a broken scroll on the hotlines page, a sticky header that refused to stick, or a location detector pulling the wrong city, GitHub Copilot did not just hand me answers. It explained why things were breaking so I actually understood the fix. What I appreciate most is that GitHub Copilot treated me like a developer who was learning, not one who needed things done for them. This project genuinely would not exist in its current state without that support. Although, I was limited to the Claude Haiku 4.5 model (free plan), I feel like it was sufficient enought to help me.

How to use Google Gemma 4 model

Ifeanyi Chima — Thu, 14 May 2026 08:58:30 +0000

This is a submission for the Gemma 4 Challenge: Write About Gemma 4

I Built a Celebrity AI Chat App with Google Gemma 4 26B-A4B, Here's Everything You Need to Know

I've always been fascinated by the idea of talking to your Elon Musk, but for now we would have to settle down for a chatbot that actually feels like them. So when Google dropped Gemma 4 in April 2026, I saw my chance. I built a web app with a chat UI where you pick a celebrity, and Gemma 4 slips into their persona and holds a full conversation with you. The results were genuinely impressive and sometimes hilarious.

But before I walk you through how I built it, let me give you a proper introduction to the models that made it possible.

1. Understanding the Google Gemma 4 Model Family

Gemma 4 is Google DeepMind's latest generation of open models, released on April 2, 2026. It comes in four distinct sizes, each targeting a different use case, from running on your phone to powering a server-grade workstation. All four models are multimodal (they can process text and images), licensed under Apache 2.0, and support over 140 languages.

Quick Comparison Table

Model	Architecture	Context	Audio	Best For
E2B	Efficient Dense	128K	✅	Mobile / Edge
E4B	Efficient Dense	128K	✅	On-device assistants
26B A4B	Mixture of Experts	256K	❌	High-throughput APIs
31B	Dense	256K	❌	Maximum quality

2. How to Get an API Key

Before you can start building anything with Gemma 4, you need API access. The good news? You have a couple of options and one of them is completely free to start.

Option A: Google AI Studio (Direct from Google)

Google provides direct API access to Gemma 4 through Google AI Studio. Here's how to get your key:

Go to aistudio.google.com
Sign in with your Google account
Click "Get API key" in the left sidebar
Click "Create API key"
Copy your key and store it somewhere safe (you won't be able to see it again)

That's it. Google AI Studio gives you a generous free tier to experiment with before you need to think about billing.

Never hardcode your API key in your frontend code. Always store it in an environment variable (.env file) and access it from your backend.

Add .env to your .gitignore before your first commit, not after.

Option B: OpenRouter

OpenRouter is a unified API gateway that gives you access to hundreds of models including all Gemma 4 variants through a single, OpenAI-compatible endpoint. That means you can switch models with one line of code change, get automatic fallbacks if a provider goes down, and even access the free tier of Gemma 4 31B without spending a cent to start.

To get your OpenRouter API key:

Go to openrouter.ai
Click "Sign In" and create an account
Once logged in, click "Get API Key" button from your dashboard
Click "New Key", give it a name (e.g. celeb-chat-dev), and hit create
Copy and save your key it starts with sk-or-...

You can optionally add credits to your account for paid usage, but to start experimenting, the free-tier models (including google/gemma-4-26b-a4b-it:free) are more than enough.

3. How to Use Google Gemma 4 Through OpenRouter

Alright, this is where the fun begins. Let me walk you through exactly how I wired up Gemma 4 via OpenRouter to power my celebrity chat app, from the first API call all the way to a working chat UI.

The Base URL and Model IDs

OpenRouter exposes Gemma 4 through a single endpoint that's fully compatible with the OpenAI Chat API format. If you've ever called GPT-4 or any other model via OpenAI's SDK, this will feel immediately familiar, you're literally changing one URL and one model string.

The base URL is:

https://openrouter.ai/api/v1/chat/completions

And the Gemma 4 model IDs on OpenRouter are:

Model	Model ID	Free Tier?
Gemma 4 E2B	`google/gemma-4-e2b-it`	✅
Gemma 4 E4B	`google/gemma-4-e4b-it`	✅
Gemma 4 26B A4B	`google/gemma-4-26b-a4b-it`	✅ (`:free` suffix)
Gemma 4 31B	`google/gemma-4-31b-it`	✅ (`:free` suffix)

To use the free tier of the 26B model for example, use google/gemma-4-26b-a4b-it:free as the model string.

Switching Models Without Rewriting Your Code

This is the quiet superpower of going through OpenRouter. Because the API schema is identical across all models, switching from the free 31B to the 26B MoE (which is faster and cheaper in production) is literally one line:

// During development
model: "google/gemma-4-31b-it:free"

// In production (faster, cheaper MoE)
model: "google/gemma-4-26b-a4b-it:free"

No refactoring. No new SDK. Just change the string. This is why I recommend OpenRouter for any serious project, you can prototype on free-tier models and graduate to the right production model without touching your integration code.

Your First API Call

Let's start simple with a raw fetch call in JavaScript, no SDKs needed:

const response = await fetch("https://openrouter.ai/api/v1/chat/completions", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.OPENROUTER_API_KEY}`,
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    model: "google/gemma-4-26b-a4b-it:free",
    messages: [
      { role: "user", content: "What's the capital of Nigeria?" }
    ],
  }),
});

const data = await response.json();
console.log(data.choices[0].message.content);

That's it. Three things to note:

Your API key goes in the Authorization header as a Bearer token
The response shape mirrors OpenAI, your answer lives at data.choices[0].message.content
You're billed (or rate-limited on free tier) per token, so max_tokens is worth setting explicitly

I was getting this error

google/gemma-4-26b-a4b-it:free is temporarily rate-limited upstream.

The free tier of Gemma 4 on OpenRouter is being hammered by too many users right now and Google AI Studio is throttling it. When you use the free tier on OpenRouter (google/gemma-4-26b-a4b-it:free), you are sharing a pool of rate limits with every other developer in the world using that same free model. So when too many people hit it at once, Google throttles it and you get that 429 error. But you already have a Google AI Studio API key sitting in your .env.local doing nothing right now. OpenRouter lets you connect your own Google AI Studio key so that your requests go through your personal quota instead of the shared free pool.

You have two options:

Option 1 — Add your Google AI Studio key to OpenRouter

Option 2 — Add retry logic to your API route

I went with Option 1 which is adding my Google AI Studio key to OpenRouter integrations

Go to: openrouter.ai/settings/integrations

Find Google AI Studio
Paste your Google AI Studio API key there

This gives you your own dedicated rate limit instead of sharing the free pool with everyone

The System Prompt; The Secret Weapon for My Project

Here's where Gemma 4 genuinely impressed me. Gemma 4 officially supports the system role natively; a big deal for an open model, since earlier generations required hacky workarounds. However, in my actual project I used a slightly different pattern that I found worked even better for persona-heavy apps: the user/assistant injection pattern.

Instead of passing the persona as a system message, I injected it as the first user message and followed it with a primed assistant response where the model explicitly "agrees" to become the character before the real conversation even starts:

const formattedMessages = [
  {
    role: "user",
    content: systemPrompt, // persona instructions injected here
  },
  {
    role: "assistant",
    // the model "confirms" the persona before the conversation begins
    content: `Understood. I am ${personName}. I will only speak about my own life, work, and experiences. Ask me anything about who I am.`,
  },
  // then the real conversation history follows
  ...messages,
];

The subtle advantage of this approach over a plain system message: the model has explicitly agreed to the role as part of the conversation context. That in-context confirmation produces noticeably stronger character lock-in across long conversations. The model is far less likely to slip out of persona when it has already "committed" to it in an early assistant turn.

The results were honestly uncanny. The model held the persona across multiple turns, matched the celebrity's tone and vocabulary, and even pushed back on out-of-character questions in a way that felt natural. The 256K context window meant I could carry a long conversation without the model ever "forgetting" who it was supposed to be.

Enabling Reasoning Mode

One of Gemma 4's standout features is its configurable thinking mode, you can ask the model to reason through a problem before giving its final answer. OpenRouter exposes this through a reasoning parameter:

body: JSON.stringify({
  model: "google/gemma-4-26b-a4b-it",
  messages: messages,
  reasoning: { enabled: true }, // turn on chain-of-thought
}),

When enabled, the response includes a reasoning_details array showing the model's internal thought process before the final answer. I didn't use this for the celebrity chat (you don't want Morgan Freeman visibly deliberating), but it's incredibly useful for any app where you want to show why the model said something for example; tutoring apps, code explainers, or decision-support tools.

One tip from the OpenRouter docs: if you're building an agentic tool or integrating with something like Claude Code or Cline, turn reasoning off. It adds latency and those tools are optimized for fast back-and-forth, not deep deliberation.

Thanks for Reading !

My Buddy and I

Ifeanyi Chima — Wed, 13 May 2026 16:33:04 +0000

This is a submission for the Gemma 4 Challenge: Build with Gemma 4

What I Built

I chose this project because as a kid (since age: 17) I have always had this vivid dreams of speaking with Elon Musk, he is kind of like my Idol and I would cherish the opportunity to have a conversation with him, until that day comes, this is what we would manage. When I came across this hackathon to test the lates model built by Google (Gemma 4) it was a no-brainer for me. I want the opportunity to understand the memory and context management of this model. I decided not to limit it to Elon Musk and included as much celebrities as possible. I want to give my friends the opportunity to test and use it.

Buddy is a web application that lets you have real, in-character conversations with iconic public figures such as athletes, billionaires, historical leaders, artists, and innovators. You pick a person, and the AI steps into their shoes completely. It speaks the way they speak, stays grounded in their real life and career, and refuses to break character.

Although, with this project I am not solving a problem like climate change or malaria cure, The problem Buddy solves is simple. Most AI chatbots are general-purpose. You can ask them anything, and they will answer as a neutral assistant. That is useful, but it is not immersive. Buddy flips that entirely. The AI is not an assistant anymore, it is a person. Ask Lionel Messi about his childhood in Rosario. Ask Steve Jobs why he believed design was everything. You get answers that feel like a real conversation, not a Wikipedia summary read back to you.

The experience Buddy creates is curiosity without friction. It is the feeling of sitting across from someone remarkable and just... asking them things.

Demo

Link: https://celeb-chat.netlify.app

Code

GitHub: https://github.com/MasterIfeanyi/google-gemma4-hackathon

How I Used Gemma 4

Buddy runs on Gemma 4 26B, accessed via OpenRouter using the google/gemma-4-26b-a4b-it:free model.

The choice of Gemma 4 over the smaller variants came down to one core requirement; persona consistency. Keeping an AI locked inside a specific person's personality across a full multi-turn conversation is genuinely hard. The model needs to remember who it is, match the person's tone and vocabulary, deflect off-topic questions naturally without sounding robotic, and stay grounded in real publicly known facts all at the same time. The smaller E2B and E4B variants are impressive for their size, but they tend to drift out of character more easily under pressure, especially when a user deliberately tries to break the persona with trick questions or unrelated topics.

The 26B model holds the character much more firmly. When you ask Messi a question in Spanish, it does not just translate, it responds with the rhythm and warmth of how Messi actually speaks. When you push Steve Jobs on a topic he would find irrelevant, it redirects with the kind of sharp confidence Jobs was known for. That level of nuance needs a bigger model.

One specific technical challenge worth mentioning is Gemma 4 does not support a native system role in its message format. To get around this, Buddy injects the personality prompt as a user / assistant turn pair at the very start of every request, effectively tricking the model into treating the persona as established context before the real conversation begins. The 26B model responds to this pattern reliably and stays locked in. Smaller models were noticeably less consistent with the same approach.

What Gemma 4 ultimately unlocked for Buddy was believability. Because the model is large enough to hold complex persona context across many turns, we never had to simplify the experience to make it work. We did not have to limit conversation length, restrict the types of questions users could ask, or hardcode fallback responses. The model handled edge cases we never explicitly planned for. When a user asked Messi to speak Spanish, Gemma 4 switched languages naturally and stayed in character at the same time, responding with the warmth and rhythm of how Messi actually communicates, without any instruction from us to do so. When users tried to break the persona with off-topic questions, the model deflected in the voice of the person, not with a generic AI refusal. That level of emergent, in-character behaviour is what a smaller model cannot reliably give you and it is what makes Buddy feel like a conversation rather than a demo.

Thank you.

Google Next '26 - My thoughts

Ifeanyi Chima — Tue, 28 Apr 2026 08:01:47 +0000

This is a submission for the Google Cloud NEXT Writing Challenge

Introduction

I have been eyeing to participate in a DEV.TO hackathon for a while now and when I saw this come across my timeline, I jumped up excitedly. I want the badge of honor. The big focus for the Google Cloud NEXT event is on what Google is debuting in the A.I. race especially agents. The future of developing on the cloud is exciting !!

Keynote & Demos

In this article, I’ll break down the Developer Keynote because that stood out most to me and why.

I tuned in for the Developer Keynote (April, 23) which discussed building a marathon planning agent. A Gemini Enterprise Agent planned an entire Las Vegas marathon experience, coordinating hotels, routes, schedules, and logistics using multiple connected agents.

Demo 1 (Mofi Rahman) - Building agents with Agent Platform

We can design an agent in agent designer. When building an agent you need three things: Instructions; to help the agent understand its role as the marathon planner. Skills; help the agent progressively understand what is available to the agent to complete the work. such as using Google maps, handling Geo-spatial data. Map skills can make your agent an expert at using Google maps.

Recap

Give the agent a prompt
Agent loads the skills
Agent executes the tools to find viable routes.

What this means for developers

For developers, this means they can build specialized AI agents by composing three core components: instructions, skills, and tools, rather than writing complex logic from scratch. The agent designer platform handles how the agent loads skills, processes prompts, and decides which tools to call, so developers can focus on defining what the agent should do.

Demo 2 (Ivan Nardini & Casey West) - Creating multi-agent systems

We have a planner agent that needs to talk to 2 other agents: the simulator agent and the evaluator agent. The planner agent creates potential routes for the race. Evaluator sub-agent will judge routes based on specific criteria that we pick. Simulator agent works with the planner to get approved routes, run them and show results. How can we facilitate communication between all agents, we need two components; A2A protocol and agent registry.

A2A Protocol: Google introduced an open-source protocol called A2A protocol. This protocol eliminates API code to connect agents. Agents can just share a card that represents the capabilities of that agent.
Agent Registry: This is a directory where agents get registered and it resolves every agent identity and maps their specific skillset across the agent network.

What this means for developers

For developers, this means they can build multi-agent systems where agents communicate and collaborate without writing custom API integration code. The A2A protocol lets agents share capability cards with each other, while the agent registry acts as a directory that tracks every agent's identity and skillset across the network, so the planner, simulator, and evaluator agents can find and talk to each other automatically.

Demo 3 (Lucia Subatin & Jack Wotherspoon) - Enhancing agents with memory

When using gemini to do my job in the office, I usually copy all the files one-by-one and shove it into one prompt, in a bid to give gemini as much context as possible. For our planner agent we improve the context by giving it the ability to manage sessions, add memory and access other data sources. In this demo, we saw how we can use a skill to make the agent an expert at using alloyDB and vector functions. Basically what this Demo was showing is that by managing context efficiently and adding memory to our agent you can see the simulator agent adjust its route based on the memory and data it now had. The memory aspect comes from how the agent uses alloyDB together with vector functions to store and recall context from previous sessions, so it (alloyDB) behaves like a memory bank.

What this means for developers

For developers, this means they can replace the manual process of dumping files into a prompt by giving agents structured memory and database access instead. By connecting the agent to tools like AlloyDB and vector functions, the agent automatically manages its own context across sessions, so it can make smarter, more informed decisions without the developer having to feed it everything upfront.

Demo 4 (Megan O'keefe) - Debugging agents at scale

We all use console.log("here") to debug a point in our codebase, well in artificial intelligence, we can not do that but, Google provides tools for us to debug; Agent observability and Cloud assist investigation agent. Using these tools we will find and investigate the root cause of the error and then we will deploy a proactive fix. In this demo, we had an error and we were suggested a fix by the agent.

Error: The simulator agent is failing to call the gemini model API due to a request error. Something is wrong that the payloads were sending to the model.

Cloud assist prompt: Resume the Gemini cloud assist investigation about the simulator agent. What is wrong with agent.py

Fix: The agent is suggesting a fix that we add a token threshold parameter to our event compaction config so that we are periodically compressing context more often with each invocation. This is because we have a 1 million context token limit.

From this demo, I learned that Google cloud provides a full observability suite for agents - cloud assist, coding agent.

What this means for developers

For developers, this means they have a proper debugging suite for AI agents rather than guessing what went wrong. Google Cloud's observability tools let developers investigate agent failures, understand why an agent misbehaved, and get suggested fixes, so in this case the tool spotted that the simulator agent was hitting Gemini's 1 million token context limit and recommended compressing context more frequently to stay within that boundary.

Conclusion

Google Cloud NEXT made one thing clear: building AI agents is becoming a first class developer experience. You no longer have to stitch together APIs, manually manage context, or guess why your agent broke. Google is giving developers a full stack for agent development, from designing and connecting agents, to giving them memory, to debugging them when things go wrong. The A2A protocol, agent registry, AlloyDB memory, and Cloud observability tools all point in the same direction: agents are becoming software components that developers can build, scale, and maintain just like any other part of their stack. The marathon planner was just a demo but the underlying tools are real and they are ready to be used.

Outreachy May, 2026

Ifeanyi Chima — Thu, 16 Apr 2026 00:20:49 +0000

Open source

I have been singing about open-source to my friends for about some time now. I write articles about it. I have done hacktoberfest (twice in 2022 & 2023). It has always been on my mind to take on the big 3 - MLH, Outreachy and G-Soc

Outreachy - initial applications

Alright, let me start by saying: "Thank you universe for the reminder at the eleventh hour". This is because I literally forgot that the initial applications for contribution phase for May-August, 2026 Outreachy internship had already started. It opened Feb 6 - Feb 13, 2026. I was only reminded by a random tweet from a stranger on the 11th hour (Feb 13, 2 pm). Applications closed by (Feb 13, 5 pm).

Interlude

Once you get selected after the initial applications, you would see different organisations, select the one that suits you best. I chose Mozilla firefox because it required knowledge of HTML, CSS, and JavaScript.

Outreachy - Contribution phase

Before you get selected as an intern with Outreachy, you need to take part in the contribution phase which lasts for about three (3) weeks. It actually ends today (March 20, 2026 - April 15, 2026).

I learned quickly how to use bugzilla to find issues on my own (I made sure to look out for bugs with the label good-first-issue) and I also learned how to create patches using phabricator. Bugzilla and Phabricator those words sound big and fancy but phrabicator is just a single line of code - moz-phab submit --single.

here is a sequence:

git checkout -b bug-2022414-array-profiles

git add "file name"

git commit -m "fix: migrations for profiles with backup enabled"

moz-phab submit --single

You submit a patch for a bug, you get feedback or review from a mentor and then you push again.

One thing I learned, always make sure that you checkout -b into a new branch from main so that the branch does not have unrealated histroy from other bugs or commits.

Outreachy - Final Application

In your final application, you would be asked a few questions, you are to write essays answering them, they ask about your experience with the organisation. Also, You need submit a timeline of the work you propose to do during the thirteen week internship. You look at the goal of the organisation and you outline how you intend to approach the task.

Benefits

My life is literally this meme and the best way to get a job is to have some experience under your belt, which the Outreachy internship will provide.

Thank you, please follow me.

This blog is only a single part, in a multi-series blog that I will write about my experience !!!

Stay tuned !!!

Useless project.

Ifeanyi Chima — Mon, 06 Apr 2026 13:42:06 +0000

This is a submission for the DEV April Fools Challenge

What I Built

A button. Just a button.

You click it, and lines start crawling across your screen. 50 vertical lines and 50 horizontal lines slowly forming a grid of boxes like graph paper possessed by a ghost. That's it. That's the whole app. No data. No purpose. No redemption arc.

You can control how many lines appear, how fast they draw, and what color they are. You can also clear the grid and do it all over again, because apparently that's how you want to spend your time.

Demo

Code

MasterIfeanyi / grid-lines

How I Built It

Built with pure HTML5 Canvas, vanilla JavaScript, and zero regrets.

The core idea is simple, the canvas is just a blank piece of paper. I grab a "pencil" using getContext('2d'), pre-calculate all the x and y positions for each line by dividing the canvas width and height by the number of lines, store them in two arrays (verticals[] and horizontals[]), then draw them one by one using setTimeout so you can actually watch the chaos unfold in real time.

No frameworks. No libraries. No npm install. Just a canvas, a loop, and a questionable life decision.