Forem: Zaur Ibrahimov

PomoFox: The Pomodoro Timer That Does More Than Just Time

Zaur Ibrahimov — Mon, 03 Feb 2025 12:32:10 +0000

Have you ever wondered if a Pomodoro timer could be more than just a countdown? I did, and here’s how I brought that idea to life…

A couple of weeks ago, I set out to create an exciting open-source project. Since the Pomodoro technique is part of my daily routine, I thought, “Why not build a Pomodoro timer app and share it on GitHub?”

But after checking out the existing apps, I noticed they all looked the same—plain interface, timer in the center, and that’s pretty much it. So I asked myself, what if my app could surprise users during each break with something a little more… unconventional?

Imagine this:

A prompt to do 10 push-ups.
A random "Would You Rather?" question.
AI giving you a sarcastic roast.
A pointless yet hilarious fact.
A website that melts like ice cream.
The whole page flipping upside down.
A random riddle to solve.
And for those long late-night work sessions, Ana de Armas from Blade Runner 2049 appears in the background, saying, “What a day… You look lonely, I can fix that.” 😆

In essence: fun, delightful chaos.

I got to work right away, designing the app in a retro pixel-art style and naming it PomoFox. Fortunately, the domain pomofox.com was free, so I snatched it up. I also created a cute fox mascot 🦊, added a Lofi music player, light/dark mode pixel art backgrounds, customizable timers, and a fun logo.

But as I progressed, I realized the app had shifted from chaotic to more of an aesthetic experience. And that’s when I decided to bring back the chaos—with a game! 🎮

Since “Pomodoro” means “tomato” in Italian and my app is PomoFox (Pomo = 🍅, Fox = 🦊), I created a game where a fox runs through the forest, dodging sword-wielding tomatoes 🍅⚔️. (I mean, it just made sense, right?)

I had never built a game before, but I dove in, learned along the way, and shipped it. You can play the game here: game.pomofox.com.

As a fan of open-source, I’ve also uploaded the code to GitHub: github.com/zibrahimov/fox-runner.

I shared the app on ProductHunt and Reddit, and the response has been fantastic 🚀. All of this was accomplished in just two weeks.

Moving forward, I’ll be adding even more creative features (and probably some more quirky 2D games) whenever inspiration hits. If you have any wild ideas for PomoFox, feel free to share them in the comments! 🚀🦊

What do you think of the project?

And if you’re new to the Pomodoro Technique, check out my blog post where I dive into how it works and my personal experience with it!
My Experience with Pomodoro Technique

Thinking of Creating an NPM Package – Any Feedback or Ideas?

Zaur Ibrahimov — Wed, 01 Jan 2025 19:10:46 +0000

Hey everyone, 👋

I’ve been working on a few utilities and thought it might be a good idea to bundle them into an NPM package to share with the community. I’m looking to create something that makes developers' lives a bit easier by providing simple, reusable code for common tasks.

Before diving into the development process, I wanted to get some feedback from you all:

What are some types of utilities you wish were easier to find as an NPM package?
What problems do you commonly face that could be solved with a small package?
What would make you more likely to use or recommend such a package?

Any thoughts, feedback, or ideas are much appreciated! 🙌

Zustand - 🐻 Bear necessities for state management in React

Zaur Ibrahimov — Mon, 09 Dec 2024 16:13:53 +0000

State management has always been an important part of modern applications. Over the years, various state management tools and libraries have emerged to help developers handle this complexity. First, Redux changed the game in larger applications with complex state logic. Especially back in the day, it was going hand in hand with React. But it has a heavy boilerplate and a steeper learning curve.

Then we had MobX, a state management solution based on reactive programming principles. It requires less boilerplate than Redux, automatically tracks state, and updates components. But it also had concepts such as observables can be difficult for some developers.

Then Facebook introduced the Context API which requires no additional libraries and integrates well with other React features. But it’s also not handy with complex state logic.

Examples can go on and on. So let’s cut to the chase.

In this article, I want to talk about a new state management library that has been gaining popularity recently - Zustand. I use it in my work and now we’ll take a closer look at Zustand and try to understand how it can simplify state management in React applications.

Let’s begin!

What is Zustand?

According to their official documentation:

A small, fast, and scalable bearbones state management solution. Zustand has a comfy API based on hooks. It isn't boilerplatey or opinionated, but has enough convention to be explicit and flux-like.

Zustand (which means "state" in German) is a minimalistic state management library for React and other JavaScript-based applications. It provides a way to create a global state without the added complexity of larger solutions, such as Redux or MobX. Zustand's API is straightforward and aims to be more React-ish, making it easier for developers familiar with React to pick up and use.

Here are some key features of Zustand:

- Simplicity: Zustand offers a simple API, which means a shorter learning curve, especially for those familiar with React's useState and useContext.
- No Redux Boilerplate: Unlike Redux, Zustand does away with the need for actions, types, reducers, and middleware for most use cases.
- Flexibility: It doesn't tie you to React, making it usable with other libraries or even vanilla JavaScript.
- Middlewares: Allows for middlewares to intercept actions and state changes.
- Devtools: Supports integration with React DevTools for a better debugging experience.

Getting Started with Zustand

To get started with Zustand, you’ll need to install it via npm or
yarn:

# NPM
npm install zustand

# Yarn
yarn add zustand

And here's a quick example to give you an idea of how it works:

import create from 'zustand';

// Create a store
const useStore = create(set => ({
  count: 0,
  increase: () => set(state => ({ count: state.count + 1 })),
  decrease: () => set(state => ({ count: state.count - 1 }))
}));

// React component
function Counter() {
  const { count, increase, decrease } = useStore();

  return (
    <div>
      <button onClick={decrease}>-</button>
      <span>{count}</span>
      <button onClick={increase}>+</button>
    </div>
  );
}

In the example above, create from Zustand is used to define a store with state and actions. This store is then utilized within a React component via the custom hook, useStore. It's simply a hook and you can use it anywhere, without the need for providers.

Pretty simple!

Conclusion

Zustand provides a lightweight and powerful alternative to heavier state management solutions. It’s especially great for projects that need a simple global state.

VSCode Extension to Simplify Code Collaboration and Sharing

Zaur Ibrahimov — Thu, 05 Dec 2024 21:57:41 +0000

Hey Devs! 👋

As a developer, I’ve always found sharing and discussing code to be surprisingly difficult. Whether it’s trying to explain feedback over Slack or sharing code snippets, it feels like trying to describe a painting over the phone—frustrating, time-consuming, and often unclear.

So, I built CoRemote to make this process simpler. It’s a tool designed to bring code-related discussions right where they belong: in your IDE.

What Problem Does It Solve and How It Works 🛠️

Sharing specific code blocks and discussing them can be really frustrating. You’re often left with three bad options:

Hop on a meeting to explain it in person.
Take a screenshot and try to describe the issue in the text.
Record a video and hope the recipient watches it in the right context.

CoRemote fixes this by letting you:

Start discussions directly on specific lines of code—perfect for detailed feedback.

Use CoRemote to quickly start conversations right where the action happens, whether it's a bug fix or a feature request. This feature allows you to give and receive feedback instantly, keeping the discussion highly relevant and contextual.

Share deep links to exact code locations—because context is everything.

CoRemote lets you generate and share deep links to exact lines of code, ensuring that everyone involved is on the same page, with no confusion about where to look. This makes referencing code snippets faster and easier than ever.

View Demo

I just launched CoRemote in beta, and I’d love for you to give it a try. Feedback is key at this stage—it’s how I’ll make it even better for you.

👉 Check it out here!

Let’s make code collaboration smooth and fun again! 🙌