yairEO

const delay = ms => new Promise(resolve => setTimeout(resolve, ms))
const inc = async i => (await delay(500), ++i)

const foo = async () => {
  for(let i = 1; i <= 5; i = await inc(i)) 
    console.log(i) // prints 1, 2, 3, 4, 5 with a delay 
}

foo()

yairEO

// https://css-tricks.com/css-switch-case-conditions
// simplified version of my method:

.foo {
    --feature: 1; // 1 is "on", 0 is "off"
  
    animation: foo_styles 1s calc(-1s * (var(--feature) - 1)) paused;

    @keyframes foo_styles {
        0% {

yairEO

/***** ceil ******/

/* For a value between 0 - 1, where 1 is the maximum possible */
--ceil: clamp(0, calc((1 - var(--value)) * 100), 1);


/***** floor ******/

/* For a value between 0 - 1, where 1 is the maximum possible, use a value just a tiny bit below the maximum for the 
 math to work, so the output will be either positive or negative when magnified by a factor of 999999*/

yairEO

div {
    transform: translate(100px) var(--transform-y, );
}

yairEO

// styles of an external object which is placed
// next to a node from the outside



.diagram-node__satelite {
    transform: translate(100px) var(--transform-y, );
}

yairEO

const removeStyleProp = (elm, prop) => 
  elm.style.cssText = elm.style.cssText  // cssText automatically (luckily) adds spaces between declarations
    .split('; ')
    .filter(p => !p.startsWith(prop) )
    .join(';');

yairEO

/**
 * Concatenates N arrays without dups.
 * If an array's item is an Object, compare by `value`
 * @param {*} k
 */
export const concatWithoutDups = (...key) => {
    const result = (...args) => {
        const newArr = [],
            existingObj = {};

yairEO

import { Meta, Description, Props, Source, Canvas } from '@storybook/addon-docs/blocks';
import Comp from './Comp';
import CompRaw from '!raw-loader!./Comp.jsx';
import readme from '!raw-loader!./readme.md';

<Meta
  title="Comp/MDX"
  component={Comp}
/>

yairEO

/**
 * positions a DOM element next to a certain position
 * @param {HTMLElement} elm DOM element node
 * @param {Object} pos x,y which should probably be within the viewport visible area
 */
export default (elm, pos) => {
  const overflowOffset = 20;

  const pageSize = {
    w: document.documentElement.clientWidth,

yairEO

// usage: Math.clamp(min, number, max)
Math.clamp = Math.clamp || ((a,b,c) => Math.max(a,Math.min(b,c)))