Сайты для генерации вёрстки HTML/CSS
Сайты для генерации вёрстки HTML/CSS, которые ускоряют разработку адаптивных интерфейсов. Многие из сайтов в подборке вы, вероятно, будете использовать ежедневно. Ещё бы, ведь здесь множество инструментов, которые избавляют вас от рутины, ошибок и ускоряют разработку.
Вёрстка 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 и проверьте правильность кода или же предварительно отредактируйте код для исправления недочетов.
