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)
  );

Kcko

<!--ErrorBoundary.vue-->
<!-- https://vueschool.io/articles/vuejs-tutorials/what-is-a-vue-js-error-boundary-component/ -->
<script setup>
import { ref, computed } from 'vue'

// create an reactive container to store the potential error
const error = ref()

// using Vue's build in lifecycle hook
// listen for errors from components passed to the default slot

Kcko

/* https://codepen.io/kevinpowell/pen/yLWNbdJ */

.overlay {
  border-image: linear-gradient(hsl(240 100% 20% / 0.6), hsl(0 100% 20% / 0.6))
    fill 1;
}

Kcko

/* https://codepen.io/kevinpowell/full/vYvEdWG */


.cluster {
  outline: 5px solid hotpink;
  padding: 1rem;

  display: flex;
  gap: 1rem;
  flex-wrap: wrap;

Kcko

// https://medium.com/@hxu0407/master-these-8-promise-concurrency-control-techniques-to-significantly-improve-performance-5a1c199b6b3c


// 1. Promise.all: Execute in Parallel and Return Results Together
const promise1 = Promise.resolve(1);
const promise2 = Promise.resolve(2);
const promise3 = Promise.resolve(3);
Promise.all([promise1, promise2, promise3])
  .then(results => {
    console.log(results); // Output: [1, 2, 3]

Kcko

/*
onScopeDispose - Podobně jako onWatcherCleanup, ale obecnější. 
Zavolá se, když je aktuální reaktivní efektový scope (effect scope) ukončen. 
Je to užitečné pro čištění zdrojů v jakémkoliv reaktivním kontextu:
*/

// 1
import { onScopeDispose, effectScope } from 'vue'

// Vytvoření izolovaného scope