Среда веб-разработки для разработчиков и интерфейсных дизайнеров "Codepen"

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

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

Pug - HTML-Препроцессор и шаблонизатор, написанный на js

Pug является одним из самых популярных препроцессоров и шаблонизаторов HTML. Его синтаксис преобразуется в HTML-код. Он позволяет хранить фрагменты верстки в отдельных файлах и подключать в шаблон, создавая возможность компонентной архитектуры.

Pug расширяет возможности HTML - он внедряет поддержку Javascript прямо в верстку. С Pug можно использовать переменные, классы функции и другие языковые конструкции для создания шаблонов.

#препроцессор #шаблонизатор #html

Animate.css - библиотека для создания анимации на чистом CSS

Одна из самых известных библиотек для создания анимаций, она кроссбраузерна и проста в установке. Имеет не менее 100 различных плавных анимаций.

Всё, что нужно для использования библиотеки - подключить файл animate.css. Все варианты анимаций доступны на сайте. Можно управлять задержкой, скоростью анимации, зацикливать анимацию и многое другое.

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

RegExr - сервис для тестирования регулярных выражений

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

В основном поддерживаются языки JavaScript и PHP. Есть панель инструментов для дополнительных настроек, а также создания своих тестов.

#сайт #инструмент

CSSLoad.net - сервис, генерирующий прелоадеры для сайта

На данном сервисе вы найдёте много различных прелоадеров для своего проекта - спиннеры, анимированный текст, 3D-анимации и другое. Все написано на чистом CSS.

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

#сайт

Emba Carousel - библиотека для создания слайдеров-каруселей на JavaScript

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

Карусель основана на технологии CSS Flexbox. Есть большое количество готовых шаблонов. Среди них как стандартные, так и карусели с параллакс эффектом, прогресс-баром и другие.

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

Polacode - расширение VS Code для создания красивых скриншотов своего кода

Самый удобный способ сделать скриншот кода в VS Code, если вам необходимо поделиться с кем-то или куда-то выложить.

Расширение удаляет все предупреждения и указания на ошибки, оформляет код, а уже полученный скриншот можно масштабировать, как удобно.

#расширение #vscode

Библиотека для создания анимаций Animate.css

Статья поможет вам начать создавать простые анимации на Animate.css, научит управлять их длительностью и покажет, как делать анимации правильно.

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

JParticles - библиотека для создания эффекта частиц на JavaScript

Это легковесная Canvas библиотека, позволяющая вам создавать анимированные, интерактивные и хорошо кастомизируемые эффекты движущихся частиц на JS.

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

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

RVerify.js - библиотека для создания капчи на вашем сайте

Это написанная на JS библиотека, с помощью которой вы сможете установить на своем сайте капчу и отсеять ботов.

Проверка производится поворотом заданной картинки на определенный угол. Библиотека легковесная, что позволяет добавлять её себе, не рискуя перегрузить свой проект.

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

Fancy Border Radius - инструмент для генерации сложных фигур

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

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

#сайт

Библиотека для создания каруселей Embla Carousel

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

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

Can I Use - сервис для анализа поддержки front-end технологий различными браузерами

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

Например, можно проверить - поддерживается ли определенное CSS свойство или HTML атрибут в IE 9 версии. Кроме того, можно также анализировать поддержку различных форматов изображений в браузерах или синтаксиса JavaScript.

#сайт

Bookmarks - расширение VS Code для создания закладок в коде

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

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

#расширение #vscode

CSS Viewer - расширение Chrome для анализа CSS свойств элементов сайта

Расширение позволяет изучать примененные стили на сайте в удобной форме. Вам достаточно навести курсор на нужный элемент и CSS Viewer отобразит все основные свойства этого элемента.

При наведении на элемент вы увидите используемые шрифты и их размеры, ширину и высоту, цветовые решения, отступы и многое другое.

#расширение

Autocomplete - библиотека для создания поиска с функцией автозаполнения

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

Хоть Autocomplete всё ещё находится в разработке, им уже можно полноценно пользоваться. Он прост в установке и имеет множество полезных настроек, для создания уникального поискового поля в каждом проекте.

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

Placeholder Loading - CSS-библиотека для создания скелета загрузки страницы

С этой библиотекой вы сможете создать простой анимированный эффект загрузки скелета страницы, как на Facebook и VK.

Placeholder Loading написана на чистом CSS. Для управления цветами, размерами и закруглениями скелета достаточно изменить значения встроенных SASS-переменных.

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