DEV Community: Eka Prasetia

Tired of Copy-Pasting Commands?, I Built a Better Way

Eka Prasetia — Tue, 14 Apr 2026 12:28:06 +0000

At a complex sequence of git, pnpm, and docker commands, trying to remember the exact flags for a clean build and deploy. Usually, this involves a round-trip to an LLM, a "hope this doesn't break everything" copy-paste, and a prayer to the terminal gods.

The problem isn't the AI's ability to help, it's the lack of a validation layer between a model's potential hallucination and your actual file system. We need a way to turn "plain English" into executable, schema-validated plans that we can actually review before hitting enter.

json-cli solves this by acting as a strict task runner. It takes your intent, generates a JSON plan validated by a Zod schema, and checks it against a whitelist of allowed commands. It's essentially a "Safety First" AI wrapper for your terminal that supports Claude, OpenAI, and even local models via Ollama. By moving from raw strings to validated JSON, you get the speed of AI with the guardrails of a predictable state machine.

Here is how you can put your terminal on autopilot without losing control:

1. Natural Language Task Execution

Instead of remembering every flag, just describe the goal. The CLI handles the translation into a valid command string.

# Single intent
json-cli "please run tests"

# Multiple intents in one go
json-cli "heyy ... run typecheck, test and then check git status"

2. Flexible Provider Support

You aren't locked into one API. You can use Claude for complex logic or Ollama if you want to keep your task descriptions entirely local and private.

# Using OpenAI
pnpm dev "run build and publish" --provider openai

# Using Ollama (Local)
pnpm dev "start dev server" --provider ollama

3. The Safety Catalog

The runner doesn't just execute anything. It checks a whitelist of allowed commands (pnpm, npm, git, etc.) to prevent the AI from accidentally running something destructive.

# The workflow looks like this:
# User Prompt -> AI Provider -> JSON Plan (Zod Validated) -> Catalog Check -> User Confirm -> Execution

Wrap Up

The future of CLI work isn't memorizing every flag in a man page, it's about describing the goal and having a validated system handle the boilerplate. By moving to a JSON-first execution model, json-cli gives you a "Confirm before you Commit" workflow that makes AI-assisted terminal work actually safe for production.

Check out the task catalog, review the validation schema, or contribute to the project at this repository: github.com/ekaone/json-cli

Happy intent 😉

Stop Guessing, Start Measuring: Why Your App Needs a Shannon Entropy Check

Eka Prasetia — Mon, 23 Mar 2026 08:35:06 +0000

We've all been there: a user sets their password to password123, or worse, a junior dev accidentally hardcodes a "test" API key into a frontend component. Standard regex checks for length and character sets are fine, but they don't actually tell you how predictable a string is. This is the "hidden" security debt in most apps. If you can't quantify the randomness of a secret, you're just crossing your fingers and hoping for the best. By measuring Shannon Entropy, we move from "this looks like a string" to "this string is mathematically complex enough to be secure."

Example

Here are a few ways to bake these checks into your workflow using a lightweight approach:

1. Validating API Keys in Middleware

Stop invalid or "dummy" keys before they hit your database. If the entropy is too low, it’s probably a placeholder.

import { calculate } from '@ekaone/entropy';

const apiKey = "key_12345"; // Way too predictable
if (calculate(apiKey).entropy < 3.5) {
  throw new Error("Security Risk: Token entropy is too low.");
}

2. Smart Password Strength Meters

Instead of yelling at users for missing a capital letter, give them a real-time "Complexity Score" based on actual data density.

const userPass = "CorrectHorseBatteryStaple";
const score = calculate(userPass).entropy;

console.log(`Password Complexity: ${score.toFixed(2)} bits`);
// A much more "human" way to handle security UX.

3. Detecting Secret Leaks in CI/CD

You can run a quick scan over your config files. If a string suddenly spikes in entropy, there’s a high chance someone accidentally pasted a private key where it doesn't belong.

const configValue = process.env.DATABASE_URL;
if (calculate(configValue).entropy > 4.5) {
  console.warn("Caution: High entropy detected. Ensure this secret is masked!");
}

Finally

It’s a small addition to your stack that pays off the moment it catches a "123456" hiding in your production environment.

You can grab the source code, check the math, or contribute to the footprint-reduction movement over at the repository.

Install it, no judgment here:

npm install @ekaone/entropy
# or
yarn add @ekaone/entropy
# or
pnpm add @ekaone/entropy

The code lives here, fully open, zero drama:
👉 GitHub: https://github.com/ekaone/entropy

Happy coding!!

Stop Leaking Names Like It’s Harmless

Eka Prasetia — Fri, 20 Mar 2026 13:25:30 +0000

Masking emails? Obvious. Tokens? Critical. But names? Somehow they always sneak into logs, dashboards, exports—fully visible like it’s no big deal. Until it is. Names are still personal data, and once they’re everywhere, good luck cleaning that up. That’s exactly where mask-name comes in: a tiny, zero-dependency utility to mask names properly across Latin and CJK (Chinese/Japanese) scripts, without breaking readability or context.

1. Basic usage (Latin names)

import { maskName } from "@ekaone/mask-name";

maskName("Eka Prasetia");
// → { masked: "E*a P*****ia", script: "latin", original: "Eka Prasetia" }

You still recognize the person. You just don’t expose the full name to the world. That’s the sweet spot.

2. CJK support (this is where it gets interesting)

maskName("张伟");
// → { masked: "张*", script: "cjk", original: "张伟" }

maskName("田中さくら", { locale: "ja" });
// → { masked: "田**くら", script: "cjk", original: "田中さくら" }

No hacks, no weird splitting logic. It understands character-based names out of the box.

3. Real-world messy input (mixed scripts)

maskName("John 田中");
// → { masked: "J**n 田*", script: "cjk", original: "John 田中" }

Because real data is never clean. And yes, this still works without you babysitting it.

That’s it — keep it simple

If your app logs names, shows user data, or exports anything remotely sensitive, this is one of those utilities.

Wanna try, install it 👇🏼

npm install @ekaone/mask-name
# or
yarn add @ekaone/mask-name
# or
pnpm add @ekaone/mask-name

👉 Codebase: https://github.com/ekaone/mask-name

Small, predictable, and does exactly what it should—no more, no less.

Happy coding!😄

A Developer-Friendly Way to Mask API Tokens Without Losing Context

Eka Prasetia — Mon, 09 Feb 2026 04:16:19 +0000

Yooo—real talk for a second.
If you’ve ever logged an API token “just for debugging” and immediately promised yourself you’d remove it later… this post is for you. Tokens are short, powerful, and absolutely not something you want hanging around in logs, UIs, or error traces.

mask-token is a tiny TypeScript utility built for one simple job: hide sensitive tokens without breaking developer ergonomics. It doesn’t try to guess what your token is or where it came from. It just masks it, predictably, safely, and with defaults that make sense.

Basic usage

maskToken('sk_live_1234567890abcdef')
// sk_live_***************cdef

You still recognize the token. Attackers don’t. Everyone wins.

The API stays intentionally flat and boring (again: a compliment). You control how much is visible at the start or end, what character is used for masking, and nothing more than that.

maskToken('ghp_abcdef1234567890', {
  showFirst: 4,
  showLast: 4,
})
// ghp_************7890

No config objects the size of a novel. No security theater. Just enough flexibility to cover logs, dashboards, and admin panels.

This example shows where mask-token goes a step further than simple string masking. By enabling includeMetadata, the function doesn’t just hide the sensitive parts of the token—it explains what it’s looking at. The result includes a safely masked value for logs or UI, plus structured metadata that identifies the token type (here, an NPM token), its prefix, and a confidence score indicating how likely this string is a real secret. On top of that, you get lightweight validation and risk signals without exposing the original value. It’s a very dev-friendly balance: your app stays privacy-safe, while you still get enough context to debug, audit, or alert intelligently—without ever printing the actual secret.

import { maskToken } from '@ekaone/mask-token'; 
const result = maskToken('npm_secret123', { includeMetadata: true }); console.log(result); 
// { 
// masked: 'npm_••••••••t123', 
// metadata: { 
//  type: 'NPM Token', 
//  prefix: 'npm_', 
//  confidence: 1.0, 
//  isLikelyToken: true 
// }, // validation: { 
//  valid: true, 
//  warnings: [], 
//  riskScore: 0 
// }, 
// original: { 
//  length: 17, 
//  hasPrefix: true 
//  } 
// }

JWT style

For JWT, this example gets even more interesting with structured secrets like JWTs. Instead of treating the token as one long opaque string, mask-token can switch modes and mask by segment. With mode: 'jwt', each part of the token (header, payload, signature) is partially revealed and safely obscured in a way that’s still recognizable to developers.

maskToken(jwt, { mode: 'jwt' });
// → 'eyJ•••.eyJ•••.doz•••'

Recognize 40+ token formats

One of the quietly powerful parts of mask-token is its built-in awareness of real-world secrets. It can automatically recognize 40+ token formats across version control, CI/CD, payments, cloud providers, and AI platforms—everything from npm_ and ghp_ to Stripe, AWS, Slack, and OpenAI keys. This means the library doesn’t just mask strings blindly; it understands what kind of secret it’s dealing with and reacts accordingly. For developers, that translates to smarter masking, better metadata, and fewer false positives—without maintaining a growing pile of regexes that everyone is afraid to touch.

NPM (npm_)
GitHub (ghp_, gho_, ghu_, ghs_, ghr_)
GitLab (glpat-, gldt-)
Docker Hub (dckr_pat_)
Payment & Commerce

Stripe (sk_test_, sk_live_, pk_test_, pk_live_)
Shopify (shpat_, shpca_, shpss_)
Communication

Slack (xoxb-, xoxp-, xoxa-, xoxr-)
Twilio (SK*, AC*)
SendGrid (SG.)
Cloud Providers

AWS (AKIA, ASIA)
Google Cloud (AIza)
DigitalOcean (dop_v1_)
AI/ML Services

OpenAI (sk-, sk-proj-)
Anthropic (sk-ant-)

Under the hood, mask-token is dependency-free and defensive by default. Short tokens stay readable, absurd option values won’t leak data, and edge cases won’t surprise you in production. Privacy-friendly by design, it helps you stay aligned with GDPR and general data-protection best practices—without pretending to be a full security framework.

Install it, no judgment here:

npm install @ekaone/mask-token
# or
yarn add @ekaone/mask-token
# or
pnpm add @ekaone/mask-token

The code lives here, fully open, zero drama:
👉 GitHub: https://github.com/ekaone/mask-token

A Tiny TypeScript Utility to Mask Emails - GDPR-Friendly by Design

Eka Prasetia — Thu, 05 Feb 2026 07:45:11 +0000

Hi, do you ever dumped logs to debug something simple ...? and suddenly realized you just logged real email addresses? Yeah. That little chill down your spine is called "future GDPR paperwork". This tiny TypeScript utility exists to make sure that moment never happens again.

mask-email does one job and does it cleanly: mask email addresses without being clever in the wrong places. By default, it keeps a couple of characters visible and hides the rest—enough to identify a user, not enough to get you fired.

maskEmail('ekaone3033@gmail.com')
// ek********@gmail.com

maskEmail('john.doe@example.com')
// jo******@example.com

No regex soup, no assumptions about email length, and no surprises when usernames are short or weird.

When you need more control, the options stay flat and readable. You can tweak visible characters, change the mask symbol, or even mask the domain when you’re dealing with internal systems or logs.

maskEmail('admin@mail.company.com', {
  visibleChars: 1,
  maskDomain: true,
})
// a****@m***.c******.com

There’s also a viewable switch for those moments when masking needs to be conditionally disabled—because real-world code paths are rarely pure.

maskEmail('secret@company.com', { viewable: true });
// Output: 'secret@company.com'

Under the hood, it’s small, dependency-free, and aggressively boring (again: a compliment). Inputs are validated, edge cases are handled, and nothing tries to be smarter than it should be. Privacy-friendly by design, it helps you stay aligned with GDPR and common data-protection practices—without turning a simple utility into a legal document. Drop it into UI, logs, or analytics, and move on with your day.

Wanna try it? 😏

The code lives here, fully open, zero drama:
👉 GitHub: https://github.com/ekaone/mask-email

Install it, no judgment here:

npm install @ekaone/mask-email
# or
yarn add @ekaone/mask-email
# or
pnpm add @ekaone/mask-email

That’s it. No post-install rituals, no peer-dependency surprises 😲

Happy coding — and may your emails stay masked.

Raw phone numbers leaking will ruin your whole day

Eka Prasetia — Wed, 04 Feb 2026 04:30:48 +0000

"Yooo—quick question. Are you thirsty?
because I’m about to spill some digits… just not all of them."

Shipping phone masking sounds trivial ... until you meet international formats, weird inputs, and that one QA test with +62 (812)-3456..7890. This TypeScript phone masking utility is built for that reality, follows GDPR and data protection standards, zero locale assumptions, accepts strings or numbers, and safely normalizes whatever chaos you throw at it. No country rules, no phone metadata databases, predictable masking that doesn’t fight you.

The default behavior is intentionally boring (in a good way), mask everything except the last 4 digits.

maskPhone('1234567890')
// ******7890

maskPhone('+62 812 3456 7890')
// +*********7890

You don’t need to configure anything to get sane output, which is exactly how a utility like this should behave.

When you do need control, the API stays flat and readable. Want to expose a few digits at the front? Preserve formatting for UI display?

maskPhone('628123456789', { showFirst: 3, showLast: 2 })
// 628*******89

maskPhone('+1 (555) 123-4567', { preserveFormat: true })
// +* (***) ***-4567

No magic. No surprises. The function does exactly what the options say—nothing more, nothing less.

And for the “I know what I’m doing” crowd, there’s customMask. This option overrides everything and gives you full control per character.

maskPhone('1234567890', {
  customMask: (char, idx) => (idx % 2 === 0 ? '*' : char),
})
// *2*4*6*8*0

Is this something you should do? Maybe not. But when you need it, you’ll be very glad it’s there.

Under the hood, the code stays tiny, dependency-free, and aggressively defensive 👉: nulls won’t crash it, absurd option values won’t leak data, and long inputs won’t melt your logs.

It’s the kind of utility you drop into UI, analytics, or logging and then forget about—which is the highest compliment you can give masking code.

Wanna try it? (you know you do 😏)

The code lives here, fully open, zero drama:
👉 GitHub: https://github.com/ekaone/mask-phone

Install it, no judgment here:

npm install @ekaone/mask-phone
# or
yarn add @ekaone/mask-phone
# or
pnpm add @ekaone/mask-phone

That’s it. No post-install rituals, no peer-dependency surprises 😲, no "why is this 3MB?".

Uncontrolled vs Controlled React Components

Eka Prasetia — Wed, 04 Feb 2026 03:50:08 +0000

React offers developers various methods to manage and handle components within applications. Two prevalent approaches to managing components are uncontrolled and controlled components. While both serve the same purpose of managing user inputs and interactions, they differ significantly in their implementation and use cases.

Uncontrolled Components:

Uncontrolled components in React are those where the component state is handled by the DOM itself rather than by React. This means that React doesn't have direct control over the values within these components. Instead, the state is managed by the DOM, and React simply interfaces with it. Uncontrolled components are typically initialized with default values and then allow the DOM to manage changes thereafter.

Advantages of Uncontrolled Components:

DOM-Driven: In an uncontrolled component, the form data is managed by the DOM itself. The DOM maintains the state of form elements (e.g., input values) independently.
Integration with Non-React Code: Uncontrolled components are useful when integrating React with non-React code. Since the source of truth remains in the DOM, it’s easier to work with external libraries or legacy code.
Simplified Implementation: Uncontrolled components are often simpler to implement, especially for forms with a large number of inputs. Since there's no need to manage state within React, developers can focus solely on the presentation layer.
Better Performance: Uncontrolled components can offer better performance in certain scenarios, especially when dealing with large forms. Since React isn't directly involved in managing the state, there's less overhead involved in re-rendering components.

Disadvantages of Uncontrolled Components:

Limited Control: With uncontrolled components, React relinquishes control over the component state to the DOM. This can lead to issues when trying to enforce certain validation rules or when integrating with other React features like PropTypes or Context API.
Difficulty in Testing: Testing uncontrolled components can be more challenging since the component state is not managed by React. This makes it harder to simulate user interactions and assert expected outcomes during testing.

Example:

import React, { useRef } from "react";

function UncontrolledForm() {
  const inputRef = useRef(null);

  function handleSubmit(event) {
    event.preventDefault();
    console.log("Submitted value:", inputRef.current.value);
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" ref={inputRef} defaultValue="John Doe" />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

export default UncontrolledForm;

In this example, the input field is uncontrolled because its value is managed by the DOM itself. The defaultValue attribute sets the initial value of the input field, but React doesn't control subsequent changes to its value.

Controlled Components:

Controlled components, on the other hand, are components where React controls the state of the component. This means that React manages the component's state and updates it in response to user interactions. In controlled components, the component's state is kept in sync with React's state.

Advantages of Controlled Components:

Full Control: With controlled components, React maintains full control over the component's state. This allows for easier enforcement of validation rules, integration with other React features, and better overall predictability in application behavior.
Improved Testing: Testing controlled components is often easier since React manages the component's state. Developers can simulate user interactions by directly modifying the component's state and assert expected outcomes more effectively.
State Management: In a controlled component, the form data (such as input values) is stored in the component’s state. Each form element (like input, select, textarea) is associated with a state variable. When the user interacts with the form (typing, selecting, etc.), the component’s state is updated accordingly.
Event Handling: We use event handlers (like onChange) to capture user input. For instance, when the user types in an input field, the onChange event updates the corresponding state variable.

Disadvantages of Controlled Components:

Increased Complexity: Controlled components can be more complex to implement, especially for forms with a large number of inputs. Developers need to manage the component's state explicitly, which can lead to boilerplate code and increased cognitive load.
Potential Performance Overhead: Since React manages the component's state, there can be performance implications, especially for large forms or components with frequent updates. Re-rendering controlled components can be more resource-intensive compared to uncontrolled components.

Example:

import React, { useState } from "react";

function ControlledForm() {
  const [name, setName] = useState("John Doe");

  function handleChange(event) {
    setName(event.target.value);
  }

  function handleSubmit(event) {
    event.preventDefault();
    console.log("Submitted value:", name);
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" value={name} onChange={handleChange} />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

export default ControlledForm;

In this example, the input field is controlled because its value is managed by React state. The value attribute is set to the name state variable, and the onChange event handler updates the state whenever the input value changes.

Thank you for reading this article. Happy coding! 🚀

Tokenizers The Building Blocks of Generative AI

Eka Prasetia — Wed, 04 Feb 2026 03:50:01 +0000

Originally written in 2023. Republished here.

Tokenizers are essential components of generative AI models, such as GPT-4, that can create various types of content, such as text, code, music, and images. Tokenizers are responsible for converting the input and output data into a format that the model can understand and manipulate. In this article, we will explore what tokenizers are, how they work, and why they are important for generative AI.

What are tokenizers?

Tokenizers are algorithms that split a given input into smaller units, called tokens, that can be processed by a generative AI model. Tokens can be words, characters, subwords, or even pixels, depending on the type and granularity of the input data. For example, a text tokenizer can split a sentence into words or subwords, while an image tokenizer can split an image into patches or pixels.

The output of a tokenizer is a sequence of tokens, each represented by a unique numerical identifier, called a token ID. The token IDs are then fed into the generative AI model as input or used to decode the output of the model. For example, a text tokenizer can map the word "hello" to the token ID 1234, and the word "world" to the token ID 5678. The input sequence [1234, 5678] can then be used to generate a new text output, such as [7890, 4321], which can be decoded back to words using the same tokenizer.

How do tokenizers work?

Tokenizers can be implemented in different ways, depending on the type and complexity of the input data. Some common types of tokenizers are:

Character-level tokenizers: These tokenizers split the input into individual characters, such as letters, digits, punctuation, and symbols. Character-level tokenizers are simple and flexible, but they can result in long sequences of tokens and limited vocabulary size.
Word-level tokenizers: These tokenizers split the input into words, based on whitespace and punctuation. Word-level tokenizers are intuitive and easy to understand, but they can result in out-of-vocabulary (OOV) tokens and misspellings.
Subword-level tokenizers: These tokenizers split the input into subwords, which are smaller units of words that capture common prefixes, suffixes, and stems. Subword-level tokenizers are more efficient and robust, as they can handle OOV tokens and rare words, but they can also result in unnatural splits and ambiguity.
Pixel-level tokenizers: These tokenizers split the input into pixels, which are the smallest units of an image. Pixel-level tokenizers are straightforward and universal, but they can result in high-dimensional and noisy input data.

Why are tokenizers important for generative AI?

Tokenizers are important for generative AI because they enable the model to learn from and generate diverse and complex types of data. Tokenizers can affect the performance and quality of the generative AI model in several ways, such as:

Data representation: Tokenizers determine how the input and output data are represented and encoded, which can influence the information and structure that the model can capture and manipulate.
Data processing: Tokenizers determine how the input and output data are processed and decoded, which can influence the speed and efficiency of the model's computation and generation.
Data quality: Tokenizers determine how the input and output data are split and mapped, which can influence the accuracy and diversity of the model's output.

Thank you for reading this article, have fun with generative AI! 🤖

Spread Operator

Eka Prasetia — Wed, 04 Feb 2026 03:49:55 +0000

In JavaScript, the spread operator (...) allows you to "spread" an iterable (like an array or object) into another. This can be used to achieve different effects, including merging arrays and objects.

Merging Arrays with Spread Operator

Here's how you can merge two arrays using the spread operator:

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];

const mergedArray = [...array1, ...array2];

console.log(mergedArray); // Output: [1, 2, 3, 4, 5, 6]

In this example, we're spreading the elements of array1 and array2 into a new array mergedArray. This creates a new array containing all the elements from both original arrays.

Merging Objects with Spread Operator

While merging objects with the spread operator is possible, it's important to understand its behavior:

Merging properties: When merging objects, the spread operator adds properties from the rightmost object to the leftmost one. If a property exists in both objects, the value from the rightmost object takes precedence.
Shallow copy: The spread operator only creates a shallow copy of the object. Nested objects within the merged object remain linked to the original object.

Here's an example:

const obj1 = { name: "Alice", age: 30 };
const obj2 = { city: "New York", age: 35 };

const mergedObj = { ...obj1, ...obj2 };

console.log(mergedObj); // Output: { name: "Alice", age: 35, city: "New York" }

// Modifying nested object in mergedObj affects obj1
mergedObj.age = 40;
console.log(obj1.age); // Output: 40

As you can see, the age property from obj2 takes precedence in the merged object. Additionally, modifying the nested object inside mergedObj also affects the original obj1 due to the shallow copy.

Cautions and Alternatives

While the spread operator provides a concise way to merge arrays and objects, be cautious of its shallow copy behavior when dealing with nested data. For deep merging objects, consider using alternative methods like Object.assign or libraries like Lodash_.merge that handle nested objects correctly.

I hope this explanation clarifies the concept of merging with the spread operator in JavaScript!

Merge with Spread Operator more easy. Take a note, if the objects contains same property, the right-post will overwrite.

const user1 = {
  name: "John",
  age: 40,
  admin: true,
};

const user2 = {
  name: "Dow",
  age: 35,
};

const merged = {
  ...user1,
  ...user2,
};

console.log(merged);
// { name: 'Dow', age: 35, admin: true }

Thank you for reading this article, I hope you find it useful. Happy coding! 🔥

An Introduction to Retrieval Augmented Generation (RAG)

Eka Prasetia — Wed, 04 Feb 2026 03:49:46 +0000

An Introduction to Retrieval Augmented Generation (RAG)

Retrieval augmented generation (RAG) is an approach in natural language processing that combines a neural retriever with a neural generator to produce coherent and factual text. RAG models have shown promising results in tasks like open-ended question answering, summarization, and dialogue.

How RAG Models Work

RAG models consist of two main components:

Retriever: This is responsible for retrieving relevant context documents or passages of text from a large corpus or database given a query or prompt. The retriever ranks and returns the most relevant texts. Popular retrievers include dense retrievers based on bi-encoders and sparse retrievers based on inverted indexes.
Generator: This takes the query and retrieved documents as input and generates an output text. The generator is usually a pre-trained language model like GPT-3. By conditioning the generation on relevant texts, the generator can produce more factual, specific, and coherent outputs.

During inference, the retriever first retrieves relevant contexts for the given query or prompt. The generator then conditions on these contexts as well as the original query to generate the final output. The retriever and generator are trained jointly, often with a Generative QA (GenQA) objective of maximizing the likelihood of generating the ground truth text.

Benefits of RAG Models

Some key benefits of RAG models include:

Knowledgeable: By retrieving relevant information, RAG models can incorporate facts and knowledge into generated text. This makes them better at factual correctness.
Specific: Retrieved texts provide useful cues to generate more focused and specific outputs.
Coherent: The generator can draw connections between the retrieved contexts and query to produce holistic coherent text.
Scalable training: RAG models provide a more sample efficient way to inject knowledge into generators compared to having to train end-to-end on massive datasets.

RAG Applications

RAG models have shown promising results on several NLP tasks:

Question answering: RAG can answer open-ended questions by retrieving related passages and generating from them.
Summarization: RAG can summarize long documents by retrieving salient passages.
Dialogue: RAG can make chatbots and assistants more knowledgeable by retrieving useful context.
Multi-hop reasoning: RAG can do complex inference by chaining and reasoning over multiple retrieved passages.

Overall, RAG offers an effective way to make NLG models more factual, specific, and knowledgeable. As retrieval indexes and pre-trained models continue to improve, we can expect further advances in RAG's capabilities.

React Function and Class Components

Eka Prasetia — Wed, 04 Feb 2026 03:49:41 +0000

In React, you have two main ways to define components: function components and class components. Both serve the same purpose—to create reusable blocks of UI—but they have different approaches and use cases.

Function Components:

Defined as simple JavaScript functions that accept props (properties from parent components) as arguments and return JSX (a syntax extension for defining UI elements).
Easier to write and understand, especially for simpler components.
Don't have access to lifecycle methods (like componentDidMount) or state directly.
Since React 16.8, can use hooks (like useState, useEffect) to handle state and side effects.

Example:

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

Class Components:

Defined as JavaScript classes that extend React.Component.
More complex syntax, but offer lifecycle methods and direct state management.
Suitable for components with complex behavior or interactions with external data sources.

Example:

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={this.handleClick}>Click me</button>
      </div>
    );
  }
}

Another ways sample React JS Function and Class components

Function component

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Class component

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Demo

import React from "react";
import ReactDOM from "react-dom";

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

class WelcomeClass extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

const element = <Welcome name="Eka" />;
const elementClass = <WelcomeClass name="Eka" />;

ReactDOM.render(element, document.getElementById("root"));
ReactDOM.render(elementClass, document.getElementById("root-class"));

Choosing the Right Component:

Simple UI: Use function components for basic rendering without state or lifecycle needs.
Complex behavior or state: Use class components for components with state management, external data fetching, or lifecycle methods.
Modern React: Since React 16.8, function components with hooks are often preferred due to their simplicity and compatibility with future features.

Additional Considerations:

Performance: Function components are generally considered slightly faster than class components, especially for simpler ones.
Readability: Both can be readable, but function components with hooks sometimes provide cleaner syntax.
Community preference: Function components with hooks are the current trend and often recommended in the React community.

Ultimately, the best choice depends on your specific component's needs and complexity. Consider all factors and experiment to find what works best for you and your project.

Thank you for reading this article, I hope you find it useful. Happy coding! 🔥

Method chains allow a series of functions

Eka Prasetia — Wed, 04 Feb 2026 03:49:35 +0000

Method chaining in JavaScript involves chaining multiple method calls together on the same object or result. This pattern is commonly used with array methods like filter, map, reduce, and others, where each method returns a new array or value, allowing you to call another method on the result.

Let's take an example using array methods:

const numbers = [1, 2, 3, 4, 5];

const result = numbers
  .filter(num => num % 2 === 0) // Filter even numbers
  .map(num => num * 2) // Double each remaining number
  .reduce((acc, num) => acc + num, 0); // Sum up the doubled numbers

console.log(result); // Outputs 18 (2*2 + 4*2 + 5*2)

In this example, numbers is an array, and we chain three array methods together: filter, map, and reduce. Here's how it works:

Filter: The filter method is used to create a new array containing only the even numbers from the original array.
Map: The map method is then applied to double each number in the filtered array, creating a new array.
Reduce: Finally, the reduce method is used to sum up all the doubled numbers in the mapped array, resulting in a single value (18 in this case).

Method chaining improves code readability and reduces the need for intermediate variables. It allows you to express a series of operations on data in a more concise and declarative manner.

Another common use case for method chaining is with array of objects, for example:

let cart = [
  { name: "Drink", price: 3.12 },
  { name: "Steak", price: 45.15 },
  { name: "Drink", price: 11.01 },
];

const drinkTotal = cart
  .filter(item => item.name === "Drink")
  .map(item => item.price)
  .reduce((total, price) => total + price, 0)
  .toFixed(2);

console.log(`Total Drink Cost $${drinkTotal}`); // Total Drink $14.13

Thank you for reading this article, I hope you find it useful. Happy coding! 🔥