Много лет назад я мечтал о временах, когда хороший интернет войдет в каждый дом. И он пришел, а вслед за ним - мобильный интернет. Борьба за колибайтики продолжается.
Чем больше лет проекту, чем больше итераций редизайна он пережил - тем больше его кодовая база. Разбиение CSS на модули, компонентные стили, хорошая архитектура frontend составляющей - если все это прошло мимо вас, дочитайте до конца, возможно мои мысли покажутся вам разумными.
Это перевод статьи rems and ems, and why you probably don’t need them David Gilbertson.
Наверняка вам приходилось слышать, что для задания размеров текста и блоков на вашем сайте вы должны использовать em или rem единицы, а не эти старомодные пикселы.
Еще, верояно, вы слышали слова “доступное”, “гибкое” и думали, что это звучит довольно не плохо. Возможно, вы даже думаете, что использование пикселей это любительский ход.
Ну, у меня есть для вас отличные новости. Вам не нужно портить свою жизнь с этими надоедливыми единицами.
Это перевод статьи Optimizing MP4 Video for Fast Streaming автора BILLY HOFFMAN.
С уходом Flash и ростом доли мобильных устройств все большую популярность приобретает html5 видео. В одной из статей мы даже рассказывали о том, как повысить скорость вашего сайта заменив GIF анимации html5 видеороликами. Тем не менее, видео файлы также требуют некоторых оптимизаций, которые необходимо выполнить для того, чтоб эффективно использовать их на сайте. Наиболее важным шагом оптимизации можно назвать оптимизацию видео контента к потоковому воспроизведению на сайте. Без такой оптимизации воспроизведение видео может быть задержано на сотни миллисекунд и мегабайты трафика ваших пользователей будут потрачены впустую из-за безуспешных попыток воспроизвести ролик. В этой статье я расскажу вам, как оптимизировать ваши видео файлы для потокового воспроиведения видео.
Это перевод статьи Image Optimization автора Estelle Weyl.
Наверное, каждый веб-разработчик знает, что когда речь заходит о производительности и удобстве ипользования (UX) каждое изображение на странице имеет огромное значение: первые плоды в оптимизации web-страниц может принести именно работа с изображениями. Использование методик сжатия изображений без потерь качества позволяет снизить суммарный размер страницы не нанося ущерба пользовательскому опыту (UX) работы с такими страницами, тем самым, улучшая производительность и увеличивая конверсию. Существует много методов для определения того, какие изображения поддерживаются, и вам остается только подготовить “правильные” изображения и отдать их пользователю. Создание оптимальных изображений для всех пользователей на всех типах устройств должно стать целью всех разработчиков (доступность должна стать еще одной целью, но сейчас не об этом).
Это перевод статьи Why I Don’t Use CSS Preprocessors автора Jens Oliver Meiert .
Хоть и с опозданием, но хочу присоединиться к Роджеру Йохансону (Roger Johansson): я не использую препроцессоры, а точнее, никогда не использую в своих личных проектах, так как препроцессоры для меня, это решение с дополнительными проблемами.
Это перевод статьи Web Accessibility — Developing web with empathy автора Param Singh.
От переводчика
Эта статья начинает серию переводов интересных мне статей на тему web и frontend. Надеюсь, такая практика подтянет мой английский и принесет что-то полезное
Даже имея за плечами многолетний опыт разработки, мы забываем одну действительно важную вещь под названием Web Accessibility (Доступность в WEB).
webp это “новый” формат изображений для web от google. Новый, в сравнении с общепринятыми форматами jpg, png, gif. По заявлениям самого google их формат на 25-34% “легче” по сравнению с jpeg форматом (по SSIM) и на 26% меньше чем png по тем же оценкам. В реальности же легко можно получить десятикратный выигрыш в размере файла в случае конвертации больших jpg изображений в webp (например, вот таким сервисом или любым другим доступным вам способом).
В версии BxSlider v4.1.2 имеется досадный баг (или фича), который делал мне нервы. Все дело в том, что bxSlider на столько хорош, что умеет делать предварительную загрузку изображений (и даже содержимого iframe) перед тем, как начнет свою полноценную работу. И вот тут то и кроется эта самая фича ака баг.
Давно не верстал html рассылки, а тут подвернулась задачка. Решил написать себе руководство-напоминание о том, как обойти основные грабли при верстке html рассылок.
У “1С-Битрикс Управление сайтом” есть чудесный механизм формирования meta-тегов с автоподстановками и барышнями. Да только вот текст, формируемый этими подстановками, выходит не очень читаемым. Но, возможность подставить в meta-данные страницы разные параметры, взятые, например, у товара (название, цвет, цена) сама по себе шикарна.
Клево иметь возможность задать Title странице: “Купить {this.NAME} {this.COLOR} за {this.PRICE}” и получить красивые заголовки. А еще круче иметь возможность получить заголовки, которые не разрывают мозг своим набором несогласованных между собой слов - “Купить Джинсы Красный 10 000 руб”.
А что нужно сделать первым делом? Пойти в Маркет плейс Битрикса. Попытка окончилась неудачей, потому начались поиски решения.