• Какой тег лучше использовать для слогана?

    @FabiBoom
    Вас интересует именно семантика или не нарушить "правила" HTML?

    Кратко, почти любой семантичечкий "текстовый" (фразовый) тег, в зависимости от содержимого которое вы туда вкладываете и как вы его рассматриваете.
    Во-первых, если задача семантически разметить, то "слоган по центру" не верная формулировка, в семантике нету такого понятия "по центру", это визуальное понятие. Во-вторых зачем вам по учебнику? Бить никто не будет) Тут нужно смотреть по содержимому. Начинать следует с простого, у нас текстовое содержимое - p (параграф), подойдет в 99%. Но у нас более щекотливый случай - "слоган", он должен кричать и это может быть и заголовком (если после слогана, есть какой то дополнительный контент связанный с ним), и strong (если мы хотим четко и твердо проговорить его во всяких читалках) , хотя зачастую хватит и обычного b. Решать вам.

    И да, span - несемантический элемент и подходит как контейнер для "текста" в случаях, когда его нужно застилизировать отдельным образом.
    Ответ написан
    3 комментария
  • Как реализовать адаптивное меню со скрытием пунктов которые не умещаются?

    @FabiBoom
    Я так понимаю вам это нужно Priority+ Navigation
    Ответ написан
    Комментировать
  • Можно ли использовать в БЭМ блок, элемент и модификатор одновременно?

    @FabiBoom
    Можно конечно (у вас тоже), допустим у нас есть компонент кнопки внутри промо:
    - Как блок - .button
    - Как элемент промо блока (например для позиционирования кнопки внутри блока) - .promo__button
    - И мы хотим скругленную кнопочку - .button--rounded
    Ответ написан
  • Какое самое наилучшее приложение для чтения книг на android?

    @FabiBoom
    Moon+ Reader читает все что можно и легко кастомизируется.
    Ответ написан
    1 комментарий
  • Как сделать анимацию окружности?

    @FabiBoom
    Ответ написан
    Комментировать
  • Как на JavaScript реализовать математически правильное округление?

    @FabiBoom
    Что же неверного в округлении числа 24.5545 до сотых? Должно получится 24.55. Следующая цифра же 4.
    Ответ написан
    Комментировать
  • Почему не выводится набор React-компонентов?

    @FabiBoom
    Я не знаю, что вы пытаетесь сделать и я так понимаю, что причина в том, что метод getElementsByTagName возвращает не массив, а HTMLCollection, у которого нету метода map, который вы пытаетесь использовать.
    Решить проблему можно путем приведения результата в массив:
    Array.from(document.getElementsByTagName("main")[0].getElementsByTagName("section")).map(theArrayElement => <p>Paragraph!</p>);
    Ответ написан
    Комментировать
  • Как это сверстать?

    @FabiBoom
    Можно гридами, можно флексами (если нужно подправить отступы - margin в помощь)
    Ответ написан
  • Как сделать блок гибким?

    @FabiBoom
    justify-content: space-between; задать флекс-контейнеру (элементу с display: flex) должно хватить
    Ответ написан
    Комментировать
  • Есть ли сайт на котором есть большое руководство по c++/c#?

    @FabiBoom
    https://ravesli.com/
    Еще доки подробненько так описывают:
    www.cppreference.com
    Ответ написан
    Комментировать
  • Что лучше использовать: background-image или picture + object-fit?

    @FabiBoom
    Лично я думаю, что свойство хорошое и во многих случаях, когда нужно добавить именно контентное изображение на страницу, типо фотографии товара, можно спокойно использовать object-fit: cover, вместо аналога с background-image. Хотя, если честно, и это не часто нужно, так как зачастую получается провести грань между декоративным и контентным изображением, и тут уже не стоит выбор, что использовать.
    У вас в примере изображения слайдов можно делать через background-image, ну только если вы не считаете ее контентной, важной для конечного пользователя. Значит можно спокойно вставить как изображение и еще й что-то в alt добавить. И вы говорите о абсолютном позиционировании, разве нельзя пойти от обратного и позиционировать не блоки, а картинку? Кроме того, можно отлично подключить сюда и гриды, у которых поддержка не хуже object-fit.
    Ответ написан
    Комментировать
  • Как убрать глюк input?

    @FabiBoom
    Во первых, как сказал smigles, интерактивное содержимое нельзя вставлять друг в друга (ссылку в кнопку, текстовое поле в ссылку, ибо не понятно, что делать когда пользователь будет пытаться взаимодействовать с таким содержимым).
    Во вторых, у вас обработчик клика на кнопку изменяет innerHTML кнопки добавляя внутрь кнопки текстовое поле. И вот вы кликаете по текстовому полю (срабатывает событие на клика на input, а потом происходит всплытие события click (гуглите, если не знаете).
    Вот:
    input_holder.addEventListener('click',(event)=>{
       input_holder.innerHTML = `<input type="text" id="inp_m">`;
    });

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

    @FabiBoom
    $str = "html";
    $pattern = "/((<li>(.*?)<\/li>\s*)+)/s";
    
    echo preg_replace($pattern, "<ul>$0</ul>", $str);
    Ответ написан
    Комментировать
  • Как меню привязать к низу страницы?

    @FabiBoom
    body {
     display: flex;
     flex-direction: column;
    
     min-height: 100vh;
    }
    
    .menu {
     margin-top: auto;
    }
    Ответ написан
    2 комментария
  • Как семантически сверстать вот такой слайдер?

    @FabiBoom
    1) Имхо, вариант со списком не очень, так как это не группа однородных элементов, которые выполняют одну функцию. Вариант с параграфом отлично подходит, хотя и обычный div подойдет с правильным названием класса.
    2) Разумных способов много, можно накидать псевдоэлементов и их анимировать (самый популярный), можно обертки, можно фон и так далее. Вот, например, мой элементарный вариант с анимацией, хотя тут и есть простой JS, но его можно убрать и изменять CSS переменную вручную)).
    Ответ написан
    Комментировать
  • Как удалить на esc?

    @FabiBoom
    Неправильно построена логика. Наверное, сперва нужно проверить открыт ли попап вообще и потом класс нужно убирать.
    window.addEventListener("keydown", function(e) {
     if (e.keyCode == 27 && popup.classList.contains('popup_active')) {
      popup.classList.remove('popup_active');
     }
    }, true);
    Ответ написан
    Комментировать
  • CSS Grid. Как убрать "вертикальную растяжку" элементов в колонках?

    @FabiBoom
    Элементу в первой колонке задать align-self: start;

    P.S если нужно такое поведение для всех элементов задай контейнеру align-items: start;.
    Ответ написан
  • Модификатор, микс или блок-обертка для внешних отступов?

    @FabiBoom
    Лучше миксовать.

    <header class="site-header">
        <nav class="site-header__nav nav"></nav>
    </header>
    
    <footer class="site-footer">
        <div class="site-footer__nav nav"></div>
    </footer>

    .site-header__nav {
       margin-left: 25px;
    }
    /* ... */
    .site-footer__nav {
       margin-left: 15px;
    }
    Ответ написан
  • SVG иконки на сайте. Как правильно вставлять?

    @FabiBoom
    • Вставка через элемент img - если у вас изображение контентное (содержат важное для пользователя), например логотип.
    • Вставка через в качестве background-image: url() - если у вас изображение декоративное (обычные иконки, как у ваших примерах) и никак не изменяется при взаимодействии с пользователем (об этом ниже). Например, для простых иконок к заголовкам разделов можно использовать псевдоэлементы ::after и ::before + background-image c урлом на свгшку. Не засоряет таким образом разметку.
    • Вставка через элемент svg прямо в код - если у вас изображение декоративное и нужно будет при каких-то условиях, например, изменить заливку свгшки или цвет обводки с помощью CSS. Например, красная иконка в кнопке при наведении на кнопку становиться белой. Проблема в том, что, чтобы изменить ее цвет через CSS способом с псевдоэлементом мы можем только заменив на другую такую же картинку, но с белым цветом. А можно при наведении сделать так:
      button:hover svg {
         fill: white;
      }

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

    Вариантов использования много и тут следует смотреть по конкретной ситуации.
    Есть еще возможность не добавлять весь свг код в разметку, а использовать свг спрайты, что очень рекомендую. Ими тоже отлично управлять через CSS, упрощает разметку, особенно, если какая-то иконка используется многократно. Вот пара ссылок:
    Раз
    Два
    Ответ написан
    Комментировать