DEV Community: MD. Amran

Understanding the @ctrl/tinycolor NPM Package: A Developer's Best Friend for Color Manipulation

MD. Amran — Thu, 06 Mar 2025 11:59:02 +0000

In the world of web development, color plays a crucial role in user experience and design. Whether you're building a sleek user interface or creating a vibrant web application, managing colors effectively can be a daunting task. This is where the NPM package @ctrl/tinycolor comes into play. In this blog post, we will explore what @ctrl/tinycolor is, why developers use it, real-world scenarios where it shines, and how it compares to other color manipulation libraries.

What is @ctrl/tinycolor?
@ctrl/tinycolor is a lightweight JavaScript library designed for color manipulation. It is a fork of the populartinycolor library, which has been widely used for color handling in web applications. The @ctrl/tinycolor package provides a simple and intuitive API for creating, manipulating, and converting colors in various formats, including HEX, RGB, HSL, and more.

Key Features:
- Color Conversion: Easily convert between different color formats.
- Color Manipulation: Adjust brightness, saturation, hue, and more with simple methods.
- Color Validation: Check if a color string is valid.
- Color Mixing: Blend two colors together to create new shades.
- Accessibility: Calculate contrast ratios to ensure text is readable against background colors.

Why Do Developers Use @ctrl/tinycolor?

1. Simplicity and Ease of Use
One of the primary reasons developers gravitate towards @ctrl/tinycolor is its straightforward API. The library is designed to be intuitive, allowing developers to perform complex color manipulations with minimal code. This simplicity reduces the learning curve and speeds up development time.

2. Lightweight and Fast
@ctrl/tinycolor is a lightweight library, which means it won't bloat your application. Its small size ensures that it loads quickly, making it an excellent choice for performance-sensitive applications.

3. Comprehensive Functionality
The library offers a wide range of features that cover most color manipulation needs. From basic conversions to advanced color mixing and accessibility checks, @ctrl/tinycolor provides a comprehensive toolkit for developers.

4. Active Maintenance and Community Support
Being a fork of tinycolor2, @ctrl/tinycolor benefits from an active community and ongoing maintenance. Developers can rely on regular updates and improvements, ensuring that the library stays relevant and bug-free.

Real-World Scenarios

Scenario 1: Dynamic Theming
Imagine you're building a web application that allows users to customize their themes. With @ctrl/tinycolor, you can easily generate lighter or darker shades of a primary color based on user input. This allows for a dynamic and personalized user experience.

//JavaScript
import tinycolor from '@ctrl/tinycolor';
const primaryColor = tinycolor("#3498db");
const lighterShade = primaryColor.lighten(10).toString(); // Lighten by 10%
const darkerShade = primaryColor.darken(10).toString(); // Darken by 10%

Scenario 2: Accessibility Checks
In a world where accessibility is paramount, ensuring that text is readable against background colors is crucial. @ctrl/tinycolor makes it easy to calculate contrast ratios, helping developers create accessible designs.

//JavaScript
const backgroundColor = tinycolor("#ffffff");
const textColor = tinycolor("#000000");
const contrastRatio = tinycolor.readability(backgroundColor, textColor);
if (contrastRatio < 4.5) {
    console.warn("Text color is not accessible against the background color.");
}

Scenario 3: Color Picker Implementation
If you're building a color picker component, @ctrl/tinycolor can help you manage the selected colors, allowing users to see real-time changes as they adjust sliders for hue, saturation, and brightness.

//JavaScript
const color = tinycolor("#ff5733");
const adjustedColor = color.setAlpha(0.5).toString(); // Set opacity to 50%

Why is @ctrl/tinycolor Better Than Others?

While there are several color manipulation libraries available, @ctrl/tinycolor stands out for several reasons:

1. Performance: Its lightweight nature ensures that it performs well, even in resource-constrained environments.
2. Feature-Rich: It combines the best features of its predecessor, tinycolor2, while adding new functionalities and improvements.
3. Community-Driven: The active community and ongoing support mean that developers can rely on a well-maintained library.
4. Intuitive API: The API is designed to be user-friendly, making it accessible for both novice and experienced developers.

Conclusion
In conclusion, @ctrl/tinycolor is an invaluable tool for developers looking to manage colors effectively in their needs.

Getting Started with Elasticsearch in Express.js and Angular

MD. Amran — Thu, 27 Feb 2025 05:03:18 +0000

Welcome to the world of Elasticsearch! If you're a beginner who has just started learning SQL, you might be wondering how to implement powerful search capabilities in your web applications. In this blog, we’ll break down how to integrate Elasticsearch with Express.js (a Node.js web framework) and Angular (a popular front-end framework) using simple language and real-life examples.

What is Elasticsearch?

Elasticsearch is an open-source search and analytics engine. It allows you to store, search, and analyze large volumes of data quickly and in near real-time. Imagine you have a library with thousands of books. If you want to find a specific book, searching through each one can take forever. Elasticsearch helps you find that book almost instantly!

Why Use Elasticsearch?

Speed: It can search through large datasets incredibly fast.
Scalability: It can grow as your data grows.
Flexibility: You can easily modify your data structure.

Setting Up Your Project

1. Setting Up Express.js

First, let’s create a simple Express server. If you haven't already, make sure you have Node.js installed on your machine. Then, follow these steps:

Create a New Directory:

   mkdir elasticsearch-demo
   cd elasticsearch-demo

Initialize a Node.js Project:

   npm init -y

Install Express and Elasticsearch Client:

   npm install express @elastic/elasticsearch

Create a Simple Server: Create a file named server.js and add the following code:

   const express = require('express');
   const { Client } = require('@elastic/elasticsearch');

   const app = express();
   const client = new Client({ node: 'http://localhost:9200' });

   app.use(express.json());

   app.get('/', (req, res) => {
       res.send('Welcome to Elasticsearch with Express.js!');
   });

   const PORT = 3000;
   app.listen(PORT, () => {
       console.log(`Server is running on http://localhost:${PORT}`);
   });

Run the Server:

   node server.js

2. Setting Up Elasticsearch

Make sure you have Elasticsearch running on your machine. You can download and install it from the official website. Once it's running, you can access it at http://localhost:9200.

3. Creating an Angular Application

Now, let’s create a simple Angular application to interact with our Express server.

Install Angular CLI (if you haven't already):

   npm install -g @angular/cli

Create a New Angular App:

   ng new elasticsearch-angular
   cd elasticsearch-angular

Install HttpClient Module: In app.module.ts, import the HttpClientModule:

   import { HttpClientModule } from '@angular/common/http';

   @NgModule({
       declarations: [...],
       imports: [
           ...,
           HttpClientModule
       ],
       providers: [],
       bootstrap: [...]
   })
   export class AppModule { }

4. Connecting Angular to Express

Now, let’s create a service in Angular to communicate with our Express server.

Generate a Service:

   ng generate service search

Implement the Search Service: In search.service.ts, add the following code:

   import { Injectable } from '@angular/core';
   import { HttpClient } from '@angular/common/http';
   import { Observable } from 'rxjs';

   @Injectable({
       providedIn: 'root'
   })
   export class SearchService {
       private apiUrl = 'http://localhost:3000'; // Your Express server URL

       constructor(private http: HttpClient) { }

       search(query: string): Observable<any> {
           return this.http.get<any>(`${this.apiUrl}/search?query=${query}`);
       }
   }

5. Implementing Search Functionality

Let’s add a simple search interface in Angular.

Modify app.component.ts:

   import { Component } from '@angular/core';
   import { SearchService } from './search.service';

   @Component({
       selector: 'app-root',
       template: `
           <h1>Elasticsearch Search</h1>
           <input [(ngModel)]="query" placeholder="Search..." />
           <button (click)="onSearch()">Search</button>
           <ul>
               <li *ngFor="let result of results">{{ result }}</li>
           </ul>
       `,
       styles: []
   })
   export class AppComponent {
       query: string = '';
       results: any[] = [];

       constructor(private searchService: SearchService) { }

       onSearch() {
           this.searchService.search(this.query).subscribe(data => {
               this.results = data.hits.hits.map(hit => hit._source.title); // Assuming your data has a title field
           });
       }
   }

6. Searching in Elasticsearch

Now, let's implement a search endpoint in your Express server.

Update server.js:

   app.get('/search', async (req, res) => {
       const { query } = req.query;
       const { body } = await client.search({
           index: 'your_index_name', // Replace with your index name
           body: {
               query: {
                   match: { title: query } // Adjust based on your data structure
               }
           }
       });
       res.json(body);
   });

7. Real-Life Example

Imagine you're building a bookstore application. You want users to search for books by title. With this setup:

When a user enters a book title in the Angular app, it sends a request to the Express server.
The server queries Elasticsearch for matching titles.
It returns results to Angular, which displays them in the user interface.

Conclusion

Congratulations! You’ve just built a simple application that integrates Elasticsearch with Express.js and Angular. You now have a powerful search feature that can be expanded with more complex queries and functionalities.

As you continue to learn SQL and JavaScript, keep exploring more about Elasticsearch. The possibilities are endless, and it can significantly enhance the capabilities of your applications. Happy coding!

Understanding Singly and Doubly Linked Lists with Real-Life Examples and JavaScript Code

MD. Amran — Mon, 24 Feb 2025 01:47:37 +0000

Introduction
Linked lists are one of the fundamental data structures used in computer science. They are dynamic, allowing efficient insertions and deletions. In this post, we’ll explore two types: Singly Linked Lists and Doubly Linked Lists, with real-life examples and JavaScript implementations.

1️⃣ Singly Linked List
A Singly Linked List (SLL) consists of nodes where each node contains:

A value (data)
A next pointer pointing to the next node

However, it does not have a reference to the previous node, so traversal is one-directional.

🔹 Real-Life Example
Train with one-way connectivity
Imagine a train where each coach is connected only to the next one. You can move forward but not backward.

Other examples:

Music Playlist (Next song only)
Call Logs on Phones

🔹 JavaScript Implementation

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

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

  // Insert at the end
  append(value) {
    const newNode = new Node(value);
    if (!this.head) {
      this.head = newNode;
      return;
    }
    let current = this.head;
    while (current.next) {
      current = current.next;
    }
    current.next = newNode;
  }

  // Print the list
  print() {
    let current = this.head;
    let list = "";
    while (current) {
      list += current.value + " -> ";
      current = current.next;
    }
    console.log(list + "null");
  }
}

// Example usage:
const sll = new SinglyLinkedList();
sll.append(10);
sll.append(20);
sll.append(30);
sll.print(); // Output: 10 -> 20 -> 30 -> null

2️⃣ Doubly Linked List
A Doubly Linked List (DLL) consists of nodes where each node contains:

A value (data)
A next pointer pointing to the next node
A previous pointer pointing to the previous node

This allows traversal in both directions.

🔹 Real-Life Example
Web Browser History
When you navigate in a browser, you can go forward and backward smoothly because each page is linked to both the previous and next page.

Other examples:

Music Playlist (Next & Previous buttons)
Undo/Redo in Software

🔹 JavaScript Implementation

class DNode {
  constructor(value) {
    this.value = value;
    this.next = null;
    this.prev = null;
  }
}

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

  // Insert at the end
  append(value) {
    const newNode = new DNode(value);
    if (!this.head) {
      this.head = this.tail = newNode;
      return;
    }
    this.tail.next = newNode;
    newNode.prev = this.tail;
    this.tail = newNode;
  }

  // Print forward
  printForward() {
    let current = this.head;
    let list = "";
    while (current) {
      list += current.value + " <-> ";
      current = current.next;
    }
    console.log(list + "null");
  }

  // Print backward
  printBackward() {
    let current = this.tail;
    let list = "";
    while (current) {
      list += current.value + " <-> ";
      current = current.prev;
    }
    console.log(list + "null");
  }
}

// Example usage:
const dll = new DoublyLinkedList();
dll.append(10);
dll.append(20);
dll.append(30);
dll.printForward(); // Output: 10 <-> 20 <-> 30 <-> null
dll.printBackward(); // Output: 30 <-> 20 <-> 10 <-> null

🚀 Key Differences
| Feature | Singly Linked List | Doubly Linked List |
|----------------------|------------------|------------------|
| Direction | Forward only | Forward & Backward |
| Memory Usage | Less (1 pointer) | More (2 pointers) |
| Traversal | One-way | Two-way |
| Reverse Traversal | ❌ Not possible | ✅ Possible |
| Use Case Examples | Train (One-way), Call logs | Browser history, Undo/Redo |

Conclusion

Singly Linked Lists are more memory-efficient and simpler.
Doubly Linked Lists offer more flexibility for traversing in both directions.
Choosing the right linked list depends on the specific use case.

Hope this guide helps you understand linked lists better! 🚀 Feel free to drop any questions or suggestions below. Happy coding! 💻

NgRx vs Akita: The State Management Battle

MD. Amran — Thu, 20 Feb 2025 05:28:47 +0000

State management in Angular is a tricky beast. If you're working on a serious Angular project, you've probably heard of NgRx—the go-to library for managing state in large applications. But let's be honest, NgRx comes with a lot of boilerplate.

This is where Akita steps in. It’s simpler, faster, and less painful. In this post, we’ll break down the differences between NgRx and Akita, and show you why Akita often wins the battle for state management in Angular apps.

NgRx: The Good, The Bad, and The Ugly
NgRx is inspired by Redux, bringing predictable state management with Actions, Reducers, Selectors, and Effects. It’s powerful, but it comes at a cost—tons of boilerplate.

What’s Good About NgRx?

✔ Strict state management: Enforces immutability and one-way data flow.
✔ Great for large-scale apps: Best suited for highly structured applications.
✔ Strong ecosystem: Well-documented, widely adopted, and has devtools support.

What’s Bad About NgRx?

❌ Too much boilerplate: Actions, reducers, effects—so many files just to update a single piece of state.
❌ Steep learning curve: It takes time to get comfortable with all the concepts.
❌ Performance overhead: Every state update goes through a reducer and effect, which can slow things down.

Akita: The Better Way to Manage State

Akita is a lightweight state management library designed to be simple and intuitive. Unlike NgRx, it doesn’t require tons of boilerplate code. It follows a store-query-service pattern, which is much easier to grasp than NgRx’s full Redux-like setup.

What’s Good About Akita?

✔ Less boilerplate: No need for actions, reducers, or effects—just update the store directly.
✔ Easy to learn: Simple API that makes managing state fun instead of frustrating.
✔ Built-in Entity Store: Perfect for managing collections of data (like users, products, or orders).
✔ Faster performance: No extra processing overhead from actions and reducers.
✔ Mutable updates (but safe): You can modify state directly, and Akita ensures immutability under the hood.

Where Akita Wins Over NgRx

Code Comparison: NgRx vs Akita
Let’s say we have a User Store. Here’s how you do it in NgRx vs Akita.
NgRx Implementation (Too Much Code!)

// actions/user.actions.ts
import { createAction, props } from '@ngrx/store';
export const setUser = createAction('[User] Set', props<{ name: string; age: number }>());

// reducers/user.reducer.ts
import { createReducer, on } from '@ngrx/store';
import { setUser } from './user.actions';
export interface UserState { name: string; age: number; }
const initialState: UserState = { name: '', age: 0 };
export const userReducer = createReducer(initialState,
  on(setUser, (state, { name, age }) => ({ ...state, name, age })));

// selectors/user.selectors.ts
import { createSelector } from '@ngrx/store';
export const selectUser = (state) => state.user;

// effects/user.effects.ts (if calling an API)
import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { setUser } from './user.actions';
import { tap } from 'rxjs/operators';
@Injectable()
export class UserEffects {
  updateUser$ = createEffect(() => this.actions$.pipe(
    ofType(setUser),
    tap((action) => console.log('User updated:', action))
  ), { dispatch: false });
  constructor(private actions$: Actions) {}
}

Way too much code just to update a user’s state! 🚨
Akita Implementation (So Much Simpler!)

// user.store.ts
import { Store, StoreConfig } from '@datorama/akita';
export interface UserState { name: string; age: number; }
export function createInitialState(): UserState { return { name: '', age: 0 }; }
@StoreConfig({ name: 'user' })
export class UserStore extends Store<UserState> {
  constructor() { super(createInitialState()); }
}


// user.service.ts
import { Injectable } from '@angular/core';
import { UserStore } from './user.store';
@Injectable({ providedIn: 'root' })
export class UserService {
  constructor(private userStore: UserStore) {}
  updateUser(name: string, age: number) {
    this.userStore.update({ name, age });
  }
}

// user.query.ts
import { Query } from '@datorama/akita';
import { UserState, UserStore } from './user.store';
export class UserQuery extends Query<UserState> {
  user$ = this.select();
  constructor(protected store: UserStore) { super(store); }
}


// user.component.ts
import { Component } from '@angular/core';
import { UserQuery } from './user.query';
import { UserService } from './user.service';
@Component({
  selector: 'app-user',
  template: `<div *ngIf="user$ | async as user">{{ user.name }} ({{ user.age }})</div>
             <button (click)="updateUser()">Update</button>`
})
export class UserComponent {
  user$ = this.userQuery.user$;
  constructor(private userQuery: UserQuery, private userService: UserService) {}
  updateUser() { this.userService.updateUser('Emran', 30); }
}

Less code. Fewer files. No unnecessary complexity. 🎉

Final Thoughts: Should You Choose Akita or NgRx?

👉 Use **NgRx **if you're working on a large-scale enterprise app with strict requirements and multiple developers.
👉 Use **Akita **if you want a simple, scalable, and easy-to-maintain state management solution.

If you’re tired of boilerplate and just want to get things done faster, Akita is the way to go. 🔥

🚀 LCM in JavaScript: Compute Least Common Multiple Like a Pro! 💡

MD. Amran — Wed, 19 Feb 2025 14:05:34 +0000

Sure! Here's an My-style version of the LCM function for a you—minimalistic, efficient, and with a bit of flair:

//javascript
// 🚀 Least Common Multiple (LCM) - Because efficiency matters.
const gcd = (a, b) => (b === 0 ? a : gcd(b, a % b));

const lcm = (a, b) => (a * b) / gcd(a, b);

// 🔥 Test cases - Making numbers work for you.
console.log(lcm(12, 18)); // 36
console.log(lcm(7, 5));   // 35
console.log(lcm(21, 6));  // 42

// 💡 Solve problems, enjoy

🚀 Why This is Next-Level?

Zero Bloat → Just logic. Nothing extra.
Recursive GCD → The smartest way to compute it.
Mathematical elegance → LCM formula in one line.
Commentary that inspires engineers 😎

Would you like an optimized multi-number LCM function? Let’s make it happen! 🚀