Задать вопрос
  • Как сделать поле ввода html для ввода меток и ключевых слов?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    Набросал на скорую руку, просто потому что было интересно, хотя, по хорошему, ответом на Ваш вопрос должны быть ссылки на изучение js и на habr.freelance, так как Вы не прикладываете своих попыток к вопросу, а значит это задание, а не вопрос.

    В демке ниже используются следующие техники:

    Вёрстка:
    • flexbox
    • HTML-мнемоники (для крестика на кнопке)

    JS:
    • Обработка событий, в том числе полей формы (change)
    • Поиск и создание элементов
    • Делегирование событий (в функции onSelectorClick определяется что если клик произошёл на кнопку с крестиком, то удалить родительский элемент кнопки. В итоге получаем всего один слушатель на все элементы selector сколько бы их не было.)
    • Замыкания. Позволили нам найти все нужные html элементы один раз(поиск элементов в DOM одна из самых дорогих операций), а потом просто обращаться к переменным, в которые мы их сохранили из функций.

    Ответ написан
    Комментировать
  • Как поменять цвет свг спрайта?

    profesor08
    @profesor08 Куратор тега CSS
    Используй CSS переменные
    https://developer.mozilla.org/ru/docs/Web/CSS/Usin...

    Ответ написан
    Комментировать
  • Как убрать отступ?

    @secretsergey
    #bottom-block {
        display: flex;
        align-items: flex-start;
    }
    Ответ написан
    Комментировать
  • Как правильно верстать такой блок?

    @cheeroque
    По-хорошему, в 2021 году такие вещи надо верстать через column-count. Поддержка по Caniuse прекрасная.

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

    @thisuserhatephp
    Офлайн - losers Онлайн - lusers
    https://jsfiddle.net/5z1Lbpua/ - например так, в jq есть resize
    Ответ написан
    Комментировать
  • Почему элемент невидимый?

    wapster92
    @wapster92 Куратор тега CSS
    И в что тут не так? Свойство color для цвета текста, у фона другое свойство.
    Ответ написан
    Комментировать
  • Как выровнять подпись с помощью css?

    @Mirival
    У тебя селекторы неправильно написаны. Такого класса .auto-category нет в разметке.
    Ответ написан
    Комментировать
  • Почему когда прописываю в адресной строке путь, который прописан в web.php, он лезет в гугл?

    dima9595
    @dima9595
    Junior PHP
    Может надо указывать http/https перед основным доменом, так как у вас это домен первого уровня!?

    Но когда я прописываю его в адресной строке, открывается гугл

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

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    не могу найти в поиске

    SVG-маски, маски с помощью clip-path в CSS, маски на канвасе, маски в шейдерах, и.т.д. В общем гуглите все, что связано со словом "маска". Вариант с шейдерами самый производительный, с SVG - самый простой.

    Пример с SVG:


    Пример с шейдерами (не совсем такой, но для передачи идеи пойдет):
    Ответ написан
    Комментировать
  • Идеальный алгоритм вёрстки сайта?

    delphinpro
    @delphinpro Куратор тега Вёрстка
    frontend developer
    В целом согласен. До пункта №7.

    Я обычно придерживаюсь принципа верстки независимыми блоками.
    Поэтому после анализа макетов, я делаю одну-две-три (смотря по объему макетов) вспомогательных страниц, на которых верстаю:

    1. Базовые элементы. Общая типографика, кнопки, ссылки и т.п.
    2. Общие блоки. То что повторяется на нескольких страницах и/или может быть переиспользовано, какие-то виджеты, менюшки, и т.п.

    Все это занимает основную часть времени работы. И к окончанию этих этапов я имею своего рода набор, или конструктор, из готовых блоков. Остается только написать лейауты для разных страниц и раскидать по ним имеющиеся блоки.

    Для этого всё закидываю на гитхаб-пейдж, чтобы по ссылке я мог открыть с телефона или попросить знакомого проверить на другой ОС c телефона


    Это лишняя трата времени. Пусть небольшая, но все же. Плюс, отслеживать качество верстки все-таки удобнее в процессе, а не по окончании подкручивать.
    Поэтому используем browser-sync. Поднимается сайт, доступный по IP в домашней локалке с любого устройства. Совет: использовать всегда один порт в browser-sync, а на устройствах сделать закладки на этот адрес. Любой сайт, который в данное время разрабатывается, открывается одним тапом по закладке.
    Кроме того BS дает бонус в виде синхронизации действий сразу на всех устройствах: клики, прокрутка, ввод. Это мега-удобно — кликаешь на компе, краем глаза смотришь в планшет и телефоны, сразу видишь там все изменения и поведение.

    Всё готово, сжимаю CSS, JS. через веб-сервисы.


    Опять тратите время. Настроенный Gulp в одну команду проделает все оптимизации (на больших проектах даже кофе можно успеть сделать, пока собирается билд=).

    Еще обратите внимание на инструмент lighthouse в инструментах разработчика.

    скриншот
    608fcaa260f31153020142.png


    Не нужно никуда сайт заливать, чтобы проверить на доступность, производительность и т.п.

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

    Я не упомянул SASS-фигас и т. д, так как не увидел практической пользы для проектов на 1-15 страниц.


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

    Ну вот зачем PUG? Как конкретно он помогает на небольших проектах 1-15 шаблонов страниц.


    Помогает. Нет, конкретно Pug я очень не люблю. Но другой, более "хэтээмэльный" шаблонизатор бывает полезен. Я уже упомянул выше о верстке независимыми блоками. Шаблонизатор позволит не копипастить эти блоки, а использовать их как компоненты.

    Префиксы? В кодовом редакторе они и так есть.


    Я считаю, что исходный код должен быть чистым, без префиксов. Это лишний визуальный мусор. Пусть лучше автопрефиксер этим занимается. К тому же этот плагин использует актуальную базу caniuse на основе вашего .browserlist. Пусть профит и не большой, но все же поменьше на выходе неактуальных свойств.
    Ответ написан
    2 комментария
  • Когда использовать button?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Button - переводится как "Кнопка".
    Отсюда простой вывод — используем везде, где нужна кнопка.
    Если вы используете вместо кнопки div или span — это всегда неправильно.
    Так же и ссылки. Если ссылка в макете выглядит как кнопка, то она все же остается ссылкой и верстается тегом а.
    Ответ написан
    Комментировать
  • Стоит ли использовать media для container?

    Stalker_RED
    @Stalker_RED
    Такие правила стоит использовать тогда, когда вы хотите ограничить ширину контейнера до 992px при ширине страницы менее 1200px.

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

    @Romario5891
    Высота, вроде бы, всегда должна быть по наполняемости контента
    Ответ написан
    Комментировать
  • Как можно открыть (получить) спрайт/иконку с сайта?

    w3bsmes
    @w3bsmes
    Куратор тега «Глупые вопросы»
    Давай без извращений, возьми уже готовое
    Ответ написан
    1 комментарий
  • Встречались ли вам овер-инженеры среди джунов и миддлов? Как надо с такими поступать?

    DevMan
    @DevMan
    человек вообще ни у чом не уиноват.
    просто в компании не выстроены (или не правильно выстроены) бизнес-процессы.

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

    RAX7
    @RAX7
    Держи, немного поправил один из своих старых набросков.

    Принцип работы примерно, как описал Максим Морев в своем ответе.
    Ответ написан
    2 комментария
  • Как "перепрошить" мозг будущему программисту?

    delphinpro
    @delphinpro
    frontend developer
    Ну, ок, допустим, беру какую-нибудь задачу. Прочёл текст. А дальше-то что? Я не знаю как подойти к решению задачи, с чего начать, что вообще делать и чем закончить.

    Анализ, декомпозиция.
    Разбивайте общие задачи на более мелкие, элементарные.

    Задача: выпить кофе.

    Разбиваем на составляющие:
    • Достать турку
    • Налить воды
    • Добавить кофе
    • Сварить
    • Попить

    Подзадачу "Сварить" делим на еще более мелкие:
    • Зажечь газовую плиту
    • Поставить турку на конфорку
    • Довести до кипения

    Задачу "Зажечь газовую плиту" снова делим на составляющие:
    • Взять спички
    • Чиркнуть о коробок
    • Открыть подачу газа в конфорку
    • Поднести спичку к конфорке


    И т.д. До самых элементарных уровней.
    Ответ написан
    2 комментария