├── lecture_summary
├── tdd_workshop
│ ├── README.md
│ ├── package.json
│ ├── index.js
│ └── test.js
├── 171007_workshop_grid_layout.md
├── 171104_babel_workshop.md
├── 171212_flow.md
├── 171016_dom_api.md
├── 171107_fp.md
├── 171019_web_components.md
├── 171114_http.md
├── 171021_eslint_workshop.md
├── 171003_js_old_stuff.md
├── 170923_workshop_postcss.md
└── 170921_html.md
├── assignments
├── 171019_web_components.md
├── 171016_dom_api.md
└── 170921_html.md
├── assignments.md
└── README.md
/lecture_summary/tdd_workshop/README.md:
--------------------------------------------------------------------------------
1 | ### TDD Workshop Code
--------------------------------------------------------------------------------
/lecture_summary/171007_workshop_grid_layout.md:
--------------------------------------------------------------------------------
1 | ### GRID LAYOUT by Anton Nemtsev @SilentImp
2 |
3 |
4 | ["Что нам стоит ДОМ построить?" (слайды)](https://silentimp.github.io/LayoutTalk/)
5 |
6 | [Краткое руководство по гридам](https://github.com/SilentImp/grid)
7 |
--------------------------------------------------------------------------------
/lecture_summary/171104_babel_workshop.md:
--------------------------------------------------------------------------------
1 | ### Code
2 |
3 | - [awespme-equality-plugin](https://github.com/yavorsky/babel/tree/awesome-equality)
4 | - [tilde-assign-plugin](https://github.com/yavorsky/babel/tree/tilde-assign)
5 |
6 | ### Useful links
7 |
8 | - [Binary AST proposal for ECMAScript](https://github.com/syg/ecmascript-binary-ast)
9 | - [Babel preset env](https://github.com/babel/babel/tree/master/experimental/babel-preset-env)
--------------------------------------------------------------------------------
/assignments/171019_web_components.md:
--------------------------------------------------------------------------------
1 | ### Web Components Practice
2 |
3 | Implement a wrapper for `select` element, which styles chosen option.
4 |
5 | #### Code template
6 |
7 | ```html
8 |
9 |
10 |
11 |
12 |
13 | Please select whatever
14 |
15 |
16 |
17 |
18 |
19 | ```
--------------------------------------------------------------------------------
/lecture_summary/tdd_workshop/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "kata",
3 | "version": "1.0.0",
4 | "description": "tdd kata",
5 | "scripts": {
6 | "test": "mocha -r chai/register-should --harmony",
7 | "test:watch": "mocha -r chai/register-should --harmony -w"
8 | },
9 | "author": "Kottans",
10 | "license": "MIT",
11 | "devDependencies": {
12 | "chai": "^4",
13 | "mocha": "^4"
14 | }
15 | }
--------------------------------------------------------------------------------
/assignments.md:
--------------------------------------------------------------------------------
1 | ### Practice Assignments for Kottans JS Course 2017
2 | #### NB: The tasks will not be controlled by course mentors. However, feel free to ask for help if you're stuck.
3 | Date | Subject | Trainer | Task
4 | ---- | -------- | ------- | ---
5 | 19.09.2017 | Intro | [Alex Lapshyn](https://github.com/sudodoki) | [Home work](https://gist.github.com/sudodoki/5bc7551f1fcf6540d1f70fdf0726220e)
6 | 21.09.2017 | HTML | [Aleksey Shvayka](https://github.com/shvaikalesh) | [Home work](https://gist.github.com/AMashoshyna/f2af9fbf7b0c397a3b99253c7ab54ae8)
7 |
--------------------------------------------------------------------------------
/assignments/171016_dom_api.md:
--------------------------------------------------------------------------------
1 | ### DOM API practice
2 |
3 | - Check your old code for refactoring opportunities (check for alternatives of `setAttribute`, `class=”hidden”` etc.)
4 | - Read articles to prepare for next lecture on web components
5 |
6 | - [Custom Elements](https://developers.google.com/web/fundamentals/web-components/customelements)
7 |
8 | - [Shadow DOM](https://developers.google.com/web/fundamentals/web-components/shadowdom)
9 |
10 | - Check your old code for possible candidates for web components: widgets that are loosely tied to application and can be reused elsewhere.
11 |
--------------------------------------------------------------------------------
/lecture_summary/171212_flow.md:
--------------------------------------------------------------------------------
1 | # Flow (useful links)
2 |
3 | ## Videos
4 | ["HolyWars in a Typings World"](https://youtu.be/rv-5FtJxNic?t=2996) by Gregory Shehet
5 |
6 | [«Строгий» JavaScript: типы против реальности](https://www.youtube.com/watch?v=etKOc80-cw0) by Ilya Klimov
7 |
8 | ## Docs
9 | [Flow website](https://flow.org/en/)
10 |
11 | [Flow Cheatsheet](https://www.saltycrane.com/flow-type-cheat-sheet)
12 |
13 | [List of use cases where Flow is better than TS](https://github.com/vkurchatkin/typescript-vs-flow)
14 |
15 | ## Articles
16 |
17 | ["TypeScript vs Flow", part 1 of 3](http://patrickdesjardins.com/blog/typescript-vs-flow-part-1-of-3-who-they-are)
18 |
19 | [Opaque types in JS](https://codemix.com/opaque-types-in-javascript/) – useful article for type exporting use-case
--------------------------------------------------------------------------------
/lecture_summary/171016_dom_api.md:
--------------------------------------------------------------------------------
1 | ### Specifications:
2 | - [DOM Living Standard](https://dom.spec.whatwg.org/)
3 | - [HTML Living Standard](https://html.spec.whatwg.org/)
4 | - [Webidl - DOM items and JavaScript interaction](https://heycam.github.io/webidl/)
5 |
6 | ### Important concepts:
7 | - Attribute reflection
8 | - `relList`, `classList`, `dataset`
9 | - Custom events
10 | - Event constructors
11 | - Bubbling/capturing
12 | - `preventDefault`/`stopPropagation`/`stopImmediatePropagation`
13 | - DOM elements manipulation
14 | - New Web APIs: `IntersectionObserver`, `ResizeObserver`, `MutationObserver`
15 |
16 |
17 | [Keyboard events specification](https://www.w3.org/TR/uievents-key/)
18 |
19 | [Keyboard event shim](https://github.com/shvaikalesh/shim-keyboard-event-key) by @shvaikalesh
--------------------------------------------------------------------------------
/lecture_summary/171107_fp.md:
--------------------------------------------------------------------------------
1 |
2 | ### Code samples
3 |
4 | - [Intro to FP](https://github.com/roman01la/kottans-intro-into-fp)
5 |
6 | ### Useful links
7 |
8 | - [Purely Functional Data Structures by Chris Okasaki](https://www.cs.cmu.edu/~rwh/theses/okasaki.pdf)
9 | - [Understanding Clojure's Persistent Vectors](http://hypirion.com/musings/understanding-persistent-vector-pt-1)
10 | - [Recursive Data Structures by Roman Liutikov](https://romanliutikov.com/blog/2017/07/29/recursive-data-structures.html)
11 | - [Functional-Light JavaScript (book)](https://github.com/getify/Functional-Light-JS)
12 | - [Understanding Transducers in JavaScript](https://romanliutikov.com/blog/2016/01/26/understanding-transducers-in-javascript.html)
13 | - [Transducers implementation for JavaScript](https://github.com/cognitect-labs/transducers-js)
14 |
--------------------------------------------------------------------------------
/lecture_summary/171019_web_components.md:
--------------------------------------------------------------------------------
1 | ### Useful Links:
2 |
3 | - [Custom Elements Everywhere](https://custom-elements-everywhere.com/)
4 | - [Web Components The React Way](https://hackernoon.com/web-components-the-react-way-8ed5b6f4f942?gi=2815b83de472)
5 | - [Custom Elements by Rob Dodson (video)](https://www.youtube.com/watch?v=sK1ODp0nDbM)
6 | - [Web Components: Just in the Nick of Time (talk by Alex Russel)](https://www.youtube.com/watch?v=y-8Lmg5Gobw)
7 |
8 | ### Specs
9 |
10 | - [Custom Elements](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements)
11 | - [Shadow Tree (WHATWG)](https://dom.spec.whatwg.org/#shadow-trees)
12 | - [`` element](https://html.spec.whatwg.org/multipage/scripting.html#the-template-element)
13 | - [HTML imports](http://w3c.github.io/webcomponents/spec/imports/)
14 |
--------------------------------------------------------------------------------
/lecture_summary/tdd_workshop/index.js:
--------------------------------------------------------------------------------
1 | "use strict"
2 | const escapeMeta = str => str.replace(/[|{}[\]()?+*.\\$^]/g, "\\$&")
3 | const sum = (acc, num) => acc + num
4 | const customDel = /^\/\/(.+)\n/
5 | const anyLenDel = /(?<=\[)(.+?)(?=\])/g
6 |
7 | exports.sum = str => {
8 | let dels = [",", "\n"]
9 |
10 | str =
11 | str.replace(customDel, (_, del) => {
12 | let many = del.match(anyLenDel)
13 | if (many) dels.push(...many)
14 | else dels.push(del)
15 |
16 | return ""
17 | })
18 |
19 | let sep = new RegExp(dels.map(escapeMeta).join("|"))
20 | let nums = str.split(sep).map(Number)
21 | let negs = nums.filter(num => num < 0)
22 |
23 | if (negs.length)
24 | throw new RangeError(`negatives not allowed: ${negs}`)
25 |
26 | return nums
27 | .filter(num => num <= 1000)
28 | .reduce(sum)
29 | }
--------------------------------------------------------------------------------
/lecture_summary/171114_http.md:
--------------------------------------------------------------------------------
1 | ### Useful links
2 |
3 | - [OSI Model](https://en.wikipedia.org/wiki/OSI_model)
4 | - [Referrer Policy](https://www.w3.org/TR/referrer-policy/)
5 | - [User Agent String History](https://webaim.org/blog/user-agent-string-history/)
6 | - [Deploying ES2015 Code in Production Today](https://philipwalton.com/articles/deploying-es2015-code-in-production-today/)
7 | - [HTTP headers on MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers)
8 | - [RFC](https://tools.ietf.org/html/rfc2616)
9 | - [Best Practices for Designing a Pragmatic RESTful API](http://www.vinaysahni.com/best-practices-for-a-pragmatic-restful-api)
10 | - [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS)
11 | - [Safe and Idempotent Methods](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html)
12 | - [Caching Best Practices](https://jakearchibald.com/2016/caching-best-practices/)
--------------------------------------------------------------------------------
/lecture_summary/171021_eslint_workshop.md:
--------------------------------------------------------------------------------
1 | ```yaml
2 | extends: standard
3 | parserOptions:
4 | ecmaVersion: 2017
5 | sourceType: module
6 | env:
7 | browser: true
8 | rules:
9 | no-cond-assign: error
10 | no-dupe-keys: error
11 | no-extra-boolean-cast: error
12 | no-extra-parens: error
13 | semi: error, never
14 | no-sparse-arrays: error
15 | no-unexpected-multiline: error
16 | no-unsafe-finally: error
17 | no-unsafe-negation: error
18 | valid-typeof: error
19 | accessor-pairs: error
20 | class-methods-use-this: error
21 | complexity: error, 5
22 | curly: error, multi-line
23 | dot-location: error, property
24 | dot-notation: error
25 | no-case-declarations: error
26 | no-else-return: error
27 | no-fallthrough: error
28 | no-floating-decimal: error
29 | no-labels: error
30 | no-lone-blocks: error
31 | no-new-wrappers: error
32 | no-proto: error
33 | no-return-assign: error
34 | no-return-await: error
35 | ```
--------------------------------------------------------------------------------
/assignments/170921_html.md:
--------------------------------------------------------------------------------
1 | ### Задание:
2 | Закрепить на практике материалы лекции на примере верстки страницы Reddit. CSS писать не нужно, только разметку!
3 |
4 | Что стоит попробовать:
5 | - Почитать и применить правила допустимого пропуска тегов (tag omission) согласно спецификации WHATWG
6 | - Использовать character entity references (`—` `&` `"` etc.)
7 | - Использовать незнакомые/новые/редкие элементы и атрибуты (dialog, meter, progress; draggable, inert etc.)
8 | - Проверить код в валидаторе WHATWG, установить плагин для валидации HTML в редактор
9 | - Accessibility: навигация с помощью клавиатуры, `tabindex`, `aria`, `roles`, semantic elements
10 | - Формы - валидация html5, типы полей для ввода, атрибут required
11 | - HTML5 Semantic elements - почитать описание, использовать подходящие
12 | - Новые элементы + кросс-браузерность - `picture`, `dialog`, `meter`, `progress`, атрибуты `download`, `ping` etc.
13 | - Протестировать результат в разных браузерах
--------------------------------------------------------------------------------
/lecture_summary/171003_js_old_stuff.md:
--------------------------------------------------------------------------------
1 | ### Code
2 |
3 | ```js
4 | function SubArray(len) {
5 | return Reflect.construct(
6 | Array, [len], SubArray
7 | )
8 | }
9 |
10 | SubArray.prototype = Object.create(
11 | Array.prototype
12 | )
13 |
14 | Object.defineProperties(SubArray.prototype, {
15 | constructor: {
16 | value: SubArray,
17 | writable: true,
18 | configurable: true,
19 | },
20 | last: {
21 | get() {
22 | return this[this.length - 1]
23 | },
24 | configurable: true,
25 | },
26 | })
27 |
28 | let arr = new SubArray(3)
29 | ```
30 |
31 | ### Links
32 |
33 | [Raymond Hettinger - Beyond PEP 8 -- Best practices for beautiful intelligible code](https://www.youtube.com/watch?v=wf-BqAjZb8M)
34 |
35 | [The history of “typeof null”](http://2ality.com/2013/10/typeof-null.html)
36 |
37 | [[[Construct]]: extends the check against non-undefined primitive](https://github.com/tc39/ecma262/pull/469)
38 |
39 | [Liskov substitution principle](https://en.wikipedia.org/wiki/Liskov_substitution_principle)
40 |
41 | [The structured clone algorithm](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm)
--------------------------------------------------------------------------------
/lecture_summary/170923_workshop_postcss.md:
--------------------------------------------------------------------------------
1 | ### Result code by @shvaikalesh
2 |
3 | ```js
4 | 'use strict'
5 | const postcss = require('postcss')
6 | const selectorParser = require('postcss-selector-parser')
7 |
8 | let index = 0
9 |
10 | const plugin = postcss.plugin('postcss-autofill', () => {
11 | return root => root.walkRules(rule => {
12 | let {res} = selectorParser(sel => {
13 | sel.walkPseudos(pseudo => {
14 | if (pseudo.value == ':autofill')
15 | pseudo.value = ':-webkit-autofill'
16 | })
17 | }).process(rule.selector)
18 |
19 | res += ''
20 | if (res == rule.selector) return
21 |
22 | let params = `postcss-autofill-${++index}`
23 | let keyframes = postcss.atRule({
24 | name: 'keyframes', params
25 | })
26 |
27 | let to = postcss.rule({
28 | selector: 'to'
29 | })
30 |
31 | let decls = rule.nodes
32 | .filter(node => node.type == 'decl')
33 |
34 | to.append(...decls)
35 |
36 | root.prepend(keyframes)
37 | rule.selector = res
38 |
39 | keyframes.append(to)
40 | keyframes.source = rule.source
41 |
42 | rule.append({
43 | type: 'decl',
44 | prop: 'animation',
45 | value: `${params} 1s forwards`,
46 | })
47 | })
48 | })
49 |
50 | postcss([plugin]).process(`
51 | input:autofill {
52 | color: red !important;
53 | }
54 | `).then(res => console.log(res.css))
55 | ```
--------------------------------------------------------------------------------
/lecture_summary/170921_html.md:
--------------------------------------------------------------------------------
1 | ### Kottans Front-end 2017. Lecture 2: HTML & Accessibility by Aleksey Shvayka
2 | * Markup languages: history, philosophy, implementations.XML, SGML, HTML.
3 | * HTML standardization bodies: WHATWG, W3C.
4 | * HTML elements, tags, attributes. Boolean attributes. Tag omission rules.
5 | * Syntax:
6 | * Escape entities (remember most used, mind the semicolon)
7 | * Whitespace tolerance => code readability
8 | * Boolean attributes (omit value when not needed)
9 | * Void elements & no-content elements
10 | * Accessibility:
11 | * Tabindex, Screen readers, focusable elements, visually hidden elements.
12 | * Semantics:
13 | * `` vs ``, `` vs ``, buttons vs links (mind accessibility)
14 | * Misc
15 | * Aria roles
16 | * Header ranking (`h1`, `h2`, `h3` etc.)
17 | * HTML forms - built-in validation, input types.
18 | * New and rarely used elements & attributes: `dialog`, `meter`, `progress`; `download`, `inert`, `ping` etc.
19 |
20 | #### Links:
21 | * [WHATWG HTML Specification ](https://html.spec.whatwg.org/multipage/)
22 | * [Elements description: ](https://html.spec.whatwg.org/multipage/#toc-semantics)
23 | * [Content kinds diagram:](https://html.spec.whatwg.org/multipage/dom.html#kinds-of-content)
24 | * [Usage summary of elements: ](https://html.spec.whatwg.org/multipage/text-level-semantics.html#usage-summary)
25 | * [What is the difference between WHATWG & W3C (discussion on Reddit): ](https://www.reddit.com/r/javascript/comments/5swe9b/what_is_the_difference_between_the_w3c_and_the/)
26 |
27 | * [Element vs Tag](http://perfectionkills.com/tag-is-not-an-element-or-is-it/)
28 | * [HTML5 quiz](https://html5te.st/quiz/)
29 | * [Character references in HTML ](https://mathiasbynens.be/notes/ambiguous-ampersands)
30 | * [Example discussion about element:](https://github.com/w3c/html/issues/774)
31 | * [Discussion on importance of ‘lang’ attribute]( https://github.com/TryGhost/Casper/issues/286)
32 | * [Talk by Vadim Makeev on Inhuman UI:]( https://pepelsbey.net/pres/inhuman-ui/)
33 | * [Web standards podcast:](https://soundcloud.com/web-standards)
34 | * [Why icon fonts are not ok:]( https://github.com/blog/2112-delivering-octicons-with-svg)
35 | * [Talk by Vadim Makeev on ‘picture’ element:](https://www.youtube.com/watch?v=Szo-2D7TtEU)
36 | * [Course on accessibility on Egghead ](https://egghead.io/courses/start-building-accessible-web-applications-today)
37 | * Resources on html, web standards and semantic elements:
38 | * https://htmlacademy.ru/shorts
39 | * https://htmlacademy.ru/
40 | * https://wsd.events/
41 | * http://html5doctor.com/
42 |
--------------------------------------------------------------------------------
/lecture_summary/tdd_workshop/test.js:
--------------------------------------------------------------------------------
1 | "use strict"
2 | const calc = require(".")
3 |
4 | describe("calc.sum", () => {
5 | it("is a function", () => {
6 | calc.should.respondTo("sum")
7 | })
8 |
9 | const {sum} = calc
10 |
11 | describe("returns sum", () => {
12 | it("empty string", () => {
13 | sum("").should.equal(0)
14 | })
15 |
16 | it("one number", () => {
17 | sum("10").should.equal(10)
18 | sum("0.").should.equal(0)
19 | sum(".0").should.equal(0)
20 | sum("1e3").should.equal(1e3)
21 | sum("1E-3").should.equal(1E-3)
22 | sum("2").should.equal(2)
23 | sum("1.2").should.equal(1.2)
24 | sum("0xff").should.equal(255)
25 | sum("0o666").should.equal(0o666)
26 | sum("0B10101").should.equal(0B10101)
27 | })
28 |
29 | it("two numbers", () => {
30 | sum("1,2").should.equal(3)
31 | sum("4,8.5").should.equal(12.5)
32 | sum("1e3,0xf").should.equal(1015)
33 | })
34 |
35 | it("multiple numbers", () => {
36 | sum("1,2,3").should.equal(6)
37 | sum("1.5,2,0.5").should.equal(4)
38 | sum("0xf,0o6,1").should.equal(22)
39 | })
40 | })
41 |
42 | describe("delimiters", () => {
43 | it("\\n", () => {
44 | sum("1\n2,3").should.equal(6)
45 | sum("10\n2\n1,3.5").should.equal(16.5)
46 | sum("1e3\n0b1010101,2.5").should.equal(1087.5)
47 | })
48 |
49 | describe("custom", () => {
50 | it("single char", () => {
51 | sum("//;\n1,2;3\n4").should.equal(10)
52 | sum("//[\n1\n2[3,4").should.equal(10)
53 | sum("//]\n1]2,3\n4").should.equal(10)
54 | })
55 |
56 | it("multi char", () => {
57 | sum("//[**]\n1**2**3,4\n5").should.equal(15)
58 | sum("//[*]\n1,2*3*4\n5").should.equal(15)
59 | })
60 |
61 | it("multiple", () => {
62 | sum("//[!][**][&]\n1!2**3&4,5\n6").should.equal(21)
63 | })
64 |
65 | it("escapes RegExp meta chars", () => {
66 | sum("//.\n1,2.3\n4").should.equal(10)
67 | })
68 |
69 | it("handles unicode symbols", () => {
70 | sum("//🤘\n1🤘2,3🤘4").should.equal(10)
71 | })
72 | })
73 | })
74 |
75 | describe("throws on negatives", () => {
76 | it("one", () => {
77 | ;(() => sum("1,-1")).should.throw(RangeError, "negatives not allowed: -1")
78 | })
79 |
80 | it("multiple", () => {
81 | ;(() => sum("1,-1,-2")).should.throw(RangeError, "negatives not allowed: -1,-2")
82 | ;(() => sum("1,-1,-2,-3")).should.throw(RangeError, "negatives not allowed: -1,-2,-3")
83 | })
84 | })
85 |
86 | it("big numbers are ignored", () => {
87 | sum("1e3,2").should.equal(1002)
88 | sum("1001,2").should.equal(2)
89 | })
90 | })
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Repo for JS Course 2017
2 |
3 | [](https://gitter.im/Kottans/JSCourse2017?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
4 |
5 | Date | Time | Topic | Coach | Summary | Slides | Video | Home task
6 | -----------|-------|---------|---------|---------|--------|-------|----------
7 | Tue Sep 19 | 19:00 | Intro | [Alex Lapshyn](https://github.com/sudodoki)|| [Slides](http://sudodoki.github.io/slides/kottans-intro-slides) |[Video](https://youtu.be/3wZsafZ0UPk) | [task](https://gist.github.com/sudodoki/5bc7551f1fcf6540d1f70fdf0726220e)
8 | Thu Sep 21 | 19:00 | HTML: new stuff | [Aleksey Shvayka](https://github.com/shvaikalesh) | [Summary](lecture_summary/170921_html.md) | |TBA | [task](assignments/170921_html.md)
9 | Sat Sep 23 | 12:00 | **[workshop]**: PostCSS | [Aleksey Shvayka](https://github.com/shvaikalesh) | [Code](lecture_summary/170923_workshop_postcss.md)
10 | Tue Sep 26 | 19:00 | CSS: new stuff | [Aleksey Shvayka](https://github.com/shvaikalesh)
11 | Thu Sep 28 | 19:00 | JS: intro | [Aleksey Shvayka](https://github.com/shvaikalesh)
12 | Tue Oct 3 | 19:00 | JS: descriptors & classes | [Aleksey Shvayka](https://github.com/shvaikalesh) || [Summary & code](lecture_summary/171003_js_old_stuff.md)
13 | Thu Oct 5 | 19:00 | JS: tagged templates, iterators | [Aleksey Shvayka](https://github.com/shvaikalesh)
14 | Sat Oct 7 | 12:00 | **[workshop]** Grid Layout | [Anton Nemtsev](https://github.com/SilentImp)| [Summary](lecture_summary/171007_workshop_grid_layout.md)|[Slides](https://silentimp.github.io/grid/)||[task](https://docs.google.com/document/d/1sMaCr7T8osfR5Lhn2-5gGFhU7Lxcd0SqNuy_YFfunLs/edit?usp=sharing)
15 | Tue Oct 10 | 19:00 | JS: symbols, collections, generators | [Aleksey Shvayka](https://github.com/shvaikalesh)
16 | Thu Oct 12 | 19:00 | **[remote]** JS: promises, proxies | [Aleksey Shvayka](https://github.com/shvaikalesh)
17 | Tue Oct 17 | 19:00 | DOM APIs | [Aleksey Shvayka](https://github.com/shvaikalesh) | [Summary](lecture_summary/171016_dom_api.md) ||| [task](assignments/171016_dom_api.md)
18 | Thu Oct 19 | 19:00 | Web Components | [Aleksey Shvayka](https://github.com/shvaikalesh) | [Summary](lecture_summary/171019_web_components.md) ||| [task](assignments/171019_web_components.md)
19 | Sat Oct 21 | 12:00 | **[workshop]** ESLint | [Aleksey Shvayka](https://github.com/shvaikalesh) | [Code](lecture_summary/171021_eslint_workshop.md)
20 | Tue Oct 24 | 19:00 | PWA | [Artem Denysov](https://github.com/denar90) || [Slides](https://docs.google.com/presentation/d/1JghXnEAANvAW1tSkLRuhFISocGVkIpQKIIJJnwdTHCI/present?slide=id.p)
21 | Sat Oct 28 | 12:00 | **[workshop]** Mocha/Chai/TDD | [Aleksey Shvayka](https://github.com/shvaikalesh) | [Code](lecture_summary/tdd_workshop/)
22 | Thu Nov 2 | 19:00 | Fetch, XSS, CQRS, CSP | [Aleksey Shvayka](https://github.com/shvaikalesh)
23 | Sat Nov 4 | 12:00 | **[workshop]** Babel | [Artem Yavorsky](https://github.com/yavorsky)
24 | Tue Nov 7 | 19:00 | Practical FP | [Roman Liutikov](https://github.com/roman01la) | [Summary](lecture_summary/171107_fp.md)
25 | Thu Nov 9 | 19:00 | CI/CD | [Yuri Tkachenko](https://github.com/tyv) | [Config](https://github.com/tyv/ci-cd-kottans-live)
26 | Sat Nov 11 | 12:00 | **[remote]** **[workshop]** Webpack | [Ivan Akulov](https://github.com/iamakulov) | | | [Video](https://youtu.be/WhOxdbcgd3E?list=PLTbz5Wv5vNcs0zKKmF0DSo6m05RnMqUXk)
27 | Tue Nov 14 | 19:00 | HTTP | [Aleksey Shvayka](https://github.com/shvaikalesh) | [Summary](lecture_summary/171114_http.md)
28 | Thu Nov 16 | 19:00 | Node: basics | [Aleksey Shvayka](https://github.com/shvaikalesh)
29 | Sat Nov 18 | 12:00 | **[workshop]** Node | [Andrey Listochkin](https://github.com/listochkin) ||| [Video](https://www.youtube.com/watch?v=8ngwCn89uJ0)
30 | Tue Nov 21 | 19:00 | React | [Kateryna Porshnieva](https://github.com/krambertech)
31 | Thu Nov 23 | 19:00 | React + Redux | [Kateryna Porshnieva](https://github.com/krambertech)
32 | Tue Nov 28 | 19:00 | Vue | [Volodymyr Stelmakh](https://github.com/stelmakh)
33 | Sat Dec 2 | 12:00 | **[workshop]** Vue | [Volodymyr Stelmakh](https://github.com/stelmakh)
34 | Tue Dec 5 | 19:00 | Data visualization with d3 | [Alex Lapshyn](https://github.com/sudodoki) || [Slides](http://sudodoki.github.io/slides/kottans-visualization/)
35 | Thu Dec 7 | 19:00 | MobX | [Aleksey Shvayka](https://github.com/shvaikalesh)
36 | Tue Dec 12 | 19:00 | Flowtype | [Stas Gavrylov](https://github.com/stasgavrylov) | [Summary](lecture_summary/171212_flow.md)|
37 | Thu Dec 14 | 19:00 | Outro | [Artem Sychov](https://github.com/suchov)
38 | Sat Dec 16 | 12:00 | **[workshop]** React + Redux | [Alex Lapshyn](https://github.com/sudodoki)
39 |
--------------------------------------------------------------------------------