open-index/open-npm huggingface dataset:
npm package: @hasseneafif/ai-performance-check
Description: A performance monitoring overlay with AI-powered analysis for web applications. Works with React and vanilla JavaScript.
Author: hasseneafif
Latest version: 1.0.3


# AI Performance Check Overlay NPM Package

**`@hasseneafif/ai-performance-check`**

A simple, drop-in performance monitoring overlay for web applications, featuring AI-powered analysis. This tool provides key performance metrics at a glance and suggests improvements, helping you optimize your user experience.

![Performance Overlay Screenshot](https://i.imgur.com/KQWlZk9.png)

## Features

- **Real-time Metrics:** Tracks Core Web Vitals and other key performance indicators like FCP, LCP, and Page Load time.
- **AI-Powered Analysis:** Uses a lightweight AI model to provide actionable insights and improvement suggestions based on your site's performance data.
- **Framework Agnostic:** Can be used as a React component or a simple function in any vanilla JavaScript project.
- **Responsive Design:** The overlay adapts to both desktop and mobile viewports.
- **Easy Setup:** No complex configuration needed. Just install and import.

## Installation

```bash
npm install @hasseneafif/ai-performance-check
```

## Usage

You can use this package in two ways: as a React component or as a vanilla JavaScript function.

### 1. React Component

The easiest way to use the overlay in a React application is by importing and rendering the `AIPerformanceCheck` component.

```jsx
// In your main App component or layout
import React from 'react';
import { AIPerformanceCheck } from '@hasseneafif/ai-performance-check';

function App() {
  return (
    <div>
      <h1>My Awesome Application</h1>
      {/* Your other components */}
      
      {/* Add the performance check overlay */}
      <AIPerformanceCheck /> 
    </div>
  );
}

export default App;
```

The component renders `null` and injects the overlay into the DOM, so it won't interfere with your component tree.

### 2. Vanilla JavaScript

If you're not using React, you can import and call the `initAIPerformanceCheck` function. This is useful for static sites, or projects using other frameworks like Vue, Svelte, or Angular.

```javascript
// In your main entry point file (e.g., index.js or app.js)
import { initAIPerformanceCheck } from '@hasseneafif/ai-performance-check';

// Call the function to initialize the overlay
    initAIPerformanceCheck();
```

The function will handle DOM readiness and inject the overlay when the page is ready.

## How it Works

The overlay uses the `PerformanceObserver` API to gather metrics. When the page loads, it sends this data to a free, lightweight AI API (`apifree.min.js`) to generate a brief analysis and improvement suggestions.

---

**Note:** This tool is intended for development and debugging purposes. While it's lightweight, you should avoid including it in your production bundle.
npm package: @hassenkarnit/react-draft-wysiwyg
Description: A wysiwyg on top of DraftJS.
Author: Jyoti Puri
Latest version: 1.99.7

# React Draft Wysiwyg

A Wysiwyg editor built using ReactJS and DraftJS libraries.
[Demo Page](https://jpuri.github.io/react-draft-wysiwyg).

[![Build Status](https://travis-ci.org/jpuri/react-draft-wysiwyg.svg?branch=master)](https://travis-ci.org/jpuri/react-draft-wysiwyg)

![](http://i.imgur.com/tU7kJ6i.gif)

## Features

- Configurable toolbar with option to add/remove controls.
- Option to change the order of the controls in the toolbar.
- Option to add custom controls to the toolbar.
- Option to change styles and icons in the toolbar.
- Option to show toolbar only when editor is focused.
- Support for inline styles: Bold, Italic, Underline, StrikeThrough, Code, Subscript, Superscript.
- Support for block types: Paragraph, H1 - H6, Blockquote, Code.
- Support for setting font-size and font-family.
- Support for ordered / unordered lists and indenting.
- Support for text-alignment.
- Support for coloring text or background.
- Support for adding / editing links
- Choice of more than 150 emojis.
- Support for mentions.
- Support for hashtags.
- Support for adding / uploading images.
- Support for aligning images, setting height, width.
- Support for Embedded links, flexibility to set height and width.
- Option provided to remove added styling.
- Option of undo and redo.
- Configurable behavior for RTL and Spellcheck.
- Support for placeholder.
- Support for WAI-ARIA Support attributes
- Using editor as controlled or un-controlled React component.
- Support to convert Editor Content to HTML, JSON, Markdown.
- Support to convert the HTML generated by the editor back to editor content.
- Support for internationalization.

## Installing

The package can be installed from npm `react-draft-wysiwyg`

```
$ npm install --save react-draft-wysiwyg draft-js
```

## Getting started

Editor can be used as simple React Component:

```js
import { Editor } from "react-draft-wysiwyg";
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
<Editor
  editorState={editorState}
  toolbarClassName="toolbarClassName"
  wrapperClassName="wrapperClassName"
  editorClassName="editorClassName"
  onEditorStateChange={this.onEditorStateChange}
/>;
```

## Docs

For more documentation check [here](https://jpuri.github.io/react-draft-wysiwyg/#/docs?_k=jjqinp).

## Questions Discussions

For discussions join public channel #rd_wysiwyg in [DraftJS Slack Organization](https://draftjs.herokuapp.com/).

## Fund

You can fund project at [Patreon](https://www.patreon.com/jyotipuri).

## Thanks

Original motivation and sponsorship for this work came from [iPaoo](http://www.ipaoo.com/). I am thankful to them for allowing the Editor to be open-sourced.

## License

MIT.
npm package: @hassib-ashouri/n8n-nodes-shortids
Description: This is a node to generate url friendly and short uuids. This is useful when creating short urls. It is based on nonoid library.
Author: Hassib Ashouri
Latest version: 0.3.0

# n8n-nodes-nanoid

This is an n8n community node. It lets you generate short id that are url fiendly. You can use this in a place where very long uuid strings are not needed like project ids or employee ids.

[n8n](https://n8n.io/) is a [fair-code licensed](https://docs.n8n.io/sustainable-use-license/) workflow automation platform.

## Installation

Follow the [installation guide](https://docs.n8n.io/integrations/community-nodes/installation/) in the n8n community nodes documentation.

## Operations
- Generate a short id with specified length

## Resources

* [n8n community nodes documentation](https://docs.n8n.io/integrations/#community-nodes)
* [Nano ID Library](https://github.com/ai/nanoid)