Boring Front End
Boring Front End
  • Видео 50
  • Просмотров 211 480
Как подключить google maps в React приложение? 2022
В очередном видео я расскажу как интегрировать гугл карты в реакт приложение
- Как интегрировать карты гугл в реакт приложение?
- Как интегрировать google place api?
- Как использовать геолокацию?
- Настройка регистрация в google maps
- Подключение Maps Js APi && Places API && geocoding API
- Создание ключа
- Генерация проекта используя CRA create-react-app.dev/
- Создание базовой структуры проекта
- Добавление карты
- Настройка внешнего вида контейнера с картой
- Настройка поведения не зумить при скролле, убрать контролы и т.д.
- Настройка темы карты snazzymaps.com/
- Добавление автокомлита use-places-autocomplet
- Добавление react-cool-onclickoutside
- getGeolocation преобразование описания локации в...
Просмотров: 22 076

Видео

Как готовиться к собеседованию на front end разработчика?
Просмотров 1,3 тыс.3 года назад
В этом видео я поделюсь с вами простыми шагами, которыми пользую при подготовке к собеседованию в разные компании #boring-front-end #funfrontend.com #IT
Cookie VS Token Authentication
Просмотров 5 тыс.3 года назад
В этом видео коротко разберем аутентификацию при помощи сессий и токенов. Что это такое и чем эти способы отличаются. Почему сессия не масштабируется, для чего создан JWT Онлайн живой курс основы FE разработки: www.funfrontend.com/courses/front-end-basics Канал в TG: t.me/boringfe Если вам нравится что мы делаем поддержите нас на патреоне www.patreon.com/boringfrontend #аутентификация, #boring-...
Что такое API?
Просмотров 1,3 тыс.3 года назад
Всем привет, в этом видео разберемся что такое application programming interface и как его использовать, так же поговорим что такое REST API Курс разработки с нуля funfrontend.com/ Статья на тему REST restfulapi.net/ Подключайтесь к каналу в ТГ t.me/boringfe #API, #RESTAPI, #boring-front-end, #funfrontend
Что такое DNS?
Просмотров 6623 года назад
Всем привет, в этом видео разберемся что такое domain name system и почему это фундаментальная служба для всего глобального интернета Чем занимаетс ICANN www.icann.org/resources/pages/what-2012-02-25-ru Подключайтесь к каналу в ТГ t.me/boringfe #DNS, #boring-front-end, #funfrontend
Giphy App на React Js
Просмотров 7523 года назад
В этом видео я покажу вам как используя React и открытое API giphy создать приложение по поиску гифок 00:00:00 Обзор приложения 00:01:53 установка зависимостей 00:06:10 Роутинг 00:27:35 Регистрация на giphy 00:30:00 Создание базовых страниц и получение данных с апи 00:49:08 Сетка react-masonry-css 02:03:20 Деплой на githubpages 02:19:07 Copy to clipboard Результат github.com/boring-fe/giphy-you...
Что такое тестирование?
Просмотров 1,1 тыс.3 года назад
Что тако разработка ПО? Зачем писать тесты? Чем e2e отличается от integration и unit? ✅ Подписывайтесь на Telegram канал: t.me/boringfe​ #javascript #E2e #QA #software testing
Хостинг за 5 минут на GithubPages (для начинающих)
Просмотров 4293 года назад
Как развернуть статический сайт в интернете за 5 минут на GithubPages БЕСПЛАТНО! В этом видео мы на практике разберемся как разместить ваш сайт на сервисе github pages. 👉🏻 Хостинг или где живут сайты в 2021 (для начинающих) - ruclips.net/video/iOvQOlbViqQ/видео.html ✅ Подписывайтесь на Telegram канал: t.me/boringfe​ #урокпрограммирования​ #ITкурсы​ #javascript
React JS: ПРИЛОЖЕНИЕ "Генератор паролей"(часть 4) деплой
Просмотров 2753 года назад
Разместим приложение созданное при помощи create-react-app на сервисе GH-page
Хостинг или где живут сайты в 2021 (для начинающих)
Просмотров 3593 года назад
В этом видео я подробно рассказываю о хостинге и о том, где живут сайты, что такое VPS и чем отличается выделенный сервер от виртуального. ✅ Подписывайтесь на Telegram канал: t.me/boringfe #урокпрограммирования #ITкурсы #javascript
Что такое: GITHUB vs BITBUCKET vs GITLAB
Просмотров 12 тыс.4 года назад
В этом видео говорим о GITHUB, BITBUCKET, GITLAB. Что это такое? Как работают? Чем эти сервисы отличаются? 👉🏻 Что такое СИСТЕМА КОНТРОЛЯ ВЕРСИЙ? SVN или GIT? - ruclips.net/video/YRieW3mhh1s/видео.html ✅ Подписывайтесь на Telegram канал: t.me/boringfe #урокпрограммирования #ITкурсы #javascript
Что такое СИСТЕМА КОНТРОЛЯ ВЕРСИЙ? SVN или GIT?
Просмотров 8 тыс.4 года назад
В данном видео разберем: - что такое система контроля версий; - распределенные и централизованные системы контроля версий; - зачем нужно использовать систему контроля версий в индивидуальной и в командной разработке; - что выбрать SVN или GIT ✅ Подписывайтесь на Telegram канал: t.me/boringfe #урокпрограммирования #ITкурсы #javascript
React JS: ПРИЛОЖЕНИЕ "Генератор паролей" (часть 3)
Просмотров 2884 года назад
ЧАСТЬ 3 В этом видео мы продолжим создание приложения с нуля на React JS - ГЕНЕРАТОР ПАРОЛЕЙ. С помощью данного видео мы создадим кнопку, которая поможет нам скопировать результат в буфер обмена. Для копирования в буфер обмена я буду использовать библиотеку react copy to clipboard, это одна из самых популярных библиотек с решением данного функционала. 1️⃣ ЧАСТЬ видео по ссылке 👉🏻 ruclips.net/vi...
React JS: ПРИЛОЖЕНИЕ "Генератор паролей" (часть 2)
Просмотров 4044 года назад
ЧАСТЬ 2 В этом видео мы рассмотрим создание приложение с нуля на React JS - ГЕНЕРАТОР ПАРОЛЕЙ. С помощью данного приложения пользователь может по заданным параметрам создать себе необходимый пароль. Структуру проекта генерируем с помощью create react app, если необходимо отдельное видео по данному инструменту - оставьте в комментариях. 1️⃣ ЧАСТЬ видео по ссылке 👉🏻 ruclips.net/video/KcGxOtS0eZ8/...
React JS: ПРИЛОЖЕНИЕ "Генератор паролей" (часть 1)
Просмотров 9224 года назад
В этом видео мы рассмотрим создание приложения с нуля на React JS - ГЕНЕРАТОР ПАРОЛЕЙ. С помощью данного приложения пользователь может по заданным параметрам создать себе необходимый пароль. Структуру проекта генерируем с помощью create react app, если необходимо отдельное видео по данному инструменту - оставьте в комментариях. 2️⃣ ЧАСТЬ видео по ссылке 👉🏻 ruclips.net/video/jP6PGO0MWbk/видео.ht...
CSS: что такое pseudo-elements + ПРИМЕРЫ
Просмотров 2444 года назад
CSS: что такое pseudo-elements ПРИМЕРЫ
CSS: что такое pseudo classes + ПРИМЕРЫ
Просмотров 2354 года назад
CSS: что такое pseudo classes ПРИМЕРЫ
Что такое ключевое слово THIS в JavaScript? Как работает и примеры на практике (2020)
Просмотров 6 тыс.4 года назад
Что такое ключевое слово THIS в JavaScript? Как работает и примеры на практике (2020)
Что такое WEBPACK, его настройка и основные концепции (2020)
Просмотров 42 тыс.4 года назад
Что такое WEBPACK, его настройка и основные концепции (2020)
CSS: ВЕРСТКА landing page с нуля
Просмотров 9054 года назад
CSS: ВЕРСТКА landing page с нуля
Что такое BABEL и его настройка (2020)
Просмотров 20 тыс.4 года назад
Что такое BABEL и его настройка (2020)
ЧТО ТАКОЕ Node Package Manager(NPM) за 12 минут??? (2020)
Просмотров 39 тыс.4 года назад
ЧТО ТАКОЕ Node Package Manager(NPM) за 12 минут??? (2020)
ЧТО ТАКОЕ Node js за 3 минуты (2020)
Просмотров 11 тыс.4 года назад
ЧТО ТАКОЕ Node js за 3 минуты (2020)
CSS: RELATIVE vs ABSOLUTE vs FIXED и немного о потоке (2020)
Просмотров 6224 года назад
CSS: RELATIVE vs ABSOLUTE vs FIXED и немного о потоке (2020)
CSS: СОЗДАЕМ БОКОВОЕ МЕНЮ за 30 минут (ч.2) СОЗДАНИЕ ОСНОВНОЙ СТРУКТУРЫ МАКЕТА
Просмотров 3134 года назад
CSS: СОЗДАЕМ БОКОВОЕ МЕНЮ за 30 минут (ч.2) СОЗДАНИЕ ОСНОВНОЙ СТРУКТУРЫ МАКЕТА
CSS: СОЗДАЕМ БОКОВОЕ МЕНЮ за 30 минут (ч.3) ДОБАВЛЕНИЕ СТИЛЕЙ ДЛЯ ССЫЛОК
Просмотров 2304 года назад
CSS: СОЗДАЕМ БОКОВОЕ МЕНЮ за 30 минут (ч.3) ДОБАВЛЕНИЕ СТИЛЕЙ ДЛЯ ССЫЛОК
CSS: СОЗДАЕМ БОКОВОЕ МЕНЮ за 30 минут (ч.4) ДОБАВЛЯЕМ СКРИПТЫ
Просмотров 3484 года назад
CSS: СОЗДАЕМ БОКОВОЕ МЕНЮ за 30 минут (ч.4) ДОБАВЛЯЕМ СКРИПТЫ
CSS: СОЗДАЕМ БОКОВОЕ МЕНЮ за 30 минут (ч.1) ПОДГОТОВКА ОКРУЖЕНИЯ
Просмотров 5004 года назад
CSS: СОЗДАЕМ БОКОВОЕ МЕНЮ за 30 минут (ч.1) ПОДГОТОВКА ОКРУЖЕНИЯ
JavaScript урок: cоздаем часы за 30 минут (4 часть)
Просмотров 1574 года назад
JavaScript урок: cоздаем часы за 30 минут (4 часть)
JavaScript урок: cоздаем часы за 30 минут (3 часть)
Просмотров 1144 года назад
JavaScript урок: cоздаем часы за 30 минут (3 часть)

Комментарии

  • @nikie_aidan_
    @nikie_aidan_ 18 дней назад

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

  • @bato_pubg
    @bato_pubg Месяц назад

    thank you

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

    но ведь у гитхаба тоже есть CI/CD...

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

    Если речь о телефоне идет - android, -7-версия - Nodejs возможно здесь установить? Нужны ли рут-права для своего тф для этой инсталляции?

  • @ЕкатеринаКустова-ю5ы
    @ЕкатеринаКустова-ю5ы 3 месяца назад

    спасибо!

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

    Шикарная штука. Сделал с его помощью игру для зрителей прямой трансляции- Угадай птичку. В чате появляется ссылка на фото и надо назвать птичку. Добавляет интерактивности в чат и работает ак только запускаешь эфир.

  • @alexbrutski1210
    @alexbrutski1210 4 месяца назад

    Спасибо. То, что мне было нужно.

  • @Dmitrijserg
    @Dmitrijserg 4 месяца назад

    ОТличное объяснение, спасибо

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

    Шикарнейшее видео и очень доступное объяснение!

  • @dmitry_st
    @dmitry_st 5 месяцев назад

    Спасибо за детальный разбор этой важной темы.

  • @лдлз
    @лдлз 6 месяцев назад

    Спасибо большое, очень помог!

  • @epicamv27
    @epicamv27 6 месяцев назад

    объяснение не для тупых я тупой и нечего не понятно

  • @mrin0
    @mrin0 6 месяцев назад

    !

  • @mrin0
    @mrin0 6 месяцев назад

    !

  • @Viacheslav-gp6cr
    @Viacheslav-gp6cr 7 месяцев назад

    в

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

    Все это работает если функция не стрелочная.

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

    Коллеги, кто собрал проект по этому уроку и он работает? Дайте, пожалуйста ссылку на гит

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

    А в чём ты пишешь всё это?

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

    А где видео о прототипе

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

    Спасибо. Материал - то хороший. Говорить быстро, не значит хорошо. Пожалуйста, работайте над дикцией и не глотайте слова.

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

    Marker is deprecated :(

  • @user-ed1jc6xl9r
    @user-ed1jc6xl9r 10 месяцев назад

    в конце дали время на подумать

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

    в жизни синхронными мы называем действия, которые делаются одновременно, а в javascript - которые идут друг за другом😭

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

    Я из будушего) 24 год Github- анлим приватных репозитории для организации Вся 3 имеет свои CI

    • @Alex-jx6bz
      @Alex-jx6bz 9 месяцев назад

      в бесплатной версии CI?

  • @ВиталийГр-м8ц
    @ВиталийГр-м8ц 11 месяцев назад

    Молодец, все толково объяснил, для новичков самое, то

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

    Музыка бесит

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

    Спасибо, большое! Доступно объяснили тему, в которой я плавал долгое время.

  • @89cls91
    @89cls91 Год назад

    Тараториш страшно. Это глупо. Контен качественный и за это спасибо.

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

    я только сейчас узнал о том что гитхаб был куплен майками?

  • @nik-v7o
    @nik-v7o Год назад

    Спасибо

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

    Дякую за відео! А де код цього проєкту?

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

    Відосик база

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

    Відео дуже корисне! Дякую! Було б дуже добре подивитись відео на тему useCallback(), Directions API and Routes API. Як витягувати дані з маркера чи з інфо windows google і створювати довідник адрес.

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

    Благодарю автора за классное и подробное видео. Как у тебя сейчас дела, как с работой? Видно, что ты умный и толковый программист.

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

    Куда пропал-то? Последнее видео хорошо зашло, как раз добавляю карту на сайт.

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

      СВО...

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

      @@ifrost2 Кстати по сабжу, гугл убрал выбор России при регистрации в гугл картах. Отнёсся к россиянам как к животным. Потому гугл карты это говносервис, который я не буду использовать чисто принципиально, если только не припрёт, работая на забугор, что вряд ли случится. Зато яндекс карты общедоступны.

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

      Так ви і є тварини яки пидтрімуєте массові вбивства та знищєння міст, користуйтесь своїм гівном і не лізьте в цивілізований світ

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

    Токен тоже хранится на сервере. Ну и в локалсторидже, но туда он попадает с сервера.

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

    Товарищ автор, я сделал дипломный проект и улучшаю его. Верно ли понимаю, что если вдруг случится атака ботов, то с меня могут списать круглую сумму? И сколько там вообще платить надо в случае превышения лимитов?

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

    Отличное объяснение, спасибо большое)

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

    Как же всё ясно и четко))

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

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

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

      А що ж це таке, може трохи розкриєте цю тему?

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

      ​@@boringfrontend9037 Якщо українською, то ось тут ruclips.net/video/T3fb_VKdZJA/видео.html розповідається про this згідно офиційної специфікації. Якщо стисло, -то this - це звичайний ідентифікатор який пов'язується зі значенням суто відповідно тому як викликається Normal Function. Треба зрозуміти одну річ - не мало би ніякого значення, як Ви називаєте this, якщо б Ви не використовували термін (контекст) який має своє особливе значення щодо офіційної специфікації ECMA. Тобто термін Execution Contexts або просто контекст, згідно розділу 9.1 не має ніякого відношення до this. Тому спроби називати this саме так, це вводити в оману початківця, який можливо вивчить колись JS саме так, як про нього розповідає ECMA. Нагадаю, що кожний агент, або RunTime який виконує JavaScript робить це згідно того, що каже саме ECMA - як єдине джерело офіційної інформації з JS з 1996 року.

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

    Дякую! Контент топ

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

    Наконец-то я поняла! Спасибо Вам огромное.. ❤

  • @МаксимИсаев-ъ5о

    Мое уважение!

  • @vlad-zf1ev
    @vlad-zf1ev Год назад

    лучшее объяснение webpack

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

    спасибо за разьяснения! очень классно

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

    Отличный урок для начинающих.

  • @АртынскийРаботник

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

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

      Ну після 24/02 якось немає бажання і трохи заклопотаний війною

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

    Спасибо, доступно объяснил. Я определился с тем что мне больше подходит.

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

    3:13 Как говорится, всё что может быть перехвачено, будет перехвачено)

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

    Брехня. ГітХаб має підтримку СІ/CD.

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

      Цьому відео вже 2+ роки, на той момент ці фічі були щє в розробці/не стабільні