Дока –
это документация для разработчиков на понятном языке. Её пишет сообщество, чтобы помогать друг
другу. Ваши знания и опыт важны. Делитесь ими, мы поможем.
Browser Default Styles –
сервис для поиска дефолтных стилей HTML-элементов в разных браузерах.
Taskade –
таск-менеджер для командной работы. Делитесь своими проектами, общайтесь с товарищами по
команде и отслеживайте изменения в реальном времени на всех устройствах.
CSS
Protips –
коллекция советов, которые помогут вам стать лучше в CSS.
Push.js –
инструмент для реализации push-уведомлений.
Kolumna –
онлайн-инструмент, который помогает рассчитать размер сетки для разных разрешений экрана.
Editor.js –
это простая и привлекательная JS-библиотека, реализующая простой текстовый редактор.
Howler.js –
Библиотека Howler.js направлена на решение различных задач, связанных со звуком на странице.
Reveal.js –
Библиотека Reveal.js направлена на создание презинтаций на странице.
Chart.js –
предназначенная для представления данных с помощью диаграмм. В частности, она позволят
строить столбчатые, круговые, точечные диаграммы и диаграммы других видов.
Driver –
Библиотека для создания ознакомительных туров на сайте, чтобы показать куда кликать.
Полезные сайты для верстальщика
pcvector.net –
Сайт с большим количеством различных плагинов RUS
Metatags.io –
применяется для исследования внешнего вида моих сайтов, выводимых в областях
предварительного
просмотра на ресурсах Google, Facebook или Twitter. Metatags.io позволяет увидеть заголовок,
описание и изображение, соответствущие сайту, в точно таком же представлении, как их видит
посетитель вышеупомянутых ресурсов.Туда, кроме того, можно загружать собственные изображения
и модифицировать теги, соответствующие заголовку и описанию сайта, экспериментировать с
ними, не меняя ничего на самом сайте.
ExtractCSS.com –
применяется для извлечения из HTML-документов сведений о разнообразных стилях
HTML-документов (речь идёт о стилях, назначаемых идентификаторам и классам элементов, о
встроенных стилях) и для формирования на их основе CSS-кода.
Whatruns.com –
приходит мне на помощь в ситуациях, когда надо узнать подробности об устройстве
какого-нибудь сайта. Речь идёт о темах и плагинах, используемых на сайтах, о серверах, на
которых они размещены.Whatruns можно установить в Firefox и Chrome.
Unminify.com –
позволяет превращать минифицированный (упакованный, обфусцированный) код (JavaScript, CSS,
HTML, XML, JSON) в удобный для восприятия вид.
Responsively.app –
даёт веб-разработчику инструмент для одновременной проверки внешнего вида его сайта на
разных устройства.
Bootstraptema –
4574+ Всё для Bootstrap.Бесплатные адаптивные шаблоны и темы Bootstrap для сайтов, лучшие
функциональные плагины для всех версий Bootstrap и готовые code сниппеты для сайта
Bootstrap.
DOM Events –
интерактивная визуализация механизма работы DOM-событий.
yesviz.com/devices –
Шпаргалки по параметрам различных устройств для медиа-запросов.Кликните на интересующее вас
устройство и найдете много информации, включая готовые медиа-запросы для этого устройства,
даже с учетом соотношения сторон.
PHP
Mobile Detect –
библиотека для определения мобильного устройства.
PHPMailer –
библиотека для отправки электронных писем с сайта.
Webhook –
Простой и полезный сервис, который выдаёт URL адрес, на который можно отправлять HTTP-запросы и
видеть их детали (данные, заголовки).
Так же есть временный адрес электронной почты для получения писем.
Удобно для отладки вебхуков (калбеков) при интеграции внешних систем.
Franken PHP –
Новый сервер для PHP. Очень быстрый и простой!
Под капотом крутой сервер Caddy с
кучей возможностей.
Laravel Octane уже поддерживает его из коробки.
Laravel
Editor JS –
позволяет реализовать блочный конструктор контента в админке.
Его основная фишка в том, что результат хранится в базе данных в формате JSON, а каждый клиент
(браузер, мобильное приложение) может рисовать итоговый контент как ему нужно.
MoonShine –
Простая, бесплатная и красивая панель администрирования для Laravel. Документация на
русском
языке
Orchid –
это мощное и простое в использовании решение для создания панели администратора и линейки
бизнес-приложений. Благодаря подходу, основанному на коде, вы можете быстро и легко создавать
эффективные приложения.
Документация на русском языке.
Filament –
мощная панель для создания личных кабинетов и админок на Laravel.
Telegraph –
это пакет Laravel для свободного взаимодействия с ботами Telegram.
Laravel Pulse –
Пакет для Laravel, который позволяет смотреть данные о нагрузке на сервер, производительности и
использовании приложения в удобном графическом интерфейсе.
С помощью Pulse можно отслеживать узкие места, такие как медленные задания и роуты, находить
наиболее активных пользователей и многое другое.
BabelEdit –
Программа на компьютер для работы с файлами переводов текста в мультиязычных проектах.
Наборы компонентов для верстальщика
SmolCSS –
Минималистичная коллекция фрагментов и компонентов на CSS для создания адаптивных макетов. С
помощью сервиса вы сможете ускорить разработку сайта.
Buefy –
Библиотека адаптивных UI-компонентов для Vue.js, основанная на дизайне Bulma.
Formik –
Библиотека форм с открытым исходным кодом для React и React Native.
CodeHouse – крутые подборки
готовых
решений на CSS и jQuery без плагинов
Shoelace – универсальная библиотека
UI-компонентов
BOILERPLATE –
Самый популярный начальный HTML шаблон для нового проекта.
FontStorage – Плагин, простой
способ подключить шрифт
Dev Fonts – список лучших шрифтов
для программирования с предварительным просмотром.
Fontello – генератор шрифтов с открытым
исходным кодом, который автоматически собирает шрифт, содержащий только выбранные пользователем
символы. Просто отмечаете символы, которые вам нравятся, и нажимаете кнопку «Download webfont».
Typescale – Онлайн-сервис для расчета
текста. Работает он как визуальный калькулятор для определения размера шрифтовой системы.
Введите свой базовый размер и какой масштаб вы хотите использовать, и вы получите лучший размер
для заголовков, подзаголовков и основных текстовых блоков.
clamp – На этом
сервисе можно наглядно увидеть, при какой ширине экрана произойдут изменения font-size. Для
этого надо выставить максимальный и минимальный размер шрифта (можно взять из макета) и менять
значение relative size и fluid size, чтобы меня кривую изменений.
Iconate –
JavaScript-библиотека для добавления анимации статичным шрифтовым иконкам.
Lightbox – это
библиотека JavaScript, которая отображает изображения и видео, заполняя экран и затемняя
остальную часть веб-страницы.
Fancybox – это библиотека
JavaScript, которая позваляет сделать галерею. Адаптивна под тач устройства и мобильные
устройства, легко кастамизируеться.
Inputmask – это
библиотека javascript, которая создает маску ввода телефона есть вариант работы с jQuery и
ванильного JS.
Just-validate – это
библиотека javascript для валидации форм ванильный JS.
SVG Waves – генератор SVG-волн для
красивого разделения секций страницы.
GLightbox – Это
JS-библиотека, которая поможет вам создавать галереи из фотографий, видеороликов, карт и
любых других встроенных элементов.Библиотека адаптируется под любые экраны.
JParticles – библиотека для
создания эффекта частиц на JavaScript,позволяющая вам создавать анимированные, интерактивные
и хорошо кастомизируемые эффекты движущихся частиц на JS.
Overlay
Scrollbars – JavaScript-плагин, который предоставляет
настраиваемые полосы прокрутки и сохраняет встроенную функциональность. Имеет возможность
скрыть все типы полос прокрутки. Совместим со всеми современными браузерами.
BinKing – инструмент для
создания королевских форм приёма банковских карт. BinKing позволяет по номеру карты получить
логотип банка, цвета, номер телефона, логотип бренда и прочее. Также BinKing помогает в
валидации
таких форм.
imask – инструмент для создания
масок полей ввода на ванильном JS.
Tippy.js – инструмент для
создания тултипов на основе Poper.js .
Three.js – инструмент для
создания 3D эфектов на JS.
noUiSlider – инструмент для
создания различных пользунков испоьзуемых в фильтрах.
wNumb.js – инструмент для
Форматирование чисел и денег испоьзуемых в фильтрах.
AR.JS – Это библиотека,
которая позволит вам создавать AR-приложения прямо в браузере. Вы сможете отображать и
обнаруживать через камеру пользователя различные созданные вами объекты. Библиотека основана на
Three.js, поэтому она может отображать трехмерные объекты и модели через камеру пользователя.
Bideo.js – Это библиотека
для создания фоновых видео. Это легковесная и написанная без зависимостей JavaScript
библиотека.Кроме того, ваше видео будет адаптироваться под любые размеры экрана.
Mo.js – Создание анимаций - одно из самых
сложных занятий для начинающего разработчика. Библиотека Mo.js упрощает этот процесс и делает
его не только легким, но и приятным. Анимации, созданные с помощью этой библиотеки будут быстро
загружаться, плавно воспроизводиться и адаптироваться под любые разрешения экрана. Библиотека
стабильно развивается с 2016 года.
AnimXYZ – помогает создавать, настраивать и
составлять анимацию для вашего веб-сайта. Работает на переменных CSS, позволяющих создавать
практически неограниченное количество уникальных анимаций без написания единого ключевого кадра.
Pageable – легкая
js-библиотека (менее 3 КБ в сжатом виде) без зависимостей, которая преобразует веб-страницу в
полноэкранную презентацию с прокруткой.
Rallax.js – Эта библиотека
поможет вам быстро начать создавать плавные фоновые parallax-эффекты. Она написана на чистом
JavaScript без зависимостей, проста в использовании.
Rallax предлагает отличный API, с помощью которого можно создавать как и простые эффекты, так и
нестандартные. Библиотека хорошо кастомизируется - например можно в процессе регулировать
скорость изменения параллакса. Также эффекты будут адаптированы под мобильные устройства.
Shave – JS-плагин без
зависимостей для обрезки многострочного текста внутри HTML-элемента на основе установленной
максимальной высоты. После обрезки он сохраняет разницу исходной текстовой строки в скрытом
элементе <span> после видимого текста. Это означает, что исходный текст
остается нетронутым!
List.js – библиотека для работы с HTML
списками и таблицами. Позволяет сделать поиск, сортировку, редактирование списка с добавлением
или удалением элементов.
Chosen.js – библиотека для
оформления выпадающих списков. Позволяет оптимизировать громоздкие выпадающие списки. Работает
как с одиночными, так и групповыми полями выбора.
Drooltip.js – библиотека
для создания всплывающих подсказок. Позволяет создавать всплывающие подсказки способные
отображать простой текст, динамический контент и элементы HTML.
pagePiling.js –
Плагин прокрутки секций, имеется множество опций, методов и обратных вызовов для использования,
работает на планшетах и мобильных устройствах.
Math.js –
математическая библиотека для JavaScript.Поставляется с большим набором встроенных функций и
предлагает интегрированные решения для работы с различными типами данных.
Yako.js –
JavaScript-библиотека для создания легких, простых и производительных SVG-графиков.
SweetAlert.js –
библиотека JavaScript со всплывающими окнами.
Typeahead.js –
JavaScript-библиотека с открытым исходным кодом для создания автозаполнения полей поиска.
iziModal.js –
плагин для создания модальных окон, работает на jQuery.Имеются готовые варианты для фрейма,
формы, AJAX`a.
ZooMove –
плагин jQuery для масштабирования изображений.Это плагин для jQuery, который дает возможность
изменять масштаб изображения во время наведения на него курсор мыши. Вы можете приближать не
только целое изображение, но и его отдельные участки за счет перемещения курсора.
Infinite-scroll –
Плагин для бесконечной прокрутки.
Позволяет автоматически подгружать следующую страницу на сайт.
Особенности / преимущества:
✔️Небольшой вес (5kB)
✔️Возможность работы с WordPress
✔️Легко интегрировать в проект
✔️Возможность настроить функционал
ProgressBar.js –
JavaScript-библиотека для добавления адаптивных индикаторов прогресса с анимированными
SVG-контурами.
CountUp.js –
JavaScript-библиотека для создания анимации вывода числовых данных.
Tingle.js –
Минималистичная JavaScript-библиотека без зависимостей для создания модальных окон. Полностью
настраиваемые стили в CSS. Создана с учетом UX.
Stellar.js –
jQuery-плагин для добавления эффекта parallax scrolling на веб-сайт.
TwenyTwenty –
jQuery-плагин до/после для реализации эффекта было/стало на сайте.
Cocoen –
jQuery-плагин до/после для реализации эффекта было/стало на сайте.
Layzr –
Небольшая, быстрая и современная JavaScript-библиотека для отложенной загрузки изображений.
Peppermint –
Библиотека для создания слайдера для мобильных устройств.
- Работает с мышью, тачэвентами, поинтерэвентами, старыми поинтерэвентами из IE10.
- Работает на андроидах, айфонах, винфонах, блекберри и на девайсах с 8 виндой.
- Работает в IE7+.
- Не зависит от сторонних библиотек. Если находит jQuery, регистрирует себя в качестве плагина.
- Использует CSS3 трансформы и транзишены с фоллбеком на анимации по таймеру.
- Оптимизированные на скорость выполнения touch-функции.
- API и callback-функции для расширений.
- Работает с клавиатурой, не ломается от кнопки Tab.
Barba –
JavaScript-библиотека для создания плавных переходов между страницами веб-сайта.
SweetAlert2 –
JavaScript-библиотека для создания пользовательских всплывающих окон.
Cytoscape –
JavaScript-библиотека для визуализации и анализа графовых структур в веб-приложениях.
Nanogallery2 –
JavaScript-библиотека для создания красивых адаптивных галерей с удобным лайтбоксом для
изображений и видео.
Luxon.js –
JavaScript-библиотека для работы с датами и временем.
TinyMCE –
JavaScript-библиотека для добавления WYSIWYG-редактора в приложение для создания и
редактирования контента.
Octomments –
JavaScript-библиотека для добавления виджета комментариев на вашем проекте.
LearnGitBranching – это
приложение создано, чтобы помочь новичкам постичь мощные возможности ветвления и работы с
git. Приложение реализовано в виде игры и отображается на русском языке.
EinsCMS Modal – библиотека
для создания модальных окон. Это новая JavaScript библиотека, которая поможет вам быстро
создавать модальные окна для вашего сайта. Она проста в использовании и работать с ней сможет
даже тот, кто не знает JS.Библиотека написана без зависимостей и хорошо документирована.
Модальные окна отлично отображаются на любых разрешениях экрана. Кроме того, она нормально
работает практически во всех браузерах, даже в IE9. Для модальных окон доступна темная и светлая
тема, можно создавать и свои.
Vectorizer – Из растрового в
векторное изображение
Online-Convert – Бесплатный
конвертер из растрового в векторное изображение
Squoosh – онлайн-инструмент сжатия
изображений от Google
URL-encoder –
URL-encoder
для SVG. SVG можно использовать в CSS через data URI, но вставку незакодированного SVG
поддерживают
только браузеры на Webkit. Если закодировать SVG с помощью encodeURIComponent() — SVG начинает
отображаться во всех современных браузерах.
Background Remover
– бесплатный инструмент от PhotoRoom для быстрого удаления фона изображения.
Image Upscaler
– нейросетевой увеличитель изображений, если вам досталась маленькая картинка, а дизайнер уже в
отпуске.
Lorem Picsum
– генерирует случайные картинки-плейсхолдеры любого нужного вам размера.
Remove.bg
– неплохо удаляет фон у любого изображения и экономит массу времени.
Figen
– бесплатный онлайн-инструмент для создания обложек и фонов.
Можно использовать для создания обложек статей в блогах.
Image Extractor
– бесплатный и простой в использовании инструмент, который позволяет извлекать, сортировать и
скачивать изображения с любого общедоступного веб-сайта. Просто вставьте URL-адрес веб-сайта в
поле ввода и нажмите «Extract», чтобы начать процесс.
Filters.css
– CSS-only библиотека, которая предоставляет набор фильтров для фотографий, построена с помощью
SCSS. Поддерживает все современные браузеры.
Simpleish
– Онлайн-инструмент для автоматического удаления фона изображения за 5 секунд одним щелчком
мыши.
SVG.js
JavaScript-библиотека для управления и анимации векторной графики в формате SVG.
AI Image
Enhancer
Сервис по улучшению качества фотографий одним щелчком мыши. Бесплатно и без ограничений.
Heroicons – Красивые иконки SVG ручной
работы от создателей Tailwind CSS.
Tabler Icons – набор из более чем
1250 бесплатных высококачественных SVG-иконок с лицензией MIT.Каждая иконка рассчитана на
сетку 24x24px и имеет толщину линий в 2px.
Gradient
Backgrounds – тщательно подобранный список лучших веб-сайтов в Интернете по
градиентам, позволяющий исследовать, пробовать и выбирать из сотен красивых смешанных
цветовых палитр.
DrawKit.io – Это —
качественные, профессиональные векторные рисунки, которые можно использовать на сайтах без
ссылки на их источник.
imagehover.css – библиотека
hover-эффектов для фотографий.
pngimg.com – библиотека
c 100 000 + бесплатных PNG изображений для веба.
illustrations kit – набор бесплатных
иллюстраций с открытым исходным кодом. В комплекте более 120 иллюстраций. Можно скачать в SVG и
PNG форматах.
UI-иконки – коллекция более 700
UI-иконок в форматах CSS, SVG и Figma
с открытым исходным кодом, доступные в SVG Sprite, styled-components, NPM и API.
Line Icons – кколлекция из более 5000
бесплатных линейных иконок, созданных вручную для дизайнеров и разработчиков. Иконки разделены
на более 40 различных категорий - просто выберите иконку, отредактируйте размер/цвет, скопируйте
код иконки или загрузите SVG и начните использовать в своем проекте.
Pexels – лучшие бесплатные стоковые
фото и видео от талантливых авторов.
Unsplash – бесплатные изображения по
лицензии CC0. Есть отличное API для встраивания графики в ваши приложения.
Material design icons – набор из
более 900 векторных иконок от Google, которые можно стилизовать с помощью CSS. Иконки созданы в
соответствии с рекомендациями по материальному дизайну.
3D icons – коллекция более 120 бесплатных
качественных 3D-иконок, которые вы можете использовать в своих проектах.
Ira Design – конструктор бесплатных
векторных иллюстраций. Есть возможность комбинировать 5 цветов градиента к каждому персонажу,
которого вы хотите использовать в своем проекте.
Иконки Material Symbols – Большой
каталог иконок на все случаи жизни от Google. Можно подключить все сразу через шрифт (не
рекомендую из-за большого размера).
Или скачивать отдельно нужные иконки в формате SVG или PNG.
Multiple.js – JavaScript-библиотека,
позволяющая использовать одно фоновое изображение для нескольких элементов с помощью CSS.
Работа с дизайн-макетами
Avocode – платформа для работы макетами
для верстальщиков (PSD, Sketch и др)
Adobe Assets – работа с PSD-макетами
прямо в браузере. Экспорт кода.
Zeplin – работа с дизайн-макетами в
браузере. Есть экспорт кода.
Figma – Онлайн-сервис для разработки
интерфейсов и прототипирования. Сервис доступен по подписке, предусмотрен бесплатный тарифный
план для одного пользователя.
Pixso(Аналог Фигма) – Онлайн-сервис
для разработки
интерфейсов и прототипирования.
Vivify – это библиотека анимации,
которую я всегда считал улучшенной версией Animate CSS.
CSShake.css – это
библиотека CSS-анимации, которая содержит различные типы анимаций встряхивания.
WickedCSS.css
– это
небольшая библиотека CSS-анимации, в ней не так уж много вариантов анимаций, но те, которые
у нее есть - великолепны.
Animista – это набор готовых
CSS-анимаций. В наборе имеются базовые анимации, анимации входа/выхода, а также анимации для
текста и background.
CSSeffectsSnippets –
коллекция CSS-эффектов, реализованная с помощью Vue.js.Чтобы скопировать CSS-стили,
достаточно нажать на анимацию.
transition.css –
библиотека для создания эффектов перехода. Это CSS-библиотека, которая позволяет вам
использовать различные transition-эффекты. В библиотеке более 40 эффектов и все они отлично
кастомизируются.
Micron.js –
анимирует элемент, используя возможности CSS, а интерактивное поведение контролируется
JavaScript.
ScrollReveal –
библиотека для простой анимации элементов при прокрутке страницы.
Anime.js –
легкая JavaScript-библиотека анимации с простым, но мощным API. Она работает с CSS-свойствами,
SVG, атрибутами DOM и объектами JavaScript.
Curtains.js –
библиотека для анимации изображений и видео.
Преобразует элементы HTML DOM в интерактивные текстурированные плоскости 3D WebGL.
Splitting.js –
JavaScript-библиотека для создания креативного текстового контента с применением стилей и
анимации.
GSAP –
JavaScript-библиотека для создания высокопроизводительных анимаций, которые работают во всех
основных браузерах. Анимируйте CSS, SVG, canvas, React, Vue, WebGL, цвета, строки, пути
движения, общие объекты - всё, что может коснуться JavaScript.
Rive Animations –
Инструменты для создания анимаций, в том числе интерактивных (которые могут реагировать на
действия пользователя), и встраивания этих анимаций в сайты и нативные приложения.
Помимо этого, для WEB, есть NPM-пакет для встраивания анимации на сайт. По сути там идёт импорт
файла с анимацией, который создавали в программе, и встраивание его в CANVAS на страницу.
Maxgraph
– Исходники из видео youtube-канала "Maxgraph - сайты как страсть".
Easymoney
– библиотека для работы с денежными значениями в JavaScript и Typescript.
jExcel CE
– легкий плагин Vanilla JavaScript для создания потрясающих интерактивных веб-таблиц и
таблиц HTML, совместимых с Excel или любым другим программным обеспечением для работы с
электронными таблицами.
Mapbox
– мощный инструмент для разработчиков для работы с картами.Это красивые статичные карты
с точными данными о местоположении и с готовыми API.
DataTable
– сотрировка, фильтрация и поиск по таблице(вроде годная либа).
JSONPlaceholder
– Бесплатный поддельный API для тестирования и прототипирования.
Moovie
– полностью
настраиваемый и простой в использовании медиаплеер для фильмов. Кроссбраузерный, без
зависимостей, адаптивный, стандартизированные события и много других преимуществ.
whois7
– Сервис для проверки доменов сайта(Кто владелец, когда был создан и т.д).
HEAD
– Простое руководство по HTML-элементам в head. Что в этот тего можно добавить.
Scale
– простой и удобный генератор цветовых гамм. Пригодится при подборе цветов для вашего
проекта.
Filepond
– библиотека для загрузки файлов.Оптимизирует изображения для более быстрой загрузки и
предлагает удобный UX.
Особенности / преимущества:
✔️Доступна для React, Vue, Angular, Svelte и jQuery
✔️Поддержка drag-and-drop
✔️Работает на десктопных и на мобильных устройствах
✔️Асинхронная загрузка
✔️Не имеет зависимостей
Brotli
– то универсальный алгоритм сжатия без потерь, который сжимает данные, используя комбинацию
современного варианта алгоритма LZ77, кодирования Хаффмана и контекстного моделирования 2-го
порядка, с коэффициентом сжатия, сравнимым с лучшими доступными в настоящее время методами
сжатия общего назначения. Он похож по скорости на deflate, но предлагает более плотное сжатие.
Playwright
– это платформа для веб-тестирования и автоматизации. Он позволяет тестировать Chromium, Firefox
и WebKit с помощью единого API. Playwright создан для обеспечения кросс-браузерной
веб-автоматизации, которая всегда актуальна, функциональна, надежна и быстра.
Fitty
– JavaScript-библиотека для автоматического масштабирования текста под размер родительского
контейнера.
Plyr
– Плеер для сайта, который может проигрывать аудио и видео HTML5, YouTube и Vimeo.
Day
–JavaScript-библиотека для парсинга, валидации, управления и отображения дат и времени для
современных браузеров, обладающая большой совместимостью с Moment.js API.
LangChain
–JavaScript-библиотека для разработки приложений на основе больших языковых моделей (LLM).
