- PVSM.RU - https://www.pvsm.ru -
В данной статье я не буду вам рассказывать о больших веб-фреймворках, таких как React, Angular, Vue и т.д… не будет в ней и перечня наиболее популярных текстовых редакторов – Atom, VS Code, Sublime… В данной статье я поделюсь с вами инструментами, которые, по моему мнению, могут сделать рабочий процесс веб-разработчиков более простым и быстрым.
Вероятно, что кто-то из вас уже знаком с некоторыми такими инструментами. Тем не менее, будет очень круто, если кто-нибудь из читателей найдет что-то новое и полезное для себя в моей статье.
Ниже представлены различные веб-ресурсы, которые я разбил по группам для большего удобства.
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
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] — Фреймворк
Ghost [64] — Простая платформа для блогов, разработанная с помощью node.js
What runs [65] — Плагин Chrome, предназначенный для изучения технологий, используемых для создания современного веб-сайта
Learn anything [66] — Диаграмма связей для выбора дисциплины (например физика, химия и т.д.) и вывода ее подразделов
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/
Нажмите здесь для печати.