Автоматическая перезагрузка страницы в браузере при сохранении файла

В этом уроке я расскажу тебе о полезном плагине "LiveReload", при помощи которого после сохранения файла, происходит автоматическая перезагрузка страницы.

👨🏻‍💻 ИЗУЧИТЬ УРОК | #sublime #html

​ColorZilla - расширение для выбора цвета на сайте

Является аналогом пипетки в Photoshop. Может быть установлено в Firefox либо Chrome. Вызывается простым нажатием на кнопку расширения. Поддерживает историю цветов, анализ палитры на сайте и автоматическое копирование цвета в буфер обмена.

#расширение

​Atom - редактор кода

Бесплатный текстовый редактор с открытым исходным кодом для Linux, macOS, Windows с поддержкой плагинов, написанных на Node.js, и встраиваемых под управлением Git. Большинство плагинов имеют статус свободного программного обеспечения, разрабатываются и поддерживаются сообществом.

#редактор

​CSS Gradient - генератор CSS-градиентов

Включает в себя минимум необходимых настроек: тип, количество переходов, их позиции, HEX/RGBA кодировки цветов, угол наклона и прозрачность. Результат отображается ниже в виде CSS стилей градиента. Для совместимости с IE6+ присутствует соответствующая кнопка.

#генератор #css

​1001freefonts - сайт со шрифтами

Вопреки своему названию, на сайте содержится более 10000 различных шрифтов. Их можно сортировать по стилю, названию и новизне. Присутствует превью по введенному тексту. Пример показан на скриншоте. Большая часть шрифтов доступна для бесплатного использования.

#сайт #шрифты

​animejs.com - библиотека для анимаций

Предназначена для добавления анимации HTML и SVG объектам на веб-странице. Является легковесной и простой библиотекой с наглядной документацией. Поддерживает как обычные перемещения, так и параметрические, циклы и привязки к таймлайну.

#библиотека #javascript

​tinypng.com - сайт сжатия изображений

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

#сайт

​WhatFont - расширение, определяющее шрифт текста на сайте

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

#расширение

Библиотека для анимаций "Anime.js"

По результатам проведенного голосования, вы выбрали статью на тему создания анимаций при помощи библиотеки "Anime.js". Собственно приступаем к её изучению!

👨🏻‍💻 ИЗУЧИТЬ УРОК | #статья

​zeplin.io - лучший помощник для дизайнера и верстальщика

Позволяет создавать проект с макетами различных разрешений. Отступы и размеры элементов отображаются при наведении мышки. При выделении элемента сбоку появляется блок с его CSS-стилями, которые можно копировать и сразу вставлять в код проекта. Сервис позволяет экспортировать в себя проекты созданные в Photoshop, Sketch, Adobe XD и Figma.

#сервис

​materialpalette.com - генератор палитры в стиле материального дизайна

Сайт генерирует палитру Material Design на основе выбранных цветов. Отображает окно интерфейса для предпросмотра. Позволяет как скопировать отдельно RGB кодировку цвета, так и всю палитру в различных форматах. Например: CSS, SASS, LESS, SVG и PNG.

#сайт #палитра

​squoosh.app - оптимизатор изображений

Сайт оптимизирует размер изображения с минимальной потерей качества. Значение сжатия можно регулировать от 0 до 100 процентов. Экран сайта делится ползунком на две части. Слева отображается оригинальное изображение, справа оптимизированное. Ползунок можно перемещать для наглядности.

#сайт

​Balsamiq Mockups - позволяет создавать макеты интерфейсов

Сервис предназначен для прототипирования пользовательских интерфейсов. В частности веб-сайтов, мобильных и десктопных приложений. Включает в себя стандартный набор наиболее популярных элементов интерфейсов. Поддерживает сохранения макета в виде PNG-картинки либо PDF-файла.

#программа

​coolors.co - генератор цветовой палитры

Основная зона сайта представляет собой цветовые столбцы. При клике на каждый столб отображается палитра от самого темного оттенка указанного цвета, до самого светлого. Сформированную палитру можно экспортировать во множество разных форматов: CSS, SVG, ASE, изображение, PDF-файл и т.п. Так же можно сгенерировать цветовую палитру по загруженному фото.

#сервис

​www.lastpass.com/username-generator - генератор безопасного логина

Сайт позволяет сгенерировать случайный логин по заданным параметрам. На выбор предоставляется 3 стандартных варианта: легкий для произношения, легкий для чтения и содержащий все допустимые символы. Какие именно, можно так же указать: нижний регистр, верхний регистр, числа и специальные символы. Допустимая длина от 1 до 50 символов.

#сайт

​cssminifier.com - онлайн CSS-минификатор

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

#сайт #css

​fontstorage.com/ru/ - бесплатные шрифты

Представляет собой большую коллекцию бесплатных шрифтов. Включает обширный список настроек для онлайн подбора шрифта: начертание, семейство, поддержка языка, размер и так далее. В разделе "ПОЛИГОН" можно наглядно подобрать несколько шрифтов и увидеть, как они будут сочетаться на одной странице.

#сайт #шрифты

​get.foundation - адаптивный фронтенд фреймворк

Позволяет быстро создавать красивые и адаптивные интерфейсы сайтов и шаблоны электронных писем. Является семантическим, читабельным, гибким и полностью настраиваемым. Поддерживает "Mobile First" способ разработки сайтов. Предоставляет возможность включить в сборку как только необходимые элементы, так и настроить элементы под себя(цвета, размеры, шрифты и т.п.).

#фреймворк #frontend

​Normalize.css - приведение стилей к единому во всех браузерах

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

#библиотека #css

​jsFiddle - "песочница" для веб-разработчиков

Является одной из самых популярных онлайн сред разработки. Позволяет писать, редактировать и запускать JavaScript, HTML и CSS коды. Есть возможность подключить JavaScript библиотеку для работы. Ключевые особенности: вставка фрагментов кода, возможность расшаривания, а так же совместная работа.

#сайт #javascript #html #css