В какой компании ты работал и что приходилось там делать?
Как проходил код-ревью на прошлом месте работы?
Сколько людей было в команде?
На каком стеке работали?
Как вы делали задачи?
Расскажи про свой опыт?
Расскажи, какие самые сложные или интересные задачи ты выполнял?
Работал ли ты с iframe?
Нужен ли БЭМ в 2025 году?
Что такое flex и flex-shrink?
В чём разница между display: none и visibility: hidden?
Как работает z-index?
Разница между async и defer для script
Что мы проверили:
Плагин не оборачивает правила? Нет, всё ок. После сборки hover был в медиазапросах.
Не работает hover: hover? Проверили в эмуляции мобильных устройств — работает.
Значит, проблема не в плагине.
Мы начали тестировать разные модели через Browserstack. На большинстве устройств всё нормально, но есть одно но.
Samsung Galaxy игнорирует всё.
Ему всё равно, что мы оборачиваем hover в @media (hover: hover). Он отвечает: «Да-да, я поддерживаю hover», а потом предательски залипает.
Наверное, каждый, кто сталкивался с frontend`ом, хотя бы раз использовал адаптивную flex-сетку на N-ном количестве колонок. В данной статье мы не станем рассматривать область применения такого подхода, его плюсы и минусы, а разберем теорию и напишем собственное решение, с брейкпоинтами и настраиваемым спейсингом!
Данная статья, в первую очередь, будет полезна новичкам, однако надеюсь, что и опытныее найдут в ней что-то интересное. Для упрощения жизни, будем использовать SCSS, продублировав CSS «под спойлер».
Данная статья поможет улучшить взаимодействие между дизайнерами и верстальщиками для минимизации ошибок и повышения продуктивности работы.
Работа богата практическими примерами. Она будет полезна специалистам разного профиля.
Дизайн является основой качественной верстки и помогает успешно продолжить создание веб-приложения.
Стандартизированные свойства элементов дизайна (цвета, шрифты, размеры, отступы и т.д.)
Посмотрев на календарь, я понял, что уже 2020, а посмотрев на свою сборку, которая была с 2018 года, я понял, что пора её менять. В этой статье мы разберем структуру проекта, плагины (минимальный набор функционала) и их новые возможности, которые добавились за такое большое время. Мы разберем все моменты, чтобы новичок мог себе скачать эту сборку и начать с ней работать.
Не только древность моей сборки мотивировала на эту статью, но и еще одна причина: мне больно смотреть, когда заходят на онлайн-сервисы для конвертации scss, минификации javascript и других рутинных задач. Самое забавное — когда сделали мелкую правку, снова нужно проходить все круги ада копипаста.
Перед тем, как вы начнете читать, хочу сказать, что материала очень много, поэтому писал только основное. Слишком очевидных вещий старался не писать, но хотел, чтобы смог понять каждый новичок. Если будут непонятные моменты, то смело переходите по ссылкам и читайте более подробную информацию, а потом снова возвращайтесь к статье. Можете задавать вопросы в комментариях, всем постараюсь ответить.
Привет! Представляю вашему вниманию перевод статьи «Introducing Sass Modules» автора Miriam Suzanne.
Недавно в Sass появилась функциональность, которая вам знакома по другим языкам: модульная система. Это большой шаг вперед для @import, одной из наиболее часто используемых функций в Sass. Несмотря на то, что существующая директива @import позволяет вам подключать сторонние пакеты и разделять ваши стили на поддерживаемые элементы, у неё всё же есть несколько ограниченийЧитать полностью »
Я считаю, что в последнее время разница размера экранов между разными группами устройств всё больше размывается. Не смотря на это я попытался написать инструмент для определения, как групп устройств (мобильники, планшеты, лаптопы, десктопы), так и конкретных девайсов (iPhone 5, iPhone X, iPad Pro 12 и т.д.). Получилась, на мой взгляд, довольно удобная пачка SASS-миксинов. И что немаловажно, инструмент прост в использовании, а также позволяет расширять список устройств своим без правки исходников.
Читать полностью »
Приветствую!
Примерно месяц назад я написал статью, в которой выдвинул идею об оптимизации @media screen. Идея заключается в том, чтобы иметь возможность писать значения для всех экранов в одну строку. Более подробно можете почитать по ссылке. Большинство комментариев — это критика относительно реализации, к сожалению идей никто не подкинул. Но если посмотреть с другой стороны, из каждой критики можно вытащить идею, поэтому опираясь на мнение читателей, я поставил себе цель написать миксин, который:
@media);
Давайте посмотрим, что у меня вышло (репозиторий Github)!
Читать полностью »
Доброго времени суток, коллеги!
Давно задавался вопросом, как оптимизировать и сделать более удобным код используя @media screen. Ибо код
body{font-size: 1em;}
@media screen and (max-width: 1024px){
body{font-size: 0.8em;}
}создает достаточно крупные файлы.Читать полностью »