- 32
- 639 489
Pomazkov JS
Приєднався 23 лис 2022
Меня зовут Арсений Помазков, я - senior frontend-разработчик, и на этом канале я рассказываю про фронтенд максимально просто и понятно.
Моя цель - показать вам, что веб-разработка - это не только перспективно и востребовано, но и очень увлекательно 🔥
Моя цель - показать вам, что веб-разработка - это не только перспективно и востребовано, но и очень увлекательно 🔥
Курс по Grammy JS: вся БАЗА | как писать телеграм-ботов на JS
⭐ BOOSTY: boosty.to/pomazkovjs
⭐ Поддержать донатом: boosty.to/pomazkovjs/single-payment/donation/500599/
⭐ Интенсив по JS: pomazkovjs-hangman.ru/
✅ Текстовая версия ролика: slc.tl/sy40z
✅ Сервер Selectel: slc.tl/qtz71
В этом видео мы разберем все основные механизмы библиотеки Grammy JS:
- стартовый набор файлов бота и общую структуру
- слушатели событий от пользователя
- объект Context: контекст обновления
- работу с двумя видами клавиатуры
и многое другое.
Приятного просмотра!
Ссылки по GrammyJS:
* Обработка ошибок - grammy.dev/guide/errors
* Фильтры bot.on - grammy.dev/guide/filter-queries
* Context (ctx) - grammy.dev/guide/context
* parse_mode: “HTML” - core.telegram.org/bots/api#html-style
* “MarkdownV2” - core.telegram.org/bots/api#markdownv2-style
* Настройка login / pay методов - deno.land/x/grammy@v1.21.1/mod.ts?s=InlineKeyboard#method_login_0
* СОЦ. СЕТИ:
👀 Instagram - pomazkov.js
🚀 Telegram - t.me/pomazkovjs
Тайм-коды:
00:00 Интро
01:18 Получаем токен для телеграм бота
02:21 Создаем проект
05:24 Стартовый код бота
08:30 Запуск бота с nodemon
09:31 Порядок слушателей в grammy (важно)
11:09 Обработка ошибок в grammy js
13:35 Обработка сообщений от пользователя
14:03 bot.command - команды
15:25 Одинаковая реакция на несколько команд
16:16 Как сделать меню команд у бота (bot.api.setMyCommands)
17:49 Ограничения работы с командами
20:09 bot.on - фильтрация по типу сообщения
24:48 bot.filter - свои кастомные фильтры
27:43 bot.hears - ответ на конкретные сообщения
29:06 Регулярные выражения
30:08 Еще раз про важность расположения слушателей
31:17 Объект Context (контекст обновления)
33:04 Как узнать свой id в телеграм
34:34 Подробнее про ctx.reply
35:09 Ответ на конкретное сообщение
35:54 Форматирование сообщений телеграм бота
38:25 disable_web_page_preview
38:50 ctx.react - отправка реакций на сообщения
39:35 Клавиатуры у бота и их ограничения
40:09 Custom Keyboard
41:09 .text() - добавление кнопки к клавиатуре
41:01 .row() - разбивка кнопок по рядам
42:40 .resized() - почему кнопки растягиваются в тг боте
43:15 Как реагировать на нажатия по кнопкам
43:58 oneTime() - одноразовая клавиатура
44:31 Убираем клавиатуру вручную
45:13 Keyboard.from() - клавиатура из массива строк
46:33 Запрашиваем локацию, номер телефона и опрос у пользователя
48:28 Добавляем команды в меню
49:06 .placeholder() - изменение текста в инпуте
49:45 Реакция на контакт или локацию
50:47 Inline Keyboard
53:06 Обработка нажатий на инлайн клавиатуру
57:48 Задание на самостоятельную работу
1:00:02 .row() и .url() в инлайн клавиатуре
1:01:40 Плагины в grammy js
1:02:00 hydrate - редактирование сообщений и бесшовное меню
1:09:42 Деплой бота на удаленный сервер
1:10:15 Загружаем бота на GitHub
1:12:00 Настраиваем сервер
1:18:33 Запуск бота на сервере
1:19:36 Заключение
#javascript #курс #grammyjs #фронтенд #телеграмботы
⭐ Поддержать донатом: boosty.to/pomazkovjs/single-payment/donation/500599/
⭐ Интенсив по JS: pomazkovjs-hangman.ru/
✅ Текстовая версия ролика: slc.tl/sy40z
✅ Сервер Selectel: slc.tl/qtz71
В этом видео мы разберем все основные механизмы библиотеки Grammy JS:
- стартовый набор файлов бота и общую структуру
- слушатели событий от пользователя
- объект Context: контекст обновления
- работу с двумя видами клавиатуры
и многое другое.
Приятного просмотра!
Ссылки по GrammyJS:
* Обработка ошибок - grammy.dev/guide/errors
* Фильтры bot.on - grammy.dev/guide/filter-queries
* Context (ctx) - grammy.dev/guide/context
* parse_mode: “HTML” - core.telegram.org/bots/api#html-style
* “MarkdownV2” - core.telegram.org/bots/api#markdownv2-style
* Настройка login / pay методов - deno.land/x/grammy@v1.21.1/mod.ts?s=InlineKeyboard#method_login_0
* СОЦ. СЕТИ:
👀 Instagram - pomazkov.js
🚀 Telegram - t.me/pomazkovjs
Тайм-коды:
00:00 Интро
01:18 Получаем токен для телеграм бота
02:21 Создаем проект
05:24 Стартовый код бота
08:30 Запуск бота с nodemon
09:31 Порядок слушателей в grammy (важно)
11:09 Обработка ошибок в grammy js
13:35 Обработка сообщений от пользователя
14:03 bot.command - команды
15:25 Одинаковая реакция на несколько команд
16:16 Как сделать меню команд у бота (bot.api.setMyCommands)
17:49 Ограничения работы с командами
20:09 bot.on - фильтрация по типу сообщения
24:48 bot.filter - свои кастомные фильтры
27:43 bot.hears - ответ на конкретные сообщения
29:06 Регулярные выражения
30:08 Еще раз про важность расположения слушателей
31:17 Объект Context (контекст обновления)
33:04 Как узнать свой id в телеграм
34:34 Подробнее про ctx.reply
35:09 Ответ на конкретное сообщение
35:54 Форматирование сообщений телеграм бота
38:25 disable_web_page_preview
38:50 ctx.react - отправка реакций на сообщения
39:35 Клавиатуры у бота и их ограничения
40:09 Custom Keyboard
41:09 .text() - добавление кнопки к клавиатуре
41:01 .row() - разбивка кнопок по рядам
42:40 .resized() - почему кнопки растягиваются в тг боте
43:15 Как реагировать на нажатия по кнопкам
43:58 oneTime() - одноразовая клавиатура
44:31 Убираем клавиатуру вручную
45:13 Keyboard.from() - клавиатура из массива строк
46:33 Запрашиваем локацию, номер телефона и опрос у пользователя
48:28 Добавляем команды в меню
49:06 .placeholder() - изменение текста в инпуте
49:45 Реакция на контакт или локацию
50:47 Inline Keyboard
53:06 Обработка нажатий на инлайн клавиатуру
57:48 Задание на самостоятельную работу
1:00:02 .row() и .url() в инлайн клавиатуре
1:01:40 Плагины в grammy js
1:02:00 hydrate - редактирование сообщений и бесшовное меню
1:09:42 Деплой бота на удаленный сервер
1:10:15 Загружаем бота на GitHub
1:12:00 Настраиваем сервер
1:18:33 Запуск бота на сервере
1:19:36 Заключение
#javascript #курс #grammyjs #фронтенд #телеграмботы
Переглядів: 19 830
Відео
Полный разбор THIS в JavaScript за 26 минут | this в стрелочных функциях, call bind apply, Window
Переглядів 25 тис.5 місяців тому
⭐ BOOSTY - задача с собеса по THIS, конспекты-шпаргалки и другие материалы: boosty.to/pomazkovjs ⭐ Поддержать донатом: boosty.to/pomazkovjs/single-payment/donation/500599/ Этот ролик - полный гайд по this в JS. Из него вы узнаете про: - this в глобальной области видимости (объекты Window и Global) - this в обычных функциях - this в функциях-конструкторах - особенности this в стрелочных функциях...
Пишем Бота для ОБУЧЕНИЯ и подготовки к СОБЕСЕДОВАНИЮ | telegram bot: Node.js + grammY
Переглядів 9 тис.7 місяців тому
Интенсив "Игра на чистом JS: с нуля до деплоя": pomazkovjs-hangman.ru/ ⭐ Поддержать донатом: boosty.to/pomazkovjs/single-payment/donation/500599/ ➡️ questions.json: t.me/pomazkovjs/139 ➡️ Текстовая версия: slc.tl/mcc1a ➡️ Облачный сервер для телеграм-бота: slc.tl/qrazf Документация grammY: grammy.dev/ random-js: www.npmjs.com/package/random-js Итоговый код: github.com/arseniypom/intreview-bot К...
Игра на JS, пэт-проекты, результаты и планы на канал | JavaScript практика для начинающих
Переглядів 7 тис.10 місяців тому
* ИНТЕНСИВ "Игра на чистом JS: с нуля до деплоя": pomazkovjs-hangman.ru/ В этом ролике я расскажу вам, над чем работал на протяжении нескольких последних месяцев - интенсив по разработке игры на чистом JS. Спойлерить здесь не буду, посмотрите сами, ведь помимо этого вы узнаете: - Что за игру мы разработаем в интенсиве - В чем преимущество этого короткого, но очень полезного курса - Как мне приш...
ФУНКЦИИ в JavaScript НА ПРАКТИКЕ | виды функций, стрелочные функции, параметры, аргументы, return
Переглядів 39 тис.10 місяців тому
* ИНТЕНСИВ "Игра на чистом JS: с нуля до деплоя": pomazkovjs-hangman.ru/ ⭐ Поддержать донатом: boosty.to/pomazkovjs/single-payment/donation/500599/ ➡️ Полный бесплатный курс по циклам в JS: ua-cam.com/video/jwrPJ55OZ4k/v-deo.html ➡️ Замыкания в JS: ua-cam.com/video/mI6Jcfsgma4/v-deo.html В этом ролике мы подробно обсудим функции в JS, а точнее я расскажу: - Что такое функция в JS простыми слова...
Циклы FOR, WHILE в JS: ПОЛНЫЙ КУРС с примерами и задачами | javascript циклы для начинающих
Переглядів 21 тис.11 місяців тому
* ИНТЕНСИВ "Игра на чистом JS: с нуля до деплоя": pomazkovjs-hangman.ru/ ⭐ Поддержать донатом: boosty.to/pomazkovjs/single-payment/donation/500599/ Решения задач из видео: t.me/pomazkovjs/115 В этом ролике поговорим про следующее: - Что такое циклы в JavaScript - Цикл FOR, WHILE, DO..WHILE - Циклы для обхода массивов и объектов FOR..OF, FOR..IN Всё подробно разберем, а также потренируемся на за...
var, let, const: ПОЛНЫЙ КУРС [2023] | Объявление переменных в JS
Переглядів 14 тис.Рік тому
* ИНТЕНСИВ "Игра на чистом JS: с нуля до деплоя": pomazkovjs-hangman.ru/ ⭐ Поддержать донатом: boosty.to/pomazkovjs/single-payment/donation/500599/ - Чем опасно ключевое слово VAR? - Что такое область видимости и какие бывают области видимости? - Почему всегда, когда есть возможность, лучше использовать CONST вместо LET? - Какие ошибки допускают начинающие разработчики в работе с переменными? В...
Универсальный СТАРТОВЫЙ ШАБЛОН для твоих пэт-проектов с JS, SASS и Vite [2023]
Переглядів 21 тис.Рік тому
Универсальный СТАРТОВЫЙ ШАБЛОН для твоих пэт-проектов с JS, SASS и Vite [2023]
React для НОВИЧКОВ [2023]: первый проект на React JS | Как запустить приложение на React?
Переглядів 38 тис.Рік тому
React для НОВИЧКОВ [2023]: первый проект на React JS | Как запустить приложение на React?
ЗАМЫКАНИЯ В JS за 15 минут: ОТ и ДО | Что такое лексическое окружение и как связано с замыканием?
Переглядів 73 тис.Рік тому
ЗАМЫКАНИЯ В JS за 15 минут: ОТ и ДО | Что такое лексическое окружение и как связано с замыканием?
Что должен знать JUNIOR Фронтенд Разработчик? ROADMAP: как стать фронтенд разработчиком в 2023
Переглядів 239 тис.Рік тому
Что должен знать JUNIOR Фронтенд Разработчик? ROADMAP: как стать фронтенд разработчиком в 2023
Что такое ФРОНТЕНД? На Чем Пишут Фронтенд? HTML / CSS / JavaScript (JS)
Переглядів 25 тис.Рік тому
Что такое ФРОНТЕНД? На Чем Пишут Фронтенд? HTML / CSS / JavaScript (JS)
ФРОНТЕНД: С ЧЕГО НАЧАТЬ? Выучить HTML или выучить JS?
Переглядів 19 тис.Рік тому
ФРОНТЕНД: С ЧЕГО НАЧАТЬ? Выучить HTML или выучить JS?
Что такое ВЕБ-РАЗРАБОТКА? Веб-Программирование С НУЛЯ: Фронтенд / Бэкенд / Верстка / SEO оптимизация
Переглядів 9 тис.Рік тому
Что такое ВЕБ-РАЗРАБОТКА? Веб-Программирование С НУЛЯ: Фронтенд / Бэкенд / Верстка / SEO оптимизация
Самое крутое объяснение! Спасибо!!
было полезно, спасибо
Арсений, здравствуй) Хочу присоединиться к тонне ранее выраженных тебе благодарностей в комментариях, но и также не согласиться с тобой. Надеюсь, ты ответишь мне и если я не права, скажешь почему. Дело в том, что тему окружения я очень долго не могла понять и копала во всех возможных направлениях, чтобы разобраться с ней. И вот что я выяснила: окружение - это доступная из текущей области видимости структура данных, в которой хранятся связи между идентификаторами и переменными из всех внешних областей видимости. И оно может быть как лексическим, так и динамическим. Так вот лексическое окружение, создается как раз не во время вызова функции, а во время ее объявления. То есть компилятор читая и анализируя код первый раз устанавливает связь между переменными и их идентификаторами. Чтобы было наглядней, приведу пример: let value = 2; function showValue() { console.log("Value from showValue: " + value); } function wrapper() { let value = 3; console.log("Value from wrapper: " + value); showValue(); } wrapper(); Повторюсь, когда движок прочитывает и анализирует код в первый раз, он устанавливает связь между переменными и их идентификаторами. Так работает именно лексическое окружение. В динамическом окружении эта связь устанавливается в момент вызова функции. И когда компилятор дошёл до переменной value внутри функции showValue, он не находит внутри функции объявления этой переменной, поэтому он поднимается в родительскую область видимости, находит там нужную переменную и устанавливает с ней зависимость. Всё, это зависимость установлена навсегда, и пофигу откуда мы теперь эту функцию будем вызывать. Поэтому в консоли мы получим значения 3 и 2. Если бы в js было динамическое окружение, тогда было бы важным именно откуда функция вызывается, и в консоли мы бы получили 3 и 3. Так вот всем вышесказанным я хотела сказать, что в замыканиях участвует не лексическое окружение, а область видимости! Именно область видимости создается во время вызова функции, а после того, как вызов был завершен, сборщик мусора удаляет ссылку на эту область, так как на нее больше никто не ссылается, но если на нее будет что-то ссылаться, то эта область видимости удалена не будет, что и происходит в случае с замыканием: на область видимости верхней функции ссылается функция, которую мы из нее вернули) Поэтому у нас есть доступ к переменным, созданным внутри функции. На этом всё)) Если же я не права, пожалуйста, скажи почему)
узбекский плов :D #challenge
Мне про лазанью в следующий раз интересно узнать.
Крутой подход, очень приятно смотреть, так держать Бро
Большое спасибо! Одно из немногих видео, где я не то что не ускоряла а сделала скорость 0,75х 😄действительно фраза «как читает интерпретатор» что то поменяла в моей голове)
COOL
Не смог обойти вот это: DeprecationWarning: The `punycode` module is deprecated. 🤔
Изучил html и css, потом начал искать что еще нужно для верстки сайти, понял что еще надо js
У меня на канале есть дорожная карта по изучению фронтенда, советую посмотреть. Станет гораздо яснее, куда двигаться 🙂
loh
Да-а-а. Кодишь 8 часов на работе, а то и задержаться придется, конечно с перерывами, и вечером у тебя остается 2 часа на пет-проекты (не пойти уделить время семье, детям, просто отдохнуть от компа или выйти на улицу, а пет-проекты, Карл!)
Для верстки обязательно изучать фигму или подобные ей платформы?
Фигма - это инструмент для дизайнера, который создает макет будущего сайта, а разработчику достаточно уметь «читать» этот макет в фигме (посмотреть там все расстояния, цвета, экспортировать картинки и тд)
Сколько уйдет часов на изучение CSS ?(+-)
Видео показалось мне полезным. Поэтому я, как наставлял Автор, прожал Like и пишу об этом в комментариях..
11:08 в глобальном лексическом окружении добавляется counter (видимо из прошлого примера) и также на 11:29 добавляетс counter2 12:04 разве в этот момент не создаются в глобальном лексическом окружении переменные increment: function и log: function?
Привет ) спасибо за прекрасную подачу, графика супер!
Полезная инфа, спасибо👌
2 - 6 =8
лайкос
Спасибо,очень хорошо объяснено что куда и зачем. ))
Видео о лексическом окружении, а кто о нем не знает? только те кто соваем не изучал js, простая тема. Суть замыкание в том, что LE сохраняется после выполнения функции. А почему? Не объяснил. Зачем безымянная функция внутри счетчика тоже не объяснил. Информация не по теме.
Было очень полезно и вовремя
Базара нет! От души родной как понятно и четко объяснил ❤
Отличное видео! Спасибо!
абра кадабра
Я редко пишу коменты но тут неудержалась я сегодня посмотрела ролик про замыкания это шедевр, и смотрю ролики этого автора дальше очень редко кто может так обьяснить 🙏спасибо
Вы очень хорошо объясняете. Видео про плагины будет очень полезным
было полезно
отличное и наглядное обяснение. жду новые видео про глубокое копирование. пожалуйста.
если продолжите рассказывать про продвинутый джава скрипт будет круто. расскажите про промисы пожалуйста.
Отдельное видео по call, apply, bind пожалуйста.
Отличное обяснение. Хотелось бы еще уроков пожалуйста. хорошая подача. приятный голос. не теряйте настроя и вдохновения!
Очень полезный материал, спасибо!
Это отличное объяснение. Я вообще практически никогда не пишу комменты, но тут прям хочется поддержать молодой канал и поблагодарить. Чел, ты топ))
Вы как тот самый учитель по истории в средней школе. Крутая подача красивые глаза и женат🦭✨
Все очень понятно и без воды. Спасибо за информацию
Получается данные в локальном лексическом окружении сохраняются даже после завершения функции... Они останутся в памяти пока не завершится вся программа? Можно как-то очистить это локальное окружение, чтобы не занимать ресурсы? Не знаю насколько это нужно в практике, пока вопрос теоретический
спасибо за видео. было полезно. сохранила себе в закладки, чтобы ещё к нему вернуться
Спасибо!
Крутой видеоролик, жду ещё по React думаю очень скоро будет видео по React🔥🔥🔥
Дуже круто і доступно) Підписка + like) Буду дивитись твої відео) Продовжуй в тому ж дусі)
спасибо
Молодец, хорошо излагаешь мысли.
Спасибо!
Спасибо!
🤘
Мои заметки которые я в итоге сделал для запоминания: - Функция запускается в контексте обьекта где он находится - У стрелочный функций нет своего this. Если мы ссылаемся на this такой функции, то оно берется из внешней ближайшей функции. Тоесть оно ищет эту внешнюю функцию, и спрашивает - что у тебя там есть в обьекте в котором ты находишься? - new создает новый обьект и в нем уже запускает функцию
Круто, спасибо!
Вау :)