- 50
- 205 383
Boring Front End
Ukraine
Приєднався 14 лис 2019
✅ ПОДПИШИТЕСЬ НА КАНАЛ❗️
Всем привет, вы на канале скучный фронт енд. Меня зовут Илья Литвинов www.illialytvynov.com/ я занимаюсь веб разработкой с 2012 года сейчас работаю на должности lead front end developer в компании WIX.COM и сотрудничаю с разными школами как тренер по фронт енд разработке с 2015 года.
Этот канал я запустил что-бы делится качественным контентом по веб разработке и своим опытом который будет полезен как начинающим разработчикам так и тем кто уже имеет опыт.
🤙 Есть вопросы? пишите мне в телеграм t.me/IlyaLytvynov
🤙 Есть предложения по сотрудничеству пишите на почту ilyaillych@gmail.com
Всем привет, вы на канале скучный фронт енд. Меня зовут Илья Литвинов www.illialytvynov.com/ я занимаюсь веб разработкой с 2012 года сейчас работаю на должности lead front end developer в компании WIX.COM и сотрудничаю с разными школами как тренер по фронт енд разработке с 2015 года.
Этот канал я запустил что-бы делится качественным контентом по веб разработке и своим опытом который будет полезен как начинающим разработчикам так и тем кто уже имеет опыт.
🤙 Есть вопросы? пишите мне в телеграм t.me/IlyaLytvynov
🤙 Есть предложения по сотрудничеству пишите на почту ilyaillych@gmail.com
Как подключить 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 преобразование описания локации в координаты
- Добавление маркера
- Настройка маркера с расположением пользователя
- Кастомизация маркера
- Отрисовка маркеров при клике
- Удаление маркеров с карты
- Браузерна геолокация
00:00:00 Вступление/настройка зависимостей
00:10:05 Добавление компонента карты
00:27:00 Настройка темы для google maps
00:30:35 Добавление autocomplete
00:50:00 Добавление настройка маркера текущего положения
01:16:00 Использование браузерной геолокации
Группа в fun_front_end
Канал в ТГ t.me/boringfe
Patreon: www.patreon.com/boringfrontend
#boringfrontend
#funfrontend
#обучениереакт
#обучениефронтенд
- Как интегрировать карты гугл в реакт приложение?
- Как интегрировать 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 преобразование описания локации в координаты
- Добавление маркера
- Настройка маркера с расположением пользователя
- Кастомизация маркера
- Отрисовка маркеров при клике
- Удаление маркеров с карты
- Браузерна геолокация
00:00:00 Вступление/настройка зависимостей
00:10:05 Добавление компонента карты
00:27:00 Настройка темы для google maps
00:30:35 Добавление autocomplete
00:50:00 Добавление настройка маркера текущего положения
01:16:00 Использование браузерной геолокации
Группа в fun_front_end
Канал в ТГ t.me/boringfe
Patreon: www.patreon.com/boringfrontend
#boringfrontend
#funfrontend
#обучениереакт
#обучениефронтенд
Переглядів: 21 624
Відео
Как готовиться к собеседованию на front end разработчика?
Переглядів 1,2 тис.2 роки тому
В этом видео я поделюсь с вами простыми шагами, которыми пользую при подготовке к собеседованию в разные компании #boring-front-end #funfrontend.com #IT
Cookie VS Token Authentication
Переглядів 5 тис.2 роки тому
В этом видео коротко разберем аутентификацию при помощи сессий и токенов. Что это такое и чем эти способы отличаются. Почему сессия не масштабируется, для чего создан JWT Онлайн живой курс основы FE разработки: www.funfrontend.com/courses/front-end-basics Канал в TG: t.me/boringfe Если вам нравится что мы делаем поддержите нас на патреоне www.patreon.com/boringfrontend #аутентификация, #boring-...
Что такое API?
Переглядів 1 тис.3 роки тому
Всем привет, в этом видео разберемся что такое application programming interface и как его использовать, так же поговорим что такое REST API Курс разработки с нуля funfrontend.com/ Статья на тему REST restfulapi.net/ Подключайтесь к каналу в ТГ t.me/boringfe #API, #RESTAPI, #boring-front-end, #funfrontend
Что такое DNS?
Переглядів 5323 роки тому
Всем привет, в этом видео разберемся что такое 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
Переглядів 7423 роки тому
В этом видео я покажу вам как используя 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 (для начинающих)
Переглядів 4093 роки тому
Как развернуть статический сайт в интернете за 5 минут на GithubPages БЕСПЛАТНО! В этом видео мы на практике разберемся как разместить ваш сайт на сервисе github pages. 👉🏻 Хостинг или где живут сайты в 2021 (для начинающих) - ua-cam.com/video/iOvQOlbViqQ/v-deo.html ✅ Подписывайтесь на Telegram канал: t.me/boringfe #урокпрограммирования #ITкурсы #javascript
React JS: ПРИЛОЖЕНИЕ "Генератор паролей"(часть 4) деплой
Переглядів 2723 роки тому
Разместим приложение созданное при помощи create-react-app на сервисе GH-page
Хостинг или где живут сайты в 2021 (для начинающих)
Переглядів 3513 роки тому
В этом видео я подробно рассказываю о хостинге и о том, где живут сайты, что такое VPS и чем отличается выделенный сервер от виртуального. ✅ Подписывайтесь на Telegram канал: t.me/boringfe #урокпрограммирования #ITкурсы #javascript
Что такое: GITHUB vs BITBUCKET vs GITLAB
Переглядів 12 тис.3 роки тому
В этом видео говорим о GITHUB, BITBUCKET, GITLAB. Что это такое? Как работают? Чем эти сервисы отличаются? 👉🏻 Что такое СИСТЕМА КОНТРОЛЯ ВЕРСИЙ? SVN или GIT? - ua-cam.com/video/YRieW3mhh1s/v-deo.html ✅ Подписывайтесь на Telegram канал: t.me/boringfe #урокпрограммирования #ITкурсы #javascript
Что такое СИСТЕМА КОНТРОЛЯ ВЕРСИЙ? SVN или GIT?
Переглядів 8 тис.3 роки тому
В данном видео разберем: - что такое система контроля версий; - распределенные и централизованные системы контроля версий; - зачем нужно использовать систему контроля версий в индивидуальной и в командной разработке; - что выбрать SVN или GIT ✅ Подписывайтесь на Telegram канал: t.me/boringfe #урокпрограммирования #ITкурсы #javascript
React JS: ПРИЛОЖЕНИЕ "Генератор паролей" (часть 3)
Переглядів 2823 роки тому
ЧАСТЬ 3 В этом видео мы продолжим создание приложения с нуля на React JS - ГЕНЕРАТОР ПАРОЛЕЙ. С помощью данного видео мы создадим кнопку, которая поможет нам скопировать результат в буфер обмена. Для копирования в буфер обмена я буду использовать библиотеку react copy to clipboard, это одна из самых популярных библиотек с решением данного функционала. 1️⃣ ЧАСТЬ видео по ссылке 👉🏻 ua-cam.com/vid...
React JS: ПРИЛОЖЕНИЕ "Генератор паролей" (часть 2)
Переглядів 3993 роки тому
ЧАСТЬ 2 В этом видео мы рассмотрим создание приложение с нуля на React JS - ГЕНЕРАТОР ПАРОЛЕЙ. С помощью данного приложения пользователь может по заданным параметрам создать себе необходимый пароль. Структуру проекта генерируем с помощью create react app, если необходимо отдельное видео по данному инструменту - оставьте в комментариях. 1️⃣ ЧАСТЬ видео по ссылке 👉🏻 ua-cam.com/video/KcGxOtS0eZ8/v...
React JS: ПРИЛОЖЕНИЕ "Генератор паролей" (часть 1)
Переглядів 9073 роки тому
В этом видео мы рассмотрим создание приложения с нуля на React JS - ГЕНЕРАТОР ПАРОЛЕЙ. С помощью данного приложения пользователь может по заданным параметрам создать себе необходимый пароль. Структуру проекта генерируем с помощью create react app, если необходимо отдельное видео по данному инструменту - оставьте в комментариях. 2️⃣ ЧАСТЬ видео по ссылке 👉🏻 ua-cam.com/video/jP6PGO0MWbk/v-deo.htm...
CSS: что такое pseudo-elements + ПРИМЕРЫ
Переглядів 2404 роки тому
CSS: что такое pseudo-elements ПРИМЕРЫ
CSS: что такое pseudo classes + ПРИМЕРЫ
Переглядів 2314 роки тому
CSS: что такое pseudo classes ПРИМЕРЫ
Что такое ключевое слово THIS в JavaScript? Как работает и примеры на практике (2020)
Переглядів 6 тис.4 роки тому
Что такое ключевое слово THIS в JavaScript? Как работает и примеры на практике (2020)
Что такое WEBPACK, его настройка и основные концепции (2020)
Переглядів 41 тис.4 роки тому
Что такое WEBPACK, его настройка и основные концепции (2020)
Что такое BABEL и его настройка (2020)
Переглядів 19 тис.4 роки тому
Что такое BABEL и его настройка (2020)
ЧТО ТАКОЕ Node Package Manager(NPM) за 12 минут??? (2020)
Переглядів 38 тис.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) СОЗДАНИЕ ОСНОВНОЙ СТРУКТУРЫ МАКЕТА
Переглядів 3114 роки тому
CSS: СОЗДАЕМ БОКОВОЕ МЕНЮ за 30 минут (ч.2) СОЗДАНИЕ ОСНОВНОЙ СТРУКТУРЫ МАКЕТА
CSS: СОЗДАЕМ БОКОВОЕ МЕНЮ за 30 минут (ч.3) ДОБАВЛЕНИЕ СТИЛЕЙ ДЛЯ ССЫЛОК
Переглядів 2244 роки тому
CSS: СОЗДАЕМ БОКОВОЕ МЕНЮ за 30 минут (ч.3) ДОБАВЛЕНИЕ СТИЛЕЙ ДЛЯ ССЫЛОК
CSS: СОЗДАЕМ БОКОВОЕ МЕНЮ за 30 минут (ч.4) ДОБАВЛЯЕМ СКРИПТЫ
Переглядів 3414 роки тому
CSS: СОЗДАЕМ БОКОВОЕ МЕНЮ за 30 минут (ч.4) ДОБАВЛЯЕМ СКРИПТЫ
CSS: СОЗДАЕМ БОКОВОЕ МЕНЮ за 30 минут (ч.1) ПОДГОТОВКА ОКРУЖЕНИЯ
Переглядів 4984 роки тому
CSS: СОЗДАЕМ БОКОВОЕ МЕНЮ за 30 минут (ч.1) ПОДГОТОВКА ОКРУЖЕНИЯ
JavaScript урок: cоздаем часы за 30 минут (4 часть)
Переглядів 1574 роки тому
JavaScript урок: cоздаем часы за 30 минут (4 часть)
JavaScript урок: cоздаем часы за 30 минут (3 часть)
Переглядів 1144 роки тому
JavaScript урок: cоздаем часы за 30 минут (3 часть)
спасибо!
Шикарная штука. Сделал с его помощью игру для зрителей прямой трансляции- Угадай птичку. В чате появляется ссылка на фото и надо назвать птичку. Добавляет интерактивности в чат и работает ак только запускаешь эфир.
Спасибо. То, что мне было нужно.
ОТличное объяснение, спасибо
Шикарнейшее видео и очень доступное объяснение!
Спасибо за детальный разбор этой важной темы.
Спасибо большое, очень помог!
объяснение не для тупых я тупой и нечего не понятно
!
!
в
Все это работает если функция не стрелочная.
Коллеги, кто собрал проект по этому уроку и он работает? Дайте, пожалуйста ссылку на гит
А в чём ты пишешь всё это?
это vs code
Не перепутал visual studio
@@СашаАлександр-е4м vs code - visual studio code
А где видео о прототипе
Немає, зараз не на часі
Спасибо. Материал - то хороший. Говорить быстро, не значит хорошо. Пожалуйста, работайте над дикцией и не глотайте слова.
Marker is deprecated :(
в конце дали время на подумать
в жизни синхронными мы называем действия, которые делаются одновременно, а в javascript - которые идут друг за другом😭
Я из будушего) 24 год Github- анлим приватных репозитории для организации Вся 3 имеет свои CI
в бесплатной версии CI?
Молодец, все толково объяснил, для новичков самое, то
Музыка бесит
Спасибо, большое! Доступно объяснили тему, в которой я плавал долгое время.
Тараториш страшно. Это глупо. Контен качественный и за это спасибо.
я только сейчас узнал о том что гитхаб был куплен майками?
Спасибо
Дякую за відео! А де код цього проєкту?
Відосик база
Відео дуже корисне! Дякую! Було б дуже добре подивитись відео на тему useCallback(), Directions API and Routes API. Як витягувати дані з маркера чи з інфо windows google і створювати довідник адрес.
Благодарю автора за классное и подробное видео. Как у тебя сейчас дела, как с работой? Видно, что ты умный и толковый программист.
Куда пропал-то? Последнее видео хорошо зашло, как раз добавляю карту на сайт.
СВО...
@@ifrost2 Кстати по сабжу, гугл убрал выбор России при регистрации в гугл картах. Отнёсся к россиянам как к животным. Потому гугл карты это говносервис, который я не буду использовать чисто принципиально, если только не припрёт, работая на забугор, что вряд ли случится. Зато яндекс карты общедоступны.
Так ви і є тварини яки пидтрімуєте массові вбивства та знищєння міст, користуйтесь своїм гівном і не лізьте в цивілізований світ
Токен тоже хранится на сервере. Ну и в локалсторидже, но туда он попадает с сервера.
Товарищ автор, я сделал дипломный проект и улучшаю его. Верно ли понимаю, что если вдруг случится атака ботов, то с меня могут списать круглую сумму? И сколько там вообще платить надо в случае превышения лимитов?
Отличное объяснение, спасибо большое)
Как же всё ясно и четко))
this никогда не был контекстом вызова в JS и никогда не будет. Прочитайте хотябы раз официальную спецификацию.
А що ж це таке, може трохи розкриєте цю тему?
@@boringfrontend9037 Якщо українською, то ось тут ua-cam.com/video/T3fb_VKdZJA/v-deo.html розповідається про this згідно офиційної специфікації. Якщо стисло, -то this - це звичайний ідентифікатор який пов'язується зі значенням суто відповідно тому як викликається Normal Function. Треба зрозуміти одну річ - не мало би ніякого значення, як Ви називаєте this, якщо б Ви не використовували термін (контекст) який має своє особливе значення щодо офіційної специфікації ECMA. Тобто термін Execution Contexts або просто контекст, згідно розділу 9.1 не має ніякого відношення до this. Тому спроби називати this саме так, це вводити в оману початківця, який можливо вивчить колись JS саме так, як про нього розповідає ECMA. Нагадаю, що кожний агент, або RunTime який виконує JavaScript робить це згідно того, що каже саме ECMA - як єдине джерело офіційної інформації з JS з 1996 року.
Дякую! Контент топ
Наконец-то я поняла! Спасибо Вам огромное.. ❤
Мое уважение!
лучшее объяснение webpack
спасибо за разьяснения! очень классно
Отличный урок для начинающих.
сегодня впервые вижу ваши видео. я как понимаю перестали делать контент и очень жаль. на мой взгляд могли бы неплохо развиться в этом плане!!! спасибо за полезный туториал
Ну після 24/02 якось немає бажання і трохи заклопотаний війною
Спасибо, доступно объяснил. Я определился с тем что мне больше подходит.
И что же выбрал?
@@anigoforever3872 GitHub
3:13 Как говорится, всё что может быть перехвачено, будет перехвачено)
Брехня. ГітХаб має підтримку СІ/CD.
Цьому відео вже 2+ роки, на той момент ці фічі були щє в розробці/не стабільні
Спасибо огромное, смог решить задачу над которой мучался пару дней
Спасибо, мне помогло немного понять. По сути, очень похоже на pip в питоне, а node modules на env ;)
Дякую за відео)
Не могу понять , ему нужно достать products.price, а он достает product.price, и все работает
один Продукт из Продуктов попадает в редьюс. Местод этот как цикл работает, бежит по элементам Продуктов и накаждой итерации выполняет свою колбекфункцию. Можно было назвать другим словом элемент item и біло бы item.title or item.price. На одной итерации попадает об'ект из масива, его превдоним єто второй параметр Редьюса.
@@OlgaLazarenko получаеться он бежит по каждому обьекту массива продуктс, и акк сначала 0, потом мне непонятно как он именно выбирает product.price, тоесть price он берет из за того что он у нас есть в обьекте, а product, подразумиваеться как обьект в массиве products?
@@OlgaLazarenko ааа, тоесть если у нас массив обьектов,можно указать еще и в скобках редьюса product, как свойство обьекта в массиве products?