• Как открыть developer tools, если правый клик отключен, а F12 переназначена?

    Vlad_IT
    @Vlad_IT
    Front-end разработчик
    sfaoxof7kgda5sq3g6ibcj3_7bq.png

    Но еще, веб-приложения не могут переопределять стандартные хуки, когда фокус находится не в области рендера браузера, а например в адресной строке. На миро если кликнуть по адресной строке браузера и нажать F12, то девтулзы открываются.
    Ответ написан
    3 комментария
  • Как сделать цвет текста, такой же как и фон?

    Vlad_IT
    @Vlad_IT Куратор тега CSS
    Front-end разработчик
    Так имеете ввиду?

    Ответ написан
    1 комментарий
  • ESLint: no-param-reassign?

    Vlad_IT
    @Vlad_IT Куратор тега JavaScript
    Front-end разработчик
    Вариантов несколько.

    1) Итерировать по currLangKeys, так получится, что вы не меняете итерируемое значение.
    2) Добавить на эту строчку // eslint-disable-next-line no-param-reassign
    3) Прописать в ignorePropertyModificationsFor название вашей переменной. Можно придумать какой-то общее название htmlElement, на которое не будет действовать это lint правило. Но это крайне неявный способ, сложно будет держать в голове как должна называться переменная, чтобы на нее не ругалось правило.

    Я за второй вариант, т.к. он явно в коде выражает, что в этой строчке автор понимает что делает. Еще стоит правда подумать над выпиливанием этого правила, если вы на это можете влиять. Оно слишком категорично, и если человек захочет так накосячить с переопределением аргумента/итерируемого массива, он просто скопирует ссылку на объект отдельной строчкой, и eslint правило не заметит подвоха. От дураков не защищает, а не дуракам лишь мешает.
    Ответ написан
    Комментировать
  • Как прокликать canvas, который находится поверх header?

    Vlad_IT
    @Vlad_IT Куратор тега CSS
    Front-end разработчик
    Если обрабатывать клики канвы никак не надо, то можно на нее повесить свойство pointer-events: none
    Ответ написан
    1 комментарий
  • Какую JS библиотеку использовать для SPA приложения где максимально разграничена логика и верстка?

    Vlad_IT
    @Vlad_IT Куратор тега HTML
    Front-end разработчик
    По своему опыту скажу, что верстать должен разработчик, если мы говорим о сложных приложениях. Компоненты, это часть архитектуры, и будут большие проблемы с переиспользованием компонентов, если компоненты будут придумывать люди, которые пишут плохую логику.

    Можно поступить так - программист декомпозирует задачу, описывает какие компоненты ему нужны на выходе, а верстальщик верстает их без логики (в storybook например).

    Но мое ИМХО - фронтендеры должны уметь хорошо верстать. Верстка это ведь не просто psd/figma to html, это еще и доступность, сложные анимации, это производительность, размер бандлов и куча всего, что нужно учитывать при разработке приложений.
    Ответ написан
    Комментировать
  • Как сделать так, чтобы стало как на картинке?

    Vlad_IT
    @Vlad_IT Куратор тега CSS
    Front-end разработчик
    Вариантов куча на самом деле https://codepen.io/VladIT4/pen/mdpYmQZ
    Ответ написан
  • Как вставить переменную c +(плюсом) между чисел?

    Vlad_IT
    @Vlad_IT Куратор тега JavaScript
    Front-end разработчик
    Самый простой и безопасный вариант, реализовать функцию calc(val1, val2, operator), которая внутри себя будет выполнять разные операции над val1 и val2 в зависимости от переданного оператора. Буквально, можно написать вот такой код
    switch(operator) {
        case '+': return val1 + val2;
        case '*': return val1 * val2;
        // ....
    }

    и использовать вот так
    getResult(str) {
          return calc(+str[0], +str[1], this.met);
    },
    Ответ написан
    1 комментарий
  • Как передать функцию в дочерний компонент?

    Vlad_IT
    @Vlad_IT
    Front-end разработчик
    Такой тип у пропсов: () => void
    А в этом и ошибка. Поправьте тип, чтобы он принимал два ваших аргумента.
    fetchData: (link: string, name: string) => void;

    UPD: У вас еще будет ругаться на тип возвращаемого значения функции. fetchData возвращает промис, а по типам у вас void. Вот так должно работать

    fetchData: (link: string, name: string) => Promise<Response>;
    Ответ написан
    4 комментария
  • Какой тип дать массиву из html элементов?

    Vlad_IT
    @Vlad_IT
    Front-end разработчик
    А почему не подошел JSX.Element[]?
    Но я обычно ставлю React.ReactNode (для массива React.ReactNode[]), т.к. нодой может быть не только JSX элемент, но и строка, null, массив и.т.д.
    Ответ написан
  • Какие типы дать при передаче ref в компонент?

    Vlad_IT
    @Vlad_IT
    Front-end разработчик
    У вас реф берется не HTML элемента внутри компонента, а реф вашего компонента NameInput, поэтому TS и ругается на типы. Свойство ref зарезервировано для указания рефа конкретного компонента, и не прокидывается вниз в пропсах. Чтобы получить реф html элемента изнутри компонента NameInput, можно воспользоваться одним из вариантов:

    1) Изменить название пропса, т.к. текущее название ref уже зарезервировано реактом для указания рефа компонента
    <NameInput refInput={this.nameInput} />
    в таком случае, внутри компонента будет доступна ссылка props.refInput.

    2) Использовать перенаправление рефа через React.forwardRef (см. в доке ниже). Я уже не помню, можно ли с ним также удобно работать в классовых компонентах, как в функциональных компонентах.

    Вот тут больше информации https://ru.reactjs.org/docs/forwarding-refs.html советую прочитать всю.
    Ответ написан
  • Как реализовать условный рендеринг в функциональном компоненте React?

    Vlad_IT
    @Vlad_IT Куратор тега JavaScript
    Front-end разработчик
    Вы можете каждый компонент закинуть в словарь вида

    const COMPONENTS = {
        enterProfile: EnterProfile,
        personalArea: PersonalArea,
        // ...
    }


    и выводить в нужном месте

    return COMPONENTS[activeItem];

    еще вашу задачу решает библиотека react-router, если делаете сложное приложение, есть смысл взглянуть.
    Ответ написан
    Комментировать
  • Как передать две функции по одному onClick()?

    Vlad_IT
    @Vlad_IT
    Front-end разработчик
    Обычно определяется хендлер события, и в нем вызываются нужные функции

    const handleClick = useCallback((ev) => { // меморизирую, т.к. обработчик передается в компонент а не HTML элемент
        props.go(ev); // более правильно конечно передавать не объект события, а конкретное значение. Функция go не должна ничего знать про событие
        // тут вызов второй функции
    }, []);
    Ответ написан
  • Дайте совет, куда и как двигаться дальше?

    Vlad_IT
    @Vlad_IT
    Front-end разработчик
    Мне кажется, хорошим вариантом будет переезд в Москву/Питер на несколько лет. После чего можно вернуться (или не вернуться), и устроиться удаленно. Без опыта сложно найти удаленную работу, т.к. от удаленщиков требуется самостоятельность, а от джуниоров такое сложно ожидать.

    Фриланс тоже неплохой вариант, если брать заказы, в которых на 80% понимаете что делать. Сделав 3-4 реальных проекта, на собеседовании будет о чем рассказать, да и вы будете лучше на фоне других джуниоров без опыта. Но на фрилансе получить заказ без опыта еще сложнее, чем оффер :) Поэтому лучше придумать себе задачу, реализовать ее и преподносить как реальные проекты.

    Возможно, дело в том, что у вас плохо оформлено резюме, но я не смог найти ваше резюме. По тексту вопроса я не понял, на каком моменте происходит отказ. Если после собеседования, просите обратную связь, пусть скажут вам, чего вам не хватает, и после заполнения пробелов проситесь еще раз на собеседование.

    Отвечайте тут на тостере на вопросы, активный профиль в профессиональных сообществах дает плюс к вашему резюме (знаю о чем говорю).
    Ответ написан
    4 комментария
  • Как скрыть верхний тулбар в сафари?

    Vlad_IT
    @Vlad_IT Куратор тега JavaScript
    Front-end разработчик
    Если нет скролла, то нереально. Тулбар скрывается только по скроллу вниз, больше никак. Надеюсь, мне тут напишут, что я ошибаюсь, но к сожалению, я уверен, что такого не будет.
    Ответ написан
  • Добрый день, почему съезжают первые два дива?

    Vlad_IT
    @Vlad_IT Куратор тега CSS
    Front-end разработчик
    vertical-align (который работает при inline-block) дефолтное значение baseline, установите в top
    vertical-align: top
    чтобы выровнить не по линии родительского элемента, а по верхнему краю
    Ответ написан
    Комментировать
  • При наведении менять картину?

    Vlad_IT
    @Vlad_IT Куратор тега CSS
    Front-end разработчик
    А если попробовать все лого через grayscale делать чб, а bloomberg и borsen через invert? Не уверен, что красиво получится, но стоит попробовать (уверен, в макетах дизайнер так и сделал). Фон лого должен быть синим как фон, синий как раз инвертируется в этот коричневый цвет
    Ответ написан
  • Как сделать такую анимацию?

    Vlad_IT
    @Vlad_IT Куратор тега CSS
    Front-end разработчик
    Крайне простая анимация, делается на чистом CSS + JS (для обработки смены слайда и последовательного включения анимации, если потребуется). В этой анимации все можно решить при помощи transform и opacity. Присмотритесь к видео (лучше скачайте его, чтобы мотать покадрово), разбейте каждый переход по пунктам. Я вижу, что фон через скейл анимируется отдельно от контента, а в контенте каждая строчка анимируется с transform: translateY(100%) в translateY(0%), последние строки еще анимируют переход opacity: 1 в opacity: 0.
    Когда слайд закрывается, весь блок с слайдом анимируется в transform: scale (какое-нибудь число больше единицы).

    Готовый код вам никто не даст, т.к. анимация слишком уникальна. Да и как правило, легче самому сделать анимацию, чем подстраивать чужую под свои нужды/

    Чтобы анимация не получилась глючной, смотрите, какие css свойства вы анимируете, сверяйте с списком https://csstriggers.com/opacity желательно, чтобы ваши свойства в основных браузерах не влияли на геометрию (пункт layout), идеально, чтобы не влияли и на отрисовку (пункт paint).
    Ответ написан
    1 комментарий
  • Как в python отобразить сайт внутри окна?

    Vlad_IT
    @Vlad_IT
    Front-end разработчик
    Стоит конкретизировать вопрос. Если вам нужно в окне вставить браузер, то гуглите по ключевому слову webview, например вот https://github.com/zserge/webview-python В PyQt должен быть виджет QWebView.
    Если хотите писать интерфейс в вебе, а логику на питоне, то посмотрите это https://pywebview.flowrl.com/ если прям все в вебе писать хотите, то вам не нужен питон, вам нужен electron
    Ответ написан
    Комментировать
  • Как использовать padding при scrol и center-выравнивании?

    Vlad_IT
    @Vlad_IT Куратор тега CSS
    Front-end разработчик
    padding не исчезает, у вас просто вертикальное выравнивание центрирует текст. Вот так проще понять https://jsfiddle.net/Vlad_IT/rm6uz1hx/ я убрал overflow: hidden/scroll и добавил margin. С вертикальным выравниваем симметричный padding ничего не дает. Уберите align-items и все будет ок https://jsfiddle.net/Vlad_IT/rm6uz1hx/2/

    suizsslbr1d4nzx3ugmpxjmk9ic.png
    Ответ написан
    2 комментария
  • Как через devtools определить какой скрипт навешивает инлайн стили?

    Vlad_IT
    @Vlad_IT Куратор тега JavaScript
    Front-end разработчик
    Можно поставить breakpoint на изменение атрибутов элемента. Но если это тильда, то там будет обфусицированный код, который сложно будет понять
    003qrsckrxzyqsswbfrflsfftfy.png
    Ответ написан
    1 комментарий