Задать вопрос
  • Html/css + flexbox или bootstrap4 для заказчика?

    ArsenyMatytsyn
    @ArsenyMatytsyn
    Руководитель frontend направления, предприниматель
    Все эти термины идут неразрывно друг от друга.

    Сам бутстрап, как фреймворк полностью построен на html+css+js, в том числе флексбоксах (сетка).
    Ответ написан
  • Как исправить ошибку повторной регистрации пакета?

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

    А если при текущей логике сборки это нереально, то можно попробовать переопределить имя пакета при его импорте в сборке вуя. Этот вариант я, по правде говоря, никогда и не пробовал, так как все такие конфликты решались первым подходом.
    Ответ написан
  • Как сделать плавный скролл к табу bootstrap?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега JavaScript
    Руководитель frontend направления, предприниматель
    Bootstrap завязан на jQuery → а тот умеет делать так:
    $(".clickelem").click(function (){
        $('html, body').animate({
            scrollTop: $("#tabname").offset().top
        }, 2000);
    });


    Лично мне больше импонирует VanillaJS, но она кушается не всеми браузерами:
    window.scrollTo({
        top: [elem offset top],
        behavior: "smooth"
    });
    Ответ написан
    Комментировать
  • Как сделать развонемрый фон многострочного текста?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
  • Как вызвать горизонтальный скролл?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Система координат отсчитывается от левой верхней точки вьюпорта. Отсюда растут все подобные особенности.

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

    В комбинации с JS может что-то такое набедокурить.
    Ответ написан
    Комментировать
  • Как запускать скрипт при изменении высоты блока?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Если тебе не нужно менять содержимое прилипшего блока, а только делать ему перерасчет, то почему ты не воспользовался обычным position:sticky;?
    Ответ написан
    4 комментария
  • Почему менятся название изображения?

    ArsenyMatytsyn
    @ArsenyMatytsyn
    Руководитель frontend направления, предприниматель
    При дублировании изображения создается автоматически новое с подобного рода кодом. Проверь, не пытаешься ли ты перезалить изображение.
    Ответ написан
  • Не могу прикрепить блок к секции?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    У тебя отступ у параграфа margin:auto, т.е. не фиксированный, а позиция заголовка имеет жесткую фиксацию от правого края 25px, при разных разрешениях отступ у параграфа разный, следовательно при несовпадении разница видна невооруженным глазом.

    Я рекомендую и параграфу и заголовку в данном конкретном примере выдать фиксированные отступы:
    p {
      ...
      /* width: 90%; */
      margin-right: 25px;
      margin-left: 25px;
      ...
    }

    И да, убрать у абзаца размер процентный. Это блочный элемент по умолчанию и он заполнит все вширь.
    Ответ написан
    Комментировать
  • Как сверстать такие слайды (Идеи, советы)?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    1. Чтобы иметь возможность ловить события именно объектов, а не квадрата картинки, используй SVG.
    2. Тень рисовать можно ее же средствами.
    3. Используй svg-спрайты, это позволит снизить фактор жопоболи при перестройке.
    4. В чем сложность использовать медиазапросы при постройке я, если честно не понял, располагаешь элементы (острова) один под одним (тупо дивы), а на десктопе позиционируешь абсолютно. Главное не накосячить с z-index-ом.
    Ответ написан
    1 комментарий
  • Как показать абсолютно спозиционированный блок поверх блока с прокруткой?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Я не тебе ли недавно это расписывал? *подозрительно смотрит*

    Выноси по логике:
    →relative
    →→overflow
    →→absolute
    Ответ написан
  • Как сделать чтобы div (уведомление с кнопкой) закрывался на время или совсем закрывался?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега JavaScript
    Руководитель frontend направления, предприниматель
    https://learn.javascript.ru/settimeout-setinterval

    + Куки\SessionStorage\LocalStorage\БД
    Ответ написан
    Комментировать
  • Какой размер картинок нужно делать для мобильной версии?

    ArsenyMatytsyn
    @ArsenyMatytsyn
    Руководитель frontend направления, предприниматель
    Плясать надо от брейкпойнтов + делать поправку на экраны повышенной плотности. В среднем используется 3 брейкпонта, следовательно при классово верном подходе необходимо нарезать минимум по 2 пикчи для каждого брекпойнта и экрана повышенной плотности = 6 картинок.

    В принципе можно и оптимизировать, если удасться словить двукратное увеличение между брейкпойнтами. Т.е. брать не 2x от разрешения картинку, а от следующего брейкпонта, но это из области фантастики и больших бюджетов.
    Ответ написан
    Комментировать
  • Что делать с отступами вокруг текста?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Краткий экскурс — типографике в вебе = боль. Наслаждайся. Ничего общего с полиграфией, хотя хотелось бы.

    Теперь по сути:
    1. Править руками частные случаи. Тут возможностей просто море, от line-height:1 (норм) до абсолютного позиционирования (плохо).
    2. Постоянно и везде, поэтому стоит понимать анатомию шрифтов, чтобы знать, как с ними работать. Ну и да, никакой Zeplin тебе эту магию не выдаст, так как это программа, которая просто транспонирует свойства редактора (читай все абсолютно спозиционировано) в типа CSS.
    3. Да, главное не прострелить себе ногу при этом. Т.е. скорее всего не стоит к такому прибегать.
    4. Заказчику важно сделать деньги на том проекте, что ты реализуешь.
    5. Да есть, типа Baseliner-а, или всякие плагины для накладывания полупрозрачной пикчи поверх верстки, но вообще это все от лукавого.
    Ответ написан
  • Навести порядок в именах классах?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Кроме тебя порядок в логике формирования структуры HTML и классов никто не наведет.

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

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Если появляется у элемента скролл, значит он имеет фиксированную высоту\ширину и у него включен скролл по умолчанию или в стилях и при этом все, что не входит в область захвата будет скрыто.

    Чтобы обойти это ограничение используй кастомный скролл. Если речь именно о том, чтобы показать элементы, которые «торчат».

    Либо можно использовать другую компоновку макета, которая будет наслаивать, скажем, текст на декоративные элементы, при этом у текста будет включен скролл, прозрачность, а другие элементы будут видны априори.

    Если же вопрос был о том, как не довести до такого → не использовать фиксированные размеры, там, где контент превышает размер родителя, не указывать overflow: hidden\auto\scroll.
    Ответ написан
    Комментировать
  • Как собрать для своего проекта иконки из разных иконочных шрифтов и безболезненно подключать их?

    ArsenyMatytsyn
    @ArsenyMatytsyn
    Руководитель frontend направления, предприниматель
    Набрать SVG исходники и сконвертировать их в спрайти. Это классово верно (шрифты не сильно в почете), и еще и удобно (использовать через USE).
    Ответ написан
    Комментировать
  • Как увеличить svg, чтобы адаптив не сказал пока?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    SVG по своей сути и названию масштабируемая графика. При интеграции ее в тело документа ты указываешь ей фактические размеры (хотя бы для одного из брекпойнта). Если же интегрируешь с помощью object, то max-width:100%, таким образом SVG будет всегда вписана в область, которая ей отведена.

    Следовательно, в конечном счете размер вектора зависит от родителя (если ты не накосячил, конечно).

    Исходя из этого ты можешь абсолютно позиционировать родителя SVG таким образом, чтобы он занимал столько места от секции, сколько есть в макете. При этом, врядли тебе будет доступен z-index:-1, тогда тебе необходимо будет задать родителю SVG (или ей самой, если ты без родителя обошелся) z-index:0, а форме свойства position:relative;z-index:1;, чтобы она [форма] могла «лечь» поверх пикчи.

    Фоном делать не рекомендую, так как в случае с SVG ты потеряешь возможность точно управлять ей.

    А начать постигать дзен SVG можно отсюда.
    Ответ написан
    Комментировать
  • Как реализовать множество POST форм в шаблоне?

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

    ArsenyMatytsyn
    @ArsenyMatytsyn
    Руководитель frontend направления, предприниматель
    1. Mobile first уже не первый год оправдывает свое существование. Оптимальнее идти от меньше к большему в верстке.
    2. Для использования различных изображений используется srcset в img или picture тегах.
    3. Большой монитор (чаще широкоформатный) != ретина дисплей (дисплей с повышенной плотностью).
    4. Для нестандартных мониторов, в том числе широкофматных нужен макет, либо ответственность за изменения макета (вообще круто, когда широкоформатка отображает подогнанный под нее дизайн), в противном случае центрируй основной контейнер. Даже при подгонке под широкоформатку имеет место быть центрированный контейнер.
    5. Такие изощрения сами по себе никакого отношения к SEO не имеют. Важно, чтобы сайт адаптировался под мобилку, так как поисковая выдача все больше идет на них.
    6. При такой постановке вопроса ты скорее всего запорешь оптимизацию проекта, либо наделаешь кучу ошибок по валидации и без удержания внимания на сайте при естественном продвижении скорее всего будешь болтаться где-то в конце списка.

    Как правильно делать адаптив верстки под большие экраны?

    Иметь макет для подобных форматов или иметь опыт дизверстки.
    Ответ написан
    Комментировать
  • Как правильно просматривать сайт на разных разрешениях экрана?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    1. Дебаггер браузера наше все. Если у тебя ломается верстка при его использовании → ты напортачил, переделывай.
    2. Как верно подметили, яблоко это та еще жопоболь, притом iPhone-ы имеют более менее адекватную сборку Webkit-а, в отличие от iOS-овского. Но если с мобилкой вполне может хватить автопрефиксора за глаза и за уши, то для тестирования iOS тебе поможет виртуальная машина. Ставь Hackintosh и не отсвечивай.
    2.1. Проблема браузера на iOS также в том, что ты не знаешь, какой именно вьюпорт будет у открывшегося браузера, поэтому классические медиазапросы идут лесом и мы возвращаемся к пункту 1 с добавлением того, что стоит отслеживать, что происходит в межбрейкпонтном состоянии.

    И всякие сервисы есть, которые позволяют это автоматизировать. Лично я никогда не пользовал, ибо зачем.
    И, опять же не пробовал, но поговаривают можно собрать свой нулевой Webkit браузер, который будет близок к тому, что происходит на iOS.
    Ответ написан
    Комментировать