• Как сделать, чтобы цифры вводились по пробелу?

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

    ArsenyMatytsyn
    @ArsenyMatytsyn
    CEO iAmStudio, предприниматель.
    Вешай слушатель на условия изменения блока, например ресайз окна и не забывай удалять его при размонтировании компонента. Если события происходят часто и неконтролируемо, то запускать можно с использованием дебоунсера.
    Ответ написан
    Комментировать
  • Как будет правильно по правилам БЭМ использовать повторяющийся элемент?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    CEO iAmStudio, предприниматель.
    Если лого имеет какую-то стилевую нагрузку, например это svg, который управляется по цветовой схеме и т.д., т.е. это действительно самостоятельный блок, а не картинка в теле другого блока, то такие вопросы решаются как раз миксом.

    Блок логотипа описывает поведение исключительно логотипа, а класс-элемент родителя, в котором он находится задает отступы и вполне может регулировать размеры блока. В свою очередь поведение логотипа в разных размерах должно быть описано, хотя бы max-width: 100% для изображения.

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

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    CEO iAmStudio, предприниматель.
    background: linear/radial/и т.д.-gradient.
    Ответ написан
    Комментировать
  • Как выводить контент согласно active class?

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

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

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

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

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    CEO iAmStudio, предприниматель.
    Дело не в бутстрапе, там перечислены те же свойства, если описывать прилипающий контент вручную. А ломает эту логику overflow-ы. Ищи, где в родителях обрезка видимости.
    Ответ написан
    1 комментарий
  • Как правильно и без костылей сделать адаптивную страницу 404?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    CEO iAmStudio, предприниматель.
    Если тело страницы содержит разметку, например, шапки сайта, подвала и т.д., то эта информация должна быть и в стилях. А вообще обычно это простейшая страница, стили которой можно разместить прямо в теле, их не должно быть много.

    Если используется в маркетинговых целях, например «Вы попали не туда, но вот смотрите есть товары, которые могут вас заинтересовать», то есть смысл делать его как визуально в структуре сайта, так и через ЧПУ, который выдает страницу, как исключение из урлов.

    Если же убрать все эти тонкости, то задача страницы — отдать ответ 404 в запросе. Это тупик и никакой лишней информации и стилизации он не требует.
    Ответ написан
    5 комментариев
  • Как реализовать слайдер?

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

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    CEO iAmStudio, предприниматель.
    Кроме кеша браузера, есть и кеш скриптов и стилей, не помню, есть ли инструмент их обновления отдельной кнопкой в WP, но как минимум можно поискать. VS-Code это не единственный инструмент разработки, точно таким же образом ты можешь влезть непосредственно в файловую систему проекта прямо на хостинге, если у тебя обычный хостинг, в котором есть окружение с админкой.
    Ответ написан
    Комментировать
  • Как правильно вызывать функцию?

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

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

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    CEO iAmStudio, предприниматель.
    Это masonry, реализуется либо библиотекой одноименной, либо гридами с танцами с бубном, либо каким-то более изощренным методом.
    Ответ написан
    Комментировать
  • Как поставить png/jpg картинку в качестве фона svg?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    CEO iAmStudio, предприниматель.
    Для сложной формы да, SVG-маску, для кругляша хватит border-radius-а. Впрочем ничего не мешает сгенерировать SVG прямо в теле HTML. Как вставлять изображения в тело или в качестве фона — смотри спецификацию SVG.
    Ответ написан
    4 комментария
  • Получить длину массива JSON?

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

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

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

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    CEO iAmStudio, предприниматель.
    Что-то на странице не сжимается до границ родительский области (максимальный размер — экран), и «выталкивается» создавая такую область. Пройдись по элементам инспектором, он подсветит их, что позволит найти. Обычно такое происходит с картинками, картами и заголовками.
    Ответ написан
    1 комментарий
  • Как сделать так чтобы горизонтальный блок с тремя дивами выстроился в столбик?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    CEO iAmStudio, предприниматель.
    По умолчанию блочные элементы занимают всю ширину вверенной области, для списка (можешь прямо списком и делать) заверни в блочный элемент, каждый элемент тоже в блочный, дописывать поведение не обязательно, но можешь flex column сделать, а полосы это типичный бордер этих пунктов.
    Ответ написан
    Комментировать
  • Какое событие слушать, чтобы адекватно обновлять позицию дропдауна?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    CEO iAmStudio, предприниматель.
    Нус, для начала, можно не вытаскивать такие контекстные штуки в общую видимость. Если не злоупотреблять overflow-ами, то все будет ок.

    В текущем же ключе для каждого элемента можно вешать слушатель прямо на вьюпорт, а не искать родителя.
    Ответ написан
  • Как отрезать лишнее в иллюстраторе?

    ArsenyMatytsyn
    @ArsenyMatytsyn
    CEO iAmStudio, предприниматель.
    Бинарными операциями.
    Ответ написан
    Комментировать
  • Как лучше сделать меню при уменьшении экрана?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    CEO iAmStudio, предприниматель.
    Нус, для начала нет смысла в ссылке «Главная», т.к. давно уже стало нормой делать ссылкой лого для этого функционала. Во-вторых пункты «Порядок работы» и «Этапы работы» мало того, что по своей сути являются дублирующим контентом, так еще и могут быть расположены прямо на главной странице, т.к. заводить под них отдельную ссылку не имеет смысла, а если это лендос, то могут быть перенесены в первый экран, а не в шапку.

    Портфолио может быть заменено словом Кейсы, если, конечно, по содержанию это именно они, а не скриншотики проектов.

    Все нужные контакты перечислены справа в шапке же, поэтому ссылка может располагаться в подвале или быть элементом выпадашки «О нас».

    Итого:
    1. Минус половина ненужной навигации.
    2. Проблема плохого дизайна.

    ЗЫ: Если же не в твоих силах сделать что-то с дизайном, то можно прибегнуть к выстраиванию навигации в 2 строки либо на медиазапросах экрана, либо плясать от медиазапроса контейнера. А на мобилке, конечно, прятать под бургер. Также можно прибегнуть к прокручиваемой области (как в приложениях часто делают).
    Ответ написан
  • Как произвести клик по path, если его перекрывает другой svg?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    CEO iAmStudio, предприниматель.
    Добавь pointer-events: none; на тот элемент, что сверху.
    Ответ написан