Всем привет, с вами @kirjs!

Я редко пишу в твиттер, и почти никогда на русском. Рад что есть возможность попробов… twitter.com/i/web/status/1…

6:20

Я сейчас в Аэропорту, жду самолет в Львов 🇺🇦

Там я и мой коллега - Tyler Crowe выступим на митапе @GDGLviv.

🎤 Я… twitter.com/i/web/status/1…

7:36

@jsunderhood @GDGLviv @gdg_kyivcenter @elgephest @mato_chu @kottans_org @maktarsis Это же Кислый Том (Tom Sour)!

10:41

Естественно речь про Tom Sour 🥃
Там, кстати, скоро дэскотека pic.twitter.com/8QonKmJyus

@GDGLviv @gdg_kyivcenter @elgephest @mato_chu @kottans_org @maktarsis Особенно впечатлило, когда мы с @mato_chu сто… twitter.com/i/web/status/1…

10:51

This search algorithm is O(n) 😁

pic.twitter.com/UguZs3Nh9U

11:29

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

Ура, теперь я тоже участник… twitter.com/i/web/status/1…

7:01

И вот я уже в личном кабинете!

Поправка от @jabher, как видно на скрине, можно контрибьютить совсем в любые проек… twitter.com/i/web/status/1…

7:03

@jsunderhood Пошел искать по гитхабу issue с лейблом hacktoberfest, но нашёл очень много issue вида «опиши фильм/пе… twitter.com/i/web/status/1…

@hacktoberfest just started. As maintainer of ramda-adjunct library, I prepared couple of issues that you can start… twitter.com/i/web/status/1…

7:44

🐞Debugging🐞

Начну с консоли:

Есть мнение, дебажить с помощью консоли/console.log - "не круто", т.к. есть дебагге… twitter.com/i/web/status/1…

12:38

Вот примеры ситуаций где консоль очень полезна:
🦋 Простая ошибка - все понятно, надо быстро подтвердить
🦋 Ошибка в… twitter.com/i/web/status/1…

12:39

Посмотрим что умеет консоль. На странице в браузере нажимаем F12.

Про Console.log много писать не буду

Есть инте… twitter.com/i/web/status/1…

12:43

При дебаге массивов с большим количеством объектов:

сonsole.log(list) показывает массив в свернутом виде.

console… twitter.com/i/web/status/1…

12:59

Еще console.log не умеет показывать, какие свойства есть у функции. зато есть console.dir

function Camille(){ //… twitter.com/i/web/status/1…

13:02

В некоторых проектах консоль - как мусорка

В консоли гибкая система фильтров:

⛔️ Hide Network - прячет сетевые ош… twitter.com/i/web/status/1…

13:14

console.log это не стыдно!

🐞Debugging🐞

Начну с консоли:

Есть мнение, дебажить с помощью консоли/console.log - "не круто", т.к. есть дебагге… twitter.com/i/web/status/1…

13:15

Чтобы отследить откуда именно была вызвана функция с определенными параметрами, можно использовать console.trace().… twitter.com/i/web/status/1…

13:29

В случае когда функция запускается много-много раз, а ломается только один, можно использовать:

console.assert(a,… twitter.com/i/web/status/1…

13:32

console.log поддерживает оформление вывода с помощью CSS:

console.log(‘%c Hi’, ‘color: red’); // Выведет Hi красны… twitter.com/i/web/status/1…

13:34

Про консоль хватит, хотя там есть еще очень много крутого.

Домашнее задание: console.log(console) и посмотреть что… twitter.com/i/web/status/1…

13:38

@jsunderhood Не раз спасал monitor

Использовать так:
monitor(ga);
в консоле будут аргументы вызванной ga функции… twitter.com/i/web/status/1…

9:55

Продолжим тему дебага историей из реальной жизни.

Это случилось на проекте с Ангуларом, но самого Ангулара вы не у… twitter.com/i/web/status/1…

10:32

При запуске тестов на проекте (на котором тесты не запускались очень давно), выпадала странная ошибка:

> npm test… twitter.com/i/web/status/1…

10:36

@jsunderhood У меня был другой баг. Писал тестовое. Подсчет показов. Взял с ли.ру js код. С ОТКРЫТОЙ консолью счит… twitter.com/i/web/status/1…

10:36

Тут важно понимать, что (почти) все что, что запускается из npm, это обычный JavaScript, а значит код скорее всего… twitter.com/i/web/status/1…

10:49

Нам повезло: результаты довольно однозначные, поэтому мы просто добавляем "debugger" перед выведением ошибки.

Когд… twitter.com/i/web/status/1…

10:57

@shaukote @jsunderhood а что насчет logpoints? developers.google.com/web/updates/20…

По идее, они должны приносить меньше искажений

11:03

Пришло время взять в руки дебаггер! C node.js это немного посложнее чем с браузером, но ничего невозможного. Чтобы… twitter.com/i/web/status/1…

11:04

Локальный бинарник ng лежит в папке node_modules/.bin, и это просто javascript файл.

Это значит что мы просто може… twitter.com/i/web/status/1…

11:06

Добавим --inspect-brk, чтобы запустить nodejs в дебаг режиме:

$ node --inspect-brk node_modules/.bin/ng test feed… twitter.com/i/web/status/1…

11:08

Дебаггеры бывают разные, мы используем Chrome Dev Tools: в Chrome заходим по адресу: chrome://inspect/#devices

И в… twitter.com/i/web/status/1…

11:12

На самом деле есть альтернатива (Но еще не очень стабильная) всем этим сложным махинациям, можно использовать… twitter.com/i/web/status/1…

11:17

На этой драматической ноте я пойду посплю, потому что болею, и у меня по ходу температура 😫

Когда я вернусь расск… twitter.com/i/web/status/1…

11:27

@jsunderhood Был интересный баг, когда рейс кондишен не работал при открытой консоли, потому что стоял флаг Disable… twitter.com/i/web/status/1…

18:29

@jsunderhood Для автоматизации всех этих рутинных действий я поставил себе NiM (node inspector manager) расширение в хром. Рекомендую всем

18:29

@jsunderhood Ещё один секрет WebStrom. Ставим брикпоинт на нужный тест, в package.json кликаем правой кнопкой на ну… twitter.com/i/web/status/1…

18:29

Ок, посмотрим что тут происходит:

9:45

Тип ошибки - MODULE_NOT_FOUND

В сообщении ошибки - fileConfigPath - путь файла который мы пытаемся получить. pic.twitter.com/6AUv2wN5nb

9:46

В образовательных целях давайте попробуем поймать эту ошибку.

Для этого нам нужно остановиться ДО require(...). Ч… twitter.com/i/web/status/1…

9:52

Убедимся что все гуд:
1) Мы Остановились на нужной строчке
2) до require()

Теперь:
3) Включим остановку при выбрас… twitter.com/i/web/status/1…

10:02

Вот наша первая остановка 🔥

10:18

Мы пришли сюда из кармы, parseConfig, как и ожидалось.

Также мы видим в стеке вызовов karma.conf.js, по ходу… twitter.com/i/web/status/1…

10:21

Вот и наш файл.

Во-первых он все-таки есть.
Во-вторых он пытается загрузить несуществующий файл.
Это вызывает оши… twitter.com/i/web/status/1…

10:24

Ок, вернувшись в начала мы:

1. Убедимся что это та же самая ошибка.

Вроде код и сообщение совпадают.

Единственн… twitter.com/i/web/status/1…

10:26

Да вот же он, прямо в стеке вызовов. По какой-то причине загрузчик модулей посчитал что добавить стек в сообщение э… twitter.com/i/web/status/1…

10:30

Возвращаемся в код загрузчика и видим что стек добавляется в сообщение вручную. pic.twitter.com/Mo2qExBhT4

10:39

резюме:

Карма ловит ошибку при загрузке конфига и делает две проверки:

4) code === MODULE_NOT_FOUND
✅ Верна для… twitter.com/i/web/status/1…

11:00

Что делать дальше?

1) В целом понятно как починить это локально - убрать сломанный require
2) Это 100% баг кармы,… twitter.com/i/web/status/1…

11:05

Через пару недель кто-то сделал PR (github.com/karma-runner/k…).

Вместо добавления новых условий они просто убрали су… twitter.com/i/web/status/1…

11:07

На этом детективная история со счастливым финалом закончена!

Спасибо всем кто прочитал до конца 🔥🔥🔥

У меня заня… twitter.com/i/web/status/1…

11:09

Напоминаю всем, что в вашей операционной системе скорее всего есть emoji picker, который можно вызвать с клавиатуры… twitter.com/i/web/status/1…

11:32

🤯 Про хорошие объяснения 🤯

Хорошо объяснять очень сложно.

Хорошо объяснить как хорошо объяснять - еще сложнее.… twitter.com/i/web/status/1…

11:47

Почему именно я рассказываю про хорошие объяснения?

Все мое детство я ненавидел школу потому что никто не мог ниче… twitter.com/i/web/status/1…

11:49

Поэтому я трачу много времени на объяснения:
🦋 3 года преподавал в школе основы программирования
🦋 При выступлениях… twitter.com/i/web/status/1…

11:52

Мне кажется, при объяснении, важно четко знать ответ на три вопроса:

11:55

Вот (очень-очень грубый) пример того, что возможно могло бы происходить в школе:

11:59

Вот тут мы изменим одну переменную:

12:03

Школы бывают разные, есть неплохая книга - amazon.com/Case-against-E… - которая о том, что школы не обязательно об обу… twitter.com/i/web/status/1…

12:05

Возьмем другой пример: Call For Proposals на конференции.

Люди отправляют краткое описание выступления, которое о… twitter.com/i/web/status/1…

12:08

Это в принципе квинтэссенция объяснений: надо вместить (полу)часовое выступление в несколько строчек.

Организаторы… twitter.com/i/web/status/1…

12:12

Потенциальные выступающие хотят... много чего, но из общего скорее всего:
🦋 Попасть на конфу
🦋 Поделиться важной для них темой

12:23

Вот пример структуры proposal, который соответствует ожиданиям:

Глоканье куздр используется в 98 из топ 100 сайтов… twitter.com/i/web/status/1…

12:31

Если вам нужно объяснить то же вашей бабушке, то скорее всего она просто хочет убедиться что у вас в жизни все в по… twitter.com/i/web/status/1…

12:34

Если вам нужно написать твит про это, то важно понимать кто ваша аудитория, если 80% ваших твитов про глоканье, ско… twitter.com/i/web/status/1…

12:37

Я столько про это пишу, потому что зачастую вижу, что люди которые выступают просто не задаются этими тремя вопроса… twitter.com/i/web/status/1…

12:40

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

Тут важно понимать, ч… twitter.com/i/web/status/1…

12:44

🔥Правило хороших объяснений #1: 🔥

Начинайте сразу с интересного.

Для презентаций есть так называемое "правило одн… twitter.com/i/web/status/1…

12:57

В следующий раз когда будете смотреть техническую презентацию, рекомендую обратить внимание на первую минуту.

Я в… twitter.com/i/web/status/1…

13:00

Вот пример не технического выступления (не связанного с объяснением, но очень рекомендую).

youtube.com/watch?v=-vZXgA…… twitter.com/i/web/status/1…

13:01

Вот пример, тут видео всего 4 минуты, но ни секунды не потрачено:
youtube.com/watch?v=u9m8ku…

13:04

А вот первое видео, которое мне посоветовал youtube:

В течении минуты мы не узнали ничего чего бы не было в описан… twitter.com/i/web/status/1…

13:06

Вот пример из другой вселенной и формата:
Объяснения Hello world на с++

Из 8 строк релевантна только одна, осталь… twitter.com/i/web/status/1…

13:09

🔥 Regular expressions just got faster *and* more memory-efficient in V8: v8.dev/blog/regexp-ti… pic.twitter.com/tWNK7YQr3t

14:53

лампочка в голове: почему нас обучают самой неинтересной математике? почему бы не начать с фундаментальных областей… twitter.com/i/web/status/1…

14:54

@nastyakitsun @jsunderhood nbspace.ru/math/
Пол Локхард "Плач математика"

15:02

🔥Правило хороших объяснений #2: 🔥

Не учите пользователя решать задачи которых у пользователя нет

Очень часто вижу… twitter.com/i/web/status/1…

15:10

Такое очень часто происходит в школах и универах: на ученика просто вываливается куча знаний без каких либо попыток… twitter.com/i/web/status/1…

15:18

Под горячую руку попался @matvi3nko, он только что выложил свои слайды с @Heapconf (slideshare.net/NikolayMatvien…)

на п… twitter.com/i/web/status/1…

15:24

Мы, человеки, тоже представляем набор API.

Только он плохо документирован, на идемпотентен, не всегда работает и постоянно меняется.

9:00

Программирование - это конечно хорошо, курс - ещё лучше. Но я почти год как без отношений и наконец-то готова к нов… twitter.com/i/web/status/1…

9:38

🦋Минутка истории🦋

В далеком 2007 (ЖЖ!), Леонид Каганов выложил в блоге личностный тест Виконт

Ответив на на неско… twitter.com/i/web/status/1…

10:27

Однако не все было так просто.

С помощью cookies, сервер отдавал картинку из первого поста только автору журнала.… twitter.com/i/web/status/1…

10:31

В результате весь рунет пестрел картинками "Я лох", что провоцировало еще больше юзеров выложить свои "позитивные р… twitter.com/i/web/status/1…

10:35

Ок, я вроде все

Это был очень крутой опыт, всем спасибо за коменты, я сам много нового узнал.

Отдельное спасибо:… twitter.com/i/web/status/1…

11:13

✨Как поймать всплывающее окошко в Dev Tools ✨

Использовать горячую клавишу (F8) для остановки выполнения JS ⏸

🥔В… twitter.com/i/web/status/1…

11:45

«Не рассказываю, потому что думаю, что все всё знают» — очень популярная ошибка в ИТ

@jsunderhood @andrey_sitnik @PavukSenya Насколько вообще актуальны такие подсказки? До этого лайфхака сам дошел, бы… twitter.com/i/web/status/1…

12:39

Казалось бы, вы успешны в своей профессии, но все равно не уверены в себе, и чувствуете, что недостаточно хороши,… twitter.com/i/web/status/1…

13:47

Вы успешны в своей профессии, уверены в себе, может даже слишком хороши, и у вас некогда не было синдрома самозван… twitter.com/i/web/status/1…

13:53

@pvpshoot @jsunderhood @andrey_sitnik Есть и специальные инструменты для них developers.google.com/web/tools/chro…

14:16

🔥Хочу быть ментором 🔥

Ищу кого-нибудь, у кого есть:

🦋 Несколько часов свободного времени в неделю
🦋 Желание сдела… twitter.com/i/web/status/1…

14:31

Со своей стороны:

🦋 Найду issues разной сложности на своем проекте
🦋 Объясню issues и помогу начать писать код
🦋 П… twitter.com/i/web/status/1…

14:38

При обучении программированию предлагаю выбрать интересный проект самому ученику (ученице).

Если такой проект есть… twitter.com/i/web/status/1…

🔥Правило хороших объяснений #1: 🔥

Начинайте сразу с интересного.

Для презентаций есть так называемое "правило одн… twitter.com/i/web/status/1…

15:01

@jsunderhood Тоже на всякий отмечусь в поиске ментора, но по React
А ещё удаленную постоянную работу ищу

15:31

@jsunderhood А можно и мне ментора? Как раз сейчас очень не хватает :-/ вдруг кто-то здесь в комментариях найдётся, например

15:31

@jsunderhood Хочу ментора по реакту. Готов уделять время проекту )

15:47

@jsunderhood Ищу ментора по менторству. Могу в кого нибудь менторить если кто-нибудь будет менторить в меня.

Даёшь… twitter.com/i/web/status/1…

16:15

@jsunderhood @almost_bergman И я по реакту, найду и уделю много времени

16:24

@jsunderhood Тоже ищу ментора в целом по процессу софт-инжиниринга, не привязываясь особо к стэку. Пишу в одно лицо… twitter.com/i/web/status/1…

17:58

✨Кому c++ ментора? ✨

18:17

Эту неделю с вами был @kirjs 😀 Не забываем что @jsunderhood это коллективный аккаунт и моя неделя подошла к концу,… twitter.com/i/web/status/1…

7:14