Skip to content

Instantly share code, notes, and snippets.

Avatar
🙂
Writing code

Yair Even Or yairEO

🙂
Writing code
View GitHub Profile
@yairEO
yairEO / for.async.js
Created Mar 19, 2022
Async iterators
View for.async.js
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
yairEO / conditional-styles.scss
Created Feb 5, 2022
Toggle CSS block with a single variable
View conditional-styles.scss
// 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% {
View math.css
/***** 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
yairEO / input.scss
Created Jan 10, 2022
Generated by SassMeister.com.
View input.scss
div {
transform: translate(100px) var(--transform-y, );
}
@yairEO
yairEO / input.scss
Last active Jan 10, 2022
Generated by SassMeister.com.
View input.scss
// 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
yairEO / removeStyleProp.js
Last active Dec 22, 2021
Remove a single property from DOM element "style" attribute
View removeStyleProp.js
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
yairEO / concatWithoutDups.js
Created Nov 6, 2021
Concatenates N arrays without dupplications
View concatWithoutDups.js
/**
* 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
yairEO / sb.mdx.file-code.js
Last active Jun 8, 2021
storybook MDX - show code block of imported file
View sb.mdx.file-code.js
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
yairEO / position.js
Created May 27, 2021
Positions a DOM element next to a certain position
View position.js
/**
* 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
yairEO / Math.clamp.js
Created Mar 4, 2021
javascript Math.clamp polyfill
View Math.clamp.js
// usage: Math.clamp(min, number, max)
Math.clamp = Math.clamp || ((a,b,c) => Math.max(a,Math.min(b,c)))