Полезные ссылки 👨‍💻 для веб-разработчика

Программы, сервисы и сайты, которые помогут в работе.

Добавить свою ссылку Мой Github

Редакторы кода

  1. VS Code – мощный редактор (IDE)
  2. Sublime text – удобный и быстрый редактор кода
  3. Notepad ++ – легендарный редактор
  4. VS Code snipets doc – описание пользовательских снипетов от vscode
  5. VS Code Themes– Каталог тем для VSCode

Песочницы для кода

  1. JS fiddle – Песочница для JavaScript
  2. CodePen – Песочница для HTML, CSS о JS
  3. JS Bin – Песочница с выводом в консолью
  4. Mail.ru Group – браузерный редактор кода на языках Java, Python, PHP, C++, Node.JS, Swift и других. Все работает в браузере, регистрация не требуется.

Проверка кода

  1. Can I Use – Кроссбраузерность кода
  2. Validator W3 – Валидность HTML-кода
  3. Mobile Friendly – Оптимизирована ли ваша страница для мобильных устройств
  4. Find Dublicate Content on your site – Проверка уникальности текста на сайте
  5. Piliapp – Валидность JS-кода
  6. Typeratio – онлайн-инструмент для подбора межстрочного интервала, в зависимости от размера шрифта.
  7. ct.css – инструмент для поиска потенциальных проблем быстродействия в содержимом тега head на вашей странице.

Справочники

  1. html5book – Статьи + справочник
  2. webref – Подробный справочник на русском
  3. MDN – Справочник MDN
  4. Дока – это документация для разработчиков на понятном языке. Её пишет сообщество, чтобы помогать друг другу. Ваши знания и опыт важны. Делитесь ими, мы поможем.

Генераторы

  1. Hailpixel – простой способ подобрать цвет в CSS
  2. CSSgradient – градиент генератор
  3. CSS3patterns – CSS паттерны
  4. FreeFrontend – CSS паттерны
  5. ColorScheme – конвертер цветов
  6. CSSworld – Генератор flexbox контейнеров
  7. Генератор Flexbox верстки – Конструктор Flexbox
  8. Генератор Grid верстки – Конструктор Grid
  9. Snippet-generator – генератор снипетов.
  10. CSS Button Generator – CSS-Генератор кнопок для сайтов.

Reset CSS

  1. Normalize.css – библеотека для сброса стилей альтернатива CSS Reset

Лайфхаки для верстальщика

  1. How To Center in CSS – центрируйте всё
  2. Learn Git Branching – интерактивный учебник по Git
  3. Flexbox Defense – игра для изучения Flexbox
  4. GRID GARDEN – игра для изучения Grid
  5. Habr – Методы скрытия элементов веб-страниц
  6. Browser Default Styles – сервис для поиска дефолтных стилей HTML-элементов в разных браузерах.
  7. Taskade – таск-менеджер для командной работы. Делитесь своими проектами, общайтесь с товарищами по команде и отслеживайте изменения в реальном времени на всех устройствах.
  8. CSS Protips – коллекция советов, которые помогут вам стать лучше в CSS.
  9. Push.js – инструмент для реализации push-уведомлений.
  10. Kolumna – онлайн-инструмент, который помогает рассчитать размер сетки для разных разрешений экрана.
  11. Editor.js – это простая и привлекательная JS-библиотека, реализующая простой текстовый редактор.
  12. Howler.js – Библиотека Howler.js направлена на решение различных задач, связанных со звуком на странице.
  13. Reveal.js – Библиотека Reveal.js направлена на создание презинтаций на странице.
  14. Chart.js – предназначенная для представления данных с помощью диаграмм. В частности, она позволят строить столбчатые, круговые, точечные диаграммы и диаграммы других видов.
  15. Driver – Библиотека для создания ознакомительных туров на сайте, чтобы показать куда кликать.

Полезные сайты для верстальщика

  1. pcvector.net – Сайт с большим количеством различных плагинов RUS
  2. Metatags.io – применяется для исследования внешнего вида моих сайтов, выводимых в областях предварительного просмотра на ресурсах Google, Facebook или Twitter. Metatags.io позволяет увидеть заголовок, описание и изображение, соответствущие сайту, в точно таком же представлении, как их видит посетитель вышеупомянутых ресурсов.Туда, кроме того, можно загружать собственные изображения и модифицировать теги, соответствующие заголовку и описанию сайта, экспериментировать с ними, не меняя ничего на самом сайте.
  3. ExtractCSS.com – применяется для извлечения из HTML-документов сведений о разнообразных стилях HTML-документов (речь идёт о стилях, назначаемых идентификаторам и классам элементов, о встроенных стилях) и для формирования на их основе CSS-кода.
  4. Whatruns.com – приходит мне на помощь в ситуациях, когда надо узнать подробности об устройстве какого-нибудь сайта. Речь идёт о темах и плагинах, используемых на сайтах, о серверах, на которых они размещены.Whatruns можно установить в Firefox и Chrome.
  5. Unminify.com – позволяет превращать минифицированный (упакованный, обфусцированный) код (JavaScript, CSS, HTML, XML, JSON) в удобный для восприятия вид.
  6. Responsively.app – даёт веб-разработчику инструмент для одновременной проверки внешнего вида его сайта на разных устройства.
  7. Bootstraptema – 4574+ Всё для Bootstrap.Бесплатные адаптивные шаблоны и темы Bootstrap для сайтов, лучшие функциональные плагины для всех версий Bootstrap и готовые code сниппеты для сайта Bootstrap.
  8. DOM Events – интерактивная визуализация механизма работы DOM-событий.
  9. yesviz.com/devices – Шпаргалки по параметрам различных устройств для медиа-запросов.Кликните на интересующее вас устройство и найдете много информации, включая готовые медиа-запросы для этого устройства, даже с учетом соотношения сторон.

PHP

  1. Mobile Detect – библиотека для определения мобильного устройства.
  2. PHPMailer – библиотека для отправки электронных писем с сайта.
  3. Webhook – Простой и полезный сервис, который выдаёт URL адрес, на который можно отправлять HTTP-запросы и видеть их детали (данные, заголовки). Так же есть временный адрес электронной почты для получения писем. Удобно для отладки вебхуков (калбеков) при интеграции внешних систем.
  4. Franken PHP – Новый сервер для PHP. Очень быстрый и простой! Под капотом крутой сервер Caddy с кучей возможностей. Laravel Octane уже поддерживает его из коробки.

Laravel

  1. Editor JS – позволяет реализовать блочный конструктор контента в админке.
    Его основная фишка в том, что результат хранится в базе данных в формате JSON, а каждый клиент (браузер, мобильное приложение) может рисовать итоговый контент как ему нужно.
  2. MoonShine – Простая, бесплатная и красивая панель администрирования для Laravel.
    Документация на русском языке
  3. Orchid – это мощное и простое в использовании решение для создания панели администратора и линейки бизнес-приложений. Благодаря подходу, основанному на коде, вы можете быстро и легко создавать эффективные приложения.
    Документация на русском языке.
  4. Filament – мощная панель для создания личных кабинетов и админок на Laravel.
  5. Telegraph – это пакет Laravel для свободного взаимодействия с ботами Telegram.
  6. Laravel Mix – Сборщик проектов проще чем Gulp.
  7. Laravel Ocean Package – новые и полезные пакеты Laravel в одном месте.
  8. Laravel Pulse – Пакет для Laravel, который позволяет смотреть данные о нагрузке на сервер, производительности и использовании приложения в удобном графическом интерфейсе. С помощью Pulse можно отслеживать узкие места, такие как медленные задания и роуты, находить наиболее активных пользователей и многое другое.
  9. BabelEdit – Программа на компьютер для работы с файлами переводов текста в мультиязычных проектах.

Наборы компонентов для верстальщика

  1. SmolCSS – Минималистичная коллекция фрагментов и компонентов на CSS для создания адаптивных макетов. С помощью сервиса вы сможете ускорить разработку сайта.
  2. Buefy – Библиотека адаптивных UI-компонентов для Vue.js, основанная на дизайне Bulma.
  3. Formik – Библиотека форм с открытым исходным кодом для React и React Native.
  4. CodeHouse – крутые подборки готовых решений на CSS и jQuery без плагинов
  5. Shoelace – универсальная библиотека UI-компонентов
  6. BOILERPLATE – Самый популярный начальный HTML шаблон для нового проекта.
  7. Подборка приёмов на чистом CSS без JS – Подборка демо-реализаций тех или иных технологий без JS, используя лишь CSS.
  8. Flowbite – Коллекция готовых компонентов интерфейса на Tailwind CSS.
  9. Spectrum Art – Коллекция готовых цветовых схем для веб-сайтов.
  10. React-vis – Библиотека React-компонентов для визуализации данных в React-приложениях.
  11. React-Toastify – Настраиваемая библиотека React для добавления уведомлений в приложение.

React

  1. React-vis – Библиотека React-компонентов для визуализации данных в React-приложениях.
  2. React-Toastify – Настраиваемая библиотека React для добавления уведомлений в приложение.
  3. React Select – Библиотека React для создания интерактивных и легко настраиваемых выпадающих списков.

Vue

Шрифты

  1. Google Fonts – Веб-шрифты от Google
  2. Transfonter – Конвертер веб-шрифтов
  3. FontStorage – Плагин, простой способ подключить шрифт
  4. Dev Fonts – список лучших шрифтов для программирования с предварительным просмотром.
  5. Fontello – генератор шрифтов с открытым исходным кодом, который автоматически собирает шрифт, содержащий только выбранные пользователем символы. Просто отмечаете символы, которые вам нравятся, и нажимаете кнопку «Download webfont».
  6. Typescale – Онлайн-сервис для расчета текста. Работает он как визуальный калькулятор для определения размера шрифтовой системы. Введите свой базовый размер и какой масштаб вы хотите использовать, и вы получите лучший размер для заголовков, подзаголовков и основных текстовых блоков.
  7. clamp – На этом сервисе можно наглядно увидеть, при какой ширине экрана произойдут изменения font-size. Для этого надо выставить максимальный и минимальный размер шрифта (можно взять из макета) и менять значение relative size и fluid size, чтобы меня кривую изменений.
  8. Iconate – JavaScript-библиотека для добавления анимации статичным шрифтовым иконкам.

Полезные jQuery/JS плагины

  1. jQuery – Библиотека jQuery
  2. jQuery CDN – Библиотека jQuery CDN Версия
  3. Slick – Адаптивный слайдер
  4. Swiper – Современный адаптивный слайдер
  5. Owl Carousel – Адаптивный слайдер-карусель
  6. Tooltipster – Создание всплывающих подсказок
  7. Flatpickr – Всплывающие окна с выбором даты
  8. Vide – Видеофон для сайта
  9. Masked Input – Плагин маски ввода для input
  10. One Page Scroll – Плагин скролла страницы по секциям в виде слайдера. Демо.
  11. Lightbox – это библиотека JavaScript, которая отображает изображения и видео, заполняя экран и затемняя остальную часть веб-страницы.
  12. Fancybox – это библиотека JavaScript, которая позваляет сделать галерею. Адаптивна под тач устройства и мобильные устройства, легко кастамизируеться.
  13. Inputmask – это библиотека javascript, которая создает маску ввода телефона есть вариант работы с jQuery и ванильного JS.
  14. Just-validate – это библиотека javascript для валидации форм ванильный JS.
  15. SVG Waves – генератор SVG-волн для красивого разделения секций страницы.
  16. GLightbox – Это JS-библиотека, которая поможет вам создавать галереи из фотографий, видеороликов, карт и любых других встроенных элементов.Библиотека адаптируется под любые экраны.
  17. JParticles – библиотека для создания эффекта частиц на JavaScript,позволяющая вам создавать анимированные, интерактивные и хорошо кастомизируемые эффекты движущихся частиц на JS.
  18. Overlay Scrollbars – JavaScript-плагин, который предоставляет настраиваемые полосы прокрутки и сохраняет встроенную функциональность. Имеет возможность скрыть все типы полос прокрутки. Совместим со всеми современными браузерами.
  19. BinKing – инструмент для создания королевских форм приёма банковских карт. BinKing позволяет по номеру карты получить логотип банка, цвета, номер телефона, логотип бренда и прочее. Также BinKing помогает в валидации таких форм.
  20. imask – инструмент для создания масок полей ввода на ванильном JS.
  21. Tippy.js – инструмент для создания тултипов на основе Poper.js .
  22. Three.js – инструмент для создания 3D эфектов на JS.
  23. noUiSlider – инструмент для создания различных пользунков испоьзуемых в фильтрах.
  24. wNumb.js – инструмент для Форматирование чисел и денег испоьзуемых в фильтрах.
  25. AR.JS – Это библиотека, которая позволит вам создавать AR-приложения прямо в браузере. Вы сможете отображать и обнаруживать через камеру пользователя различные созданные вами объекты. Библиотека основана на Three.js, поэтому она может отображать трехмерные объекты и модели через камеру пользователя.
  26. Bideo.js – Это библиотека для создания фоновых видео. Это легковесная и написанная без зависимостей JavaScript библиотека.Кроме того, ваше видео будет адаптироваться под любые размеры экрана.
  27. Mo.js – Создание анимаций - одно из самых сложных занятий для начинающего разработчика. Библиотека Mo.js упрощает этот процесс и делает его не только легким, но и приятным. Анимации, созданные с помощью этой библиотеки будут быстро загружаться, плавно воспроизводиться и адаптироваться под любые разрешения экрана. Библиотека стабильно развивается с 2016 года.
  28. AnimXYZ – помогает создавать, настраивать и составлять анимацию для вашего веб-сайта. Работает на переменных CSS, позволяющих создавать практически неограниченное количество уникальных анимаций без написания единого ключевого кадра.
  29. Pageable – легкая js-библиотека (менее 3 КБ в сжатом виде) без зависимостей, которая преобразует веб-страницу в полноэкранную презентацию с прокруткой.
  30. Rallax.js – Эта библиотека поможет вам быстро начать создавать плавные фоновые parallax-эффекты. Она написана на чистом JavaScript без зависимостей, проста в использовании.
    Rallax предлагает отличный API, с помощью которого можно создавать как и простые эффекты, так и нестандартные. Библиотека хорошо кастомизируется - например можно в процессе регулировать скорость изменения параллакса. Также эффекты будут адаптированы под мобильные устройства.
  31. Shave – JS-плагин без зависимостей для обрезки многострочного текста внутри HTML-элемента на основе установленной максимальной высоты. После обрезки он сохраняет разницу исходной текстовой строки в скрытом элементе <span> после видимого текста. Это означает, что исходный текст остается нетронутым!
  32. List.js – библиотека для работы с HTML списками и таблицами. Позволяет сделать поиск, сортировку, редактирование списка с добавлением или удалением элементов.
  33. Chosen.js – библиотека для оформления выпадающих списков. Позволяет оптимизировать громоздкие выпадающие списки. Работает как с одиночными, так и групповыми полями выбора.
  34. Drooltip.js – библиотека для создания всплывающих подсказок. Позволяет создавать всплывающие подсказки способные отображать простой текст, динамический контент и элементы HTML.
  35. pagePiling.js – Плагин прокрутки секций, имеется множество опций, методов и обратных вызовов для использования, работает на планшетах и ​​мобильных устройствах.
  36. Math.js – математическая библиотека для JavaScript.Поставляется с большим набором встроенных функций и предлагает интегрированные решения для работы с различными типами данных.
  37. Yako.js – JavaScript-библиотека для создания легких, простых и производительных SVG-графиков.
  38. SweetAlert.js – библиотека JavaScript со всплывающими окнами.
  39. Typeahead.js – JavaScript-библиотека с открытым исходным кодом для создания автозаполнения полей поиска.
  40. iziModal.js – плагин для создания модальных окон, работает на jQuery.Имеются готовые варианты для фрейма, формы, AJAX`a.
  41. ZooMove – плагин jQuery для масштабирования изображений.Это плагин для jQuery, который дает возможность изменять масштаб изображения во время наведения на него курсор мыши. Вы можете приближать не только целое изображение, но и его отдельные участки за счет перемещения курсора.
  42. Infinite-scroll – Плагин для бесконечной прокрутки. Позволяет автоматически подгружать следующую страницу на сайт. Особенности / преимущества: ✔️Небольшой вес (5kB) ✔️Возможность работы с WordPress ✔️Легко интегрировать в проект ✔️Возможность настроить функционал
  43. ProgressBar.js – JavaScript-библиотека для добавления адаптивных индикаторов прогресса с анимированными SVG-контурами.
  44. CountUp.js – JavaScript-библиотека для создания анимации вывода числовых данных.
  45. Tingle.js – Минималистичная JavaScript-библиотека без зависимостей для создания модальных окон. Полностью настраиваемые стили в CSS. Создана с учетом UX.
  46. Stellar.js – jQuery-плагин для добавления эффекта parallax scrolling на веб-сайт.
  47. TwenyTwenty – jQuery-плагин до/после для реализации эффекта было/стало на сайте.
  48. Cocoen – jQuery-плагин до/после для реализации эффекта было/стало на сайте.
  49. Layzr – Небольшая, быстрая и современная JavaScript-библиотека для отложенной загрузки изображений.
  50. Peppermint – Библиотека для создания слайдера для мобильных устройств. - Работает с мышью, тачэвентами, поинтерэвентами, старыми поинтерэвентами из IE10. - Работает на андроидах, айфонах, винфонах, блекберри и на девайсах с 8 виндой. - Работает в IE7+. - Не зависит от сторонних библиотек. Если находит jQuery, регистрирует себя в качестве плагина. - Использует CSS3 трансформы и транзишены с фоллбеком на анимации по таймеру. - Оптимизированные на скорость выполнения touch-функции. - API и callback-функции для расширений. - Работает с клавиатурой, не ломается от кнопки Tab.
  51. Barba – JavaScript-библиотека для создания плавных переходов между страницами веб-сайта.
  52. SweetAlert2 – JavaScript-библиотека для создания пользовательских всплывающих окон.
  53. Cytoscape – JavaScript-библиотека для визуализации и анализа графовых структур в веб-приложениях.
  54. Nanogallery2 – JavaScript-библиотека для создания красивых адаптивных галерей с удобным лайтбоксом для изображений и видео.
  55. Luxon.js – JavaScript-библиотека для работы с датами и временем.
  56. TinyMCE – JavaScript-библиотека для добавления WYSIWYG-редактора в приложение для создания и редактирования контента.
  57. Octomments – JavaScript-библиотека для добавления виджета комментариев на вашем проекте.
  58. Date Picker – JavaScript-библиотека для добавления на сайт функции выбора даты.
  59. Resizable – jQuery-плагин для изменения размера элементов HTML DOM с помощью маркера изменения размера. Он работает с событиями Mouse и Touch, поэтому вы можете изменять размеры элементов на мобильных устройствах.
  60. Isotope – JavaScript-библиотека для добавления функции фильтрации и сортировки элементов на странице.

Шпаргалки

  1. FlexBox – шпаргалка по Flexbox
  2. Html5book – шпаргалка по HTML, CSS, JavaScript и jQuery
  3. HTML Book – шпаргалка по HTML и CSS
  4. CSS Cheat Sheet – шпаргалка по CSS
  5. jQuery page2page – шпаргалка по jQuery
  6. Emmet Cheat Sheet – шпаргалка по Emmet
  7. WebReference – ещё одна шпаргалка по HTML5 и CSS3. Также данный сайт опубликовал свои шпаргалки в виде приложений на Google Play.
  8. Easings – Шпаргалка функций плавности
  9. FreeCodeCamp – Шпаргалка по FlexBox
  10. Habr – Шпаргалка по LESS и SASS
  11. LearnGitBranching – это приложение создано, чтобы помочь новичкам постичь мощные возможности ветвления и работы с git. Приложение реализовано в виде игры и отображается на русском языке.
  12. EinsCMS Modal – библиотека для создания модальных окон. Это новая JavaScript библиотека, которая поможет вам быстро создавать модальные окна для вашего сайта. Она проста в использовании и работать с ней сможет даже тот, кто не знает JS.Библиотека написана без зависимостей и хорошо документирована. Модальные окна отлично отображаются на любых разрешениях экрана. Кроме того, она нормально работает практически во всех браузерах, даже в IE9. Для модальных окон доступна темная и светлая тема, можно создавать и свои.
  13. grep.app – полезный инструмент, который ведёт поиск по открытым репозиториям на GitHub и находит вхождения указанного фрагмента кода. Как указано на главной странице, в базе сервиса находится полмиллиона репозиториев.

Работа с изображениями

  1. Сompressor – Сжимает JPG и PNG
  2. Tiny png – Сжимает изображения. Есть API.
  3. Vectorizer – Из растрового в векторное изображение
  4. Online-Convert – Бесплатный конвертер из растрового в векторное изображение
  5. Squoosh – онлайн-инструмент сжатия изображений от Google
  6. URL-encoder – URL-encoder для SVG. SVG можно использовать в CSS через data URI, но вставку незакодированного SVG поддерживают только браузеры на Webkit. Если закодировать SVG с помощью encodeURIComponent() — SVG начинает отображаться во всех современных браузерах.
  7. Background Remover – бесплатный инструмент от PhotoRoom для быстрого удаления фона изображения.
  8. Image Upscaler – нейросетевой увеличитель изображений, если вам досталась маленькая картинка, а дизайнер уже в отпуске.
  9. Lorem Picsum – генерирует случайные картинки-плейсхолдеры любого нужного вам размера.
  10. Remove.bg – неплохо удаляет фон у любого изображения и экономит массу времени.
  11. Figen – бесплатный онлайн-инструмент для создания обложек и фонов. Можно использовать для создания обложек статей в блогах.
  12. Image Extractor – бесплатный и простой в использовании инструмент, который позволяет извлекать, сортировать и скачивать изображения с любого общедоступного веб-сайта. Просто вставьте URL-адрес веб-сайта в поле ввода и нажмите «Extract», чтобы начать процесс.
  13. Filters.css – CSS-only библиотека, которая предоставляет набор фильтров для фотографий, построена с помощью SCSS. Поддерживает все современные браузеры.
  14. Simpleish – Онлайн-инструмент для автоматического удаления фона изображения за 5 секунд одним щелчком мыши.
  15. SVG.js JavaScript-библиотека для управления и анимации векторной графики в формате SVG.
  16. AI Image Enhancer Сервис по улучшению качества фотографий одним щелчком мыши. Бесплатно и без ограничений.
  17. iLoveIMG Бесплатный онлайн-редактор изображений.

Иконки и графика

  1. Flaticons – бесплатные векторные иконки
  2. Seeklogo – векторные логотипы компаний
  3. SVG Porn – векторные логотипы
  4. TOP Logos – логотипы компаний (русские)
  5. Font Awesome – иконочный шрифт + SVG
  6. UTF-8 Icons – иконки на utf-8
  7. Fontello – шрифтовые иконки. Шрифты генерируются на ходу из выбранных иконок, доступны иконки из 14 популярных шрифтов.
  8. IconMonster – бесплатные векторные иконки
  9. IcoMoon – векторные иконки
  10. ColorHunt – это сервис по подбору цветов
  11. Heroicons – Красивые иконки SVG ручной работы от создателей Tailwind CSS.
  12. Tabler Icons – набор из более чем 1250 бесплатных высококачественных SVG-иконок с лицензией MIT.Каждая иконка рассчитана на сетку 24x24px и имеет толщину линий в 2px.
  13. Favicon Generator – Генератор иконок.
  14. Gradient Backgrounds – тщательно подобранный список лучших веб-сайтов в Интернете по градиентам, позволяющий исследовать, пробовать и выбирать из сотен красивых смешанных цветовых палитр.
  15. DrawKit.io – Это — качественные, профессиональные векторные рисунки, которые можно использовать на сайтах без ссылки на их источник.
  16. imagehover.css – библиотека hover-эффектов для фотографий.
  17. pngimg.com – библиотека c 100 000 + бесплатных PNG изображений для веба.
  18. illustrations kit – набор бесплатных иллюстраций с открытым исходным кодом. В комплекте более 120 иллюстраций. Можно скачать в SVG и PNG форматах.
  19. UI-иконки – коллекция более 700 UI-иконок в форматах CSS, SVG и Figma с открытым исходным кодом, доступные в SVG Sprite, styled-components, NPM и API.
  20. Line Icons – кколлекция из более 5000 бесплатных линейных иконок, созданных вручную для дизайнеров и разработчиков. Иконки разделены на более 40 различных категорий - просто выберите иконку, отредактируйте размер/цвет, скопируйте код иконки или загрузите SVG и начните использовать в своем проекте.
  21. Pexels – лучшие бесплатные стоковые фото и видео от талантливых авторов.
  22. Unsplash – бесплатные изображения по лицензии CC0. Есть отличное API для встраивания графики в ваши приложения.
  23. Material design icons – набор из более 900 векторных иконок от Google, которые можно стилизовать с помощью CSS. Иконки созданы в соответствии с рекомендациями по материальному дизайну.
  24. 3D icons – коллекция более 120 бесплатных качественных 3D-иконок, которые вы можете использовать в своих проектах.
  25. Ira Design – конструктор бесплатных векторных иллюстраций. Есть возможность комбинировать 5 цветов градиента к каждому персонажу, которого вы хотите использовать в своем проекте.
  26. Иконки Material Symbols – Большой каталог иконок на все случаи жизни от Google. Можно подключить все сразу через шрифт (не рекомендую из-за большого размера). Или скачивать отдельно нужные иконки в формате SVG или PNG.
  27. Multiple.js – JavaScript-библиотека, позволяющая использовать одно фоновое изображение для нескольких элементов с помощью CSS.

Работа с дизайн-макетами

  1. Zeplin – работа с дизайн-макетами в браузере. Есть экспорт кода.
  2. PSD Tech – бесплатный аналог Avocode.
  3. Figma – Онлайн-сервис для разработки интерфейсов и прототипирования. Сервис доступен по подписке, предусмотрен бесплатный тарифный план для одного пользователя.
  4. Pixso(Аналог Фигма) – Онлайн-сервис для разработки интерфейсов и прототипирования.
  5. Хелп по Фигме – уроки, видео, советы, фишки.
  6. Excalidraw – Если нужно быстро накидать эскиз для сайта, приложения или просто визуализировать идею, Ключевые фишки: ⏩Простота использования ⏩Совместная работа ⏩Бесплатно ⏩Экспорт в PNG или SVG.

Библиотеки с анимациями

  1. Animate.css – библиотека CSS анимаций
  2. Magic – кроссбраузерные анимации
  3. It's Tuesday. – простые и приятные CSS анимации
  4. Wow.js – анимация при появлении элемента
  5. AOS.js – анимация при скролле
  6. Hover.css – набор анимаций CSS
  7. CSS3-анимация – полная статья про анимацию на CSS3
  8. Sal.js – библиотека анимации прокрутки
  9. Vivify – это библиотека анимации, которую я всегда считал улучшенной версией Animate CSS.
  10. CSShake.css – это библиотека CSS-анимации, которая содержит различные типы анимаций встряхивания.
  11. WickedCSS.css – это небольшая библиотека CSS-анимации, в ней не так уж много вариантов анимаций, но те, которые у нее есть - великолепны.
  12. Animista – это набор готовых CSS-анимаций. В наборе имеются базовые анимации, анимации входа/выхода, а также анимации для текста и background.
  13. CSSeffectsSnippets – коллекция CSS-эффектов, реализованная с помощью Vue.js.Чтобы скопировать CSS-стили, достаточно нажать на анимацию.
  14. transition.css – библиотека для создания эффектов перехода. Это CSS-библиотека, которая позволяет вам использовать различные transition-эффекты. В библиотеке более 40 эффектов и все они отлично кастомизируются.
  15. Micron.js – анимирует элемент, используя возможности CSS, а интерактивное поведение контролируется JavaScript.
  16. ScrollReveal – библиотека для простой анимации элементов при прокрутке страницы.
  17. Anime.js – легкая JavaScript-библиотека анимации с простым, но мощным API. Она работает с CSS-свойствами, SVG, атрибутами DOM и объектами JavaScript.
  18. Curtains.js – библиотека для анимации изображений и видео. Преобразует элементы HTML DOM в интерактивные текстурированные плоскости 3D WebGL.
  19. Splitting.js – JavaScript-библиотека для создания креативного текстового контента с применением стилей и анимации.
  20. GSAP – JavaScript-библиотека для создания высокопроизводительных анимаций, которые работают во всех основных браузерах. Анимируйте CSS, SVG, canvas, React, Vue, WebGL, цвета, строки, пути движения, общие объекты - всё, что может коснуться JavaScript.
  21. Rive Animations – Инструменты для создания анимаций, в том числе интерактивных (которые могут реагировать на действия пользователя), и встраивания этих анимаций в сайты и нативные приложения.
    Помимо этого, для WEB, есть NPM-пакет для встраивания анимации на сайт. По сути там идёт импорт файла с анимацией, который создавали в программе, и встраивание его в CANVAS на страницу.

Прочее

  1. Coverr – Короткие видео для фона на сайт
  2. Subte Patterns – Фоны для сайта
  3. Генератор UTM-меток
  4. Underscores – Пустая тема для Wordpress
  5. Minify – CSS и JS минификатор
  6. Unminify – Анминификатор для HTML, CSS, JS
  7. CodeWars – Задачи для тренировки JavaScript кода
  8. FreeFormatter.com – Vинификатор
  9. Blisk – Браузер для разработчиков
  10. fullpage js – для постраничного скроллинга разделов сайта
  11. Darkmode.js – библиотека для применения тёмного / ночного режима на любом из ваших сайтов.
  12. Cleave.js – библиотека, которая поможет вам автоматически форматировать вводимый текстовый контент.
  13. SimpleBar – Скролл для блока.
  14. Дэмки – Демо для видеоблога Вадима Макеева .
  15. Maxgraph – Исходники из видео youtube-канала "Maxgraph - сайты как страсть".
  16. Easymoney – библиотека для работы с денежными значениями в JavaScript и Typescript.
  17. jExcel CE – легкий плагин Vanilla JavaScript для создания потрясающих интерактивных веб-таблиц и таблиц HTML, совместимых с Excel или любым другим программным обеспечением для работы с электронными таблицами.
  18. Mapbox – мощный инструмент для разработчиков для работы с картами.Это красивые статичные карты с точными данными о местоположении и с готовыми API.
  19. DataTable – сотрировка, фильтрация и поиск по таблице(вроде годная либа).
  20. JSONPlaceholder – Бесплатный поддельный API для тестирования и прототипирования.
  21. Moovie – полностью настраиваемый и простой в использовании медиаплеер для фильмов. Кроссбраузерный, без зависимостей, адаптивный, стандартизированные события и много других преимуществ.
  22. whois7 – Сервис для проверки доменов сайта(Кто владелец, когда был создан и т.д).
  23. HEAD – Простое руководство по HTML-элементам в head. Что в этот тего можно добавить.
  24. Scale – простой и удобный генератор цветовых гамм. Пригодится при подборе цветов для вашего проекта.
  25. Filepond – библиотека для загрузки файлов.Оптимизирует изображения для более быстрой загрузки и предлагает удобный UX. Особенности / преимущества: ✔️Доступна для React, Vue, Angular, Svelte и jQuery ✔️Поддержка drag-and-drop ✔️Работает на десктопных и на мобильных устройствах ✔️Асинхронная загрузка ✔️Не имеет зависимостей
  26. Brotli – то универсальный алгоритм сжатия без потерь, который сжимает данные, используя комбинацию современного варианта алгоритма LZ77, кодирования Хаффмана и контекстного моделирования 2-го порядка, с коэффициентом сжатия, сравнимым с лучшими доступными в настоящее время методами сжатия общего назначения. Он похож по скорости на deflate, но предлагает более плотное сжатие.
  27. Playwright – это платформа для веб-тестирования и автоматизации. Он позволяет тестировать Chromium, Firefox и WebKit с помощью единого API. Playwright создан для обеспечения кросс-браузерной веб-автоматизации, которая всегда актуальна, функциональна, надежна и быстра.
  28. Fitty – JavaScript-библиотека для автоматического масштабирования текста под размер родительского контейнера.
  29. Plyr – Плеер для сайта, который может проигрывать аудио и видео HTML5, YouTube и Vimeo.
  30. Day –JavaScript-библиотека для парсинга, валидации, управления и отображения дат и времени для современных браузеров, обладающая большой совместимостью с Moment.js API.
  31. LangChain –JavaScript-библиотека для разработки приложений на основе больших языковых моделей (LLM).
  32. CKEditor Текстовый редактор JavaScript с чистым пользовательским интерфейсом и современным UX.

Обучающая литература

  1. You Don't Know JS – перевод серии книг по JavaScript.

Email - письма

  1. mjml – сервис для вёрстки email-писем.
  2. Foundation for Emails 2 – сервис для вёрстки email-писем от разработчиков фреймворка Foundation.