intro

Javascript utilities helpers functions to enhance super faster developer experience for browsers and NodeJS supports

Fast, generic JavaScript browser and some nodejs utilities functions.

Overview

• Installation Easily install with npm, pnpm or yarn and start using.
• clipboard JavaScript clipboard function for browser
• errors Extract errot to string for browser and nodejs
• convert convert utility string number etc.
• cookies This cookies only works client side javascript
• datetime convience function to convert date and time (comming more..)
• detection detection device theme scheme and browser information
• exportion export pdt or doc file with client side javascript
• generate generate random number uuid and much more
• load load utilites functions such as image,url , document
• storage browser local storage or session management
• str string utilies some functions to rmeove and add letters
• url manage url to string and string to url is very convenient
• math simple math calculations for web applications
• validation validate client side email, number ete.
• author project author details and github page
• license license

Install

Install with npm

npm i aptness

or Install with yarn

yarn add aptness

or Install with pnpm

pnpm install aptness

Usage

//common js 
const { toDate } = require('aptness'); // common js required with name import
toDate("2023-03-28 20:04:10"); // output: Mar 28, 23

const utils = require('aptness'); // common js import all
utils.toDate("2023-03-28 20:04:10"); // output: Mar 28, 23

//es6 module import syntax 
import { toDate } from 'aptness'; // es6 name import
toDate("2023-03-28 20:04:10"); // output: Mar 28, 23

import * as utils from "aptness"; // es6 import all
utils.toDate("2023-03-28 20:04:10"); // output: Mar 28, 23

clipboard

import { toClipboard, copyImageToClipboard } from "aptness";

//copy text to clipboard
toClipboard("hello world");
//or 
copyToClipboard("hello world");


//copy image to clipboard
const imageUrl = "image/examples/image.png";

copyImageToClipboard(imageUrl);

Errors

Errors parsing to string

import { errorToString, errorsToString, extractError,  extractErrors } from "aptness";

//any error to string 
errorToString(['unknow', 'fatal error']) //output: "unknow, fatal error"
//or
extractError(['unknow', 'fatal error']) //output: "unknow, fatal error"

//extract many errors to a string
errorsToString('error 1', 'error 2') //output: "error 1, error 2"
// or 
extractErrors('error 1', 'error 2') //output: "error 1, error 2"

convert

import { formatPrice, currencyToSymbol } from "aptness";

//formate the prite for payment gateway : stipe or anything else
formatPrice(20.3);

//Currency to symbol
currencyToSymbol("USD"); //output: $

Our online rgb to hex tool rgbToHex | hexToRgb

import { rgbToHex } from "aptness";
import { hexToRgb } from "aptness";

rgbToHex(10, 20, 100); //output: hex string: #0a1464

hexToRgb("#1a098b"); //output: { red: number, green: number, blue: number } or  null

cookies

setCookie set cookie only for client side document cookies so please when use client side cookies make sure doesn't have sensitive information

import { setCookie , getCookie, hasCookie } from "aptness";

const cookieName = "cookie-name";
const cookieValue = "example_value";
const cookieDays = 30;
const cookiePath = ""; // optional

setCookie(cookieName, cookieValue, cookieDays , cookiePath);
getCookie(cookieName) // output: example_value;

hasCookie(cookieName); //output: true or false;

Datetime

import { toDatetime } from "aptness";
import { toDate } from "aptness";
import { toTime } from "aptness";

toDatetime("2023-03-28 20:04:10"); // output: Mar 28, 23 08:04 PM

toDate("2023-03-28 20:04:10"); // output: Mar 28, 23
toTime("2023-03-28 20:04:10"); // output: 08:04 PM

/*
 * custom format for all date functions are same
 * options details https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString
 */
toDatetime("2023-03-28 20:04:10", options);

const language = 'en-US' //or ['en-US', 'en-GB'];
toDatetime("2023-03-28 20:04:10", options, language);
toTime("2023-03-28 20:04:10", options, language);
toDate("2023-03-28 20:04:10", options, language);

Detection

import { is_dark , isMobile , deviceTheme, systemTheme, isTouchDevice } from "aptness";

//get device theme schema
console.log(is_dark); //output: true or false

console.log(deviceTheme); //output: dark or light
console.log(systemTheme); //output: dark or light

//device is mobile device or not
console.log(isMobile) //output: true or false

//detect is touch device
console.log(isTouchDevice) //output: true or false

Exportion

import { exportToPdf } from "aptness";
import { exportToDocs } from "aptness";


exportToDocs("filename", "Hello world");

exportToPdf("filename", "Hello world", options); //options is optional
/*
options accpeted properties
{
    width: 800,
    height: 660,
    top: 100,
    left: 100,
}
*/

Generate

import { random , uniqid , randomString, uuid, uuidv1, uuidv4, avatar } from "aptness";

//generate random number between start number to end number
random(10, 100)//output: between 10, 100

//generate unique id by crypto 
uniqid() //output: random string
//with length
uniqid(10)
//with prefix
uniqid('cg_') //output: cg_omvowejg

//random string similar to uniqid but without dash
randomString(20, 'cg_') //output: random string e.g cg_omvowejg

//generate image url for avatar by latters
avatar("Javascript"); //output:https://ui-avatars.com/api/?name=Javascript


uuid(); //output: string unique uuid

uuidv1(); //output: string unique uuidv1

uuidv4(); //output: string unique uuidv4

Load

import { loadImage , lazyLoadImage , lazyLoadElm, isElementInViewport } from "aptness";

//load image by url in javascript
loadImage("image-url.png").then(function (image) {
    image.classList.add("show-image");
}).catch((err)=> {
    console.lor('imge error: ', err);
});

//image load will be completes when it gose to view
//The system work efficiently by using under IntersectionObserver
lazyLoadImage("image-url.png").then(function (image) {
    image.classList.add("show-image");
}).catch((err)=> {
    console.lor('imge error: ', err);
});


//elements load will be completes when it gose to view
//The system work efficiently by using under IntersectionObserver
const elm = document.queySelector("section");
lazyLoadElm(elem).then(function (elm) {
    elm.classList.add("show");
})
.catch((err)=> {
    console.lor('element load error: ', err);
});



//When a element is in the viewport
const element = document.querySelector('#element');
isElementInViewport(element) //output: true when the element is in view
//or 
isViewElm(element) //output: true when the element is in view

Storage

Session storage

import { getSession, setSession, removeSession } from "aptness";

setSession("sessionName", "Hello World!");
getSession("sessionName");// output: "Hello World!"

//set object and return object
setSession("sessionName", { text: 'Hello'});
getSession("sessionName");// output: { text: 'Hello'}

//set number and return number
setSession("sessionName", 120);
getSession("sessionName");// output: 120

cleanSession("sessionName");
// The session is removed

local storage

import { setStorage, setSession, removeSession } from "aptness";

setStorage("store_name", "Hello World!");
getStorage("store_name");// output: "Hello World!"

//set object and return object
setStorage("store_name", { text: 'Hello'});
getStorage("store_name");// output: { text: 'Hello'}

//set number and return number
setStorage("store_name", 120);
getStorage("store_name");// output: 120

cleanStorage("store_name");
// The session is removed

themeStorage

import { setThemeStore, getThemeStore } from "aptness";

setThemeStore("dark");

getThemeStore(); // output: dark

//theme storage with key name defined
setThemeStore("light", 'app_theme');

getThemeStore('app_theme'); // output: light

String

import { removeHtml, cssDurationToMillisecond } from "aptness";

//remove html characters from string
removeHtml("<h1>Hello world</h1>"); // output: Hello world


//css duration to milliseconds
cssDurationToMillisecond("1s"); // output: 1000
cssDurationToMillisecond("100ms"); // output: 100

url

import { toSeoUrl, seoToString, unslash, unslashR, unslashL } from "aptness";
import { home_url, homeURL , base_url, baseURL } from "aptness";

//Get home url only browser support
home_url() //output: http://example.com
home_url('hello-world') //output: http://example.com/hello-world
home_url(['hello','world']) //output: http://example.com/hello/world

//separator default: /
home_url(['hello','world'] , '_') //output: http://example.com/hello_world
home_url(['hello','world'] , '-') //output: http://example.com/hello-world
// home_url, homeURL, base_url, baseURL - all are some

// text to SEO url
toSeoUrl("Hello: I am javascript"); //output: hello-i-am-javascript

//SEO url to string
seoToString("hello-iam-javascript"); //output: hello i am javascript
//or 
urlToString("hello-iam-javascript") //output: hello i am javascript

//add slash end of the url
adslash("http://example.com"); //output: http://example.com/

adslash("http://example.com/hello"); //output: http://example.com/hello/

adslash("example.com/hello"); //output: example.com/hello/

//add slash to start and end of the url
adslashs("example.com/hello"); //output: /example.com/hello/
adslashs("example.com"); //output: /example.com/

//remove slashes from a string url

//remove slash from a url start and end of the url
unslash("http://example.com/"); //output: http://example.com

unslash("/example.com/hello/"); //output: example.com/hello

//remove slash from left side of path or url
unslashL("/example.com/hello/"); //output: example.com/hello/

//remove slash from right side of path or url
unslashR("/example.com/hello/"); //output: /example.com/hello

Math

import {loanPerMonth, loanPerYear , loanPerday } from "aptness";


loanPerMonth(amount, interest, duration); //output: number of loan per month

loanPerYear(amount, interest, duration); //output: number of loan per month

loanPerday(amount, interest, duration); //output: number of loan per month

validation

import { isMail, isPhoneNumber } from "aptness";

isMail("[email protected]"); //ouput: true
isMail("domain.com"); //output: false

isPhoneNumber("abc10832749"); //output: false

isPhoneNumber("10986499204"); //output: true

Author

Saeed Web Developer

• website
• Linkden
• email

Developers

git clone https://github.com/appsaeed/aptness.git

# TypeScript build
npm run build

# publish to npm package
npm run upload

License

Copyright © 2023 appsaeed

MIT