DEV Community

Cover image for JavaScript Functions That Will Make Your Life Much Easier [Updatable].
Youssef Zidan
Youssef Zidan

Posted on • Edited on

JavaScript Functions That Will Make Your Life Much Easier [Updatable].

#javascript #native #functions #npm

Description

Native JavaScript Reusable Functions.

Installation 

npm i javascript-functions
Enter fullscreen mode Exit fullscreen mode

Usage

node.js

const jsf = require("javascript-functions");
jsf.capitalize("cat"); // Cat
Enter fullscreen mode Exit fullscreen mode

ES6

import * as jsf = from "javascript-functions";
// OR
import { capitalize } from "javascript-functions";

jsf.capitalize("cat"); // Cat
Enter fullscreen mode Exit fullscreen mode

Strings

capitalize() 

/**
 * Returns a capitalized String.
 * @param {string} s String that will be Capitalized.
 */
const capitalize = (s) => {
  if (typeof s !== "string") throw new Error("Input has to be a String!");
  return s.charAt(0).toUpperCase() + s.slice(1);
};
Enter fullscreen mode Exit fullscreen mode

usage

capitalize("cat"); // Cat
Enter fullscreen mode Exit fullscreen mode

truncate() 

/**
 * Returns a truncated string.
 * @param {string} text String to be truncated.
 * @param {number} num Max length of the `String` that will be truncated.
 */
const truncate = (text, num = 10) => {
  if (text.length > num) {
    return `${text.substring(0, num - 3)}...`;
  }
  return text;
};
Enter fullscreen mode Exit fullscreen mode

Usage

truncate("this is some long string to be truncated");
// this is...

truncate("this is some long string to be truncated", 15);
// this is some...
Enter fullscreen mode Exit fullscreen mode

toggleStrNum() 

/**
 * Returns toggled '1' or '0'.
 * @param {string} strNum String number "0" or "1".
 */
const toggleStrNum = (strNum) => {
  if (strNum === "0" || strNum === "1") return strNum === "0" ? "1" : "0";
  return null;
};
Enter fullscreen mode Exit fullscreen mode

Usage

toggleStrNum("1"); // "0"
Enter fullscreen mode Exit fullscreen mode

camelCaseToSpaces() 

/**
 * Converts CamelCase string into string with spaces
 * @param {string} str CamelCase string
 * @returns {string}
 */
const camelCaseToSpaces = (str) => {
  if (typeof str !== "string") throw new Error("Input has to be a String!");

  let regex = /([A-Z])([A-Z])([a-z])|([a-z])([A-Z])/g;
  return str.replace(regex, "$1$4 $2$3$5");
};
Enter fullscreen mode Exit fullscreen mode

Usage

camelCaseToSpaces("ABCLoremIpsumCSSAndHTML");
// ABC Lorem Ipsum CSS And HTML
Enter fullscreen mode Exit fullscreen mode

logFormattedStrings() 

/**
 * Logging formatted strings.
 * @param {any} input
 */
const logFormattedStrings = (input) => JSON.stringify(input, null, 4);
Enter fullscreen mode Exit fullscreen mode

Usage

logFormattedStrings({ fName: "John", lName: "Doe" });

/*
 {
   "fName": "John",
   "lName": "Doe"
 } 
*/
Enter fullscreen mode Exit fullscreen mode

getInnerHTML() 

/**
 * Getting the inner `Text` of an `HTML` string.
 * @param {string} str A string of HTML.
 */
const getInnerHTML = (str) => str.replace(/(<([^>]+)>)/gi, "").trim();
Enter fullscreen mode Exit fullscreen mode

Usage

getInnerHTML("<h1>HI</h1>"); // HI

getInnerHTML(`
    <p>
      <h1>HI</h1>
    </p>
    `); // HI

getInnerHTML(`
      <p>
        <h1>
          <span>HI</span>
        </h1>
      </p>
    `); // HI
Enter fullscreen mode Exit fullscreen mode

randomId() 

/**
 * Generates and returns a random ID
 * @returns {string}
 */
const randomId = () => {
  return Date.now().toString(36) + Math.random().toString(36).substr(2);
};
Enter fullscreen mode Exit fullscreen mode

Usage

randomId(); // kw3npdsaw22i8ghr2i
Enter fullscreen mode Exit fullscreen mode

hashCardNum() 

/**
 * Returns a hashed card number.
 * @param {string} str 16 card numbers as a string.
 * @param {string} symbol hash symbol.
 * @returns hashed card number
 */
const hashCardNum = (str, symbol = "#") => {
  if (typeof str !== "string") throw new Error("Input has to be a String!");

  let string = str.replace(/ /g, "");
  if (string.length !== 16) throw new Error("Card number must be 16 digits");
  else {
    let hashSymbol = new Array(12)
      .fill(symbol)
      .join("")
      .replace(/^(.{4})(.{4})(.*)$/, "$1 $2 $3");
    return `${hashSymbol} ` + string.slice(12);
  }
};
Enter fullscreen mode Exit fullscreen mode

Usage

hashCardNum("1599 9874 5632 1459"); // #### #### #### 1459

hashCardNum("1599 9874 5632 1459", "*"); // **** **** **** 1459

hashCardNum("1599 9874 5632"); // Throws an Error
Enter fullscreen mode Exit fullscreen mode

Numbers

randomNumber() 

/**
 * Returns a random number between min to max.
 * @param {number} min Min number [default = 0].
 * @param {number} max Max Number [default = 1000].
 *
 */
const randomNumber = (min = 0, max = 1000) =>
  Math.ceil(min + Math.random() * (max - min));
Enter fullscreen mode Exit fullscreen mode

Usage

randomNumber()); // 97
Enter fullscreen mode Exit fullscreen mode

bytesToSizes() 

/**
 * Converts Bytes into Digital Storage Sizes.
 * @param {number} bytes Bytes in number.
 * @param {number} thresh The thresh of bytes.
 */
const bytesToSizes = (bytes, thresh = 1024) => {
  if (isNaN(bytes) || isNaN(parseFloat(bytes))) {
    throw new Error(
      `Input has to be a Number or String Number, You entered '${JSON.stringify(
        bytes
      )}'`
    );
  }
  if (isNaN(thresh) || isNaN(parseFloat(thresh))) {
    throw new Error(
      `Thresh has to be a Number, You entered '${JSON.stringify(bytes)}'`
    );
  }

  const BYTES = +bytes;
  if (BYTES <= 1) return `${BYTES} Byte`;

  const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];

  const i = parseInt(Math.floor(Math.log(BYTES) / Math.log(thresh)));
  return Math.round(BYTES / Math.pow(thresh, i), 2) + " " + sizes[i];
};
Enter fullscreen mode Exit fullscreen mode

Usage

bytesToSizes(1); // "1 Bytes"
bytesToSizes(1024); // "1 KB"
bytesToSizes(1_048_576); // "1 MB"
bytesToSizes(1_073_741_824); // "1 GB"
bytesToSizes(1_099_511_627_776); // "1 TB"
bytesToSizes(1_125_899_906_842_624); // "1 PB"
bytesToSizes(1.152921504606847e18); // "1 EB"
bytesToSizes(1.180591620717411e21); // "1 ZB"
bytesToSizes(1.208925819614629e24); // "1 YB"

// Using thresh
const thresh = 1000;
bytesToSizes(1, thresh); // "1 Bytes"
bytesToSizes(1000, thresh); // "1 KB"
bytesToSizes(1000_000, thresh); // "1 MB"
bytesToSizes(1000_000_000, thresh); // "1 GB"
bytesToSizes(1000_000_000_000, thresh); // "1 TB"
bytesToSizes(1000_000_000_000_000, thresh); // "1 PB"
bytesToSizes(1000_000_000_000_000_000, thresh); // "1 EB"
bytesToSizes(1000_000_000_000_000_000_000, thresh); // "1 ZB"
bytesToSizes(1000_000_000_000_000_000_000_000, thresh); // "1 YB"
Enter fullscreen mode Exit fullscreen mode

formatNumber() 

/**
 * Returns a formatted number with separators based on Options.
 * @param {number} num integer.
 * @param {string} lang visit => https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString#using_locales
 * @param {object} options visit => https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString#using_options
 */
const formatNumber = (num, lang, options) =>
  num.toLocaleString(lang, { ...options });
Enter fullscreen mode Exit fullscreen mode

Usage

formatNumber(123456.789); // 123,456.789

formatNumber(123456.789, "ar-EG"); // ١٢٣٬٤٥٦٫٧٨٩

formatNumber(123456.789, "de-DE", { style: "currency", currency: "EUR" }); // "123.456,79 €"
Enter fullscreen mode Exit fullscreen mode

Arrays

containsAll() 

/**
 * Check that every element in an array exists in the other array.
 * @param {array} baseArr The array to make sure it has all the values.
 * @param {arr} arr The other array that will be compared with.
 */
const containsAll = (baseArr, arr) => arr.every((ele) => baseArr.includes(ele));
Enter fullscreen mode Exit fullscreen mode

Usage

const arr1 = ["1", "2", "3"];
const arr2 = ["1", "2", "3", "X"];

containsAll(arr1, arr2); // false

containsAll(arr2, arr1); // true
Enter fullscreen mode Exit fullscreen mode

toggleArrayValue() 

/**
 * If the value is an element of the array remove it from array
 * Otherwise it adds the new value to the array
 * @param {array} array The array to toggle value from.
 * @param {value} value The value to be toggled from array.
 * @returns {array} new array with or without the selected value
 */
const toggleArrayValue = (array, value) => {
  return array.includes(value)
    ? [...array.filter((i) => i !== value)]
    : [...array, value];
};
Enter fullscreen mode Exit fullscreen mode

Usage

// Example 1
let array = ["1", "2", "3"];
let value = "1";

toggleArrayValue(array, value); // ["2", "3"]

// Example 2
let array = ["1", "2", "3"];
let value = "3";

toggleArrayValue(array, value); // ["1", "2"]

// Example 3
let array = ["1", "2", "3"];
let value = "XXX";

toggleArrayValue(array, value); // ["1", "2", "3", "XXX"]
Enter fullscreen mode Exit fullscreen mode

getUniqueObjs() 

/**
 * Returns a unique array of objects based on a key.
 * @param {array} array Array of objects.
 * @param {string} key A unique property of each object [default = 'id'].
 */
const getUniqueObjs = (array, key = "id") => {
  const ids = [];
  const output = [];
  array.forEach((ele) => {
    if (!ids.includes(ele[key])) {
      ids.push(ele[key]);
      output.push(ele);
    }
  });
  return output;
};
Enter fullscreen mode Exit fullscreen mode

Usage

const arr = [
  { id: 1, val: "One" },
  { id: 2, val: "Two" },
  { id: 3, val: "Three" },
  { id: 3, val: "Three" },
  { id: 3, val: "Three" },
  { id: 3, val: "Three" },
];

getUniqueObjs(arr);

/*
  { id: 1, val: "One" },
  { id: 2, val: "Two" },
  { id: 3, val: "Three" },  
*/
Enter fullscreen mode Exit fullscreen mode

arrToObj() 

/**
 * Converts two dimensional array into an object.
 * When index[0] is the `key` and index[1] ins the `value`.
 * @param {Array} arr An Array
 * @returns Object
 */
const arrToObj = (arr) => {
  if (!Array.isArray(arr)) throw new Error("Input should be an array.");
  return Object.fromEntries(arr);
};
Enter fullscreen mode Exit fullscreen mode

Usage

arrToObj([
  ["x", 1],
  ["y", 2],
]);

// Output { x: 1, y: 2 }
Enter fullscreen mode Exit fullscreen mode

Date & Time

getTimes() 

/**
 * Getting an Array of Times + "AM" or "PM".
 * @param {number} startTime Starting hour [in minutes].
 * @param {number} minutesInterval every *n* minutes [default = 15].
 * @returns {Array} Array of time.
 */
const getTimes = (startTime = 0, minutesInterval = 15) => {
  const times = []; // time array
  const x = minutesInterval; // minutes interval
  let tt = startTime; // start time
  const ap = ["AM", "PM"]; // AM-PM

  const formatHrs = (hh) => {
    const _12Format = hh === 12 ? 12 : hh % 12;
    return _12Format === 0 ? 12 : _12Format;
  };

  // loop to increment the time and push results in array
  for (let i = 0; tt < 24 * 60; i += 1) {
    const hh = Math.floor(tt / 60); // getting hours of day in 0-24 format
    const mm = tt % 60; // getting minutes of the hour in 0-55 format

    const hours = `0${formatHrs(hh)}`.slice(-2);
    const minutes = `0${mm}`.slice(-2);
    const AMPM = ap[Math.floor(hh / 12)];

    times[i] = `${hours}:${minutes} ${AMPM}`; // pushing data in array in [00:00 - 12:00 AM/PM format]
    tt += x;
  }
  return times;
};
Enter fullscreen mode Exit fullscreen mode

Usage

getTimes();
/*
  0: "12:00 AM"
  1: "12:15 AM"
  2: "12:30 AM"
  3: "12:45 AM"
// ...
*/
getTimes(120);
/*
  0: "02:00 AM"
  1: "02:15 AM"
  2: "02:30 AM"
  3: "02:45 AM"
// ...
*/
getTimes(0, 30);

/*
  0: "12:00 AM"
  1: "12:30 AM"
  2: "01:00 AM"
  3: "01:30 AM"
  // ...
*/
Enter fullscreen mode Exit fullscreen mode

today() 

/**
 * Returns Today's date.
 * @returns {Date} Today's date.
 */
const today = () => {
  return new Date();
};
Enter fullscreen mode Exit fullscreen mode

tomorrow() 

/**
 * Returns Tomorrow's date
 * @returns {Date} Tomorrow's date
 */
const tomorrow = () => {
  const day = new Date();
  day.setDate(day.getDate() + 1);
  return day;
};
Enter fullscreen mode Exit fullscreen mode

toTimeStamp() 

/**
 * Converts date into time stamp formate.
 * @param {Date} date date
 * @returns {Number} In time stamp formate in milliseconds.
 */
const toTimeStamp = (date) => {
  return new Date(date).getTime();
};
Enter fullscreen mode Exit fullscreen mode

Usage

toTimeStamp(new Date()); // 1629542075973
Enter fullscreen mode Exit fullscreen mode

toUnixTimeStamp() 

/**
 * Converts date into Unix Timestamp formate.
 * @param {Date} date date
 * @returns {Number} In unix timestamp formate.
 */
const toUnixTimeStamp = (date) => {
  return Math.floor(new Date(date).getTime() / 1000);
};
Enter fullscreen mode Exit fullscreen mode

Usage

toUnixTimeStamp(new Date()); // 1637256905
Enter fullscreen mode Exit fullscreen mode

toUTC() 

/**
 * Converts date into UTC timezone.
 * @param {Date} date date
 * @returns {String} In UTC timezone.
 */
const toUTC = (date) => {
  return new Date(date).toGMTString();
};
Enter fullscreen mode Exit fullscreen mode

Usage

toUTC(new Date()); // Sat, 21 Aug 2021 10:34:35 GMT

toUTC(1629542075973); // Sat, 21 Aug 2021 10:34:35 GMT
Enter fullscreen mode Exit fullscreen mode

humanFriendlyDate() 

/**
 * Converts Date into Human readable date string.
 * @param {Date} date [default new Date()].
 * @param {String} locales [default "en-Us"].
 * @param {Object} options Formatting options.
 * @param {String} options.weekday
 * @param {String} options.year
 * @param {String} options.month
 * @param {String} options.day
 * @returns {String} Human readable date.
 */
const humanFriendlyDate = (date = new Date(), locales = "en-US", options) => {
  const O = {
    weekday: "short",
    year: "numeric",
    month: "short",
    day: "numeric",
    ...options,
  };
  return date.toLocaleDateString(locales, O);
};
Enter fullscreen mode Exit fullscreen mode

Usage

humanFriendlyDate(new Date()); // Sat, Aug 21, 2021

humanFriendlyDate(new Date(), "ar-EG"); // السبت، ٢١ أغسطس ٢٠٢١

humanFriendlyDate(new Date(), "en-US", { weekday: "long", month: "long" }); // Saturday, August 21, 2021
Enter fullscreen mode Exit fullscreen mode

humanFriendlyTime() 

/**
 * Converts Date into Human readable time string.
 * @param {Date} date [default new Date()].
 * @param {String} locales [default "en-Us"].
 * @returns {String} Human readable date.
 */
const humanFriendlyTime = (date = new Date(), locales = "en-US") => {
  return date.toLocaleTimeString(locales);
};
Enter fullscreen mode Exit fullscreen mode

Usage

humanFriendlyTime(new Date()); // 12:42:53 PM

humanFriendlyTime(new Date(), "ar-EG"); // ١٢:٤٣:٣٩ م
Enter fullscreen mode Exit fullscreen mode

logToDateMethods() 

/**
 * Logs all Date methods starts with to*.
 */
const logToDateMethods = () => {
  console.log(
    Object.getOwnPropertyNames(Date.prototype)
      .filter((name) => name.startsWith("to"))
      .map((method) => `${method}: ${new Date()[method]()}`)
  );
};
Enter fullscreen mode Exit fullscreen mode

Usage

logToDateMethods();
/*
[
  "toUTCString: Sat, 25 Dec 2021 15:24:35 GMT",
  "toLocaleString: 12/25/2021, 5:24:35 PM",
  "toLocaleDateString: 12/25/2021",
  "toLocaleTimeString: 5:24:35 PM",
  "toDateString: Sat Dec 25 2021",
  "toTimeString: 17:24:35 GMT+0200 (Eastern European Standard Time)",
  "toISOString: 2021-12-25T15:24:35.983Z",
  "toJSON: 2021-12-25T15:24:35.983Z",
  "toString: Sat Dec 25 2021 17:24:35 GMT+0200 (Eastern European Standard Time)",
  "toGMTString: Sat, 25 Dec 2021 15:24:35 GMT",
];

*/
Enter fullscreen mode Exit fullscreen mode

Objects

toFormData() 

/**
 * Convert Objects to Form Data Format.
 * @param {object} obj
 */
const toFormData = (obj) => {
  const formBody = new FormData();
  Object.keys(obj).forEach((key) => {
    if (Array.isArray(obj[key])) {
      obj[key].forEach((val, i) => {
        formBody.append(`${key}[${i}]`, val);
      });
    } else formBody.append(key, obj[key]);
  });
  return formBody;
};
Enter fullscreen mode Exit fullscreen mode

Usage

const formData = toFormData({
  name: "x",
  arr: ["a", "b", "c"],
  nested: { val: "nested value" },
});
for (var pair of formData.entries()) {
  console.log(pair[0] + ", " + pair[1]);
}
/*
  name, x
  arr[0], a
  arr[1], b
  arr[2], c
  nested, [object Object]
*/
Enter fullscreen mode Exit fullscreen mode

softClone() 

/**
 * Soft  cloning objects
 * @param {object} obj Input
 */
const softClone = (obj) => JSON.parse(JSON.stringify(obj));
Enter fullscreen mode Exit fullscreen mode

Usage

const obj = { name: "a", nested: { val: "nested val" } };
const clone = softClone(obj);
obj.name = "XXX";

console.log(obj);
// {name: "XXX", nested: { val: "nested val" }}

console.log(clone);
// {name: "a", nested: { val: "nested val" }}
Enter fullscreen mode Exit fullscreen mode

Usage

getInnerHTML("<h1>HI</h1>"); // HI

getInnerHTML(`
    <p>
      <h1>HI</h1>
    </p>
    `); // HI

getInnerHTML(`
    <p>
      <h1>
        <span>HI</span>
      </h1>
    </p>
    `); // HI
Enter fullscreen mode Exit fullscreen mode

objToArray() 

/**
 * Converts Objects into two dimensional array.
 * When index[0] is the `key` and index[1] is the `value`.
 * @param {Object} obj An Object
 * @returns Tow dimensional array.
 */
const objToArray = (obj) => {
  if (Array.isArray(obj) || typeof obj !== "object") {
    throw new Error("Input should be an Object");
  }

  return Object.entries(obj);
};
Enter fullscreen mode Exit fullscreen mode

Usage

objToArray({ x: 1, y: 2 });

// Output
/*
  [
    ["x", 1],
    ["y", 2],
  ]
*/
Enter fullscreen mode Exit fullscreen mode

Forms

preventChars() 

/**
 * Prevent input from typing certain keyboard chars passed as an array of chars.
 * @param {event} event input event
 * @param {Array<string>} charArr array of chars
 * @returns {boolean} boolean
 */
const preventChars = (event, charArr) =>
  charArr.includes(event.key) && event.preventDefault();
Enter fullscreen mode Exit fullscreen mode

Usage

// html
<input type="number" id="inp">

// js
document.getElementById('inp').addEventListener('keydown', e => {
  const arr = ['e', 'E', '+', '-'];
  preventChars(e, arr);
});
Enter fullscreen mode Exit fullscreen mode

Window

getScreenWidth() 

/**
 * Detect screen width and returns a string representing the width of the screen.
 */
const getScreenWidth = () => {
  const screenWidth = window.screen.width;
  if (screenWidth <= 425) return "mobile";
  if (screenWidth <= 768) return "tablet";
  if (screenWidth <= 1024) return "laptopSm";
  if (screenWidth <= 1440) return "laptopLg";
  if (screenWidth <= 2560) return "HD";
  return screenWidth;
};
Enter fullscreen mode Exit fullscreen mode

toTop() 

/**
 * Scroll to top
 */
const toTop = (behavior = "smooth") => {
  window.scroll({ top: 0, left: 0, behavior });
};
Enter fullscreen mode Exit fullscreen mode

getURLParams() 

/**
 * Returns param name from a URL.
 * @param {string} name
 */
const getURLParams = (name) => {
  return new URLSearchParams(window.location.search).get(name);
};
Enter fullscreen mode Exit fullscreen mode

appendURLParams() 

/**
 * Appends query string and returns the value in a query string format.
 * @param {string} key
 * @param {string} value
 */
const appendURLParams = (paramName, value) => {
  const searchParams = new URLSearchParams(window.location.search);
  searchParams.set(paramName, value);
  return searchParams.toString();
};
Enter fullscreen mode Exit fullscreen mode

setLocalItem() 

/**
 * Caching values with expiry date to the LocalStorage.
 * @param {string} key Local Storage Key
 * @param {any} value Local Storage Value
 * @param {number} ttl Time to live (Expiry Date in MS)
 */
const setLocalItem = (key, value, ttl) => {
  const now = new Date();
  // `item` is an object which contains the original value
  // as well as the time when it's supposed to expire
  const item = {
    value,
    expiry: now.getTime() + ttl,
  };
  localStorage.setItem(key, JSON.stringify(item));
};
Enter fullscreen mode Exit fullscreen mode

getLocalItem() 

/**
 * Getting values with expiry date from LocalStorage that stored with `setLocalItem`.
 * @param {string} key Local Storage Key
 */
const getLocalItem = (key) => {
  const itemStr = localStorage.getItem(key);
  // if the item doesn't exist, return null
  if (!itemStr) {
    return null;
  }
  const item = JSON.parse(itemStr);
  const now = new Date();
  // compare the expiry time of the item with the current time
  if (now.getTime() > item.expiry) {
    // If the item is expired, delete the item from storage
    // and return null
    localStorage.removeItem(key);
    return null;
  }
  return item.value;
};
Enter fullscreen mode Exit fullscreen mode

scrollToHide() 

/**
 * Hides an HTML element when scroll down and reveals it when scroll up.
 * @param {string} id the `id` of an `HTML` element.
 * @param {number} distance An integer of pixels.
 */
const scrollToHide = (id, distance) => {
  const distanceDown = distance;
  const distanceUp = distance * 2;
  let prevScrollpos = window.pageYOffset;
  window.onscroll = () => {
    const currentScrollPos = window.pageYOffset;
    if (prevScrollpos > currentScrollPos) {
      document.getElementById(
        id
      ).style.transform = `translateY(${distanceDown}px)`;
    } else {
      document.getElementById(
        id
      ).style.transform = `translateY(-${distanceUp}px)`;
    }
    prevScrollpos = currentScrollPos;
  };
};
Enter fullscreen mode Exit fullscreen mode

pxToRem() 

/**
 * Converts Pixels into Rem based on the root <html /> tag.
 * @param {number} px Pixels
 * @returns {number}
 */
const pxToRem = (px) => {
  return px / parseFloat(getComputedStyle(document.documentElement).fontSize);
};
Enter fullscreen mode Exit fullscreen mode

Usage

// In case <html /> base font size is '16px'

pxToRem(32); // 2
Enter fullscreen mode Exit fullscreen mode

remToPx() 

/**
 * Converts Rems into Pixels based on the root <html /> tag.
 * @param {number} rem Rem
 * @returns {number}
 */
const remToPx = (rem) => {
  return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
};
Enter fullscreen mode Exit fullscreen mode

Usage

// In case <html /> base font size is '16px'

remToPx(2); // 32
Enter fullscreen mode Exit fullscreen mode

assert() 

/**
 * console.assert a value and displays a message
 */
const assert = (val, msg = "Provided value is falsy.") => {
  console.assert(val, msg);
};
Enter fullscreen mode Exit fullscreen mode

Usage

assert(false); // Assertion failed: Provided value is falsy.
assert(0); // Assertion failed: Provided value is falsy.

assert(false, "The value is false"); // Assertion failed: The value is false.

assert(true); // undefined
Enter fullscreen mode Exit fullscreen mode


LinkedIn

Top comments (29)

Collapse
 
talorlanczyk profile image
TalOrlanczyk •

for deep clone I prefer lodash because this method while it can be good in some cases it can fail.
Because it can lose data in some cases
Like Dates, functions, undefined, Infinity, RegExps, Maps, Sets, Blobs, or other complex types within your object it can be list or strigified
Its only good for object with string and numbers most of the time.
Still those are great functions that can be used in a large amount of projects

Collapse
 
youssefzidan profile image
Youssef Zidan • • Edited

Thanks, My friend!
I modified the article based on your feedback!

Collapse
 
talorlanczyk profile image
TalOrlanczyk •

there is a method I use a lot when I need to submit urls

export const isUrl = (s) => {
  // eslint-disable-next-line
  var regexp = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/;
  return regexp.test(s);
};
Enter fullscreen mode Exit fullscreen mode
Thread Thread
 
youssefzidan profile image
Youssef Zidan •

Excellent!

Collapse
 
krimfandango profile image
Kareem Kamal • • Edited

Hello, nice list!

runEvery function is broken, it runs a script every x milliseconds if hour is after the given hour and minute is after the given minute, so given this input:

runEvery(() => console.log('ran'), 12, 30, 300000)
Enter fullscreen mode Exit fullscreen mode

and the time now is 3:17 PM it will try running at 8:17 PM but now.getMinutes() >= mins will return false and the function will not execute, and every 5 hours it will always return false
But if you set minutes to 0 or someone starts the application after the provided minute it will execute every interval after the given time.

If the goal is to make a function that runs every day at a certain time, you need to get the time to the next occurrence and start the interval then, something like this:

function runEverydayAt(callback, hour, minute) {
  // first we need to get the time until the next hour:minute
  const now = new Date()
  // to check if the next time happens today check how many minutes
  // passed in the day and compare them with the input
  const nowInMinutes = (now.getHours() * 60) + now.getMinutes()
  const inputTimeInMinutes = (hour * 60) + minute
  const isNextTimeToday = nowInMinutes < inputTimeInMinutes

  // create a new date for the comparison
  const firstTime = new Date()
  // and set its time to the input's time
  firstTime.setHours(hour, minute, 0)

  if (!isNextTimeToday) {
    // if next time is today then add a day
    firstTime.setDate(now.getDate() + 1)
  }

  const timeUntilNextOccurrence = firstTime.getTime() - now.getTime()

  // finally set a timeout to start the first call
  // on time then every other call every 24 hours
  setTimeout(() => {
    // setInterval will start kicking in after 24 hours
    // therefore we need to invoke the first callback here
    callback()
    setInterval(callback, 1000 * 60 * 60 * 24)
  }, timeUntilNextOccurrence)
}

// to check you can try invoking it with a time that's coming soon
runEverydayAt(() => console.log('I ran!'), 10, 43)
Enter fullscreen mode Exit fullscreen mode
Collapse
 
youssefzidan profile image
Youssef Zidan •

Great!
Thanks for your feedback!
I'll check my code again and get back to you.

Collapse
 
youssefzidan profile image
Youssef Zidan • • Edited

Hello!
I tried to run your function but it doesn't seem to be working.

Thread Thread
 
krimfandango profile image
Kareem Kamal •

Hey Youssif, I've just tried running the code in the console and it seems to be working.
You just need to set the time to be coming up in a minute or two so that you wouldn't wait for long for the next occurrence

Image

Collapse
 
mma1979 profile image
Mohammed Abdelhay •

and this one I am using regularly

// serialize javascript object into url query string
        Serialize = function (obj) {
            var str = [];
            for (var p in obj)
                if (obj.hasOwnProperty(p) && obj[p] != null && obj[p].toString() != '') {
                    str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
                }
            return str.join("&");
        }
Enter fullscreen mode Exit fullscreen mode
Collapse
 
youssefzidan profile image
Youssef Zidan •

Nice!
I like it!

Collapse
 
endrureza profile image
Endru Reza •

i think it would be good for you to create this into an npm package.

Collapse
 
youssefzidan profile image
Youssef Zidan •

It's on my plan but i need to increase the number of functions.

Collapse
 
talorlanczyk profile image
TalOrlanczyk •

I would like to help with the npm

Thread Thread
 
halbano profile image
halbano • • Edited

I would like to help too. Maybe we can build something bigger between us!
I have a bunch of react-native utils that may be interesting.

Thread Thread
 
youssefzidan profile image
Youssef Zidan •

That's great!
Maybe we can do something together.

Collapse
 
metruzanca profile image
Samuele Zanca •

The way you're deep cloning is bad practice. If you're gonna copy and paste helpers might as ok copy and paste lodash's implementation.

Collapse
 
youssefzidan profile image
Youssef Zidan •

Thanks, My friend!
I modified the article based on your feedback!

Collapse
 
pavlosisaris profile image
Paul Isaris •

Nice collection, thanks!

Collapse
 
hellonearthis profile image
Brett Cooper •

1024 = 1k bytes

Collapse
 
youssefzidan profile image
Youssef Zidan •

Thanks, My friend!
I modified the article based on your feedback!

Collapse
 
lovesponge profile image
Guy •

Great Post!
I use Number.prototype.toLocaleString() to get formatted numbers 😁

Collapse
 
youssefzidan profile image
Youssef Zidan •

This is amazing!
Thanks for sharing!

Collapse
 
youssefzidan profile image
Youssef Zidan •

I Modified the article based on your feedback!
Thanks, my friend!

Collapse
 
qq449245884 profile image
qq449245884 •

Dear YoussefZidan，may I translate your article into Chinese?I would like to share it with more developers in China. I will give the original author and original source.

Collapse
 
youssefzidan profile image
Youssef Zidan •

Sure!

Collapse
 
nilsandrey profile image
Nils Andrey •

Thanks for sharing. I recommend you to create a Github gist for most of it and share the links here.

Collapse
 
youssefzidan profile image
Youssef Zidan •

Thanks, Sure I'll do so.

View full discussion (29 comments)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.