DEV Community: Joel Bello

🚀 Ignauth: Simplify Bearer Token Extraction in Your Dev Workflow

Joel Bello — Mon, 04 Aug 2025 18:04:36 +0000

Tired of digging through network requests just to find your Bearer token during development or API testing?

Meet Ignauth — a free, open-source Chrome extension that makes copying auth tokens stupidly simple.

🔑 What Does It Do?

Ignauth helps you quickly extract and copy the Bearer token used in HTTP headers, right from your browser. No more digging into dev tools every time.

🧩 Key Features

⚡ 1-Click Token Copying — Instantly grab the Bearer token from network requests.
🧼 Minimal Interface — Just what you need. No clutter.
🧠 Dev-First Design — Perfect for API testing, debugging, or reproducing auth issues.
🌍 Browser-Friendly — Built as a Chrome extension, optimized for developers.
🛠️ Open Source — Fork it. Break it. Improve it.

👨‍💻 Who's It For?

🧪 Developers testing APIs in tools like Postman, Insomnia, or cURL.
🔍 QA Engineers verifying authentication flows.
🛡️ Tech-Savvy Users working with Bearer-protected endpoints.

📦 Install It Now

👉 Get Ignauth on the Chrome Web Store

Cut the noise. Copy your token. Get back to coding.

🌀 Say Hello to `ChousyEach` – The Cleanest Way to Render Lists in React

Joel Bello — Sat, 07 Jun 2025 13:03:08 +0000

We’ve all been there: you're mapping over a list in React, juggling map(), conditionals, key props, and selection logic. Suddenly, your elegant UI turns into spaghetti 🍝.

Enter ChousyEach – the declarative, expressive, Rails-inspired way to iterate over arrays in JSX, now part of react-chousy!

✅ Basic Usage

import { ChousyEach } from 'react-chousy';

const fruits = ['🍎', '🍌', '🍇'];

<ChousyEach of={fruits}>
  {(fruit, idx) => <span>{fruit}</span>}
</ChousyEach>

Simple, clean, and readable. No more cluttered .map() + arrow + return + fragment soup.

🎯 Track Selection State (Built-In!)

Want to highlight the selected item? Just add trackSelection.

<ChousyEach of={fruits} trackSelection>
  {(fruit, idx, { selectedIdx, setSelectedIdx }) => (
    <button
      className={selectedIdx === idx ? 'font-bold text-blue-600' : 'text-gray-600'}
      onClick={() => setSelectedIdx(idx)}
    >
      {fruit}
    </button>
  )}
</ChousyEach>

Yes, it’s that simple.

📬 Listen for Changes

Need to react when the list changes?

<ChousyEach
  of={fruits}
  onChange={(list) => console.log('List changed:', list)}
>
  {(fruit) => <span>{fruit}</span>}
</ChousyEach>

Perfect for side effects, analytics, syncing, or fun debug logs.

🧭 Auto-highlight your nav like a pro

const menu = [
  { label: 'Home', path: '/' },
  { label: 'About', path: '/about' },
  { label: 'Contact', path: '/contact' }
];

<ChousyEach
  of={menu}
  navHighlight
  getPath={item => item.path}
  currentPath={window.location.pathname}
>
  {(item, idx, { isActive }) => (
    <a
      href={item.path}
      className={isActive ? 'text-blue-600 font-bold' : 'text-gray-500'}
    >
      {item.label}
    </a>
  )}
</ChousyEach>

The navHighlight + currentPath combo makes building active navbars ✨ effortless.

🚀 Why use `ChousyEach`?

⛅️ Cleaner than .map()
🎯 Selection state out-of-the-box
🧠 Smart path highlighting
🧪 Safe, typed, and testable
⚡️ Lightweight (like 300 bytes tiny)

📦 Get Started

npm install react-chousy

import { ChousyEach } from 'react-chousy';

🧠 Pro Tip

Use ChousyEach with other react-chousy components like ConditionalRender and SwitchCaseRender to level up your declarative UI game.

💬 What do you think?

Are you still writing array.map() in 2025? 😅

Drop your thoughts, suggestions, or memes in the comments 👇

📣 Created by @joelnbl

🔀 SwitchCaseRender: Your new JSX bestie for conditional rendering in React

Joel Bello — Fri, 06 Jun 2025 10:37:36 +0000

🚀🔥 NEW FEATURE DROP for the Gen Z Dev Army 🔥🚀

🧠 Introducing: `SwitchCaseRender` from `react-chousy`

Tired of writing switch (status) like it's still 2009? Ternaries got your JSX looking like ramen noodles? 🙄 Breathe, my friend — salvation has arrived:

🔀 `SwitchCaseRender` — The JSX-native Switch Statement

import { SwitchCaseRender } from 'react-chousy';

<SwitchCaseRender value={status}>
  {{
    idle: <p>Waiting...</p>,
    loading: <p>Loading...</p>,
    success: <p>✅ Success!</p>,
    error: <p>❌ Error</p>,
    default: <p>Unknown status</p>
  }}
</SwitchCaseRender>

😱 That’s it. Clean. Declarative. The way React intended.

🧪 Real-world example (no tutorialland here)

import { useState } from 'react';
import { SwitchCaseRender } from 'react-chousy';

const [status, setStatus] = useState<"idle" | "loading" | "success" | "error">("idle");

<SwitchCaseRender value={status}>
  {{
    idle: <p>Waiting for action...</p>,
    loading: <p>Loading...</p>,
    success: <p>Task completed successfully!</p>,
    error: <p>Something went wrong.</p>,
    default: <p>Unknown status</p>,
  }}
</SwitchCaseRender>

🤔 But why not just use `switch`?

❌ Verbose and impure
❌ Disrupts JSX flow
❌ More boilerplate than necessary

✅ Why `SwitchCaseRender` is a 10/10

🧼 Readable by your future self
🔐 Fully TypeScript-friendly
🪶 Lightweight AF
🧩 Modular and composable

🧬 TL;DR

SwitchCaseRender = switch for devs with taste and strict linters. No more spaghetti if else code.

🎯 Install now and clean up your components:

npm install react-chousy

❤️ Love clean code? React like a ninja? Just tired of ugly conditionals? This one's for you.

Tag that dev friend still writing switch (x) { case 'meh': ... } — do it for their sanity 🙏

Did you like this DX gem? Drop a ❤️, comment, or follow me for more dev treats that make your code smile.

Introducing react-chousy: Your New Go-To React Dropdown Component 🎉

Joel Bello — Tue, 03 Jun 2025 01:19:09 +0000

React Chousy: Clean Conditional Rendering for Modern React Apps

Are you tired of scattered ternary operators cluttering your JSX? Meet react-chousy — a lightweight utility that transforms messy conditional rendering into clean, readable code.

The Problem We All Face

We've all written code like this:

{isLoggedIn ? (
  hasProfile ? (
    <UserProfile />
  ) : (
    <SetupProfile />
  )
) : (
  <LoginForm />
)}

It works, but it's not pretty. As conditions nest deeper, readability suffers and maintenance becomes a nightmare.

The Solution: Declarative Conditional Rendering

React Chousy introduces a JSX-friendly approach that makes your intentions crystal clear:

import { ConditionalRender } from 'react-chousy';

<ConditionalRender condition={isLoggedIn}>
{{
  true: <UserDashboard />,
  false: <LoginForm />
}}
</ConditionalRender>

Key Features That Matter

🪶 Ultra-lightweight: Only ~300 bytes gzipped
📘 TypeScript native: Full type safety out of the box
🌳 Tree-shakable: Import only what you need
🔧 Zero dependencies: No bloat, just functionality
⚡ Performance: No runtime overhead

Real-World Example

Here's how it handles complex nested conditions:

<ConditionalRender condition={user.isAuthenticated}>
{{
  true: (
    <ConditionalRender condition={user.hasCompletedOnboarding}>
    {{
      true: <MainApplication />,
      false: <OnboardingFlow />
    }}
    </ConditionalRender>
  ),
  false: <AuthenticationScreen />
}}
</ConditionalRender>

Compare this with traditional ternary operators — the difference in readability is striking.

Installation & Usage

npm install react-chousy

import { ConditionalRender } from 'react-chousy';

function App() {
  const [isLoading, setIsLoading] = useState(false);

  return (
    <ConditionalRender condition={isLoading}>
    {{
      true: <LoadingSpinner />,
      false: <MainContent />
    }}
    </ConditionalRender>
  );
}

Why Choose React Chousy?

Readability First: Code should tell a story. React Chousy makes conditional logic self-documenting.

Maintainable: Clear structure means easier refactoring and fewer bugs during updates.

Team-Friendly: New developers can understand complex conditions at a glance.

Production-Ready: Minimal bundle impact with maximum developer experience benefits.

Perfect For

Complex authentication flows
Multi-step forms and wizards
Feature flagging implementations
Loading and error state management
Any scenario with nested conditionals

Get Started Today

React Chousy proves that small utilities can have big impacts on code quality. If you're building React applications and value clean, maintainable code, give it a try.

Links:

What's your go-to approach for handling complex conditional rendering? Have you tried similar utilities? Share your thoughts in the comments!

*Building better React apps, one component at a time. Follow me for more insights on modern web developmen

Named Arguments in JavaScript: Cleaner Code with Destructuring

Joel Bello — Wed, 30 Aug 2023 20:29:03 +0000

Hey there, fellow developers! 👋

Today, I want to share a coding practice that has been a game-changer for me: Named Arguments in JavaScript. 🚀

What are Named Arguments?

Named arguments, accomplished through ES6 Destructuring, offer a fantastic way to make your code cleaner and more readable. Imagine saying goodbye to those confusing argument orders and handling undefined values!

Here's a quick peek:

// Standard arguments
function createProduct(name, priceInEur = 1, weightInKg, heightInCm, widthInCm) {
  // Your functionality
}

// Named arguments
function createProduct({ name, priceInEur = 1, weightInKg, heightInCm, widthInCm }) {
  // Your functionality
}

Applying Named Arguments: The Right and Wrong Way

When it comes to utilizing named arguments in your JavaScript functions, there's a right way and a wrong way. Let's dive into both scenarios to see the difference.

The Right Way: Clean and Readable

// Create a function with named arguments
function createProduct({ name, priceInEur = 1, weightInKg, heightInCm, widthInCm }) {
  // Your functionality
}

// Call the function with clear context
createProduct({
    name: 'cookies',
    weightInKg: 20,
    heightInCm: 10,
    widthInCm: 10
})

The Wrong Way: Confusing and Error-Prone

// Create a function with standard arguments (wrong way)
function createProduct(name, priceInEur = 1, weightInKg, heightInCm, widthInCm) {
  // Your functionality
} 

// Call the function with undefined values and unclear order
createProduct('cookies', undefined, 20, 10, 10)

In this approach, the order of arguments becomes crucial, leading to confusion. Additionally, passing undefined values to maintain the order is error-prone and lacks clarity.

Remember, clean and maintainable code is all about choosing the right practices. By using named arguments, you enhance readability, context, and extensibility.

Now, armed with this knowledge, you can confidently write functions that are more self-documenting and developer-friendly. 🚀

🌟 Advantages of Named Arguments

The order of arguments becomes irrelevant.
No more passing undefined for optional parameters.
Improved code extensibility and maintainability.
Enhanced code legibility and context.

Remember, like any tool, named arguments are best used wisely. Keep your codebase clean and maintainable! 🧹

Keep coding and stay curious! 😊

What's a Web Server

Joel Bello — Tue, 23 Aug 2022 03:11:00 +0000

A Web Server is like a cash machine, where you store and retire money. But when we are talking about web servers, we are working with data, data that usually comes as files that are interpreted by a web browser that is an application software for accessing the World Wide Web or a local website. The web browser is where a client(you) can interact with data. for example: Is just simple as the analogy of the cash machine. You enter your card and password and retire your money, and everyone is happy.

When we are talking about a web server is similar to when you click a button on a webpage, you are making a request to a web server for data that are interpreted for a web browser, and that files are rendered as a website with webpages with structure, color, styles, and interactivity.