DEV Community: Ryoichi Homma

What is a GitHub Gist? Here's Why You Should Use

Ryoichi Homma — Thu, 04 Sep 2025 14:54:05 +0000

Have you ever wanted to share just a small piece of code, but didn't want to create a whole GitHub repo or share your private repo?

Gist is a solution!✨

I recently had an opportunity to use it for the first time, and I thought it would be helpful to share what it is and when to use it.

1. What is a Gist?

A gist is like a mini Git repository for snippets, configs, or notes.
It can be public or secret.
It supports version control and forking, just like a normal repo.

2. Why Do We Use a Gist?

Quick and easy sharing (no repo setup needed).
Lightweight and focused (no extra files or clutter).
Embeddable in blogs, documentation, Stack Overflow, etc.
Keeps version history.
Great for examples, bug reports, tutorials, and cofigs.

3. Repo vs. Gist — When to Use What

Use a repo when:
- You're building a full project.
- You need structured collaboration (issues, pull requests, branches).
Use a gist when:
- You want to share just a snippet or a single file.
- You want to share code but don't want to add someone as a repo collaborator.
- You need an easy embeddable example.
- You want something fast and temporary.

4. Real Scenarios Where Gist Shines

Sharing a snippet with someone outside your private repo.
Writing a tutorial/blog and embedding example code.
Submitting a minimal reproducible example when reporting a bug.
Keep personal dotfiles, scripts, or cheat sheets.

5. How to Share Code with a Gist

Go to gist.github.com
Paste your code snippet in the editor.
- You can add a filename with extension (e.g., example.tsx) for syntax highlighting.

Add a description optionally.
Choose either public or secret gist.

Click "Create public gist" or "Create secret gist".
Share the link.

Tip: You can embed a gist in Markdown by pasting the link directly—it will render as a nice embedded snippet.

6. Official Gist Guideline

For more details, check out the official guide, Creating gists, where you can explore more about gists.

Conclusion

Next time you just need to share a snippet, try a gist instead of snipping up a new repo.

Have you used gists before?
What's your favorite use case?

👇Please let me know by the comment down below.👇

Essential Features & Concepts in Frontend You Must Know Before Technical Interviews

Ryoichi Homma — Thu, 04 Sep 2025 07:12:43 +0000

As I am preparing for a technical job interview for a frontend engineer position, I have decided to brush up on my frontend domain knowledge by writing this article.

Agenda

JavaScript Foundational Concepts
ES5 vs. ES6
TypeScript vs. JavaScript
React Features
Vue Features
Recommended Resource

1. JavaScript Foundational Concepts:

1.1. DOM Methods

DOM method is an action or function that can be performed on elements within the Document Object Model (DOM) of a web page. The DOM represents the structure of an HTML document as a tree of objects, where each part of the document (like elements, attributes, text) is a node in this tree.

document.getElementsByTagName()
- This method returns a live HTMLCollection of all child elements with the specified tagName.
- The tagName argument should be a string representing the HTML tag name (e.g., "div", "p", "a", "img").
- It selects all elements that match the given tag name, regardless of their class or ID.

const divs = document.getElementsByTagName('div');

document.getElementsByClassName()
- This method returns a live HTMLCollection of all child elements that have all of the specified className.
- The className argument should be a string representing one or more class names, separated by spaces if multiple classes are targeted (e.g., 'my-class', 'main btn').
- It selects elements based on their assigned CSS classes.

// select all elements with the class 'highlight'
const highlightedElements = document.getElementsByClassName('highlight'); 
// select all elements with both 'card' and 'active' classes
const activeCards = document.getElementsByClassName('card active');

1.2. Array Methods

Array.prototype.**() is a higher-order array method in JavaScript that provide functional ways to manipulate arrays.

Array.prototype.map() creates a new array by applying a provided function to each element in the calling array. The new array will have the same length as the original array, but its elements will be the results of the callback function. It is used for transforming each element of an array.

const nums = [1, 2, 3]; 
const doubleNums = nums.map(num => num * 2); // return [2, 4, 6]

Array.prototype.filter() creates a new array containing only the elements for which the provided callback function returns a truthy value. It is used for selecting a subset of elements from an array based on a condition. The new array's length may be less than or equal to the original array's length.

const nums = [1, 2, 3, 4, 5]; 
const oddNums = nums.filter(num => num % 2 !== 0); // return [1, 3, 5]

Array.prototype.reduce() executes a reducer callback function on each element of the array, resulting in a single output value. This value can be a number, a string, an object, an array, or any other type. It is used for accumulating a single value from an array. It takes an optional initialValue for the accumulator.

const nums = [1, 2, 3, 4, 5]; 
const sum = nums.reduce((accumulator, current) => accumulator + current, 0); // return 15

Summary

map is for transforming (one-to-one mapping of elements).
filter is for selection (creating a subset based on a condition).
reduce is for aggregation (reducing an array to a single value).

1.3. `==` vs. `===`

== (Abstract Equality): this operator compares values for equality after performing type coercion. If the two operands are different types, JavaScript will try to convert one or both operands to a common type before making the comparison.
=== (Strict Equality): this operator compares both the value and the type of the operands. No type coercion is performed. For the comparison to be true, both the value and the data type must be identical.

For reliable and predictable code, it's a best practice to use the strict equality operator (===) as it prevents unexpected behavior from implicit type conversions.

1.4. Bearer

Bearer is used in the Authorization header to specify the type of token being sent in the Authentication header for authentication. It tells the server that the value following Bearer is a bearer token, which is a security token granting access to protected resources.

How the `Bearer` is beneficial

Standardized Authentication: Bearer tokens are widely used in APIs for secure, stateless authentication.
Simplicity: the client only needs to include the token; the server validates it without extra steps.
Security: tokens can be short-lived and easily revoked, reducing risk if compromised.

Summary
Using Bearer makes authentication secure, simple, and compatible with modern API standards.

2. ES5 vs. ES6:

ES6 introduced numerous new features and syntax enhancements aimed at making JavaScript development more efficient, readable, and maintainable compared to ES5.

2.1. Key Differences

Variable Declarations: ES5 primarily used 'var' for variable declarations, which have function-level scope. ES6 introduced let for block-scoped variables and const for block-scoped constant variables, improving scope management and preventing accidental reassignments.
- var is the old way of declaring variables. var declarations are function-scoped and can be re-declared and re-assigned. This can lead to unexpected behavior and is generally avoided in modern development.
- let declarations are block-scoped. This means a variable declared with let is only accessible within the block of code (e.g., inside {}) it was defined in. You can re-assign a let variable, but you cannot re-declare it in the same scope.
- const is for declaring variables that are block-scoped and cannot be re-assigned. The value must be initialized at the time of declaration. While the variables themselves can't be re-assigned, if the value is an object or array, its properties or elements can still be mutated.
Arrow Functions: ES6 introduced arrow functions, providing a more concise syntax for writing function expressions and handling this context more predictably. ES5 relied on traditional function keyword syntax.
Classes: ES6 introduced the class keyword, offering a more familiar and structured syntax for defining object-oriented structures, similar to other object-oriented languages. ES5 simulated class-like behavior using constructor functions and prototypes.
Promises: ES6 introduced Promises for handling asynchronous operations, providing a cleaner and more structured approach compared to the callback-based approach, often leading to "callback hell" in ES5.

2.2. Promise vs. async/await

Promises

Promises are objects that represent the result of asynchronous processing and its value, whether the process succeeded (resolved) or failed (rejected).

Pending: this initial state; the operation has not yet completed.
Fulfilled: the operation completed successfully.
Rejected: the operation failed.

You chain .then() and .catch() methods to a Promise to handle the successful and failed outcomes, respectively.

fetch('https://api.example.com/data')
  .then(res => {
    if (!res.ok) {
      throw new Error('Network response was not okay'); 
    } 
    return res.json(); 
  })
  .then(data => console.log(data))
  .catch(error => console.error('There was a problem with the fetch operation:', error));

Promise.all() is used to wait for all promises to be completed.
Promise.any() is used to return a resolved (succeeded) value once any of the initial promises is resolved (succeeded).

async/await

The async/await is a modern JS feature that provides a cleaner, more readable way to work with Promises.

The async is used to declare an asynchronous function. This function automatically returns a Promise.
The await is used inside an async function to pause the execution of the function until the Promise it's waiting on is settled (either fulfilled or rejected).

Error handling with async/await is done using a traditional try...catch block, which is familiar to developers from synchronous code.

async function fetchData() {
  try {
    const res = await fetch('https://api.example.com/data'); 
    if (!res.ok) {
      throw new Error('Network response was not okay'); 
    }
    const data = await res.json(); 
    console.log(data); 
  } catch (error) {
    console.error('There was a problem with the fetch operation:', error); 
  }
} 

fetchData();

Summary
async/await doesn't replace Promises; it provides a more intuitive and powerful way to use them. It's the preferred method for handling modern asynchronous JavaScript, as it makes the code much cleaner and easier to read.

2.3 Why do we need asynchronous functions?

We need asynchronous functions to perform operations that take time without blocking the main program threads. This is crucial for maintaining a responsive user experience, especially in applications that handle tasks like fetching data from a server, reading a file from the disk, or executing a long-running calculation.

Problem with synchronous code

In a synchronous programming mode, code is executed line by line. That is, when a function or operation is called, the program waits for it to complete before moving to the next line. If a long-running task is initiated, the entire program becomes unresponsive. For a web browser, this means the user interface freezes—the user can't click buttons, type in a field, or see animations.

Solution: asynchronous functions

Asynchronous functions allow the program to initiate a task and continue executing other code without waiting for the task to finish. The program is notified once the task is complete, at which point it can handle the result. This non-blocking behavior is essential for modern applications.

3. TypeScript vs. JavaScript:

TypeScript (TS) is a superset of JavaScript (JS) that adds static typing to the language. This means you can define the types of variables, function parameters, and return values, which helps catch errors during development rather than at runtime. JS, on the other hand, is a dynamically typed language, which means type checking happens only when the code is executed.

3.1. Why Choose TypeScript?

TS is particularly valuable for large, complex, or long-term projects. The static typing provides a safety net that helps prevent a common class of bugs. It also makes the code more self-documenting, as the type definitions can explain what kind of data a function expects and returns. Many popular frameworks and libraries were built with TS, and it is widely used in enterprise-level applications.

3.2. Type Interface

In TypeScript, a type interface refers to an interface declaration, which is used to define the shape or structure of an object, specifying the properties and methods that an object must have.

Why the interfaces are useful

Interfaces are a powerful tool for ensuring code consistency and safety. They help enforce that any object you use in a specific context has a predictable shape.

Type Checking: the compiler uses interfaces to check if an object conforms to the defined structure at compile-time. If it doesn't, you get an immediate error, preventing a common class of bugs.
Code Documentation: an interface acts as a form of self-documentation. Other developers can look at an interface and immediately understand what an object is supposed to look like.
Predictability and Autocomplete: when your IDE knows the structure of an object through an interface, it can offer smart code completion and helpful suggestions, making development faster and less prone to typos.

How the interface works

// 1. Define the interface
interface User {
  id: number;
  name: string;
  email?: string; // The '?' makes this property optional
}

// 2. Use the interface to define a variable
const user1: User = {
  id: 1,
  name: 'Alice',
  email: 'alice@example.com'
};

// 3. This would cause a compile-time error because 'id' is missing
const user2: User = {
  name: 'Bob',
  email: 'bob@example.com'
};

In this example, the User interface dictates that any object of type User must have a number called id and a string called name. If you try to create an object that doesn't meet this contract, the TypeScript compiler will immediately flag an error.

4. React Features:

4.1. Prop Drilling

Prop drilling is a term used in component-based frameworks like React to describe the process of passing data from a parent component down to a deeply nested child component.

How prop drilling works

Imagine you have a component tree like this:
App -> ParentComponent -> ChildComponent -> GrandchildComponent

Suppose the App component holds a piece of data like a username that is only needed by the GrandchildComponent. To get the username from the App component to the GrandchildComponent, you have to drill it down through the intermediate components.

App passes the user prop to ParentComponent.
ParentComponent receives the user prop, but doesn't use it. It simply passes it on to ChildComponent.
ChildComponent also receives the user prop and doesn't use it again. It passes it on to GrandchildComponent.
Finally, GrandchildComponent receives the user prop and uses it to display the username.

4.2. Props vs. State

In React, props are data passed from a parent component to a child component, acting as read-only arguments, while state is data managed internally by a component that can change over time, triggering a re-render. Props provide data to customize child components, whereas state allows a component to manage its own local, dynamic information, such as user inputs or API data.

4.3. Virtual DOM

The Virtual DOM (VDOM) is a lightweight, in-memory representation of the real DOM (Document Object Model). It's a key concept in frameworks like React that helps optimize performance.

How VDOM improves performance in frameworks

Instead of directly manipulating the real DOM, React first makes changes to the VDOM. When the state of a component updates, React creates a new VDOM tree and compares it to the previous one in a process called diffing. It calculates the minimal number of changes needed to sync the real DOM with the new VDOM. Finally, it batches these changes and updates the real DOM only where necessary.

This approach is faster because:

Manipulating a JS object (the DOM) in memory is significantly quicker than directly interacting with the browser's DOM.
It reduces the number of costly DOM manipulations, as only the changed parts of the UI are updated.

4.4. React Hooks

React hooks are functions that allow "hooking into" React state and lifecycle features from functional components. They enable the use of state and other React features in functional components, which previously were only available in class components.

useState(): the useState() hook allows functional components to manage and update state. It is fundamental for creating interactive and dynamic user interfaces.
useRef(): the useRef() hook allows the creation of a mutable reference object that persists across component re-renders without causing the component to re-render when its value changes.

5. Vue Features:

5.1. Ref Function

In Vue.js, a reactive reference refers to a value that any changes are made to this value automatically trigger updates in the UI. The primary way to create such a reference is using the ref function.

ref is used to create a reactive reference to a single value. This value can be a primitive type (like string, number, or boolean) or an object/array.
When you create a reactive reference with ref, Vue wraps the value in a special object that allows it to detect changes.
To access or modify the actual value held by a ref, you must use the .value property (username.value = newValue).

5.2. `v-model` Directive

The v-model directive in Vue.js is a fundamental feature that enables two-way data binding. It simplifies the synchronization of data between a component's state and form input elements.
For example, when it comes to two-way data binding, v-model automatically handles both updating the UI when the data changes and updating the data when the UI element like an input field is modified.

5.3. `defineEmits()`

In Vue 3, defineEmits() is a compiler macro used to declare the custom events that a component can emit (the mechanism by which a child component sends a custom event and optionally data to its parent component). It serves as a way to explicitly define the interface for a component's outgoing communication, making it clearer what events a parent component can listen for.

How emit and `defineEmits()` works

When you call emit('event-name'), it triggers the event-name event.
The parent component listens for this event (e.g., @event-name="passwordWasSet = true") and can react, such as showing a success message or changing the UI state.

5.4. `computed` Property

In Vue.js, computed properties play a crucial role in password validation by providing a reactive, efficient way to derive validation states or messages based on other reactive data, such as the password input itself.

How `computed` works in password validation

Deriving Validation Status: you define a computed property that returns a boolean indicating whether the password meets certain criteria (e.g., isPasswordValid, passwordMatch).

import { defineComponent } from 'vue';

export default defineComponent({
  data() {
    return {
      password: '' as string,
      passwordConfirm: '' as string
    };
  },
  computed: {
    passwordMatch(): boolean {
      return this.password === this.passwordConfirm && this.password.length > 0;
    },
    isPasswordStrong(): boolean {
      // Example password strength rule:
      return this.password.length >= 8 && /[A-Z]/.test(this.password);
    }
  }
});

5.5. `v-if` and `v-for`

v-if: Conditionally renders an element or block. If the condition is true, the element or block is rendered to the DOM; if false, it is removed. This is useful for showing or hiding UI parts based on states (like error messages).

Conjunction with `v-else-if` and `v-else`

It can be used in conjunction with v-else-if and v-else to create conditional blocks similar to if/else if/else statements in programming.

<p v-if="isVisible">This paragraph is conditionally rendered.</p>
<p v-else-if="isSecondary">This is a secondary condition.</p>
<p v-else>This is the fallback.</p>

v-for: Renders a list of elements by iterating over an array or object. For each item, it creates a new DOM. This is useful for displaying dynamic lists such as password criteria or error messages.

Key attribute

When using v-for, it is recommended to provide a unique key attribute to each iterated element for efficient list updates.

<ul>
  <li v-for="item in items" :key="item.id">
    {{ item.name }}
  </li>
</ul>

5.6. `aria-invalid` Attribute

aria-invalid is an ARIA (Accessible Rich Internet Applications) attribute used to indicate that the entered value is invalid.

How the `aria-invalid` attribute works

If aria-invalid="true" is present on an input, screen readers will announce that the field is invalid, helping users understand which fields require correction.
If omitted or set to false, the field is considered valid.

<label for="email">Email:</label>
<input type="email" id="email" aria-invalid="true">
<span id="email-error-message">Please enter a valid email address.</span>

6. Recommended Resource:

With refreshing my frontend domain knowledge at this time, I came across a really convenient resource called GreatFrontEnd. I highly recommend it not only for those who are preparing for technical interviews but also for anyone just starting their frontend journey, as it's a well-structured guide that highlights the essential features and concepts to before stepping into a professional role.

Conclusion

Mastering the fundamentals of JavaScript, TypeScript, React, and Vue gives you the confidence to tackle both interviews and real-world projects. From understanding async code to handling props, refs, and computed values, these core skills are the backbone of modern frontend engineering. Keep practicing, stay curious, and you’ll keep leveling up as a developer.

DSA & Searching Methods: Refresher for Coding Interview

Ryoichi Homma — Fri, 16 May 2025 05:50:43 +0000

Since I prepare for upcoming coding interviews, I've decided to revisit the core concepts of Data Structures and Algorithms (DSA). This article will be the second refresher to me where I'll explain searching methods for DSA. Whether you're revising for interviews or brushing up on your fundamentals, I hope you find this helpful!

Searching Methods

Searching is about finding the required data in a structure. Here are the most common search algorithms.

1. Linear Search

Description: traverse the list one element at a time.
Time Complexity: O(n).
Use Case: unsorted arrays, small data sets.

function linearSearch(arr, target) {
  for (let i = 0; i < arr.length; i++) {
    if (arr[i] === target) {
      return i; 
    } 
  }
  return -1; 
} 

// return 1 because 5 can be found in array at the index of 1.
console.log(linearSearch([3, 5, 7], 5)); 

// return 0 because 3 can be found in array at the index of 0.
console.log(linearSearch([3, 5, 7], 3)); 

// return -1 because 0 cannot be found in array.
console.log(linearSearch([3, 5, 7], 0));

2. Binary Search (Iterative)

Description: divide the sorted list into half to find the element.
Time Complexity: O(log n).
Use Case: efficient lookup in sorted collections.

Note: Array must be sorted.

function binarySearch(arr, target) {
  let left = 0;  
  let right = arr.length - 1; 

  while (left <= right) {
    let mid = Math.floor((left + right) / 2);

    if (arr[mid] === target) {
      return mid; 
    } else if (arr[mid] < target) {
      left = mid + 1;
    } else {
      right = mid - 1;
    }
  }

  return -1; 
} 

// return 3 because 7 can be found in array at the index of 3. 
console.log(binarySearch([1, 3, 5, 7, 9], 7));

// return -1 because 0 cannot be found in array. 
console.log(binarySearch([1, 3, 5, 7, 9], 0));

// return 0 because 1 can be found in array at the index of 1. 
console.log(binarySearch([1, 3, 5, 7, 9], 1));

3. Depth-First Search (DFS)

Description: explores as deep as possible along a branch before backtracking.
Time Complexity: O(V + E) (vertices + edges).
Use Case: graphs, trees, maze solving, topological sort.

function dfs(graph, node, visited = new Set()) {
  if (visited.has(node)) {
    return; 
  }

  visited.add(node); 
  console.log(node); // current node

  for (let neighbor of graph.get(node)) {
    if (!visited.has(neighbor)) {
         dfs(graph, neighbor, visited); 
    }
  }
}

4. Breadth-First Search (BFS)

Description: explores all neighbors before going deeper.
Time Complexity: O(V + E).
Used Case: shortest path in unweighted graphs, level-order tree traversal.

function bfs(graph, start) {
  const visited = new Set();  
  const queue = [start]; 

  while (queue.length > 0) {
    const node = queue.shift(); // take out from queue

    if (!visited.has(node)) {
      console.log(node); // current node
      visited.add(node); 

      for (let neighbor of graph.get(node)) {
        if (!visited.has(neighbor)) {
          queue.push(neighbor); 
        }
      }
    }
  }
}

5. Binary Search Tree Search

Description: traverse the BST left or right depending on the value.
Time Complexity: O(log n) average, O(n) worst (unbalanced tree).
Use Case: dynamic sets, range queries.

function searchBST(node, value) {
  if (node === null) {
     return null; 
  }

  if (value === node.value) {
    return node; // if found
  }

  if (value < node.value) {
    return searchBST(node.left, value); // let smaller node to be left
  } else {
    return searchBST(node.right, value); // let bigger node to be right
  } 
}

6. Hash-Based Search

Description: use a hash function to find the index.
Time Complexity: O(1) average.
Use Case: fast key-value lookup, duplicates detection.

const map = new Map(); 
map.set("apple", 10); 
map.set("banana", 5); 

if (map.has("apple")) {
  console.log("Found", map.get("apple")); // return 10
} else {
  console.log("Not Found"); 
}

Upcoming Posts

This article refreshes my DSA knowledge. In upcoming posts, I'll explore sorting algorithms in more details.
If you're also preparing for coding interviews or learning DSA, follow for more practical and concise DSA content. Feel free to leave comments for any questions!

Data Structures & Algorithms: Refresher for Coding Interview

Ryoichi Homma — Wed, 14 May 2025 09:01:36 +0000

Since I prepare for upcoming coding interviews, I've decided to revisit the core concepts of Data Structures and Algorithms (DSA). This article will be the first refresher to me where I'll explain essential data structures in a straightforward way. Whether you're revising for interviews or brushing up on your fundamentals, I hope you find this helpful!

Common Data Structures

Understanding data structures is essential because choosing the right one directly impacts the efficiency of your solution.

1. Array

Description: a collection of elements stored in contiguous memory locations.
Access Time: O(1) for random access.
Use Case: static data storage, lookup tables, buffers.

const arr = [1, 2, 3, 4]; 
console.log(arr[2]); // return 3
arr.push(5); // add 5 at the end
arr.splice(1, 2); // remove elements from index of 1 to 2; return [ 1, 4, 5 ]

2. Linked List

Description: a linear collection where each element points to the next.
Type: Singly, Doubly, and Circular Linked Lists.
Access Time: O(n) for search; efficient insertions/deletions at the beginning.
Use Case: dynamic memory allocation, real-time data streams.

class Node {
  constructor(val) {
    this.val = val; 
    this.next = null; 
  }
}

class LinkedList {
  constructor() {
    this.head = null; 
  } 

  push(val) {
    const node = new Node(val); 
    if (this.head === null) {
      this.head = node; 
    } else {
      let curr = this.head; 
      while (curr.next !== null) {
        curr = curr.next; 
      }
      curr.next = node; 
    }
  }

  print() {
    let curr = this.head; 
    let result = ''; 
    while (curr !== null) {
      result += curr.val + ' -> '; 
      curr = curr.next;
    }
    console.log(result + 'null'); 
  }
} 

const list = new LinkedList(); 
list.push(1); 
list.push(2); 
list.push(3); 
list.print(); // return 1 -> 2 -> 3 -> null

3. Stack (LIFO)

Description: follows Last-In-First-Out (LIFO) principle.
Operations: push(), pop(), peak().
Use Case: undo functionality, expression evaluation, backtracking.

const stack = []; 
stack.push(1, 2, 3, 4); 

console.log(stack.pop()); // return 4 
console.log(stack); // return [1, 2, 3]

4. Queue (FIFO)

Description: follows First-In-First-Out (FIFO) principle.
Variants: Circular Queue, Priority Queue, Deque.
Use Case: task scheduling, BFS traversal, data buffering.

const queue = []; 
queue.push(1, 3, 4, 5); 
console.log(queue); // return [1, 3, 4, 5]
queue.push(2); 
console.log(queue); // return [1, 3, 4, 5, 2]
console.log(queue.shift()); // return 1

5. Hash Table / Hash Map

Description: key-value pairs with constant-time average access.
Operations: insert(), delete(), search() in O(1).
Use Case: caching, frequency counting, fast lookup.

const map = new Map(); 
map.set('a', 1); 
map.set('b', 2); 
console.log(map.get('a')); // return 1

6. Tree

Description: hierarchical data structure with nodes and children.
Type:
- Binary Tree
- Binary Search Tree (BST): Left < Node < Right
- Heap: Min-Heap / Max-Heap
- Trie: Prefix tree for strings
Use Case: Hierarchical storage (e.g., file systems), autocomplete, heap sort.

// Binary Search Tree
class TreeNode {
  constructor(val) {
    this.val = val; 
    this.left = null; 
    this.right = null; 
  }

  insert(newVal) {
    if (newVal < this.val) {
      this.left ? this.left.insert(newVal) : (this.left = new TreeNode(newVal)); 
    } else {
      this.right ? this.right.insert(newVal) : (this.right = new TreeNode(newVal)); 
    }
  }
}

const root = new TreeNode(10); 
root.insert(5); 
root.insert(15);

7. Graph

Description: set of nodes (vertices) connected by edges.
Type: directed, undirected, weighted, unweighted, cyclic, acyclic.
Use Case: social networks, pathfinding (Dijkstra Algorithm), dependency resolution.

// Adjacency List
class Graph {
  constructor() {
    this.adjList = new Map(); 
  }

  addVertex(v, w) {
    this.adjList.get(v).push(w); 
    this.adjList.get(w).push(v); // undirected graph
  }  

  print() {
    for (let [key, val] of this.adjList) {
      console.log(`{key} -> ${val.join(', ')}`); 
    }
  }
}

const graph = new Graph(); 
graph.addVertex('A'); 
graph.addVertex('B'); 
graph.print(); 
// A -> B
// B -> A

Upcoming Posts

This article serves as a refresher for my DSA journey. In upcoming posts, I'll dive deeper into searching methods.
If you're also preparing for coding interviews or learning DSA, follow for more practical and concise DSA content. Feel free to leave comments for any questions!

How to Integrate an AWS EC2 Instance with VS Code using Remote SSH

Ryoichi Homma — Sun, 23 Feb 2025 05:02:52 +0000

Developing directly on Amazon EC2 instance can improve workflow efficiency and eliminate the need for constant file transfers. This article will explain how to integrate an EC2 instance with VS Code using the Remote - SSH extension.

Prerequisites

AWS EC2 instance running
SSH access to your EC2 instance
VS Code installed on your local machine

1. Install VS Code Extension

2. Connect to EC2 via SSH in VS Code

Press shift + ctrl + P at the same time, and select Remote SSH: Connect to Host.
Click + Add New SSH Host..., type the following and press enter.

ec2-user@XX.XX.XX.XX

Select the top one, .ssh\config to open the config file and add the following:

Host ec2-server
  HostName XX.XX.XX.XX
  User ec2-user
  IdentityFile ~/ec2
  ForwardAgent yes

Open the Remote Explore tab on the left sidebar.
Under SSH Targets, locate ec2-server.
Click the connect arrow (→).
Select the correct OS for the remote machine.
If SSH: ec2-server appears at the bottom left and the terminal shows something like:

[ec2-user@ip-xx-xx-xx-xx ~]$

You have successfully connected to the remote EC2 instance.

3. Transfer Project Folder

Simply drag and drop your project folder to the root directory of the EC2 instance.

By following these steps, you should be able to integrate the EC2 instance with VS Code. This setup improves development efficiency and allows seamless remote coding in a cloud environment.

Understanding Digest Authentication

Ryoichi Homma — Wed, 19 Feb 2025 22:28:25 +0000

This article is an extended version of my last article, Understanding Basic Authentication, exploring more about Digest Authentication, especially how it works, how to implement it, and the differences between Basic and Digest Authentications.

Digest Authentication

Digest Authentication is a more secure alternative to Basic Authentication. Instead of sending the credentials in plaintext (Base64), it uses MD5 hashing along with a challenge-response mechanism. This prevents passwords from being directly intercepted, making it more secure than Basic Authentication.

Implementation

Follow these steps to implement Digest Authentication on the Apache server:

Install Apache using yum command:

sudo install httpd -y

Create a protected directory:

sudo mkdir -p /var/www/html/digest

/digest can be anything.

Create the Digest password file:

sudo htdigest -c /etc/httpd/conf.d/.digestpass "Digest Auth" username

Ener and confirm the password.
The AuthName value must match the Apache configuration ("Digest Auth" in this case).

Verify the Digest password file:

cat /etc/httpd/conf.d/.digestpass

Edit the Apache configuration file:

sudo vi /etc/httpd/conf/httpd.conf

Add the following inside the <Directory "/var/www/html"> section:

<Directory "/var/www/html/digest">
    AuthType Digest
    AuthName "Digest Auth"
    AuthUserFile /etc/httpd/conf.d/.digestpass
    Require valid-user
</Directory>

Create an index.html file in the protected directory:

sudo vi /var/www/html/digest/index.html

Add what you want to display when the user is authorized:

You're successfully authorized

Press i to start typing, turning on the INSERT MODE.
Press esc, type :wq, and press Enter to save the file and exit the INSERT MODE.

Restart the Apache server:

sudo systemctl restart httpd

Test the Authentication using curl command:

curl -L --digest -u username:password http://xx.xx.xx.xx/digest

If you see You're successfully authorized, authentication is working correctly.

Key Differences Between Basic and Digest Authentication

Feature: Digest Authentication is more secure than Basic Authentication.
Password Transmission: While Basic Authentication sends as Base64 (plaintext), Digest Authentication sends as a hashed value.
Replay Attack Risk: Digest Authentication is lower due to its nonce mechanism.
Browser Support: While Basic Authentication is widely supported, Digest Authentication is less common.
Others: - Digest Authentication is a more secure alternative to Basic Authentication because Basic only uses HTTPS.

Conclusion

Both Basic and Digest Authentication provide ways to restrict access to web resources. Basic Authentication is easy to implement but should always be used with HTTPS to prevent credential exposure. Digest Authentication offers better security through hashing and challenge-response mechanisms, making it a more secure choice for sensitive data.
If you're working with an Apache web server, implementing these authentication methods is straightforward and enhances security for restricted resources.

Reference

Understanding Basic Authentication

Ryoichi Homma — Wed, 19 Feb 2025 19:03:07 +0000

I recently had an opportunity to use Basic Authentication and Digest Authentication, so I'd like to share what I learned about these two authentication methods. This article will focus on Basic Authentication, especially how it works and how to implement it.

Basic Authentication

Basic Authentication is a simple authentication mechanism where the client sends credentials like username and password encoded in Base64 with each HTTP request. While Base64 encoding is not encryption, it allows the credentials to be included in a standard format. Since it lacks encryption, it is recommended to use HTTPS to secure credentials in transit.

Implementation

Follow these steps to implement Basic Authentication on the Apache server:

Install Apache using yum:

sudo yum install httpd -y

Create a protected directory:

sudo mkdir -p /var/www/html/basic

/basic can be anything.

Create the .htpasswd file:

sudo htpasswd -c /etc/httpd/.htpasswd username

You'll be asked to type and confirm the password.

Edit the Apache configuration file:

sudo vi /etc/httpd/conf/httpd.conf

Add the following inside the <Directory "/var/www/html"> section (usually from 160 lines):

<Directory "var/www/html/basic">
    AuthType Basic
    AuthName "Basic Auth"
    AuthUserFile /etc/httpd/.htpasswd
    Require user username
</Directory>

Create an index.html file in the protected directory:

sudo vi /var/www/html/basic/index.html

Add something you want to display when the user is authorized:

You're successfully authorized

Press i to start typing in the INSERT MODE.
To exit the INSERT MODE, press esc, type :wq, and press Enter.

Restart the Apache server:

sudo systemctl restart httpd

Test the authentication using curl command:

curl -L -u username:password http://xx.xx.xx.xx/basic

If you see You're successfully authorized, authentication is working correctly.

In the next article, Understanding Digest Authentication, I will explore more about Digest Authentication.

Reference

https://atmarkit.itmedia.co.jp/flinux/rensai/linuxtips/698apachebasic.html

Exploring Promises in JavaScript

Ryoichi Homma — Sun, 19 Jan 2025 05:57:40 +0000

If you've ever worked with asynchronous programming in JavaScript, you've likely come across Promises. At first glance, Promises may seem confusing, but once you understand, they become an indispensable tool in your developer toolkit. This article explains what Promises are, how they work, and why they matter.

What is a Promise?

A Promise is an object in JavaScript that represents the eventual completion or failure of an asynchronous operation. In simpler terms, it's a way to handle operations that don't immediately return a result, like fetching data from an API or reading a file.

Promises have three possible states:

Pending: The operation is still in progress.
Fulfilled: The operation completed successfully.
Rejected: The operation failed.

Once a Promise is fulfilled or rejected, its state becomes immutable.

Why Do We Need Promises?

JavaScript is single-threaded, meaning that it can only perform one operation at a time. Asynchronous operations are used to avoid blocking the main thread. Before Promises, callbacks were the primary way to handle such operations. However, nested callbacks made the code difficult to read and maintain. Promises solve this problem by providing a cleaner, more readable syntax for managing asynchronous tasks.

Anatomy of a Promise

Creating a Promise involves using the Promise constructor, which takes a function executor with two arguments: resolve and reject.

const myPromise = new Promise((resolve, reject) => {
  const success = true; 

  if (success) {
    resolve("Operation was successful!"); 
  } else {
    reject("Operation failed."); 
  }
});

resolve: Call this function when the operation completes successfully.
reject: Call this function when the operation fails.

Consuming a Promise

You can use .then(), .catch(), and .finally() to handle the outcomes of a Promise:

myPromise
  .then(result => {
    console.log(result); // "Operation was successful!"
  })
  .catch(error => {
    console.log(error); // "Operation failed." 
  })
  .finally(() => {
    console.log("Operation complete."); 
  });

.then(): Executes when the Promise is fulfilled.
.catch(): Executes when the Promise is rejected.
.finally(): Executes regardless of the outcome (fulfilled or rejected).

Real-World Example: Fetching Data

Promises are widely used with APIs. Here's an example using the fetch API:

fetch("https://api.example.com/data")
  .then(response => {
    if (!response.ok) {
      throw new Error("Network response was not ok"); 
    } 
    return response.json(); 
  })
  .then(data => {
    console.log(data); 
  })
  .catch(error => { 
    console.error("There was a problem with the fetch operation: ", error); 
  });

In this example,

fetch returns a Promise.
The first .then() parses the response.
The second .then() processes the parsed data.
.catch() handles any errors that occur.

Advanced: Chaining Promises

One of the strengths of Promises is chaining. Each .then() returns a new Promise, allowing you to chain multiple asynchronous operations:

getUser()
  .then(user => getUserPosts(user.id))
  .then(posts => displayPosts(posts))
  .catch(error => console.error(error));

This keeps the code clean and avoids deeply nested callbacks.

Async/Await: A Syntactic Sugar

Introduced in ES2017, async/await simplifies working with Promises by allowing you to write asynchronous code that looks asynchronous:

async function fetchData() {
  try { 
    const response = await fetch("https:///api.example.com/data"); 
    const data = await response.json(); 
    console.log(data); 
  } catch (error) {
    console.error("Error fetching data: ", error); 
  } 
}

fetchData();

Under the hood, async/await is built on Promises, so understanding Promises is crucial to using async/await effectively.

Key Benefits of Promises

Readability: Promises make asynchronous code easier to read and maintain.
Error Handling: Centralized error handling with .catch().
Chaining: Enables sequential execution9 of asynchronous operations.

Common Pitfalls

Forgetting to return a Promise: Always return a Promise when chaining.
Unhandled Rejections: Use .catch() or try-catch to handle errors.
Mixing Callbacks and Promises: Stick to one approach to avoid confusion.

Conclusion

Promises are a powerful feature of JavaScript that simplifies handling asynchronous operations. By understanding their structure and usage, you can write cleaner, more maintainable code. Bookmark this post as a reference for the next time you need a quick refresher on Promises!

If you have any questions or examples you'd like to share, drop them in the comments below. Your comments and feedback are always appreciated!

Why React Hook Form and Zod are Essential to Build Contact Form

Ryoichi Homma — Mon, 30 Dec 2024 15:28:45 +0000

Creating a robust and user-friendly contact form is a vital part of any web application. A poorly implemented form can lead to user frustration, data inconsistencies, or even security vulnerabilities. Leveraging React Hook Form and Zod simplifies this process while ensuring a seamless experience for both developers and users.
In this article, we'll explore why these two tools are essential for building contact forms and how they address common challenges in form development.

Agenda

The Challenges of Form Handling
Why Use React Hook Form?
Why Use Zod?
Why Combine React Hook Form and Zod?
Real-World Example
Reference
Conclusion

The Challenges of Form Handling

Form handling in React projects can quickly become cumbersome. Traditional approaches often involve managing state manually, writing complex validation logic, and handling edge cases, such as asynchronous validation. Common pitfalls include:

Performance Bottlenecks: Frequent re-renders as form states change.
Complex Validation Logic: Writing and maintaining custom validation rules can lead to messy code.
Error Management: Displaying appropriate error messages for each input field is tricky without a structured approach.

React Hook Form and Zod address these challenges head-on, making form development more efficient and reliable.

Why Use React Hook Form?

React Hook Form is a lightweight library that simplifies form handling in React applications. Here are some reasons why it's an excellent choice:

Minimal Re-Renders: React Hook Form reduces performance overhead by leveraging uncontrolled components and only updating the DOM when necessary. This leads to faster forms, even with complex validations.
Intuitive API: The API is simple and developer-friendly. Integrating features like validation, error handling, and field management is straightforward.
Built-in Features:
- Real-time validation
- Conditional rendering of error messages
- Integration with external schema validation libraries like Zod.
Flexible Controller Component: React Hook Form provides a Controller component to bridge the gap between controlled components like custom UI libraries and its native functionality.

Why Use Zod?

Zod is a TypeScript-first schema validation library with static type inference that enables you to define and enforce validation rules with confidence. Here's why it's a game-changer:

Type Safety: Zod generates TypeScript types directly from your schema, ensuring compile-time safety. This eliminates the risk of runtime type errors.
Declarative Validation: Instead of writing imperative validation logic, you declare rules in a concise and readable manner. For example:

import { z } from 'zod'; 

export const contactFormSchema = z.object({
  name: z.string().min(1, 'Name is required'),
  email: z.string().min(1, 'Email is required').email();
  message: z.string().min(20, 'Message must be at least 20 characters long'),
});

Integration with React Hook Form: Zod integrates seamlessly with React Hook Form via the zodResolver. This means you can define your schema and let React Hook Form handle the validation process.
Error Feedback: Zod provides detailed and descriptive error messages, making it easier for users to understand what went wrong.

The Power of Combining React Hook Form and Zod

Using React Hook Form and Zod together unlocks a new level of efficiency and reliability in form handling. Here's how they work in tandem:

Effortless Validation Integration: With the zodResolver, you can connect your Zod schema to React Hook Form in just a few lines:

import { useForm } from 'react-hook-form'; 
import { zodResolver } from '@hookform/resolver/zod'; 

const { register, handleSubmit, formState: { errors } } = useForm({
  resolver: zodResolver(contactFormSchema),
});

Enhanced Error Handling: The errors object provided by React Hook Form is automatically populated with Zod's validation feedback, which you can display in your UI:

<input {...register('email')} />
{errors.email && <p>{errors.email.message}</p>}

Simplified Codebase: By offloading validation logic to Zod and leveraging the React Hook Form declarative approach, your code remains clean and maintainable.
Scalability: As your form grows, adding new fields and rules is straightforward with Zod schemas and React Hook Form's flexible API.

Real-World Example

Let's consider a contact form with fields for name, email, and message. Here's how it might look like with React Hook Form and Zod:

import { useForm } from 'react-hook-form';
import { z } from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';

export const contactFormSchema = z.object({
  name: z.string().min(1, 'Name is required'),
  email: z.string().min(1, 'Email is required').email('Invalid email address'),
  message: z.string().min(20, 'Message must be at least 20 characters long'),
});

type ContactFormInputs = z.infer<typeof contactFormSchema>;

export default function ContactForm() {
  const { register, handleSubmit, formState: { errors } } = useForm<ContactFormInputs>({
    resolver: zodResolver(contactFormSchema),
  });

  const onSubmit = (data: ContactFormInputs) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label>Name:</label>
        <input {...register('name')} />
        {errors.name && <p>{errors.name.message}</p>}
      </div>

      <div>
        <label>Email:</label>
        <input {...register('email')} />
        {errors.email && <p>{errors.email.message}</p>}
      </div>

      <div>
        <label>Message:</label>
        <textarea {...register('message')} />
        {errors.message && <p>{errors.message.message}</p>}
      </div>

      <button type="submit">Submit</button>
    </form>
  );
}

Reference

Refer to this YouTube video to learn more about React Hook Form and Zod.

Conclusion

Building a contact form that is both performant and user-friendly is no small feat. By combining React Hook Form and Zod, you gain access to a powerful toolkit that streamlines form development, enforces strong validation rules, and enhances the user experience. These tools not only save development time but also improve code maintainability, scalability, and performance. If you haven't already, give React Hook Forma and Zod a try in your next project.

Please feel free to leave comments. Your feedback is always appreciated.

How to Implement an Auto-Reply System Using EmailJS in Your React Project

Ryoichi Homma — Sun, 29 Dec 2024 07:50:09 +0000

Setting up an auto-reply system for your React project can significantly enhance the user experience by providing instant feedback when users submit forms. EmailJS is an excellent service for this use case as it enables you to send emails directly from your client-side app without requiring a dedicated backend. In this article, we'll explore two ways to integrate EmailJS into your React project: using the SDK and the REST API.

Prerequisites

A React project setup (using Create React App, Vite, or your preferred framework).
An EmailJS account. Sign up here.
A service ID, template ID, and public key from your EmailJS dashboard.

Implementation Using the EmailJS SDK

Step 1) Install the EmailJS SDK

Install the EmailJS SDK using npm or yarn:

npm install --save @emailjs/browser 
yarn add @emailjs/browser

Step 2) Configure the SDK

Import and configure the SDK in your React component:

import React from 'react';
import emailjs from '@emailjs/browse'; 

const AutoReplyForm = () => {
  const formRef = React.useRef();

  const sendEmail = (e) => {
    e.preventDefault();

    emailjs
      .sendForm(
        'YOUR_SERVICE_ID',
        'YOUR_TEMPLATE_ID',
        formRef.current,
        'YOUR_PUBLIC_KEY'
      )
      .then(
        (result) => {
          console.log('Success:', result.text);
          alert('Email sent successfully!');
        },
        (error) => {
          console.error('Error:', error.text);
          alert('Failed to send email.');
        }
      );
  };

  return (
    <form ref={formRef} onSubmit={sendEmail}>
      <input type="text" name="user_name" placeholder="Your Name" required />
      <input type="email" name="user_email" placeholder="Your Email" required />
      <textarea name="message" placeholder="Your Message" required />
      <button type="submit">Send</button>
    </form>
  );
};

export default AutoReplyForm;

Key Points:

Replace YOUR_SERVICE_ID, YOUR_SERVICE_ID, YOUR_TEMPLATE_ID, and YOUR_PUBLIC_KEY with the credentials from your EmailJS dashboard.
The sendForm method automatically parses the form data.

Reference:

EmailJS SDK Installation

Alternative Method: Implementation Using the EmailJS REST API

Step 1) Install Axios

Install Axios for making HTTP requests:

npm install axios

Step 2) Create the REST API Integration

Use Axios to send a POST request to the EmailJS REST endpoint:

import React, { useState } from 'react';
import axios from 'axios';

const AutoReplyForm = () => {
  const [formData, setFormData] = useState({
    user_name: '',
    user_email: '',
    message: '',
  });

  const handleChange = (e) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  const sendEmail = async (e) => {
    e.preventDefault();

    const payload = {
      service_id: 'YOUR_SERVICE_ID',
      template_id: 'YOUR_TEMPLATE_ID',
      user_id: 'YOUR_PUBLIC_KEY',
      template_params: formData,
    };

    try {
      const response = await axios.post('https://api.emailjs.com/api/v1.0/email/send', payload);
      console.log('Success:', response.data);
      alert('Email sent successfully!');
    } catch (error) {
      console.error('Error:', error);
      alert('Failed to send email.');
    }
  };

  return (
    <form onSubmit={sendEmail}>
      <input
        type="text"
        name="user_name"
        placeholder="Your Name"
        value={formData.user_name}
        onChange={handleChange}
        required
      />
      <input
        type="email"
        name="user_email"
        placeholder="Your Email"
        value={formData.user_email}
        onChange={handleChange}
        required
      />
      <textarea
        name="message"
        placeholder="Your Message"
        value={formData.message}
        onChange={handleChange}
        required
      />
      <button type="submit">Send</button>
    </form>
  );
};

export default AutoReplyForm;

Key Points:

The REST API requires a payload containing service_id, template_id, user_id, and template_params.
Replace YOUR_SERVICE_ID, YOUR_TEMPLATE_ID, and YOUR_PUBLIC_KEY accordingly.

Reference:

EmailJS REST API

Where to Find the IDs and Keys on EmailJS Dashboard

SERVICE_ID:
Go to the dashboard → Email Services tab in the sidebar menu.

TEMPLATE_ID:
Go to the Email Templates tab in the sidebar menu and click Create New Template.

PUBLIC_KEY:
Go to Account in the top menu bar and choose Generate tab. You'll find your Public key and Private key in the API keys section.

How to Customize Template

Customize Content:

You will receive this template as a notification when someone sends you the form.

Customize Auto-Reply Message:

This template is what someone will receive once they submit the form.

Note: {{ subject }}, {{ sender_name }}, {{ message }}, {{ email }}, etc. need to match your variable names in your code.

Securing the IDs API Keys

Do not forget to secure your EmailJS IDs and API keys so that they wouldn't be exposed to the client side. To do that, refer to my another article that provides a step-by-step tutorial, "How to Hide Only API Keys Instead of Entire Files on GitHub and From Its Commit History".

Conclusion

Both methods provide effective ways to implement an auto-reply system with EmailJS in your React project. The SDK is great for quick setups, while the REST API offers more flexibility for custom implementations. Choose the approach that best suits your project's requirements.

If you have any questions, feel free to leave comments. Your feedback is always appreciated.

How to Implement Real-Time Email Validation Using ZeroBounce API

Ryoichi Homma — Fri, 27 Dec 2024 11:41:48 +0000

Validating email addresses in real time can significantly enhance the user experience and ensure the accuracy of data in your system. In this article, you'll learn how to integrate the ZeroBounce API into your web application to validate email addresses as users type them into a form.

What is ZeroBounce?

ZeroBounce is a powerful email validation and deliverability platform that helps developers and businesses verify email addresses. By integrating their API, you can:

Reduce bounce rates.
Improve email list quality.
Prevent spam signups.

Let's dive into how to set up real-time email validation with ZeroBounce in a React application.

Prerequisites

Before you begin, ensure you have the following:

A basic understanding of React.
Node.js installed on your local machine.
A ZeroBounce account and API key.

Setting Up the Project

1. Create a React App

First, create a new React app using Vite or Create React App command. I'll follow Vite here:

npm create vite@leatest real-time-email-validation --template
cd real-time-email-validation
npm install

2. Install Axios

Install Axios for making HTTP requests:

npm install axios

Building the Contact Form

Create a simple contact form to capture user input and validate the email address.

1. Build the Form Component

Create a ContctForm component to handle user input and fetch the API.

import React, { useState} from 'react'; 
import axios from 'axios'; 

const ContactForm = () => {
  const [email, setEmail] = useState("");
  const [validationMessage, setValidationMessage] = useState(null);
  const [error, setError] = useState(null);

  const validateEmail = async () => {
    try {
       const response = await axios.get(
         `https://api.zerobounce.net/v2/validate?api_key=YOUR_API_KEY&email=${email}`

       if (response.data.status === 'valid') {
         setValidationMessage('Email is valid.');
       } else {
         setValidationMessage('Invalid email address.');
       } 
    } catch (err) {
      console.log('Error validating email:', err);
      setError('Unable to validate email at the moment.');
    }
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    setValdationMessage(null);
    setError(null);
    validateEmail();
  };

  return (
    <form onSubmit={handleSubmit} >
      <>
        <label htmlFor='email'>Email:</label>
        <input 
          id='email'
          type='email'
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          required
         />
      </>
      <button type='submit'>Validate Email</button>
      {validationMessage && <p>{validationMessage}</p>}
      {error && <p style={{ color: 'red' }}>{error}</p>}
    </form>
  );
};

export default ContactForm;

Securing the API Key

Do not forget to secure your ZeroBounce API key so that it wouldn't be exposed to the client side. To do that, refer to my another article that provides a step-by-step tutorial, "How to Hide Only API Keys Instead of Entire Files on GitHub and From Its Commit History".

Testing the Application

Replace YOUR_API_KEY in the axios.get call with your ZeroBounce API key.
Start the development server:

npm run dev

Open your browser and navigate to the local server (e.g., http://localhost:5173).
Enter an email address into the form and click "Validate Email". The application will display whether the email is valid or not.

Conclusion

By integrating the ZeroBounce API into your React app, you can ensure the validity of email addresses in real time. This not only improves the user experience but also helps maintain a clean and effective email list. Try implementing this solution in your next project and take your email validation to the next level!

If you found this guide helpful, feel free to leave a comment or share your thoughts! Your feedback is always appreciated!

How to Hide Only API Keys Instead of Entire Files on GitHub and From Its Commit History

Ryoichi Homma — Mon, 16 Dec 2024 23:36:14 +0000

When you work on software projects, it's essential to deal with sensitive data like API keys. Making these keys invisible is crucial to avoid security breaches. You might initially consider excluding the entire files that contain API keys by adding them to your .gitignore file. However, this approach has its downsides, especially if those files contain non-sensitive code that you want to remain in your repository. This article will guide you on how to hide API keys properly without excluding the entire file and removing them from the commit history if sensitive data has been already pushed.

Why Hide API Keys?

API keys grant access to services and data. Exposing them publicly can lead to the following:

Unauthorized access to your account.
Potential misuse of your quotas or sensitive services.
Financial losses if the APIs involve paid services.

Step-by-Step Guide to Hide API Keys

Step 1) Move API Keys to an Environment File

Instead of hardcoding API keys in your secure files, create .env file and store the keys in it like this:

# .env file
API_KEY=your_api_key

Step 2) Add `.env` to `.gitignore`

To ensure the .env file which contains your API keys is not pushed to GitHub, add it to your .gitignore file:

# Environment variables
.env

This will prevent Git from tracking the .env file.

Step 3) Installation and Configuration

Install dependencies

npm install dotenv --save -dev @type/node

Configure `vite.config.ts`

import dotenv from "dotenv";

dotenv.config(); // Load .env file

export default defineConfig({
  plugins: [react()],

  // Add this
  define: {
    "process.env": process.env,
  },
});

Step 4) Update Your Code to Import Environment Variables

Your existing code may be like this:

import axios from "axios

const your_api_variable = "your_api_key";

export const function = async () => {
  try {
    const response = await axios.get(`https://api.random_api.net/example_api_key=${your_api_variable}`);
    return response.data.status === "valid";
  } catch (error) {
    console.error("Invalid", error);
  }
};

Updated version: Refactor your code to fetch the API key from environment variables of .env file using process.env. prefix like this:

import axios from "axios

// Get API key from environment variables of .env file
const your_api_variable = process.env.API_KEY;

export const function = async () => {
  try {
    const response = await axios.get(`https://api.random_api.net/example_api_key=${your_api_variable}`);
    return response.data.status === "valid";
  } catch (error) {
    console.error("Invalid", error);
  }
};

Replacing your API key with process.env.API_KEY lets your code import the API key as an environment variable from the .env file.

Step 5) Push Your Changes to GitHub

Since your sensitive data is no longer hardcoded in the source files, you can safely push your files to GitHub without exposing your API keys. Ensure the .env file remains untracked.

Step 6) Remove Sensitive Data from Commit History

If your API keys were already committed to GitHub, you must remove them from the commit history. Here's how to do it using git filter-repo command:

Install `git filter-repo`

pip install git-filter-repo

Remove Sensitive Files From Commit History

Run the following command to rewrite your repository's history and remove sensitive files:

git filter-repo --path src/api/your_file_with_sensitive_data.ts --invert-paths

Try adding --force at the end if this way doesn't work. This command will remove the specified files from the commit history.

Force Push to Update Remote Repository

After rewriting history, you need to force-push your changes:

git push origin main --force

Warning:

This operation rewrites your repo's history. Ensure you communicate this with your team and back up your repository beforehand.
If you accidentally expose your API keys, revoke them immediately and generate new ones.
Use tools like GitHub Dependabot or git-secrets to monitor your repositories for sensitive information.

Conclusion

By removing API keys to environment variables, ignoring the .env file, and cleaning up commit history, you can ensure that your sensitive data remains secure while maintaining the ability to push your source code to GitHub. This approach strikes the right balance between security and collaboration.

If you found this guide helpful, feel free to share this article or leave a comment below with your thoughts or additional tips!

DEV Community: Ryoichi Homma

What is a GitHub Gist? Here's Why You Should Use

1. What is a Gist?

2. Why Do We Use a Gist?

3. Repo vs. Gist — When to Use What

4. Real Scenarios Where Gist Shines

5. How to Share Code with a Gist

6. Official Gist Guideline

Conclusion

Essential Features & Concepts in Frontend You Must Know Before Technical Interviews

Agenda

1. JavaScript Foundational Concepts:

1.1. DOM Methods

1.2. Array Methods

1.3. == vs. ===

1.4. Bearer

How the Bearer is beneficial

2. ES5 vs. ES6:

2.1. Key Differences

2.2. Promise vs. async/await

Promises

async/await

2.3 Why do we need asynchronous functions?

Problem with synchronous code

Solution: asynchronous functions

3. TypeScript vs. JavaScript:

3.1. Why Choose TypeScript?

3.2. Type Interface

Why the interfaces are useful

How the interface works

4. React Features:

4.1. Prop Drilling

How prop drilling works

4.2. Props vs. State

4.3. Virtual DOM

How VDOM improves performance in frameworks

4.4. React Hooks

5. Vue Features:

5.1. Ref Function

5.2. v-model Directive

5.3. defineEmits()

How emit and defineEmits() works

5.4. computed Property

How computed works in password validation

5.5. v-if and v-for

Conjunction with v-else-if and v-else

Key attribute

5.6. aria-invalid Attribute

How the aria-invalid attribute works

6. Recommended Resource:

Conclusion

DSA & Searching Methods: Refresher for Coding Interview

Searching Methods

1. Linear Search

2. Binary Search (Iterative)

3. Depth-First Search (DFS)

4. Breadth-First Search (BFS)

5. Binary Search Tree Search

6. Hash-Based Search

Upcoming Posts

Data Structures & Algorithms: Refresher for Coding Interview

Common Data Structures

1. Array

2. Linked List

3. Stack (LIFO)

4. Queue (FIFO)

5. Hash Table / Hash Map

6. Tree

7. Graph

Upcoming Posts

How to Integrate an AWS EC2 Instance with VS Code using Remote SSH

Prerequisites

1. Install VS Code Extension

2. Connect to EC2 via SSH in VS Code

3. Transfer Project Folder

Understanding Digest Authentication

Digest Authentication

Implementation

Key Differences Between Basic and Digest Authentication

Conclusion

1.3. `==` vs. `===`

How the `Bearer` is beneficial

5.2. `v-model` Directive

5.3. `defineEmits()`

How emit and `defineEmits()` works

5.4. `computed` Property

How `computed` works in password validation

5.5. `v-if` and `v-for`

Conjunction with `v-else-if` and `v-else`

5.6. `aria-invalid` Attribute

How the `aria-invalid` attribute works

Step 2) Add `.env` to `.gitignore`

Configure `vite.config.ts`

Install `git filter-repo`