• Какой вариант выбрать для верстки сайта с заданными элементами?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Если нет желания идти и специализированно получать знания у кого-то, то ты можешь почерпнуть достаточно разумные подходы у фреймворков, да. Например у этого https://getbootstrap.com/.

    У них из коробки есть и шапка и карусель и баннеры и большинство основных элементов для сайта.

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

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега JavaScript
    Руководитель frontend направления, предприниматель
    1. По факту отгрузки json стоит передать его в другую функцию.
    2. Которая получит данные и обработает в, идеале отсортирует по дате.
    3. Еще проще — сформировать массив из объектов, где будет:
    [
      {
        date: ...
         messages: [...]
      },
    ]

    Такой объект просто тупо легче вывести в шаблон.
    4. Далее вывести всю эту срань по условиям: дата + сообщения, в которых эта дата совпадает.
    Ответ написан
    Комментировать
  • Как сделать что бы блок не скрывался при перемещении курсора на него, при наведении?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    1. Ты либо привязал :hover не к тому родителю (маловероятно, но возможно)
    2. Либо у тебя зазор между спозиционированными элементами, при переходе через который :hover обнуляется.
    Ответ написан
    Комментировать
  • Какой есть npm плагин для сборки html?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега HTML
    Руководитель frontend направления, предприниматель
    Самое время начать использовать gulp\webpack\grunt и выбрать для себя удобный шаблонизатор, например pug.
    Ответ написан
    Комментировать
  • Почему остаётся белая полоска справа?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    box-sizing: border-box в проекте есть? Я его в сводке справа не вижу.
    Ответ написан
    Комментировать
  • Схема вложенных папок и файлов?

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

    Если ты используешь бубунту, то путем наименьшего сопротивления будет установка sudo apt install tree с дальнейшим использованием. К слову, вывод можно схоронить в файл)
    Ответ написан
  • Как решается проблема с дерганьем всего контента при открытии модального окна?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Ты описал дефолтное поведение открывашки модального окна на Bootstrap. Там задается overflow: hidden; для body в момент открытия окна, чтобы предотвратить прокрутку контента одновременно с прокруткой модального окна.

    Соответственно, что-о мне подсказывает, что ты используешь бут или другой фреймворк, который так делает, ибо новички до такой фичи редко догадываются.

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

    ЗЫ: при открытии модального окна это наиболее правильное поведение страницы, можно разве что, если тебя это сильно смущает задать поведение элементам страницы по transition свойству (не рекомендую).
    Ответ написан
  • Как контролировать состояния у каждого компонента vue?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега JavaScript
    Руководитель frontend направления, предприниматель
    Vue Vue-шкой. но ты обращаешься к одному и тому же ID на уровне сгенериного HTML.

    UPD: если не понял, то покликай на нижний чекбокс, а потом посмотри код.
    Смехуечки: ты обращаешься к одному и тому же ID, но делаешь это без уважения.
    Ответ написан
  • Не работает атрибут @media?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Заверни media в .header.

    .header {
       @media (max-width: 840px) {
          /*стили для header*/

    Компилятор сам соберет так, как должно быть.

    На счет синтаксиса не уверен, я на Sass пишу, с SCSS уже пару лет не работал.
    Ответ написан
    6 комментариев
  • Быстрый поиск в таблице по сайте?

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

    Самообман, такой самообман)

    К слову, не поверишь, но можно скопировать решение. Просто поправив классы, где надо. И то, не обязательно даже.

    Впрочем, ИМХО, лучше для таких вещей задействовать JS-фреймворк типа Vue. Кроме того, что у них в документации подобного плана поиск приводится, как образец, так еще и в конечном счете это достаточно удобно.

    Потому что раз уж пошла такая пляска с таблицами, то дальше будет еще веселее.
    Ответ написан
    Комментировать
  • Как при помощи css добавлять стили элементу в котором есть .dropdown?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    CSS работает только вниз. Это каскадные стили. Т.е. без костылей никак. Но если тебе нужно оформить кнопку, которая открывает список, то ты можешь расположить ее после списка и цепляться селектором +.
    <div class="dropdown">
      <div class="dropdown__list">...</div>
      <div class="dropdown-control">...</div>
    </div>


    .dropdown{
      /* Не задавать оформление */
    .dropdown__list + dropdown__label {
      /* Сработает только при наличии списка и при условии конструкции выше */
    Ответ написан
    Комментировать
  • Как не подгружать неиспользуемый JS и CSS-код на разных страницах сайта?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    они в CMS, которую я использую, подключаются в PHP-сниппет внутри , либо перед и грузятся сразу на все страницы


    Раздели на файлы, поройся в логике формирования CMS-кой, задай в ее styles объекте только необходимое. Остальное грузи непосредственно вставкой link в шаблоне. Может быть сможешь влить в потом styles свои файлы, если нет, то посмотри, как поднять их внутрь тега head.

    Если совсем плохо — догружай JS-кой.
    Ответ написан
    Комментировать
  • Не получается дописать слайдер. Хелп?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    В принципе жить можно. Подход такой себе, хотя я его и чуть больше люблю, чем классические слайдеры.
    Сделать надо вот что, при инициализации раздай data- атрибуты каруселькам — так ты сможешь сопоставлять активный элемент с «кружочками».

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

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    1. Разобраться в CSS
    2. display: inline-block; вот это нахер.
    3. Либо родителю добавить display:flex;flex-direction:column; → иметь дело с последствиями.

    UPD: после дополнения вопроса словами
    речь про нормальный перенос > и >>

    Псевдоэлементы должны быть смещены влево и быть не :before, а :after.
    Ответ написан
  • Откуда лезет реклама?

    ArsenyMatytsyn
    @ArsenyMatytsyn
    Руководитель frontend направления, предприниматель
    Чтобы узнать наверняка, необходимо знать матчасть и изучить исходники. Т.е. если ты не шаришь, то с такой задачей тебе куда-нибудь на фриланс.

    А если сайт лежит на каком-нить бесплатном хостинге, то в счет бесплатности они подсосвывают рекламу при формировании ответа сервера в тело. Эта информация должна быть в соглашении.

    Кроме прочего, всякие приложения в браузерах имеют доступ к прямому влиянию на содержимое. Например поставив себе Яндекс.Советника, ты часто будешь получать встроенный контент в шапке.
    Ответ написан
    2 комментария
  • Есть ли смысл делать поддомен под регион, и что отображать на странице главного домена?

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

    Иными словам:
    1. Оцени масштаб.
    2. Оцени сроки появления других доменов, контент.
    3. Вероятность появления этих самых других регионов.
    4. Задайся вопросом, а зачем тебе в принципе поддомен? Чтобы показывать то же, что и на других?

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

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

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Тут 4 элемента:
    1. Номер
    2. Обертка для «кнопки» обратного звонка
    3. Иконка внутри «кнопки»
    4. Фраза «обратный звонок» на том же уровне, что и иконка.

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

    ArsenyMatytsyn
    @ArsenyMatytsyn
    Руководитель frontend направления, предприниматель
    1. Можно совмещать
    2. Можно не совмещать.
    3. Преимущества отдачи бэка — все готовое, не надо ждать или насиловать себе ногу, настраивая пререндер, например.
    4. Безопасность: все, что лежит во фронте — видит любой желающий, все, что есть в логике шаблонизатора или бэка не видит никто, даже когда он отрендерен.
    5. Не актуален для SPA на REST API (кривлю чуть душой).
    И т.д. втекающие и вытекающие последствия.

    Сравнивать бэк-шаблонизаторы по принципу их действия с фронтом, ИМХО, не самая здоровая затея, так как работают они по-разному.
    Ответ написан
    4 комментария
  • Вопрос к опытным верстальщикам от студента?

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

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

    Поэтому как для этапа обучения — все верно, учись сам такое делать, к тому же ничего сложного. Как для реальной жизни — бред, использовать такой подход вполне законно.

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

    Самую малость оффтопом: я считаю нормой давать сперва материал по конкретным технологиям, а потом дополнять упрощениями, библиотеками и т.д. А не наоборот, когда сперва учишь как использовать бутстрап, а потом объясняешь, к примеру, зачем нужен aria-label.
    Ответ написан
    Комментировать
  • Как позиционировать и адаптировать без пустого пространства?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Можно без grid. На десктопе ты можешь абсолютно спозиционировать поиск и под ним sidebar. Я уверен, что ты точно знаешь высоту поиска (или сейчас поймешь, что знаешь). И уж точно ширину.

    Ширину news и article можно регулировать на десктопе как угодно, хоть калькулировать на css, хоть margin-right в размер сайдбара задавать. Ну и рекомендую все же пользовать принцип mobile-first. Т.е. сперва описать правый layout, а потом дополнить его танцем с бубном, как я предложил.

    Еще ты можешь воспользоваться возможностями JS по манипуляции DOM, т.е. банально менять структуру при разном разрешении. Или вообще пойти дальше и заюзать какой фреймворк, но это не всегда уместно.
    Ответ написан
    4 комментария