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

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

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

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

  1. VS Code – мощный редактор (IDE)
  2. Sublime text 3 – удобный и быстрый редактор кода
  3. Atom – крутой редактор от GitHub
  4. Brackets – подходит для начинающих
  5. Notepad ++ – легендарный редактор
  6. VS Code snipets doc – описание пользовательских снипетов от 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. PageSpeed Insights – Проверка оптимизации страницы
  4. Mobile Friendly – Оптимизирована ли ваша страница для мобильных устройств
  5. Find Dublicate Content on your site – Проверка уникальности текста на сайте
  6. Piliapp – Валидность JS-кода
  7. Typeratio – онлайн-инструмент для подбора межстрочного интервала, в зависимости от размера шрифта.
  8. ct.css – инструмент для поиска потенциальных проблем быстродействия в содержимом тега head на вашей странице.

Генераторы CSS

  1. CSS3gen – CSS генератор кнопок, градиентов, бордеров,теней трансформации, фона, анимаций
  2. Hailpixel – простой способ подобрать цвет в CSS
  3. CSSgradient – градиент генератор
  4. CSS3patterns – CSS паттерны
  5. FreeFrontend – CSS паттерны
  6. ColorScheme – конвертер цветов
  7. CSSworld – Генератор flexbox контейнеров

Reset CSS

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

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

  1. How To Center in CSS – центрируйте всё
  2. CodeHouse – крутые подборки готовых решений на CSS и jQuery без плагинов
  3. Learn Git Branching – интерактивный учебник по Git
  4. Генератор Flexbox верстки – Конструктор Flexbox
  5. Генератор Grid верстки – Конструктор Grid
  6. Flexbox Defense – игра для изучения Flexbox
  7. GRID GARDEN – игра для изучения Grid
  8. Shoelace – универсальная библиотека UI-компонентов
  9. MoreToggles – CSS библиотека с набором переключателей.
  10. Habr – Методы скрытия элементов веб-страниц
  11. Browser Default Styles – сервис для поиска дефолтных стилей HTML-элементов в разных браузерах.
  12. Snippet-generator – генератор снипетов.
  13. Taskade – таск-менеджер для командной работы. Делитесь своими проектами, общайтесь с товарищами по команде и отслеживайте изменения в реальном времени на всех устройствах.
  14. CSS Protips – коллекция советов, которые помогут вам стать лучше в CSS.
  15. JavaScript-Total – Репозиторий полезностей по JS.Сборник практических вопросов, задач разного уровня сложности, сниппетов (утилит, вспомогательных функций), а также полезные ссылки по JavaScript.
  16. Laravel Mix – Сборщик проектов проще чем Gulp.
  17. Animation Assistant – Плагин animation-assistant создан для помощи в управлении анимациями на сайте. Он работает со многими известными библиотеками CSS анимаций.
  18. Push.js – инструмент для реализации push-уведомлений.
  19. Kolumna – онлайн-инструмент, который помогает рассчитать размер сетки для разных разрешений экрана.
  20. Editor.js – это простая и привлекательная JS-библиотека, реализующая простой текстовый редактор.
  21. Howler.js – Библиотека Howler.js направлена на решение различных задач, связанных со звуком на странице.
  22. Reveal.js – Библиотека Reveal.js направлена на создание презинтаций на странице.
  23. Chart.js – предназначенная для представления данных с помощью диаграмм. В частности, она позволят строить столбчатые, круговые, точечные диаграммы и диаграммы других видов.
  24. CSS Button Generator – CSS-Генератор кнопок для сайтов.
  25. BOILERPLATE – Самый популярный начальный HTML шаблон для нового проекта.

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

  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. try.github.io – отличный веб-сайт, который поможет выучить Git за 15 минут. Он содержит некоторые из самых полезных ресурсов для изучения Git в Интернете, например, изучение ветвления Git, которое научит вас командам Git прямо из вашего веб-браузера.
  8. Bootstraptema – 4574+ Всё для Bootstrap.Бесплатные адаптивные шаблоны и темы Bootstrap для сайтов, лучшие функциональные плагины для всех версий Bootstrap и готовые code сниппеты для сайта Bootstrap.
  9. DOM Events – интерактивная визуализация механизма работы DOM-событий.
  10. yesviz.com/devices – Шпаргалки по параметрам различных устройств для медиа-запросов.Кликните на интересующее вас устройство и найдете много информации, включая готовые медиа-запросы для этого устройства, даже с учетом соотношения сторон.

PHP

  1. Mobile Detect – библиотека для определения мобильного устройства.
  2. PHPMailer – библиотека для отправки электронных писем с сайта.

Шрифты

  1. Google Fonts – Веб-шрифты от Google
  2. Transfonter – Конвертер веб-шрифтов
  3. Фонтов.нет – Подбор шрифта по фразе
  4. Fonts4web – Шрифты для сайтов
  5. Type Anything – Калькулятор параметров текста + генератор CSS-кода
  6. FontStorage – Плагин, простой способ подключить шрифт
  7. Dev Fonts – список лучших шрифтов для программирования с предварительным просмотром.
  8. Fontello – генератор шрифтов с открытым исходным кодом, который автоматически собирает шрифт, содержащий только выбранные пользователем символы. Просто отмечаете символы, которые вам нравятся, и нажимаете кнопку «Download webfont».

Полезные 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. Flickity – Библиотека для добавления слайдеров.Позволяет добавлять настраиваемые и адаптивные слайдеры на веб-сайт.
  43. Rellax.js – Библиотека для добавления параллакс эффекта. Позволяет создавать и детально настраивать параллакс эффект на странице. Особенности / преимущества: ✔️Не имеет зависимостей ✔️Работает на мобильных устройствах ✔️Небольшой вес (2.5 kB) ✔️Поддержка горизонтального параллакса

Шпаргалки

  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. Для модальных окон доступна темная и светлая тема, можно создавать и свои.

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

  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», чтобы начать процесс.

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

  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 цветов градиента к каждому персонажу, которого вы хотите использовать в своем проекте.

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

  1. Avocode – платформа для работы макетами для верстальщиков (PSD, Sketch и др)
  2. Adobe Assets – работа с PSD-макетами прямо в браузере. Экспорт кода.
  3. Zeplin – работа с дизайн-макетами в браузере. Есть экспорт кода.
  4. PSD Tech – бесплатный аналог Avocode.
  5. Markupeasy – бесплатный аналог Avocode.

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

  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.

Прочее

  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. SweetAlert – идеальная библиотека для создания модалочек.
  20. DataTable – сотрировка, фильтрация и поиск по таблице(вроде годная либа).
  21. JSONPlaceholder – Бесплатный поддельный API для тестирования и прототипирования.
  22. Moovie – полностью настраиваемый и простой в использовании медиаплеер для фильмов. Кроссбраузерный, без зависимостей, адаптивный, стандартизированные события и много других преимуществ.
  23. whois7 – Сервис для проверки доменов сайта(Кто владелец, когда был создан и т.д).
  24. HEAD – Простое руководство по HTML-элементам в head. Что в этот тего можно добавить.
  25. Scale – простой и удобный генератор цветовых гамм. Пригодится при подборе цветов для вашего проекта.
  26. Filepond – библиотека для загрузки файлов.Оптимизирует изображения для более быстрой загрузки и предлагает удобный UX. Особенности / преимущества: ✔️Доступна для React, Vue, Angular, Svelte и jQuery ✔️Поддержка drag-and-drop ✔️Работает на десктопных и на мобильных устройствах ✔️Асинхронная загрузка ✔️Не имеет зависимостей

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

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

Email - письма

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