Sergii Cherbadzhy
Sergii Cherbadzhy
  • Видео 40
  • Просмотров 13 894
Развертывание TypeScript на AWS Lambda, создание Telegram-бота и мониторинг цен на газ Ethereum
🔗 Полезные ссылки 🔗
Код из видео - github.com/Serginyo90/my-temporary-posts-bot-bucket-user
Статья на DOU - dou.ua/forums/topic/50197
Article on medium - serginyo90.medium.com/our-serverless-journey-deploying-typescript-projects-to-aws-lambda-creating-a-telegram-bot-and-4414b921b84c
Подробно о создании AWS Lambda - ruclips.net/video/hUfZMqtbUIs/видео.html
В этом видео я углубляюсь в серверную архитектуру без серверов с использованием AWS Lambda! Мы рассмотрим, как развернуть проект на TypeScript в Lambda с помощью GitHub Actions, создать Telegram-бота, который отправляет сообщения через Lambda, и построим систему для мониторинга цен на газ Ethereum с отправкой обновлений в реальном времени в в...
Просмотров: 88

Видео

Ваш путеводитель по IT-карьере в 2024 году: Тренды, Навыки и Советы
Просмотров 1778 месяцев назад
🌟 Ваш путеводитель по IT-карьере в 2024 году 🌟 Вы мечтаете о карьере в мире IT, но не знаете, с чего начать? Или уже в пути и ищете направление для роста? Это видео для вас! Здесь мы обсудим все, что вам нужно знать для успешного вхождения и роста в IT-индустрии в 2024 году. 🕒 Временные метки: 0:00 - О чем будем говорить? 0:31 - Для кого видео? 0:47 - Тренды 2024 года 3:00 - Самые востребованны...
🚀 AWS Lambda и Serverless архитектура: Когда Сервера Исчезают!
Просмотров 2189 месяцев назад
В этом увлекательном видео мы погружаемся в мир передовых технологий AWS. Откройте для себя, как AWS Lambda и другие сервисы AWS переопределяют понятие серверных решений. Мы рассмотрим, как эти инновации изменяют ландшафт облачных вычислений, предоставляя более эффективные, гибкие и экономичные решения для бизнеса и разработчиков. Присоединяйтесь к нам в этом путешествии по миру облачных иннова...
JWT в Деталях: Реальные Примеры, Уязвимости и Недостатки
Просмотров 1 тыс.9 месяцев назад
🔐 В этом видео мы углубляемся в мир JSON Web Tokens (JWT). Узнайте, как они работают на практике, какие уязвимости могут возникнуть и какие недостатки у них есть. 👨‍💻 Что вы найдете в этом видео: - Пример использования JWT. - Анализ уязвимостей JWT и как их предотвратить. - Обсуждение недостатков JWT. 💡 Это видео подойдет как для начинающих, так и для опытных разработчиков, стремящихся улучшить...
Простой загрузчик бинарных файлов на JavaScript
Просмотров 4249 месяцев назад
Привет, друзья! В этом видео я покажу вам, как легко и быстро создать загрузчик бинарных файлов на JavaScript. Мы рассмотрим основы работы с 'application/octet-stream' для эффективной отправки данных с клиента на сервер. Подходит как для начинающих, так и для опытных разработчиков. 🔗 Полезные ссылки 🔗 Документация - developer.mozilla.org/ru/docs/Web/HTTP/Basics_of_HTTP/MIME_types Код из видео -...
Ошибка, которую допускают 80% разработчиков в React JS приложении.
Просмотров 2,8 тыс.9 месяцев назад
В этом видео я расскажу об распространенной проблеме управления логикой между компонентами в приложениях ReactJS. Независимо от того, начинающий вы или опытный разработчик, это видео предоставит вам ценные знания. Идеально подходит для тех, кто хочет усовершенствовать свои навыки в ReactJS. 🕒 Временные метки: 0:00 - О чем будем говорить 0:24 - Одна из основных идей ReactJS 1:09 - Ответственност...
Всё, что вам нужно знать о стримах в NodeJS
Просмотров 2019 месяцев назад
В этом обучающем видео мы исследуем мощный мир стримов в Node.js. Вы узнаете, что такое стримы, как они работают и почему они необходимы для создания высокопроизводительных веб-приложений. 🌟 Что вы узнаете: - Что такое стримы в Node.js и их типы (Readable, Writable, Duplex, Transform). - Как стримы обрабатывают большие объемы данных и улучшают производительность. - Практические примеры использо...
Веб-разработчики ненавидят ее! Подробно о Content Security Policy (Политике Безопасности Контента)
Просмотров 84010 месяцев назад
Думаете, ваш сайт в безопасности? Подумайте еще раз! Повысьте свои навыки веб-безопасности с нашим подробным разбором Политики Безопасности Контента. Это видео предлагает реальные примеры и легкие в освоении инструкции о том, как эффективно внедрить CSP в ваши проекты. 🔗 Полезные ссылки 🔗 Мое видео о CORS - ruclips.net/video/y63hfdRxho4/видео.html Документация - developer.mozilla.org/ru/docs/We...
Этот простой трюк с Cookie браузера уменьшит количество запросов на сервер. Вы должны это увидеть!
Просмотров 36710 месяцев назад
Открываем секрет, как один простой трюк с cookie браузера может радикально изменить работу вашего сайта, защищая его от дублирующих запросов. Это видео - ваш шанс избежать распространенных ошибок и убрать лишние запросы! Подписывайтесь и оставайтесь со мной, чтобы не пропустить полезные трюки и лайфхаки по разработке и оптимизации веб-сайтов! 🔗 Полезные ссылки 🔗 Код из видео - github.com/Sergin...
CSS за 25 минут: Все, что вам нужно знать для создания сайта - Без воды, только суть!
Просмотров 28910 месяцев назад
Это руководство по CSS для начинающих поможет вам понять основы каскадных таблиц стилей. Мы начнем с самых основ: что такое CSS, зачем он нужен, и как он работает вместе с HTML. Затем мы плавно перейдем к созданию вашего первого стилевого файла, изучению селекторов, свойств и значений. Мы также коснемся более сложных тем, таких как позиционирование элементов, а также как делается адаптивный диз...
21. Как использовать Pressable для удаления таймера в React Native
Просмотров 6410 месяцев назад
🔎 В этом уроке мы рассмотрим, как использовать компонент Pressable в React Native для создания интерактивного элемента управления. Шаг за шагом мы разберём процесс интеграции этого компонента и реализуем функцию удаления таймера. 🕒 Временные метки: 0:00 - Введение 1:00 - onClick или onPress 5:13 - Не используй key 6:45 - Пропустил item.id 🔗 Полезные ссылки 🔗 Код проекта - github.com/Serginyo90/...
Этот протокол меняет интернет навсегда?! Разбор IPFS!
Просмотров 3,1 тыс.10 месяцев назад
Новый интернет уже близко?! Узнайте все секреты протокола IPFS, который может перевернуть ваше представление о вебе! Не пропустите! 👀🚀 В этом видео мы подробно рассмотрим, как работает протокол IPFS, его основные принципы и преимущества для современного интернета. 🔗 Полезные ссылки 🔗 IPFS протокол - ipfs.tech Браузер Brave - brave.com 🕒 Временные метки: 0:19 - Введение 1:10 - Что такое IPFS 2:0...
Первое, что нужно сделать начинающему в IT: мой главный совет!
Просмотров 8110 месяцев назад
Хочешь начать карьеру в IT, но боишься ошибиться? Это видео для тех, кто хочет начать свой путь правильно и не разочароваться. Получите проверенные советы для успешного старта в мире информационных технологий. Подписывайтесь и начните свою IT-карьеру правильно! 🔗 Полезные ссылки 🔗 HTML: Всё, что Вам нужно знать за 5 минут ruclips.net/video/2GPpbXc9XIw/видео.html 🕒 Временные метки: 0:12 - Введен...
20. Переиспользуем TextInput компонент
Просмотров 3511 месяцев назад
🔎 Удаляем дублирование кода и переиспользуем TextInput компонент Введение в разработку на React Native: Создаем приложение для учета времени без опыта с React Native Начиная с установки и настройки рабочего окружения, мы погрузимся в основы React Native, познакомимся с его основными принципами и структурой проекта. Мы рассмотрим, как создавать и стилизовать компоненты, как использовать состояни...
HTML: Всё, что Вам нужно знать за 5 минут
Просмотров 16111 месяцев назад
HTML: Всё, что Вам нужно знать за 5 минут
19. Выносим TimerInput
Просмотров 5811 месяцев назад
19. Выносим TimerInput
Понимание метода createObjectURL: Как Netflix использует его и пример использования на JavaScript
Просмотров 18111 месяцев назад
Понимание метода createObjectURL: Как Netflix использует его и пример использования на JavaScript
18. Выносим код в отдельный компонент TimerItem
Просмотров 4811 месяцев назад
18. Выносим код в отдельный компонент TimerItem
17. Оптимизируем прокручиваемый список использую FlatList компонет
Просмотров 5811 месяцев назад
17. Оптимизируем прокручиваемый список использую FlatList компонет
Разбираем Event Emitter за 6 минут (генератор событий): от основ к практике!
Просмотров 24611 месяцев назад
Разбираем Event Emitter за 6 минут (генератор событий): от основ к практике!
16. Делаем прокручиваем список с помощью ScrollView
Просмотров 4911 месяцев назад
16. Делаем прокручиваем список с помощью ScrollView
15. Выведим список таймеров
Просмотров 3611 месяцев назад
15. Выведим список таймеров
Руководство по CORS: Решаем Проблемы с Кросс-Доменными Запросами
Просмотров 141Год назад
Руководство по CORS: Решаем Проблемы с Кросс-Доменными Запросами
14. Обработчик событий на кнопку (button) и поле для ввода (input)
Просмотров 45Год назад
14. Обработчик событий на кнопку (button) и поле для ввода (input)
13. Создание первой страницы
Просмотров 90Год назад
13. Создание первой страницы
Разбираем Server Sent Events (SSE) - События, посылаемые сервером
Просмотров 331Год назад
Разбираем Server Sent Events (SSE) - События, посылаемые сервером
12. Основы флексбокс (Flexbox)
Просмотров 120Год назад
12. Основы флексбокс (Flexbox)
11. Добавляем первое поле для ввода (input)
Просмотров 57Год назад
11. Добавляем первое поле для ввода (input)
10. Знакомимся с дизайном нашего приложения на React Native
Просмотров 95Год назад
10. Знакомимся с дизайном нашего приложения на React Native
Разбираем Long polling - Длинные опросы
Просмотров 449Год назад
Разбираем Long polling - Длинные опросы

Комментарии

  • @3dufa383
    @3dufa383 2 месяца назад

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

  • @userGerostoos
    @userGerostoos 2 месяца назад

    Все понятно, спасибо за объяснение!

  • @СергейЮрьевич-г4е
    @СергейЮрьевич-г4е 7 месяцев назад

    отличный урок, просто браво!

  • @programm4you
    @programm4you 7 месяцев назад

    Спасибо, дружище, все стало понятно. Столкнулся с проблемой и не понимал, а что вообще происходит. А ты по полочкам разложил. А если в проекте и в index.html и на сервере настроены, то как работать будет?

    • @serginyo90
      @serginyo90 7 месяцев назад

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

  • @Mytest437
    @Mytest437 8 месяцев назад

    Тоесть вся разница заключается, что в Нативном уже используется своя библиотека тегов? А можно свои компоненты туда добавлять?

    • @serginyo90
      @serginyo90 8 месяцев назад

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

  • @ПользовательПользователь-с8к

    Что я только что посмотрел... 1) Самая большая проблема, что компонент сломается при неправильных данных... Серьезно? Конечно, если не писать тесты/не использовать TS, у вас сломается все что угодно и где угодно. По факту же, в первом случае, если уж так хочется разделить код на компоненты (а я напомню, компонент из 8 строчек на секундочку), ну создайте вы компонент Name, который будет принимать firstName и lastName и мапьте в JSX, в чем проблема? Придумываете какие-то HOC-и, зависимости от данных... А с чего вы взяли, что это данные? А разве это не могут быть подготовленные данные для view? Которые уже преобразованы из реальных данных. Супер-синтетический пример, о котором нетсмысла говорить. 2) 2-й пример - опять, компонент на 15 строк. Ну что вы хотите оттуда вынести? console.log с рекввестом - это что такое? Нет, я бы понял, если бы вы выносили запрос к API в отдельную функцию, или сервис. У вас же абстрактный console.log, который ничего не говорит. Вы же хотите создать HOC, который по факту даже не HOC, а просто компонент. 3) И что же даст вам эта "отличная" библиотека? Вы хотите похерить архитектуру проекта окончательно этой глобальной переменной? Возможности написать нормальный код без этого барахла не получится? Вместо обычного выноса функции в сервис и создание одного хука вы хотите использовать сторонний state-менеджер, делать обертку. Я даже не представляю, что будет, если вы начнете писать настоящий проект, а не это синтетическое г****

  • @dima__rx5fw3rm1n
    @dima__rx5fw3rm1n 9 месяцев назад

    Не планируете ли рассмотреть альтернативные клауды с лямбдами, только от других провайдеров? По идее, можно же посредника сделать, который собирает нужную структуру для определенного провайдера и все... И тогда хоть амазон, хоть гугл, хоть что - прослойка спасает? Или там перф жесткий случится, а лямбда пока прогреется, туда-сюда... и никакие нест джс'ы не справятся с дот нетами и джавами?

    • @serginyo90
      @serginyo90 9 месяцев назад

      С другими клаудами не работал плотно. Записал в список для след видео. Посредник было бы неплохо. Звучит как хороший вариант стартапа :)

  • @vladimirkhodarin7887
    @vladimirkhodarin7887 9 месяцев назад

    Ага, как в сериале Кремниевая долина

  • @maxd8457
    @maxd8457 9 месяцев назад

    Сергей, спасибо за видео. Интересно смотреть. Рекомендация - я бы вынес плюсы и минусы в начало видео и краткое объяснение, а практику во вторую часть.

  • @dima__rx5fw3rm1n
    @dima__rx5fw3rm1n 9 месяцев назад

    Покажите, пожалуйста, api gateway и взаимодействие mongo с лямбдами

    • @serginyo90
      @serginyo90 9 месяцев назад

      Закинул в стек следующих видео

  • @dima__rx5fw3rm1n
    @dima__rx5fw3rm1n 9 месяцев назад

    1М запросов бесплатны для каждой лямбды или это сквозное накопление? Если 10 лямбд использовало по 100к запросов, то они упрутся в лимит и нужно их раздуплять оплатой? Или это все само и такой блокировки нет? Лямбды - шикарная тема, спасибо, что рассказываете о ней

    • @maxd8457
      @maxd8457 9 месяцев назад

      Так как при создании аккаунта AWS вы указываете свои данные, в том числе и карты, то при достижении бесплатного лимита Лямда не перестанет работать, а продолжит. И вам за эту работу будет начислена соответствующая оплата.

    • @dima__rx5fw3rm1n
      @dima__rx5fw3rm1n 9 месяцев назад

      @@maxd8457 Мой вопрос был не совсем в этом. Есть лимит на запросы к лямбде. Это лимит на каждую лямбду или на все, имеющиеся у аккаунта?

    • @maxd8457
      @maxd8457 9 месяцев назад

      @@dima__rx5fw3rm1n На все))) иначе можно было бы создавать любое количество функций и заменять их при достижении лимита)

    • @serginyo90
      @serginyo90 9 месяцев назад

      Если 10 лямбд по 100к запросов, то Вы уперлись в лимит 1М.

  • @ГешаПетров-ц9т
    @ГешаПетров-ц9т 9 месяцев назад

    осталось заставить всех ноды у себя поднять

    • @serginyo90
      @serginyo90 9 месяцев назад

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

  • @maxamax5695
    @maxamax5695 9 месяцев назад

    Вопрос. много гуглил инфы на тему jwt авторизации. и во многих места было сказано что если бэк передает refresh на фронт без httpOnly то это не безопасно. мол взломать такой рефреш не составит труда. Но я не могу найти пример где показано как это реализовать. ведь с этим флагом. на фронте я не могу никак взаимодействовать с этим токеном. а если без httpOnly то это не безопасно. Можешь раскрыть эту тему по подробней.

    • @serginyo90
      @serginyo90 9 месяцев назад

      Если cookie не имеет флага httpOnly, то доступ к нему можно получить с помощью JavaScript на стороне клиента. Это означает, что любой скрипт, работающий на вашей странице, может читать и изменять такие cookies. Как я понял основная проблема, о которой Вы упоминаете, связана с использованием refresh токенов и их хранением на стороне клиента. 1. HTTP-Only Cookies: Когда токен сохраняется в cookie с флагом httpOnly, это означает, что JavaScript на стороне клиента не может получить к нему доступ. Это считается более безопасным подходом, так как такие cookies защищены от атак через XSS (Cross-Site Scripting), при которых злоумышленник может попытаться извлечь токены через внедренный JavaScript код. 2. Refresh Token: Refresh токены используются для получения нового access токена после истечения его срока действия, не требуя повторного ввода учетных данных пользователем. Они обычно имеют более длительный срок действия, чем access токены. 3. Безопасность: Если refresh токен хранится без httpOnly флага, он может быть украден через XSS атаки. Поэтому рекомендуется хранить его в httpOnly cookie, чтобы минимизировать риски безопасности. 4. Доступ к httpOnly Cookies на фронте: Вы правильно заметили, что при использовании httpOnly флага, фронтенд не имеет прямого доступа к cookie. Это означает, что для обновления токенов фронтенд должен отправить запрос на сервер, где сервер, распознавая httpOnly cookie, сможет обновить токен. 5. Реализация: Обычно, когда access токен истекает, фронтенд делает запрос на специальный эндпоинт сервера для обновления токена (например, /refresh-token). Сервер, получив запрос, проверяет refresh токен в httpOnly cookie и, если он действителен, отправляет обратно новый access токен (и, возможно, новый refresh токен).

    • @maxamax5695
      @maxamax5695 9 месяцев назад

      @@serginyo90 я все это понимаю) у меня вопрос как мне передать cookies httponly на сервер? Какой заголовок прописать или есть какая функция?

    • @serginyo90
      @serginyo90 9 месяцев назад

      В контексте веб-разработки, когда клиент (обычно браузер) делает запрос на сервер, он автоматически включает все соответствующие cookies (включая HTTPOnly) в заголовок запроса. Это управляется браузером, и разработчики обычно не могут контролировать это поведение. Если вам нужно настроить отправку cookies на сервер, вам нужно убедиться, что они были правильно установлены сервером, и что запросы отправляются на тот же домен (или поддомен, в зависимости от свойств cookie), для которого они были установлены. Т.е. на клиенте у Вас доступа к ней нет. Нужно установить ее на сервере в middleware или в самом ответе от сервера. Попробуйте вот так. const express = require('express'); const app = express(); app.get('/', (req, res) => { // Установка cookie res.cookie('cookieName', 'cookieValue', { maxAge: 900000, httpOnly: true }); // Отправка ответа res.send('Cookie is set'); }); app.listen(3000, () => { console.log('Server is running on port 3000'); });

    • @maxamax5695
      @maxamax5695 9 месяцев назад

      @@serginyo90 передам человеку который занимается серверной частью) С моей стороны ничего не нужно прописывать? Ну кроме обычного запроса

    • @serginyo90
      @serginyo90 9 месяцев назад

      @maxamax5695 по идеи - нет. Должны автоматически уходить, если запрос на тот же домен. Но Вы должны увидеть в ответе от сервера куку уже с включенным httpOnly

  • @maxd8457
    @maxd8457 9 месяцев назад

    Так так так))) привет

  • @rodigy
    @rodigy 9 месяцев назад

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

    • @serginyo90
      @serginyo90 9 месяцев назад

      Почему нельзя?

    • @rodigy
      @rodigy 9 месяцев назад

      Ютуб удаляет комент или вы, дважды писал но его нет.

    • @serginyo90
      @serginyo90 9 месяцев назад

      Я не удаляю комменты

    • @rodigy
      @rodigy 9 месяцев назад

      При большом желании можно, но классическая схема подразумевает отправку в заголовках запроса. Так же минусом будет что токен может сохраниться в логах сервера, что особенно не безопасно при длительном сроке жизни токена. Далее текст с сайта jwt Whenever the user wants to access a protected route or resource, the user agent should send the JWT, typically in the Authorization header using the Bearer schema. The content of the header should look like the following: Authorization: Bearer <token> This can be, in certain cases, a stateless authorization mechanism. The server's protected routes will check for a valid JWT in the Authorization header, and if it's present, the user will be allowed to access protected resources. If the JWT contains the necessary data, the need to query the database for certain operations may be reduced, though this may not always be the case. (ютуб удалял из-за прямой ссылки на сайт)

    • @serginyo90
      @serginyo90 9 месяцев назад

      @@rodigy Вы правы, классическая отправку в заголовках запроса. Но это классическая. Но есть и другие подходы. Например чтобы не отправлять JWT token в email можно сгенерировать уникальный хеш и положить в redis и связать c JWT tokenом и таким образом передавать уже этот хеш. Этот подход возможно раскрою в одном из следующих видео.

  • @ruslankarimov6490
    @ruslankarimov6490 9 месяцев назад

    Спасибо! У меня запрос, как у подписчика: можешь сделать видео: авторизация Астро приложений?

    • @serginyo90
      @serginyo90 9 месяцев назад

      Вы наверно имели ввиду аутентификацию. А что такое Астро приложения? И чем в них аутентификации отличается от других приложений?

  • @alexandrchioroglo5612
    @alexandrchioroglo5612 9 месяцев назад

    gagauzlar ruleat

  • @dispuncho
    @dispuncho 9 месяцев назад

    Главная ошибка это идти в фронт. Огромная конкуренция и хаос в технологии делают его абсолютно не привлекательным направлением.

    • @serginyo90
      @serginyo90 9 месяцев назад

      Здесь уже кому что нравиться. Обычно фронты плавно переходят в фулстек или в бек.

  • @sergthebright3113
    @sergthebright3113 9 месяцев назад

    Спасибо за пример, просто и понятно, но не хватает того-же, но в обратную сторону, как принять файл и сохранить на клиенте

    • @serginyo90
      @serginyo90 9 месяцев назад

      Все достаточно просто. index.html <button onclick="downloadFile()">Скачать файл</button> <script> function downloadFile() { const fileName = 'example.txt'; window.location.href = `localhost:8080/download/${fileName}`; } </script> index.js if (req.url.startsWith('/download')) { const fileName = req.url.split('/').pop(); // достаем имя файла fs.readFile(fileName, (err, data) => { if (err) { res.writeHead(404); res.end("File not found!"); return; } res.writeHead(200, { 'Content-Type': 'application/octet-stream', 'Content-Disposition': `attachment; filename="${fileName}"`, }); res.end(data); }); }

  • @LedoCool1
    @LedoCool1 9 месяцев назад

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

    • @serginyo90
      @serginyo90 9 месяцев назад

      Так он уже используется активно для NFT в сфере криптовалют

    • @LedoCool1
      @LedoCool1 9 месяцев назад

      @@serginyo90 тор тоже где-то используется, но до массового интернета он не дошел. А значит 99% контента будут не в торе (што грустно).

    • @serginyo90
      @serginyo90 9 месяцев назад

      @@LedoCool1 Здесь уже время рассудит. Технология блокчейн долго существовала до Биткойна.

    • @LedoCool1
      @LedoCool1 9 месяцев назад

      @@serginyo90 да, было бы хорошо если бы интернет фундаментально поменялся и обломал властолюбцев.

  • @tnsaturday
    @tnsaturday 9 месяцев назад

    1:54 "Если мы прокинем какие-то другие items, в которых не будет firstName компонент сломается" - люди до изобретения TypeScript

  • @ddflruc
    @ddflruc 9 месяцев назад

    Отличные советы, согласен с автором. Сам наблюдаю такую же проблему в разных проектах. И ещё одно уточнение стоило добавить, что connect() - это не метод либы, а HOC.

    • @serginyo90
      @serginyo90 9 месяцев назад

      Благодарю, отличное уточнение.

  • @НикитаАверьянов-ь5ъ
    @НикитаАверьянов-ь5ъ 9 месяцев назад

    Ошибка - это рекомендовать HOC в 2к23, а не кастомные хуки, redux с mapStateToProps и mapStateToProps и говорить не использовать хуки в компонентах. Кастомные хуки идеально вмещают в себя различную логику и позволяют ее лаконично переиспользовать и не плодить миллионы ненужных обверток , то что компонент не должен получать данные тоже чушь, должна быть четкая иерархия на каком уровне мы получаем данные и никаких проблем не будет

    • @serginyo90
      @serginyo90 9 месяцев назад

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

    • @romandeveloper7720
      @romandeveloper7720 9 месяцев назад

      Вообще не ошибка. Хоки полезны, когда у тебя в компоненте есть портянка хуков, а потом внезапно if (!user) return null; else return (component-code со всеми данными хуков)

  • @rybiizhir
    @rybiizhir 9 месяцев назад

    Ошибки, которые допускают 100% разработчиков в React JS приложении. "С/С++ - эээээммммэээээ", "Java/Kotlin - старье тупое", "Rust - для деревенских дурачков", "Мама - я хочу стать программистом!"

  • @d.nazaratiy
    @d.nazaratiy 9 месяцев назад

    Каша, полное непонимание темы и примеры, не связанные с ней. "Ошибка, которую допускают 80% разработчиков" - это как раз попытки натянуть сову на глобус, до конца не изучив ни сову, ни глобус. Проблема ни разу не в том, что ваши компоненты не должны быть привязаны к данным и не содержать в себе логику получения или сохранения и обработки данных. Проблема в том, как грамотно и аккуратно оставить в компоненте только бизнес-логику компонента, снабдив его ровно тем объемом данных, который необходим, и выполнив ровно те операции с данными, которые критичны для существования компонента. Проблема в том, чтобы не плодить лишние уровни абстракции, при этом четко разделяя компоненты визуальные от компонентов функциональных. Проблема в том, чтобы работа с данными не приводила еще и ререндерингу сотен, если не тысяч нод. Другими словами, главная задача - это продумать архитектуру и взаимодействие компонентов ДО того, как начать кодить что попало по видосикам из ютуба. И для этого существуют уже совершенно другая литература, учебные заведения (на худой конец качественные курсы) и подходы к разработке (такие как atomic design и не только). Пожалуйста, дорогие джуны (даже если вы зовете себя мидлами или синьйорами), прекратите создавать громкие заголовки и записывать видео о том, в чем вы не разобрались! Это вредит и тем, кто хочет разобраться, и вам самим, только укрепляя ваши заблуждения. Ну или записывайте, по крайней мере, честные видео, где вы признаетесь, что столкнулись вот с таким подходом или концепцией и пытаетесь разобраться, и вот, что у вас получилось, а теперь просите подсказать, что вы упускаете или где заблуждаетесь. Но никак не "Ошибка... 80%... а я самый умный!"

    • @serginyo90
      @serginyo90 9 месяцев назад

      @d.nazaraiy В моем понимании, компоненты и бизнес-логика - это несвязанные элементы. Я поддерживаю идею выноса логики из компонентов. В случае, если проблемы с данными вызывают рендеринг сотен компонентов, это уже совершенно другой вопрос. Лично я никогда не сталкивался с ситуацией, когда хорошо написанные компоненты высшего порядка (HOC) вызывали бы проблемы с рендерингом. Тем не менее, замечаю, что каждый четвертый из пяти проектов либо дублирует функционал, либо теряет свою атомарность. P.S. Я не вижу ничего плохого в использовании ярких заголовков. Если одна и та же ошибка встречается в 80 из 100 проектов, это означает, что 80% разработчиков не уделяют должного внимания планированию архитектуры или не понимают ее в полной мере.

    • @ddflruc
      @ddflruc 9 месяцев назад

      Не вижу смысла в вашей категоричности. Архитектуры проектов бывают разные: компонентно-ориентированные, сервис-ориентированные, смешанные и другие, возможно. В компонентно-ориентированной архитектуре бизнес-логика вполне может сидеть в компонентах. В сервисно-ориентированной архитектуре логика сидит в сервисах, которые прокидываются в компоненты разными способами и компоненты только отображают данные и дергают методы сервисов. Уровни абстракции где-то очень нужны, а где-то совсем нет. Зачем вы называете автора джуном, не учитывая многообразие архитектур проектов, с которыми вы ранее могли не работать? (Риторический вопрос)

    • @d.nazaratiy
      @d.nazaratiy 9 месяцев назад

      @@serginyo90 я же говорю, что в теме вы не разобрались и только подтверждаете своим комментарием это. Вы заявляете, что бизнес-логика и компоненты не связаны, что вы поддерживаете идею выноса логики из компонентов, но при этом пытаетесь в hoc-компоненты, которые по своему принципу и должны содержать в себе бизнес-логику, при этом будучи компонентами. Перечитайте мой комментарий еще раз - я говорю о том, что нужно четко разделять компоненты визуальные от функциональных. И именно в этом и есть суть hoc. То, что вам кажется ошибкой, в большинстве случаев ошибкой не будет. Причина, по которой 4 из 5 проектов теряют свою атомарность - это изменчивость требований, которая приводит к необходимости менять архитектуру. Однако, в реальном бизнесе изменять архитектуру всего приложения или даже одного модуля - нецелесообразно каждый раз. В лучшем случае - раз в полгода-год происходит рефакторинг (архитектурный, не путать с рефакторингом кода). В остальное же время подобные несовершенства накапливаются

    • @d.nazaratiy
      @d.nazaratiy 9 месяцев назад

      @@ddflruc простите, а вы не путаете, кто из нас категоричен? Автор безапеляционно заявляет, что 80% людей совершают ошибку. Я же в свою очередь говорю, что нужно думать про архитектуру, а не применение конкретных паттернов. Т.е. буквально то же самое, что написали вы. Пересмотрите видео еще раз, пожалуйста, а затем перечитайте мой комментарий. Возможно, вы измените свое мнение. То же касается "многообразия архитектур проектов, с которыми я мог не работать" - я _буквально_ в комментарии говорю, что нужно учитывать архитектуру проекта... Пожалуйста, перечитайте. И последнее. Ответ на риторический вопрос о том, почему я называю автора джуном. Во-первых, я называю так не только автора, но и всех тех, кто записывает подобные видео, а во-вторых, я делаю это, потому что это поведения джуна, не самое лучшее при чем: столкнувшись с каким-то новым "крутым" принципом, который произвел сильное впечатление или описан в "серьезном" источнике, и даже до конца в нем не разобравшись, начать тулить его везде, громогласно заявлять о том, какая невероятная штука существует и что она обязательна для всех, а кто не будет использовать - тот дурак и не лечится. Согласитесь, именно это и происходит в видео: видно, что автор _не_ _знает_, как показать на примере эффективность использования hoc, также считает создание функциональных компонент вынесением бизнес-логики из компонента, но при этом и в заголовке и в самом видео неоднократно заявляет, что все, кто не делают так - совершают ошибку. Я знаю тех, кто по техническим скилам может быть назван и мидлом, и синьйором, но при этом все еще являются вот такими же "джунами" - к сожалению, подобное мышление и поведение не проходит само по себе с опытом, а только если активно указывать, что это неправильно и зачастую недопустимо в команде.

    • @serginyo90
      @serginyo90 9 месяцев назад

      @@d.nazaratiy Вы правильно отмечаете, что когда бизнес-логика извлекается из компонента, она может быть реализована как компонент высшего порядка. Возможно, я не совсем точно это сформулировал, но моя основная мысль заключалась в том, что простые компоненты должны оставаться простыми и нести ответственность только за свои задачи. Например, модальное окно может иметь собственное состояние, определяющее, отображается оно или нет.

  • @frontfromsofa
    @frontfromsofa 9 месяцев назад

    пришел в компанию и дали проект легаси, в который надо было добавить новый функционал в поиск. Так проблема в том, что они написали 6 разных поисков выполняющих одно и тоже и имеющие одну и ту же верстку😅🤣 солид принцип вообще я считаю должен быть обязательным в багаже знаний любого человека идущего в айти

    • @d.nazaratiy
      @d.nazaratiy 9 месяцев назад

      а как солид связан с существованием почти полных дубликатов компонент? никак. это принцип dry (dont repeat yourself), наравне с которым существует, внезапно, принцип wet (write everything twice). оба принципа имеют свои плюсы и минусы, и хоть dry наиболее распространен, но даже при этом иногда имеет смысл держать почти полные дубликаты, вместо перегруженных универсальных компонент или абстрактных классов, особенно, если у каждого дубликата своя собственная зона ответственности и бизнес логика с любой момент может измениться кардинально. не нужно считать, что до вас над проектом работали идиоты (хотя часто это действительно так и есть) - лучше разберитесь, почему так было сделано, возможно, вы захотите сохранить этот подход и дальше PS а еще солид - это не принциП, а целых 5. И ни разу в своей жизни (17+ лет коммерческой разработки) я не видел, чтобы можно было одновременно соблюсти все 5. Ни разу.

    • @serginyo90
      @serginyo90 9 месяцев назад

      @safarovdiyor И таких проектов много. Ни разу не видел проект где проседает производительность из-за того что есть HOC компоненты. Но много видел проектов, где наподобие поиска который Вы привели в пример. Одна и та же логика в каждом компоненте.

    • @frontfromsofa
      @frontfromsofa 9 месяцев назад

      @@d.nazaratiy да, вы правы, солид принцип тут не причем. Скорее действительно dry принцип в моём случае

  • @wpromo
    @wpromo 9 месяцев назад

    99% разработчиков делают эту ошибку, а я буттон (а в реальном мире кнопку из сторонней библиотеки) обернул в функцию и теперь могу эту функцию протестить, да ладно :))

  • @evgenypershukov3228
    @evgenypershukov3228 9 месяцев назад

    На самом деле все эти примеры не имеют отношения к React, все эти правила идут от идеологии чистого кода. А в реакте их можно наблюдать часто потому что джуны учат сразу реакт, а потом js, и наверное только потом как это писать так чтобы и потестить можно было, и маштабировать, и просто чтобы читалось лучше)

    • @serginyo90
      @serginyo90 9 месяцев назад

      Совершенно согласен. Можно так сказать, что все эти примеры имеют отношение не только к React. Но я хотел именно, чтобы обратили внимание именно кто учит React. Потому что примеры приведены именно с ним.

  • @ОлександрПархоменко-г4й
    @ОлександрПархоменко-г4й 10 месяцев назад

    Teşekkür ederim

  • @виртуоз_ру
    @виртуоз_ру 10 месяцев назад

    Хорош 👍

  • @msbull100
    @msbull100 10 месяцев назад

    С тор браузером интересная штука получается.

    • @serginyo90
      @serginyo90 10 месяцев назад

      Возможно

  • @Phoenix_coding
    @Phoenix_coding 10 месяцев назад

    отличный контент

    • @serginyo90
      @serginyo90 10 месяцев назад

      Благодарю за обратную связь.

  • @im_fredy
    @im_fredy 10 месяцев назад

    Мне видео не понравилось, аргументы можно посмотреть в документацию, а проблематику вы не раскрыли. Я знаю одно, когда мне нужно что то протестировать на левом сайте где стоит полис, я включаю хром разрешение, которое отключает эту защиту полностью.

    • @serginyo90
      @serginyo90 10 месяцев назад

      Так идея CSP чтобы без вашего ведома никто не загрузил лишний контент на сайт.

    • @im_fredy
      @im_fredy 10 месяцев назад

      @@serginyo90 но это же можно обойти

    • @serginyo90
      @serginyo90 10 месяцев назад

      @@im_fredy как? Вот например есть сайт www.google.com/. Как туда можно загрузить скрипт со стороннего ресурса и без моего ведома и отдать мне уже эту страницу со скриптом?

    • @im_fredy
      @im_fredy 10 месяцев назад

      @@serginyo90к примеру Always Disable Content-Security-Policy, таких расширений много

    • @serginyo90
      @serginyo90 7 месяцев назад

      Такое расширение юзер сам устанавливает и включает или отключает. Я же и отметил что как можно загрузить без моего ведома. Другими словами без моего согласия. А с помощью расширений конечно можно делать все что угодно, даже заходя на Гугл, показывать страницу фейсбука

  • @jacktwinn
    @jacktwinn 10 месяцев назад

    А если ошибка при регистрации будет? В catch стирать куки?

    • @serginyo90
      @serginyo90 10 месяцев назад

      У куки есть время жизни, я советую ставить около 5 секунд. Т.е. через 5 секунд она сама удалиться, поэтому дополнительно стирать не нужно.

  • @igorilin5149
    @igorilin5149 10 месяцев назад

    Это хостинги для блокчейна

    • @serginyo90
      @serginyo90 10 месяцев назад

      Да, можно и так сказать

  • @maks2
    @maks2 10 месяцев назад

    Хотелось бы продолжения про CORS, всякие сценарии использования и т.п.

    • @serginyo90
      @serginyo90 10 месяцев назад

      Что именно интересно в CORS? Вот вышло видео про Content Security Policy ruclips.net/video/EZU3rdpXDoE/видео.html

  • @aleksprimetv
    @aleksprimetv 10 месяцев назад

    Что касается нагрузки, так это как раз сокет ее и создает так как на него нужно выделять процесс. И лучше использовать лонг полинг где им можно обойтись.

    • @serginyo90
      @serginyo90 10 месяцев назад

      Выбор между этими двумя подходами должен основываться на специфических требованиях вашего приложения и возможностях серверной инфраструктуры. WebSocket лучше подходит для приложений, требующих высокой интерактивности и минимальной задержки, но требует от сервера способности поддерживать большое количество открытых соединений. Long Polling может быть предпочтительнее в сценариях с меньшей частотой обновлений данных или когда инфраструктура сервера ограничена в способности поддерживать множество одновременных соединений.

  • @Александр1-ц7т
    @Александр1-ц7т 10 месяцев назад

    Очень похоже на торренты, только программа доступа называется по другому 🤣🤣🤣

    • @serginyo90
      @serginyo90 10 месяцев назад

      Похоже, но другое.

    • @alexe7861
      @alexe7861 10 месяцев назад

      Все таки на столько похоже, что было бы интересно услышать разбор: "в чем разница"?

    • @serginyo90
      @serginyo90 10 месяцев назад

      @@alexe7861 Хотя обе системы используют пиринговые сети для хранения и передачи данных, IPFS предлагает более широкий набор функций, направленных на создание децентрализованного веба, в то время как BitTorrent фокусируется на передаче файлов. Каждый файл в сети BitTorrent идентифицируется и доступен через торрент-файл, который содержит метаданные и список трекеров. Пользователи скачивают и загружают фрагменты файлов, и файлы остаются целыми только на устройствах пользователей. Нет встроенного механизма для обеспечения постоянного хранения файлов; файлы доступны, только если есть пиры, которые активно их раздают. IPFS - это распределенная система файлового хранения, которая стремится создать более постоянный, эффективный и связанный веб. IPFS использует модель содержимо-адресуемого хранения, где файлы идентифицируются по их содержанию через криптографический хеш (т.е. не будет дублировать данные). IPFS обеспечивает постоянное хранение данных, поскольку узлы могут “закреплять” данные, чтобы гарантировать их доступность в сети. IPFS позволяет не только передачу файлов, но и создание распределенных приложений, поддерживает версионирование и имеет аспекты, направленные на замену традиционного веба.

  • @nickkorolev1245
    @nickkorolev1245 10 месяцев назад

    Сервис цифрового контента Bastyon построен на данном протоколе и сейчас набирает популярность.

    • @serginyo90
      @serginyo90 10 месяцев назад

      Интересно выглядит сервис.

  • @moivozmojnostyvsegdavmoupolzu
    @moivozmojnostyvsegdavmoupolzu 10 месяцев назад

    Вэб Референс - гуд ! Воспользуемся ! 👍 за идеи !

  • @Shiro-1911
    @Shiro-1911 10 месяцев назад

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

    • @serginyo90
      @serginyo90 10 месяцев назад

      Минусы и плюсы везде есть. Но свободу слова сейчас легко заблокировать на уровне государства. А это вещь одна из самых основных.

    • @localixdots9698
      @localixdots9698 10 месяцев назад

      @@serginyo90 государство пиринг сетей на точках обмена трафика отключит и ничего работать не будет) Я к чему - при необходимости у государства есть масса рычагов.

  • @AntonZnaenok
    @AntonZnaenok 10 месяцев назад

    Проблема только 1. Нужно скачать весь кэш этой сети. Такая же хрень как с толстым клиентом bitcoin.

    • @serginyo90
      @serginyo90 10 месяцев назад

      Не обязательно скачивать весь кеш IPFS, чтобы использовать протокол. Как правило, пользователи загружают или получают доступ только к тем файлам, которые им нужны, используя уникальные идентификаторы, известные как CID (Content Identifiers). Когда пользователь хочет получить файл из IPFS, он запрашивает его по CID, и протокол находит узлы, на которых хранится этот файл, и передает его запрашивающему узлу. Это отличается от традиционного метода загрузки полного блокчейна, как в случае с “толстым клиентом” Bitcoin, где необходимо скачать всю историю транзакций.

  • @emelyanovroman5379
    @emelyanovroman5379 10 месяцев назад

    Торрент протокол под другим названием?

    • @serginyo90
      @serginyo90 10 месяцев назад

      Хотя обе системы используют пиринговые сети для хранения и передачи данных, IPFS предлагает более широкий набор функций, направленных на создание децентрализованного веба, в то время как BitTorrent фокусируется на передаче файлов. Каждый файл в сети BitTorrent идентифицируется и доступен через торрент-файл, который содержит метаданные и список трекеров. Пользователи скачивают и загружают фрагменты файлов, и файлы остаются целыми только на устройствах пользователей. Нет встроенного механизма для обеспечения постоянного хранения файлов; файлы доступны, только если есть пиры, которые активно их раздают. IPFS - это распределенная система файлового хранения, которая стремится создать более постоянный, эффективный и связанный веб. IPFS использует модель содержимо-адресуемого хранения, где файлы идентифицируются по их содержанию через криптографический хеш (т.е. не будет дублировать данные). IPFS обеспечивает постоянное хранение данных, поскольку узлы могут “закреплять” данные, чтобы гарантировать их доступность в сети. IPFS позволяет не только передачу файлов, но и создание распределенных приложений, поддерживает версионирование и имеет аспекты, направленные на замену традиционного веба.

  • @boenia
    @boenia 11 месяцев назад

    Так а куда картинка загружается? К каким пользователям интернета?

    • @serginyo90
      @serginyo90 10 месяцев назад

      Нет, не совсем так. Когда вы загружаете файл в IPFS, он распределяется по сети следующим образом копия файла сохраняется на вашем устройстве, со временем его фрагменты начинают храниться на различных узлах сети IPFS, что обеспечивает его доступность и децентрализованное хранение. Файл скорее всего будет разбит на части.

    • @РускийРапер
      @РускийРапер 10 месяцев назад

      тупо торрент) @@serginyo90

    • @boenia
      @boenia 10 месяцев назад

      @@serginyo90 так, стоп, а если мне нужен целый файл для работы? Как я смогу им пользоваться, если у меня только фрагмент?

    • @serginyo90
      @serginyo90 10 месяцев назад

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

    • @boenia
      @boenia 10 месяцев назад

      @@serginyo90 А, понятно, спасибо

  • @natasa373
    @natasa373 11 месяцев назад

    Спасибо огромное за полезную ссылку с тэгами и за видео .Я только начинаю,хотелось бы больше примеров с комментариями по html css и ещё лайфхаков для новичков 🤩

    • @serginyo90
      @serginyo90 11 месяцев назад

      Спасибо за обратную связь. Значит запишу видео про CSS 🙂

    • @natasa373
      @natasa373 11 месяцев назад

      @@serginyo90 спасибо огромное!🤗

    • @serginyo90
      @serginyo90 10 месяцев назад

      Видео готово ruclips.net/video/aJKdSISsp6M/видео.html

  • @АртёмСенькевич-ы5с
    @АртёмСенькевич-ы5с 11 месяцев назад

    У меня есть вопрос,как я понимаю отличий между ReactJs не очень много, если речь идёт не о маршрутизации, но хотелось бы узнать, могу ли я писать компоненты для приложения как например Text и Button?

    • @serginyo90
      @serginyo90 11 месяцев назад

      Да, конечно. Нужно создать отдельный компонент и импортировать его вместо 'react-native'. Но нужно помнить что он тогда будет выглядеть одинаково на обоих платформах. А компоненты из react-native по разному выглядит на Andorid и на iPhone.

    • @АртёмСенькевич-ы5с
      @АртёмСенькевич-ы5с 11 месяцев назад

      @@serginyo90 блогадарю за ответ

    • @АртёмСенькевич-ы5с
      @АртёмСенькевич-ы5с 11 месяцев назад

      Сергей, хотел бы спросить у вас, как у более опытного разработчика про такой framework как flutter, говорят, что у него очень много плюсов и мой вопрос заключается в том, полезно ли будет обратить внимание на его изучение и подготовку в случае перехода с одной среды на другую.

    • @serginyo90
      @serginyo90 11 месяцев назад

      @@АртёмСенькевич-ы5с Обе платформы имеют свои преимущества и недостатки, и выбор между ними часто зависит от конкретных требований проекта и предпочтений разработчика. • Flutter: Использует Dart, разработан Google • React Native: Использует JavaScript, разработан Facebook. UI-компоненты: • Flutter: Предоставляет обширный набор настраиваемых виджетов для создания сложных пользовательских интерфейсов. • React Native: Предоставляет базовые компоненты, и часто требует сторонних библиотек для дополнительных функций. Если есть опыт с Реактом, советую попробовать React Native. Это будет самый быстрый старт.

  • @okireev
    @okireev 11 месяцев назад

    Спасибо за пример реализации интересного функционала 👍

    • @serginyo90
      @serginyo90 11 месяцев назад

      Супер. Спасибо за обратную связь

  • @savchenkoilliya9131
    @savchenkoilliya9131 Год назад

    Гриды будут?

    • @serginyo90
      @serginyo90 Год назад

      В этом плейлесте не будет. Но если будет много запросов на Гриды, то могу записать отдельное видео.