​Приветствую сайтодел! 👋

Тяжелый 2020 год закончился. Ты уже вступил в новый перспективный 2021 год. Я уверен, он будет лучше, продуктивней и в разы эффективней для тебя.

Так как от Нового Года мы всегда ожидаем чего-то интересного, нового и перспективного, то я решил сделать для тебя соответствующий сюрприз - расширение тематики канала.

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

Это лишь малая доля от планируемого контента. Часть из которого уже готова и скоро будет опубликована на канале. Поэтому не забудь купить кофе, оплатить интернет и ожидай скорую публикацию нового поста.

Редактор "Sublime Text"

В этом уроке я расскажу тебе об отличном редакторе для разработчиков под названием "Sublime Text". Его еще относят не просто к редакторам, а интегрированным средам разработки. То есть "редактор на батарейках".

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

Молниеносная верстка при помощи плагина "Emmet"

Этот плагин многократно увеличивает продуктивность написания кода за счет преобразования простых аббревиатур хештегов в полноценные куски.

В уроке я продемонстрирую как установить и начать использовать его в работе.

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

Подсветка и выбор цветов в CSS-файлах

В текущем уроке я покажу тебе как улучшить работу с цветами в CSS-файлах при помощи двух плагинов: "Color Highlighter" и "ColorPicker".

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

Выравнивание кода в Sublime Text

Код в Sublime отображается весьма наглядно и приятно. Но это все равно можно улучшить. Например, за счет выравнивания.

Как? Расскажу в этом уроке!

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

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

В этом уроке я расскажу тебе о полезном плагине "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-файла.

#программа