Taskade –
таск-менеджер для командной работы. Делитесь своими проектами, общайтесь с товарищами по
команде и отслеживайте изменения в реальном времени на всех устройствах.
CSS
Protips –
коллекция советов, которые помогут вам стать лучше в CSS.
JavaScript-Total –
Репозиторий полезностей по JS.Сборник практических вопросов, задач разного уровня сложности,
сниппетов (утилит, вспомогательных функций), а также полезные ссылки по JavaScript.
Animation
Assistant –
Плагин animation-assistant создан для помощи в управлении анимациями на сайте. Он работает
со многими известными библиотеками CSS анимаций.
Push.js –
инструмент для реализации push-уведомлений.
Kolumna –
онлайн-инструмент, который помогает рассчитать размер сетки для разных разрешений экрана.
Editor.js –
это простая и привлекательная JS-библиотека, реализующая простой текстовый редактор.
Howler.js –
Библиотека Howler.js направлена на решение различных задач, связанных со звуком на странице.
Reveal.js –
Библиотека Reveal.js направлена на создание презинтаций на странице.
Chart.js –
предназначенная для представления данных с помощью диаграмм. В частности, она позволят
строить столбчатые, круговые, точечные диаграммы и диаграммы других видов.
BOILERPLATE –
Самый популярный начальный HTML шаблон для нового проекта.
Полезные сайты для верстальщика
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 –
даёт веб-разработчику инструмент для одновременной проверки внешнего вида его сайта на
разных устройства.
try.github.io –
отличный веб-сайт, который поможет выучить Git за 15 минут. Он содержит некоторые из самых
полезных ресурсов для изучения Git в Интернете, например, изучение ветвления Git, которое
научит вас командам Git прямо из вашего веб-браузера.
Bootstraptema –
4574+ Всё для Bootstrap.Бесплатные адаптивные шаблоны и темы Bootstrap для сайтов, лучшие
функциональные плагины для всех версий Bootstrap и готовые code сниппеты для сайта
Bootstrap.
DOM Events –
интерактивная визуализация механизма работы DOM-событий.
yesviz.com/devices –
Шпаргалки по параметрам различных устройств для медиа-запросов.Кликните на интересующее вас
устройство и найдете много информации, включая готовые медиа-запросы для этого устройства,
даже с учетом соотношения сторон.
PHP
Mobile Detect –
библиотека для определения мобильного устройства.
PHPMailer –
библиотека для отправки электронных писем с сайта.
Type Anything – Калькулятор
параметров текста + генератор CSS-кода
FontStorage – Плагин, простой
способ подключить шрифт
Dev Fonts – список лучших шрифтов
для программирования с предварительным просмотром.
Fontello – генератор шрифтов с открытым
исходным кодом, который автоматически собирает шрифт, содержащий только выбранные пользователем
символы. Просто отмечаете символы, которые вам нравятся, и нажимаете кнопку «Download webfont».
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, который дает возможность
изменять масштаб изображения во время наведения на него курсор мыши. Вы можете приближать не
только целое изображение, но и его отдельные участки за счет перемещения курсора.
Flickity –
Библиотека для добавления слайдеров.Позволяет добавлять настраиваемые и адаптивные слайдеры на
веб-сайт.
Rellax.js –
Библиотека для добавления параллакс эффекта.
Позволяет создавать и детально настраивать параллакс эффект на странице.
Особенности / преимущества:
✔️Не имеет зависимостей
✔️Работает на мобильных устройствах
✔️Небольшой вес (2.5 kB)
✔️Поддержка горизонтального параллакса
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», чтобы начать процесс.
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 цветов градиента к каждому персонажу,
которого вы хотите использовать в своем проекте.
Работа с дизайн-макетами
Avocode – платформа для работы макетами
для верстальщиков (PSD, Sketch и др)
Adobe Assets – работа с PSD-макетами
прямо в браузере. Экспорт кода.
Zeplin – работа с дизайн-макетами в
браузере. Есть экспорт кода.
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.
Maxgraph
– Исходники из видео youtube-канала "Maxgraph - сайты как страсть".
Easymoney
– библиотека для работы с денежными значениями в JavaScript и Typescript.
jExcel CE
– легкий плагин Vanilla JavaScript для создания потрясающих интерактивных веб-таблиц и
таблиц HTML, совместимых с Excel или любым другим программным обеспечением для работы с
электронными таблицами.
Mapbox
– мощный инструмент для разработчиков для работы с картами.Это красивые статичные карты
с точными данными о местоположении и с готовыми API.
SweetAlert
– идеальная библиотека для создания модалочек.
DataTable
– сотрировка, фильтрация и поиск по таблице(вроде годная либа).
JSONPlaceholder
– Бесплатный поддельный API для тестирования и прототипирования.
Moovie
– полностью
настраиваемый и простой в использовании медиаплеер для фильмов. Кроссбраузерный, без
зависимостей, адаптивный, стандартизированные события и много других преимуществ.
whois7
– Сервис для проверки доменов сайта(Кто владелец, когда был создан и т.д).
HEAD
– Простое руководство по HTML-элементам в head. Что в этот тего можно добавить.
Scale
– простой и удобный генератор цветовых гамм. Пригодится при подборе цветов для вашего
проекта.
Filepond
– библиотека для загрузки файлов.Оптимизирует изображения для более быстрой загрузки и
предлагает удобный UX.
Особенности / преимущества:
✔️Доступна для React, Vue, Angular, Svelte и jQuery
✔️Поддержка drag-and-drop
✔️Работает на десктопных и на мобильных устройствах
✔️Асинхронная загрузка
✔️Не имеет зависимостей
