Kcko

// my version - inspired by https://michaelnthiessen.com/stealing-prop-types/

// iconDefault.js
export const iconDefaults = {
  size: 'medium',
  shape: 'circle',
  icon: 'default',
  animation: 'none'
};

Kcko

_

Kcko

// https://medium.com/@arnoldgunter/how-relative-colors-in-css-just-solved-one-of-the-hardest-styling-problems-24b9f5ad7b8emys

:root {
  --btn-blue: hsl(220, 100%, 50%);
  --btn-green: hsl(140, 70%, 45%);
  --btn-red: hsl(0, 80%, 55%);
  --btn-yellow: hsl(45, 100%, 50%);
}

/* Base styles for all buttons */

Kcko

// https://medium.com/@asierr/javascripts-function-prototype-tostring-just-got-useful-here-s-how-bc617fd7222c

function greet(name) {
  return `Hello, ${name}`;
}

console.log(greet.toString());

// result
"function greet(name) {\n  return `Hello, ${name}`;\n}"

Kcko

// https://blog.logrocket.com/working-with-the-javascript-reflect-api/
/*
Reflect.get() - získá hodnotu vlastnosti objektu
Reflect.set() - nastaví hodnotu vlastnosti objektu
Reflect.has() - kontroluje existenci vlastnosti (podobně jako operátor in)
Reflect.deleteProperty() - odstraní vlastnost objektu
Reflect.apply() - volá funkci s danými argumenty
Reflect.construct() - vytváří nové instance objektů (podobně jako operátor new)
Reflect.getPrototypeOf() - vrací prototyp objektu
Reflect.setPrototypeOf() - nastavuje prototyp objektu

Kcko

/* https://www.matuzo.at/blog/2025/never-lose-a-z-index-battle-again */

button.a {
  z-index: calc(infinity + 1); /* 2147483647 */
  background: green;
}

Kcko

// https://javascript.plainenglish.io/the-battle-of-isolation-proxy-vs-web-workers-vs-iframe-in-frontend-development-%EF%B8%8F-3eaeef99a11d

// 1 
const sandbox = new Proxy(window, {
  get(target, key) {
    if (key === 'document') {
      throw new Error('No access to DOM!');
    }
    return Reflect.get(target, key);
  },

Kcko

:root {
  --clr-primary: hsl(229 33% 21%);
  --clr-secondary: #302047;
  --clr-accent: hsl(21deg 85% 60%);

  --wrapper-padding-inline: 1rem;
  --wrapper-max-width: 50rem;

  --section-padding-block: 3rem;
}

Kcko

.content-grid {
  --padding-inline: 1rem;
  --content-max-width: 900px;
  --breakout-max-width: 1200px;

  --breakout-size: calc(
    (var(--breakout-max-width) - var(--content-max-width)) / 2
  );

  display: grid;

Kcko

.grid {
  --grid-max-col-count: 3;
  --grid-min-col-size: 200px;
  --grid-gap: 1rem;

  /* calculations, do not touch */
  --grid-col-size-calc: calc(
    (100% - var(--grid-gap) * var(--grid-max-col-count)) /
      var(--grid-max-col-count)
  );