От автора: один из самых мощных и недостаточно используемых CSS-селекторов – это комбинатор общего родителя или ~. В последующих статьях я расскажу про разные способы создания не только привлекательных, но и функциональных и полезных компонентов с помощью ~. В этом уроке мы разберем с вами элементы формы: радиокнопки, чекбоксы и обычные инпуты.

Читать далее →

От автора: четкого мнения по поводу преимуществ минификации HTML нет, однако если протестировать свой сайт на PageSpeed Insights, часть советов будет в сторону минификации HTML, CSS и JavaScript. Минификация ресурсов – избавление от избыточных элементов, элементов, которые не нужны браузеру для правильной обработки документа.

Читать далее →

От автора: в поддержку использования масштабируемой векторной графики или SVG в интернете говорит несколько положительных факторов. Относительно небольшой вес, безусловно, один из них. Однако тут есть некоторые оговорки. Давайте разбираться.

Читать далее →

От автора: если в HTML есть ошибки, на экране вы этого не заметите. Поэтому они довольно легко закрадываются в код, могут проскакивать несемантические и недоступные элементы, и это нельзя заметить сразу. Линтить HTML и исправлять ошибки можно разными способами. Например, с помощью W3C Markup Validation Service. Другой способ – использовать продвинутые селекторы для подсвечивания потенциальных областей с ошибками. Такой способ гораздо легче интегрировать в процесс разработки. Ниже представлены несколько способов, как с помощью CSS-селекторов можно линтить разметку.

Читать далее →

От автора: с помощью вьюпорт единиц измерения и функции calc() можно настраивать размер font-size и других свойств относительно размера экрана. То есть размер может быть жидким. Шрифт не будет всегда фиксированным или прыгать с размера на размер в медиа запросах.

Читать далее →

От автора: для MarsBased 2016 стал годом настоящих испытаний. Весь год мы работали над 16 разными проектами. Я устроился на полный рабочий день только в июне, но сразу был вовлечен в большую часть проектов на этапах дизайна, UX и frontend разработки.

Читать далее →

От автора: сегодня один из тех дней, когда мне пришлось загуглить очередной вопрос по доступности. Я работаю над новым проектом под названием Provata. Передо мной стала задача создать прикольный и, казалось бы, простой вспомогательный тултип, который пояснял бы читателям/пользователям, что такое Framingham calculator.

Читать далее →

От автора: по своему определению разработка стилей включает в себя установку CSS свойствам новых значений. Сложные стили, в конечном счете, доходят до такой точки, когда необходимо «потереть» CSS значения, т.е. сбросить их на начальные. В отдельных случаях первоначальные значения известны, их легко запомнить. У других же свойств все не так. К счастью, современный CSS дает нам простой способ сброса свойств.

Читать далее →

От автора: каждый разработчик знает, что в вопросе веб-производительности и пользовательского опыта важно каждое изображение. Изображения – это низко висящие плоды оптимизации производительности. Сжатие без визуальной потери качества может принести пользу организациям путем снижения веса страниц без ущерба для работы пользователя, что повышает производительность и привлекает все больше аудитории. Существует множество техник, для определения того, какое изображение необходимо загрузить, но эти «правильные изображения» еще необходимо создать. Целью веб-разработчиков и сервисов по повышению производительности должно быть обеспечение всех пользователей на всех типах устройств и во всех браузерах оптимальными изображениями. (Другой целью должна быть доступность, но это тема для отдельной статьи!).

Читать далее →

От автора: после неожиданных пустых мест на странице, возможно, самая распространенная проблема в макетах – это перекрытие контента. К счастью, причин, вызывающих такое поведение, очень мало, и есть хорошие способы решения таких проблем.

Читать далее →