Ответы пользователя по тегу JavaScript
  • Как лучше сделать?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Решения:
    1. Грубо и тупо — сохранить идентификатор блоков, соотнести с навигацией и при клике по навигации врубать display:none всем, кроме активного.
    2. Разбить информацию логически (контент) и отрисовывать тогда, когда выбран пункт навигации (createEleemnt и т.д.)
    3. Актуальный — пункт два в реализации на каком-нибудь фреймворке или библиотеке (React, Vue).
    Ответ написан
  • Как сделать такой элемент?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Дешево и сердито — див с фоном + псевдоэлемент, который тоже имеет фон, наехать им с помощью позиционирования на сам див. Тут я бы обошелся без бордеров, т.к. стрелку тогда надо филигранно позиционировать.

    Компонент здорового человека — SVG.
    Ответ написан
    Комментировать
  • Компонент теряет scrollY после ререндера?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега JavaScript
    Руководитель frontend направления, предприниматель
    Это не базовое поведение, ищи функцию в руте или миддлваре, которая это реализует.
    Ответ написан
    Комментировать
  • Как исправить ошибку "Cannot read properties of undefined"?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега JavaScript
    Руководитель frontend направления, предприниматель
    Задай параметры функции (неплохо бы ещё прикрутить TS к проекту), если актуально, задай базовые значения или тернарники на присваивание.
    Ответ написан
    Комментировать
  • Как получить доступ к созданным элементам?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега JavaScript
    Руководитель frontend направления, предприниматель
    Можно вешать слушатель прямо на создаваемый узел, или пойти в сторону погружения событий.
    Ответ написан
    Комментировать
  • Как защитить роуты?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега JavaScript
    Руководитель frontend направления, предприниматель
    Проще воспользоваться гуглом и найти рецепт роута. Его суть заключается в оборачивании всех роутов в функцию, которая проверяет либо авторизацию, либо принадлежность к роли. Это то, что по сути уже есть, но не хватает из классического рецепта редиректа, если доступа нет и пути, который охватывает все, что не входит в перечисленные, обозначается он символм «*».
    Ответ написан
  • Как сделать, чтобы цифры вводились по пробелу?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега JavaScript
    Руководитель frontend направления, предприниматель
    Дешево и сердито — сохраняй значения в переменную, например строку, без пробелов (можно использовать скрытый input), а показывай в стилизованном label по шаблону, подойдут регулярки, да и вывод строки массивом (посимвольно) тоже сойдет. Останется только решить проблему выделения и удаления. В последнем случае могут помочь JS-фреймворки, которые из коробки оперируют динамическими данными.
    Ответ написан
    Комментировать
  • Как выводить контент согласно active class?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега JavaScript
    Руководитель frontend направления, предприниматель
    Обычно такое реализуют в рамках маршрутизации либо бэком, либо на JS, в идеале на фреймворке.

    Чтобы получить возможность во вьюхе менять контент можно использовать гриды, для обеспечения плоской структуры, будет проще управлять данными в любом исполнении, от шаблонизатора под бэком, так и на чистом JS.

    Используя ванильку (JS) можно передать в data-атрибутах ID-шники блоков, которые должны появляться снизу и справа от сайдбара и активировать их, скрывая остальные, во время нажатия. Но это на уровне костыльного решения, табуляция выглядит и реализуется проще.

    Чтобы имитировать навигацию, т.е. чтобы можно было передать кому-то URL на конкретный таб, ты можешь использовать ссылочные якоря, опираясь на которые (разбирая ссылку, историю) открывать тот или иной контент впридачу к описанному мной выше.
    Ответ написан
    1 комментарий
  • Как реализовать слайдер?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Чтобы элементы всегда были по обе стороны, их можно банально переставлять\клонировать и крутить. Дальше уже вопрос позиционирования. Так делают в принципе все карусели.
    Ответ написан
    Комментировать
  • Как правильно вызывать функцию?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега JavaScript
    Руководитель frontend направления, предприниматель
    Если ты пишешь на ванильке и не собираешь билды для разных страниц, либо у тебя на одной сборке может как присутствовать, так и отсутствовать нужный элемент, то подход нормальный.

    Но вообще я бы рекомендовал либо отдельные сборки, либо фреймворки, в которых есть, как ленивая подгрузка, так и из коробки отрисовка и удаление элементов.
    Ответ написан
    Комментировать
  • Получить длину массива JSON?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега JavaScript
    Руководитель frontend направления, предприниматель
    1. Посмотри в ответе сервера, есть ли уже это значение.
    2. Если нет, то запроси бэкенда на дополнение этого значения.
    3. Если хочешь упороться, то можешь пройтись скриптом по всем страницам, чтобы получить сумму. Подойдет, если вывести значение ну очень надо, а бек добавят нескоро, но есть шанс повалить страницу запросами.
    Ответ написан
    Комментировать
  • Как сделать калькулятор дохода на сайт?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега JavaScript
    Руководитель frontend направления, предприниматель
    Дешево, просто и сердито — использовать библиотеки и фреймворки, например Vue или React, которые уже из коробки слушают изменяемые значения и могут рисовать новые.

    Лучше для получения понимания, как это работает — использовать слушатели с триггерами перерисовки на VanillaJS.
    Ответ написан
    Комментировать
  • Как правильно вызвать функцию в js?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега JavaScript
    Руководитель frontend направления, предприниматель
    Когда ты вызываешь функцию по событию, в неё «вкладывается» значение с событием. Которое ты и превентишь. Если хочешь вызывать напрямую, то либо убери отключение дефолтного экшна, либо поставь проверку на его наличие.
    Ответ написан
  • Как сохранить json в переменную?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега JavaScript
    Руководитель frontend направления, предприниматель
    Если речь идет о сборке проекта или работе в окружении nodejs, то хватит простого require со ссылкой и присваивании его в переменную. Если же проект реализован в формате «обычного сайта», то поможет fetch, который должен запрашивать файл по «серверной» ссылке. Скажем, файл находится в корне проекта в директории assets/json, тогда ссылка будет выглядеть примерно https://domain.name/assets/json/file.json. При условии, конечно, что сервер отдаст файл и точка входа в домен соответствует с корнем проекта, как я привел в примере.
    Ответ написан
    Комментировать
  • Как убрать выделение у нажатых элементов в CSS?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Это выделение объекта мышкой. На скрине, так полагаю, картинка, а это текстовый элемент и выделяется точно также: зажать и выделить область или двойной клик на элемент (слово, например).

    Решение — поменять мышку, если двойной клик происходит при попытке сделать один.

    Могу ошибаться, конечно же, выглядит не так очевидно из-за свойства изображений. Если бы у пикчи не было свойства vertical-align:middle, то при выделении появлялся характерный отступ снизу. Другие свойства тоже могут его убирать.
    Ответ написан
    Комментировать
  • В чем суть SSR (Server Side Rendering)?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега JavaScript
    Руководитель frontend направления, предприниматель
    Динамические сайты, которые все больше занимают места на рынке, в виде загруженной html страницы представляют собой обертку типа:
    <html>
       <head>...
       <body>
           <p>Сообщение, которое будет отрисовано, если у юзера выключен JS</p>
           <script src="скрипт, генерирующий внешний вид и логику">
       </body>


    Т.е. данных нет. Из минусов:
    1. Роботы, которые не ждут отрисовки страницы просто не получают никаких данных.
    2. Пользователь получает данные тогда, когда они у него будут отрисованы, что создает некоторую задержку.

    SSR генерирует страницу со стартовыми данными и решает эти две проблемы. Для веб-приложений это скорее ненужная фича, а для сайтов, типа интернет-витрин полезно.
    Ответ написан
  • Как можно решить вопрос с высотой блока?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    На стилях такое можно сделать, если разделить составляющие блоков на элементы и расположить их внутри гридовой сетки на dense. Тогда заголовки по строке будут зависеть от других заголовков, текстовое описание от других и т.д. Увы этот метод сложный и попахивает бредом.

    Более разумно будет не пытаться проводить такую манипуляцию, или захардкодить высоту заголовка в две строки (лучше в одну). Или же прибегнуть к JS, который будет динамически высчитывать размер наибольшего заголовка в строке и соседним выдавать такую же фиксируя её. Вроде есть либа такая.

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

    Еще можно подождать, пока войдет в реализацию subgrid. Но с этим пока сложно.
    Ответ написан
    Комментировать
  • Как при помощи JS заменить строку на странице если совпадает значение?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега JavaScript
    Руководитель frontend направления, предприниматель
    Проверку проводить на уровне шаблонизатора.

    На JS можно, конечно, но это на уровне... На плохом уровне. Но посмотреть как, можно тут, тут и тут.
    Ответ написан
    3 комментария
  • Как сделать модальное окно на Js?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега JavaScript
    Руководитель frontend направления, предприниматель
    Напиши функцию, объект или класс (по сути то, что в реакте или любом другом подобном фрейме или либе), который будет принимать параметра входящие и на выходе рисовать модалку с нужным контентом.
    Ответ написан
    Комментировать
  • Как пофиксить hover?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Как вариант решения → debounce.
    Ответ написан
    Комментировать