/ Gists

Gists

On gists

Colorize SVG in CSS

SVG CSS trick

index.html #

<!DOCTYPE html>
<html lang="cs">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>SVG Mask Test</title>
        <style>
            .container {
                display: flex;
                gap: 20px;
                padding: 20px;
                flex-wrap: wrap;
            }

            .test-box {
                border: 1px solid #ccc;
                padding: 10px;
                text-align: center;
            }

            /* Test 1: External URL */
            .B1 {
                display: block;
                width: 100px;
                height: 100px;
                mask-image: url('stripe.svg');
                mask-position: center;
                mask-repeat: no-repeat;
                mask-size: contain;
                background: red;
            }

            /* Test 2: Inline SVG jako data URL */
            .B2 {
                display: block;
                width: 100px;
                height: 100px;
                /* https://yoksel.github.io/url-encoder/ */
                mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 184.63 236.36'%3E%3Cpath d='M172.33 0c-12.95 17.23-25.87 34.48-38.62 51.79C88.31 112.96 43.42 174.34 0 236.36h.01c49.58-59.38 95.23-122.99 142.83-183.22C156.9 35.48 170.78 17.75 184.63 0z'/%3E%3C/svg%3E");
                mask-position: center;
                mask-repeat: no-repeat;
                mask-size: contain;
                background: red;
            }

            /* Test 3: Inline SVG v HTML */
            .B3 {
                display: block;
                width: 100px;
                height: 100px;
            }

            .B3 svg {
                width: 100%;
                height: 100%;
                fill: red;
            }

            /* Test 4: Webpack prefix */
            .B4 {
                display: block;
                width: 100px;
                height: 100px;
                mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxODQuNjMgMjM2LjM2Ij48cGF0aCBkPSJNMTcyLjMzIDBjLTEyLjk1IDE3LjIzLTI1Ljg3IDM0LjQ4LTM4LjYyIDUxLjc5Qzg4LjMxIDExMi45NiA0My40MiAxNzQuMzQgMCAyMzYuMzZoLjAxYzQ5LjU4LTU5LjM4IDk1LjIzLTEyMi45OSAxNDIuODMtMTgzLjIyQzE1Ni45IDM1LjQ4IDE3MC43OCAxNy43NSAxODQuNjMgMHoiLz48L3N2Zz4=');
                mask-position: center;
                mask-repeat: no-repeat;
                mask-size: contain;
                background: red;
            }
        </style>
    </head>
    <body>
        <h1>Test SVG masek</h1>

        <div class="container">
            <div class="test-box">
                <h3>Test 1:  URL</h3>
                <div class="B1"></div>
                <p>mask-image: url("")</p>
            </div>

            <div class="test-box">
                <h3>Test 2: Data URL (bez fill)</h3>
                <div class="B2"></div>
                <p>Inline SVG jako data URL</p>
            </div>

            <div class="test-box">
                <h3>Test 3: Inline SVG</h3>
                <div class="B3">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 184.63 236.36">
                        <path d="M172.33 0c-12.95 17.23-25.87 34.48-38.62 51.79C88.31 112.96 43.42 174.34 0 236.36h.01c49.58-59.38 95.23-122.99 142.83-183.22C156.9 35.48 170.78 17.75 184.63 0z" />
                    </svg>
                </div>
                <p>SVG přímo v HTML</p>
            </div>

            <div class="test-box">
                <h3>Test 4: Base64 Data URL</h3>
                <div class="B4"></div>
                <p>Base64 encoded SVG</p>
            </div>
        </div>

        <div style="margin: 20px; padding: 20px; background: #f5f5f5">
            <h3>Debugging info:</h3>
            <p>Otevřete Developer Tools (F12) a podívejte se na Console a Network tab</p>
            <p>Pokud vidíte CORS chyby, problém je v cross-origin policy</p>
        </div>
    </body>
</html>
On gists

Css interactions

CSS CSS trick

index.html #

<!--
https://jsbin.com/tuticinojo/1/edit?html,css,output
-->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Pure CSS Interactions Demo</title>
    <style>
      body {
        font-family: sans-serif;
        padding: 2rem;
        background: #f9fafb;
        color: #111;
        line-height: 1.5;
      }

      h2 {
        margin-top: 2rem;
        border-bottom: 2px solid #eee;
        padding-bottom: 0.5rem;
      }

      /* === ACCESSIBLE FOCUS STYLE === */
      button,
      .menu-btn,
      .open-modal,
      .close,
      .accordion label {
        outline: none;
      }
      button:focus,
      .menu-btn:focus,
      .open-modal:focus,
      .close:focus,
      .accordion label:focus {
        outline: 2px solid #2563eb;
        outline-offset: 3px;
      }

      /* === TOGGLE SWITCH === */
      .switch {
        display: inline-block;
        position: relative;
        width: 50px;
        height: 25px;
      }

      .switch input {
        display: none;
      }

      .slider {
        background: #ccc;
        border-radius: 25px;
        position: absolute;
        inset: 0;
        cursor: pointer;
        transition: 0.3s;
      }

      .slider::after {
        content: "";
        width: 21px;
        height: 21px;
        background: white;
        border-radius: 50%;
        position: absolute;
        top: 2px;
        left: 2px;
        transition: 0.3s;
      }

      .switch input:checked + .slider {
        background: #4ade80;
      }

      .switch input:checked + .slider::after {
        transform: translateX(25px);
      }

      /* === DROPDOWN MENU === */
      .menu-btn {
        display: inline-block;
        margin-top: 1rem;
        cursor: pointer;
        padding: 0.5rem 1rem;
        background: #111;
        color: white;
        border-radius: 5px;
      }

      #menu-toggle {
        display: none;
      }

      .menu {
        margin-top: 0.5rem;
        background: white;
        border: 1px solid #ddd;
        padding: 0.5rem;
        border-radius: 5px;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
      }

      #menu-toggle:checked + .menu {
        max-height: 300px; /* enough space */
      }

      /* === MODAL === */
      .open-modal {
        display: inline-block;
        margin-top: 1rem;
        cursor: pointer;
        padding: 0.5rem 1rem;
        background: #2563eb;
        color: white;
        border-radius: 5px;
      }

      #modal-toggle {
        display: none;
      }

      .modal {
        position: fixed;
        inset: 0;
        display: none;
        justify-content: center;
        align-items: center;
        background: rgba(0, 0, 0, 0.6);
      }

      #modal-toggle:checked + .modal {
        display: flex;
      }

      .modal-content {
        background: white;
        padding: 2rem;
        border-radius: 10px;
        position: relative;
        max-width: 300px;
        text-align: center;
      }

      .close {
        display: inline-block;
        margin-top: 1rem;
        cursor: pointer;
        padding: 0.5rem 1rem;
        background: #ef4444;
        color: white;
        border-radius: 5px;
      }

      /* === ACCORDION === */
      .accordion label {
        display: block;
        cursor: pointer;
        padding: 0.5rem;
        background: #f3f4f6;
        margin-top: 0.5rem;
        border-radius: 5px;
      }

      .accordion input {
        display: none;
      }

      .accordion .content {
        max-height: 0;
        overflow: hidden;
        padding: 0 0.5rem;
        background: white;
        border: 1px solid #ddd;
        border-radius: 5px;
        transition: max-height 0.3s ease;
      }

      .accordion input:checked + label + .content {
        max-height: 200px;
        padding: 0.5rem;
      }
    </style>
  </head>
  <body>
    <h1>Pure CSS Interactions Demo</h1>

    <h2>1. Toggle Switch</h2>
    <label class="switch">
      <input type="checkbox" aria-label="Toggle setting" />
      <span class="slider"></span>
    </label>

    <h2>2. Dropdown Menu</h2>
    <label for="menu-toggle" class="menu-btn" role="button" aria-expanded="false" aria-controls="menu">Menu</label>
    <input type="checkbox" id="menu-toggle" />
    <ul id="menu" class="menu">
      <li>Home</li>
      <li>About</li>
      <li>Contact</li>
    </ul>

    <h2>3. Modal</h2>
    <label for="modal-toggle" class="open-modal" role="button">Open Modal</label>
    <input type="checkbox" id="modal-toggle" />
    <!-- modal closes when background clicked -->
    <label for="modal-toggle" class="modal">
      <div class="modal-content" role="dialog" aria-modal="true">
        <h3>Hello</h3>
        <p>This modal works without JS.</p>
        <label for="modal-toggle" class="close" role="button">Close</label>
      </div>
    </label>

    <h2>4. Accordion</h2>
    <div class="accordion">
      <input type="checkbox" id="q1" />
      <label for="q1" aria-controls="a1" aria-expanded="false">Question 1</label>
      <div class="content" id="a1">Answer to question 1.</div>

      <input type="checkbox" id="q2" />
      <label for="q2" aria-controls="a2" aria-expanded="false">Question 2</label>
      <div class="content" id="a2">Answer to question 2.</div>
    </div>
  </body>
</html>
On gists

CSS if

CSS CSS trick

index.html #

<!--
https://jsbin.com/kiliyineca/2/edit?html,css,output
-->



<!--  /// 1 /// -->	

<!-- .btn -->
<div class="btn" style="--status: success">Success</div>
<div class="btn" style="--status: danger">Danger</div>
<div class="btn" style="--status: warning">Warning</div>	
<div class="btn">Else</div>	
	
<!-- .cover -->	
<div class="cover" style="--priority: medium;">Iam Cover</div>
	
	
<!-- .container -->	
<div class="container">Container</div>
	
	
	
<!--  /// 2 /// -->	


<div class="card" data-status="pending">Pending Task</div>
<div class="card" data-status="complete">Completed Task</div>
<div class="card" data-status="inactive">Inactive Task</div>
On gists

Transition-behavior: allow-discrete

CSS CSS trick

example.css #

/* works in one direction, if both direction is needed, we need to use 
@starting-style for second direction, @see: https://www.youtube.com/shorts/xVt8Foa2u7I (Kevin Powell)


/* toggle - two 2 , starting-style needed */
/* https://jsbin.com/sokazavera/edit?html,css,output */
.txt {
	background-color: #eee;
	padding: 20px;
	margin-top: 15px;
	border-radius: 4px;
	border: 1px solid #ccc;
	display: none;
	opacity: 0;

	transition-property: all;
	transition-duration: 1s;
	transition-behavior: allow-discrete;
}
.txt.show {
	display: block;
	opacity: 1;
	@starting-style {
		opacity: 0;
	}
}


/* one way 
https://jsfiddle.net/oz6m4ctd/9/
*/

box {
  width: 20%;
  height: auto;
  aspect-ratio: 1/1;
  display: block;
  position: relative;
  transition: all 0.25s;
  transition-behavior: allow-discrete;
  opacity: 1;
  scale: 1;
}

.box.closed {
  display: none;
  opacity: 0;
  scale: 0;
  width: 0;
}
On gists

Reexport ES exports

JavaScript

ex.js #

// index.js
export * as MathUtils from "./math.js";
export * as StringUtils from "./string-utils.js";

// Usage:
// import { MathUtils, StringUtils } from './index.js';





// modules/index.js
export { default as Calculator } from "./calculator.js";
export { default as Logger } from "./logger.js";
export * from "./math.js";
export * from "./string-utils.js";
export { ApiClient as Client, HTTP_METHODS as Methods } from "./config.js";
On gists

ES6 dynamic import / export

•
Vue.js

ex.js #

// app.js

async function loadMathModule() {
  const mathModule = await import("./math.js");
  console.log(mathModule.add(5, 3));
}

// Or with .then()
import("./math.js")
  .then((mathModule) => {
      console.log(mathModule.PI);
  })
  .catch((error) => {
      console.error("Failed to load module:", error);
  });
On gists

4 ways to dynamically execute JavaScript code on the front end

JavaScript

HOW.JS #

// https://medium.com/@bestowensss/4-ways-to-dynamically-execute-javascript-code-on-the-front-end-01648b4f527a

// 1
/*
Synchronous execution;
The execution context is the current scope .
*/
let a = 1;
function test() {
  let a = 2;
  eval('console.log(a)'); // 2
}
test();


// 2
/*
Synchronous execution;
The execution environment is the global scope .
*/
let a = 1;
function test() {
  let a = 2;
  let fn = new Function('console.log(a)');
  fn(); // 1
}
test();


// 3
// 2
/*
Asynchronous execution;
The execution environment is the global scope .
*/
let a = 1;
function test() {
  let a = 2;
  setTimeout('console.log(a)', 1000); // 1
}
test();


//4 
/*
Synchronous execution;
The execution environment is the global scope .
*/
var a = 1;
let script = document.createElement('script');
script.textContent = 'console.log(1)';
document.body.appendChild(script); // 1
On gists

Dynamic component (h or :is with v-bind)

Vue.js

Dynamic.vue #

<!-- 1 -->
<component
    v-if="transport?.image"
    :is="typeof transport.image === 'object' ? 'aw-img' : 'img'"
    v-bind="
      typeof transport.image === 'object'
        ? { image: transport.image, size: 'eop-icon', style: 'max-width: 40px' }
        : { src: transport.image, size: 'eop-icon', style: 'max-width: 40px' }
    "
  />
  
  
  <!-- 2 h render -->
 const transportImage = computed(() => {
      if (!props.transport?.image) return null

      if (typeof props.transport.image === 'object') {
        return h(resolveComponent('aw-img'), {
          image: props.transport.image,
          size: 'eop-icon',
          style: 'max-width: 40px'
        })
      } else {
        return h('img', {
          src: props.transport.image,
          size: 'eop-icon',
          style: 'max-width: 40px'
        })
      }
    })
On gists

Token for JWT / Bearer

PHP

token-fn.php #

<?php

$currentTime = time();
$timeWindow = 500; // token expiration
$expectedToken = hash_hmac('sha256', $currentTime - ($currentTime % $timeWindow), 'OUR_ANY_SECRET');

// echo hash_equals($expectedToken, $anyTokenFromGetorPost);
On gists

V-memo

Vue.js

v-memo.js #

// https://learnvue.co/articles/v-once-v-memo

<script setup>
import { ref } from 'vue'

const subscribers = ref(4000)
const views = ref(10000)
const likes = ref(3000)
</script>
<template>
  <div>
    <div v-memo="[subscribers]">
      <p>Subscribers: {{ subscribers }}</p>
      <p>Views: {{ views }}</p>
      <p>Likes: {{ likes }}</p>
    </div>
    <button @click="subscribers++">Subscribers++</button>
    <button @click="views++">Views++</button>
    <button @click="likes++">Likes++</button>
    <div>
      <p>Current state:</p>
      <p>Subscribers: {{ subscribers }}</p>
      <p>Views: {{ views }}</p>
      <p>Likes: {{ likes }}</p>
    </div>
  </div>
</template>