Kcko

// 1 Když neobalíš objekt do reactive():

const filtersStorage = {
  priceValue: computed({
    get: () => selectedFilters.value.priceValue,
    set: v => selectedFilters.value.priceValue = +v
  })
}

// Pak filtersStorage.priceValue je přímo ComputedRef objekt. A ComputedRef se chová jako ref - musíš použít .value pro přístup k hodnotě:

Kcko

const eventHandler = e => {
  const keyActions = {
    Escape: closeGallery,
    ArrowLeft: prevMedia,
    ArrowRight: nextMedia
  }
  if (e.key === 'ArrowLeft') {
    prevMedia()
  }
  if (e.key === 'ArrowRight') {

Kcko

<template>
  <div>
    <ul>
      <li v-for="task in tasks" :key="task.id" :class="{ 'task-overdue': isOverdue(task), 'task-completed': task.completed }">
        {{ task.name }}
      </li>
    </ul>
  </div>
</template>

Kcko

_

Kcko

Vývoj software je často o hledání správné rovnováhy mezi:
čistotou kódu vs. praktičností
přehledností vs. flexibilitou
striktními pravidly vs. pragmatickým přístupem
A jak jste správně poznamenal - je to neustálý proces učení a přizpůsobování. Co fungovalo včera, nemusí být nejlepší řešení zítra. A to je v pořádku!
Důležité je:
Dělat informovaná rozhodnutí
Nebát se změny, když je potřeba
Učit se z předchozích zkušeností
Zachovat si zdravý rozum a neupnout se na jeden přístup

Kcko

<!--
The inert attribute completely disables interactivity.
Screen readers and keyboard navigation will ignore it.
It’s a cleaner, more semantic approach to managing hidden elements.
-->
<nav inert>
 <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</nav>

Kcko

<!--
https://codepen.io/kevinpowell/pen/jOQeqZJ
-->

<div class="flexi-grid">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>

Kcko

/*
  https://javascript.plainenglish.io/3-powerful-ways-to-share-data-across-browser-tabs-in-javascript-a6a98dffa1a3
*/

// 1. local storage
// Sender
localStorage.setItem('sharedData', JSON.stringify({
  message: 'Hello from Tab1!',
  timestamp: Date.now()
}));

Kcko

// https://devsmitra.medium.com/javascript-error-handling-just-got-a-whole-lot-easier-meet-the-safe-assignment-operator-c372d892d4ed

// without
async function getData() {
  try {
    const response = await fetch("https://api.example.com/data");
    const json = await response.json();
    return validationSchema.parse(json);
  } catch (error) {
    handleError(error);

Kcko

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

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