Ответы, понравившиеся пользователю Михаил

Почему не работает проверка NAN?

Михаил Ливач @Mausglov

В Javascript NaN != NaN . Довольно логичный выбор: если undefined - это состояние, то NaN - признак отсутствия характеристики. Я - NaN , Вы - NaN , но Вы - не я.

Ответ написан 13 апр.

Комментировать

Как правильно позиционировать тултип?

Антон Горецкий @rqdkmndh

Web-разработчик

Ключ к эффективному алгоритму здесь – определить, достаточно ли места по каждой из четырех сторон (сверху, снизу, слева, справа) от активатора, чтобы тултип вместился без выхода за пределы экрана.

Вот базовая идея алгоритма:

1. Определить размеры и положение элемента-активатора, используя getBoundingClientRect.
2. Определить размер окна браузера.
3. Рассчитать доступное пространство в каждом из направлений: сверху, снизу, слева, и справа от элемента.
4. Используя размеры тултипа, определить может ли он поместиться в каждом из этих направлений.
5. Если тултип не помещается в первоначальном направлении:
- Испытать альтернативные позиции на основе доступного пространства и размеров тултипа.
- Выбрать позицию, которая наилучшим образом подходит и не заходит за пределы экрана.
В реальной реализации вам нужно будет также учесть размеры самого тултипа, чтобы точно определить, поместится ли он в доступном пространстве, и возможно, предусмотреть отступы от краев экрана.

Также важно обеспечить динамическую перепроверку позиции тултипа при событиях, которые могут изменить положение или размер активатора, например, при изменении размера окна браузера (event resize) или прокрутке страницы (event scroll).

И наконец, поскольку это может быть ресурсоемкий процесс, обдумайте использование debounce функции для событий, вызываемых слишком часто.

Ответ написан 12 апр.

1 комментарий

Как правильно позиционировать тултип?

VoidVolker @VoidVolker Куратор тега JavaScript

Dark side eye. А у нас печеньки! А у вас?

Примерно вот так:

Парковка элементов относительно друг друга через точки

    Point: 1|2|3|4
       topLeft     topRight
              1___2
              |   |
              |___|
              4   3
    bottomLeft     bottomRight

    Edges        1
               _____
              |     |
           4  |     |  2
              |_____|

                 3

    Point format:
      [targetPoint, itemPoint]

    Docking variants:
                [1,3]      [2,4]
                  __        __
    item   ->    |_3|______|4_|
    target ->       |1    2|
                  __|4____3|__
                 |_2|      |1_|

                [4,2]      [3,1]

        __
       |4_|___ __
     __|1    2|1_|
    |_3|4____3|
           |_2|

            __
     __ ___|_3|
    |_2|1    2|__
       |4____3|4_|
       |1_|

       1_________2
       |1_|   |_2|
       |__     __|
       |4_|___|_3|
       4         3

Я уже реализовывал кучу лет назад данный алгоритм для парковки элементов относительно друг друга с учетом всех важных факторов. И реализация на шарпе получилась объемом в 800 сотен строчек кода с комментариями, при этом сам алгоритм выбора точки - монстр в более чем 300 строчек кода и сплошной набор из пачки ифов глубиной до 6 и до 12 штук подряд, а так же набором свитчей тоже в количестве шести штук и глубиной до двух (местами внутри ифов). И это еще с учетом сокращений за счет некоторых дополнительных математических и логических вычислений. (Откопал еще и JS версию).
Если кому интересно - пишите, могу поделиться кодом.

Ответ написан 12 апр.

1 комментарий

Как проинспектировать динамически добавляемый элемент?

antonwx @antonwx

Откройте консоль разработчика, начните перетаскивать элемент, и когда появится галочка, нажмите F8. Произойдёт "заморозка" состояния страницы. И теперь можете инспектировать.

Ответ написан более трёх лет назад

1 комментарий

Как обратиться к соседним селекторам?

Виталий Першин @Get-Web Куратор тега CSS

Front-End Developer

Можно проще:

Ответ написан 12 февр.

3 комментария

Как перегрузить React.ForwardRefRenderFunction компонент?

WbICHA @WblCHA

https://www.typescriptlang.org/play?#code/JYWwDg9g...

spoiler

type QQQ = {
  a?: never;
  b: string;
  c: string;
};
type WWW = {
  a: string;
  b: string;
  d: string;
};

type ForwardedRefWithOverride<T extends [object, HTMLElement]> = UnionToIntersection<
  T extends T ? ForwardRefExoticComponent<PropsWithoutRef<T[0]> & RefAttributes<T[1]>> : never
>;

const forwardRefWithOverrides = <T extends [object, HTMLElement][]>(
  render: ForwardRefRenderFunction<T[number][1], T[number][0]>,
) => {
  return forwardRef(render) as ForwardedRefWithOverride<T[number]>;
};

export const Ccc = forwardRefWithOverrides<[[QQQ, HTMLButtonElement], [WWW, HTMLLinkElement]]>((props, ref) => {
  if (typeof props.a === 'string') {
    const { a, b, d } = props;

    return (
      <>
        <link ref={ref as ForwardedRef<HTMLLinkElement>} />

        {a}
        {b}
        {d}
      </>
    );
  }
  {
    const { a, b, c } = props;

    return (
      <button ref={ref as ForwardedRef<HTMLButtonElement>} type="button">
        {a}
        {b}
        {c}
      </button>
    );
  }
});

Ccc.displayName = 'Ccc';

export const Vvv = () => {
  const ref1 = useRef<HTMLButtonElement>(null);
  const ref2 = useRef<HTMLLinkElement>(null);

  return (
    <>
      <Ccc ref={ref1} b="asd" c="asd" />
      <Ccc ref={ref2} a="asd" b="asd" d="asd" />

      {/* @ts-expect-error - c missed */}
      <Ccc b="asd" d="asd" />
      {/* @ts-expect-error - d missed, extra c */}
      <Ccc a="asd" b="asd" c="asd" />
      {/* @ts-expect-error - extra c */}
      <Ccc a="asd" b="asd" c="asd" d="asd" />
      {/* @ts-expect-error - wrong ref */}
      <Ccc ref={ref2} b="asd" c="asd" />
    </>
  );
};

Ответ написан 18 дек. 2023

Комментировать

Как сделать SVG чётче?

Максим Морев @SeaInside

15 лет пилю все эти штуки

Нарисовать надо по пиксельной сетке, иллюстрирую:

Если дизайнер изначально об этом не думал, когда рисовал (точки поставлены наобум, либо используется не целочисленная величина обводки) - вы с этим ничего не сделаете.

На экранах повышенной плотности, к слову, эффект менее заметен (что не особо радует всех остальных).

Ответ написан более года назад

Комментировать

Как правильно называть переменные в CSS?

AngReload @AngReload

Кратко о себе

Можно подглядеть у пикабу, на сайте можно менять светлую и тёмную тему и основной цвет. Там хороший код, и названия, которые дали переменным отлично отражают их назначение.

Длиннокод

:root {
  --color--bg: #fff;
  --color--bg_80: rgba(255, 255, 255, 0.8);
  --color--bg_90: rgba(255, 255, 255, 0.9);
  --color--bg_contrast: #000;
  --color--bg_contrast-50: rgba(0, 0, 0, 0.5);
  --color--bg_contrast-60: rgba(0, 0, 0, 0.6);
  --color--color: #000;
  --color--green: #8ac858;
  --color--red: #FD5D47;
  --color--yellow: #ffc800;
  --color--gray: #cacaca;
  --color--gray_light: #e8e8e8;
  --color--gray_dark: #adadad;
  --color--text: #212121;
  --color--secondary: #4d4d4d;
  --color--caption: #757575;
  --color--text_green: #6c9b45;
  --color--text_link: #6c9b45;
  --color--text_link: var(--color--text_green);
  --color--text_red: #f75c48;
  --color--text_contrast: #fff;
  --color--text_search: rgba(255, 200, 0, 0.3);
  --color--selection: #c5e4ac;
  --color--tool: #c2c2c2;
  --color--icon: #BDBDBF;
  --color--social_vk: #5b7aa8;
  --color--social_facebook: #4867aa;
  --color--social_twitter: #41abe1;
  --color--social_google: #dd4b38;
  --color--app__bg: #f4f4f4;
  --color--app__text: #212121;
  --color--section__bg: #fff;
  --color--section_gray__bg: #f9f9fb;
  --color--section_success__bg: #8ac858;
  --color--section_success__bg: var(--color--green);
  --color--section_success__text: #fff;
  --color--section_danger__bg: #FD5D47;
  --color--section_danger__bg: var(--color--red);
  --color--section_danger__text: #fff;
  --color--section_warning__bg: rgba(255, 200, 0, 0.05);
  --color--section_warning__border: #ffc800;
  --color--section_warning__text: #212121;
  --color--toast_default__bg: #6ea046;
  --color--toast_default__text: #fff;
  --color--toast_danger__bg: #FD5D47;
  --color--toast_danger__bg: var(--color--red);
  --color--toast_danger__text: #fff;
  --color--toast_warning__bg: #ffc800;
  --color--toast_warning__text: #5e3a00;
  --color--popup_shadow-arrow: rgba(0, 0, 0, 0.08);
  --color--popup_default__bg: #fff;
  --color--popup_default__text: #212121;
  --color--popup_gray__bg: #f9f9fb;
  --color--popup_gray__text: #212121;
  --color--popup_danger__bg: #FD5D47;
  --color--popup_danger__bg: var(--color--red);
  --color--popup_danger__text: #fff;
  --color--popup_warning__bg: #212121;
  --color--popup_warning__text: #fff;
  --color--tag__text: #757575;
  --color--tag_highlight__text: #4d4d4d;
  --color--tag-focus__text: #212121;
  --color--header__text: #d8ffbc;
  --color--header_active__text: #fff;
  --color--header_dark__text: rgba(255, 255, 255, 0.7);
  --color--header_icon__bg: rgba(0, 0, 0, 0.05);
  --color--header__bg: #8ac858;
  --color--header__bg: var(--color--green);
  --color--footer__text: #212121;
  --color--footer__bg: #f0f0f0;
  --color--award__bg: #f1f1f1;
  --color--award__bg_hover: #d9d9d9;
  --color--menu-item-current__text: #6c9b45;
  --color--menu-item-current__text: var(--color--text_green);
  --color--menu-item-current__bg: #8ac858;
  --color--menu-item-current__bg: var(--color--green);
  --color--comments__left-border: #efefef;
  --color--comments__image: #fff;
  --color--input__bg: #fff;
  --color--input__text: #212121;
  --color--input-placeholder__text: #757575;
  --color--input-focus__border: #8ac858;
  --color--input-focus__border: var(--color--green);
  --color--input_complexity__bg: #e8e8e8;
  --color--input_checkbox: #adadad;
  --color--bell_yellow: #ffc800;
  --color--border: #e9e9e9;
  --color--border_success: #8ac858;
  --color--border_success: var(--color--green);
  --color--border_error: #FD5D47;
  --color--border_error: var(--color--red);
  --color--border_upload: rgba(233, 233, 233, 0.4);
  --color--highlight_yellow__bg: rgba(255, 200, 0, 0.1);
  --color--highlight_yellow__bg_40: rgba(255, 200, 0, 0.4);
  --color--highlight_red__bg: rgba(253, 93, 71, 0.1);
  --color--highlight_gray__bg: rgba(233, 233, 233, 0.4);
  --color--highlight_green__bg: rgba(138, 200, 88, 0.1);
  --color--shadow: rgba(0, 0, 0, 0.16);
  --color--button__text_contrast: #fff;
  --color--button__stroke: rgba(88, 88, 88, 0.2);
  --color--button__stroke_contrast: rgba(255, 255, 255, 0.2);
  --color--button_default__bg: #e9e9e9;
  --color--button_default__text: #585858;
  --color--button_success__bg: #8ac858;
  --color--button_success__bg: var(--color--green);
  --color--button_danger__bg: #FD5D47;
  --color--button_danger__bg: var(--color--red);
  --color--button_warning__bg: #ffc800;
  --color--button_warning__bg: var(--color--yellow);
  --color--button_dark__bg: #4d4d4d;
  --color--button_dark__bg: var(--color--secondary);
  --color--button-small_success__bg: #83be54;
  --color--button-small_default__bg: #dddddd;
  --color--button-small_default__text: #585858;
  --color--slider__quantity: rgba(138, 200, 88, 0.7);
  --color--progress-circle__storke: rgba(117, 117, 117, 0.2);
  --color--editor__bg: rgba(0, 0, 0, 0.7);
  --color--editor__text: #fff;
  --color--editor__button_hover: rgba(0, 0, 0, 0.4);
  --color--editor__button_active: rgba(0, 0, 0, 0.4);
  --color--player__play: rgba(0, 0, 0, 0.1);
  --color--player__logo: rgba(255, 255, 255, 0.5);
  --color--code__bg: #f9f9fb
}

html[data-theme-dark] {
  --color--bg: #22272B;
  --color--bg_80: rgba(34, 39, 43, 0.8);
  --color--bg_90: rgba(34, 39, 43, 0.9);
  --color--bg_contrast: #fff;
  --color--bg_contrast-50: rgba(34, 39, 43, 0.5);
  --color--bg_contrast-60: rgba(34, 39, 43, 0.6);
  --color--color: #fff;
  --color--green: #567842;
  --color--red: #FD5D47;
  --color--yellow: #917815;
  --color--gray: #4e5255;
  --color--gray_light: #65686b;
  --color--gray_dark: #393d41;
  --color--text: #bfbfbf;
  --color--secondary: #a6a6a6;
  --color--caption: #7d7d7d;
  --color--text_green: #6c9b45;
  --color--text_red: #f75c48;
  --color--text_contrast: #fff;
  --color--text_search: rgba(145, 120, 21, 0.3);
  --color--selection: rgba(69, 96, 53, 0.99);
  --color--tool: #4e5255;
  --color--icon: #4e5255;
  --color--social_vk: #5b7aa8;
  --color--social_facebook: #4867aa;
  --color--social_twitter: #41abe1;
  --color--social_google: #dd4b38;
  --color--app__bg: #171c20;
  --color--app__text: #bfbfbf;
  --color--section__bg: #22272B;
  --color--section_gray__bg: #1a1e21;
  --color--section_success__text: #fff;
  --color--section_danger__bg: #FD5D47;
  --color--section_danger__text: #fff;
  --color--section_warning__bg: rgba(145, 120, 21, 0.05);
  --color--section_warning__border: #917815;
  --color--section_warning__text: #bfbfbf;
  --color--toast_default__bg: #8ac858;
  --color--toast_default__text: #fff;
  --color--toast_danger__bg: #FD5D47;
  --color--toast_danger__text: #fff;
  --color--toast_warning__bg: #fed45b;
  --color--toast_warning__text: #5e3a00;
  --color--popup_shadow-arrow: rgba(0, 0, 0, 0.08);
  --color--popup_default__bg: #1f2327;
  --color--popup_default__text: #bfbfbf;
  --color--popup_gray__bg: #171b1e;
  --color--popup_gray__text: #bfbfbf;
  --color--popup_danger__bg: #FD5D47;
  --color--popup_danger__text: #fff;
  --color--popup_warning__bg: #181b1e;
  --color--popup_warning__text: #bfbfbf;
  --color--tag__text: #7d7d7d;
  --color--tag_highlight__text: #a6a6a6;
  --color--tag-focus__text: #bfbfbf;
  --color--header__text: rgba(255, 255, 255, 0.7);
  --color--header_active__text: #fff;
  --color--header_dark__text: rgba(255, 255, 255, 0.7);
  --color--header_icon__bg: rgba(255, 255, 255, 0.05);
  --color--header__bg: #1f2327;
  --color--footer__text: #bfbfbf;
  --color--footer__bg: #0f0f0f;
  --color--award__bg: #4e5255;
  --color--award__bg_hover: #606366;
  --color--comments__left-border: #393d41;
  --color--input__bg: #22272B;
  --color--input__text: #bfbfbf;
  --color--input-placeholder__text: #7d7d7d;
  --color--input-focus__border: #8ac858;
  --color--input-focus__border: var(--color--green);
  --color--input_complexity__bg: #65686b;
  --color--input_checkbox: #393d41;
  --color--bell_yellow: #ffc800;
  --color--border: #393d41;
  --color--border_error: #FD5D47;
  --color--border_upload: rgba(57, 61, 65, 0.4);
  --color--highlight_yellow__bg: rgba(145, 120, 21, 0.1);
  --color--highlight_yellow__bg_40: rgba(145, 120, 21, 0.4);
  --color--highlight_red__bg: rgba(253, 93, 71, 0.1);
  --color--highlight_gray__bg: rgba(255, 255, 255, 0.1);
  --color--highlight_green__bg: rgba(86, 120, 66, 0.1);
  --color--shadow: rgba(0, 0, 0, 0.46);
  --color--button__text_contrast: #fff;
  --color--button__stroke: rgba(110, 110, 110, 0.2);
  --color--button__stroke_contrast: rgba(255, 255, 255, 0.2);
  --color--button_default__bg: #2d3236;
  --color--button_default__text: #6e6e6e;
  --color--button_dark__bg: #0f0f0f;
  --color--button-small_default__bg: #2b3033;
  --color--button-small_default__text: #6e6e6e;
  --color--button-small_success__bg: #52723f;
  --color--slider__quantity: #3c542e;
  --color--progress-circle__storke: rgba(125, 125, 125, 0.2);
  --color--editor__bg: rgba(34, 39, 43, 0.9);
  --color--editor__text: #fff;
  --color--editor__button_hover: rgba(255, 255, 255, 0.2);
  --color--editor__button_active: rgba(255, 255, 255, 0.4);
  --color--player__play: rgba(34, 39, 43, 0.1);
  --color--player__logo: rgba(255, 255, 255, 0.5)
}

Ответ написан более трёх лет назад

Комментировать

JS. Как конвертировать данную строку в массив?

rPman @rPman

JSON.parse()

Ответ написан более года назад

Комментировать

Почему этот код ошибки Firebase отсутствует в перечне ошибок?

AlexVWill @AlexVWill

Инструкции не всегда успевают за обновлениями. Или просто пропустили.
А в чем проблема то? "invalid-login-credentials" по моему достаточно понятно исходя просто из кода ошибки

Ответ написан более года назад

1 комментарий

Получаю в ответе NaN, хочу не Nan. Как исправить?

Алексей Уколов @alexey-m-ukolov Куратор тега JavaScript

Первый и самый важный шаг вы сделали — идите дальше. Смотрите что у вас в document.getElementById('id').value, потом что в document.getElementById('id'), если в value пусто.
Это называется "отладка" или "дебаг" и это примерно половина работы программиста.

выводит новую форму

Вангую, что в итоге у вас куча одинаковых форм и, соответственно, куча инпутов с id="id", что, естественно, недопустимо.

Ответ написан более года назад

1 комментарий

Как сверстать не стандартный блок с внутренним углом?

SymphoGraph @Lastor

В чем сила, брат? В ньютонах.

Ответ написан более года назад

1 комментарий

Как заставить функцию дождаться выполнения промиса?

Rsa97 @Rsa97

Для правильного вопроса надо знать половину ответа

async function light_q() {
  const res = await new Promise((resolve, reject) => {
    resolve(3);
  });
  console.log(res);
  return res;
}

const result = await light_q();

Ответ написан более года назад

4 комментария

Войдите на сайт