DEV Community: Erlin Banegas

Master the Basics Before You Trust the AI

Erlin Banegas — Wed, 21 May 2025 05:34:35 +0000

Are you just starting out in programming, or have you been at it for a while but still struggle with the fundamentals?

Take a moment to pause and reflect: what are you really aiming for?
Don't try to learn everything at once. Choose one language and focus on learning its fundamentals. These are the pillars every good programmer should know — and unlike frameworks or tools, fundamentals don’t change.

Fundamentals are not just the foundation — they define who you are as a developer. They prepare you to understand the logic behind problems and help you build solutions to the real-world challenges we often face in programming.

You’ve probably heard the phrase: “Before you run, learn to walk.”
These days, there’s a rush to learn everything fast. People rely heavily on AI, thinking it can do it all — even replace them. But here’s the truth: AI is just a tool. You can use it to support your learning, but don’t depend on it until you understand the basics.

Learning the fundamentals will empower you to tell the AI things like:

“That’s not what I asked for.”
“Use this approach instead.”
“Why are you doing it that way?”
“Apply this design pattern.”

Without that knowledge, you won’t know if the code it gives you is wrong — and how will you fix something you don’t understand?

P.S.
Before you run, learn to walk.
Don’t skip the fundamentals just because AI seems to make things easier. Learn the core principles of the language you're using. Most of the time, AI-generated code needs to be corrected. If you don’t know the basics, how will you even notice what’s wrong?

Final Tip:
Start with the official documentation of the language you're learning. Build the habit of researching on your own. Read books — physical or digital, it doesn’t matter. What matters is that you develop the skill of independent learning.
The developers who adapt are the ones who thrive.

Custom Hooks – useKeyPress

Erlin Banegas — Fri, 09 May 2025 04:35:46 +0000

Adding keyboard shortcuts to a web application not only improves the user experience, but also makes certain tasks much faster and more intuitive.

The custom hook useKeyPress allows you to react to combinations like ⌘ + ArrowUp or single keys like F2, in a declarative and reusable way.

A demo showing ⌘ + ArrowUp, ⌘ + ArrowDown, and F2 controlling a counter.

What does useKeyPress do?

This hook lets you:

Listen to multiple key combinations from an array, like ["⌘ + ArrowUp", "F2"].
Receive the main key pressed as an argument (e.g., "ArrowUp", "F2").
Use a single handler function to manage multiple shortcuts easily with if or switch.

Example: keyboard-controlled counter

import { useState } from "react";
import { useKeyPress } from "../core/hooks";

export const KeyPressComponent = () => {
  const [counter, setCounter] = useState(0);

  useKeyPress(["⌘ + ArrowDown", "⌘ + ArrowUp", "F2"], (key: string) => {
    if (key === "ArrowDown") 
        setCounter((prev) => prev - 1);

    if (key === "ArrowUp") 
        setCounter((prev) => prev + 1);

    if (key === "F2") 
        setCounter(0);
  });

  return (
    <div>
      <h1>Key Press Example</h1>
      <strong>{counter}</strong>
      <p>
        Press <em>⌘ + ArrowUp</em> to increase the counter
      </p>
      <p>
        Press <em>⌘ + ArrowDown</em> to decrease the counter
      </p>
      <p>Press F2 to reset the counter</p>
    </div>
  );
};

How does it work internally?

Under the hood, useKeyPress listens for global keyboard events, normalizes combinations (e.g., "⌘ + ArrowUp" becomes "meta+arrowup"), and runs your callback only when an exact match is detected. You only get the main key in the callback ("ArrowUp", "F2", etc.), which keeps your component logic clean.

Here’s a full example of the hook implementation:

import { useEffect } from "react";

const useKeyPress = (keys: string[], callback: (key: string) => void) => {
  useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      const pressedKey = event.key.toLowerCase();

      const normalizedKeys = keys.map((key) =>
        key
          .toLowerCase()
          .split(" + ")
          .map((k) => k.trim())
      );

      const modifiers = {
        control: event.ctrlKey,
        shift: event.shiftKey,
        alt: event.altKey,
        meta: event.metaKey,
        "⌘": event.ctrlKey,
        ctrl: event.ctrlKey,
      };

      const modifierKeys = [
        "control",
        "shift",
        "alt",
        "meta",
        "⌘",
        "ctrl",
      ] as const;

      for (const combination of normalizedKeys) {
        const requiredModifiers = combination.filter((key) =>
          modifierKeys.includes(key as (typeof modifierKeys)[number])
        );
        const requiredKeys = combination.filter(
          (key) => !modifierKeys.includes(key as (typeof modifierKeys)[number])
        );

        const allModifiersMatch = requiredModifiers.every(
          (mod) => modifiers[mod as keyof typeof modifiers]
        );

        const keyMatch = requiredKeys.includes(pressedKey);

        if (keyMatch && allModifiersMatch) {
          event.preventDefault();
          callback(event.key);
          return;
        }
      }
    };

    document.addEventListener("keydown", handleKeyDown, { capture: true });

    return () => {
      document.removeEventListener("keydown", handleKeyDown, { capture: true });
    };
  }, [keys, callback]);
};

export default useKeyPress;

✅ Benefits

✅ Clear syntax: define multiple combinations in an array.
✅ Clean-up included: automatically removes the listener.
✅ Flexible: works across different platforms (Windows, macOS).
✅ Declarative: avoids manual DOM event handling.

🧠 Final thoughts

Handling keyboard shortcuts doesn’t have to be messy. With useKeyPress, you can keep your components clean while adding power-user features that scale well.

Want to extend it?

Ignore events when inside an
Add debounce or throttle
Support dynamic combos via state

🙌 Thanks for reading

Thanks for reading this post — I hope it was helpful!

Feel free to leave a comment or suggestion below.
You're welcome to try, adapt, and improve the useKeyPress hook to fit your own use case.

Happy coding! 🎯

Rest Client - Fetch

Erlin Banegas — Sun, 04 May 2025 09:06:24 +0000

Learn How to Use Fetch and Create a Reusable Rest Client in JavaScript

In this blog post, we’ll explore the basics of the Fetch API and how to create a reusable RestClient class to simplify your HTTP requests in web applications.

Table of Contents

What is Fetch?
Using Fetch: Examples

GET Request
POST Request

Reusable RestClient Class
Using RestClient in React

🛰️ What is Fetch?

The Fetch API is a modern JavaScript interface used to make HTTP requests to servers. It returns a Promise, which can be handled with async/await or .then() syntax.

To learn more about Promises, check the MDN documentation.

🚀 Using Fetch: Examples

✅ GET Request

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(json => console.log(json));

Response:
{ "userId": 1, "id": 1, "title": "delectus aut autem", "completed": false }

This makes a simple GET request and parses the JSON response.

📤 POST Request

const request = {
  title: 'foo',
  body: 'bar',
  userId: 1,
};

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  body: JSON.stringify(request),
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  },
})
  .then(response => response.json())
  .then(json => console.log(json));

For POST, PUT, and DELETE, you must explicitly define the method, headers, and body as shown above.

🧰 Reusable RestClient Class

To avoid repeating fetch() logic throughout the app, I’ve created a reusable RestClient class. It simplifies HTTP communication and promotes consistency across requests.

✅ Features

Supports GET, POST, PUT, and DELETE requests.
Returns a standardized response object with helpful metadata.
Maps common HTTP error codes to friendly messages (e.g., 401 → "Unauthorized").
Supports optional request cancellation using AbortController.

⚙️ Environment Setup

This project uses Vite + React with the following environment variables:

VITE_BASE_API_URL=https://jsonplaceholder.typicode.com
VITE_API_VERSION=v1  # Optional

🧱 ApiResponse Interface

interface ApiResponse<T> {
  success: boolean;
  data: T | null;
  message: string;
  error?: unknown;
  statusCode?: number;
}

This interface defines the standard structure for all responses. Whether a request succeeds or fails, you can consistently check:

success: if the request was successful
data: the returned payload
message: a user-friendly summary
statusCodeand error: optional debugging info

🧪 Example: Testing RestClient with Abort Support

Let’s see a real-world React component using the httpGetAsync() method with cancellation support via AbortController.

export const RestClientTest = () => {
  const [controller, setController] = useState<AbortController | null>(null);

  useCommands(
    {
      actions: [
        {
          label: "Send",
          variant: "solid",
          onClick: async () => {
            const newController = new AbortController();
            setController(newController);
            const res = await restClient.httpGetAsync(
              "/posts",
              undefined,
              newController
            );

            if (!res.success) {
              toast.warn(res.message);
              return;
            }

            console.log(res);
          },
        },
        {
          label: "Abort Controller",
          variant: "ghost",
          onClick: async () => {
            controller?.abort();
          },
        },
      ],
    },
    [controller]
  );

  return <div>Rest Client Test</div>;
};

📷 Example Output

Here’s what you’ll see in the console after a successful request:

Clicking "Send" starts an HTTP GET request using restClient.httpGetAsync().

🧪 Simulating a Slow Request

To test the cancellation feature, you can simulate slow network conditions in your browser:

Open DevTools → Network tab.
Change the throttling to "Slow 3G".
Click Send and then Abort Request quickly.
This cancels the in-progress HTTP request before the response arrives:
Clicking "Send" starts an HTTP GET request using restClient.httpGetAsync().
Clicking "Abort Request" cancels the ongoing request using AbortController.

🚀 Full Source Code

GitHub Repo - RestClientFetch

Thank you for reading all the way through.
I hope this implementation helps you write cleaner, more reusable, and easier-to-maintain code.
See you in the next post! 🚀