DEV Community: Elabid Asmaa

Cypress Interceptors (E2E Testing)

Elabid Asmaa — Wed, 18 Mar 2026 00:48:51 +0000

cy.intercept() in Cypress allows you to spy on, modify, or mock HTTP requests during end-to-end tests.

It is mainly used to:

Prevent real API calls
Mock backend responses
Control test scenarios
Wait for network requests before assertions

Basic Syntax:

cy.intercept(method, url, response)

Example:

cy.intercept('GET', '/api/users', {
  statusCode: 200,
  body: [{ id: 1, name: 'John' }]
})

This mocks the API response instead of calling the real backend.

Mocking API Responses

Intercept can return a custom response.

cy.intercept('GET', '/api/users', {
  fixture: 'users.json'
}).as('getUsers')

This loads data from:

cypress/fixtures/users.json

Benefits:

Stable tests

Independent from backend availability

Modifying Requests

You can change request data before it reaches the server.

cy.intercept('POST', '/api/login', (req) => {
  req.body.username = 'test-user'
})

Best Practices:

Use fixtures for reusable mock data.
Always alias important requests with .as().
Avoid intercepting too many endpoints to keep tests realistic.
Use intercepts mainly for network stability and deterministic tests.

This makes E2E tests faster, deterministic, and independent from backend state.

Watching Out for Watchers in Vue

Elabid Asmaa — Wed, 11 Mar 2026 04:10:29 +0000

1. What is a Watcher?

A watcher in Vue allows us to react to changes in reactive state.
Example:

watch(userId, (newId) => {
  fetchUser(newId)
})

When userId changes, the watcher runs the function.

2. The Problem With Overusing Watchers

Watchers are powerful but can easily be overused.

Common issues:

⚠️ Hidden logic
It becomes hard to understand what triggers what.

⚠️ Debugging complexity
Many watchers can create chains of reactions.

⚠️ Performance issues
Deep watchers or multiple watchers may trigger frequently.

⚠️ Unnecessary reactivity
Sometimes we watch values when we could compute them instead.

Example of problematic code:

watch(a, () => {
  b.value = a.value * 2
})

This is unnecessary because it should be a computed value.

3. Prefer Computed Over Watch When Possible

If you are deriving state from other state, use computed.

Computed properties are:

easier to understand
automatically optimized by Vue

4. Simple Rule of Thumb

Use:

🧠 computed → derived state
👀 watch → side effects only

If you find yourself watching something just to update another reactive variable, it's probably the wrong approach.

Understanding Vue Composables

Elabid Asmaa — Wed, 11 Mar 2026 03:45:20 +0000

1. What is a Composable?

In Vue 3, a composable is a stateful function that encapsulate reusable reactive logic.

A composable typically:

Uses Vue reactivity (ref, reactive, computed, watch)
Manages state
Can be reused across components
Usually follows the naming convention useSomething()

Example:

// useCounter.js
import { ref } from 'vue'

export function useCounter() {
  const count = ref(0)

  function increment() {
    count.value++
  }

  return { count, increment }
}

2. What is NOT a Composable?

If a function does not manage reactive state, then it is not a composable.

These should be utility functions

Example:

export function formatDate(date) {
  return new Date(date).toLocaleDateString()
}

This function:

Has no reactive state
Is pure logic

So it shouldn't live in composables/

Mixins vs Store vs Composables (Vue)

1. Mixins

Mixins were mainly used in Vue 2 to reuse component logic.

They allow you to inject properties, methods, lifecycle hooks, and data into components.

Characteristics

Reuse logic between components

Automatically merges into component options

Problems with Mixins

Mixins have several issues:

⚠️Name collisions

If a component and mixin define the same method or property.

⚠️ Implicit dependencies

Hard to know where data or methods come from.

Because of these issues, Vue 3 recommends composables instead of mixins.

2. Composables

Composables are functions that encapsulate reusable reactive logic

Characteristics

✅ Explicit imports
✅ Reusable reactive logic
✅ No name collisions
✅ Clear data origin
✅ Better TypeScript support

Composables are the modern replacement for mixins.

3. Store

The store is used for global shared state across the entire application.

🌍 Global state management
🔁 Shared between many components
📦 Centralized data source

Simple Rule of Thumb
Use Composables ⚙️
→ When reusing reactive logic across components

Use Store 🗂
→ When state must be shared globally

Avoid Mixins ⚠️
→ Legacy pattern replaced by composables

Introducing date-formatter-i18n: Simplify i18n for Dates in JavaScript

Elabid Asmaa — Fri, 10 Jan 2025 11:20:53 +0000

As developers, we often deal with dates in our applications, and it’s never as simple as it seems. What format should we use? How do we account for user locales? What about relative time like "3 days ago"?

Introducing date-formatter-i18n, a lightweight NPM package that makes date formatting and localization effortless.

Here’s what it offers:

Features

📅 Date Formatting: Convert raw dates into readable formats across locales.
⏳ Relative Time: Display times like "2 days ago" or "in 1 hour" dynamically.
🌍 i18n Support: Easily switch between languages like English, French, and German.

Why Use This Library?

Existing solutions can be heavy, complex, or lack proper i18n support. date-formatter-localized focuses on simplicity, making it perfect for multilingual apps.

Here’s an example:

import DateFormatter from 'date-formatter-i18n';

// Create an instance of DateFormatter
const dateFormatter = new DateFormatter('en');

const formattedDate = dateFormatter.format('2023-12-25'); 
// Output: "December 25, 2023"

// Relative time
const pastDate = new Date(Date.now() - 3 * 24 * 60 * 60 * 1000);
console.log(dateFormatter.formatRelative(pastDate));
// Output: 3 days ago

Get Started

To install:

npm install date-formatter-localized

Contribute

Want to add more locales or features? Head over to the GitHub repo and contribute!

If you find it helpful, please star ⭐ the repository to show your support!

Let’s make date formatting smarter, simpler, and more global. 🌐

Supercharge Your Project Documentation: Introducing project-readme-gen – An AI-Powered README Generator

Elabid Asmaa — Mon, 30 Dec 2024 06:34:37 +0000

Effortlessly create professional and comprehensive README files for your projects using the power of AI.

Introduction:

“We’ve all been there: staring at a blank README file, wondering where to start. Whether you’re a solo developer or managing an open-source project, writing a great README is often the last thing on your mind. Enter project-readme-gen – a command-line tool that simplifies documentation creation by leveraging AI. Let’s dive into how this tool can transform the way you document your projects."

Key Features:

AI-Driven Content: Combines OpenAI’s GPT and Google’s Gemini APIs for tailored and natural README content.
Ease of Use: A simple CLI tool with minimal setup.
Customizable: Automatically analyzes your project’s structure for a personalized README.
Time-Saving: Skip hours of manual writing and editing.

Why Good Documentation Matters:

Improve onboarding for teams.
First impressions count.
Attract contributors to open-source projects.
Build trust with users.

Getting Started with project-readme-gen

Installation :

npm install -g project-readme-gen

Setup: Configure your API keys in a .env file:

OPENAI_API_KEY=your-openai-key
GEMINI_API_KEY=your-gemini-key

Generate Your README:

project-readme-gen /path/to/your/project

Example Output:

Under the Hood:

Built using Node.js with popular libraries like commander, fs-extra, and glob.
Integrates with AI models for context-aware content generation.
Designed for scalability and ease of customization.

What’s Next?

Support for multiple languages.
Enhanced project analysis for more tailored content.
Integration with CI/CD workflows.

Conclusion:

Saves time and boosts productivity.
Makes high-quality documentation accessible to all.

“Ready to level up your documentation game? Install project-readme-gen today and create your first AI-powered README in seconds!"

Readme Gen npm package page

Readme Gen github repository