Skip to content

Instantly share code, notes, and snippets.

View maradondt's full-sized avatar

VladimirZhigalev maradondt

View GitHub Profile
.visually-hidden {
position: absolute;
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
margin: -1px;
}
.position-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* JS */
/* position: 'absolute',
top: '50%',
left: '50%',
@maradondt
maradondt / addVariablesToCSSfromJS.ts
Created April 13, 2022 10:14
added css vars from js
const addStyles = (style: HTMLStyleElement) => {
document.querySelector('head')?.appendChild(style);
};
const createStyleVariablesFromObject = (prefix: string, vars: { [k: string]: string }) => {
const style = document.createElement('style');
style.textContent = `
:root {
${Object.entries(vars)
export const separateFlie = (file: File, batchSizeMb?: number): Blob[] => {
const batchSizeBytes = (batchSizeMb || 50) * Math.pow(10, 6);
const sliceCount = file.size / batchSizeBytes;
const result: Blob[] = [];
let start = 0;
let end = batchSizeBytes;
for (let i = 0; i <= sliceCount; i++) {
const slice = file.slice(start, end);
@maradondt
maradondt / declOfNum.ts
Created June 16, 2022 10:40
склонение
/**
* @description
* https://realadmin.ru/coding/sklonenie-na-javascript.html
* @param n number
* @param text_forms string[]
* @returns string
*
* @example
* ```js
* declOfNum(1, ['минута', 'минуты', 'минут']); // вернёт — минута
@maradondt
maradondt / useDragScrolling.ts
Last active May 19, 2023 09:11
added drag scroll to an item
import { useEffect } from 'react';
import { addStylesToHtml } from 'shared/ui/addStyles';
const createGrabbingStyles = () => {
const style = document.createElement('style');
style.textContent = `
.useDragScrolling.grabbing {
scroll-behavior: auto;
cursor: grabbing;
}
@maradondt
maradondt / colors.ts
Last active November 22, 2022 08:46
generate gray colors
export interface Color {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
@maradondt
maradondt / time-ago.ts
Last active December 8, 2022 10:37
luxon time ago string
import { DateTime } from 'luxon';
const units: Intl.RelativeTimeFormatUnit[] = ['year', 'month', 'week', 'day', 'hour', 'minute', 'second'];
/**
* https://github.com/moment/luxon/issues/274#issuecomment-649347238
*
* @param dateTime DateTime.fromISO(isoString)
* @returns string
*
@maradondt
maradondt / listToTree.ts
Created May 3, 2023 12:44
create a tree from list
type BaseObj = {
id: string;
parentId: string | null;
};
type Result<T extends BaseObj> = T & {
children: Result<T>[];
};
export const listToTree = (
arr: BaseObj[],
@maradondt
maradondt / withContextMenu.tsx
Last active November 28, 2024 08:01
react HOC withContextMenu returns the same component which accept onContextMenu prop that fixed bug with context menu on safari on Iphone
// reference and demo https://github.com/facebook/react/issues/17596#issuecomment-565524946
import React, { ComponentProps, PropsWithChildren } from 'react';
const longPressDuration = 610;
export default class ContextMenuHandler {
private callback: (e: any) => void;
private longPressCountdown: NodeJS.Timeout | null;
private shouldStopPropagation: boolean;