open-index/open-npm huggingface dataset:
npm package: @jaisocx/charcode-converter
Author: Jaisocx
Latest version: 1.4.2

# @jaisocx/charcode-converter


## For what
the class enhances the ImprovedTemplateRenderer Javascript class' performance,
while rewriting and rendering templates,
assigning the rendered templates by reference,
and not copying each byte in the bytebuffer, when copying texts of datatype string by value.


## How does it improve

### Arrays instead of simpler datatypes.
For this purpose, to copy templates by reference,
since this is needed many times, and when building the entire html of the rendered sites ui tool by the ImprovedTemplateRenderer,
the templates and the rendered templates this class converts to byte buffers with charcodes, and then the templates are of the datatype array,
and the arrays in browsers are copied via javascript by reference.


### Lookup tables
The lookup tables are for the workaround, when encoding and decoding very long texts,
to make the lookup fast.


## Addition cost: over 1 MB RAM usage for the lookup tables when Alphabets with very high amount of symbols.
however the alphabets with tens thousands of chars, use for sure lot of hundreds KB in the RAM for these lookup tables,
the lookup tables are the RAM, used by the sites surfer's browser, when a sites surfer navigated to the .html page with js tools, these use the CharcodeConverter Javascript class. 


## window.CharcodeConverter available in the js, when in js code: import { CharcodeConverter } from @jaisocx/charcode-converter; and built with Webpack.
in the src/index.ts and transpiled/ESNext/index.js and transpiled/CommonJS/index.js file, the central file in this npm package,
the CharcodeConverter class is added to the browser's window js class,
and this js class can be seen in the browser's developers console, 
when researching window class.
npm package: @jaisocx/css-code-snippet
Description: Css sites tool rendering code blocks with numbered code rows
Author: ILLIA POLIANSKYI, Jaisocx Company
Latest version: 1.4.3

# CSS Code Snippet

#### status
  > ✅  yarn add | npm install Ok

  > ✅ `.html` previews Ok



#### supports
  > Client Side
  > Server Side

```
   Browser |   Express |   Console |
    ✅ yes |     ✅ yes |     ❌ no |
```

---
npm package: @jaisocx/css-importer
Description: Like the Webpack, builds a bundle of several sources, however just with .css stylesheets, and also very fast, in milliseconds.
Author: Jaisocx Company
Latest version: 1.4.1

# CSS IMPORTER


## The Aim Of The Setup

CssImporter bundles all css files, referenced with @import url() expressions to one css file.

For example, the entry .css file references other .css files, prefixed with aliases:
```
/* css variables */
@import url("@jaisocx-css-clean-start-MediaAndStyles/themes/theme-base/clean-start-theme-base.css");

/* responsive */
@import url("@jaisocx-css-clean-start-MediaAndStyles/responsive/clean-start--responsive-imports-main-webpack.css");

```



## CssImporter methods explained

1. `.setPackagePath( packagePath )`
1. `.setCssFilePath( cssFilePath )` sets the path to the entrypoint .css file, where @import url() expressions are set.
2. `.setCssTargetFilePath( cssTargetFilePath )` sets the path to the packaged .css file.
3. `webpack.aliases.json` is the predefined file name.
4. `${packageRoot}` is the predefined placeholder to point the path in .setPackagePath( packagePath )



## installation
```
npm i @jaisocx/css-importer
```


## where is the webpack.aliases.json

for example, at the css tool packagePath cssCleanStartPath there is already webpack.aliases.json, and this is imported automatique.
```
{
  "@jaisocx-css-clean-start-MediaAndStyles": "${packageRoot}/MediaAndStyles/"
}
```



## How to use in TypeScript code

```
import * as path from "node:path";
import { CssImporter } from "@jaisocx/css-importer";


// paths examples:
const cssCleanStartPath: any = path.resolve( "www/sites_tools/css_tools/CssCleanStart" );
const cssFilePath: any = path.resolve( cssCleanStartPath, "MediaAndStyles/clean-start-main-webpack.css" );
const cssTargetFilePath: any = path.resolve( cssCleanStartPath, "MediaAndStyles/clean-start-main-packaged.css" );


let cssImporter: CssImporter = new CssImporter();

cssImporter
  .setPackagePath( cssCleanStartPath )
  .setCssFilePath( cssFilePath )
  .setCssTargetFilePath( cssTargetFilePath )
  .build()
    .then( ( result: number ) => {
        console.log("build result", result);
      }
    );

```



Yours [jaisocx.com](https://jaisocx.com/) Software Architect and Dev,

Elias
npm package: @jaisocx/css-table
Description: Css sites tool styling a server side rendered database table data to a grid view, with solutions for scrolling and columns styling based on fileds values data types
Author: ILLIA POLIANSKYI, Jaisocx Company
Latest version: 3.5.93

# CSS Table

#### status
  > ✅  yarn add | npm install Ok

  > ✅ `.html` previews Ok



#### supports
  > Client Side
  > Server Side

```
   Browser |   Express |   Console |
    ✅ yes |     ✅ yes |     ❌ no |
```

---



## npm

```bash
  npm install @jaisocx/css-table@3.4.1
```

## Themes in the .css files, webpack and resolved

### theme_base

  1. css variables for the thin and bright layout styles.
  
  2. responsive .css files, however ust like and example of responsive files, and may be used in development, and not required in minimal webpack and resolved css files.



### theme_lightmode

  the color scheme without responsive .css



### theme_darkmode
  
  the color scheme without responsive .css



### theme_imaged

  the theme with examples of .css files for thin and bright layout, responsive .css files



### theme_imaged_base

  the one .css file with css variables for urls of mini images for mime types in Jaisocx folder listing



### theme_visible_height

  the same named theme of CssCleanStart_2 for the CssTable,
  
  when set in the html doc node &lt;html class="jsx theme_visible_height" &gt;,
  the @jaisocx/css-table is placed well in the browser's tab, having later well placed paginating bar and other sites tools on a site with a table.
  


### theme-emailed-thin

  the theme .css file with css variables to use the @jaisocx/css-table in an email message



### Tasks to do

  1. server side rendering php composer package, when published, to refer here in README.md
npm package: @jaisocx/css-table-ordered
Description: Css sites tool styling a server side rendered database table data to a grid view, with solutions for sticky scroll and order by on columns via browser's js engine
Author: ILLIA POLIANSKYI, Jaisocx Company
Latest version: 2.4.5

# CSS Table Ordered
  `@jaisocx/css-table-ordered`
  > 💡 js for orderby on table styled by @jaisocx/css-table



#### status
  > ✅  yarn add | npm i Ok

  > ✅ `.html` previews Ok



#### supports
  > Server Side, Client Side

```
   Browser |   Express |   Console
    ✅ yes |    ✅ yes |      ❌ no
```



#### size
  > 450 KB


```
  Current Folder |   This lib, as installed    |   typescript in src/ |   Latest Tarball |   Main ts class
                 |     in other node_modules/  |                      |                  |
        1_100 KB |                             |                      |                  |                
```



#### required
  > Browser



#### 📅 Updated
  > Winter 2026

  **Library**: `@jaisocx/css-table-ordered` ver. `2.4.1`

  🗓 **timestamp**: `Sat Feb 14 16:07:48 UTC 2026`

---



## 💡 The aim of the setup
  `@jaisocx/css-table-ordered`
  > 💡 js for orderby on table styled by @jaisocx/css-table


  For the Jaisocx Sits Server Files Listing server side rendered CssTable with JSP.

  The jaisocx templates for files listing, https exceptions and others will be available on public git service in several months.



### 📅 Tasks planned

  1. css themes npm package example to install on a Jaisocx server instance with `@jaisocx/css-table-ordered`



## Installation

### After have git cloned, Install libraries for preview

```
 npm i --install-strategy=hoisted --omit=dev
```



### Install Sites Tool Css Table Ordered

  `--omit=dev` to avoid installation of devDependencies.

  In the `package.json`, the mini images package requires **Sass styles preprocessor** for development purposes with **scss variables** for css3 style property `background-image`,
  and in this package the Sass installation wasn't required.

```
 npm i "@jaisocx/css-table-ordered@2.4.1" --install-strategy=hoisted --omit=dev
```
npm package: @jaisocx/css-tool-template
Description: Two simple html blocks styles with base template and example for responsive styling and color themes. The infrastructure files are here for the webpack, typescript and publications on npm.
Author: Jaisocx Company
Latest version: 2.1.4

# CSS Tool Template



## Aim of the setup




## Status




## What is this




## live urls with html examples

[https://sandbox.brightday.email/sites_tools/css_tools/CssToolTemplate/index.example.html](https://sandbox.brightday.email/sites_tools/css_tools/CssToolTemplate/index.example.html)



## in-npm-package urls to index.example.html

[index.example.html](./index.example.html)



## html coding example



## css in index.example.html coding example



## js in index.example.html coding example



## ts coding example importing styles | themes styles



## ts coding example with import npm lib in 3rd partie's ts code



## js interfaces for API Models



## package structure

`favicon/*.ico` site logo to show in browser's tab label above, referenced in index.example.html in `<link rel="icon" ... />` tag.

`MediaAndStyles/*.css` styles where css props are set via css variables. For example `font-size: var(--jsx--sitestool--htmlelem--font-size);`.

`MediaAndStyles/themes` styles where the css variables get their values. For example `--jsx--sitestool--htmlelem--font-size: 1rem;`.

`MediaAndStyles/themes/theme_base` all css variables from main.css get their values. The responsive fileset is imported in relative and webpack aliased .css imports.

`MediaAndStyles/themes/color_themes` examples of themes where just the color and background color css variables get their values. May also set border-color and background images, shadows and other color themes relevant css variables if referenced in main.css.

`MediaAndStyles/themes/theme_layout_example` a theme with responsive fileset produced by SitesToolAutomation. The responsive fileset is relevant mostly for fine tuning sites for mobile portrait, tablet and big displays, since for the layout themes for sure the sizes of the displays are relevant.

`src/index.ts` styles imports to be accessed later when built with Webpack, and the produced by The Webpack `bundle.js` is referenced like `<script src="bundle.js"` in .html.

`src/webpack...` infrastructure static files for the Webpack.

`BuildData.example.json` The template of a json config for building a sites tool. You may use to copy paste to BuildData.json for a new sites tool.

`index.example.html` the sites tool preview, locally and when installed with the new command `./cmd/install_and_view_sites_tool.sh`.

`package-lock.json` npm system file.

`package.json` the main conf file for this npm package.

`README.md` documentation file in md format.

`webpack.aliases.json` the webpack alias' name and the relative path in this npm package folders structure.
npm package: @jaisocx/email-html-inliner
Description: ``` npm install @jaisocx/email-html-inliner ```
Author: Jaisocx
Latest version: 1.3.7

# Inliner To Send Html Email

```
npm install @jaisocx/email-html-inliner
```


## Status
Ready to use since the 06-th of May in the Year 2025.



## The aim of the setup

The webmail apps due to security reasons do stipping out certain markup from the email messges sent with Content-Type text/html.


The package here is to solve the workaround to adjust somehow to the rules of webmail apps providers, email messages before sending they.



### QA Notice
Tested with Gmail, Outlook, Protonmail, iCloud, AOL, Yahoo. 


### Notices

#### QA
My email client by my smtp relay impl could not access GMX due to some incombatibility of my smtp relay, unfortunately. I could not adjust the email message format according to exception message in the GMX response. Maybe any day later. This package was not tested with the GMX webmail app.

#### The issues were NOT solved: padding: &lt;not-zero&gt;; {max|min-}width: 100%;
The AOL and Yahoo Webmail apps strip out the CSS property `box-sizing`, and the default rendering rule in browsers is the `box-sizing: padding-box;`. 

Unfortunately, I could not find the workaround, when a html node has CSS `padding` set, and the contents have to be set `width: 100%;`. In this option the look and feel is not rendered the right way. The contents are overflowing, and when designed the email message with CSS `box-sizing: border-box;` the Sites Dev could not know this issue, neither could notice this issue in other webmail apps.





## Usage

```
import { EmailHtmlInliner } from "@jaisocx/email-html-inliner";

function inlineText() {
  let inliner = new EmailHtmlInliner();
  let cssHtmlPackage = inliner.cssHtmlPackage;

  // set these values before sending,
  // or omit when developing the email message.
  let baseUrlToReplace = "./../../../cdn/www/media/images/";
  let baseUrlReplacedWith = "https://my-cdn.example.com/www/media/images/";

  let inlineText = inliner.inline ( 
    document,
    "html", 
    inliner.constants.stylesPropsToCheck, 
    baseUrlToReplace, 
    baseUrlReplacedWith 
  );

  let textHtmlNode = this.htmlDocument.getElementById("inlinetext");
  textHtmlNode.innerHTML = cssHtmlPackage.escapeHTML( inlineText );
}
```
npm package: @jaisocx/eslint-plugins
Description: ## eslint.config.js
Author: Jaisocx
Latest version: 1.3.2

# ESLint

## eslint.config.js

### args of rules

Rules are on this path

```
workspace/ts/build_tools/EslintPlugins/EslintPluginJaisocxJS/src/rules
```

For example, on line 73, the arg "args-chars-max-number" of the jaisocx/multiline-args

```
"jaisocx/multiline-args": [ "error", { "args-chars-max-number": 10 } ],
```


When writing an eslint plugin and rule, in the .js file for the eslint rule,
in the first object, property on the line 11 schema:

```
export const MultilineArgs = {
...
...
...
    schema: [
      {
        type: "object",
        properties: {
          "args-chars-max-number": {
            type: "number",
            minimum: 5,
          }
        },
        additionalProperties: false
      }
    ]
  },
```


the one arg is defined as object and it has property *"args-chars-max-number"* of the datatype number.
The property minimum is the built-in prop for default values validation.


On the line 29, this setting from *eslint.config.js*, You see how in js code into the variable *argsCharsMaxNumber*
to set the value of

```
let options = context.options[0] || {};
let argsCharsMaxNumber = options["args-chars-max-number"];
```
npm package: @jaisocx/linked-resources-integrity
Description: 1. modify file ./cmd/linkedResourceHash.sh
Author: Jaisocx
Latest version: 1.0.1

# Linked Resources Integrity


## Command line example

### Link tag integrity to prove hash of the resource being loaded

1. modify file ./cmd/linkedResourceHash.sh

on line 55 set path to file in the ts dockerized service like this:

```bash
      --filePath="/var/www/cdn/www/media/images/favicon/Icon_Sandbox_Brightday.ico" \
```


2. invoke bash script in terminal

```bash
./cmd/linkedResourceHash.sh
```


3. Improve quality of the linked resources on Your sites

```html
    <link
      rel="icon"
      type="image/x-icon"
      href="https://sandbox.brightday.email/cdn/www/media/images/favicon/Icon_Sandbox_Brightday.ico"
      href-fallback="favicon/Icon_Sandbox_Brightday.ico"
      integrity="sha512-t3XuLqNXUNFqkrdBlRf4me63watpaFBd8TZzcCAvxUMG4msGTx2/k6OFQdEl0wUj3iKDK9z2Z9h+YQF71i8S+Q=="
      onerror="javascript: ( () => { this.onerror = null; this.href = this.getAttribute( 'href-fallback' ); } )();"
    />
```




## Interfaces

### Hasher

```typescript
export interface LinkedResourceHasherInterface {

  preloadedResourceIntegrityProduce (
    filePath: string,
    algo: string
  ): string;


  linkPreloaderProduce (
    href: string,
    path: string,
    rel: string,
    as: string,
    fetchpriority: string,
    prettified: boolean
  ): string;

}
```
npm package: @jaisocx/media_tools_fonts_base
Description: The one npm package for the Jaisocx Sites Tools with fonts and styles importing fonts, for the sites tools preview. To install on demand, if not relaying on the cdn.
Author: ILLIA POLIANSKYI, Jaisocx Company
Latest version: 1.2.2

# Fonts Base Package in media_tools

## The Aim Of The Setup

Similar to cdn, the fonts with styles, importing these fonts,
stored once centrally.

The fonts, 
used in example .html pages for sites tools preview,
on demand are to install via yarn add or npm install.



### The CSS To Import These Fonts

The nice fine-tuning .css solutions to set fonts for text blocks.
npm package: @jaisocx/media_tools_fonts_orbitron
Description: The one npm package for the Jaisocx Sites Tools with fonts and styles importing fonts, for the sites tools preview. To install on demand, if not relaying on the cdn.
Author: ILLIA POLIANSKYI, Jaisocx Company
Latest version: 1.2.2

# Orbitron Google Font Package in @jaisocx/media_tools_fonts namespace

## The Aim Of The Setup

Like the `@jaisocx/media_tools_fonts_base`, 
this package is the example to apply a font, 
to set a css variable of a font-family,
or to override a `@jaisocx/css-clean-start-2` css variable of a font-family style for all tags on page.



The entire package is just to enable these 2 css lines for the page:
```css
.jsc.JscFonts_Orbitron {
    --css-clean-start-2--main--font-family: Orbitron, v_Orbitron;
    --jsx--css-clean-start-2--all-tags--font-family: var(--css-clean-start-2--main--font-family);
}
```


However, the workaround does the right way))
npm package: @jaisocx/media_tools_images_mini_mimetypes_base
Description: `@jaisocx/media_tools_images_mini_mimetypes_base`
Author: ILLIA POLIANSKYI, Jaisocx Company
Latest version: 1.2.2

# Set of mini images

`@jaisocx/media_tools_images_mini_mimetypes_base`



## Aim Of The Setup

So that other sites tools
don't have to publish mini-images along with `.ts` and `.css`
for preview purposes.



## 💡 The aim of the setup

Set of images published once,
to mention **in other sites tools** in `package.json` dependencies,
for the preview,
`index.preview.html`,
and `.css` to **import** these mini images in `.html`
via css class name.



For example:

**CSS**

```css

/* MediaAndStyles/JscImages_mini_mimetypes_base_main_relative.css */

.jsc .JscImages_mini_mimetypes_base .mini-image.mimetype.audio {
  background-image: url("./images/audio_and_video_mime_type.png");
}

```



**HTML Node**

```html

<item class="mini-image mimetype audio"></item>

```



**HTML Page**

```html

<!DOCTYPE html>
<html lang="en" class="jsx theme_darkmode jsc">
<head>
  <link
      rel="stylesheet"
      type="text/css"
      charset="utf-8"
      href="MediaAndStyles/JscImages_mini_mimetypes_base_main_preprocessed_relative.css"
  />
</head>
<body>
  <images-block class="JscImages_mini_mimetypes_base">
    <item class="mini-image mimetype audio"></item>
  </images-block>
</body>
</html>
```
npm package: @jaisocx/mime-type
Description: ``` MimeType getMimeTypeByFilename( "favicon.ico", 1 ) => "image/x-icon" ```
Author: Jaisocx
Latest version: 1.0.7

# Mime type

```
MimeType getMimeTypeByFilename( "favicon.ico", 1 ) => "image/x-icon"
```


## Example ts code

```typescript
// this constants object is faster, since has bery few lines relevant to link rel=preload.
let mConstants: MimeTypeConstantsInterface = new SitesPreloaderMimeTypeConstants();
let mimeTypesInstance: MimeType = new MimeType();
  mimeTypesInstance
    .setMimeTypesConstants( mConstants );


let filename: string = "";
let mimeType: string|undefined = "";

filename = "favicon.ico";
mimeType = mimeTypesInstance.getMimeTypeByFilename( filename, 1 );
console.log (
  { "bib": "@jaisocx/mime-type", filename, mimeType }
);

// Console:
/*
{
  bib: '@jaisocx/mime-type',
  filename: 'favicon.ico',
  mimeType: 'image/x-icon'
}
*/
```
npm package: @jaisocx/responsive-sizes
Description: `@jaisocx/responsive-sizes`   > 💡 The package does ...
Author: ILLIA POLIANSKYI, Jaisocx Company
Latest version: 1.3.6


# Responsive Sizes
  `@jaisocx/responsive-sizes`
  > 💡 The package does ...



#### status
  >  ✅ Ok



####  supports
> Client Side

```
   Browser |   Express |   Console 
    ✅ yes |      ❌ no |     ❌ no 
```



#### 📅 Updated
  > Winter 2026

  **Library**: `@jaisocx/responsive-sizes` ver. `1.3.5`

  🗓 **timestamp**: `Tue Jan 20 06:28:29 CET 2026`

---



#### size
  > 200 KB 

```
  Current Folder |   This lib installed        |   typescript in src/  
                 |     in other node_modules/  |                       
          200 KB |                             |                5 KB   
```

---





## 💡 The aim of the setup
  > The package does ...



---



Have a nice day.

Elias, Software Architect of Jaisocx Company
npm package: @jaisocx/theme-turn-on
Description: `@jaisocx/theme-turn-on`   > 💡 The package does ...
Author: ILLIA POLIANSKYI, Jaisocx Company
Latest version: 1.0.4


# Theme Turn On
  `@jaisocx/theme-turn-on`
  > 💡 The package does ...



#### status
  >  ✅ Ok


####  supports
> Client Side

```
   Browser |   Express |   Console 
    ✅ yes |      ❌ no |     ❌ no 
```



#### 📅 Updated
  > Winter 2026

  **Library**: `@jaisocx/theme-turn-on` ver. `1.0.3`

  🗓 **timestamp**: `Tue Jan 20 06:28:29 CET 2026`

---



#### size
  > 72 KB

```
  Current Folder |   This lib installed        |   typescript in src/  
                 |     in other node_modules/  |                       
           72 KB |                             |                5 KB   
```

---





## 💡 The aim of the setup
  > The package does ...


## Interfaces




# @jaisocx/theme-turn-on

## What the script does

  1. on click on a theme button, the css class name is set to document root html elem `<html class="jsx lightmode">`


## How this works

  1. loaded styles for a theme css classname

```html
  
  <!DOCTYPE html>
  <html lang="en" class="jsx">
  <head>
  
    <title>ThemeTurnOn</title>
  
    <base href="./">
  
    <meta charset="utf-8" />
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
  
    <!-- THEME -->
    <link rel="stylesheet" href="theme_styles.css" />

```



2. a theme button, or several, have attribute `data-theme`

```html

  <ThemeButtons>
    <button id="button-turn-on-base-theme" data-theme="">Base Theme</button>
    <button id="button-turn-on-daymode"    data-theme="lightmode">Day Mode</button>
  </ThemeButtons>

```



3. @jaisocx/theme-turn-on scripts loaded on site, or were imported to the loaded webpack bundle.js

```html

  <html class="jsx">
  
  ...
  ...
  ...
  
  
  
    <script src="transpiled/Simple/constants/ThemeTurnOnConstants.js"></script>
    <script src="transpiled/Simple/theme_turn_on/ThemeTurnOn.js"></script>
  
    <script>
  
      let cssClassesNames = [
        "jsx"
      ];
  
      let buttonsQuerySelectors = [
        "themebuttons button"
      ];
  
      document.addEventListener( 'DOMContentLoaded', () => {
  
        // adding to buttons the event handler to turn on the theme.
        let themeTurnOn = new ThemeTurnOn();
        themeTurnOn
          .setKeptCssClassnames( cssClassesNames )
          .addThemeButtonsEventHandlers( buttonsQuerySelectors );
  
      });
  
    </script>
  </html>

```


---



Have a nice day.

Elias, Software Architect of Jaisocx Company