- PVSM.RU - https://www.pvsm.ru -

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Slideout.js [34]  —  Выдвигающееся меню для мобильных приложений

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Feather icons [56]  —  Иконки

Ion icons  [57] —   Иконки

Font awesome [58]  —   Иконки

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

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

UI Kit [61]  —  Фреймворк

Bootstrap [62]  —   Фреймворк

Foundation [63]  —   Фреймворк

Ресурсы

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

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

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

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

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

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

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

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

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

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

Если вы нашли подобные ресурсы, которые показались вам интересными, оставьте их в комментарии!

Автор: Arturo01

Источник [69]


Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/programmirovanie/263724

Ссылки в тексте:

[1] Particles.js: http://vincentgarreau.com/particles.js/

[2] Three.js: https://threejs.org/

[3] Fullpage.js: https://alvarotrigo.com/fullPage/#firstPage

[4] Typed.js: http://www.mattboldt.com/demos/typed-js/

[5] Waypoints.js: http://imakewebthings.com/waypoints/

[6] Highlight.js: https://highlightjs.org/

[7] Chart.js: http://www.chartjs.org/

[8] Instantclick: http://instantclick.io/

[9] Chartist: http://gionkunz.github.io/chartist-js/index.html

[10] Motio: http://darsa.in/motio/#!introduction

[11] Animstion: http://git.blivesta.com/animsition/

[12] Barba.js : https://github.com/luruke/barba.js

[13] TwentyTwenty: http://zurb.com/playground/twentytwenty

[14] Vivus.js: https://github.com/maxwellito/vivus#vivusjs

[15] Wow.js: http://mynameismatthieu.com/WOW/

[16] Scrolline.js: https://github.com/anthonyly/Scrolline.js

[17] Velocity.js: http://velocityjs.org/

[18] Animate on scroll: http://michalsnik.github.io/aos/

[19] Handlebars.js : http://handlebarsjs.com/

[20] jInvertScroll: http://www.pixxelfactory.net/jInvertScroll/

[21] One page scroll : https://github.com/peachananr/onepage-scroll

[22] Parallax.js: https://github.com/wagerfield/parallax

[23] Typeahead.js: http://twitter.github.io/typeahead.js/

[24] Dragdealer.js: http://skidding.github.io/dragdealer/

[25] Bounce.js: http://bouncejs.com/

[26] Pagepiling.js: https://github.com/alvarotrigo/pagePiling.js

[27] Multiscroll.js: https://github.com/alvarotrigo/multiscroll.js

[28] Favico.js: http://lab.ejci.net/favico.js/

[29] Midnight.js: http://aerolab.github.io/midnight.js/

[30] Anime.js: http://animejs.com/

[31] Keycode: http://keycode.info/

[32] Sortable: http://rubaxa.github.io/Sortable/

[33] Flexdatalist: http://projects.sergiodinislopes.pt/flexdatalist/

[34] Slideout.js: https://slideout.js.org/

[35] JQuerymy: http://jquerymy.com/#/

[36] Cleave.js: http://nosir.github.io/cleave.js/

[37] Page: http://smalljs.org/client-side-routing/page/

[38] Selectize.js: http://selectize.github.io/selectize.js/

[39] Nice select : http://hernansartorio.com/jquery-nice-select/

[40] Tether: http://tether.io/

[41] Shepherd.js: https://github.com/HubSpot/shepherd

[42] Tooltip: https://github.com/HubSpot/tooltip

[43] Select2: https://select2.github.io/

[44] IziToast: http://izitoast.marcelodolce.com/

[45] IziModal: http://izimodal.marcelodolce.com/

[46] Animate.css: https://daneden.github.io/animate.css/

[47] Flat UI Colors: https://flatuicolors.com/

[48] Material design lite: https://getmdl.io/index.html

[49] Colorrrs: https://www.webpagefx.com/web-design/random-color-picker/

[50] Section separators: https://tympanus.net/Development/SectionSeparators/

[51] Topcoat: http://topcoat.io/

[52] Create ken burns effect: https://www.kirupa.com/html5/ken_burns_effect_css.htm

[53] DynCSS: http://www.vittoriozaccaria.net/dyn-css/

[54] Magic animations: https://www.minimamente.com/example/magic_animations/

[55] CSSpin: https://webkul.github.io/csspin/

[56] Feather icons: https://feathericons.com/

[57] Ion icons : http://ionicons.com/

[58] Font awesome: http://fontawesome.io/

[59] Font generator: http://brandmark.io/font-generator/

[60] On/Off switch: https://proto.io/freebies/onoff/

[61] UI Kit: https://getuikit.com/

[62] Bootstrap: http://getbootstrap.com/

[63] Foundation: http://foundation.zurb.com/

[64] Ghost: https://ghost.org/

[65] What runs: https://www.whatruns.com/

[66] Image: https://learn-anything.xyz/learn-anything

[67] LiveEdu.tv: http://www.liveedu.tv

[68] head cheatsheet: https://github.com/joshbuchea/HEAD

[69] Источник: https://habrahabr.ru/post/337768/