В подборке рассмотрим несколько очень полезных для разработки сайтов. Скорее всего, некоторые из них вы будете применять почти ежедневно.
Содержание:
- Вёрстка CSS.
- Справка и статистика.
- Размер экрана мобильных устройств.
- Кодировка Base64.
- Бонус: анимация и JSON.
- Выводы.
Вёрстка CSS
- Проверка совместимости с браузерами
Один из абсолютных фаворитов подборки — сайт Caniuse.com. Он бесценен при поиске информации о том, поддерживает ли какой-либо браузер CSS-код.
- Удобные генераторы CSS-стилей
Генераторы для создания box shadow, flex code и треугольников при помощи исключительно свойств CSS:
Данные онлайн-инструменты регулярно экономят много времени: вы сможете сначала поиграть с кодом, а затем просто скопировать и вставить его в свой проект.
- CSS для почтовых клиентов
Если вам когда-либо приходилось создавать шаблоны для HTML-почты, то вам для справки пригодится хорошая подборка свойств CSS, работающих в условиях email-рассылки, на сайте Campaignmonitor.com.
Справка и статистика
Сайты как для начинающих, так и для продвинутых разработчиков
- На сайте W3Schools.com можно найти обзоры, учебники и более подробную информацию о HTML, CSS, Javascript и многих других аспектах веб-разработки.
- Ознакомиться с интересной долгосрочной статистикой браузеров можно так же при помощи ресурса W3Schools.com.
Помните, однако, что цифры не обязательно относятся к вашему сайту или веб-приложению: пользователи и устройства/браузеры зависят конкретно от вашего контента.
Размер экрана мобильных устройств
Современные веб-сайты изначально создаются отзывчивыми практически для всех мобильных устройств. Но каковы же размеры маленьких экранов смартфонов?
Ответ здесь Вы найдете на сайте MyDevice.io!
В верхней части располагается много информации о вашем устройстве и браузере, а при прокрутке страницы вниз вы увидите очень подробный обзор всех видов смартфонов, планшетов и даже Google Glass (в разделе “Другие устройства”).
С помощью данного ресурса вы найдете как физические размеры, так и размеры CSS, важные для разработки, но помните, что такие значения представляют весь экран устройства.
Браузерные приложения содержат верхнюю и нижнюю полосы, кроме того, операционная система мобильного устройства также размещает небольшую полосу сверху, поэтому высота CSS всегда меньше, чем указано на сайте MyDevice.io.
Кодировка Base64
Если вам нужно применить data/image вместо <img scr=”myImage.png”>, то принято преобразовывать изображение в кодировку base64 и размещать полученный код в качестве src для изображения:
<img src="data:image/png base64,iVBORw0KGgoAAAANSUhEUgAAAC..." />
То же самое, но для CSS background-image:
background-image: url('data:image/png base64,iVBORw0KGgoAAAANSUhEUgAAAC...');
Ознакомьтесь с инструментом, быстро и удобно справляющимся с конвертацией картинки в кодировку base64 — base64-image.de. Просто перетащите изображение, а затем скопируйте и вставьте код для тега <IMG> или фонового изображения CSS.
Иногда приходится разрабатывать фронтенд для приложений без настоящего корневого веб-каталога. Если нужен только логотип, то кодировка base64 — самый простой для фронтенд-разработчика способ вставить изображение на страницу. В то же время бэкенд-разработчики будут довольны, что им не придется настраивать маршрут к каталогу изображений на сервере.
- Декодирование и кодирование Base64
Иногда приходится иметь дело с исходным кодом писем, к сожалению, HTML-часть зачастую оказывается катастрофой: почтовые клиенты и серверы превращают оригинальную верстку в какой-то странный код с невозможностью дальнейшей его обработки. Но, к частью, с Base64 все в порядке, а на сайте base64decode.org кодировку можно декодировать.
Бонус: анимация и JSON
Ищете классную анимацию загрузки? Вы найдете ее на ресурсе loading.io!
Раньше там была лишь небольшая коллекция фиксированных форм и только цветовые варианты, но теперь сайт предоставляет огромный выбор форм спиннера с генератором CSS стилей формы, цветов и многого другого — удовлетворит все ваши потребности.
Есть бесплатный план с ограниченным доступом, а также ежемесячная и годовая платные подписки.
Если вы работаете с текстом в формате JSON, то вам пригодится веб-сайт jsoneditoronline.org. Просто вставьте JSON и проверьте правильность кода или же предварительно отредактируйте код для исправления недочетов.
Выводы
Все вышеперечисленные инструменты, генераторы и учебники найдены в интернете во время долгой работы в качестве веб-разработчика. Скорее всего, они сэкономят довольно много вашего времени.
Приятного программирования!
Читайте также:
- Как написать хороший HTML & CSS код с помощью Webflow
- 5 функций CSS, которые пригодятся при разработке сайтов
- 7 полезных атрибутов HTML, о которых не все знают
Читайте нас в Telegram, VK и Дзен
Перевод статьи The Tech Maker: My Favorite Webtools and Websites for HTML/CSS Development
