Last active
November 6, 2023 20:23
-
-
Save patsuckow/5182f04155c94693e4e5d4829fdbfebd to your computer and use it in GitHub Desktop.
Разные библиотеки и фреймворки JavaScript
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Анализаторы кода JS: | |
| -------------------- | |
| JSLint - онлайн анализатор кода JS - http://www.jslint.com/ | |
| Просто вставьте в него свой код и он быстро проанализирует на предмет возможных проблем и ошибок. | |
| JSLint сканирует JavaScript код. Если он находит проблему, то возвращает сообщение с описанием и местонахождение в коде. | |
| Проблема это не обязательно ошибка синтаксиса, хотя часто так и есть. JSLint так-же обращает внимание на соглашения о кодировании а так же на проблемы в структуре. Он не доказывает что ваша программа работает верно, он просто предоставляет еще один взгляд на ваш код.” | |
| Сам скрипт - https://github.com/douglascrockford/JSLint/blob/master/jslint.js | |
| Фреймворк Vue.js: | |
| ----------------- | |
| Vue.js - https://ru.vuejs.org/v2/guide/ - фреймворк для создания пользовательских интерфейсов | |
| Vuex - https://vuex.vuejs.org/ru/intro.html - паттерн управления состоянием и библиотека для приложений на Vue.js | |
| Vue-router 2 - https://router.vuejs.org/ru/ - роутинг в Vue.js | |
| avoriaz - https://github.com/eddyerburgh/avoriaz - библиотека для тетсирования приложений написанных на Vue.js | |
| Nuxt.js - https://ru.nuxtjs.org/ - библиотека для создания универсальных приложений на Vue.js | |
| !!! Дополнительно!!!: | |
| --------------------- | |
| Книга по Vue.js на англ. от создателя Vue - http://smtebooks.com/Downloads/4962/majesty-vuejs-2-pdf | |
| Фреймворк Ember.js: | |
| ----------------- | |
| Ember.js: отличный фреймворк для веб-приложений - https://habrahabr.ru/company/ruvds/blog/341076/.com%5Bperevod%5D-ember.js-otlichnyy-freymvork-d | |
| RequireJS — универсальный amd шаблон для вашего приложения - https://loftblog.ru/material/amd-template-on-requirejs-universalnyj-amd-shablon-dlya-vashego-prilozheniya/ | |
| Скроллы / переходы / анимация / прелоадеры / перетаскивание на странице: | |
| ------------------------------------------------------------------------ | |
| Список лучших инструментов для web-анимации - https://habrahabr.ru/post/341554/.com[iz-pesochnitsy]-spisok-luchshih-instrumento | |
| Particles.js - http://vincentgarreau.com/particles.js/ - Библиотека, в который вы найдете много интересного для создания плавающих элементов на вашей веб-странице. | |
| Fullpage.js - https://alvarotrigo.com/fullPage/#firstPage - Набор простых для реализации полностраничных скролл-свойств | |
| Typed.js - http://www.mattboldt.com/demos/typed-js/ - Эффект пишущей машинки для вашего веб-сайта - https://ruseller.com/lessons.php?id=2148&rub=32 | |
| Waypoints.js - http://imakewebthings.com/waypoints/ - Примеры кода для запуска функции при прокрутке страницы | |
| Motio - http://darsa.in/motio/ - Библиотека для создания анимации и панорам с помощью спрайтовой графики | |
| Animstion - http://git.blivesta.com/animsition/ - Плагин jQuery для создания переходов страниц с помощью CSS | |
| Instantclick - http://instantclick.io/ - Библиотека, полезная для ускорения загрузки вашего сайта с предварительной загрузкой ресурсов при наведении мыши | |
| Barba.js - https://github.com/luruke/barba.js - Ресурс для создания перетекающих переходов на странице | |
| Vivus.js - https://github.com/maxwellito/vivus#vivusjs - Библиотека для создания начерченных анимаций с помощью SVG | |
| Wow.js - http://mynameismatthieu.com/WOW/ - Инструмент для показа рисунков по мере прокрутки страницы | |
| Scrolline.js - https://github.com/anthonyly/Scrolline.js - Инструмент, благодаря которому вы можете отследить, сколько вам нужно прокрутить до конца страницы | |
| Velocity.js - http://velocityjs.org/ - Инструмент для создания очень быстрых JavaScript-анимаций с плавным переходом | |
| Animate on scroll - http://michalsnik.github.io/aos/ - Простой пример создания анимаций при прокрутке страницы | |
| jInvertScroll - http://www.pixxelfactory.net/jInvertScroll/ - Эффект горизонтальной прокрутки Parallax | |
| One page scroll - https://github.com/peachananr/onepage-scroll - Прокрутка в пределах одной страницы | |
| Parallax.js - https://github.com/wagerfield/parallax - Свойство Parallax, реагирующие на ориентацию вашего смарт-устройства | |
| Dragdealer.js - http://skidding.github.io/dragdealer/ - Библиотека с множеством крутых эффектов для перемещения анимаций | |
| Bounce.js - http://bouncejs.com/ - Инструмент для создания CSS-анимаций | |
| Pagepiling.js - https://github.com/alvarotrigo/pagePiling.js - Прокрутка в пределах одной страницы | |
| Multiscroll.js - https://github.com/alvarotrigo/multiscroll.js - Пример кода для создания двух вертикально-прокручивающихся секций | |
| Midnight.js - http://aerolab.github.io/midnight.js/ - Пример кода для изменения неподвижных заголовков при прокрутке страницы | |
| Anime.js - http://animejs.com/ - Библиотека различных анимаций для JavaScript | |
| Sortable - http://rubaxa.github.io/Sortable/ - Примеры кода для перетаскивания и удаления элементов на странице | |
| Odometer.js библиотека для работы с анимацией цифр в счетчика, часах и так далее - http://github.hubspot.com/odometer/docs/welcome/ | |
| Canvas / 3D / Игры: | |
| ------------------- | |
| Разработка браузерной онлайн игры без фреймворков и движков - https://habrahabr.ru/post/339566/ | |
| Three.js - https://threejs.org/ - Библиотека для создания на веб-странице 3D-объектов и 3D-визуализации. Например: | |
| - http://middle-earth.thehobbit.com/ | |
| - https://www.batmanarkhamknight.com/en_US/batmobile | |
| - http://stars.chromeexperiments.com/ | |
| - http://www.chaostoperfection.com/index.html?lang=en | |
| - http://carvisualizer.plus360degrees.com/threejs/ | |
| Пример рисования колышашейся травы - https://codepen.io/rlemon/pen/GFcet | |
| D3.js - https://d3js.org/ - библиотека для обработки и визуализации данных: | |
| Чтиво по D3.js: | |
| - Введение в Data-Driven Documents (d3.js) - https://loftblog.ru/material/vvedenie-v-data-driven-documents-d3-js/ | |
| - Просто о D3.js - https://habrahabr.ru/post/342106/ | |
| - https://geekbrains.ru/events/50 | |
| - https://xakep.ru/2015/04/18/195-d3-js/ | |
| - https://habrahabr.ru/company/datalaboratory/blog/217905/ | |
| - https://habrahabr.ru/post/303834/ | |
| - https://metanit.com/web/d3js/1.1.php | |
| - Пример на D3.js: | |
| http://d3shooter.herokuapp.com/ | |
| http://mbostock.github.io/d3/talk/20111018/azimuthal.html | |
| https://github.com/d3/d3/wiki/Gallery | |
| Как в проекте заменить jQuery на D3 - https://habrahabr.ru/post/264861/ | |
| Fabric.js is a powerful and simple Javascript HTML5 canvas library - http://fabricjs.com | |
| Интересные примеры: | |
| http://fabricjs.com/opacity_mouse_move | |
| http://fabricjs.com/solar-system | |
| http://fabricjs.com/video-element | |
| http://fabricjs.com/matrix-transformation | |
| http://fabricjs.com/controls | |
| Unity, WebGL | |
| ------------ | |
| Пример игры на Unity WebGL - http://webassembly.org/demo/Tanks/ | |
| GameDev c Unity3D - https://www.youtube.com/playlist?list=PLY4rE9dstrJzkSRDKRXUQhAetmYnOf2bt | |
| Подсветка синтаксиса: | |
| --------------------- | |
| Highlight.js - https://highlightjs.org/ - Подсветка синтаксиса для страниц | |
| Сodemirror.js - http://codemirror.net/ - крутая библиотека подсветки кода | |
| Rainbow.js - https://craig.is/making/rainbows - используется на http://htmlbook.ru | |
| Подсветка синтаксиса кода на сайте google-code-prettify - https://github.com/google/code-prettify (статья - https://кодер.укр/записи/подсветка_синтаксиса_кода_на_сайте_google-code-prettify) | |
| Диаграммы (отображение статистических данных на графиках): | |
| ---------------------------------------------------------- | |
| Chart.js - http://www.chartjs.org/ - Набор красивых диаграмм, созданных на чистом JavaScript | |
| Chartist - http://gionkunz.github.io/chartist-js/index.html - Еще одна библиотека с диаграммами | |
| Highcharts.js - https://www.highcharts.com/ - ПЛАТНОЕ. Статья - https://habr.com/post/128115/ | |
| Поиск / автозаполнение / проверка форм: | |
| -------------------------------------- | |
| Flexdatalist - http://projects.sergiodinislopes.pt/flexdatalist/ - Примеры кода для авто-заполнения поиска | |
| Typeahead.js - http://twitter.github.io/typeahead.js/ - Продвинутый поиск и авто-заполнение | |
| Cleave.js - http://nosir.github.io/cleave.js/ - Форматирование содержимого при наборе текста | |
| Selectize.js - http://selectize.github.io/selectize.js/ - Поля смешанного выбора для добавления тегов | |
| Nice select - http://hernansartorio.com/jquery-nice-select/ - Библиотека jQuery для создания красивых полей выбора | |
| Select2 - https://select2.github.io/ - Настройка полей выбора с помощью jQuery | |
| Imask.js - удобная библиотека без зависимостей для маскирования ввода (https://unmanner.github.io/imaskjs/). Статья на Хабре - https://habrahabr.ru/post/338566/.com | |
| Validate.js - http://validatejs.org/ - валидация форм на js - http://validatejs.org/examples.html + http://dnzl.ru/view_post.php?id=282 | |
| Уведомления / диалоговые / модальные окна: | |
| ------------------------------------------ | |
| IziToast - http://izitoast.marcelodolce.com/ - Простые в реализации JS-уведомления | |
| ziModal - http://izimodal.marcelodolce.com/ - Всплывающие окна, реализованные с помощью простого JavaScript | |
| Sweetalert2 - https://sweetalert2.github.io/ - стилизация для alert(); | |
| Таймеры и диспетчеры задач (и всё, что связанно ос временем): | |
| --------------------------- | |
| Сhronoshift.js - https://github.com/e-h-h/chronoshift.js - Диспетчер задач для вашего кода в браузере - статья на хабре - https://habrahabr.ru/post/338336/.com | |
| https://bunkat.github.io/schedule/ | |
| https://www.npmjs.com/package/node-task-scheduler | |
| https://www.npmjs.com/package/nschedule | |
| https://www.npmjs.com/browse/keyword/scheduler | |
| Moment.js - http://momentjs.com/ - меняет формат дат для удобочитаемости | |
| Карты и поиск путей на графах: | |
| ------------------------------ | |
| ngraph.path - Библиотека быстрого поиска путей на графе - https://github.com/anvaka/ngraph.path и статья - https://habrahabr.ru/post/338440/.com | |
| По jQuery: | |
| ------- | |
| Библиотеки для обработки событий в мобильных устройствах (с сенсорными экранами): - https://habrahabr.ru/post/178611/ | |
| QUnit: A JavaScript Unit Testing framework - http://qunitjs.com/ | |
| Как протестировать код jQuery или Javascript с помощью QUnit - https://ruseller.com/lessons.php?rub_id=32&id=761 | |
| JQuerymy - http://jquerymy.com/ - Двусторонняя привязка данных с помощью jQuery | |
| Альтернативы jQuery - https://alternativeto.net/software/jquery/?license=free | |
| https://jqueryvalidation.org/ - валидация форм - https://webformyself.com/plagin-jquery-validation-dlya-validacii-form/ | |
| Работа с железом: (заказ печатных плат - rezonit.ru) | |
| ----------------- | |
| Espruino: | |
| http://www.espruino.com/ - Микроконтроллер на базе JavaScript - https://www.kickstarter.com/projects/gfw/espruino-javascript-for-things | |
| https://www.youtube.com/watch?v=gFi_qdRK6Og | |
| https://www.youtube.com/watch?v=Q5bT34Lf4gY | |
| http://amperka.ru/product/espruino-pico?utm_source=announce&utm_campaign=pico&utm_medium=youtube | |
| Iskra JS: | |
| https://www.youtube.com/playlist?list=PLfDmj22jP9S6eAG6KaceNViNvu7F8PPLs | |
| https://www.youtube.com/watch?v=rgPq-t5XDn0 | |
| http://arduinoplus.ru/iskra-js/ | |
| http://wiki.amperka.ru/js:ide | |
| http://amperka.ru/product/espruino-pico?utm_source=announce&utm_campaign=pico&utm_medium=youtube | |
| https://www.youtube.com/watch?v=ZgbfuVkvvkk | |
| http://amperka.ru/product/iskra-js?utm_source=announce&utm_campaign=iskrajs&utm_medium=youtube | |
| Аппаратный менеджер паролей - https://xakep.ru/2018/05/24/pass-manager-iskrajs/ | |
| https://geekbrains.ru/posts/js_diy_robots | |
| Простая электроника. Знакомство с Iskra JS - https://www.youtube.com/watch?v=ZgbfuVkvvkk | |
| Автоматический гроубокс на ISKRA JS - https://www.youtube.com/watch?v=ODwKbms_W48 | |
| Пульт для пиротехники своими руками - https://www.youtube.com/watch?v=fXp9i1CTDuU | |
| http://wiki.amperka.ru/js:ide | |
| http://amperka.ru/product/iskra-js | |
| Канал Амперки - https://www.youtube.com/user/AmperkaRu | |
| Железки Амперки - https://www.youtube.com/playlist?list=PLfDmj22jP9S7-245ZexZJ5r-HQY_u7I6O | |
| Можно попробовать сделать подобную "Ракетная турель с камерой своими руками" - только на js и для управления спутниково тарелкой или телескопом. | |
| https://www.youtube.com/watch?v=EzOMIqlDnWo | |
| Опыт домашнего марсоходостроения - https://habrahabr.ru/company/wargaming/blog/275953/ | |
| WebAssembly (WASM) — новый бинарный формат, позволяющий запускать код в браузере. | |
| --------------------------------------------------------------------------------- | |
| Знакомство с WebAssembly - https://habrahabr.ru/post/342180/ | |
| Освоение WebAssembly я очень советую начать с онлайнового инструмента WasmFiddle - https://wasdk.github.io/WasmFiddle/ | |
| WebAssembly и манипуляции DOM - https://habrahabr.ru/post/347804/ | |
| Разное: | |
| ------- | |
| WSTester – JS библиотека для тестирования веб-сервисов с ВебСокетами - https://habrahabr.ru/post/348038/ | |
| TwentyTwenty - http://zurb.com/playground/twentytwenty - Инструмент для создания визуальных различий | |
| Handlebars.js - http://handlebarsjs.com/ - Разработка шаблонов для JavaScript | |
| Favico.js - http://lab.ejci.net/favico.js/ - Динамические фавиконки для сайта | |
| Keycode - http://keycode.info/ - JavaScript-код для отображения числовых значений при нажатии клавиш | |
| Page - http://smalljs.org/client-side-routing/page/ - Маршрутизация на стороне клиента для одностраничных приложений | |
| Tether - http://tether.io/ - Эффективное прикрепление элементов страницы с абсолютным расположением | |
| Shepherd.js - https://github.com/HubSpot/shepherd - Путеводитель для пользователей вашего сайта (например для тех кто первый раз зашёл в личный кабинет). | |
| Open Source 2ГИС - https://habrahabr.ru/company/2gis/blog/255817/ | |
| Visualization of the prototype - http://www.objectplayground.com/ - вставляем код и получаем UML | |
| Countable.js - подсчет абзацев, слов и символов - https://sacha.me/Countable/ | |
| Телеграм бот для парсинга вакансий - https://github.com/risentveber/js_jobs_bot - статья на хабре - https://habrahabr.ru/company/tinkoff/blog/337940/.com | |
| tabs-router - https://github.com/istem/tabs-router - Маршрутизатор вкладок браузера.Позволяет совершать обмен данными браузера клиента с сервером только с одной "активной" вкладки, при множестве других открытых вкладок в фоне. Статья на хабре - https://habrahabr.ru/post/156855/ | |
| Offline.js – JavaScript библиотека, которая следит за состоянием коннекта у пользователей вашего сайта - https://github.com/hubspot/offline | |
| Minivents.js – http://allouis.github.io/minivents/ - миниатюрная JavaScript библиотека, для работы с событиями. | |
| DropzoneJS – http://www.dropzonejs.com/ - JavaScript библиотека, для простой и удобной реализации drag'n'drop для ваших проектов | |
| Top 11 JavaScript Libraries That Are Worth Your Attention - https://da-14.com/blog/top-11-javascript-libraries-are-worth-your-attention | |
| Сore-estimator.js - https://github.com/oftn-oswg/core-estimator - можно через браузерное API узнать сколько ядер на машине пользователя (можно использовать для WebGL) | |
| cssMinifier.js - https://github.com/DracotMolver/CSS-minify/blob/master/cssMinifier.js - скрипт сжатия CSS файлов | |
| http://holderjs.com/ - holder.js - генерируем заглушку для изображений - https://кодер.укр/записи/holder_js_генерируем_заглушку_для_изображений | |
| FileSaver.js - https://github.com/eligrey/FileSaver.js | |
| StreamSaver.js - https://github.com/jimmywarting/StreamSaver.js | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment