DEV Community: FrancisTRᴅᴇᴠ (っ◔◡◔)っ

🗓️ Monthly Dev Report: May 2026

FrancisTRᴅᴇᴠ (っ◔◡◔)っ — Fri, 29 May 2026 14:17:56 +0000

Hey everyone! I bring you my development journey on what I have discovered, accomplishments for this month, and the goals for next month!

Additionally, I will share some posts highlights on what post I am proud of sharing to Dev.to and my top 3 posts that stood out to me this month!

✨ Dev.to Posts Highlights! ✨

Here is one of the posts I am proud of for this month!

Gemma 4 Challenge: Write about Gemma 4 Submission

FrancisTRᴅᴇᴠ (っ◔◡◔)っ for The DEVengers

May 22

Should you use Gemma 4 for your Development? A Multiversal Analysis to Determine if Gemma 4 is Right for You!

#discuss #devchallenge #gemmachallenge #gemma

Comments 103

19 min read

Made a Gemma 4 submission that featured @javz, @konark_13, and @codingwithjiro on their use of Gemma 4! I hope that this post will win in the top 5!

Here is the top 3 posts that I have discovered that stood out to me!

A CSS veteran’s take on speed vs purity

Sylwia Laskowska

May 4

I Love Tailwind. Sorry Not Sorry

#discuss #css #tailwindcss #frontend

154

Comments 132

5 min read

A pumpkin pie analogy for hand-crafted code

Andy Robinson

May 1

I Don't Like Tailwind. Sorry Not Sorry

#discuss #css #webdev #frontend

120

Comments 42

5 min read

@sylwia-lask @freshcaffeine Battle of the Titans about their opinion on Tailwind. Loved their view on Tailwind and why they liked/disliked it! (I like Tailwind haha. I know I say top 3 post, but I would count this as an exception as one post)

Relatable memes on collaboration styles

Klaudia Grzondziel

May 8

5 types of engineers I met as a Technical Writer

#watercooler #technicalwriting #discuss #jokes

115

Comments 60

5 min read

@klaudiagrz A fun short and sweet post about sharing her experience on how engineers view documentation from her perspective as a Technical Writer!

Statelessness and cost-saving tips

Jasmin Virdi

May 26

An LLM API call, in 4 GIFs

#llm #javascript #ai #beginners

Comments 40

4 min read

@jasmin A post about LLM API Calls using GIF to show what it looks like in a simple way.

Monthly Discovery 🔍

🔍 NPM oopsie 🫡

🔍 Duolingo, but you are a programmer

🔍 A kid who hacked the Pentagon

Accomplishments 🏆

✅ Made a couple Pull Requests and got 3 Pull Requests merged onto Forem!
✅ One Pull Request got merged onto the Virtual Coffee Website!
✅ Submitted the Gemma 4 Post.
✅ Cleaned up the DEVenger Org and invited great-minded individuals featuring:

Anmol BaranwalFollow

Just a tech guy who loves writing about technical stuff (1.5M+ reads) Open Source developer

Mikey DorjeFollow

Musician who codes

✅ Continued interacting with the Dev.to community.

Still working on... 🔨

🔨 Clean up Resume.
🔨 Clean up my portfolio and publishing it on Dev.to for Review.

Goals for Next Month 🎯

📝 Continue Forem Contribution.
📝 Continue Virtual Coffee Contribution.
📝 Clean up Resume.
📝 Clean up my portfolio and publishing it on Dev.to for Review.
📝 HackerRank clean up and learning Ruby!
📝 Continue interacting with the Dev.to community.

Feedback 💬

What else should I do for June?
Any questions/comments/advice or tips for the Monthly Report? Leave a comment below! I would love to hear from you!

Should you use Gemma 4 for your Development? A Multiversal Analysis to Determine if Gemma 4 is Right for You!

FrancisTRᴅᴇᴠ (っ◔◡◔)っ — Fri, 22 May 2026 17:36:15 +0000

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

Disclaimer: This is an individual submission for Francis Tran (@francistrdev). Everyone involved has their own accounts of using Gemma 4 and has been paraphrased in this post. See below for the list of people involved.

Author: Francis Tran (@francistrdev)
Featuring: Elmar Chavez (@codingwithjiro), Konark Sharma (@konark_13), and Julien Avezou (@javz)

The cover image uses characters from various Anime chosen by the people who are featured in this post, put together in using Pixlr, and using AI to enhance the quality of the image. Some contents started off using AI and has been paraphrased by the author's own words.

Introduction
Setting up Gemma 4 using Ollama
- Installing Ollama and Gemma 4
- Trying out Gemma 4
- Running Gemma 4 Offline
- Elmar's Verdict on Gemma 4
Using Gemma 4 as a Confused Developer
- The Strawberry Test
- The Tic Tac Toe Rotation Test
- The Broken Cup Test
- Konark's Verdict on Gemma 4
Building a Prototype using Gemma 4
- Results of Gemma 4 Vs. GPT 5.4
  - Technical Depth
  - Architecture & System Thinking
- Julien's Verdict on Gemma 4
Using Gemma 4 as an AI-Agent
- Gemma 4 is Strict
- Please Google I need this. Gemma 4 is kind of Looping Itself
- Francis' Verdict on Gemma 4
Summary

Thank you for Reading!

Introduction

In the age of AI, many developers are using AI in their workflows. This can range from AI assistants cleaning up a large code-base to developers vibe coding a prototype to showcase to others.

Regardless of your use of AI in your development, it is important to choose the model you want to work with. There are a lot of choices to choose from such as ChatGPT, Gemini, Copilot, etc. The one we are talking about today is Google's latest model: Gemma 4!

The goal of this article is to share our experiences using Gemma 4 in 4 different perspectives of Development starting from setting up Gemma 4 using Ollama, testing the hallucination of Gemma 4, how Gemma 4 outputs, and using Gemma 4 as an AI-Agent. Additionally, I will share our discoveries and whether we recommend using Gemma 4 based on our experiences! We hope that our experience of using Gemma 4 will help you to decide if Gemma 4 is right for you in any skill level of your developer career!

With that said, we will now talk about the setup process. In any development, we all experience setting up our environment whether it is OpenClaw or a simple NPM package! Having a local LLM is one of them. Here is Elmar's experience of setting up Gemma 4 using Ollama!

Setting up Gemma 4 using Ollama

Elmar ChavezFollow

Licensed civil engineer turned full stack developer building accessible, responsive web applications. I also review code in Frontend Mentor and participate in collaborative projects.

Elmar has been using ChatGPT for the past year where he mainly uses it as a mentor when doing projects. He was interested having a LLM locally. He believes that having an LLM locally is convenient for his case, due to power outages he has to faced in the Philippines. Having Gemma 4 locally will allow him to be productive when coding without the need to worry about connecting to the internet. With that said, he started to research about setting up Gemma 4 using Ollama.

Installing Ollama and Gemma 4

Elmar started to search on the internet, looking for tutorials on getting started on Gemma 4.

One of the ways to get started is installing Ollama, which Elmar thought was a weird name until he realized the logo was an actual llama.

When downloading Ollama, the main issue is the storage, which was nearing 100% capacity and Ollama installer defaults to the C:\ drive.

After searching more about installing Ollama without installing on the C:\ drive, which led to this command he had to run on the terminal:

C:\Users\ELMAR>cd Downloads
C:\Users\ELMAR\Downloads>OllamaSetup.exe /DIR="D:\Ollama"

Ultimately, it worked well. He had done other configurations such as redirecting the AI model installation in the same drive under D:\OllamaModels. He then downloaded the gemma4:e4b.

Trying out Gemma 4

The first thing Elmar tried was "hi gemma4". Although the expected outcome is Gemma 4 saying hello back, it gave him this error:

Error
500 Internal Server Error: model requires more system memory (9.8 GiB) than is available (4.9 GiB)

For context, this is his device specifications:

His laptop is great for programming and other developments. The issue is that his laptop is only suitable for "lightweight models" when it comes to downloading LLMs locally.

Elmar discovered that local AI depends heavily on your own hardware, unlike browser-based AI tools like ChatGPT.

One of the things Elmar did was to run a smaller version of Gemma 4:

ollama run gemma4:e2b

It gave him a similar error as before:

Error
500 Internal Server Error: model requires more system memory (7.2 GiB) than is available (5.7 GiB)

After investigating a bit more, he closed other applications that were running on his computer and taking up space and it outputted!

The big thing about running it for the first time is that it took longer than he expected, but he mentioned that he had VSCode, Notepad, and 4 tabs currently opened in his Chrome Browser.

Running Gemma 4 Offline

Elmar was curious about the result of using Gemma 4 without connecting to the internet.

It ran slower than usual, but it is still under a minute.

Elmar then tried to ask questions to Gemma 4 that he would normally ask to ChatGPT as part of his Development workflow.

In this case, he is currently building his website portfolio. Elmar asked a question along with attaching a screenshot to Gemma 4 and here is what it output:

Surprisingly, it took less time considering the fact that he inserted an image for this use case.

The wait time for the LLM to respond, which is around a minute, is reasonable for Elmar since he has a decent laptop. It is quite useful especially for countries that commonly have power outages or that have unreliable internet.

Elmar's Verdict on Gemma 4

This is Elmar's Verdict of Gemma 4 in terms of setting up via Ollama and using it for the first time:

Web-based LLMs are great for convenience and device flexibility. While local LLMs are great for offline reliability and privacy, I'd say the experience of experimenting with Ollama + Gemma 4 only made my perspective with AI clearer.

It is not magic, it's just data combined with probability and rendering models that require large amounts of RAM for compute power.

This begs the question, if I have a higher end device, would I invest fully into local LLM's?

I would not sacrifice my own hardware for running AI computations just to get responses faster.

There are data centers that have the hardware especially built for AI. I would rather give the job to them.

Overall, ChatGPT is still far more practical for my current workflow so I will be sticking to it as my default. However, I would definitely use Ollama + Gemma 4 as a reliable alternative.

That is Elmar's Verdict on Gemma 4! In the early stage, it is fast to setup, but difficult to use when it comes to response time and the hardware needed, especially considering most users do not have a powerful laptop.

Now you know about the setup with Gemma 4! Starting off with Gemma 4 and seeing its outputs is a good sign that everything works! However, although Gemma 4 is a small and powerful model, how good is it at not being confused? We now transition to Konark where he tested Gemma 4 to the limit!

Using Gemma 4 as a Confused Developer

Konark SharmaFollow

I am software engineer who finds fun and creativity in Frontend. I would love to be a part of a team to help, develop and learn from new people and add my knowledge to the project.

Konark has been using Gemma 4 for some time and the one thing he wanted to know is to see if he can abuse Gemma 4 to its confusion.

We all have that one moment where we randomly test an AI just to see “How smart are you actually?" with questions like “How many r’s are there in strawberry?”. Konark did three tests such as the Strawberry test, the Tic Tac Toe Rotation test, and the Broken Cup Test.

The Strawberry Test

Konark asked Gemma 4: “How many r’s are there in strawberry?” (The answer would be three). Initially, this type of question was commonly used to confuse many AI models.

Gemma 4 thought for a while and gave Konark three different interpretations regarding the number of "r’s" in strawberry.

Konark realized that sometimes AI over complicates simple questions and he would rather prefer simple answers. For example, if there are 10 apples in a basket and you asked Gemma 4: “How many apples are there?”.

Would you prefer this answer:

“This is my first time counting. Do you mean apples inside the basket or around the basket?”

Or would you simply perfer:

“There are 10 apples.”

Konark would prefer the second answer.

With these results, he was curious about how Gemini would answer to the strawberry test. As such, he asked Gemini and it simply replied:

3 r’s.

It is straightforward and it is always good to have a simple, non-complex answer.

The Tic Tac Toe Rotation Test

Another fun question Konark asked Gemma 4 was: “How would rotating a tic tac toe board by 90 degrees change the rules of the game and its strategy?”

The whole goal is to see if Gemma 4 thinks it's still the same, expect the board is rotated.

However, Gemma 4 took quite some time to conclude this. It explained things properly and even walked through a rotated example.

Although it is a helpful response, it would be nice to get a more straightforward answer similarly to the Strawberry Test.

The Broken Cup Test

This is Konark's favorite test, in which he asked Gemma 4: “I have a metal cup with the bottom missing and the top sealed. How can I use this cup?”

The simple answer would be "Rotate the cup. And suddenly, it becomes usable again.".

However, Gemma 4 did not really understand the trick. Instead, it started suggesting alternative ways to use the object.

Although it is creative, it is not entirely correct.

On the other hand, Gemini understood the trick faster and then even expanded on practical uses.

Overall, Gemma 4 still struggles with certain trick questions and edge-case reasoning.

Konark's Verdict on Gemma 4

This is Konark's verdict of using Gemma 4.

After playing around with both models, I reached a simple conclusion.

Gemma 4 feels good for:

learning

content generation

straightforward explanations

slower, detailed responses

Gemini feels better for:

trick questions

quick reasoning

direct answers

faster conclusions

And honestly, both have their place.

Sometimes I want a detailed explanation.

Sometimes I just want: “Bro, just give me the answer.”

And that matters.

Because developers don’t always want essays. Sometimes we just want the bug fixed.

This is important to consider when you want to use Gemma 4. Sometimes, we just want a simple answer to the issue we are trying to solve. Of course, prompting varies and this is Konark's experience using Gemma 4 so it can be different from others.

Speaking of prompting, AI is used to prototype projects in development! We now transition to Julien's experience on using Gemma 4 when it comes to prototyping a project and how it compares to what he usually uses, which is Codex!

Building a Prototype using Gemma 4

Julien AvezouFollow

Builder | Software Engineer | Author of The Thinking Engineer Toolkit

Julien planned on using AI to create a fast prototype.

He was curious about how Gemma 4 performs compared to his usual setup, Codex (GPT 5.4).

For context, the project is a Chrome extension to help develop better use of LLMs. He will share more on his blog page in the future!

His goal is to compare Gemma 4 Vs. GPT 5.4 when it comes to prototyping. For this comparison, he will run tests across the following 2 categories using the same prompt as input and comparing the quality of the outputs:

Technical Depth: The factual accuracy, understanding of deep system mechanics and ability to compare non-trivial trade-offs.
Architecture & System Thinking: The ability to think at the macro level, identifying bottlenecks, scaling issues, and making justifiable "when/why" decisions.

Results of Gemma 4 Vs. GPT 5.4

Here are the results for the cases of Technical Depth and Architecture & System Thinking!

Technical Depth

This is the prompt given to both LLMs:

I am building a Chrome extension which detects when a developer is using ChatGPT, Claude, or Gemini, shows a floating button, opens a side panel, lets the user describe their task, recommends one of five AI thinking modes, generates a better prompt, and lets the user copy it manually.

Modes:
1. Explore — when I don’t fully understand the problem yet
2. Challenge — when I have a plan, but it might be wrong
3. Decide — when I need to choose between options
4. Audit — when I need to verify quality or correctness
5. Reflect — when I want to actually learn from what I did

MVP constraints:

Chrome extension only

no login

no dashboard

no automatic prompt insertion

no usage tracking yet

Task:
Give me a technically detailed implementation plan for the MVP.

Here is the results:

Model	Pros	Cons
Gemma 4	Clear high-level structure. Correctly identifies manifest, background script, content script, overlay UI, and template-based prompt generation. Easy to read. Good for a conceptual first pass.	Too generic. Does not mention Chrome Side Panel API. Blurs overlay and side panel. Drifts from your exact modes. Weak on privacy/security. Less actionable for immediate implementation.
GPT 5.4	Much more implementation-ready. Strong file structure. Useful code snippets. Correct Chrome APIs. Better MVP scoping. Better maintenance thinking. Exact mode alignment. Clear recommendation to avoid LLM/API in v1.	Still light on deeper security analysis. The manifest/build setup would need adjustment because TypeScript files are not directly used by Chrome without bundling. Could have compared local/API/hybrid tradeoffs more explicitly.

Overall, GPT 5.4 gives the stronger Technical Depth output since it is more accurate, more build-ready, and more specific.

Architecture & System Thinking

This is the prompt given to both LLMs:

I am building a Chrome extension that helps developers use AI more intentionally.

It sits on top of ChatGPT, Claude, and Gemini. The user describes their task, then it recommends one of five thinking modes and generates a better prompt to copy.

Modes:
1. Explore — when I don’t fully understand the problem yet
2. Challenge — when I have a plan, but it might be wrong
3. Decide — when I need to choose between options
4. Audit — when I need to verify quality or correctness
5. Reflect — when I want to actually learn from what I did

MVP:

detect supported AI chat pages

show floating ModeCheck button

open side panel

recommend mode

generate better prompt

copy manually

soft CTA to the Thinking Engineer Toolkit

Future:
A SaaS dashboard may later track AI usage modes, cognitive cost, dependency patterns, and optional hard blocks.

Task:
Think at the system architecture level.

Cover:

best one-week MVP architecture

what to build now vs postpone

key system boundaries

privacy/trust risks

maintenance risks for a solo builder

how to preserve future optionality for analytics/dashboard

strongest argument for and against the browser extension approach

recommended roadmap: week 1, month 1, month 3

Be concise but thoughtful. Focus on trade-offs and “when/why” decisions.

Here is the results:

Model	Pros	Cons
Gemma 4	Good strategic restraint. Correctly recommends client-side MVP, hardcoded templates, no backend, and no dashboard at first. Good emphasis on fast time-to-value. Useful suggestion to model prompts as structured objects/schema for future flexibility.	Less complete system thinking. Weak privacy/trust analysis. Weak argument for/against extension approach. Maintenance advice is shallow. Roadmap becomes generic around logging, API integration, billing. Does not fully address future cognitive-cost/hard-block architecture.
GPT 5.4	Stronger system boundaries. Better local-first architecture. Better privacy/trust framing. Better solo-builder maintenance analysis. Stronger roadmap. Better future optionality through event/data modeling without collecting data yet. Better distinction between host page, extension, and future backend.	Does not go very deep on future scaling bottlenecks or hard-block mechanics. Could have included Gemma’s useful prompt-schema idea. Slightly less focused on concrete “engine” abstraction for prompt assembly.

Overall, GPT 5.4 wins on Architecture & System Thinking. Gemma 4 provides a solid, restrained MVP strategy, but GPT 5.4 gives a more complete architectural view: system boundaries, trust, local-first design, future analytics optionality, solo-builder maintenance risk, and roadmap discipline.

Julien's Verdict on Gemma 4

This is Julien's verdict on the use of Gemma 4:

GPT 5.4 seems to be the strongest at high-level reasoning and synthesis as you would expect from a recent frontier model.

However a good use case for Gemma 4 in terms of prototyping work would be for codebase analysis, running experiments through constraints and for privacy-sensitive workflows.

Being an open model which can be run locally has great specific and complementary use cases when prototyping developer tools.

I will consider this going forward.

Even though GPT is preferred when it comes to high-level reasoning and synthesis, there are other cases where Gemma 4 is useful for prototyping.

Speaking of prototyping, now we transition over to using Gemma 4 as an AI-Agent!

Using Gemma 4 as an AI-Agent

FrancisTRᴅᴇᴠ (っ◔◡◔)っFollow

📚 Full-Stack Developer 📚 "A Smooth Sea never made a Skilled Sailor" - Franklin D. Roosevelt

Whenever I am contributing to Open Source, it is quite useful to have an AI-Agent to work with you. My preference is to use an agent living in an application like Visual Studio Code.

I have been using GitHub Copilot when it comes to contributing to Forem and it has been useful when it comes to navigating code bases, problem solving issues, etc.

When I heard about Gemma 4, I thought it would be a good idea to try out when using Gemma 4 as an AI-Agent. I specifically used the cloud version using Ollama since the hardware I have cannot handle LLM locally, even though I tried the smaller version of the model.

Setting up wasn't too difficult on my part. Since I tried Ollama to begin with before the release of Gemma 4, it was as easy as pulling the model using this command:

ollama pull gemma4:31b-cloud

After installing, I selected the model and was ready to go!

When using the model, I noticed there wasn't much of a big change compared to my initial workflow of using Copilot as my agent.

Both models asked me for permission when running commands, able to problem solve the issue I requested, etc. To be fair, I wasn't using "Continue" Visual Studio code extension since it is quite popular when using local LLMs. Also, Visual Studio code is flexible when it comes to adding your own model in addition to using Copilot, which I wasn't surprised that it behaves similarly when using Copilot.

However, there are a couple of things I noticed when using Gemma 4 that I believe are important to address based on my experience using Gemma 4.

Gemma 4 is Strict

The main difference between Gemma 4 and Copilot was that it is quite firm on the tasks it is given to them. I notice that whenever I request a plan on tackling an issue, it provides a To-do list of the steps Gemma 4 is planning on doing to fix the issue.

For example, this is the prompt I gave to Gemma 4:

I have this issue. How do I approach this?

https://github.com/forem/forem/issues/23277

It will output their findings like any other LLM. However, it would not act right away and instead, listed out the next steps:

In cases like these, I just follow up the Agent "Go for it" or "Proceed". Sometimes it does everything in the to-do list in one go and in other cases it goes one by one where I have to tell the Agent to "Do all the tasks". Do note that I did not change any settings as I was setting up Gemma 4 since it was just pulling the model and selecting it in Visual Studio Code.

Compare that to Copilot, where regardless of the prompt, it would take action right away. There were cases where I forgot to change the mode from "Agent" to "Chat" and I was specifically asking the AI about the plan to tackle the issue. Instead of listing out the steps, it did it right away which I did not want it to do.

In all fairness, Gemma 4 and Copilot are from different companies (Google and Microsoft) and since Copilot is built into Visual Studio Code, it is fair to assume that its actions strictly follows based on the settings you have in Visual Studio Code for Copilot.

However, it is always nice to see Gemma 4 listing out the To-do list and asking the user to proceed. I believe it is good practice by default if you are a type of user that wants to get an AI's advice on what to do and doing it yourself from there.

Please Google I need this. Gemma 4 is kind of Looping Itself

It is exactly what you are thinking. This is a common occurrence where Gemma 4 will read a file from top to bottom and reread it again. Here is an example that I encountered when using Gemma 4:

I am not sure what is causing this issue since this happens randomly.

The solution is stopping the Agent and sending the same prompt. This fixes the issue really well, though this bug remains a mystery to why it occurs in the first place.

Francis' Verdict on Gemma 4

This is my verdict on the use of Gemma 4 as an AI-Agent:

I believe Gemma 4 works really well when being an open source developer. It can navigate large code-bases and being able to solve complex problems well for a model that is quite small.

Although there isn't a big difference between Gemma 4 and other models I have used, it is good to consider token usage. I would recommend Ollama when using Gemma 4. It is free to use the cloud version and the tokens reset weekly whereas Copilot resets monthly. If you are heavily relying on AI-Agents, I would recommend the Ollama solution since it is more flexible. Even if you reach the daily limit of tokens, it resets every few hours.

I would highly recommend Gemma 4 as a great starting point when it comes to using it as an Agent when you want to contribute to open source. Just remember to monitor the response time since there is a very good chance where it loops itself in which it would burn tokens in the process.

Summary

Gemma 4 has been used in some aspects when it comes to setting up Ollama to use Gemma 4, testing out the response of the model, prototyping using Gemma 4, and the role as an Agent. Here are the main things to consider based on what I have shared above.

1. Convenience

Like any other local models, you have to consider not only if you are conformable downloading a model locally, but ensuring you have enough compute power to run an LLM. Although there are options to use LLM on the cloud (for Ollama at least), having a local LLM is very convenient for developers who want to run the model locally and not worry about:

Use of Tokens limits and payed services.
The environment when it comes to data centers in the age of AI.

2. Performance

Speaking of compute power, having a local LLM, even with smaller models of Gemma 4, still needs a lot of power. We saw that in Elmar's experience, it took a while for Gemma 4 to produce an output comparable to using any cloud model. If you are comfortable with the wait time of the model, then it shouldn't be a problem!

3. Context Output

Every model behaves differently whether cloud or local models. This is no different to Gemma 4. If you are using Gemma 4, you have to make sure the prompt is specific to your needs. This is best practice in prompts in general when it comes to requesting your needs and being as specific as possible.

4. Role as an AI-Agent

It is common for developers nowadays to use a local model to run as an Agent. Using Gemma 4 via Ollama has been a great experience for me. Do note that you may encounter issues when using Gemma 4. I would recommend monitoring Gemma 4's token usage in the event of Gemma 4 looping itself and burning unnecessary tokens.

Verdict: Overall, if you have enough power to run a local LLM and would like to have a model that is smaller but more powerful than other Flagship models to use in your development knowing the limitations of local LLMs in general, then I believe Gemma 4 is right for you!

I hope that this Multiversal Analysis has helped you to determine if Gemma 4 is right for you! If you like to learn more about Gemma 4 in detail, you can read here: https://deepmind.google/models/gemma/gemma-4/

Note: Gemma 4 has different model sizes and the conclusion based on the verdicts may not be accurate to your own personal experience. However, I believe these experiences capture the feeling on what to expect when using Gemma 4 and any local AI model in general.

Visit the Google Documentation to learn more: https://ai.google.dev/gemma/docs/core

Thank you for Reading!

If you have made it this far, thank you for taking the time to read this article! I hope you have learned something based on our experiences using Gemma 4 in different areas of development.

I would like to give credit to the Virtual Coffee Group where I used their "#co-working" room to meet with Elmar Chavez (@codingwithjiro), Konark Sharma (@konark_13), and Julien Avezou (@javz) for the first time outside of DEV and would love to work with them again in the future!

Check out Virtual Coffee below to see what they do!

Virtual Coffee Follow

Virtual Coffee is a laid-back conversation with developers twice a week. It's the conversation that keeps going in slack. It's the online events that support developers at all stages of the journey.

Feel free to send us love by following us individually and our DEVenger org!

The DEVengers Follow

This is an organization where we assemble the greatest minds the community has ever known! The question isn't "How fast can I code?". The question is "What will I learn from the farthest below?".

FrancisTRᴅᴇᴠ (っ◔◡◔)っFollow

📚 Full-Stack Developer 📚 "A Smooth Sea never made a Skilled Sailor" - Franklin D. Roosevelt

Julien AvezouFollow

Builder | Software Engineer | Author of The Thinking Engineer Toolkit

Konark SharmaFollow

I am software engineer who finds fun and creativity in Frontend. I would love to be a part of a team to help, develop and learn from new people and add my knowledge to the project.

Elmar ChavezFollow

Licensed civil engineer turned full stack developer building accessible, responsive web applications. I also review code in Frontend Mentor and participate in collaborative projects.

Challenge #1: Did you find 4 hidden random videos in this article?

Challenge #2: How many "r's" are there in this post in total?

Challenge #3: Who are the anime characters in this article's cover image?

Challenge #4: Based on Challenge 3, who decide to choose those anime characters in this article respectfully?

Any questions/comments? Love to hear your thoughts on Gemma 4! What's your experience on using Gemma 4 and do you recommend it?

Honesty is the best Policy. The Secret Invasion of the use of AI on DEV

FrancisTRᴅᴇᴠ (っ◔◡◔)っ — Mon, 18 May 2026 22:50:23 +0000

I recommend reading the post by @best_codes that talks about how people are using AI on dev.to.

Bot-to-bot comment interactions

BestCodes

May 16

Dead Internet Theory is Happening to dev.to

#discuss #ai

Comments 53

4 min read

I wasn't planning on writing the post about it anytime soon until seeing that article. Time to time, I have seen people use AI to write their articles and seeing that it gets more engagement than actually writing it.

Hearing that makes me feel disappointing that we have not done enough to make the platform more genuine, especially where we actually have rules on the use of AI generated content. More information can be found here: https://dev.to/guidelines-for-ai-assisted-articles-on-dev

I believe the use of AI to assist you in writing is fine. There is nothing wrong with that. However, I believe it is best practice to let the reader know that the post uses AI in some degree regardless of if you use it for grammatical checks or fully generate the post with purely AI (which I do not recommend on doing).

We may not see it, but we are a small community where we have the power to make a positive impact on dev.to. We are lucky that @ben and @jess allow us to have the ability to moderate the platform and look out for each other and ensuring we are enforcing the rules. Not a lot of spaces online has that kind of trust in their community as far as I have seen.

As a DEVenger, I am contributing my part to enforce the rule to reduce down the number of fully AI-generated content and ensuring everyone is following that rule of adding the disclaimer that the post uses AI in some degree.

Some of you may agree with me and some may disagree...and that's ok! I believe that quality always beats quantity and I want to ensure dev.to is a genuine place where others can learn from each other and not worrying about engagements.

What can you do as a DEV?

I recommend reading this post about the use of AI on DEV

Erin Bensinger for The DEV Team

Dec 19 '22

Guidelines for AI-assisted Articles on DEV

#meta #chatgpt #writing #abotwrotethis

123

Comments 39

4 min read

Make your best judgement and determine if the author is following the rules of the use of AI. If you believe that they are not following the rules, take action by:

Marking the post as "Low-Quality".
Inform the author.
Report the post.

Note: It is always a good idea to communicate to the author first before doing anything. If the user continues to break the rules, feel free to report it.

This is important. Please do not attack anyone on DEV in the process. dev.to is a safe space and should be treated with respect and its integrity. Respect each other and abide the DEV Terms and Conditions and always make sure to think before you act!

Just a PSA I want to share.

For everyone on DEV, I hope you can do your part to make dev.to a great place! Expect Sloan messages to be more active as moderation ramps up. Feel free to share your experience on DEV so far and what can it be improve in the age of AI.

Welcome to the DEVengers Organization! A group of extraordinary individuals who have shaped Dev.to like no other! 🚀

FrancisTRᴅᴇᴠ (っ◔◡◔)っ — Fri, 08 May 2026 18:28:58 +0000

Disclaimer: This is a Fan group that is built with love and passion to the Dev.to platform. This group is not affiliated with the Official Dev.to Team in any capacity! This post will be continuously edited based on feedback and updates!

Introduction

Welcome to the DEVengers organization! It is a group of carefully selected individuals that has proven themselves above and beyond their niche and is here to showcase it to the Dev.to platform!

This group is founded by me (Francis)! When I first joined Dev.to, I found many talented individuals sharing their thoughts, work, and advice to the platform. It was helpful for me to expand my skills as a developer and the community is really supportive!

This has led me into creating this organization! The goal is to select individuals who has proven themselves to go above and beyond the expectation they set upon themselves. Additionally, members will share their posts on their specific niche with high quality and easy to follow for everyone on Dev.to!

Content to Expect

Depending on the individual, the content varies. There is no set "theme" to what the DEVengers post. It can be anything ranging from tips/tricks, opinions on DEV, etc. However, the posts will be high quality and useful for developers that needed it!

How do I join?

The recruitment process is not simple. It will depend on each individual and there is no telling on if you are qualified. If the organization leader believes that you are fit for the group, the leader will send the invite via email using the Invite feature.

Thanks!

This is our introduction! Thank you for reading! Feel free to leave any questions or concerns below!

What is your WPM (Words per Minute)? #2

FrancisTRᴅᴇᴠ (っ◔◡◔)っ — Tue, 05 May 2026 14:28:36 +0000

Cover Video is from DC's Legends of Tomorrow on Guitar

I am curious, What is your WPM?

The highest WPM and Accuracy for the 1 minute and 5 minute, shared in the comments, will be featured on my next Monthly Dev Report respectfully :)

Take the 1 Min Test Take the 5 Min Test

Current Dev.to World Record Holder

Here are the current record holders!

1-minute Challenge! 🏅

Jatin Sharma Follow

Turning Web Dreams into Reality, Just Like Tony Stark's Vision

@j471n With a 121 WPM with 98% accuracy!

5-minute Challenge! 🏆

Jon GottfriedFollow

Co-founder of Major League Hacking

@jonmarkgo With a 114 WPM with 98% accuracy!

Submission Instruction

Complete the challenge. Either do 1 minute, 5 minute, or both!
In the comments, screenshot your result and tell me your favorite music! See below for example submission:

My Favorite Music

Good Luck! Submission is closed by May 22!

EasyPollVote [Dev Log #4]

FrancisTRᴅᴇᴠ (っ◔◡◔)っ — Fri, 01 May 2026 15:14:37 +0000

Welcome to the Forth DEV LOG!

Welcome to the forth Dev Log of my full stack application called EasyPollVote (EasyPV)!

What is EasyPollVote (EasyPV)?

A Next.js application where the ultimate goal is having the convenience to create your own poll and share it for others to vote on your custom poll!

For example, a user can create their own poll. Their poll can be something like "Do you like Cats or Dogs?" following the two options users can vote on "Cats" or "Dogs". Then, they will be able to send the private link to anyone and the voters can vote on it without the need to create an account!

That is the whole goal. Do note that this goal may change as time goes on!

The current goal is to learn about the use of Supabase!

Current Progress

Nothing new other than cleaning up code. @sylwia-lask made a poll and here are the results!

As mention in the last Dev Log, I will now be discussing how the Custom Polls work!

Part 1

Here is the HTML code based on the image above:

<form onSubmit={handleSubmit} className="w-full p-4 sm:p-6 md:p-8">
    <h2 className="text-xl font-semibold text-center p-4 sm:p-5 border-4 border-indigo-200 border-b-indigo-500">
        Create a Poll
    </h2>

    <div className="mt-5 mb-5 justify-center">
        {/* TITLE */}
        <label>
            <h1>Poll Title</h1>

            <input
                type="text"
                placeholder="Poll Title (required)"
                value={title}
                onChange={(e) => setTitle(e.target.value)}
                className="w-full mb-4 p-3 border"
                required
            />
        </label>

        <label>
            <h1>Poll End Date</h1>

            {/* END DATE */}
            <input
                type="datetime-local"
                value={endDate}
                onChange={(e) =>
                    handleEndDateChange(e.target.value)
                }
                className={`w-full mb-1 p-3 border ${endDateError ? "border-red-500" : ""
                    }`}
                required
            />
        </label>

        {/* ERROR */}
        {endDateError && (
            <p className="text-red-500 text-sm mb-3">
                {endDateError}
            </p>
        )}
    </div>

    {/* OPTIONS */}
    <label className="block mb-2 font-medium">
        Poll Options
    </label>

    <div className="w-full mb-4 p-4 sm:p-6 border">
        {options.map((opt, index) => (
            <div
                key={index}
                className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2 mb-3"
            >
                <input
                    type="text"
                    placeholder={`Option ${index + 1}`}
                    value={opt.text}
                    onChange={(e) =>
                        handleOptionChange(
                            index,
                            e.target.value
                        )
                    }
                    className="flex-1 p-3 border"
                    required={index < 2}
                />

                <div className="flex gap-2">
                    <input
                        type="color"
                        value={opt.color}
                        onChange={(e) =>
                            handleColorChange(
                                index,
                                e.target.value
                            )
                        }
                        className="w-12 h-12 p-1 border cursor-pointer"
                    />

                    {index >= 2 && (
                        <button
                            type="button"
                            onClick={() =>
                                removeOption(index)
                            }
                            className="px-3 py-3 bg-red-500 text-white"
                        >
                            ✕
                        </button>
                    )}
                </div>
            </div>
        ))}

        {options.length < 4 && (
            <button
                type="button"
                onClick={addOption}
                className="w-full mb-2 p-3 border"
            >
                + Add Option
            </button>
        )}
    </div>

    {/* SUBMIT */}
    <button
        type="submit"
        disabled={loading || !!endDateError}
        className="w-full bg-blue-500 text-white py-3 disabled:bg-gray-400"
    >
        {loading ? "Submitting..." : "Submit"}
    </button>

    {message && (
        <p className="text-sm text-center mt-3">
            {message}
        </p>
    )}
</form>

In this form, we have the main functionalities:

"handleSubmit"
"setTitle"
"handleEndDateChange"
"handleOptionChange" and "handleColorChange"
"addOption" and "removeOption"

I will be discussing in reverse order.

"addOption" and "removeOption"

Nothing big is going on. Basically, the user have the option to create up to 4 options for the voter to vote on and being able to delete the options as well:

// Add/Remove options (max 4, min 2)
const addOption = () => {
    if (options.length < 4) {
        setOptions([...options, { text: "", color: "#a855f7" }]); // Add option
    }
};
const removeOption = (index: number) => {
    if (options.length <= 2) return;
    setOptions(options.filter((_, i) => i !== index)); // Remove option
};

"handleOptionChange" and "handleColorChange"

Speaking of options, you have the ability to enter a name for that option and the color associate with it.

// Poll options w/ color associated with each option
const handleOptionChange = (index: number, value: string) => {
    const updated = [...options];
    updated[index].text = value;
    setOptions(updated);
};
const handleColorChange = (index: number, color: string) => {
    const updated = [...options];
    updated[index].color = color;
    setOptions(updated);
};

"handleEndDateChange"

Based on the input, it get stored:

const handleEndDateChange = (value: string) => {
    setEndDate(value);
    setEndDateError(validateEndDate(value)); // Validate the date
};

"setTitle"

Just storing in a variable :)

"handleSubmit"

I save the biggest one for last!

// Handling submit of the form
const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    setMessage("");


    const filteredOptions = options.filter(
        (opt) => opt.text.trim() !== ""
    );

    try {
        // duplicate check uses filtered options only
        for (let i = 0; i < filteredOptions.length; i++) {
            for (let j = i + 1; j < filteredOptions.length; j++) {
                if (filteredOptions[i].text.trim().toLowerCase() === filteredOptions[j].text.trim().toLowerCase()) {
                    setMessage("Options cannot be identical!");
                    setLoading(false);
                    return;
                }
            }
        }

        const isoEndDate = new Date(endDate).toISOString();

        // POST request one all the validation is complete
        const res = await fetch("/api/poll", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
            },
            body: JSON.stringify({
                title,
                options: filteredOptions,
                endDate: isoEndDate,
            }),
        });

        const data = await res.json();

        if (!res.ok) {
            throw new Error(data.error || "Something went wrong");
        }

        const pollUrl = `${window.location.origin}/poll/${data.pollId}`;

        setMessage(
            "Poll created successfully! Share this link: " + pollUrl
        );

        // reset form
        setTitle("");
        setEndDate("");
        setEndDateError("");
        setOptions([
            { text: "", color: "#22c55e" },
            { text: "", color: "#3b82f6" },
        ]);
    } catch (err: any) {
        setMessage(err.message);
    } finally {
        setLoading(false);
    }
};

The first big thing it it does is ensuring there are no duplicate values in the options section. If there are no duplicate names, we then proceed to set the date to an ISO and do a POST request on api/poll.

// POST request one all the validation is complete
const res = await fetch("/api/poll", {
    method: "POST",
    headers: {
        "Content-Type": "application/json",
    },
    body: JSON.stringify({
        title,
        options: filteredOptions,
        endDate: isoEndDate,
    }),
});

It uploads the title, options, and its enddate of the poll.

Once the user submits the form, it generates a link for the user to share with others to vote on their poll!

const pollUrl = `${window.location.origin}/poll/${data.pollId}`;

setMessage(
    "Poll created successfully! Share this link: " + pollUrl
);

In the api/poll/route.ts, it only has a single POST request:

export async function POST(req: Request) {
    try {
        const body = await req.json();

        const { title, options, endDate } = body;

        // 1. Validate input
        if (!title || !endDate || !options || options.length < 2) {
            return NextResponse.json(
                { error: "Invalid input" },
                { status: 400 }
            );
        }

        // 2. Validate ISO date (already normalized from client)
        const normalizedEndDate = new Date(endDate);

        if (isNaN(normalizedEndDate.getTime())) {
            return NextResponse.json(
                { error: "Invalid date format" },
                { status: 400 }
            );
        }

        if (normalizedEndDate.getTime() <= Date.now()) {
            return NextResponse.json(
                { error: "End date must be in the future" },
                { status: 400 }
            );
        }

        // 3. Insert Poll
        const { data: pollData, error: pollError } = await supabase
            .from("Poll")
            .insert([
                {
                    PollTitle: title,
                    Poll_EndDate: endDate,
                    Poll_Ended: false,
                },
            ])
            .select()
            .single();

        if (pollError) {
            return NextResponse.json(
                { error: pollError.message },
                { status: 500 }
            );
        }

        // 4. Insert Options
        const optionsPayload = options.map(
            (opt: { text: string; color: string }) => ({
                poll_id: pollData.id,
                option_text: opt.text,
                option_color: opt.color || "#a855f7",
                Votes: 0,
            })
        );

        const { error: optionsError } = await supabase
            .from("VoteOptions")
            .insert(optionsPayload);

        if (optionsError) {
            return NextResponse.json(
                { error: optionsError.message },
                { status: 500 }
            );
        }

        return NextResponse.json({ pollId: pollData.id });

    } catch (err: any) {
        return NextResponse.json(
            { error: err.message || "Server error" },
            { status: 500 }
        );
    }
}

Pretty much we do an insert in two tables where we insert into the Poll table and insert to the VoteOptions table, where the VoteOption has a Foriegn key linked to the Poll.

You may also noticed this part, which we will get to later:

Poll_Ended: false,

Part 2

When the user linked on an existing poll, this is what the structure look like:

{/* RESULTS */ }
<div className="p-4 sm:p-6 md:p-8">
    <h1 className="text-center text-xl font-semibold">
        Total Votes: {totalVotes}
    </h1>

    {options.map((opt) => {
        const votes = Number(opt.Votes) || 0;
        const percentage =
            totalVotes > 0 ? (votes / totalVotes) * 100 : 0;

        return (
            <div
                key={opt.id}
                className="flex justify-between items-center p-4 sm:p-5 shadow-md outline outline-black/5 dark:bg-gray-800 border-2 border-gray-80 dark:border-gray-700 m-2"
                style={{
                    background: `linear-gradient(to right, ${opt.option_color} ${percentage}%, transparent ${percentage}%)`,
                }}
            >
                <span className="font-medium bg-black text-white px-2 py-1 rounded text-sm sm:text-base">
                    {opt.option_text}: {votes}
                </span>
            </div>
        );
    })}
</div>

{/* VOTING FORM */ }
{
    !hasVoted && !pollEnded && (
        <form
            onSubmit={handleVote}
            className="p-4 sm:p-6 md:p-8 flex flex-col gap-2"
        >
            <h1 className="font-medium mb-2">Choose your Vote!</h1>

            {options.map((opt) => (
                <label
                    key={opt.id}
                    className="flex items-center gap-2 p-2 border-2 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700"
                >
                    <input
                        type="radio"
                        name="vote"
                        value={opt.id}
                        checked={selected === opt.id}
                        onChange={() => setSelected(opt.id)}
                        className="cursor-pointer"
                    />

                    <span className="flex-1 text-sm sm:text-base">
                        {opt.option_text}
                    </span>
                </label>
            ))}

            <button
                type="submit"
                disabled={loading}
                className="w-full bg-blue-500 text-white py-3 disabled:bg-gray-400 mt-5"
            >
                {loading ? "Submitting..." : "Submit Vote"}
            </button>
        </form>
    )
}

{/* MESSAGE */ }
{
    (message || hasVoted) && (
        <p className="mt-4 text-center text-sm p-4 sm:p-5">
            {message}
        </p>
    )
}

It is structured similar to the Demo Poll I discuss on the last Dev Log. Most of it is trying to fetch data from the database and displaying it in the UI.

In another component, we have a timer set. If the timer has reach the end date (where the user has set the end date), it will set the boolean to true and it will remove the ability to vote on that poll.

const now = new Date();
const end = new Date(poll.Poll_EndDate);
const pollEnded = now >= end;

// update DB if not already ended
if (pollEnded && !poll.Poll_Ended) {
    await supabase
        .from("Poll")
        .update({ Poll_Ended: true })
        .eq("id", poll.id);
}

Note: The feature of auto delete a poll will be implemented in the future.

And that's it! Future developments will continue after the end of the Spring Semester! I appreciate the feedback from the community and feel free to provide feedback if you haven't already!

Official Website

If you would love to see the project yourself, feel free to check out the link here: https://easypollvote.vercel.app

I recommend to put a fake email and a fake name if you are using the app. Everything works as intended! Check it out and feedback is greatly appreciated!

Any questions/comments/feedback? I would love to hear from you!

Note: This post is monitored by the University and therefore the repository is currently private until the early Summer!

🗓️ Monthly Dev Report: April 2026

FrancisTRᴅᴇᴠ (っ◔◡◔)っ — Tue, 28 Apr 2026 22:44:48 +0000

Post Cover is "Soda Pop" from Kpop Demon Hunters featuring @javz, @embernoglow, @konark_13, @nickytonline and @meg_gutshall!

Hey everyone! I bring you my development journey on what I have discovered, accomplishments for this month, and the goals for next month!

Additionally, I will share some posts highlights on what post I am proud of sharing to Dev.to and my top 3 posts that stood out to me this month!

Winners of the WPM Challenge 🖥️

Before we get into that, thank you everyone who participated in the "What's your WPM" challenge! Here are the winners for the month!

Winner of the 1-minute Challenge! 🏅

Jatin Sharma Follow

Turning Web Dreams into Reality, Just Like Tony Stark's Vision

@j471n With a 121 WPM with 98% accuracy!

Winner of the 5-minute Challenge! 🏆

Jon GottfriedFollow

Co-founder of Major League Hacking

@jonmarkgo With a 114 WPM with 98% accuracy!

Congratulations! Stay tuned for the next WPM Challenge next week! Now on to the program :)

✨ Dev.to Posts Highlights! ✨

Here is one of the posts I am proud of for this month!

FrancisTRᴅᴇᴠ (っ◔◡◔)っ for Virtual Coffee

Apr 27

Your Developer Journey: Progress or Plateau?

#discuss #community #learning #beginners

Comments 4

4 min read

Made a post under the Virtual Coffee Organization for the first time! This post talks about things to look for if you are still learning as a developer!

Here is the top 3 posts that I have discovered that stood out to me!

Ready-to-use markdown template

Giorgi Kobaidze

Apr 26

15 Essential Sections Every README Needs: Give Your Project What It Deserves

#documentation #opensource #tutorial #development

159

Comments 80

11 min read

@georgekobaidze A guide on making your project stand out by having these essentials for your README!

Art rated below gameplay despite high effort

EmberNoGlow

Apr 22

I created my first game and decided to leave GameDev

#discuss #gamedev #godot #productivity

Comments 25

2 min read

@embernoglow Talked about his first game jam experience and things he has learned about Game Development!

April Fools Challenge Submission ☕️🤡

Konark Sharma

Apr 11

I Couldn’t Afford Earth, So I Built Something Better

#showdev #devchallenge #418challenge #ai

Comments 40

3 min read

@konark_13 A kind of broke boi created a Real Estate application, for the April Fools challenge, where you can buy planets (Great job if anything regardless).

Monthly Discovery 🔍

🔍 Claude Mythos = Ultron?

🔍 Pewdiepie's AI beats ChatGPT.

🔍 A fun one! Destroying a Pay-to-Win Minecraft Server with HTML code.

Accomplishments 🏆

✅ One PR got merged onto Forem!
✅ Created the "Open Sourcerer" series!

Overcoming environment setup for a first PR

FrancisTRᴅᴇᴠ (っ◔◡◔)っ

Apr 13

The Open Sourcerer of Forem: Beyond the UI

#discuss #community #forem #opensource

Comments 43

4 min read

✅ Made Dev Logs on my Full Stack Application!
- https://dev.to/francistrdev/series/38450
✅ Got the "#howtodevto Hero" Exclusive Badge for this post!

FrancisTRᴅᴇᴠ (っ◔◡◔)っ

Mar 20

Get Started on Dev.to! A Beginner's Guide to Engage with the Community! 💡

#discuss #community #beginners #howtodevto

168

Comments 97

6 min read

✅ Got Tag Moderator for the #Discuss Tag! I am now a Complete Moderator!

✅ Now a Full Member of Virtual Coffee!
✅ Continued interacting with the Dev.to community.

Still working on... 🔨

🔨 The last Dev Log for the EasyPollVote App for now. Should be release this week!

Goals for Next Month 🎯

📝 Continue Forem Contribution.

Note: Due to the surges of Pull Request recently, I might have to hold it off due to the unusual amount of Pull Requests on Forem. I heard something about AI Agents causing this, but that is just a theory.

📝 Clean up Resume.
📝 Clean up my portfolio and publishing it on Dev.to for Review.
📝 Continue interacting with the Dev.to community.

Feedback 💬

What else should I do for May?
Any questions/comments/advice or tips for the Monthly Report? Leave a comment below! I would love to hear from you!

Your Developer Journey: Progress or Plateau?

FrancisTRᴅᴇᴠ (っ◔◡◔)っ — Mon, 27 Apr 2026 14:39:05 +0000

Introduction

Everyone has different starting points in their developer journeys. This can range from Game Developers, Web Developers, etc. Regardless of what your career is in tech, it is important for us to keep track of our progress. Most importantly, if we still have the ability to self-learn with discipline.

Tech is always changing and it is important for us to keep ourselves up to date with Tech as well as honing our skills as a developer. There is “no ending” to learning in this field since it is always changing. Although we can’t learn everything, there is a checklist that determines, in my opinion, if we are keeping ourselves up-to-date and still leveling up our skills in the field of choice. Here is the list!

You are making progress if you are…

1. Learning and completing tasks at a healthy pace!

Whether you are completing an online course or obtaining certification from freeCodeCamp, consistency is key! Having a good consistency is important because it will prevent you from being burnt out.

For example, let's say we have Person A, where he does his assignment on the last minute. On the other hand, Person B does his assignments little by little each day. Assuming both turns in the assignment on time, who do you think will be more burnt out? It will be Person B!

Although Person B does little each day, it allows him to learn as-he-go and being able to explain the solution he has with confidence. On the other hand, Person A will be the opposite. Although he turns his assignment on time, it wouldn't retain much information because his goal is turning it in on time instead of learning, which is important!

Are you completing a task just to score points or are you completing a task while learning something new?

2. Trying New Things!

Regardless if you are a Game Developer or a Back-end Engineer, it doesn't hurt to try something new whether it is part of your role or not. Even if you do not have the ability to try a certain thing, you could always write or talk about it to other people in the community you are in!

It is always a good idea to try something out of your comfort zone and be expose to something you don't know about!

3. Having Good Organization Skills!

Organization is huge! It allows you to complete tasks in a timely manner as well as not using up brain power to remember if you miss anything or not.

For a good start, I recommend using a physical planner and bring it to you wherever you go. If you are more digital, I recommend using Notion to make your planner! There are other free tools out there that will allow you to make yourself a personalize planner!

4. Not Comparing Yourself to Others!

Imposter syndrome is a thing in the tech community and it is important to identify them early on. As one say:

Comparing yourself to others is the thief of joy.

Always remember that as long as you are making progress, you are fine. It's also healthy to celebrate your wins each week or each month. That way, you will be proud of the progress you made instead of contemplating and overthinking if you are good enough.

You are good enough!

5. Staying Inform on the latest Tech News

Basically what you are doing right now (being on Dev.to)! You can also stay inform by joining the VirtualCoffee community, Youtube, or other communities you are part off. As a bonus point, you get to meet new people and connect with others in job opportunities!

Conclusion

Your journey is unique and can be inspiring to others! Regardless of your skill level or where you are at, it is important to have self-discipline and being able to make progress. That way, you can show your expertise to others and show that you have use your time wisely. Having 10+ years as a Developer with lots of knowledge is more worth than 10+ years as a Developer with little knowledge.

Remember, the hardest part is not starting something. The hardest part is having discipline to ensure you are making consistent progress to reach your goals.

What do you think? What are some things you do to ensure you are making progress in your development journey! Let us know in the comments!

EasyPollVote [Dev Log #3]

FrancisTRᴅᴇᴠ (っ◔◡◔)っ — Fri, 24 Apr 2026 15:30:43 +0000

Welcome to the Third DEV LOG!

Welcome to the third Dev Log of my full stack application called EasyPollVote (EasyPV)!

What is EasyPollVote (EasyPV)?

A Next.js application where the ultimate goal is having the convenience to create your own poll and share it for others to vote on your custom poll!

That is the whole goal. Do note that this goal may change as time goes on!

The current goal is to learn about the use of Supabase!

Current Progress

Made small progress. Still fixing the issue of the End Date where it is inconsistent. Speaking of timing, I need to fix the PokeAPI, so it can update on the appropriate date.

Anyway, added a Title on the front page :)

Also, thank you @sylwia-lask for the feedback on the responsive issue!

The issue should be fixed now! :D

With the changes made, I did mention I will get into detail on how the front page (Voting your Pokemon form) functionality work. Do note the solution I have is not perfect and I had ChatGPT to assist me on this project. Feedback is greatly appreciated :)

Demo Voting Poll in detail!

I will be discussing on this demo poll. The main functionality is when you start to submit the form. This is the current structure:

{/* Form */ }
<form onSubmit={handleSubmit} className="flex flex-col gap-2 p-10">
    <h1 className="text-center text-xl font-semibold">
        Voting Form
    </h1>
    <input
        name="name"
        placeholder="Name (required)"
        value={formData.name}
        onChange={handleChange}
        className="p-2 border"
        required
    />

    <input
        name="email"
        placeholder="Email (required)"
        value={formData.email}
        onChange={handleChange}
        className="p-2 border"
        required
    />

    {pokemonList.map((pokemon, index) => (
        <label key={index} className="flex items-center gap-2 p-2 border-2 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700">
            <input
                type="radio"
                name="vote"
                value={pokemon.name}
                onChange={handleChange}
            />
            {pokemon.name}
        </label>
    ))}

    <button disabled={loading} className="bg-blue-500 text-white p-2">
        Submit
    </button>

    {message && <p>{message}</p>}
</form>

You may notice the two big variables: handleChange and handleSubmit.

For handleChange, nothing really big is going on. It is basically updating the formData variable based on the user's input. So when the user click submit, the formData will be sent to the database.

const [formData, setFormData] = useState({
    name: "",
    email: "",
    vote: "",
    // Not uploaded to the Database. This is used for route.ts switch case
    action: "Demo",
});


...


// Handles anything Input related on the Voting Demo Form
const handleChange = (e: any) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
};

For the handleSubmit, this is where the main functionality takes place!

// When the Form is submitted
const handleSubmit = async (e: any) => {
    e.preventDefault();
    setMessage("");

    // If the user did not vote a specific pokemon, error message is shown
    if (!formData.vote) {
        setMessage("Error: Please select a Pokémon to vote for.");
        return;
    }

    // If all inputs are entered, perform a POST request in the route.ts where we head to the "Demo" switch statement
    const res = await fetch("/api/vote", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify({
            name: formData.name,
            email: formData.email,
            vote: formData.vote,
            action: "Demo", // Not uploaded to the Database. This is used for route.ts switch case
        }),
    });

    const data = await res.json();

    if (!res.ok) {
        setMessage(data?.error || "Error: Form submission failed.");
    } else {
        setMessage("Vote submitted successfully!");
        setFormData({
            name: "",
            email: "",
            vote: "",
            action: "Demo", // Not uploaded to the Database. This is used for route.ts switch case
        });
    }
};

When the user clicks "Submit", it checks to see if the user selected their vote. If not, it prompts the error to the user that they need to vote:

// If the user did not vote a specific pokemon, error message is shown
if (!formData.vote) {
    setMessage("Error: Please select a Pokémon to vote for.");
    return;
}

If the check is all good, it performs a POST request on /api/vote and sending it to the database. After that, the form clears out:

// If all inputs are entered, perform a POST request in the route.ts where we head to the "Demo" switch statement
const res = await fetch("/api/vote", {
    method: "POST",
    headers: {
        "Content-Type": "application/json",
    },
    body: JSON.stringify({
        name: formData.name,
        email: formData.email,
        vote: formData.vote,
        action: "Demo", // Not uploaded to the Database. This is used for route.ts switch case
    }),
});

const data = await res.json();

if (!res.ok) {
    setMessage(data?.error || "Error: Form submission failed.");
} else {
    setMessage("Vote submitted successfully!");
    setFormData({
        name: "",
        email: "",
        vote: "",
        action: "Demo", // Not uploaded to the Database. This is used for route.ts switch case
    });
}

That's pretty much what's happening on the client side. You may also notice this part:

action: "Demo", // Not uploaded to the Database. This is used for route.ts switch case

In the api/vote folder, I have multiple PUT requests in where inside of the PUT request, there is a switch case. I won't be able to go into detail now, but one thing to note that it is used to identify which code to execute. In this case, it's "Demo":

case "Demo": {
    const { name, email, vote } = body;

    if (!name || !email || !vote) {
        return NextResponse.json(
            { error: "Missing name, email, or vote" },
            { status: 400 }
        );
    }

    // Insert the row that contains their name, email, and the vote they voted for
    const { error } = await supabase
        .from("VoteDemo")
        .insert([
            {
                Name: name,
                Email: email,
                Vote: vote,
            },
        ]);

    if (error) {
        console.log("Supabase insert error (VoteDemo):", error);

        return NextResponse.json(
            { error: error.message },
            { status: 500 }
        );
    }

    return NextResponse.json({
        success: true,
        message: "Vote saved successfully in VoteDemo",
    });
}

Simply put, it does an insert statement to the "VoteDemo" table of the Name, Email, and Vote (yes @bingkahu, I saw your many votes. on that database).

That is pretty much it for that page. Next week, I will discuss more detail on how the Custom Polls work!

Official Website

If you would love to see the project yourself, feel free to check out the link here: https://easypollvote.vercel.app

I recommend to put a fake email and a fake name if you are using the app. Everything works as intended! Check it out and feedback is greatly appreciated!

Any questions/comments/feedback? I would love to hear from you!

Note: This post is monitored by the University and therefore the repository is currently private until the early Summer!

Unpopular Opinion: Do not use OpenClaw...not yet.

FrancisTRᴅᴇᴠ (っ◔◡◔)っ — Tue, 21 Apr 2026 23:35:31 +0000

This is a submission for the OpenClaw Writing Challenge

Context

This is going to be short post. The goal is for me is understanding OpenClaw and to see why people use OpenClaw. I did quick research on OpenClaw and I will detail on what I find as a bare bone and why you should not consider OpenClaw yet.

Disclaimer: Take this post as a grain of salt since there is a very good chance that there is something I did not mention about OpenClaw whether it is good or bad since this is researched on a surface level and is based on what I have seen so far.

With that said, to get things out of the way really quick:

I never used OpenClaw before.

I know this sounds contradictory since you read the title to not use OpenClaw from a guy who never uses OpenClaw.

I don't hate it. From what I have seen, I think OpenClaw is a great tool for developers and is accessible for developers getting into AI Agents. However, seeing it rise quite quickly into popularity, it does raise concerns for me and I will tell you why. First, we need to know what OpenClaw is.

Okay, What is OpenClaw?

Based on their official website, it's an AI that does things. In other words, it's literally Jarvis from Iron Man. It can read/write emails for you, open browsers, build and use your GitHub to host a website...pretty much anything a human can do using a computer. If you can do a task on a computer, OpenClaw can do it.

On paper, this sounds legendary. An AI agent that can do anything?

Heck Yea!

Gone with the days where we use GitHub Copilot to do programming tasks.

However, if you think about it, it sounds very scary since OpenClaw can do anything. Even though it is scary, there are positives that I can give credit to OpenClaw.

Good Side of OpenClaw

Here are some good things I heard about OpenClaw!

1. Open Source!

From the name itself "OpenClaw", one would assume it is Open Sourced, which it is! Their repository has over 300k Stars and a lot of people are contributing to it. It's great to see it open source because it gives people transparency, especially when it's an AI agent that can do anything. Puts away the stress if you are worried about a program doing malicious things. Feel free to visit their repository for more details!

openclaw / openclaw

Your own personal AI assistant. Any OS. Any Platform. The lobster way. 🦞

🦞 OpenClaw — Personal AI Assistant

EXFOLIATE! EXFOLIATE!

OpenClaw is a personal AI assistant you run on your own devices It answers you on the channels you already use. It can speak and listen on macOS/iOS/Android, and can render a live Canvas you control. The Gateway is just the control plane — the product is the assistant.

If you want a personal, single-user assistant that feels local, fast, and always-on, this is it.

Supported channels include: WhatsApp, Telegram, Slack, Discord, Google Chat, Signal, iMessage, IRC, Microsoft Teams, Matrix, Feishu, LINE, Mattermost, Nextcloud Talk, Nostr, Synology Chat, Tlon, Twitch, Zalo, Zalo Personal, WeChat, QQ, WebChat.

Website · Docs · Vision · DeepWiki · Getting Started · Updating · Showcase · FAQ · Onboarding · Nix · Docker · Discord

New install? Start here: Getting started

Preferred setup: run openclaw onboard in your terminal OpenClaw Onboard guides you step by step through…

View on GitHub

2. Easy to set up!

With being open source, they also have documentation for setting up OpenClaw! It's free, can host it locally, and you are open to use OpenRouter to add your API keys into OpenClaw, so you can manage your token usage.

3. Partnered with VirusTotal for Security!

On their page, they mentioned that they recently partnered with VirusTotal for security. They mention the importance of it, but the thing that is important is sensitive information, which they covered on their blog:

Feel free to read more about it here: https://openclaw.ai/blog/virustotal-partnership

What's the issue?

If OpenClaw is in a good spot at the moment, what's the issue?

The issue isn't the progress they are making. Don't get me wrong, right now, they are making good progress on fixing the issues, it's open source, and taking security seriously. It comes down to these things in my opinion that stops me from using OpenClaw.

1. An AI that does...anything

When it comes into being a programmer, you will have to take some risks such as npm installing packages to your computer and other things you need. I am conformable with this since I am aware of what I am installing.

I am currently not conformable with an AI agent doing the tasks and doing things in the background that I am not aware of. I like to be aware of things of what the AI agent is doing. Now, you may be asking:

What's different from GitHub Copilot CLI?

I might not be using it to the fullest potential, but the way I used it, it is more sand boxed. By that, I mean that I used the CLI in my Visual Studio Code only. It's more focused and If I asked anything, the minimum it will do is asking permission to search documentation online. I like this simplicity and aware of what the agent is doing and asking for permission every time.

When you have OpenClaw, you can ask to do a task, but it will do whatever it takes to complete that task. Since it is just "out of the open" on your computer, you have to be careful on how you prompt something to the AI Agent, which doesn't sit right with me since I am quite picky on how I word things and making sure the AI agent understand my requests.

You could argue that I should buy a Mac Mini (which seems to be the trend) to use OpenClaw by itself. But..why though?...

It's too much money and It's not my forte to buy a whole new computer just to run an AI agent for that purpose.

2. How much Tokens do you have?

Even running OpenClaw with Ollama, it still takes a lot of space just to run an AI agent. Typically, people will use AI on the cloud for this case which burns tokens...a lot.

I recently asked the Virtual Coffee Community that me and @jarvisscript are in. One person spoke their experience using OpenClaw where that person stated:

I’m using the $20/month ChatGPT subscription to run OpenClaw, and having it use my $200/month Claude subscription to run Claude Code. I definitely wouldn’t pay that much just for OpenClaw, but I already have the Claude subscription for work and OpenClaw is providing me with > $20/month in value so it’s worth it for me to buy the ChatGPT subscription.

If you are okay spending money to get the best out of OpenClaw, that's totally fine. In my opinion, I like to use free tools and ensuring the expectation of using that tool is worth it.

3. Too early (for me) to trust OpenClaw

Just because it became successful in a short amount of time, it doesn't mean that it is immune for it to fail. You can probably name a good amount of companies and projects being successful early on and quite quickly too, but it resulted in failure for many reasons. I always have this quote in mind:

The quicker the rises, the harder the fall.

I am not saying OpenClaw will fail, I am saying be cautious about the tools that was just release to the public before using it. That tends to be with me whenever I am using any services and tools.

Imagine this, let's say a company rises really quickly and that so many people sign up to use their services. Because of the rise of quick popularity, hackers will see this as an opportunity. If something really bad happens (like a databreach), not only the company will have a bad reputation, but MILLIONS OF DATA will be leak.

This is the worst case scenario. The reason I brought this up is because of what happen to FTX that made me think of this scenario.

Note: FTX did not have a data breach. But the "feeling" of the event that happened is the same (at least for me).

What is FTX and why is it important?

If you don't know, FTX is a crypto exchange that went bankrupt because of fraud. In summary, they lied on their financial report that they claim that they have a lot of money, but in reality, they were in severe debt. As a result, the company went bankrupt and MILLIONS of people lost a lot of money as a result.

Keep in mind that FTX is not a "random" company. It is quite well sponsored and a lot of Online Influencers promote it (even the mainstream media). There were a lot of trust in the community and believe that FTX will keep their money safe, which was not the case.

I hope you can understand where I am coming from. If you would like to learn more, Coffeezilla made a video on why FTX collapsed in detail:

Sure, the example I gave did not align to the FTX incident. What I am trying to say is that in this context for OpenClaw having a vulnerability that affects millions, it is quite scary to think (for an AI agent that does ANYTHING).

I am not stopping you from using OpenClaw if you believe that it hits all the green flags you expect such as being trustworthy, transparency, and such (which seems to be the case with OpenClaw!).

Again, I am saying that the tool is too early for me to use it and I would rather wait a bit before using it to see how it goes, especially in the state of the AI bubble.

Conclusion

Overall, I wouldn't recommend using OpenClaw just yet. I recommend waiting for a bit to see where it goes. Typically, for me, I wait for a year or so to see how far it has gotten. If everything is all good, then I would consider using it.

However, if you are a type of person where you are really bold and want to explore the unknown with zero anxiety, feel free to use it at your own risk. It's just that it doesn't sit right with me having an AI agent that is doing the work with minimum supervision. It's too much of a hassle for me.

In my opinion, I won't be using OpenClaw anytime soon unless if I were to have a lot of money just to buy a PC that only runs OpenClaw. The selling point of where an AI does anything didn't sit right with me. On paper, it sounds great. However, the more you think about it, the more scarier it gets that we are getting close to getting ourselves a real life Ultron. I would prefer to have an AI agent to be more sand boxed then letting loose into the wild and having the possibility that one miscommunication in the prompt will allow OpenClaw to delete System32.

Then again, I am just a guy on Dev.to :)

I am wondering what you think about OpenClaw. What's your experience and do you recommend using OpenClaw? Any thoughts? Feel free to let me know in the comments!

EasyPollVote [Dev Log #2]

FrancisTRᴅᴇᴠ (っ◔◡◔)っ — Fri, 17 Apr 2026 19:19:32 +0000

Welcome to the Second DEV LOG!

Welcome to the second Dev Log of my full stack application called EasyPollVote (EasyPV)!

What is EasyPollVote (EasyPV)?

A Next.js application where the ultimate goal is having the convenience to create your own poll and share it for others to vote on your custom poll!

That is the whole goal. Do note that this goal may change as time goes on!

The current goal is to learn about the use of Supabase!

Current Progress

Made some UI changes in the Front Page!

It is smaller and compact since I didn’t like where you have to scroll down. The only time you have to scroll down is when your screen is small or you are in mobile!

The Poll Demo of choosing your favorite Pokémon is no longer hard coded! It was seen that you guys want to have more options (more that in a bit) since @sylwia-lask want to vote for Umbreon! 😊

I look into the PokeAPI since they provided all information on Pokemon such as images, colors, names, etc.

For the Demo, I made it where it uses the PokeAPI to fetch the Pokémon data that includes the name, image, and primary color of the Pokémon. Since the demo only allows the user to choose two options, we get two random Pokémons.

type Pokemon = {
    name: string;
    sprite: string;
    color: string;
};

const TOTAL_POKEMON = 1010;

...

const [id1, id2] = getWeeklyPokemonIds();

const fetchOne = async (id: number): Promise<Pokemon> => {
   const [pokemonRes, speciesRes] = await Promise.all([
      fetch(`https://pokeapi.co/api/v2/pokemon/${id}`),
      fetch(`https://pokeapi.co/api/v2/pokemon-species/${id}`),
   ]);

   const [pokemonData, speciesData] = await Promise.all([
      pokemonRes.json(),
      speciesRes.json(),
   ]);

   return {
      name: pokemonData.name,
      sprite: pokemonData.sprites.front_default,
      color: speciesData.color.name,
   };
};

const pokemonResults = await Promise.all([
   fetchOne(id1),
   fetchOne(id2),
]);

setPokemonList(pokemonResults);

The Poll randomizes the Pokémon each week, which gives the user fresh choices about choosing their favorite!

function getWeekNumber() {
    const now = new Date();
    const start = new Date(now.getFullYear(), 0, 0);

    const diff = now.getTime() - start.getTime();
    const oneDay = 1000 * 60 * 60 * 24;
    const dayOfYear = Math.floor(diff / oneDay);

    return Math.floor(dayOfYear / 7);
}

function getWeeklyPokemonIds(): [number, number] {
    const week = getWeekNumber();

    const id1 = (week % TOTAL_POKEMON) + 1;
    const id2 = ((week * 7 + 13) % TOTAL_POKEMON) + 1;

    return id1 === id2 ? [id1, (id2 % TOTAL_POKEMON) + 1] : [id1, id2];
}

Note: The Pokémon randomize each week has not been fully tested. We are about to find out later in the weekend if it does change!

Note: There is no functionality where it wipes the data in the database, though it will be implemented in the future

That is all for the DEMO Poll! But wait, there’s more!!

You may notice that there is a link where you can create your own Poll!

When you go to that page, it gives you a form to create your own Poll by providing:

Poll Title
The Poll End date (If the poll reaches the end date, the poll will end and the button to submit your vote will be hidden)
Poll Options (You can have up to 4 options!)

If you want to create a poll, now you can! 😊

Once you create the poll, you will see the message under the button that gives you a link to share to others on voting on your poll.

Poll created successfully! Share this link: https://easypollvote.vercel.app/poll/53

When you click the link, the poll format is similar to the Demo as shown below.

Note: There are currently no restrictions on voting more than once. That feature is in my TODO list and will be implemented in the future.

Note: The end date has not been tested. Again, we are about to find out ultimately if the flow does as intended. Do note it is still a work in progress, so expect any bugs. Please report the bugs in the comments if you encounter anything unusual!

Without going to detail, the custom poll actually takes two tables.

We have "Poll" table, which consist of:

ID (Primary Key)
created_at (timestamptz)
PollTitle (string)
Poll_EndDate (timestamptz)
Poll_Ended (bool) (This determines if the end date of the poll has reached)

We also have "VoteOptions" table, which consist of:

ID (Primary Key)
poll_id (Primary and Foreign Key of the Poll table's ID)
option_text (string)
Votes (Int)
option_color (string)

Next time, I will be talking about in detail on how the flow works for the demo and the custom poll!

Official Website

If you would love to see the project yourself, feel free to check out the link here: https://easypollvote.vercel.app

I recommend to put a fake email and a fake name if you are using the app. Everything works as intended! Check it out and feedback is greatly appreciated!

If you like to vote on my custom poll on who you want to be your mentor. Would you choose @ben, @jess, @jonmarkgo or @theycallmeswift?, feel free to vote on my poll here: https://easypollvote.vercel.app/poll/53

Any questions/comments/feedback? I would love to hear from you!

Note: This post is monitored by the University and therefore the repository is currently private until the early Summer!

The Open Sourcerer of Forem: Beyond the UI

FrancisTRᴅᴇᴠ (っ◔◡◔)っ — Mon, 13 Apr 2026 21:42:25 +0000

Introducing a New Series "The Open Sourcerer of Forem"!

I have been wanting to get into contributing to Open Source for some time now. However, it was difficult for me because it is quite intimidating.

Not only you have to contribute to a Repository with Hundreds of people, but you also have to set up your environment which I believe is the hardest part into getting started on contributing in general. This process requires the user to read documentation, fix errors along the way, etc.

Fortunately, after posting the article on how I used Google Gemini in my Winning Google Gemini: Writing Challenge, I was able to start actual contribution and I was grateful that one of my Pull Requests got merge for the first time! I hope you guys enjoy this series :D

Check out the post that start it all:

Built with Google Gemini: Writing Challenge

FrancisTRᴅᴇᴠ (っ◔◡◔)っ

Mar 3

I used Google Gemini for the First Time. A Deep Analysis of my Experience so far! ✨

#devchallenge #geminireflections #gemini #bash

Comments 14

11 min read

Welcome Sourcerers!

Welcome to the series where I tell a tale of an Open Sourcerer of Forem (which is me!) made contribution to the Official Forem Repository! I will be sharing the issue, the Pull Request, and what I have learned (which you may find it useful if you want to contribute)!

The Issue

There is an issue named "UI Issue" by @konark_13:

UI Issue #22902

Konarksharma13 posted on Mar 05, 2026

Describe the bug

While browsing Dev.to, I noticed a UI issue where two layouts appear to overlap, resulting in a combined and messy layout. This causes visual misalignment on the page and affects readability.

To Reproduce

Go to https://dev.to/devteam/welcome-thread-v367-33cn
Navigate to the comment.
Hover over the likes over the comment likes.
Notice that two layout components overlap and merge into an inconsistent layout

Expected behavior

The layout should render correctly without overlapping elements. Each component should maintain its intended structure and spacing.

Screenshots

https://github.com/user-attachments/assets/dcb6f2bb-8579-49d2-babb-c3c2f53ed464

Desktop (please complete the following information):

OS, version: Mac
Browser, version: Brave

Smartphone (please complete the following information):

Not tested on mobile.

Additional context I regularly use Dev.to and noticed this while browsing. It may be a minor UI issue, but I thought it would be helpful to report it so it can be reviewed if necessary.

View on GitHub

This issue states that the UI z-index is out of place, specifically on the multiple reactions. For example, you notice that this UI z-index is incorrect:

This is my first issue I tackle as an Open Source Contributor. I decide to tackle this since it allows me to get a sense of the Code-Base in general.

The first steps I did was to find the ClassName or ID of the element responsible for the issue. That way, I can search up the name in Visual Studio Code and look for that name in a CSS file.

When I began investigating, I found the ClassName responsible, which is crayons-article-actions.

On my Visual Studio Code, I search the name and it seems to be in the SCSS file article.SCSS. I change the Z-index to the highest number and began making my Pull Request from there.

The Pull Request

Here is the Pull Request I made to solve this issue:

Z-Index Increase for the Emoji UI #22905

FrancisTRAlt posted on Mar 05, 2026

What type of PR is this? (check all applicable)

[ ] Refactor
[ ] Feature
[x] Bug Fix
[ ] Optimization
[ ] Documentation Update

Description

Fixed the UI issue on the Emoji where you can see the "Like" button over the list of emojis as shown below:

Before:

After:

This also happen in the GIF. It is fixed now:

Before:

After:

Related Tickets & Documents

Related Issue #22902
Closes #22902

QA Instructions, Screenshots, Recordings

1. Go on any post on Dev.to.

2. Inspect the element page and look for the class name "crayons-article-actions print-hidden".

3. Change the CSS.

Instead of: z-index: var(z--sticky)

It should be: z-index: 9999

4. Comment out the z-index for this class below:

5. Then scroll and it should be the highest z-index of the page.

What gif best describes this PR or how it makes you feel?

View on GitHub

All it does is increase the "z-index" to 9999. It is worth noting that this is not a "great" solution, but it does solve the issue for now.

Later on, @ben refine this solution:

// Ensure this is above comments but below dropdowns/modals/popovers (like billboards)

z-index: calc(var(--z-dropdown) - 1);

Ultimately, the issue was fixed as shown below:

What I learned

Here is what I learned after working on this issue!

1) Humble Beginning

Before this PR, I made my first Pull Request, which did not get merged. I realized that I was creating a Pull Request that I believe that is needed and not what Forem needs. There is no shame into that and sometimes you fumble before you can succeed. Not every Pull Request will get merged and that's ok!

When contributing to any open source, understand their needs and accomplish it. To start off, look at their issues and find an issue that seems doable to tackle. It can be as simple as fixing the UI, or changing documentation. Whatever it may be, make sure it aligns to their needs!

2) Slow Down

Even after the Pull request got merge, I had a conversation in that issue with @konark_13 about it. I feel like it went too quickly since I was so eager into completing that issue.

According to the Forem's documentation, you have at least 2 weeks to work on the issue. That should give you a lot of time. It is also important to document your work as well and keeping it updated, so that the Repository maintainer will know that you are still working on the issue.

Overall, communication is important to any collaboration! Apologies @konark_13 if I was tackling this issue too quickly and not giving you a chance!

I want to become an Open Sourcerer of Forem! Where do I start?

Everything you need is on the Official Forem GitHub Repository!

forem / forem

For empowering community 🌱

Forem 🌱

For Empowering Community

Welcome to the Forem codebase, the platform that powers dev.to. We are so excited to have you. With your help, we can build out Forem’s usability, scalability, and stability to better serve our communities.

What is Forem?

Forem is open source software for building communities. Communities for your peers, customers, fanbases, families, friends, and any other time and space where people need to come together to be part of a collective See our announcement post for a high-level overview of what Forem is.

dev.to (or just DEV) is hosted by Forem. It is a community of software developers who write articles, take part in discussions, and build their professional profiles. We value supportive and constructive dialogue in the pursuit of great code and career growth for all members. The ecosystem spans from beginner to advanced developers, and all are welcome to find their place…

View on GitHub

I suggest to setup your environment and making sure everything is working. Ultimately, you are trying to get the localhost to run!

You made it to the end!

You have made it to the end Traveler! Thank you for reading this chapter and stay tuned for the next chapter!

Questions or Comments? I would love to hear your thoughts about this tale of The Open Sourcerer of Forem!

DEV Community: FrancisTRᴅᴇᴠ (っ◔◡◔)っ

🗓️ Monthly Dev Report: May 2026

✨ Dev.to Posts Highlights! ✨

Here is one of the posts I am proud of for this month!

Here is the top 3 posts that I have discovered that stood out to me!

Monthly Discovery 🔍

Accomplishments 🏆

Anmol BaranwalFollow

Mikey DorjeFollow

Still working on... 🔨

Goals for Next Month 🎯

Feedback 💬

Should you use Gemma 4 for your Development? A Multiversal Analysis to Determine if Gemma 4 is Right for You!

Table of Contents

Introduction

Setting up Gemma 4 using Ollama

Elmar ChavezFollow

Installing Ollama and Gemma 4

Trying out Gemma 4

Running Gemma 4 Offline

Elmar's Verdict on Gemma 4

Using Gemma 4 as a Confused Developer

Konark SharmaFollow

The Strawberry Test

The Tic Tac Toe Rotation Test

The Broken Cup Test

Konark's Verdict on Gemma 4

Gemma 4 feels good for:

Gemini feels better for:

Building a Prototype using Gemma 4

Julien AvezouFollow

Results of Gemma 4 Vs. GPT 5.4

Technical Depth

Architecture & System Thinking

Julien's Verdict on Gemma 4

Using Gemma 4 as an AI-Agent

FrancisTRᴅᴇᴠ (っ◔◡◔)っFollow

Gemma 4 is Strict

Please Google I need this. Gemma 4 is kind of Looping Itself

Francis' Verdict on Gemma 4

Summary

1. Convenience

2. Performance

3. Context Output

4. Role as an AI-Agent

Thank you for Reading!

Virtual Coffee Follow

The DEVengers Follow

FrancisTRᴅᴇᴠ (っ◔◡◔)っFollow

Julien AvezouFollow

Konark SharmaFollow

Elmar ChavezFollow

Honesty is the best Policy. The Secret Invasion of the use of AI on DEV

As a DEVenger, I am contributing my part to enforce the rule to reduce down the number of fully AI-generated content and ensuring everyone is following that rule of adding the disclaimer that the post uses AI in some degree.

What can you do as a DEV?

Welcome to the DEVengers Organization! A group of extraordinary individuals who have shaped Dev.to like no other! 🚀

Introduction

Content to Expect

How do I join?

Thanks!

What is your WPM (Words per Minute)? #2

Current Dev.to World Record Holder

1-minute Challenge! 🏅

Jatin Sharma Follow

5-minute Challenge! 🏆

Jon GottfriedFollow

Submission Instruction

Good Luck! Submission is closed by May 22!

EasyPollVote [Dev Log #4]

Welcome to the Forth DEV LOG!

What is EasyPollVote (EasyPV)?

Current Progress

Part 1

"addOption" and "removeOption"

"handleOptionChange" and "handleColorChange"

"handleEndDateChange"

"setTitle"

"handleSubmit"

Part 2

Official Website