virtualitems/javascript-toolkit

My javascript toolkit

Hi there 👋

javascript-toolkit's Issues

object oriented css

data-astro-cid-j7pv25f6

.nav-link[data-astro-cid-j7pv25f6].active{border-bottom:2px solid white}

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles
https://html.com/tags/

https://snipcart.com/blog/organize-css-modular-architecture

https://github.com/css-modules/css-modules

css values and units

const css = { // CSS values and units

_validNumber: val => (
val !== undefined &&
val !== null &&
!Object.is(val, NaN) &&
val.constructor === Number &&
Number.isFinite(val)
),

_validString: val => (
val !== undefined &&
val !== null &&
val.constructor === String &&
val.length > 0
),

_numeric: (val, unit) => {
if (!css._validNumber(val)) {
throw new Error(Invalid value: ${val}. Must be a finite number.);
}
return ${val}${unit};
},

// Distance
em: val => css._numeric(val, 'em'), // Font size of the element.
ex: val => css._numeric(val, 'ex'), // x-height of the element's font.
cap: val => css._numeric(val, 'cap'), // Cap height (the nominal height of capital letters) of the element's font.
ch: val => css._numeric(val, 'ch'), // Average character advance of a narrow glyph in the element's font, as represented by the "0" (ZERO, U+0030) glyph.
ic: val => css._numeric(val, 'ic'), // Average character advance of a full width glyph in the element's font, as represented by the "水" (CJK water ideograph, U+6C34) glyph.
rem: val => css._numeric(val, 'rem'), // Font size of the root element.
lh: val => css._numeric(val, 'lh'), // Line height of the element.
rlh: val => css._numeric(val, 'rlh'), // Line height of the root element.
vw: val => css._numeric(val, 'vw'), // 1% of viewport's width.
vh: val => css._numeric(val, 'vh'), // 1% of viewport's height.
vi: val => css._numeric(val, 'vi'), // 1% of viewport's size in the root element's inline axis.
vb: val => css._numeric(val, 'vb'), // 1% of viewport's size in the root element's block axis.
vmin: val => css._numeric(val, 'vmin'), // 1% of viewport's smaller dimension.
vmax: val => css._numeric(val, 'vmax'), // 1% of viewport's larger dimension.

cqw: val => css._numeric(val, 'cqw'), // 1% of a query container's width
cqh: val => css._numeric(val, 'cqh'), // 1% of a query container's height
cqi: val => css._numeric(val, 'cqi'), // 1% of a query container's inline size
cqb: val => css._numeric(val, 'cqb'), // 1% of a query container's block size
cqmin: val => css._numeric(val, 'cqmin'), // The smaller value of cqi or cqb
cqmax: val => css._numeric(val, 'cqmax'), // The larger value of cqi or cqb

cm: val => css._numeric(val, 'cm'), // Centimeters 1cm = 96px/2.54
mm: val => css._numeric(val, 'mm'), // Millimeters 1mm = 1/10th of 1cm
Q: val => css._numeric(val, 'Q'), // Quarter-millimeters 1Q = 1/40th of 1cm
in: val => css._numeric(val, 'in'), // Inches 1in = 2.54cm = 96px
pc: val => css._numeric(val, 'pc'), // Picas 1pc = 1/6th of 1in
pt: val => css._numeric(val, 'pt'), // Points 1pt = 1/72th of 1in
px: val => css._numeric(val, 'px'), // Pixels 1px = 1/96th of 1in

// Angle
deg: val => css._numeric(val, 'deg'), // Degrees: There are 360 degrees in a full circle.
grad: val => css._numeric(val, 'grad'), // Gradians: There are 400 gradians in a full circle.
rad: val => css._numeric(val, 'rad'), // Radians: There are 2π radians in a full circle.
turn: val => css._numeric(val, 'turn'), // Turns: There is 1 turn in a full circle.

// Time
s: val => css._numeric(val, 's'), // Seconds
ms: val => css._numeric(val, 'ms'), // There are 1,000 milliseconds in a second.

// Frequency
hz: val => css._numeric(val, 'Hz'), // Hertz: Represents the number of occurrences per second.
khz: val => css._numeric(val, 'kHz'), // KiloHertz: A kiloHertz is 1000 Hertz.

// Flex units
fr: val => css._numeric(val, 'fr'), // Represents a fraction of the available space in the grid container.

// Resolution units
dpi: val => css._numeric(val, 'dpi'), // Dots per inch.
dpcm: val => css._numeric(val, 'dpcm'), // Dots per centimeter.
dppx: val => css._numeric(val, 'dppx'), // Dots per px unit.

// Percentage
prcnt: val => css._numeric(val, '%'), // Percentage

// Color
hex: val => {
if (!css._validString(val) || val.length > 8) {
throw new Error(Invalid value: ${val}. Must be a string with a maximum length of 8.);
}
if (!css._validNumber(parseInt(val, 16))) {
throw new Error(Invalid value: ${val}. Must be a valid hexadecimal number.);
}
return #${val};
},

rgb: (r, g, b, a) => { // Red, Green, Blue, Alpha
if (!css._validNumber(r)) {
throw new Error(Invalid value: ${r}. Must be a finite number.);
}
if (!css._validNumber(g)) {
throw new Error(Invalid value: ${g}. Must be a finite number.);
}
if (!css._validNumber(b)) {
throw new Error(Invalid value: ${b}. Must be a finite number.);
}
if (!css._validNumber(a)) {
throw new Error(Invalid value: ${a}. Must be a finite number.);
}
return rgb(${r}, ${g}, ${b}, ${a});
},

hsl: (h, s, l, a) => { // Hue, Saturation, Lightness, Alpha
if (!css._validNumber(h)) {
throw new Error(Invalid value: ${h}. Must be a finite number.);
}
if (!css._validNumber(s)) {
throw new Error(Invalid value: ${s}. Must be a finite number.);
}
if (!css._validNumber(l)) {
throw new Error(Invalid value: ${l}. Must be a finite number.);
}
if (!css._validNumber(a)) {
throw new Error(Invalid value: ${a}. Must be a finite number.);
}
return hsl(${h}, ${s}, ${l}, ${a});
}

};

javascript browser blob cache

const image = 'https://example.com/image.png;
const cname = 'testing-cache';

fetch(image)
.then(response => response.blob())
.then(blob => {
caches.open(cname)
.then(cache => cache.put(image, new Response(blob)));
});

caches.open(cname).then(cache => {
cache.match(image).then(response => {
if (response) {
response.blob().then(blob => {
const url = URL.createObjectURL(blob);
const img = document.createElement('img');
img.src = url;
document.body.appendChild(img);
});
}
});
});

mvvm with reactjs

// Model
const initialData = {
  counter: 0
};

// ViewModel
const useCounterViewModel = () => {
  const [data, setData] = useState(initialData);

  const incrementCounter = () => {
    setData(prevData => ({
      ...prevData,
      counter: prevData.counter + 1
    }));
  };

  return { data, incrementCounter };
};

// View
const CounterView = ({ counter, onIncrement }) => {
  return (
    <div>
      <p>Counter: {counter}</p>
      <button onClick={onIncrement}>Increment</button>
    </div>
  );
};

const App = () => {
  const { data, incrementCounter } = useCounterViewModel();

  return <CounterView counter={data.counter} onIncrement={incrementCounter} />;
};

ReactDOM.render(<App />, document.getElementById('root'));

ladder architecture

ladder architecture

Concept:

• Content
  • Container
  • Content
    • Container
    • Atomic Content
    • Content
      • Container
      • Content
        • Atomic content
        • Atomic content

Example:

• Site
  • Router
  • Page
    • Meta
    • Layout
    • Composite
      • Container
      • Content

reactjs vanilla router

static 'assets/plugins/react/react.development.js'
static 'assets/plugins/react/react-dom.development.js'
static 'assets/plugins/react/react-bootstrap.min.js'
static 'assets/plugins/sweetalert2/dist/sweetalert2.min.js'
static 'assets/plugins/react/remix-run-router.min.js'
static 'assets/plugins/react/react-router.development.js'
static 'assets/plugins/react/react-router-dom.development.js'

https://www.jsdelivr.com/package/npm/@remix-run/router
https://www.jsdelivr.com/package/npm/react-router
https://www.jsdelivr.com/package/npm/react-router-dom

versionamiento de archivos estáticos en el navegador ?v=1

react router usage as library

assets/plugins/react/react.development.js
assets/plugins/react/react-dom.development.js

plugins/react/remix-run-router.min.js
plugins/react/react-router.development.js
plugins/react/react-router-dom.development.js

common data structures

common data structures: arrays, linked lists, stacks, queues, hash tables, trees, and heaps

custom state manager

https://github.com/modern-agile-team/im-sang-tae

module IEFE

The term "module IEFE" in software can refer to two different concepts: the module pattern and the Immediately Invoked Function Expression (IIFE).

Module Pattern:
The module pattern is a design pattern in software development that allows for encapsulation and organization of code. It is commonly used in JavaScript to create private and public variables and methods within a module. The module pattern helps to prevent naming conflicts and provides a way to expose only the necessary functionality to the outside world.

Immediately Invoked Function Expression (IIFE):
An IIFE is a JavaScript function that is immediately executed after it is defined. It is often used to create a private scope for variables and functions, preventing them from polluting the global scope. The IIFE is typically wrapped in parentheses and followed by an additional set of parentheses to invoke the function immediately.

unicode in js

const unicode = {
  nbsp: '\u00A0',
};

inconsistent-scope-of-use-strict-on-different-web-browsers-concerning-argumen

https://stackoverflow.com/questions/16871050/inconsistent-scope-of-use-strict-on-different-web-browsers-concerning-argumen

composite frame

module pattern

var MiModulo = (function() {
    var datosPrivados = "Estos datos son privados";

    function funcionPrivada() {
        console.log("Esta es una función privada");
    }

    // Exponer solo lo que necesitas
    return {
        datosPublicos: "Estos datos son públicos",
        funcionPublica: function() {
            console.log("Esta es una función pública");
        }
    };
})();

console.log(MiModulo.datosPublicos); // Acceso a datos públicos
MiModulo.funcionPublica(); // Llamada a función pública

standard global objects

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects

findCssRules

const keyframes = {};
const animationNames = [];


function getCssFromRule(rule, selector) {

  let css = '';

  if (rule instanceof CSSStyleRule) {
    if (selector.test(rule.selectorText)) {

      for (const pair of Array.from(rule.styleMap)) {
        if (pair[0] == 'animation-name') {
          animationNames.push(pair[1].toString());
        }
      }

      return rule.cssText;
    } else {
      return '';
    }
  }

  else if (rule instanceof CSSMediaRule) {

    let innerCss = '';

    for (const innerRule of Array.from(rule.cssRules)) {
      innerCss += getCssFromRule(innerRule, selector);
    }

    if (innerCss) {
      css += `@media ${rule.conditionText} { ${innerCss} }`;
    }

  }

  else if (rule instanceof CSSKeyframesRule) {
    keyframes[rule.name] = rule;
  }

  return css;

}

function extractCss(stylesheets, selector) {

  const _selector = new RegExp(selector);

  let css = '';

  for (const sheet of Array.from(stylesheets)) {
    try {
      for (const rule of sheet.cssRules) {
        css += getCssFromRule(rule, _selector);
      }
    } catch (err) {
      console.warn(err.message);
    }
  }

  for (const name of animationNames) {
    css += keyframes[name].cssText;
  }

  return css;

}

const selector = '.container';
const css = extractCss(document.styleSheets, selector);
console.log(css);

const blob = new Blob([css], {type: 'text/css'});
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'styles.css';
a.click();

glow-on-hover

.glow-on-hover {
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  min-height: 40px;
  min-width: 0;
  padding: 8px 16px;
  border: none;
  outline: none;
  color: #fff;
  background: #111;
  cursor: pointer;
  position: relative;
  z-index: 0;
  border-radius: 10px;
}
.glow-on-hover:before {
  content: "";
  background: linear-gradient(45deg, red, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, red);
  position: absolute;
  top: -2px;
  left: -2px;
  background-size: 400%;
  z-index: -1;
  filter: blur(5px);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  animation: glowing 20s linear infinite;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  border-radius: 10px;
}
.glow-on-hover:active:after {
  transform: scale(0.95);
}
.glow-on-hover:hover:before {
  opacity: 1;
}
.glow-on-hover:after {
  z-index: -1;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: #111;
  left: 0;
  top: 0;
  border-radius: 10px;
}
.glow-on-hover:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
@keyframes glowing {
  0% {
      background-position: 0 0;
  }
  50% {
      background-position: 400% 0;
  }
  to {
      background-position: 0 0;
  }
}

momentjs

https://momentjs.com/docs/