---
title: "JS Project"
description: "Derafu JS"
type: "docs"
category: "doc"
tags: [javascript]
authors: [Anonymous]
date: "2026-09-09"
last_update: "2026-09-09"
time_minutes: 1
draft: false
unlisted: false
url: "https://www.derafu.dev/docs/ui/js"
---

# Derafu JS



---

## Introduction

Why use a JS framework if we can do all from scratch?

# Why use a JS framework if we can do all from scratch?

![GitHub last commit](https://img.shields.io/github/last-commit/derafu/js/main)
![CI Workflow](https://github.com/derafu/js/actions/workflows/ci.yml/badge.svg?branch=main&event=push)
![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/derafu/js)
![GitHub Issues](https://img.shields.io/github/issues-raw/derafu/js)

This library provides a collection of utility functions for common web development tasks, organized into modular components for better maintainability and flexibility.

## Structure

The library is organized into the following modules:

### Main Modules

- `src/derafu.js` - Main module (exports all functions under the `derafu` namespace).

### Core Modules

- `src/tabs.js` - Tab management functions.
- `src/ui.js` - User interface functions (popups, tables, notifications, copy/paste, etc.).
- `src/utils.js` - Basic utility functions (password generation, cookies, language detection, number formatting, etc.).

### Validation Modules

- `src/validation/l10n-cl.js` - Chilean validation functions (RUT validation, etc.).

### Form Modules

- `src/form/fields.js` - Form field management functions.
- `src/form/tables.js` - Dynamic table functions.
- `src/form/validation.js` - Form validation functions.

### Compatibility Modules

- `src/__.js` - Main compatibility layer (exports all functions under the `__` namespace).
- `src/form.js` - Form compatibility layer (exports all form functions under the `Form` namespace).

## Quick Start

Import using the CDN of the module you need, for example UI module:

```html
<script src="https://cdn.jsdelivr.net/npm/derafu-js@0.1.0/src/ui.js"></script>
```

Then use the function you need, for example notify function:

```javascript
UI.notify('Hello World!');
```

**Note**: Remember to load the dependencies first, in this example notyf is used for notifications.

## Usage

### Browser Usage

Load the modules in the correct order:

```html
<!-- Load individual modules -->
<script src="src/utils.js"></script>
<script src="src/ui.js"></script>
<script src="src/validation/l10n-cl.js"></script>
<script src="src/tabs.js"></script>
<script src="src/form/validation.js"></script>
<script src="src/form/fields.js"></script>
<script src="src/form/tables.js"></script>

<!-- Load compatibility layers -->
<script src="src/__.js"></script>
<script src="src/form.js"></script>
```

Then use the functions:

```javascript
// Using the compatibility layer (recommended for existing code).
__.generatePassword(12);
__.notify('Hello World!');
Form.check('myForm');

// Using individual modules (recommended for new code).
Utils.generatePassword(12);
UI.notify('Hello World!');
FormValidation.check('myForm');
```

### Node.js Usage

```javascript
const Utils = require('./src/utils.js');
const UI = require('./src/ui.js');

Utils.generatePassword(12);
UI.notify('Hello World!');
```

## Validation and Testing

Run the validation and test suite:

```bash
npm install
npm run format:check
npm run lint:check
npm run test
```




---

## Features

Features of the library.

# Features

## Utility Functions

- Password generation with cryptographic randomness.
- Cookie management.
- User language detection.
- Number formatting with locale support.
- Empty value checking.
- Integer/float validation.
- Object key extraction.
- String selector with object property concatenation.

## UI Functions

- Popup window management.
- Dynamic table creation.
- Notifications (with Notyf/Bootbox support).
- Clipboard operations (copy/paste).
- Social sharing (WhatsApp, etc.).
- Loading dialogs.
- Alert and confirmation dialogs.
- Smooth scrolling.
- URL deeplink management.
- Print functionality.

## Validation Functions

- Chilean RUT validation and formatting.
- Form field validation with multiple check types.
- Email validation (single and multiple).
- Date format validation.
- Phone number validation.
- Integer/real number validation.

## Form Functions

- Form submission via POST.
- Password field visibility toggle.
- Field expansion for long text.
- Dynamic form field initialization.
- Checkbox group management.
- Select option management.
- Dynamic table row management.

## Tab Functions

- Tab initialization and management.
- URL-based tab navigation.
- Magic link generation.
- Modal integration.
- Form element integration.




---

## Dependencies

Minimal dependencies for the library.

# Dependencies

The library is written in **pure vanilla JavaScript** but is designed to integrate seamlessly with popular external libraries when available. The code gracefully handles the absence of these dependencies.

> [!CHECK] Why Vanilla JS?
>
> See <http://vanilla-js.com>

The library has minimal dependencies and works with:

- Modern browsers (ES6+).
- jQuery (for some form functions).
- Bootstrap (for UI components).
- Bootbox (for dialogs).
- Notyf (for notifications, optional)

## Useful Dependencies

### Bootstrap

Used for tab management and modal functionality:

- Tab initialization and navigation (`src/tabs.js`).
- Modal instance management.
- Bootstrap classes and data attributes.

### jQuery

Used for enhanced form field functionality:

- Select2 integration for improved select fields.
- Datepicker integration for date inputs.
- Dynamic field initialization.

### Notyf

Enhanced notifications (falls back to basic alerts):

- Toast notifications with icons.
- Configurable duration and positioning.
- Multiple notification types.

### Bootbox

Enhanced dialog boxes:

- Confirmation dialogs.
- Prompt dialogs for field editing.
- Customizable dialog options.

## Graceful Degradation

The library includes conditional checks to ensure functionality even when external dependencies are not available:

```javascript
// Example: jQuery availability check.
if (typeof window.jQuery !== 'function') {
    console.error('window or jQuery is not available.');
    return;
}

// Example: Bootstrap availability check.
if (typeof bootstrap !== 'undefined') {
    new bootstrap.Tab(element).show();
}
```

## Installation Recommendations

For full functionality, include these dependencies in your project:

```html
<!-- Bootstrap CSS and JS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.bundle.min.js"></script>

<!-- jQuery (for enhanced form features) -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<!-- Font Awesome (for icons in the UI) -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/css/all.min.css" rel="stylesheet" />

<!-- Optional: Bootbox for dialogs -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/6.0.4/bootbox.all.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/6.0.4/bootbox.locales.min.js"></script>

<!-- Optional: Notyf for notifications -->
<link href="https://cdn.jsdelivr.net/npm/notyf@3.10.0/notyf.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/notyf@3.10.0/notyf.min.js"></script>
```





---
Last updated on 09/09/2026
#javascript