Все для web разработчика скрипты статьи сервисы. Джентльменский набор разработчика

Рассказываю, как быстро оптимизировать изображения сайта под качественное отображение на дисплеях Retina, используемых на новых MacBook, iMac, iPhone, iPad и т.д. Как обычно, перед этим немного теории и моих практических советов.

Начнем с определения:

Rétina (от лат. retina - сетчатка) - общее маркетинговое название ЖК-дисплеев, используемых в устройствах Apple и отличающихся настолько высокой плотностью пикселей, что человеческий глаз не способен заметить, что изображение состоит из них.

Пожалуй, на этом теоретическую часть закончим. Кому интересно устройство Ретина-дисплеев, могут без особого труда найти более глубокие сведения на специализированных ресурсах.

Итак, вы наверняка замечали, что на Ретине часть графики большинства сайтов расплывается. Правильнее сказать, выглядит не очень четко по-сравнению с другими элементами интерфейса. Что бывает заметно даже невооруженным взглядом. Не сложно понять - плывет растровая графика. С вектором все в порядке, он отлично масштабируется на любом разрешении и с любой плотностью пикселей. Существуют ряд способов борьбы с этой проблемой, разработаны целые библиотеки, с помощью которых вы можете полностью адаптировать свой сайт под Ретину. Но сегодня речь пойдет немного о другом.

На мой взгляд, адаптация растра - это не совсем разумный подход. Я считаю, что уже давно пришло время избавляться от него в интерфейсе и полностью переводить его элементы в векторную графику. Например, в SVG . Кроме того, с помощью новых стилей CSS3 можно избавиться от растровой мазни в градиентах, тенях на кнопках и других элементах интерфейса. Некогда популярные на рубеже столетий растровые иконки тоже уже давно умерли и используются разве что отсталыми любителями. На смену им пришел все тот же векторный SVG и столь любимые веб-разработчиками библиотеки шрифтовых иконок. Вы удивитесь, но интерфейс практически любого сайта можно без особых хлопот избавить от растра. Тем самым навсегда избавив его от проблем с отображением на дисплеях высокой четкости.

Если вам не удалось избавиться от растра полностью, не расстраивайтесь! Пара-тройка растровых изображений в интерфейсе сайта - это не беда и вовсе не проблема. Я вам расскажу как просто и грамотно с помощью нескольких строк CSS адаптировать ваше растровое изображение для корректного отображения на Retina-дисплее.

Не вдаваясь в подробности ситуации, возьмем простой пример. У вашего сайта графически-сложный логотип, который невозможно или затруднительно конвертировать в векторный формат. Давайте опустим логичные вопросы: как так получилось, что нет векторного логотипа и что это за такой логотип, который невозможно отобразить в векторе. Наша задача сделать отображение логотипа на Ретине четким, избавившись от мыла.

1. Вам понадобится изображение логотипа в два раза большее оригинала. Например, у вас имеется логотип logo.png размером 300х100 px. Следовательно, вам нужно создать аналогичное изображение, но размером в два раза больше, т.е 600х200 px. Разумеется, не простым масштабированием в Фотошопе старого маленького логотипа. Создаем новую качественную четкую картинку, желательно из вектора, называем ее, например, [email protected] и сохраняем рядом с основным логотипом.
2. Затем открываем в редакторе файл стилей вашего сайта и находим место, где задан стиль отображения вашего логотипа. Обычно это что-типа такого:

Нам нужно лишь дописать медиа-запрос, чтобы для дисплеев у которых соотношение физических и CSS-пикселей больше 1.5, загружалась наша новая картинка logo2x.png

Делается это очень просто:

@media all and (-webkit-min-device-pixel-ratio: 1.5) { #logo { background-image: url("images/[email protected]"); background-size: 300px 100px; } }

Не забудьте задать размеры бэкграунда такие же как у исходного изображения. В нашем случае 300х100 px .

Понятно, что данный способ целесообразно использовать для небольшого количества конкретных изображений. Если вы хотите иметь поддержку Ретины в том числе и в контенте - используйте другие способы. О них мы поговорим в другой раз.

Подпишитесь на мой телеграм и первыми получайте новые материалы, в т.ч. которых нет на сайте.

• Перевод

После недавнего выпуска Retina MacBook Pro и The new IPad, экраны с увеличенной плотностью пикселей начали активно входить в нашу жизнь. Что это значит для веб-разработчиков?

Для начала разберемся в терминологии.

Физические пиксели

Физические пиксели (device pixel или physical pixel) - привычные нам пиксели: самые маленькие элементы любого дисплея, каждый из которых имеет свой цвет и яркость.

Плотность экрана (Screen density) - это количество физических пикселей дисплея. Обычно измеряется в пикселях-на-дюйм (PPI: pixels per inch). Apple, разработав Retina-экраны с двойной плотностью пикселей, утверждает, что человеческий глаз не способен различить бо′льшую плотность.

CSS-пиксели

CSS-пиксели (CSS pixels) - абстрактная величина, используемая браузерами для точного отображения контента на страницах, вне зависимости от экрана (DIPs: device-independent pixels). Пример:

Соотношение между физическими и CSS-пикселями можно устанавливать так:
device-pixel-ratio, -o-device-pixel-ratio, -moz-device-pixel-ratio, -Webkit-device-pixel-ratio { … }

Или так:
device-pixel-ratio, -o-min-device-pixel-ratio, min--moz-device-pixel-ratio, -Webkit-min-device-pixel-ratio { … }

В Javascript добиться этого можно, используя
window.devicePixelRatio

Растровые пиксели

Кроме растрового разрешения, изображения в интернете имеют абстрактные размеры в CSS-пикселях. Браузер сжимает или растягивает изображении в соответствии с его CSS-шириной и -длиной. При отображении на обычном экране один растровый пиксель соответствует одному CSS-пикселю. На Retina-экранах каждый растровый пиксель умножается в 4 раза:

Оптимизация

HTML и CSS-масштабирование

А таким на Retina:

Есть несколько способов реализации HTML и CSS-масштабирования:

HTML

Где использовать: на одностраничных сайтах с несколькими изображениями.

Javascript

Где использовать: на сайтах с несколькими изображениями в контенте.

CSS (SCSS)

Можно использовать псевдоэлементы:before или:after
.image-container:before { background-image: url([email protected]); background-size: 200px 300px; content:""; display: block; height: 300px; width: 200px; }

Техника работает и при использовании спрайтов:
.icon { background-image: url([email protected]); background-size: 200px 300px; height: 25px; width: 25px; &.trash { background-position: 25px 0; } &.edit { background-position: 25px 25px; } }

Где использовать: на сайтах с ограниченным количеством фоновых изображений (например одним в качестве спрайта).

HTML и CSS-масштабирование: плюсы

• Простота реализации
• Кроссбраузерность

HTML и CSS-масштабирование: минусы

• Устройства с обычными экранами будут скачивать лишние мегабайты
• На обычных экранах четкость изображений может пострадать из-за алгоритмов сжатия
• Параметр background-size не поддерживается в IE 7 и 8.

Определение плотности пикселей экрана

CSS

Где использовать: на сайтах или в приложениях, в которых применяется background-image для элементов дизайна. Не подходит для изображений внутри контента.

Плюсы

• Кроссбраузерность

Минусы

• Утомительно внедрять, особенно на крупных сайтах
• Использование изображения контента в качестве фона семантически некорректно

Javascript

Существует специальный Javascript плагин Retina.js , который умеет делать все вышеописанное, но с дополнительными возможностями, такими как пропуск внешних изображений и пропуск внутренних, но не имеющих retina-копий.

Где использовать: на любых сайтах с изображениями в контенте.

Плюсы

• Простота внедрения
• Устройства не скачивают лишние изображения
• Контроль плотности пикселей на сайте

Минусы

• Retina-устройства скачивают оба варианта каждого изображения
• Подмена изображений заметна на retina-устройствах
• Не работает в некоторых популярных браузерах (IE и Firefox)

Масштабируемая векторная графика

В этом примере простое SVG-изображение может быть как угодно масштабировано:

То же самое получится с применением CSS:
/* Использование фонового изображения */ .image { background-image: url(example.svg); background-size: 200px 300px; height: 200px; width: 300px; } /* Использование content:url() */ .image-container:before { content: url(example.svg); /* width and height do not work with content:url() */ }

Для поддержки IE 7 или 8 и Android 2.x потребуется использование заменяющих PNG-изображений. Это можно легко сделать с помощью Modernizr :
.image { background-image: url(example.png); background-size: 200px 300px; } .svg { .image { background-image: url(example.svg); } }

Для лучшей кроссбраузерности, чтобы избежать проблем растеризации в Firefox и Opera, следует сделать каждое SVG- изображение соответствующим его родительскому HTML-элементу.

В HTML можно реализовать аналогичное с помощью нужного data в теге a:

С использованием jQuery и Modernizr:
$(document).ready(function(){ if(!Modernizr.svg) { var images = $("img"); images.each(function(i) { $(this).attr("src", $(this).data("png-fallback")); }); } });

Где использовать: на любых сайтах, подходит для иконок, логотипов и простых векторных иллюстраций.

Плюсы

• Единый набор изображений для всех устройств
• Простота реализации
• Бесконечное масштабирование

Минусы

• Нет точного сглаживания «до пикселя»
• Не подходит для сложной графики из-за больших размеров файла
• Нет встроенной поддержки в IE 7, 8 и в ранних версиях Android

Иконочные шрифты

С помощью CLI мы можем оптимизировать и автоматизировать процесс веб-разработки. И именно поэтому в этой статье мы описали несколько замечательных инструментов, которые ты можешь запускать как на десктопе, так и на сервере. Помимо того, в нашем списке есть также инструменты PHP и библиотеки JavaScript. Ну что же, давай пройдемся по каждому из них.

Guetzli

Новый инструмент от Google, позволяющий сжимать изображение на 35 % от первоначального размера, сохраняя при этом качество. Это настоящая находка, учитывая, что аналогичные программы с открытым исходным кодом (например, JPEGOptim и jpegtram) могут это делать только на 20 %. Похоже, что скоро будет запущено несколько приложений и плагинов для CMS, которые интегрируют Guetzli для оптимизации изображений в формате JPEG.

/

Developer Roadmap

В общем-то, это инфографика, показывающая путь веб-разработчика. Есть три направления - Front-end, Back-end и DevOps. С помощью этой штуки можно рассмотреть на каком этапе ты сейчас находишься, что мог пропустить и куда будешь двигаться дальше.

/

Netlify CMS

SmashingMagazine сделали смелый шаг - избавились от WordPress и решили попробовать что-то новое с другой CMS под названием Netlify CMS. Это абсолютно новый инструмент, встроенный в React.js, который может быть интегрирован в такие статичные генераторы сайтов как Jekyll, Hugo и MiddleMan.

/

BadSSL

Это веб-ресурс, который позволяет проверить конфигурацию SSL. BadSSL - это классный и удобный инструмент для поиска и исправления багов по SSL на твоем сайте.

/

Alix

Расширение для Chrome, которое позволяет проверять доступ к твоему сайту. После установки и активации плагин добавляет overlay-окно на страницу, которое предупреждает об ошибках.

/

AR.js

Эта библиотека JavaScript позволяет создавать и работать с дополненной реальностью, используя веб-технологии. Удивительно быстро работает на смартфонах.

/

React Trend

Это компонент из Upsplash для создания линейных диаграмм с показом трендов. Он настраивается: можно установить толщину линии, цвет, градиенты и гладкость кривой. также можно использовать GUI для удобного создания кода компонента.

/

Gitee

Приложение для macOS, которое мониторит твою активность на GitHub. Инструмент добавляет новый элемент в строку состояния, на котором указывает количество звезд, подписчиков и уведомлений. Если кратко, это GitHub на рабочем столе.

/

Goops

Goops - это удобный интерфейс командной строки, который анализирует каталог твоего проекта и определяет каталог и файлы для добавления в.gitignore. CLI может быть установлен через NPM. После установки нужно набрать goops и, собственно, все.

/

Debug CSS

DebugCSS - это утилита CSS-drop, которая анализирует и проверяет твой вывод CSS в браузере. Инструмент сам по себе похож на Alix - когда ты загружаешь страницу debugCSS, приложение выделяет баговые элементы на странице и выдает предупреждения.

EagleJS

EagleJS - это библиотека JavaScript для создания презентаций, похожая на RevealJS. EagleJS построена с использованием Vue.js, JavaScript MVC framework и использует Pug в качестве системы шаблонов для создания слайда.

BootstrapTour

Библиотека JavaScript для создания pop-up гайдов с использованием компонента Bootstrap. Как правило, всплывающие подсказки приложения появляются, когда новый пользователь просматривает их через интерфейс приложения. Это идеальная библиотека, если твой сайт создавался с использованием Bootstrap.

Brick

Это библиотека JavaScript, которая служит для создания пользовательского интерфейса веб-приложений. Среди компонентов, входящих в коллекцию, ты найдешь такие функции, как календарь, меню и форма. Он также содержит компонент «storage-indexeddb», позволяющий хранить клиентские данные с помощью IndexedDB.

OctoTree

OctoTree - это полезная утилита, которая позволяет просматривать исходные коды и файлы на Github с помощью структуры Tree, как в редакторе IDE. Он используется в качестве плагина для Chrome, Safari, Firefox и Opera и доступен в их официальном магазине расширений. Octotree поддерживает репозиторий Private и Enterprise Github.

.

Github Notification

Еще одно полезное расширение Github для Chrome. После установки ты сможешь получать уведомления, даже если ты не находишься на странице Github.

Deployer

Deployer - это инструмент разработки твоего PHP-сайта. Он работает со многими популярными платформами, включая WordPress, Drupal, Magento, Laravel и CodeIgniter. С помощью этого инструмента ты можешь создавать свои собственные алгоритмы, которые запускаются при разработке. Он работает с функцией отката, которая позволяет возвращаться к предыдущей версии.

PHPStan

Сканирует файлы PHP с целью поиска ошибок.

NGINX Boilerplate

Коллекция конфигураций Nginx, которые включают в себя кэширование бэкэнд, ограничение скорости соединения и запросов, а еще некоторые другие методы для увеличения скорости загрузки сайта.

Bubbly

Командная строка, которую ты можешь установить на свой сервер для создания, управления и обновления сертификата с помощью Let’s Encrypt. Doplying SSL теперь становится намного проще.

,

Waffle Grid

Еще одна структура CSS-сетки, построенная с использованием Flexbox.

Тебе будет интересно:

Существует огромное количество инструментов для веб-разработчиков. Некоторые из них действительно незаменимы, другими можно пользоваться время от времени, выполняя какие-либо специфические задачи. Эти инструменты объединяет одно – они помогают превратить хорошие идеи в превосходный дизайн. Новые инструменты появляются очень часто, а быстрое распространение облачных технологий уже привело к тому, что некоторые разработчики практически не используют программы, которые нужно запускать с жесткого диска – все необходимые для работы инструменты можно найти в онлайне. FreelanceToday предлагает вашему вниманию 10 лучших инструментов для веб-разработчиков.

Тим Петруски, разработчик из Германии, создал очень интересный сайт. Он запустил веб-сервис под названием We Love Icon Fonts, которые работает так же, как Google Web Font, но только не с шрифтами, а с иконками. Его коллекция постоянно пополняется, так что многие разработчики смогут найти на сайте комплекты иконок, которые можно будет использовать в своих проектах. Подключить нужный набор можно всего за несколько минут. Достаточно прописать в CSS предоставленный сервисом код и после этого отображение значков будет обеспечивать выступающий в качестве хостера We Love Icon Fonts.

Maskew – это очень интересная Javascript-библиотека, которая позволяет быстро создавать перекосы элементов. На сайте есть пример, как можно добиться нужного эффекта. Иногда такие элементы смотрятся очень впечатляюще и будет полезно знать, что есть онлайн-инструмент, созданный специально для этого.

Сервис UXPim – это инструмент, который может пригодиться во время совместной работы над проектами. Он разработан для быстрого решения проблем, связанных с UX. Создатели сервиса являются специалистами, хорошо разбирающиеся в различных аспектах UX. Одним из очень важных достоинств UXPin является возможность коллективной работы в режиме реального времени. Это позволяет вовремя отслеживать ошибки на всех этапах создания сайта или приложения. Очень полезный инструмент, который позволяет работать над проектом, одновременно тестируя его на юзабилити.

Этот генератор теней может стать одним из самых полезных инструментов в арсенале веб-разработчика. С его помощью можно создавать красивые эффекты теней для самых разных шрифтов. На сайте можно найти огромное количество бесплатных тем. Чтобы применить эффект, понадобится скачать код и внедрить его в CSS. Использование инструмента открывает большие возможности для дизайнеров – представленные эффекты можно применять к заголовкам, баннерам, логотипам и любым текстовым блокам.

Over API – сервис, который по достоинству оценят все без исключения веб-разработчики. Это ресурс, на котором можно найти подсказку касательно любого вопроса, связанного с созданием сайтов и приложений. Все разложено по полочкам, так что найти нужную информацию не составит труда. По сути, это огромная онлайн-шпаргалка для разработчика. Зная о ней, нет необходимости держать все в голове – нужный код, сценарий и многое другое находится всего в паре кликов.

Scratchpad – это текстовый редактор для работы с HTML и CSS. Работает в режиме реального времени, сразу показывает, как будет отображаться код, с его помощью также можно обмениваться ссылками с другими пользователями. Также Scratchpad умеет сам закрывать теги. Идеальный инструмент для изучения и преподавания HTML/CSS.

CSS3 Generator – очень полезный инструмент, особенно для веб-дизайнеров, которые недостаточно хорошо знакомы с CSS. Если что-то забылось или просто не хочется тратить время на создание кода, можно воспользоваться CSS3 Generator. Там все очень просто: нужно лишь выбрать нужный эффект, настроить его с помощью нескольких ползунков, скопировать код и вставить его в свой проект. Сервис можно использовать как по прямому назначению, так и в качестве учебного пособия – смотря, как меняется код в зависимости от выбранных настроек, становится проще понять, как можно быстро добиться нужного результата.

Viewport Resizer – простой и удобный инструмент для тестирования сайтов на отзывчивость. Если нужно посмотреть, как сайт будет отображаться на различных мобильных устройствах, достаточно просто перетащить мышкой синюю кнопку с надписью Click or Bookmark на вкладку уже открытого для тестирования сайта. Верху страницы появится панель с иконками различных устройств: смартфонов, планшетов, ноутбуков. Кликнув по иконке, можно увидеть, насколько сайт является mobile friendly. Сервис по умолчанию показывает устройства Apple, но с помощью настроек можно выбрать любое другое разрешение экрана.

Инструмент MakeAppIcon преобразует исходное изображение в иконку приложения в формате PNG. Эту несложную операцию можно легко сделать вручную, но сервис может сэкономить немного времени, так как выбранное изображение ресайзится под все стандартный размеры иконок для Android и iOS.

При разработке сайтов порой не бывает под рукой нужных изображений. Но если знать размер картинки, то можно взять любое изображение, которое будет выступать в качестве «рыбы». Но зачем тратить время на поиск и обработку картинки, если есть очень полезный инструмент Fake Images Please? Этот сервис генерирует фиктивные изображение с URL, которые можно с использовать в работе над дизайном. Можно выбрать не только размер, но и цвет и даже текст.