Pull to refresh

67 полезных инструментов, библиотек и ресурсов для экономии времени веб-разработчиков

Reading time 4 min
Views 42K
Original author: Ognjen Gatalo

В данной статье я не буду вам рассказывать о больших веб-фреймворках, таких как React, Angular, Vue и т.д… не будет в ней и перечня наиболее популярных текстовых редакторов – Atom, VS Code, Sublime… В данной статье я поделюсь с вами инструментами, которые, по моему мнению, могут сделать рабочий процесс веб-разработчиков более простым и быстрым.

Вероятно, что кто-то из вас уже знаком с некоторыми такими инструментами. Тем не менее, будет очень круто, если кто-нибудь из читателей найдет что-то новое и полезное для себя в моей статье.

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


Ресурсы



Ghost  — Простая платформа для блогов, разработанная с помощью node.js


What runs  —  Плагин Chrome, предназначенный для изучения технологий, используемых для создания современного веб-сайта



LiveEdu.tv — Стриминговый сервис для программистов и дизайнеров, который сфокусирован на реальных проектах. Здесь вы сможете найти сотни каналов по следующим темам: разработка программного обеспечения, искусственный интеллект, наука о данных, разработка игр, дизайн, VR & AR разработка, криптовалюты, на которых разрабатывают реальные проекты, в режиме реального времени и в процессе разработки авторы объясняют каждый шаг.



Learn anything  —   Диаграмма связей для выбора дисциплины (например физика, химия и т.д.) и вывода ее подразделов

head cheatsheet  —  Список всего, что можно включить в тег head

JavaScript библиотеки и фреймворки


Particles.js   —  Библиотека, в который вы найдете много интересного для создания плавающих элементов на вашей веб-странице.

Three.js  —   Библиотека для создания на веб-странице 3D-объектов и 3D-визуализации

Fullpage.js  —   Набор простых для реализации полностраничных скролл-свойств

Typed.js  —  Эффект пишущей машинки для вашего веб-сайта

Waypoints.js  —  Примеры кода для запуска функции при прокрутке страницы

Highlight.js  —   Подсветка синтаксиса для страниц

Chart.js  —  Набор красивых диаграмм, созданных на чистом JavaScript

Instantclick  —  Библиотека, полезная для ускорения загрузки вашего сайта с предварительной загрузкой ресурсов при наведении мыши

Chartist  —  Еще одна библиотека с диаграммами

Motio  — Библиотека для создания анимации и панорам с помощью спрайтовой графики

Animstion  —  Плагин jQuery для создания переходов страниц с помощью CSS

Barba.js  —  Ресурс для создания перетекающих переходов на странице

TwentyTwenty  —  Инструмент для создания визуальных различий

Vivus.js  —  Библиотека для создания начерченных анимаций с помощью SVG

Wow.js  —  Инструмент для показа рисунков по мере прокрутки страницы

Scrolline.js  —  Инструмент, благодаря которому вы можете отследить, сколько вам нужно прокрутить до конца страницы

Velocity.js  —  Инструмент для создания очень быстрых JavaScript-анимаций с плавным переходом

Animate on scroll  — Простой пример создания анимаций при прокрутке страницы

Handlebars.js  —   Разработка шаблонов для JavaScript

jInvertScroll  —  Эффект горизонтальной прокрутки Parallax

One page scroll  —  Прокрутка в пределах одной страницы

Parallax.js  —   Свойство Parallax, реагирующие на ориентацию вашего смарт-устройства

Typeahead.js  —   Продвинутый поиск и авто-заполнение

Dragdealer.js  —  Библиотека с множеством крутых эффектов для перемещения анимаций

Bounce.js  —   Инструмент для создания CSS-анимаций

Pagepiling.js  —  Прокрутка в пределах одной страницы

Multiscroll.js  —  Пример кода для создания двух вертикально-прокручивающихся секций

Favico.js  —  Динамические фавиконы

Midnight.js  —  Пример кода для изменения неподвижных заголовков при прокрутке страницы

Anime.js  —  Библиотека различных анимаций для JavaScript

Keycode  —   JavaScript-код для отображения числовых значений при нажатии клавиш

Sortable  —  Примеры кода для перетаскивания и удаления элементов на странице

Flexdatalist  —  Примеры кода для авто-заполнения поиска

JQuerymy  — Двусторонняя привязка данных с помощью jQuery

Cleave.js  —   Форматирование содержимого при наборе текста

Page  —   Маршрутизация на стороне клиента для одностраничных приложений

Selectize.js  —  Поля смешанного выбора для добавления тегов

Nice select  —   Библиотека jQuery для создания красивых полей выбора

Tether  —   Эффективное прикрепление элементов страницы с абсолютным расположением

Shepherd.js  —   Путеводитель для пользователей вашего сайта

Tooltip  — Название говорит само за себя... 

Select2  —  Настройка полей выбора с помощью jQuery

IziToast  —  Простые в реализации JS-уведомления

IziModal  —   Всплывающие окна, реализованные с помощью простого JavaScript

Библиотеки CSS / Дизайн-инструменты


Animate.css  — Библиотека анимаций

Flat UI Colors  — Список простых и эффективных цветовых гамм

Material design lite  — Фреймворк, основанный на материальном веб-дизайне от Google 

Colorrrs  —  Генератор случайных цветовых гамм

Section separators  — Создание границ разных форм с помощью  CSS

Topcoat  — Фреймворк для создания веб-приложений

Create ken burns effect  —  Создание эффекта «Ken burns»

DynCSS  —  Добавление функций в CSS, необходимых для добавления динамических свойств веб-страницам

Magic animations  — Что ж, из названия и так все ясно…

CSSpin  — Коллекция виртуальных CSS-спиннеров для вашего сайта

Feather icons  —  Иконки

Ion icons  —   Иконки

Font awesome  —   Иконки

Font generator  — Эффективный подбор и объединение шрифтов

On/Off switch  —  Создание переключателя «on/off» с помощью CSS

UI Kit  —  Фреймворк

Bootstrap  —   Фреймворк

Foundation  —   Фреймворк

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

Если вы нашли подобные ресурсы, которые показались вам интересными, оставьте их в комментарии!
Tags:
Hubs:
+16
Comments 6
Comments Comments 6

Articles