Merge pull request #32 from Nastya07s/develop

RSS. RSLang

Author: Kamikozz

.babelrc

@@ -0,0 +1,5 @@
+{
+  "presets": [
+    "@babel/preset-env"
+  ]
+}

.editorconfig

@@ -0,0 +1,10 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = false
+max_line_length = 120
+tab_width = 2

.eslintrc

@@ -0,0 +1,30 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true
+  },
+  "plugins": [
+    "import"
+  ],
+  "extends": [
+    "airbnb-base"
+  ],
+  "globals": {
+    "Atomics": "readonly",
+    "SharedArrayBuffer": "readonly"
+  },
+  "parserOptions": {
+    "ecmaVersion": 2018,
+    "sourceType": "module"
+  },
+  "rules": {
+  //  "import/extensions": [2, "ignorePackages"]
+  },
+  "settings": {
+    "import/resolver": {
+      "webpack": {
+        "config": "build/webpack.base.conf.js"
+      }
+    }
+  }
+}

.gitignore

@@ -0,0 +1,108 @@
+# Package
+package-lock.json
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+public/
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and *not* Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port

README.md

@@ -1 +1,152 @@
-# RS Lang
+# Описание библиотек, фреймворков, технологий, использованных на проекте RSLang
+
+## Библиотеки:
+
+### [1. CanvasJS](https://canvasjs.com/)
+
+<img src="https://cdn.discordapp.com/attachments/721440499197804577/735169983004541088/unknown.png"/>
+
+*Пример графика:*
+<img src="https://cdn.discordapp.com/attachments/721440499197804577/735170428791947274/unknown.png"/>
+
+
+- В бесплатной (`trial`) версии присутствуют водяные знаки и их можно убрать через свойство в API только в платной (`commercial`) версии
+- Вполне можно создавать самостоятельные и разнообразные стили для графиков, но, судя по документации, тут есть большие ограничения, когда хочется сделать что-то больше чем поменять цвет надписей, жирность шрифта, расположения по вертикали/горизонтали и шрифта (то есть, мы лично, не нашли возможности стилизовать засечки)
+- Есть форматтеры, по которым сама библиотека понимает как форматировать строку или же объект с данными (то есть `new Date()` может быть форматирована как только вашему глазу угодно)
+- Библиотека основана на `<canvas>`
+- Нет `NPM`, только `CDN` и исходники, которые пришлось адаптировать к `eslint`, чтобы не выдавались ошибки и предупреждения
+
+<img src="https://media.discordapp.net/attachments/721440499197804577/735171010076344371/unknown.png"/>
+
+Вот как легко был реализован наш график
+
+<img src="https://cdn.discordapp.com/attachments/721440499197804577/735194586137231511/unknown.png"/>
+
+в проекте `RSLang` с помощью данной библиотеки
+```js
+initChart(data = {}, shouldRender = true) {
+    const fontFamily = 'Montserrat, sans-serif';
+    const fontSize = 12;
+    const fontWeight = 400;
+    const datasetColor = 'rgba(54, 158, 173, 0.7)';
+
+    const axisOptions = {
+      labelFontFamily: fontFamily,
+      labelFontSize: fontSize,
+
+      titleFontFamily: fontFamily,
+      titleFontSize: fontSize + 2,
+      titleFontWeight: fontWeight,
+    };
+
+    const { title, dataset } = data;
+
+    this.chart = new CanvasJS.Chart('chartContainer', {
+      animationEnabled: true,
+      zoomEnabled: true,
+      culture: 'ru',
+      title: {
+        text: title,
+        padding: 10,
+        fontFamily,
+        fontSize: 18,
+      },
+      subtitles: [{
+        text: '*график можно приближать и растягивать',
+        fontFamily,
+        fontSize: 12,
+        horizontalAlign: 'right',
+        padding: 0,
+      }],
+      axisX: {
+        title: 'По дням',
+        valueFormatString: 'D, MMM',
+        margin: 0,
+        intervalType: 'month',
+
+        ...axisOptions,
+      },
+      axisY: {
+        title: 'Количество изученных слов',
+        valueFormatString: '###',
+        margin: 10,
+
+        ...axisOptions,
+      },
+      data: [
+        {
+          type: 'splineArea',
+          padding: 10,
+          color: datasetColor,
+          markerSize: 3,
+          toolTipContent: '{x}<br/>Изучено {y}',
+          xValueFormatString: 'D MMMM YYYY, HH:MM',
+          yValueFormatString: '#',
+          dataPoints: dataset,
+        },
+      ],
+    });
+
+    if (shouldRender) {
+      this.chart.render();
+    }
+  }
+  ```
+
+### [2. SwiperJS](https://swiperjs.com/)
+
+Библиотека для быстрого создания сменяющихся слайдов для сайтов
+
+Использовался [ранее](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/movie-search.md) в работах [RSSchool](https://rs.school/).
+- Очень удобный в использовании
+- Бесплатный (лицензия `MIT`)
+- Огромное и действительно богатое `API` и документация
+- Есть собственные события, и механизм подписывания на эти события (подобный `jQuery` `.on`)
+- Есть его пакетная версия (`NPM`) с `EcmaScript Modules`, где можно управлять какие части функционала будут загружены на сайт, в отличие от его `CDN` версии
+
+**НО:**
+- Во время разработки, разработчики данной библиотеки обновили мажорную версию на `6.0.0` и сломали `CDN`, в связи с чем, пришлось ставить более ранние версии библиотеки через `NPM`
+- Вёрстка самого слайдера порой включает в себя `!important` и довольно сложно отцентрировать управляющие элементы (стрелки влево/вправо)
+- Из-за встроенного автоматического перерисовывания возможны такие баги, когда экран браузера расширился или сузился по высоте/ширине, а Swiper.js остался отрисованным на старых размерах экрана, в связи с чем видны следующие/предыдущие слайды
+- Не совсем очевидно, что если разработчик хочет подключить лишь часть функционала, то нужно импортировать ещё и стили `.scss` с соответствующим названием модуля (то есть, нельзя просто `@import 'swiper/swiper.scss'` - в нём нет зависимостей кроме как на общие стили и переменные)
+
+### [3. ProgressBarJS](https://kimmobrunfeldt.github.io/progressbar.js/)
+
+Простая библиотека для создания красивых, мощных и анимированных полос загрузки.
+
+- Очень проста в использовании
+- Анимация выполняется с помощью `JavaScript` с использованием `requestAnimationFrame` (метода, который указывает браузеру, что нужно произвести анимацию, и просит его запланировать перерисовку на следующем кадре анимации)
+- Анимация с помощью `JS` дает больший контроль над ней и поддерживается во всех основных современных браузерах.
+- Легковесная
+- Бесплатная (`MIT`)
+- Поддерживается всеми популярными браузерами, включая IE9+
+- Есть в `NPM` варианте
+
+---
+## Технологии:
+
+### 1. MPA (Multi Page Application)
+
+Данная методология была использована, чтобы избавиться от роутинга через hash и отслеживания изменения путей на сайте через событие "hashchanged". Также, это позволило использовать возможность Webpack и его плагина HTMLWebpackPlugin, который позволяет собирать различные .html и упаковывать в нужную структуру на сайте и разумно делегировать код благодаря чанкам (кускам кода) на нужную .html страницу, подобно тому, как раньше в 2005-ых годах делали, импортируя явно код на .html страницы, только сейчас - всё это делает `Webpack`. Весь код, собираемый в bundle был разбит на чанки, согласно заданию множественных точек входа (согласно всё тому же `MPA`).
+Так было сделано следующее:
+- Путь `'/'` - точка входа для промо-страницы
+- Путь `'/main'` - путь, доступный только авторизованным пользователям, содержащий основное `SPA` приложение
+- Пути вида `'/<название_игры_на_английском>'` (напр. `'/fillword'`, `'/speakit'`) - путь, доступный только авторизованным пользователям, содержащий `SPA` приложения самих мини-игр
+
+### 2. SPA (Single Page Application)
+
+Данная методология была использована, внутри общей `MPA`, для того, чтобы пользователю не нужно было постоянно перезагружать страницу и видеть постоянные индикаторы загрузок, кроме наших красивых анимированных быстрых лоадеров
+
+### 3. Event Emitter (Event Bus) ~ Паттерн "Наблюдатель" [ссылка на файл кода в проекте](https://github.com/Nastya07s/rslang/blob/develop/src/js/utils/eventBus.js)
+
+Всё просто - у нас есть метод `subscribe`, чтобы подписаться на событие (подобно .addEventListener), у нас есть метод `unsubscribe`, чтобы отписаться от события (подобно removeEventListener), есть массив/объект хранящий слушатели событий (где ключи - строковое название события, а значения - сами `callback` функции), добавленные через метод `subscribe` или `on`. Событие порождается по аналогии со стандартным `Custom Events API`, только через метод `emit`, где указывается какой вид события породить.
+
+**Что происходит?**
+
+Один компонент подписывается на какое-то событие (к примеру, `update`), через метод `subscribe()`, где первым аргументом указывается тип события (`update`), а вторым - функция-коллбэк, которая будет выполнена при наступлении события.
+Затем, в ходе работы, другой компонент может быть сделал какую-то работу и хочет, чтобы первый компонент был обновлён. Для этого он посылает событие `update` через метод `emit()`, где первым аргументом указывается тип события (`update`), происходит поиск данного события по ключам в объекте `EventBus`, и если оно находится, то запускается функция-коллбэк. Таким образом, происходит обновление первого компонента без явного указания ему, чтобы он обновился.
+
+**Зачем это нужно?**
+
+В первую очередь, чтобы избавиться от бесконечных прокидываний созданных объектов классов (инстансов) внутрь новых объектов (компонентов). Связанность кода повышается вместе со сложностью кода, а также, становится явной проблема доступа вложенных компонент или же модулей к внешним родительским компонентам.
+Гораздо проще обращаться к каким-бы то ни было компонентам или модулям, просто посылая событие "change" или "update", чтобы подписанные компоненты на изменения могли спокойно узнать, что произошло событие обновления и выполнить свои `callback` функции, нежели бесконечные цепочки из обращений к родительским элементам `this.parent.parent.parent.parent.update()`

build/postcss.config.js

@@ -0,0 +1,17 @@
+const Autoprefixer = require('autoprefixer');
+const CssNano = require('cssnano');
+
+module.exports = {
+  plugins: [
+    Autoprefixer,
+    CssNano({
+      preset: [
+        'default', {
+          discardComments: {
+            removeAll: true,
+          },
+        },
+      ],
+    }),
+  ],
+};