DEV Community: Claude Fassinou

Creating an Api generator plugin for Claude Code

Claude Fassinou — Tue, 14 Oct 2025 07:41:35 +0000

Claude Code plugins allow you to extend the capabilities of your AI assistant with custom commands, specialized agents, and tool integrations. In 3 minutes, create your first functional plugin. Read the full Docs

Why create plugins?

Intelligent Automation: Transform your repetitive workflows into reusable slash commands. A simple /deploy prod can orchestrate tests, build, and deployment.
Standardized Team Tooling: Share your best practices via automatically installed plugins. Your team uses the same code conventions, deployment scripts, and integrations.
Limitless Extensibility: Connect Claude to your existing tools (databases, APIs, internal services) via MCP, create specialized agents for your business domains, and trigger automatic actions with hooks.

Prerequisites

Claude Code installed on your machine
Basic command line knowledge
Understanding the Plugin Architecture
A Claude Code plugin follows a simple modular pattern:

api-generator-plugin/
├── .claude-plugin/
│   └── plugin.json          # Plugin metadata
├── commands/                 # Custom slash commands
├── agents/                   # Specialized agents (optional)
├── hooks/                    # Automations (optional)
└── .mcp.json                # External integrations (optional)

Creating an API Generator Plugin in 5 Steps

We will create a practical plugin that generates a complete REST API from a simple description.

1. Create the marketplace structure

mkdir -p ~/claude-marketplace/plugins
cd ~/claude-marketplace/plugins
mkdir api-generator-plugin
cd api-generator-plugin

2. Create the plugin manifest

Create .claude-plugin/plugin.json:

{
  "name": "api-generator-plugin",
  "version": "1.0.0",
  "description": "Generates complete REST APIs with models, routes, and controllers"
}

3. Add the API generation command

Create commands/api-generate.md:

---
description: "Generates a complete REST API for an entity"
args:
  - name: entity
    description: "Name of the entity (ex. User, Product, Post)"
    required: true
  - name: fields
    description: "Comma-separated fields (ex. name:string,email:string,age:number)"
    required: true
  - name: framework
    description: "Framework to use (express, fastify, nestjs)"
    required: false
    default: express
---

# API Generation for the {{entity}} Entity

I will create a complete REST API with the following components:

## 📁 Generated Structure

src/
├── models/{{entity}}.model.js
├── controllers/{{entity}}.controller.js
├── routes/{{entity}}.routes.js
└── validators/{{entity}}.validator.js


## 📝 Detected Fields

{{fields}}

## 🔧 Generation Instructions

Create the following files, respecting {{framework}} conventions:

### 1. Data Model (`models/{{entity}}.model.js`)
- Define the schema with fields: {{fields}}
- Add timestamps (createdAt, updatedAt)
- Validate data types

### 2. Controller (`controllers/{{entity}}.controller.js`)
Implement these methods:
- `getAll{{entity}}s`: GET - Paginated list
- `get{{entity}}ById`: GET - Single item by ID
- `create{{entity}}`: POST - Create an item
- `update{{entity}}`: PUT - Update
- `delete{{entity}}`: DELETE - Delete

Handle errors with try/catch and return appropriate HTTP codes.

### 3. Routes (`routes/{{entity}}.routes.js`)
Create these endpoints:

GET /api/{{entity}}s
GET /api/{{entity}}s/:id
POST /api/{{entity}}s
PUT /api/{{entity}}s/:id
DELETE /api/{{entity}}s/:id


### 4. Validators (`validators/{{entity}}.validator.js`)
Validate the fields: {{fields}}
- Correct data types
- Required fields
- Business constraints

## ✅ After Generation

1. Import the routes into `app.js`:
```

javascript
const {{entity}}Routes = require('./routes/{{entity}}.routes');
app.use('/api', {{entity}}Routes);

Test the endpoints with curl or Postman
Document the API with Swagger (optional)

Now generate the 4 complete files with production-ready code.

Key Pattern: This command uses complex templates with structured instructions to guide Claude in code generation.

4. Add a command for a unique endpoint

Create commands/api-endpoint.md:


`markdown
---
description: Adds a custom endpoint to an existing API
args:
  - name: entity
    description: Name of the entity concerned
    required: true
  - name: method
    description: HTTP Method (GET, POST, PUT, DELETE, PATCH)
    required: true
  - name: endpoint
    description: Endpoint path (ex. /search, /export)
    required: true
  - name: description
    description: Description of what the endpoint does
    required: true
---

# Adding a {{method}} {{endpoint}} endpoint for {{entity}}

## 📋 Specifications

**Entity**: {{entity}}
**Method**: {{method}}
**Endpoint**: `/api/{{entity}}s{{endpoint}}`
**Function**: {{description}}

## 🔧 Generation

Add this new endpoint to the existing file:

1. **Controller** (`controllers/{{entity}}.controller.js`):
   - Create the method that implements: {{description}}
   - Handle errors and validations
   - Return an appropriate JSON response

2. **Route** (`routes/{{entity}}.routes.js`):
   - Add: `router.{{method}}('{{endpoint}}', controller.methodName);`

3. **Suggested Tests**:
```bash
curl -X {{method}} http://localhost:3000/api/{{entity}}s{{endpoint}}
````

Generate the complete code for this endpoint.

**5. Configure the local marketplace**

At the root `~/claude-marketplace/`, create `marketplace.json`:

```json
{
  "name": "My Local Marketplace",
  "plugins": [
    {
      "source": "./plugins/api-generator-plugin"
    }
  ]
}
```

**6. Install and Test**

```bash
# Add your local marketplace
claude marketplace add file://~/claude-marketplace

# Install your plugin
claude marketplace install api-generator-plugin

# Test API generation
/api-generate User "name:string,email:string,age:number" express

# Add a search endpoint
/api-endpoint User GET /search "Search users by name or email"
```

Check your new commands with `/help`.

**Concrete Usage Example**

```bash
# Generate a complete API for a blog
/api-generate Post "title:string,content:text,authorId:number,published:boolean" express

# Add a publication endpoint
/api-endpoint Post PATCH /publish "Publish a blog post"

# Generate an e-commerce API
/api-generate Product "name:string,price:number,stock:number,category:string" fastify
```

**Design Concepts**

**Naming Convention**

  * Plugins: kebab-case (`api-generator-plugin`)
  * Commands: action verbs (`/api-generate`, `/api-endpoint`)
  * Variables: double curly braces (`{{entity}}`, `{{fields}}`)

**Structured Instruction Pattern**
Complex commands use markdown sections to guide Claude:

  * Clear instructions: Numbered steps
  * Code examples: Concrete snippets
  * Checklist: Post-generation actions

**Organization for Advanced Plugins**

```
advanced-api-plugin/
├── commands/
│   ├── generate/
│   │   ├── api-generate.md
│   │   └── api-crud.md
│   ├── enhance/
│   │   ├── api-auth.md
│   │   └── api-cache.md
│   └── deploy/
│       └── api-deploy.md
├── agents/
│   └── api-architect.json
└── hooks/
    └── hooks.json
```

**Advanced Components**

**Specialized Agents**

Create `agents/api-architect.json`:

```json
{
  "name": "api-architect",
  "instructions": "You are an expert API architect. You analyze needs, propose RESTful patterns, optimize performance, and ensure scalability. You are proficient in Express, Fastify, NestJS, and security best practices.",
  "model": "claude-sonnet-4-5"
}
```

Use the agent: `/agents` then select "api-architect"

**Automation Hooks**

Create `hooks/hooks.json`:

```json
{
  "pre-commit": "commands/api-lint.md",
  "post-generate": "commands/api-test-setup.md"
}
```

**MCP Integration (Databases)**

Create `.mcp.json` to connect your plugin to a database:

```json
{
  "mcpServers": {
    "database": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-postgres"],
      "env": {
        "DATABASE_URL": "postgresql://localhost/mydb"
      }
    }
  }
}
```

**Sharing and Deployment**

**For your Team**

Add to the repository's `.claude/settings.json`:

```json
{
  "marketplaces": [
    "file://./team-plugins"
  ],
  "plugins": [
    "api-generator-plugin"
  ]
}
```

Members automatically install the plugin by trusting the folder.

**Best Practices**

  * **Version**: Semantic versioning (1.0.0 → 1.1.0 → 2.0.0)
  * **Document**: `README.md` with usage examples
  * **Test**: Validate each command with real cases
  * **Iterate**: Add features progressively

**Quick Debugging**

Common Issues:

  * Plugin not recognized → Check that `commands/` is at the plugin root
  * Variables not replaced → Use `{{variable}}` with double curly braces
  * Command invisible → Validate the YAML frontmatter (3 dashes, correct syntax)
  * Installation errors → `claude marketplace validate file://~/claude-marketplace`

**Next Steps**

  * **Explore Marketplaces**: Get inspiration from community plugins
  * **Create Agents**: Specialize Claude for your domains (DevOps, Data, Security)
  * **Automate with Hooks**: Pre-commit checks, post-deploy notifications
  * **Integrate Your Tools**: Connect Jira, GitHub, Slack via MCP
  * **Share**: Contribute to the Claude Code ecosystem

Laravel's `fillable property` and the Hidden Danger to Your Business App

Claude Fassinou — Fri, 26 Sep 2025 10:36:34 +0000

Laravel is a powerful PHP framework, and its Eloquent ORM makes database interactions a breeze. However, a common pitfall involving the $fillable property can lead to a critical security flaw known as a Mass Assignment Vulnerability, potentially compromising your entire application.

What is Mass Assignment?

Mass assignment is the practice of populating a model with an array of user input, usually from a form submission, in a single go. In Laravel, this often looks like:

// Populating a model with ALL request data
User::create(\$request->all()); // 👈 DANGER ZONE!

This is convenient, but it's dangerous if you don't control which attributes are allowed to be set this way.

The Role of `\$fillable`

The $fillable property in a Laravel model is your white-list for mass assignment. It specifies an array of columns that are safe to be filled using methods like create(), update(), or fill().

If an attribute is not in the $fillable array, Laravel's security layer will prevent it from being set via mass assignment.

The Business Danger: Unrestricted Access

This code illustrates the danger:

Vulnerable Model: The User model has a sensitive column, is_admin, included in the $fillable array.

// In User.php
protected \$fillable = [
    'name',
    'email',
    'password',
    'is_admin', // 👈 THE FLAW
];

Vulnerable Controller: The application blindly accepts and assigns all validated request data to the model.
```
// In TestController.php
User::create(\$request->all()); 
```

A malicious user can simply inject an is_admin field into their registration form data. Because the controller uses create(\$request->all()) and is_admin is in $fillable, the application will happily set the user's is_admin attribute to true (or 1).

🔥 The Result: A standard user can instantly become an Administrator, gaining unauthorized access to sensitive data, control panels, and potentially damaging your entire system and business integrity.

The Solution: Always Restrict `\$fillable`

To protect your business, always adhere to this simple rule:

NEVER include sensitive, high-privilege columns like is_admin, role, api_token, or balance in your model's \$fillable property.

The Safe Code Fix:

Remove the sensitive field from $fillable:

// The SECURE User.php
protected \$fillable = [
    'name',
    'email',
    'password',
    // 'is_admin' is GONE! ✅
];

Explicitly handle sensitive fields (if needed): If you need to set is_admin or another protected field, do it explicitly, line by line, only after checking authorization.

// The SECURE Controller code
\$validatedData = \$request->validate([...]);

\$user = User::create(\$validatedData); 

// Set protected fields ONLY if an authorized admin is doing it.
// e.g., if (auth()->user()->isAdmin()) { \$user->is_admin = 1; \$user->save(); }

Protect your application by being meticulous with your $fillable arrays!

I am Claude Fassinou, Software developer, and Code reviewer.

AI and the productivity trap

Claude Fassinou — Sat, 06 Sep 2025 07:49:21 +0000

AI and the productivity trap

Honestly, we've all fallen for it. We're living in the age of AI, and the temptation to let it do the heavy lifting is huge. The problem is, if we don't master the basics anymore, we risk ending up with apps that look great on the surface but are riddled with hidden problems. Silent bugs, invisible technical debt... until the day everything collapses.

The Tech Lead's observation

As a team lead, I see this every day. My developers are fully embracing tools like ChatGPT or Gemini, and I can't blame them—it's so much faster. But when I do a code review, I discover a bunch of stuff that has no business being there:

Dead code hanging around for no good reason.
Hardcoded values everywhere that should have been variables.
Shaky or completely outdated logic.
Old legacy code accidentally brought back to life.
Features that mysteriously disappear between two versions.

The pace is insane, we're churning out projects, but no one is taking the time to actually read the code the AI generated. And that's where technical debt quietly piles up.

My strategy for regaining control

I realized we had to take back the reins. Here's what's working for us:

Backend is sacred. Backend code must be checked and re-checked—no exceptions. It's the foundation of everything.
We do TDD by hand. We don't let the AI write our tests. We write our tests ourselves, and only then do we ask the AI to write the code. We meticulously review every unit test it proposes, because we can't blindly trust it.
Smart prompts. We force the AI to keep things simple. We ask it to apply the KISS (Keep It Simple, Stupid) and YAGNI (You Aren't Gonna Need It) principles. We don't want a massive, convoluted mess.
We test seriously. Every feature has to be tested from A to Z. The hidden bugs are the most insidious ones.

My pro tip: I turn my prompts into to-do lists. I ask the AI to validate each step, and I verify everything point by point. It sounds simple, but it massively reduces production errors.

AI is a rocket ship, for sure, but it will never replace our critical eye and our expertise. It's up to us to learn to use it smartly, without getting lazy
.

Fassinou Claude, Developer • Tech Lead • IT Project Manager in training

After and Before Hooks with Laravel Controller

Claude Fassinou — Fri, 20 Sep 2024 17:22:32 +0000

After and Before Hooks with Laravel Controller

Have you ever encountered a situation where you want to perform an action before or after certain controller methods, perhaps to avoid code duplication, writing an event listener, or creating validation files? You want to keep things simple but move faster. Here's how you can solve this problem. Unfortunately, without an optimized approach, these repetitive tasks can lead to code duplication, making your application harder to maintain.

Do you want to avoid duplicating code or repeatedly writing listeners? Are you looking for a simple and fast solution?

In this article, we will solve this issue using a powerful and flexible approach: controller hooks in Laravel. With this technique, you can automate cross-cutting actions without touching the code of your controller methods. It’s an elegant solution to improve the clarity and maintainability of your code.

The Problem: Code Duplication and Lack of Flexibility

Let’s take a classic example. Suppose you have a controller with several methods that require similar operations, like initializing a service or formatting responses. The following code illustrates this repetition:

class ExampleController extends Controller
{
    private $someService;

    public function __construct(SomeService $someService)
    {
        $this->someService = $someService;
    }

    public function methodA(Request $request)
    {
        $this->someService->init($request->some_id)->withModel();
        // Specific logic for methodA
        $result = // ...
        return $this->formatResponse($result);
    }

    public function methodB(Request $request)
    {
        $this->someService->init($request->some_id)->withModel();
        // Specific logic for methodB
        $result = // ...
        return $this->formatResponse($result);
    }

    private function formatResponse($data)
    {
        return response()->json(['success' => true, 'data' => $data]);
    }
}

Problems:

Code duplication: The service initialization is duplicated in each method.
Clutter: The response formatting is also duplicated, making long-term maintenance difficult.
Lack of flexibility: Adding new cross-cutting features, such as logging or error handling, requires modifying each method.

The Solution: Using Hooks in Controllers

With controller hooks, you can centralize these operations and apply them automatically before or after the execution of the relevant methods. Here’s how to refactor the previous example using this approach.

Refactoring with Hooks

use LaravelHooks\Traits\HasControllerHooks;

class ExampleController extends Controller
{
    use HasControllerHooks;

    private $someService;

    public function __construct(SomeService $someService)
    {
        $this->someService = $someService;
    }

    public function methodA(Request $request)
    {
        // Specific logic for methodA
        return // ...
    }

    public function methodB(Request $request)
    {
        // Specific logic for methodB
        return // ...
    }

    public function useHooks()
    {
        $this->beforeCalling(['methodA', 'methodB'], function ($request, ...$params) {
            $this->someService->init($request->some_id)->withModel();
        });

        $this->afterCalling(['methodA', 'methodB'], function ($result) {
            return response()->json(['success' => true, 'data' => $result]);
        });
    }
}

Benefits of Using Hooks

Cleaner and more concise code: Each method focuses only on business logic. Repetitive actions are handled elsewhere.
Centralized initialization: No need to duplicate service initialization in every method.
Consistent response formatting: Formatting is applied uniformly without duplication.
Easier to add new features: Hooks allow you to quickly add new functionalities like logging or error handling without modifying existing methods.

Practical Use Case: Payment Management

Let’s take a concrete use case to illustrate this approach. Imagine a payment management system where you need to check security, initiate services, and format responses. Here’s how to use hooks to make the code cleaner and more maintainable:

use LaravelHooks\Traits\HasControllerHooks;

class PaymentController extends Controller
{
    use HasControllerHooks;

    private $paymentService;

    public function __construct(PaymentService $paymentService)
    {
        $this->paymentService = $paymentService;
    }

    public function store(Request $request)
    {
        return $this->paymentService->createPayment($request->all());
    }

    public function verify(Request $request, $paymentId)
    {
        return $this->paymentService->verifyPayment($paymentId);
    }

    public function checkStatus(Request $request, $paymentId)
    {
        return $this->paymentService->checkPaymentStatus($paymentId);
    }

    public function useHooks()
    {
        $this->beforeCalling(['store', 'verify', 'checkStatus'], function ($request, ...$params) {
            $this->paymentService->init($request->payment_id);
            Log::info("Payment operation initiated", ['method' => $this->currentMethod, 'user_id' => auth()->id()]);

            // Security check
            if (!$this->securityService->verifyUserAllowed(auth()->user(), $request->payment_id)) {
                throw new UnauthorizedPaymentException("User not authorized for this payment operation");
            }
        });

        $this->afterCalling(['store', 'verify', 'checkStatus'], function ($result) {
            return response()->json(['success' => true, 'data' => $result]);
        });

        $this->addErrorHandler(PaymentException::class, function ($e) {
            return response()->json(['success' => false, 'error' => $e->getMessage()], 400);
        });
    }
}

What Hooks Bring to the Table:

Simplified service initialization: No need to write initialization code in every method.
Automatic logging: Each payment operation is logged without extra effort.
Centralized security checks: Security is handled centrally before each payment-related method.
Simplified error handling: A clear and centralized approach to handling specific exceptions.

Source

laravel-hooks

Unlock React Form Validation with Trivule: The Game-Changing Approach

Claude Fassinou — Tue, 28 May 2024 00:27:33 +0000

If you love the simplicity of React, you'll adore Trivule. This solution allows you to validate your forms easily and effectively. In this article, we will validate a form with two fields: email and message, to show how user-friendly and straightforward it is to use Trivule.

Example of output

Extract from

Creating the Project

To start, create a project with Vite:

npm create vite@latest

Follow the instructions to complete the setup. I chose the TypeScript option, but you can choose whichever suits you best.

Then, install Trivule:

npm install trivule

Validation Rules

Email: required, maximum 63 characters, must be a Gmail address.
Message: required, maximum 250 characters, must start with "Hello".

Creating the React Component

Create a file form.tsx in your React working directory:

import React, { useEffect, SyntheticEvent } from "react";
import { TrivuleForm } from "trivule";

// Callback to define validation rules
const bindRules = (trivuleForm: TrivuleForm) => {
  trivuleForm.make({
    email: {
      rules: "required|email|endWith:@gmail.com|max:63",
      messages: {
        endWith: "Only Gmail addresses are allowed",
      },
    },
    message: {
      rules: "required|startWith:Hello|max:250",
    },
  });
};

// React Component
function Form() {
  const trivuleForm = new TrivuleForm({ invalidClass: "is-invalid" });
  trivuleForm.afterBinding(bindRules);

  useEffect(() => {
    // The code runs once the form is found in the DOM
    trivuleForm.bind("#myForm");
  }, []);

  const handleSubmit = (e: SyntheticEvent) => {
    if (!trivuleForm.passes()) {
      e.preventDefault();
      return;
    }
    const data = trivuleForm.validated();
    console.log(data);
  };

  return (
    <form id="myForm" onSubmit={handleSubmit}>
      <h3>Trivule + React-vite</h3>
      <div className="form-group">
        <input type="text" name="email" />
        <div className="alert alert-danger" role="alert">
          <div data-tr-feedback="email"></div>
        </div>
      </div>
      <div className="form-group">
        <textarea name="message"></textarea>
        <div className="alert alert-danger" role="alert">
          <div data-tr-feedback="message"></div>
        </div>
      </div>
      <button type="submit">Submit</button>
    </form>
  );
}

export default Form;

Integrating into the Application

Import and use the Form component in App.tsx:

import React from "react";
import "./App.css";
import Form from "./form";

function App() {
  return <Form />;
}

export default App;

Styling Flexibility

Trivule is agnostic about the styling of your form. It provides an API that allows you to apply your own styles based on the validation status. You can define classes to indicate valid or invalid states, and Trivule will handle the rest.

Learn More

To further your knowledge of Trivule, check out the following resources:

You can also create a TrivuleForm component, export it, and validate your forms without manual initialization. Check out an example on GitHub.

Easily Understanding Lifecycles in Programming

Claude Fassinou — Mon, 27 May 2024 10:37:20 +0000

In the world of programming, every application follows a specific journey from its creation to its closure. This journey, often termed as a "lifecycle," is fundamental for developers. But what does this really mean? Let me explain to you in a simple and concrete manner.

What is a Lifecycle?

Imagine your application as a living organism that traverses different phases of its life, from birth to death. Each phase or lifecycle represents a crucial moment in the operation of your application. These moments are triggered by events like the application's launch, user interaction, or its closure.

Why Do We Use Lifecycles?

Lifecycles are used to manage the behavior of the application at various points during its execution. They allow developers to take specific actions at each step, such as initializing variables, loading data, or cleaning up resources. In summary, lifecycles provide a structure for organizing code and ensuring that the application functions correctly in all situations.

Illustration

Imagine you're building a house. You have key stages like the foundation, walls, roof, etc. Each stage requires specific actions to progress to the next. Lifecycles work similarly for an application, ensuring that each phase of its execution is properly managed.

What Problems Do Lifecycles Solve?

Without lifecycles, managing the different situations an application may encounter would be complicated. For example, what happens when the user closes the application or interacts with a form? Lifecycles offer entry points to execute the necessary code for each event, effectively addressing these questions.

Some Frameworks That Use Lifecycles

Many modern frameworks simplify the development process by using lifecycles. Whether it's a frontend or backend framework, the operating principle is almost the same. But let's focus on frontend frameworks.

Practical Examples of Lifecycles

During Application Creation

React: Use the useState hook to prepare initial variables.

    const [state, setState] = useState(initialState);

Angular: Angular uses the constructor to define initial variables, then ngOnInit to prepare variables, for example, during component initialization.

    constructor() {
        this.variable = initialValue;
    }

    ngOnInit() {
        // Load data from a server
    }

After Application Creation: Initializing Interactions

React: Use useEffect to inject variables and initialize interactions after component rendering.

    useEffect(() => {
        // Initialize interactions
    }, []);

Angular: Use ngAfterViewInit to manipulate DOM elements after HTML content is ready.

    ngAfterViewInit() {
        // Manipulate DOM elements
    }

When Content Changes
React: useEffect can be used with a dependency to react to content changes.

    useEffect(() => {
        // React to content changes
    }, [content]);

Angular: ngOnChanges can be used to handle changes in component-bound properties.

    ngOnChanges(changes: SimpleChanges) {
        if (changes['content']) {
            // React to content changes
        }
    }

It's important to consult the documentation of these frameworks to better understand how to use them.

Conclusion

Lifecycles are an essential tool for every developer, allowing for effective management of an application's lifecycle and ensuring a consistent user experience. By understanding and applying these fundamental concepts, developers can build robust and reliable applications, ready to tackle the challenges of the ever-evolving digital world.

With lifecycles, you can transform a simple application into an exceptional user experience, managing each stage in a structured and efficient manner. Embark on this journey and discover how lifecycles can revolutionize your approach to application development.

In the next article, we'll explore how to use lifecycles according to developers' needs in three major frameworks. Subscribe to stay updated!

Follow me on:

Dev.to

Github

Unlock Angular Form Validation Magic with Trivule: The Game-Changing Approach

Claude Fassinou — Tue, 07 May 2024 10:06:42 +0000

If you're aiming to save time, minimize effort, yet achieve sophisticated form validation in your Angular projects, this article is for you. Form validation in Angular can sometimes be complex, especially when managing error messages, dealing with multiple if-else conditions, handling button states, and styling invalid inputs. But fear not! With this method, you won't need to write any conditions at all. Yes, you read that right. Just a simple configuration, and you're good to go.

To achieve this, I'll introduce you to a well-thought-out library designed to streamline form handling, saving you time and effort: Trivule

Install Trivule in Your Angular Projects

npm install trivule

Create Your Angular Component

ng g c contact-form

Navigate to Your Component TypeScript and HTML Files
- HTML Template

<div #signupForm class="form">
    <p>Validation scenario with Trivule</p>
    <fieldset>
        <label>
            File
            <!--Required file, with mimes type .png-->
            <input name="file" type="file" data-tr-rules="required|mimes:.png" />
            <div data-tr-feedback="file"></div>
        </label>
        <label>
            Email
            <input type="email" name="email" data-tr-rules="required|email" />
            <div data-tr-feedback="email"></div>
        </label>
        <label>Your favorite language</label>
        <select name="favorite_cuisine" data-tr-rules="required">
            <option selected value="">Select ...</option>
            <option>JavaScript</option>
            <option>TypeScript</option>
            <option>HMTL</option>
        </select>
        <div data-tr-feedback="favorite_cuisine"></div>
    </fieldset>
    <input type="submit" value="Subscribe" data-tr-submit (click)="save()" />
</div>

Component TypeScript

import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
import { TrivuleForm } from 'trivule';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
})
export class AppComponent implements AfterViewInit {
  @ViewChild('signupForm') signupForm!: ElementRef<HTMLElement>;

  trivuleForm: TrivuleForm | null = null;

  ngAfterViewInit(): void {
    if (this.signupForm?.nativeElement) {
      this.trivuleForm = new TrivuleForm(this.signupForm.nativeElement, {
        validClass: 'is-valid',//class to add when the valid passes
        invalidClass: 'is-invalid'//class to add when the valid fails
      });
      this.trivuleForm.init();
    }
  }
  save(): void {
    const formIsValid = this.trivuleForm?.passes(); // indicate if the validation passes
    const validatedInput = this.trivuleForm?.validated(true); //Get only validated input
    const allInputs = this.trivuleForm?.inputs(true); //Get all inputs
    const failedInputs = this.trivuleForm?.failed(true); //Get failed inputs
  }
}

Key Points:

@ViewChild('signupForm') signupForm!: ElementRef<HTMLElement>; selects the form or HTML element containing the inputs, in our case, the HTML element with the #signupForm attribute.
In the ngAfterViewInit method, we initialize a Trivule instance, passing it the HTML element. Then, the init method on trivuleForm proceeds with the validation as the user interacts with the form.
Attributes prefixed with data-tr are Trivule attributes that instruct the input on how to behave, where to display messages, and more.

Attribute Explanation:

data-tr-rules: Specifies validation rules.
data-tr-feedback: Indicates where an HTML element will display feedback.
data-tr-submit: Enables or disables the button based on form validity.

Learn More about Trivule
Trivule on Github

Trivule can also be used to manage Reactive Forms in Angular.
If you found this article helpful, share it and subscribe to my account for more insightful content.

How to add or modify a validation rule in Trivule?

Claude Fassinou — Thu, 02 May 2024 10:33:17 +0000

In Trivule, rules govern how form fields are validated. You might find that the existing rules don't quite fit your needs or that you need to introduce custom rules. Here's a quick guide on how to add or modify rules in Trivule

Step 1: Accessing the `rule` Method

To add or modify a rule, you'll use the rule method of the TrBag class. This method allows you to define the behavior of a rule according to your requirements.

Step 2: Writing the Rule Callback

The heart of defining a rule lies in the rule callback function. This function takes in the value of the field to be validated and returns an object indicating whether the validation passes or fails. You can customize the validation logic within this callback.

Step 3: Defining the Rule Parameters

const notSudoRule = (input,param,type) => {
  return {
    value: input,
    passes: input != "sudo",
    type: "text", // Optional
    alias: undefined, // Optional
  };
};

When defining a rule, you'll provide several parameters:

Rule Name: Assign a name to your rule.
Callback Function: Define the callback function that implements the validation logic.
Message: Optionally, provide a message to be displayed when the rule fails.
Locale: If needed, specify the language for error messages.

Step 4: Example Usage

Let's consider an example where we want to create a rule called notSudo, which ensures that the input value is not equal to "sudo". We define the rule callback function accordingly and use the TrBag.rule method to add the rule to Trivule.

const notSudoRule = (input,param,type) => {
  return {
    value: input,
    passes: input != "sudo",
    type: "text", // Optional
    alias: undefined, // Optional
  };
};

TrBag.rule(
  "notSudo",
  notSudoRule,
  "The input value should not be 'sudo'",
  "en"
);

Step 5: Testing Your Rule

Once you've added your custom rule, you can immediately start using it in your forms. Test the rule to ensure it behaves as expected and meets your validation requirements.

Conclusion

By following these steps, you can easily add or modify rules in Trivule to tailor form validation to your specific needs. Experiment with different validation logic and parameters to create robust and effective validation rules for your applications.

That's it! You've successfully learned how to add or modify rules in Trivule. Happy coding!

How be notified by e-mail when a critical error occurs in a Laravel application?

Claude Fassinou — Thu, 25 Apr 2024 10:13:50 +0000

Although Laravel manages logs efficiently, it can sometimes be crucial to keep a close eye on errors during the development of certain projects. This tip will enable you to receive an e-mail as soon as a critical error occurs on your server. It is important to note that it is recommended to send only critical errors to avoid saturating your inbox.
The simplest approach (in my opinion) is to use bug-tracking software such as Sentry (or equivalent); this will help regulate notifications. But what if I don't want these services? I can do my own thing.

Creation of the `ExceptionMail` mail class

Run this command in your Laravel project:

php artisan make:mail ExceptionMail

Once the mail class is created, we'll modify it. Instead of creating a separate view, I'll inject HTML content directly.

namespace App\Mail;
use Illuminate\Bus\Queueable;
use Illuminate\Mail\Mailable;
use Illuminate\Mail\Mailables\Content;
use Illuminate\Mail\Mailables\Envelope;
use Illuminate\Queue\SerializesModels;

class ExceptionMail extends Mailable
{
    use Queueable, SerializesModels;
    public function __construct(private string $htmlString)
    {
        //
    }
    public function envelope(): Envelope
    {
        return new Envelope(
            subject: 'A critical error occurred'
        );
    }

    public function content(): Content
    {
        return new Content(
            htmlString: $this->htmlString
        );
    }
}

Sending the Email

In the app/Exceptions/Handler.php class, you'll find Laravel's base exception handling class. Let's add a private sendMail method to this class and called it in the rergister method.

namespace App\Exceptions;
use App\Mail\ExceptionMail;
use Illuminate\Foundation\Exceptions\Handler as ExceptionHandler;
use Illuminate\Support\Facades\Mail;
use Throwable;

class Handler extends ExceptionHandler
{
    public function register(): void
    {
        $this->reportable(function (Throwable $e) {
            $this->sendMail($e);
        });
    }

    private function sendMail(Throwable $e)
    {
        if (App::isLocal()) {
            return;
        }

        //Developer emails
        $emails = ["developers@email.coms", "etc@etc.com"];

        $htmlStr = "An error occurred while processing the request. Here is the error";
        //You should normally return the file, the line, the code and the message, so that you have an idea of what it's about without consulting the log
        $htmlStr .= $e->getMessage();
        try {
            Mail::to($emails)->send(new ExceptionMail($htmlStr));
        } catch (\Throwable $th) {
            //Your code
        }
    }
}

Note:

I used Laravel 9; please adapt according to your version.
Ensure not to send all exceptions, but only critical errors.
It's not advisable to send email notifications in production mode.

If you want to simplify form validation in your Laravel projects and save time, I recommend trying out this library Trivule.

Follow me on Twitter and Dev Community for more tips and shares.

Best and Simple Real-Time Validation Library Without Needing JavaScript Code

Claude Fassinou — Tue, 23 Apr 2024 18:31:15 +0000

Expected results

Validating a form in HTML and CSS can be challenging, but it becomes easier with Trivule. Learn by example how to use dynamic validation rules such as dateBefore, dateAfter, and dateBetween (alias between) to make date validation interactive and real-time. Learn more in this article or in the documentation of Trivule.

Step 1: HTML Element Configuration

Start by integrating a date field into your HTML form. Add the data-tr-rules and data-tr-messages attributes to define validation rules and custom error messages.

<div class="form">
  <label class="label">Your date of birth</label>
  <input
    type="date"
    data-tr-rules="required|dateBetween:1990-01-01 00:00,1999-12-31 23:00"
    data-tr-messages="Date of birth is required|You must be born between 1990 and 1999."
    name="birthDay"
  />
  <!-- Location to display error messages, can be any HTML element -->
  <div data-tr-feedback="birthDay"></div>
</div>

Step 2: Including the Trivule Library

Add the Trivule script to your HTML page to enable form validation.

<script src="https://www.trivule.com/js/trivule.js"></script>

Step 3: Trivule Initialization

Create an instance of TrivuleInput by specifying the selector of the element to validate (here, a date field) and call the init() method to activate validation.

<script>
  const trInput = new TrivuleInput("input[name=birthDay]");
  trInput.init();
</script>

Step 4: Some Validation Rules on Dates

dateBefore:date: Validates that the date is before the specified date.
dateAfter:date: Validates that the date is after the specified date.
dateBetween:start,end or date|between:start,end: Validates that the date is between the two specified dates, inclusively.

Note: The between rule must be preceded by the date rule so that the between rule knows it will compare dates.

Conclusion

Date validation with Trivule offers a simple yet powerful solution to ensure users input valid dates in your forms. By using rules like dateBefore, dateAfter, and dateBetween, easily customize the validation behavior according to your specific needs. There are several other rules in Trivule; please consult them here.

Discover a Powerful Form Validation Library Without the Need for JavaScript Code

Claude Fassinou — Sat, 20 Apr 2024 13:44:26 +0000

Dive into the world of HTML validation with Trivule: a revolutionary library that automates and streamlines form validation without the need for JavaScript. Free yourself from the hassles of validation and focus on the core of your application, saving valuable time with every interaction with your forms.

Key Features:

Simple Installation: Get started in a flash with easy installation and initialization.

  <script>
    const tr = new Trivule();
    tr.init();
  </script>

Code-Free Simplicity: Apply complex validation rules without ever touching a line of JavaScript. Trivule handles validation rules with ease.
- Example:

  <input type="text" data-tr-rules="required|email">

Validation Trigger: Trigger validation in real-time using a range of built-in or custom JavaScript events.
- Example:

  <input data-tr-events="mouseenter|blur|my-custom-event" />

Easy Customization: Style your form fields based on their validation status using CSS classes.
- Example:

  <input type="text" data-tr-invalid-class="invalid" data-tr-valid-class="valid">

Customized Messages: Enhance user experience by displaying tailored validation messages.
- Example:

  <input type="text" data-tr-rules="required" data-tr-messages="This field is required.">

Message Display Control: Specify where to display error messages for a field in case of validation failure.
- Example:

  <input type="text" data-tr-feedback="input-name">

Total Control: Master the behavior of your forms with advanced JavaScript functionalities.

Advanced Customization:

Explore a range of advanced features to meet your specific needs:

Custom Actions: Define actions to take based on the validation state of a field.
JavaScript Configuration: Interact with your forms autonomously and powerfully.
Custom Extensions: Add new validation rules for a tailored experience.
Multilingual Support: Personalize validation messages in multiple languages for a global reach.

Conclusion:

In summary, Trivule offers a wide range of intuitive attributes to configure and validate your forms effortlessly. Its simple installation and power make it the perfect tool to ensure the quality of your user data. Dive into the world of HTML validation with Trivule today and transform your web development experience.

Discover Trivule here

DEV Community: Claude Fassinou

Creating an Api generator plugin for Claude Code

Laravel's `fillable property` and the Hidden Danger to Your Business App

What is Mass Assignment?

The Role of \$fillable

The Business Danger: Unrestricted Access

The Solution: Always Restrict \$fillable

The Safe Code Fix:

AI and the productivity trap

AI and the productivity trap

The Tech Lead's observation

My strategy for regaining control

After and Before Hooks with Laravel Controller

After and Before Hooks with Laravel Controller

The Problem: Code Duplication and Lack of Flexibility

The Solution: Using Hooks in Controllers

Refactoring with Hooks

Benefits of Using Hooks

Practical Use Case: Payment Management

What Hooks Bring to the Table:

Unlock React Form Validation with Trivule: The Game-Changing Approach

Example of output

Creating the Project

Validation Rules

Creating the React Component

Integrating into the Application

Styling Flexibility

Learn More

Easily Understanding Lifecycles in Programming

What is a Lifecycle?

Why Do We Use Lifecycles?

What Problems Do Lifecycles Solve?

Some Frameworks That Use Lifecycles

Practical Examples of Lifecycles

Conclusion

Unlock Angular Form Validation Magic with Trivule: The Game-Changing Approach

How to add or modify a validation rule in Trivule?

Step 1: Accessing the rule Method

Step 2: Writing the Rule Callback

Step 3: Defining the Rule Parameters

Step 4: Example Usage

Step 5: Testing Your Rule

Conclusion

How be notified by e-mail when a critical error occurs in a Laravel application?

Creation of the ExceptionMail mail class

Sending the Email

Best and Simple Real-Time Validation Library Without Needing JavaScript Code

Step 1: HTML Element Configuration

Step 2: Including the Trivule Library

Step 3: Trivule Initialization

Step 4: Some Validation Rules on Dates

Conclusion

Discover a Powerful Form Validation Library Without the Need for JavaScript Code

The Role of `\$fillable`

The Solution: Always Restrict `\$fillable`

Step 1: Accessing the `rule` Method

Creation of the `ExceptionMail` mail class