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

Glyphter - SVG генератор иконочных шрифтов

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

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

#сайт

Git Graph - расширение VS Code для работы с Git репозиторием

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

С Git Graph вы сможете в удобной форме просматривать ветки репозитория, делать поиск по истории коммитов, совершать pull-request и производить множество других операций.

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

📘 Каталог уроков канала за 2021:

• Урок 45. Редактор "Sublime Text"
• Урок 46. Молниеносная верстка при помощи плагина "Emmet"
• Урок 47. Подсветка и выбор цветов в CSS-файлах
• Урок 48. Выравнивание кода в Sublime Text
• Урок 49. Автоматическая перезагрузка страницы в браузере при сохранении файла
• Урок 50. Библиотека для анимаций "Anime.js"
• Урок 51. Zeplin.io - лучший помощник для дизайнера и верстальщика
• Урок 52. Красивые анимации с bounce.js
• Урок 53. Высокоскоростная библиотека Pixi.js
• Урок 54. Полезных хитростей Chrome DevTools
• Урок 55. Адаптивный интерфейсный фреймворк Foundation
• Урок 56. Среда веб-разработки для разработчиков и интерфейсных дизайнеров "Codepen"
• Урок 57. Библиотека для создания анимаций Animate.css
• Урок 58. Библиотека для создания каруселей Embla Carousel
• Урок 59. Библиотека для создания капчи RVerify.js
• Урок 60. Библиотека для создания скелета загрузки Placeholder Loading
• Урок 61. Библиотека hover-эффектов для фотографий «imagehover.css»
• Урок 62. Webpack - сборщик модулей JavaScript с открытым исходным кодом
• Урок 63. Библиотека для создания 3D графики "Three.js"
• Урок 64. Библиотека для создания push уведомлений push.js
• Урок 65. Pixel Perfect - расширение Chrome для качественной верстки
• Урок 66. Backbone.js – фреймворк для разработки сложных веб-приложений
• Урок 67. SVG.js - библиотека для работы с SVG-графикой
• Урок 68. CSS Peeper - расширение Chrome для удобного просмотра CSS-кода
• Урок 69. GitHub Pages - сервис для хранения статических HTML-страниц
• Урок 70. HTML Hint - расширение VS Code для проверки HTML-кода
• Урок 71. GitLab - система управления репозиториями
• Урок 72. WOW.js - библиотека для создания анимаций при прокрутке
• Урок 73. HTML5Boilerplate – фронтенд-шаблон для создания веб-приложений
• Урок 74. Figma – инструмент для прототипирования сайтов и приложений
• Урок 75. HAML – HTML-препроцессор и шаблонизатор
• Урок 76. Selenium - инструмент автоматизации действий на сайтах
• Урок 77. D3.js – библиотека JavaScript для визуализации данных
• Урок 78. Adonis JS – фреймворк для Node.js
• Урок 79. Premonish – библиотека JavaScript для предсказывания действий пользователя
• Урок 80. CSS Peek – расширение для работы со стилями
• Урок 81. Empire of Code – игра для изучения JavaScript
• Урок 82. Programming Hero - игра для обучения программированию
• Урок 83. Elevator Saga – игра для изучения JavaScript
• Урок 84. Code Spell Checker – расширение для редактирования кода
• Урок 85. FullPage.js – библиотека JavaScript для создания эффектов прокрутки
• Урок 86. Knockout.js – библиотека JavaScript для работы с каркасом веб-приложений

📕 Каталог уроков, статей и материалов канала за 2020 год

CSS Button Generator - CSS-Генератор кнопок для сайтов

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

Предложено большое количество настроек - шрифт и его величина, размеры, тени, границы, а также есть готовые шаблоны кнопок.

#сайт