![[Перевод] Веб-альманах 2019: Доступность](https://habrastorage.org/webt/zh/ob/dx/zhobdxw5zuxhsslisficaaujawm.jpeg)
Доступность в вебе имеет важное значение для равноправного и справедливого общества. Чем больше наша социальная и профессиональная сфера жизни переходит в онлайн, тем более важной для людей с ограниченными возможностями становится способность принимать участие во всех онлайн взаимодействиях без дополнительных барьеров. Подобно тому, как архитекторы зданий могут заботиться или пренебрегать технологиями доступности, такими как рампы для инвалидных колясок, веб-разработчики могут помогать
Подробнее![[Перевод] Опрос по инструментам фронтенда 2019 — результаты](/uploads/habrahabr_logo.png){kind=logo}
TL;DR. В большинстве категорий теперь выделяются явные лидеры — несколько лет назад такого не было. Это помогает накоплению знаний. Поэтому Навыки владения инструментами в среднем становятся глубже у разработчиков всех уровней. В этом году 3005 разработчиков ответили на 27 вопросов, охватывающих широкий спектр инструментов и методологий фронтенд-разработки. Как всегда, огромная благодарность всем, кто нашёл время заполнить опросник. Со своей стороны, прошу прощения за задержку с
Подробнее![[Перевод] Решение проблемы зазубренных линий в градиентах](https://habrastorage.org/webt/yz/_i/_5/yz_i_5avkh_5mwuju0mqhaeolha.png)
Одним из достаточно распространенных шаблонов проектирования дизайна, с которым вы, вероятно, сталкивались, являются блоки с угловым переходом градиентных цветов. Это выглядит примерно так, как показано на изображении ниже. Угловой градиент внутри прямоугольника Читать дальше →
Подробнее![[Перевод] Медиавыражения в CSS — это не только max-width](https://habrastorage.org/webt/_y/nf/pw/_ynfpwj--bn8m_sezhz_jcwjg18.jpeg)
Недавно мы опубликовали новый веб-сайт нашей компании Mabiloft с полностью переработанным чистым дизайном и множеством новых великолепных иллюстраций и анимаций. После того, как наш дизайнер проделал потрясающую работу, продумав и нарисовав сайт, нам, разработчикам, было необходимо реализовать макет, сохранив его чистым и цельным для каждого устройства, от большого 2K экрана, на которых мы пишем код, до старого iPhone 4 с его 3.5-дюймовым дисплеем. Несколько недель спустя веб-сайт был
Подробнее
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него. Читать дальше →
Подробнее
Google Page Speed Insights — это сервис от гугла, который позволяет определить производительность сайта и дает рекомендации по его оптимизации. Очень важно понимать, что это всего лишь рекомендации! Некоторые воспринимают эти рекомендации настолько серьезно, что готовы реализовать все что там написано в ущерб функционалу своего сайта, что в итоге может даже навредить. Но это довольно сложная тема с множеством нюансов, а данная статься лишь мои мысли в слух и пара замечаний самому google.
Подробнее![[Перевод] А есть ли случайные числа в CSS?](https://habrastorage.org/webt/2t/ea/ui/2teauihp2yxlixt6ktyuu_5dayw.jpeg)
CSS позволяет создавать динамические макеты и интерфейсы в Интернете, но как язык разметки он является статическим — после установки значения его нельзя изменить. Идея случайности не обсуждается. Генерация случайных чисел во время выполнения — это территория JavaScript, а не CSS. Или нет? Если мы учтем небольшое взаимодействие с пользователем, мы на самом деле можем генерировать некоторую степень случайности в CSS. Давайте взглянем! Читать дальше →
Подробнее![[Перевод] Улучшите свой CSS с помощью этих 5 принципов](https://habrastorage.org/webt/qn/nz/3x/qnnz3xb9sbvigez2c97n4hxj5um.jpeg)
Написание CSS — процесс достаточно простой и понятный, тогда почему для этого требуются еще какие-то принципы и best-practices? По мере увеличения масштабов проекта и количества людей, работающего над ним, всё более и более явно начинают проявляться новые сложности, которые могут вызвать серьезные проблемы в будущем. Дублирование кода, сложные цепочки переопределения свойств, использование !important, оставшиеся и неиспользуемые CSS-свойства от удаленных HTML-элементов и так далее. Такой
Подробнее![[Перевод] Оформляйте стили наведения, фокуса и активного состояния по-разному](https://habrastorage.org/webt/rs/qm/le/rsqmleipmlit0blwpc2sykpgerm.png)
В течение многих лет я оформлял состояния элементов :hover, :focus и :active одинаково. Не помню точно, когда именно начал это делать. Но это далеко не лучший подход. Почему, постараюсь объяснить в этой статье. Читать дальше →
Подробнее
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него. Читать дальше →
Подробнее
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него. Читать дальше →
Подробнее![[Перевод] Создание Scrapbook-макета на CSS Grid](https://habrastorage.org/webt/co/84/km/co84km1cpdhbrsdnprqdgmki2tw.jpeg)
Недавно на уроках дошкольной подготовки моему сыну поручили в течение недели присматривать за плюшевым мишкой, что предполагало необходимость взять мишку в какое-то приключение, а свои воспоминания об этом добавить в альбом. Мне очень понравилось делать этот альбом и подтолкнуло к мысли о том, как бы я сделал нечто подобной с помощью CSS Grid! Читать дальше →
Подробнее