Forem: Jenuel Oras Ganawed

The Hidden Cost of Free AI: Don’t Let ChatGPT Replace Your Thinking

Jenuel Oras Ganawed — Tue, 29 Jul 2025 22:58:29 +0000

Artificial intelligence has become part of our everyday life, and tools like ChatGPT are leading the way. With just a few words, you can get instant answers, write long emails, brainstorm ideas, or even solve technical problems. And the best part? It’s free.

But that’s exactly where the trap begins.

Free tools often feel harmless. You try them once, and they work so well that you start using them regularly. Eventually, you start depending on them, without even realizing it. What begins as a helpful tool can slowly become something you can’t work without.

This strategy isn’t new. Some people call it the “drug dealer” approach: the first hit is free. It’s smooth, easy, and powerful. You feel smarter. You get work done faster. You rely on the tool more and more. And before you know it, you’re hooked. Not because of the tool itself, but because of how much easier it makes things feel.

Here’s where the danger comes in.

When you start using AI to do your thinking for you, you begin to lose something important, your ability to think deeply, clearly, and independently. You stop challenging yourself to solve problems. You stop practicing creativity. You stop learning through struggle. Instead, you just ask a tool for answers.

And what happens in a few years when these tools are no longer free? When companies start charging for the features you’ve come to rely on every day?

By then, it’s not just about paying money. It’s about needing the tool to function. Because you’ve already handed over part of your thinking process to it. You’ve outsourced your mind.

Of course, AI isn’t bad. It’s an incredible tool when used the right way. It can save time, support your learning, and improve your output. But it should never replace your thinking. It should assist, not control.

Use AI to help you understand concepts, explore ideas, or double-check your work. But don’t let it do the work for you. Don’t let it remove your need to think, reflect, and learn. Because once that happens, you’re not growing, you’re just following.

In a world where AI is becoming more powerful, the strongest people will be those who still know how to think for themselves. Don’t trade your mind for convenience. Be careful what you become dependent on, even when it’s free.

The true cost of relying too much on AI isn’t in your wallet. It’s in your brain.

If you enjoy this article and would like to show your support, you can easily do so by buying me a coffee. Your contribution is greatly appreciated!

How to Detect If a User Is Using a VPN with JavaScript

Jenuel Oras Ganawed — Sun, 27 Apr 2025 02:16:45 +0000

In today's world of online privacy tools, VPNs (Virtual Private Networks) have become very common. If you're building an application, especially one involving security, fraud prevention, or geo-restricted content, you might wonder.

"Can I detect if a user is using a VPN?"

While it's tricky to detect VPNs purely from frontend JavaScript, one simple method is by using IP intelligence services like ipinfo.io. In this article, I'll show you how to detect VPN or proxy usage using just a few lines of JavaScript.

Basic Idea

Browsers don't directly expose network information like IP addresses for security reasons.So to find the user's IP (and whether it's associated with a VPN or proxy), we can call an external API like ipinfo.io, which provides detailed IP data, including privacy information.

Example Code

Here’s a simple function that checks if a user is likely using a VPN or a proxy:

async function checkVpnUsage() {
  const res = await fetch('https://ipinfo.io/json?token=YOUR_TOKEN');
  const data = await res.json();

  console.log('IP Info:', data);

  // Some services provide `privacy` or `proxy` fields
  if (data.privacy && (data.privacy.vpn || data.privacy.proxy)) {
    console.log('User is likely using a VPN or proxy.');
  } else {
    console.log('No VPN/proxy detected.');
  }
}

checkVpnUsage();

How It Works

Fetch IP Data:We use fetch() to get JSON data from ipinfo’s API.
Check Privacy Fields:If the response contains a privacy object, and the vpn or proxy field is true, we assume the user is behind a VPN or proxy server.
Log the Result:We simply print the result to the console for now.

A Sample API Response

When you call https://ipinfo.io/json, you’ll get a response like this:

{
  "ip": "8.8.8.8",
  "city": "Mountain View",
  "region": "California",
  "country": "US",
  "org": "Google LLC",
  "privacy": {
    "vpn": true,
    "proxy": false,
    "relay": false,
    "hosting": true,
    "service": "Google Cloud"
  }
}

Notice the privacy object — it tells you if the IP is linked to VPNs, proxies, or hosting services.

Things to Keep in Mind

You Need an API Token:Sign up at ipinfo.io to get a free token. Free plans usually allow around 1,000 API calls per month.
Detection Isn't Perfect:Some modern VPNs use residential IP addresses, making them harder to detect.
Consider Backend Validation:It’s safer to perform this check on the server-side too, to avoid users tampering with frontend JavaScript.
Respect Privacy:Be clear with users if you collect or act on their IP address or location.

Things to Keep in Mind

You Need an API Token:Sign up at ipinfo.io to get a free token. Free plans usually allow around 1,000 API calls per month.
Detection Isn't Perfect:Some modern VPNs use residential IP addresses, making them harder to detect.
Consider Backend Validation:It’s safer to perform this check on the server-side too, to avoid users tampering with frontend JavaScript.
Respect Privacy:Be clear with users if you collect or act on their IP address or location.

Example:

if (data.privacy && (data.privacy.vpn || data.privacy.proxy)) {
  alert('We detected a VPN or proxy. For a better experience, please disable it.');
}

Their you go, I hope this short read gave you some insights 😁 cheers! 🍻

If you enjoy this article and would like to show your support, you can easily do so by buying me a coffee. Your contribution is greatly appreciated!

The Rise of AI: A Turning Point for All of Us

Jenuel Oras Ganawed — Fri, 11 Apr 2025 14:02:11 +0000

Heres something important and I want you all to read and analyze what I have just writtern. Is AI going to take over or not?

This topic has been trending across tech industries—and it’s not just affecting programmers. Digital artists, musicians, writers, and creators of all kinds are feeling the impact. With AI evolving rapidly, it can now generate code, images, music, videos, designs, and more in a matter of seconds.

Because of this, many of us feel uncertain about the future. Some have started learning how AI works just to keep up with the trend, while others are even considering switching careers out of fear of becoming obsolete.

This wave of change brings both positive and negative effects to our industry. But one thing is clear—AI is here, and it's becoming more powerful than we ever imagined. You can now build apps, design websites, and even generate entire systems using AI. We are entering an era where machines don't just follow instructions—they think with us.

And sure, this change might benefit you and overwhelm someone else. But whether we like it or not, we have to adapt. It’s part of evolution. It’s part of change. Everything around us will continue to transform, and we need to move with it—not against it.

That’s why I like to call this era “The Beginning of a Working Brain for Computers.” While we’re standing at the start of something massive, let’s not fear it—let’s embrace it. Let’s learn how to use it to our advantage. Let’s leverage it to make our lives and our work better.

Tech is evolving rapidly. So what do we do?

We take advantage of what this age offers.

Start small. Learn how to use AI tools. Whether it's text-to-speech, speech-to-text, AI image generators, or local AI tools for privacy (like Ollama, which lets you run AI models on your own machine), try them out. Make a list of what you can use. Even if you’re not a fan of AI, it can help lighten your workload.

Don’t ignore AI—learn it.

You don’t have to force yourself to master it overnight. Just take one step at a time. Learn the basics. Understand how it works. Because even a simple understanding of AI today might give you a huge advantage tomorrow.

Also, start writing down ideas—what can AI help you with? What tasks can it make easier?

Think about the time before electricity. People had limited imagination about what was possible. But once electricity became widespread, it sparked countless ideas: TVs, washing machines, batteries, phones, chargers, and more. Every new invention opens doors to more creativity.

Final Thoughts

You might be the next big innovator—or maybe not. But remember, we don’t have much time on this earth. I wish I could live for hundreds of years just to witness where all of this is going. But since I can’t, I choose to adapt now—to learn, to evolve, and to use what’s been given to me.

Let’s not waste this moment.

Use what you have. Grow with the tools around you. And above all, don’t forget to pray. 🙏

God bless you. I hope this short read gives you something to think about.

If you enjoy this article and would like to show your support, you can easily do so by buying me a coffee. Your contribution is greatly appreciated!

What Does Your Desk Look Like?

Jenuel Oras Ganawed — Tue, 08 Apr 2025 08:09:56 +0000

A developer with only one laptop on the desk is actually pretty common, especially for solo devs, remote workers, students, or those just starting out. Hey, its

A Developer who dont like to say no, but this developer likes to say yes.

This guys love to see all lines when coding. By making the monitor vertical, you don't have to scroll a lot.

This developers likes to go out a lot. They love working outside, and they like to work around the house, or basically anywhere. They probably dont code a lot, or they might doing simple things like PR checking, etc.

This developers are rich 😅. Damn wide monitor are expensive. But a wide monitor is better than 2. Probably, a mac laptop users.

This is probably a developer who programme, and likes to play games. Probably a game developer but who knows.

This is probably a Mac monitor user. Or A PC user with very good graphics. They did not buy an extra monitor, they spent it all in computer parts 😅.

This guy is a hacker, they monitor a lot of graphs, like servers CPU, graphics, etc. And they are linux addicts. They can even have more than 4 monitors.

ah, yes. The typical and most common setup. A 3 screens. Sometimes, the laptop is in the center, and monitors in the sides.

🏪Check some stuff on my store 😁

Laravel Cloud to Save the Day: A Game-Changer for Laravel Developers

Jenuel Oras Ganawed — Tue, 25 Feb 2025 13:29:05 +0000

The Laravel ecosystem has always been about making developers' lives easier, and the recent release of Laravel Cloud is no exception. If you're a Laravel developer, this is one announcement you don’t want to miss. Whether you're just starting out or scaling up a massive application, Laravel Cloud is here to simplify your deployment process and take your projects to the next level. And the best part? It comes with a free tier for beginners, so you can test the waters before committing.

What is Laravel Cloud?

Laravel Cloud is a new platform designed specifically for Laravel applications. It’s built to handle everything from deployment to scaling, so you can focus on writing code instead of worrying about infrastructure. With seamless integration into the Laravel ecosystem, it’s like having a dedicated DevOps team at your fingertips.

Why Laravel Developers Should Be Excited

Built for Laravel, by LaravelLaravel Cloud is tailor-made for Laravel applications. It understands the framework inside and out, ensuring optimal performance and compatibility. No more fiddling with server configurations or debugging deployment scripts—Laravel Cloud handles it all.
Free Tier for BeginnersJust starting out? No problem. Laravel Cloud offers a free tier that’s perfect for small projects or testing. This makes it an excellent choice for developers who want to experiment or build their portfolio without breaking the bank.
Scale as You GrowAs your application grows, so do your needs. Laravel Cloud makes it easy to scale up your resources with flexible pricing plans. Whether you’re handling a few hundred users or millions, Laravel Cloud grows with you.
Seamless DeploymentDeploying your Laravel application has never been easier. With just a few clicks, you can push your code to production. Laravel Cloud takes care of the rest, including database migrations, queue workers, and more.
Developer-Friendly FeaturesFrom automatic SSL certificates to real-time monitoring, Laravel Cloud is packed with features designed to make your life easier. It’s like having a Swiss Army knife for Laravel development.

How to Get Started

First Login to https://cloud.laravel.com/ , create an account finish every step for registration.
Go to your main Laravel Cloud dashboard page and select + New application.
Connect your Git provider

Click Continue with GitHub, GitLab, or Bitbucket to proceed. A new tab or window will open, prompting you to sign in to your chosen Git provider. Once signed in, select the user, organization, and repositories you want to grant Laravel Cloud access to.

After completing the Git provider authentication flow, you will be redirected back to Laravel Cloud.
Create a new application.

Choose the repository you want to use, enter a name for your Laravel Cloud application, and select a deployment region. Finally, click Create Application to proceed.

Your application will be created with a default environment, and you'll be automatically redirected to its overview page.

Congratulations! Your application is now set up on Laravel Cloud.

For a basic application, you might be ready to deploy right away. However, you’ll likely want to customize a few settings first—such as selecting a PHP version, adding environment variables, or configuring a database. You can manage these settings from your environment’s Infrastructure Canvas dashboard.

Once everything is set up, simply click Deploy to launch your application!

Things I Like About Laravel Cloud

🚀 Effortless Deployment

Deploying a Laravel project has never been easier. I remember how time-consuming deployments used to be, but with Laravel Cloud, it’s a seamless process.

💻 Run Custom Commands

The Commands section allows you to execute any command directly from the dashboard. This is especially useful for Laravel applications, where running custom Artisan commands is a common task during development and maintenance.

🆓 Free Tier for Testing

As a developer who enjoys experimenting with new apps, I appreciate the free tier. It’s perfect for testing ideas and even starting a business without worrying about upfront costs. Of course, as your app grows, you'll need to upgrade, but it’s great to start for free.

🔧 No Configuration Hassles

Simply set up your deployment and build commands, and Laravel Cloud handles everything whenever you push an update. No more dealing with complex deployment setups!

🎨 Developer-Friendly UI

The interface is clean and intuitive—everything is where you expect it to be. It’s clear that a lot of thought went into making the experience smooth and hassle-free.

Laravel Cloud really gets it right when it comes to making deployment simple and efficient! 🚀

Laravel Cloud is more than just a hosting platform—it’s a powerful tool designed to empower Laravel developers. Whether you’re a solo developer working on a passion project or part of a team building the next big thing, Laravel Cloud has something to offer.

So, what are you waiting for? If you’re a Laravel developer, give Laravel Cloud a try. With its free tier and scalable pricing, there’s no reason not to. Laravel Cloud might just be the hero your next project needs.

Happy coding! 🚀

If you enjoy this article and would like to show your support, you can easily do so by buying me a coffee. Your contribution is greatly appreciated!

Limiting Docker RAM Usage on Windows

Jenuel Oras Ganawed — Fri, 21 Feb 2025 09:43:26 +0000

If you're running Docker on Windows, managing its RAM usage depends on whether it's using Hyper-V or WSL 2. When Docker runs with Hyper-V, you can easily adjust resource limits through the settings in the desktop app. However, if you're using WSL 2 (which is the recommended approach), the RAM usage settings won't be available in the GUI.

How to Limit RAM Usage for Docker in WSL 2

By default, Docker in WSL 2 will consume up to half of your system's memory. If you have a high amount of RAM (e.g., 32GB or 64GB), this can be excessive. To manually set a RAM limit, follow these steps:

1. Navigate to Your User Directory

Run the following command in PowerShell or Command Prompt to switch to your home directory:

cd ~

2. Edit or Create the `.wslconfig` File

In your home directory, look for a file named .wslconfig. If it doesn’t exist, create one. Then, add the following lines:

[wsl2]
memory=6GB   # Limits VM memory in WSL 2

You can adjust the memory value according to your needs.

3. Restart WSL

For the changes to take effect, restart WSL by running:

wsl --shutdown

Then, restart docker and WSL, or I recommend you restart computer, and the new RAM limit will be applied.

By setting this limit, you can prevent Docker from consuming excessive memory, ensuring better performance and resource allocation for your system.

If you enjoy this article and would like to show your support, you can easily do so by buying me a coffee. Your contribution is greatly appreciated!

JavaScript Functions Developers Should Know

Jenuel Oras Ganawed — Sun, 02 Feb 2025 07:05:09 +0000

Basic Utility Functions

debounce Optimize Performance

This prevents a function from executing too frequently (e.g. for search inputs, resize events). Debounce function is crucial for performance optimization because it helps reduce the number of function executions, expecially for events that fire frequently, such as:
- Window resize
- Scrolling
- Typing (e.g., search input)
- Mouse movement
How Debounce Works

Debounce delays the execution of a function until a specified delay has passed since the last time the function was called. Creating this functions for your system is very important.

Example:
```
function debounce(func, delay) {
  let timer;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, args), delay);
  };
}
```
throttle Limit function calls

Ensures a function is executed at most once in a given interval. The throttle function is essential for performance optimization because it ensures a function execute at most once within a given time interval, even if it's triggered multiple times.

It's useful for high-frequency events, such as:
- Scrolling (e.g., infinite scrolling, lazy loading)
- Window resizing
- Mouse movement (e.g., tracking cursor position)
- Button clicks (e.g., preventing double submission)
How Throttle Works

Throttle limits the number of times a function executes per unit of time. Unlike debounce, which executes until activity stops, throttle ensures regular execution intervals regardless of how frequently the event fires.

Example:
```
function throttle(func, limit) {
  let lastFunc;
  let lastRan;
  return function (...args) {
    if (!lastRan) {
      func.apply(this, args);
      lastRan = Date.now();
    } else {
      clearTimeout(lastFunc);
      lastFunc = setTimeout(() => {
        if (Date.now() - lastRan >= limit) {
          func.apply(this, args);
          lastRan = Date.now();
        }
      }, limit - (Date.now() - lastRan));
    }
  };
}
```

Array and Object Manipulation

In JavaScript, objects and arrays are reference types, meaning they are stored in memory as references. When you assign an object/array top a new variable, both variables point to the same memory location, leading to unintended side effects if one is modified.

✅ Cloning helps prevent accidental modifications

✅ Ensures data integrity when working with functions

✅ Useful for immutability (e.g., in React state management)

Clone an Object or Array (Shallow Copy)

const clone = (obj) => ({ ...obj });
const arrClone = (arr) => [...arr];

Deep Clone an Object

function deepClone(obj) {
  return JSON.parse(JSON.stringify(obj));
}

Remove Duplicates from an Array

const removeDuplicates = (arr) => [...new Set(arr)];

Flatten a Nested Array

const flatten = (arr) => arr.flat(Infinity);

String Manipulation

Capitalize First Letter

const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);

Convert a String to Slug (URL=Friendly)

This is commonly used for blogs, news, etc. or viewing users. Instead of using the id of a user or blog or news. Use a slog instead. Especially in blog or news, having slug on the URL is a lot better because its SEO friendly and enhances readability of the URL.
```
const toSlug = (str) => str.toLowerCase().replace(/\s+/g, '-').replace(/[^\w-]/g, '');
```

Dom Manipulation

Select Elements
```
const $ = (selector) => document.querySelector(selector);
const $$ = (selector) => document.querySelectorAll(selector);
```
The following two functions are shorthand utilities for selecting elements in the DOM. They are shorter alternatives to writing document.querySelecter() and document.querySelectorAll() , making code more concise and readable.

The $ function is equivalent to document.querySelector(), which returns the first matching element for the given CSS selector.
```
const title = $("h1"); // Selects the first <h1> element
console.log(title.textContent);
```
Same as:
```
const title = document.querySelector("h1");
```

Toggle Class

const toggleClass = (el, className) => el.classList.toggle(className);

This function toggles (adds or remove) a CSS class from an element when called. It checks if the class exists:

✅ If the class is present, it removes it.
✅ if the class is absent, it adds it.

Example:

const btn = document.querySelector("#themeToggle");

btn.addEventListener("click", () => {
  toggleClass(document.body, "dark-mode");
});

The CSS Example:

.dark-mode {
  background: black;
  color: white;
}

Copy Text to Clipboard

Copying text to the clipboard is essential for improving user experience in web applications. It allows users to quickly copy links, codes, or text without manually selecting and right-clicking. This function is widely used in share buttons, code snippets, form inputs, and password managers. Knowing how to implement it ensures better accessibility, efficiency, and smoother interactions in modern web development. 🚀
```
const copyToClipboard = (text) => navigator.clipboard.writeText(text);
```

Event Handling

Detect Click Outside an Element

This function detects clicks outside a specific element and triggers a callback function.

✅ Prevents unintended interactions✅ Useful for closing dropdowns, modals, or sidebars✅ Enhances user experience

function clickOutside(element, callback) {
  document.addEventListener('click', (event) => {
    if (!element.contains(event.target)) callback();
  });
}

Example:

// closing the modal if clicked outside a modal
const modal = document.querySelector("#modal");
const closeModal = () => modal.classList.remove("open");

clickOutside(modal, closeModal);

Smooth Scroll to Element
```
const smoothScroll = (element) => {
  document.querySelector(element).scrollIntoView({ behavior: 'smooth' });
};
```
This function smoothly scrolls to a specific element on the page when called.

How It Works:
- document.querySelector(element) – Finds the DOM element based on the provided CSS selector.
- scrollIntoView({ behavior: 'smooth' }) – Scrolls to the selected element with a smooth animation instead of an abrupt jump.

Date & Time

Format Date as YYYY-MM-DD

A lot of people does not know this, but you can use this one line code to get date in YYYY-MM-DD format.
```
const formatDate = (date) => date.toISOString().split('T')[0];
```
This function formats a JavaScript Date object into a YYYY-MM-DD format (ISO 8601), which is commonly used for displaying dates in a consistent format.

Example:
```
const today = new Date();
console.log(formatDate(today)); // Output: "2025-02-02"
```
Get Time Ago (e.g., "5 minutes ago")

This function returns a human-readable "time ago" string based on a given date, for example: "2 days ago", "5 hours ago", or "just now". It's useful for displaying relative timestamps on posts, comments, or activity logs.
```
function timeAgo(date) {
  const seconds = Math.floor((new Date() - date) / 1000);
  const intervals = { year: 31536000, month: 2592000, day: 86400, hour: 3600, minute: 60 };

  for (const [unit, value] of Object.entries(intervals)) {
    const count = Math.floor(seconds / value);
    if (count >= 1) return `${count} ${unit}${count > 1 ? 's' : ''} ago`;
  }
  return 'just now';
}
```
How It Works:
- new Date() - date – Calculates the difference between the current time and the given date.
- Divides the difference by 1000 – Converts the difference into seconds.
- intervals Object – Maps time units (year, month, day, etc.) to their equivalent value in seconds.
- Loop through intervals – Determines which unit (year, month, day, etc.) best fits the difference in time and returns the corresponding string (e.g., "5 minutes ago").
- Fallback – If the time difference is very short (less than a minute), it returns "just now".
  
  Example:
```
const postDate = new Date("2025-01-30T12:00:00");
console.log(timeAgo(postDate)); // Output: "3 days ago"
```

Fetch & Async/Await

Fetch Data with Error Handling

This function performs an HTTP request to a given url and returns the response as JSON. It is a simple and effective alternative to Axios for making network requests, especially when you don't need the overhead of a library.

async function fetchData(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) throw new Error('Network error');
    return await response.json();
  } catch (error) {
    console.error(error);
  }
}

Why Is This Function Great Without Using Axios?

Native to JavaScript – fetch is built into modern browsers, so you don't need to include any external dependencies (like Axios). It works out-of-the-box in most environments, including browsers and Node.js (via node-fetch).
Async/Await Syntax – It uses async/await to handle asynchronous requests in a more readable and synchronous-like manner, making it easier to manage promises compared to .then() or .catch().
Error Handling – The function throws an error when the response is not ok (status code outside 200-299), providing a basic mechanism to catch network errors easily. It also catches any other errors using the try-catch block.
Smaller Footprint – Since fetch is a built-in browser API, there’s no need to import or install any additional libraries, making this solution lighter and faster to use compared to adding the weight of Axios (which is great but may be unnecessary for simple use cases).

🎯 When Should You Consider Using `fetch` Over Axios?

Simple Use Cases – If you don't need all the extra features that Axios offers (like request/response interceptors, automatic JSON parsing, etc.), fetch is perfect for making basic GET or POST requests.
No Need for Extra Libraries – If you want to avoid adding dependencies to your project, fetch is an ideal choice since it’s natively supported in most modern browsers.
Lightweight Projects – For small projects or cases where you only need simple API calls, fetch is fast and sufficient without the extra weight of a third-party library.

Example:

    const url = "https://jsonplaceholder.typicode.com/posts";
    fetchData(url).then((data) => {
      console.log(data);
    });

Functional Programming Helpers

Memoization (Cache Expensive Function Calls)
```
function memoize(fn) {
  const cache = new Map();
  return function (...args) {
    const key = JSON.stringify(args);
    if (!cache.has(key)) cache.set(key, fn(...args));
    return cache.get(key);
  };
}
```
The memoize function is a performance optimization technique that stores (or "caches") the results of function calls and returns the cached result when the same inputs are encountered again, rather than recalculating the result. This is especially useful for expensive or repetitive calculations.

How It Works:

cache = new Map() – A map to store results of previously executed function calls. The keys are the stringified arguments, and the values are the corresponding function results.
key = JSON.stringify(args) – Converts the function arguments into a JSON string to use as a cache key.
if (!cache.has(key)) – Checks if the result for this set of arguments already exists in the cache.
cache.set(key, fn(...args)) – If the result isn't in the cache, it calls the function and stores the result in the cache.
return cache.get(key) – If the result exists in the cache, it simply returns the cached result.

Example Usage:
1. Memoizing a Factorial Function

        function factorial(n) {
          if (n <= 1) return 1;
          return n * factorial(n - 1);
        }

        const memoizedFactorial = memoize(factorial);

        console.log(memoizedFactorial(5));  // Calculates and caches result
        console.log(memoizedFactorial(5));  // Returns cached result

✅ The first call will calculate the result and cache it, while subsequent calls with the same argument will return the cached result.

2. Memoizing Expensive Computations

        function slowComputation(num) {
          console.log('Calculating...');
          return num * num; // Simulate expensive computation
        }

        const memoizedComputation = memoize(slowComputation);

        console.log(memoizedComputation(10)); // Will calculate
        console.log(memoizedComputation(10)); // Will return cached result

✅ The second call to memoizedComputation(10) will not log "Calculating..." since it returns the cached value.

Memoization is a technique that stores function results and returns cached results when the same inputs are used again. This is useful for expensive computations, improving performance, and reducing redundant calculations.

Generate a Random String
```
const randomString = (length = 8) => Math.random().toString(36).substr(2, length);
```
This function generates a random alphanumeric string of a specified length (default is 8 characters).

Example:
```
console.log(randomString());  // Example output: "y8d4sj2g"
console.log(randomString(12));  // Example output: "4df7y9qs2zxg"
```
🎯 Why Use randomString?
1. Quick Random Value – Great for generating short random strings in a single line of code.
2. Use Cases – Often used for generating unique IDs, tokens, or passwords in scenarios like form submissions, URL shorteners, or session identifiers.
3. Customization – The function allows you to easily adjust the string length by passing a custom argument.

These might not be functions you use every day, but knowing them can really come in handy for future projects or even ones you're working on right now.

I hope this was helpful! Thanks for reading, and have an awesome day—happy coding! 😁🍻

If you enjoy this article and would like to show your support, you can easily do so by buying me a coffee. Your contribution is greatly appreciated!

How to Code Clean: Best Practices for Writing Maintainable and Efficient Code

Jenuel Oras Ganawed — Wed, 29 Jan 2025 08:51:26 +0000

In the world of software development, writing code that works is only half the battle. The other half is writing code that is clean, maintainable, and easy to understand. Clean code is not just a luxury—it’s a necessity for long-term project success. Whether you're working on a solo project or collaborating with a team, clean code ensures that your software is scalable, debuggable, and adaptable to future changes.

In this blog, we’ll explore the principles and best practices of writing clean code, along with actionable tips to help you improve your coding habits.

What is Clean Code?

Clean code is code that is easy to read, understand, and modify. It follows a set of principles and conventions that make it intuitive for other developers (or your future self) to work with. Clean code is not about being clever or writing the shortest possible solution—it’s about being clear and intentional.

As Robert C. Martin, author of Clean Code: A Handbook of Agile Software Craftsmanship, puts it:

"Clean code is code that has been taken care of. Someone has taken the time to keep it simple and orderly. They have paid appropriate attention to details. They have cared."

Why Does Clean Code Matter?

Improved Readability: Clean code is easy to read, reducing the cognitive load on developers.
Easier Maintenance: Well-structured code is simpler to debug, update, and extend.
Better Collaboration: Clean code makes it easier for teams to work together without confusion.
Fewer Bugs: Clear and concise code reduces the likelihood of errors and unintended side effects.
Long-Term Scalability: Clean code lays the foundation for a project that can grow and evolve over time.

Principles of Clean Code

Here are some fundamental principles to guide you in writing clean code:

1. Follow the DRY Principle (Don’t Repeat Yourself)

Avoid duplicating code. If you find yourself writing the same logic multiple times, refactor it into a reusable function or module.
Example: Instead of copying and pasting a validation check, create a function like validateInput() and call it wherever needed.

2. Keep It Simple (KISS Principle)

Write code that is straightforward and easy to understand. Avoid over-engineering or adding unnecessary complexity.
Example: Use a simple if-else statement instead of a convoluted ternary operator if it improves readability.

3. Use Meaningful Names

Choose descriptive and intention-revealing names for variables, functions, and classes. Avoid generic names like temp or data.
Example: Use calculateTotalPrice() instead of calc() or process().

4. Write Small Functions

Functions should do one thing and do it well. Aim for functions that are short, focused, and easy to test.
Example: Instead of a 50-line function, break it down into smaller functions like validateInput(), calculateDiscount(), and generateInvoice().

5. Comment Sparingly, but When Necessary

Good code should be self-explanatory. Use comments to explain why something is done, not what is being done.
Example: Instead of commenting // loop through array, write clear code like for (const item of items).

6. Follow Consistent Formatting

Use consistent indentation, spacing, and naming conventions. Consider using a linter or formatter (like Prettier for JavaScript) to enforce consistency.
Example: Stick to either camelCase or snake_case for variable names throughout your codebase.

7. Avoid Deep Nesting

Deeply nested code (e.g., multiple if statements inside loops) can be hard to follow. Refactor to reduce nesting levels.
Example: Use guard clauses or early returns to handle edge cases upfront.

8. Write Tests

Clean code is testable code. Write unit tests to ensure your code works as expected and to catch regressions.
Example: Use testing frameworks like Jest, PyTest, or JUnit to automate your tests.

Tips for Writing Clean Code

Refactor Regularly

Refactoring is the process of improving existing code without changing its behavior. Make it a habit to refactor as you go, rather than waiting until the end.
Use Version Control

Tools like Git help you track changes, experiment with new ideas, and revert to a clean state if something goes wrong.
Leverage Design Patterns

Familiarize yourself with common design patterns (e.g., Singleton, Factory, Observer) to solve recurring problems in a clean and structured way.
Avoid Magic Numbers and Strings

Replace hardcoded values with named constants or configuration variables.

- Example: Use `const MAX_RETRIES = 3;` instead of scattering the number `3` throughout your code.

Keep Dependencies Minimal

Avoid adding unnecessary libraries or frameworks. Each dependency adds complexity and potential maintenance overhead.
Review Your Code

Conduct code reviews with peers to catch issues early and learn from others’ perspectives.

Example: Clean Code in Action

Here’s an example of refactoring a messy function into clean code:

Before:

def process_data(data):
    result = []
    for i in range(len(data)):
        if data[i] % 2 == 0:
            result.append(data[i] * 2)
        else:
            result.append(data[i] * 3)
    return result

After:

def double_even_numbers(number):
    return number * 2

def triple_odd_numbers(number):
    return number * 3

def process_data(data):
    return [
        double_even_numbers(number) if number % 2 == 0 else triple_odd_numbers(number)
        for number in data
    ]

The refactored version is more readable, modular, and easier to test.

Conclusion

Writing clean code is a skill that takes time and practice to master, but the effort is well worth it. By following the principles and best practices outlined in this blog, you’ll create code that is not only functional but also maintainable, scalable, and a joy to work with.

Remember, clean code is not about perfection—it’s about continuous improvement. As you write and review code, always ask yourself: "Is this clear? Is this simple? Would someone else understand this?"

Happy coding, and may your code always be clean! 🚀

Animation Library You Can Use for your Web Apps

Jenuel Oras Ganawed — Tue, 14 Jan 2025 10:03:53 +0000

GSAP

GreenSock Animation Platform (GSAP) is a JavaScript library that lets users create animations for web development. It's used to animate a variety of elements, including SVG, UI, text, and WebGL.

ScrollReveal

ScrollReveal is a JavaScript library for easily animating elements as they enter/leave the viewport. It was designed to be robust and flexible, but hopefully you'll be surprised below at how easy it is to pick up.

AnimeJS

a lightweight JavaScript animation library with a simple, yet powerful API. It works with CSS properties, SVG, DOM attributes and JavaScript Objects. Getting started.

Motion.Dev

Motion is a JavaScript animation library that's easy to start and fun to master. It's the only library with a hybrid engine, combining hardware accelerated DOM animations with the flexibility to animate anything that a browser can't, like independent transforms, gradients or Three.js.

Auto Animate

AutoAnimate is a zero-config, drop-in animation utility that adds smooth transitions to any web app. It also works great with FormKit. FormKit doesn't need much animation, but a small tasteful amount can make it clear when elements pop on and off a page, or move around — such as validation messages.

TypedJs

a library that types. Enter in any string, and watch it type at the speed you've set, backspace what it's typed, and begin a new sentence for however many strings you've set.

MoJS

Simple declarative APIs to master your motion project with ease. Modular. Custom build for the current project's needs. Bye bye large file size overheads.

This are the only animation library that I tried. Comment down bellow what animation library you are using.

How to Develop the Right Mindset as a Programmer

Jenuel Oras Ganawed — Sun, 22 Dec 2024 15:02:30 +0000

Programming is not just about writing code; it's a journey of problem-solving, continuous learning, and resilience. Having the right mindset is crucial, not just to survive in this ever-evolving field, but to thrive and find fulfillment in your work. Let’s explore how you can cultivate the mindset that will set you apart as a programmer.

First and foremost, embrace the reality that programming is a field of constant learning. Technology changes rapidly, and what is relevant today might be obsolete tomorrow. Instead of feeling overwhelmed, adopt a curiosity-driven approach. Treat each new challenge as an opportunity to grow. The mindset shift from “I have to learn” to “I get to learn” can make a world of difference. It transforms the pressure of staying updated into the excitement of exploring new possibilities.

Another key aspect of a programmer’s mindset is accepting that failure is part of the process. Bugs, errors, and setbacks are inevitable. What matters is how you respond to them. Instead of viewing failures as roadblocks, see them as stepping stones to improvement. Debugging, after all, is at the heart of programming. Each error you fix not only makes your code better but also deepens your understanding. Cultivate patience and perseverance, knowing that each problem you solve builds your confidence and competence.

Problem-solving lies at the core of programming. To excel, train yourself to think logically and systematically. Break down complex problems into smaller, manageable pieces. This practice not only makes challenges less intimidating but also sharpens your analytical skills over time. Remember, it’s not about having all the answers upfront; it’s about knowing how to approach a problem and work through it methodically.

Collaboration is another essential mindset for programmers. While coding might often feel like a solitary activity, in reality, you’ll frequently work in teams or communities. Be open to feedback and ready to learn from others. A great programmer knows that they don’t know everything and is eager to tap into the collective knowledge of their peers. Whether through code reviews, forums, or open-source contributions, collaboration can accelerate your growth and broaden your perspective.

Time management and prioritization are vital skills that go hand in hand with the right mindset. As a programmer, you’ll juggle multiple tasks, deadlines, and sometimes competing priorities. Instead of trying to do everything at once, focus on what’s most impactful. Learn to say no when necessary and set realistic goals. By managing your time effectively, you reduce stress and create space for deeper focus and creativity.

Equally important is the ability to adapt to change. Whether it’s a sudden shift in project requirements or a need to pivot to a new technology stack, flexibility is key. The best programmers are those who can quickly adjust their approach without losing momentum. This adaptability comes from a mindset that sees change not as a threat but as an opportunity to innovate and improve.

Lastly, don’t underestimate the power of a positive attitude. Programming can be frustrating at times, but maintaining an optimistic outlook can keep you motivated. Celebrate small wins along the way, whether it’s solving a tricky bug, learning a new concept, or completing a project. These moments of accomplishment fuel your passion and remind you why you chose this path in the first place.

The right mindset for a programmer is a blend of curiosity, resilience, collaboration, and adaptability. It’s about embracing challenges, learning continuously, and staying positive even when things get tough. By cultivating this mindset, you’re not just becoming a better programmer—you’re setting yourself up for a rewarding and sustainable career in tech. Programming is as much about growth as it is about code, and the journey is as rewarding as the destination.

Cheers! 🍻🍻🍻

If you enjoy this article and would like to show your support, you can easily do so by buying me a coffee. Your contribution is greatly appreciated!

Should You Continue Learn Your Stack or Learn New Tools

Jenuel Oras Ganawed — Sat, 02 Nov 2024 13:46:44 +0000

When you start your programming journey, it’s easy to fall in love with the first stack you master. You spend hours learning the syntax, exploring the libraries, and solving real-world problems with it. Before you know it, you’ve built a comfort zone—whether that’s in JavaScript, Python, PHP, or whatever your stack of choice might be. The question then arises: Should you continue refining your skills in this familiar environment, or venture out to learn new tools, even the ones you’re not so excited about?

As a developer, it’s easy to stick to what you know. But here's the truth—exploring new tools, languages, and frameworks, especially the ones you’re hesitant to dive into, can lead to massive growth. In this blog post, we’ll explore why learning new tools, even those you don’t like, can make you a better developer, and how you can strike a balance between deepening your current stack knowledge and broadening your horizons.

1. Growth Happens Outside the Comfort Zone

Let’s face it: change is hard. When you’ve spent years mastering JavaScript or diving deep into Python, it’s natural to feel reluctant to try out something like Rust, Go, or even tools like Docker or Kubernetes, which might not seem immediately exciting. But growth rarely happens in comfort. Every time you challenge yourself to learn something new, you’re expanding your skill set, problem-solving abilities, and the way you think about code.

Think about this: if you only stick to what you know, you’re limiting your potential. By learning new tools, you can approach familiar problems from a fresh perspective. You’ll discover new ways to optimize your current workflow or even realize that some tasks you’ve been doing manually can be automated or handled better with other tech.

2. Understanding the Bigger Picture

In the world of software development, nothing exists in isolation. Whether you’re a backend or frontend developer, learning about databases, DevOps tools, or even mobile frameworks can help you understand how the entire system works. This holistic understanding is crucial when collaborating with cross-functional teams, or when you’re looking to move into more senior roles where you’re expected to architect entire solutions.

For example, if you’re a backend developer who has never touched frontend tools, you may not fully understand the impact of your API design on the user experience. By learning a bit about the frontend stack, or experimenting with tools like React, you start to see how seemingly small changes can make a big difference for your users. Similarly, learning new tools like Docker for containerization or GraphQL for API queries can change how you approach backend development entirely.

3. New Tools, New Solutions

Sometimes, the tool you dislike the most can become the one that saves you the most time. Let’s take a practical example. You’ve been avoiding Docker because it seems complex or unnecessary. But if you’re constantly dealing with "It works on my machine" problems, or spending too much time setting up environments for every new project, Docker can save you days of work. By embracing this tool, even if you dislike it at first, you can speed up your development process and reduce headaches down the line.

Tools like Kubernetes, Terraform, or even new programming languages like Rust may seem overwhelming initially, but once you start seeing the efficiencies they bring, you’ll wonder how you ever lived without them. The key here is recognizing that sometimes, discomfort is the price you pay for better solutions.

4. Avoiding Stagnation

The tech world evolves fast. New languages, frameworks, and tools are being developed every year. If you only focus on mastering a single stack and ignore the latest technologies, you run the risk of falling behind. This doesn’t mean you have to chase every new trend (we all know that’s exhausting), but staying curious and open to learning helps you avoid stagnation in your career.

For instance, five years ago, many developers were primarily focused on monolithic architectures. Fast forward to today, and microservices have become the norm. If those developers hadn’t been open to learning new approaches, they’d have missed out on a huge shift in the industry.

5. Transferable Skills

Another great reason to explore new tools is that many skills you develop will transfer back to your original stack. Learning a new language or framework often forces you to adopt new ways of thinking that can improve your core skills. For example, learning a functional language like Haskell or a highly performant language like Rust may change how you write code in JavaScript or Python. You start paying more attention to immutability, performance optimizations, and how you handle side effects in your primary language.

Moreover, picking up DevOps tools or getting familiar with cloud platforms like AWS or Google Cloud can teach you how to better deploy, manage, and scale applications in ways you might not have considered before.

6. Breaking Monotony and Keeping Motivation High

Doing the same thing over and over can lead to burnout. Developers who focus too much on a single stack often find themselves feeling uninspired. Learning new tools can be the perfect antidote to this. It breaks the monotony and re-ignites that spark of curiosity that got you into programming in the first place.

It’s a simple equation: the more tools and languages you learn, the more versatile and employable you become. But it’s not just about getting more job offers—learning new tools keeps your passion for coding alive.

7. Balancing Mastery and Exploration

Now, you might be wondering, "Should I just keep jumping from one tool to the next?" Definitely not. It’s important to strike a balance. You don’t want to become a jack-of-all-trades and master of none. Continuously improving your current stack while learning new tools ensures that you’re both deepening your expertise and expanding your breadth of knowledge.

An effective approach could be to dedicate a portion of your time to mastering your stack, while also setting aside some time to experiment with new tools. Maybe focus on solidifying your core skills during the workweek, and explore new languages, frameworks, or tools over the weekends or during personal projects. This way, you’re not overwhelming yourself but still staying current and growing.

Conclusion: Embrace the Challenge

So, should you continue learning your stack or explore new tools? The answer is both. Staying sharp in your chosen stack is essential, but venturing out to learn new tools will make you a stronger, more adaptable developer. It’s often the tools you’re least excited about that push you the hardest, giving you new insights and skills that transform how you approach your work.

At the end of the day, programming is all about solving problems. The more tools you have in your toolbox, the more equipped you are to tackle any challenge that comes your way. So, step out of your comfort zone, and don’t be afraid to try something new. You might just surprise yourself.

If you enjoy this article and would like to show your support, you can easily do so by buying me a coffee. Your contribution is greatly appreciated!

The 3 Laws of Writing Readable Code - A Guide to Clean Programming

Jenuel Oras Ganawed — Sun, 27 Oct 2024 12:57:22 +0000

Writing code that others (and your future self) can easily understand is a crucial skill that separates experienced developers from beginners. In this guide, we'll explore three fundamental laws that will help you write more readable and maintainable code.

Law 1: Avoid Deep Nesting

Deep nesting is often a telltale sign of inexperienced programming. When code is heavily nested, readers need to hold multiple conditions in their mind while trying to understand the core logic. Let's look at a before and after example:

Before (Deeply Nested Code):

function calculateTaxes(user, cart) {
    if (!isMaintenancePeriod) {
        if (user.isAuthenticated) {
            if (user.isAuthorized) {
                if (cart.total > 0 && cart.items.length > 0) {
                    switch (user.taxRegion) {
                        case 'US':
                            return cart.total * 0.08;
                        case 'EU':
                            return cart.total * 0.20;
                        default:
                            return 0;
                    }
                }
            }
        }
    } else {
        return null;
    }
}

After (Improved Code):

function calculateTaxes(user, cart) {
    if (isMaintenancePeriod) {
        return null;
    }

    if (!isValidUser(user)) {
        return null;
    }

    if (!isValidCart(cart)) {
        return null;
    }

    return calculateRegionalTax(user, cart);
}

function isValidUser(user) {
    return user.isAuthenticated && user.isAuthorized;
}

function isValidCart(cart) {
    return cart.total > 0 && cart.items.length > 0;
}

function calculateRegionalTax(user, cart) {
    switch (user.taxRegion) {
        case 'US':
            return cart.total * 0.08;
        case 'EU':
            return cart.total * 0.20;
        default:
            return 0;
    }
}

Key improvements:

Used early returns to reduce nesting
Extracted complex conditions into well-named functions
Separated concerns into smaller, focused functions
Made the code's intent clear at each step

Law 2: Avoid Code Duplication

Duplicated code is a maintenance nightmare. When similar logic appears in multiple places, making changes becomes risky and time-consuming. Here's an example:

Before (With Duplication):

function getUserProfile(id) {
    const cacheKey = `user_${id}`;
    const cachedData = cache.get(cacheKey);

    if (cachedData) {
        response.writeHead(200, { 'Content-Type': 'application/json' });
        response.end(JSON.stringify(cachedData));
        return;
    }

    const userData = database.fetchUser(id);
    cache.set(cacheKey, userData);
    response.writeHead(200, { 'Content-Type': 'application/json' });
    response.end(JSON.stringify(userData));
}

function getTeamProfile(id) {
    const cacheKey = `team_${id}`;
    const cachedData = cache.get(cacheKey);

    if (cachedData) {
        response.writeHead(200, { 'Content-Type': 'application/json' });
        response.end(JSON.stringify(cachedData));
        return;
    }

    const teamData = database.fetchTeam(id);
    cache.set(cacheKey, teamData);
    response.writeHead(200, { 'Content-Type': 'application/json' });
    response.end(JSON.stringify(teamData));
}

After (Without Duplication):

function getUserProfile(id) {
    return getCachedData(
        `user_${id}`,
        () => database.fetchUser(id)
    );
}

function getTeamProfile(id) {
    return getCachedData(
        `team_${id}`,
        () => database.fetchTeam(id)
    );
}

function getCachedData(cacheKey, fetchData) {
    const cachedData = cache.get(cacheKey);

    if (cachedData) {
        return sendJsonResponse(cachedData);
    }

    const freshData = fetchData();
    cache.set(cacheKey, freshData);
    return sendJsonResponse(freshData);
}

function sendJsonResponse(data) {
    response.writeHead(200, { 'Content-Type': 'application/json' });
    response.end(JSON.stringify(data));
}

Key improvements:

Extracted caching logic into a reusable function
Separated response handling into its own function
Made the code more maintainable and DRY (Don't Repeat Yourself)
Reduced the risk of inconsistent implementations

Law 3: Use Clear and Meaningful Names

Cryptic variable and function names make code impossible to understand. Always use descriptive names that clearly convey purpose and intent.

Before (Poor Naming):

function calc(a, b) {
    let res = 0;
    let tmp = a;
    for (let i = 0; i < b; i++) {
        res += tmp;
    }
    return res;
}

After (Clear Naming):

function multiply(multiplicand, multiplier) {
    let product = 0;
    let currentValue = multiplicand;
    for (let count = 0; count < multiplier; count++) {
        product += currentValue;
    }
    return product;
}

Key improvements:

Used descriptive function name that explains the purpose
Chose variable names that reflect their roles
Made the code self-documenting
Enhanced readability without adding comments

Conclusion

Following these three laws will dramatically improve your code's readability:

Avoid deep nesting by using early returns and extracting complex logic
Eliminate code duplication by creating reusable functions
Use clear, meaningful names that explain purpose and intent

Remember, code is read far more often than it is written. Taking the time to make your code readable will save countless hours for both you and your fellow developers in the long run.

If you enjoy this article and would like to show your support, you can easily do so by buying me a coffee. Your contribution is greatly appreciated!

Forem: Jenuel Oras Ganawed

The Hidden Cost of Free AI: Don’t Let ChatGPT Replace Your Thinking

How to Detect If a User Is Using a VPN with JavaScript

"Can I detect if a user is using a VPN?"

Basic Idea

Example Code

Things to Keep in Mind

Things to Keep in Mind

The Rise of AI: A Turning Point for All of Us

What Does Your Desk Look Like?

Laravel Cloud to Save the Day: A Game-Changer for Laravel Developers

What is Laravel Cloud?

Why Laravel Developers Should Be Excited

How to Get Started

Things I Like About Laravel Cloud

🚀 Effortless Deployment

💻 Run Custom Commands

🆓 Free Tier for Testing

🔧 No Configuration Hassles

🎨 Developer-Friendly UI

Limiting Docker RAM Usage on Windows

How to Limit RAM Usage for Docker in WSL 2

1. Navigate to Your User Directory

2. Edit or Create the .wslconfig File

3. Restart WSL

JavaScript Functions Developers Should Know

Basic Utility Functions

How Debounce Works

How Throttle Works

Array and Object Manipulation

String Manipulation

Dom Manipulation

Event Handling

How It Works:

Date & Time

How It Works:

Fetch & Async/Await

Why Is This Function Great Without Using Axios?

🎯 When Should You Consider Using fetch Over Axios?

Functional Programming Helpers

How It Works:

🎯 Why Use randomString?

How to Code Clean: Best Practices for Writing Maintainable and Efficient Code

What is Clean Code?

Why Does Clean Code Matter?

Principles of Clean Code

1. Follow the DRY Principle (Don’t Repeat Yourself)

2. Keep It Simple (KISS Principle)

3. Use Meaningful Names

4. Write Small Functions

5. Comment Sparingly, but When Necessary

6. Follow Consistent Formatting

7. Avoid Deep Nesting

8. Write Tests

Tips for Writing Clean Code

Example: Clean Code in Action

Before:

After:

Conclusion

Animation Library You Can Use for your Web Apps

GSAP

ScrollReveal

AnimeJS

Motion.Dev

Auto Animate

TypedJs

MoJS

How to Develop the Right Mindset as a Programmer

Should You Continue Learn Your Stack or Learn New Tools

1. Growth Happens Outside the Comfort Zone

2. Understanding the Bigger Picture

3. New Tools, New Solutions

4. Avoiding Stagnation

5. Transferable Skills

6. Breaking Monotony and Keeping Motivation High

7. Balancing Mastery and Exploration

Conclusion: Embrace the Challenge

The 3 Laws of Writing Readable Code - A Guide to Clean Programming

Law 1: Avoid Deep Nesting

Before (Deeply Nested Code):

2. Edit or Create the `.wslconfig` File

🎯 When Should You Consider Using `fetch` Over Axios?

🎯 Why Use `randomString`?