Сайты для генерации верстки HTML/CSS, которые ускоряют разработку адаптивных интерфейсов

В подборке рассмотрим несколько очень полезных для разработки сайтов. Скорее всего, некоторые из них вы будете применять почти ежедневно. 

Содержание:

  1. Вёрстка CSS.
  2. Справка и статистика.
  3. Размер экрана мобильных устройств.
  4. Кодировка Base64.
  5. Бонус: анимация и JSON.
  6. Выводы.

Вёрстка CSS

  • Проверка совместимости с браузерами

Один из абсолютных фаворитов подборки  —  сайт Caniuse.com. Он бесценен при поиске информации о том, поддерживает ли какой-либо браузер CSS-код.

  • Удобные генераторы CSS-стилей

Генераторы для создания box shadow, flex code и треугольников при помощи исключительно свойств CSS:

  1. CSSmatic box-shadow.
  2. The Echoplex flexyboxes.
  3. CSS-triangle-generator.

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

  • 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 и проверьте правильность кода или же предварительно отредактируйте код для исправления недочетов.


Выводы

Все вышеперечисленные инструменты, генераторы и учебники найдены в интернете во время долгой работы в качестве веб-разработчика. Скорее всего, они сэкономят довольно много вашего времени.

Приятного программирования!


Читайте также:

Читайте нас в TelegramVK и Яндекс.Дзен


Перевод статьи The Tech Maker: My Favorite Webtools and Websites for HTML/CSS Development

Предыдущая статьяЗачем Python столько знаков подчеркивания?