Темы встреч и дополнительные материалы (игры, демки)

[gucol]

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

Возможные темы:

• Семантическая вёрстка
• Flexbox
  • FLEXBOX FROGGY (игра)
  • Flexbox Defense (игра)
  • Flexbox Zombies (игра)
• SVG
• Селекторы и наследование
• Анимации
• Рамки, фоны, градиенты
• Основы JS
• Основы Git
  • Learn Git Branching (интерактивный курс)
• Гриды
  • GRID GARDEN (игра)

[tsergeytovarov]

Тут нет темы про Гриды, а по ним можно целый класс собрать.

[gucol]

Спасибо, добавила гриды)

[nikolai-shabalin]

HTML

• canvas - это врядли для новичков, но что существует такой мощный тег думаю можно рассказать/познакомить
  • есть куча демок на codepen
  • туторы - https://www.script-tutorials.com/html5-canvas-3d-sphere/
• формы
  • типы инпутов, чем отличаются, для чего придумывались
  • специфические атрибуты - например autocomplete
  • type="file" - тут вообще про многое можно рассказать, и как показать превью, и как сделать dnd
  • управление с клавиатуры
  • рассказать отличия label от placeholder
  • показать пример с неработаюшим js, это когда JS отключен и почему-то перестают работать формы, хотя могли бы продолжить
• picture - один из моих любимых тегов
  • тут же можно рассказать про графику в вебе, когда стоит применять png, jpg и svg
• head - имеется ввиду - вот тут много интересного - https://github.com/joshbuchea/HEAD
• про html5 теги в целом отдельно можно рассказать. Вот эту всю историю про ужасные DOCTYPE в html4
  • теги - details, summary
• БЭМ и другие методологии.
• video, audio

CSS

• animation

  • вот тут очень хорошо, спасибо Yoksel - http://css.yoksel.ru/css-animation/
  • всякие хаки - https://habr.com/post/204238/
  • демки можно взять в codepen
  • как в GPU отправить анимацию - https://habr.com/company/odnoklassniki/blog/313978/
  • про paint слои
  • motion path - https://stfalcon.com/ru/blog/post/animation-css
  • про изинги
  • как дебажить анимацию в хроме

• фоны

  • радиальные фоны
  • градиентные фоны
  • мультифоны
  • https://web-standards.ru/articles/linear-gradient-keywords/

• селекторы

  • вес селектора
  • почему браузер читает селекторы справа налево - http://andrew-r.ru/notes/css-selectors-matching
  • типы селеторов - http://everstudent.ru/blog/htmlcss/30-css-seletors-to-memorize/
  • можно рассказать про задумки, помню были задумки селектор ^ "домик" и ^^ "кошечка" - это что-то типа обращение к родителю

• dpi

  • про ретина дисплей
  • про подготовку графики и шрифтов к ретину дисплеям
  • общее - https://habr.com/post/237931/

• фильтры

  • стандартное как сделать инстаграм =)

• псевдоэлементы и псевдоклассы

  • отличия
  • про отличия в html5 между : и ::

• единицы измерения

  • px
  • % - самая сложная единицы измерения, так как контекстная
  • рассказать почему height: 100% работает не так как ожидается
  • em
  • rem
  • ch
  • vw, vh
  • vmin, vmax
  • про баги единиц измерения - допустим вьюпортные единицы работают учитывая скролл на странице

• custom properties

  • ну тут вообще можно развернуться. Большая тема

• position: sticky

Javascript

• var, let, const - поднятие
• lexical environment
• асинхронное программирование
• прототипное ООП (вот такая странная фраза)
• ООП и функциональное программирование. Рассказать ,что JS эта та штука, где можно и то, и то одновременно.
• мутации
• итераторы и генераторы
• прокси объекты
• стрелочные функции
• параметры по умолчанию
• асинхронное программирование - setTimeout, promises, async await. Также можно рассказать про callback hell
• чистый код
• рекурсия (это конечно не прям по JS, но тема интересная и малопонятная новичкам)
• отладка JS в хроме
• отладка JS в IDE (webstorm умеет)
• про события - погружается, всплывает, останавливается, делигируется
• про всевозможные браузерные стораджи - localStorage, indexedDB
• типы данных - сложные и простые
• webgl

Performance

• всевозможные минификации
• как отлаживать
• как засекать профиты в каком-нибудь google lighthouse

Git

• add, commit, push, pull
• pro

Сборщики

• gulp
• webpack
• browserify
• bower
• requirejs
• AMD, UMD, LMD, Common Я тут под одну гребёнку конечно всё, но рассказать про всевозможные системы сборки думаю интересно

Препроцессоры

• less, sass
• postcss в целом рассказать, что всё это уже умирает и можно начинать переходить на нативщину (ну эт моё мнение)

Браузерное API

• fullscreen
• про user-agent
• history API
• в целом по web api полезно пройтись хотя бы по верхам

Доступность

Даже писать ничего не буду. Кажется, что в 2018 только об этом и говорят, но новичкам, точно не стоит забывать о ней.

Рабочее место

• здоровье, что сделать, чтобы не закиснуть
• перефирия - клавиатура, мышка, два монитора - надо уметь выбирать если хочешь себя посвятить программированию. Глаза могут умереть при неправильном мониторе. Кисть отпасть.

Какие-то тему можно объединить, но в целом о каждой можно интересно рассказать.