- Видео 6
- Просмотров 45 259
Rutina dev
Эстония
Добавлен 15 ноя 2021
Интенсивные краткие обучающие и информативные видео для твоего развития 🚀!
Подпишись на канал, чтобы не пропускать новые видео про новейшие технологии, обучалки про программированию и не только!
Подпишись на канал, чтобы не пропускать новые видео про новейшие технологии, обучалки про программированию и не только!
Как делать сайты? Путь Full Stack разработчика в 2023.
Какие технологии изучать и что делать дальше? Такими вопросами задаются новички. Сегодня мы рассмотрим как начать путь веб разработчика и как продолжить её.
00:00 - Интро
00:14 - С чего начать?
01:01 - Спасибо!
01:12 - Фронтенд или бэкэнд?
02:01 - Full Stack путь
03:26 - Метафреймворки
04:30 - Итоги и мораль басни
00:00 - Интро
00:14 - С чего начать?
01:01 - Спасибо!
01:12 - Фронтенд или бэкэнд?
02:01 - Full Stack путь
03:26 - Метафреймворки
04:30 - Итоги и мораль басни
Просмотров: 1 221
Видео
Как фильтровать и манипулировать массивами в Javascript? | Array Reduce
Просмотров 889Год назад
В этом видео мы рассмотрим как можно фильтровать и манипулировать с массивами из сложных объектов в Javascript/Typescript. Это можно сделать несколькими способами, но в этом видео мы поговорим о трёх из них: - Array.filter и Array.map - Array.reduce - for Тайм коды для видео: 00:00 - Представляем задачу 00:26 - Начало кодинга 01:02 - Filter и Map 03:10 - Что тут не так? 04:16 - Reduce 07:22 - П...
Замена Webpack ? ViteJS - Новая эра фронтенда!
Просмотров 6 тыс.2 года назад
Что такое Vite ? ViteJS это бандлер созданный Evan You, создатель VueJS, который гораздо быстрее того же Вебпака, Парсела и т.д.
Поисковой фильтр в реакт проекте? 🔍 | Как сделать живой поиск на Javascript
Просмотров 18 тыс.2 года назад
Cегодня мы изучим как сделать поисковой фильтр на реакт проекте, то есть живой поиск при вводе в инпутное поле. Ссылка на репозиторий: github.com/rajabdearly/react-live-search Ссылка на сайт с фейк листом: www.mockaroo.com/ Тематические ключевые слова для этого видео: react live search live search javascript живой поиск в javascript фильтр в javascript #живойпоиск #react #javascipt
НАСТРОЙ СВОЙ REACT ПРОЕКТ С ПОМОЩЬЮ WEBPACK | How to config webpack?
Просмотров 17 тыс.2 года назад
Вебпак - это сборщик модулей. Он анализирует модули приложения, создает граф зависимостей, затем собирает модули в правильном порядке в один бандл (bundle), на который может ссылаться файл «index.html». Ссылка на репозиторий: github.com/rajabdearly/react-with-webpack-template Сниппет: `npm install -D webpack webpack-cli webpack-dev-server @babel/core @babel/preset-env @babel/preset-react babel-...
Console log и не только! | Консоль в Javascript
Просмотров 2 тыс.2 года назад
Консоль это встроенный дебаггер браузера. Многие разработчики частенько используют console.log в дебаггинге что бы получше разобраться в коде или найти проблему в нем. Но эта штучка может гораздо больше чем мы себе представляем. Есть различные методы консоли как : console.table console.time console.group console.assert и еще ты можешь использовать css в console.log, ты этого раньше знал? Если в...
ноль воды классно
спасибо за сниппет
Потрясающе, впервые у меня сработало все без ошибок, а объяснение понятное и без воды. Спасибо, дружище!
слизал с fireship и кайф
Похвально
фигня. Поставь голос себе хотя бы
А что с голосом не так?)
@@rutinadev уставший наверное был. Или ещё что. Нет интонации и так далее...
Ты создан для того чтобы вести ютуб канал - приятный голос, коротко и по делу, офигенный монтаж! Кароче, не останавливайся, это точно твоë!
видос топ!!
досмотрел досюдова и поставил лайк)
Подскажите, пожалуйста, как мне записать имена классов без использования styles.class . Если записывать как обычно, ошибки нет, но свойства не применяются
топ, особенно humor. тебе бы увеличить темп рассказа (или в видеоредакторе ускорить) - просмотры думаю попрут
Спасибо большое!
зачем setTimeout ? можно без него же
Классный видос! Выпусти еще что-нибудь, хорошо объясняешь :) только немного отвлекал фон с летящими звездами
Бро отличная подача и тема! Желаю успех в развитии канала!!! Единственный фидбэк, речь медленная и монотонная) А всё остальное супер
Спасибо, большое!
спасибо отличный урок!
Спасибо за приятный коментарий!
Привет, Рутина. Я, как юный падаван, нуждаюсь в наставлении. Знаю Html,css,sass( на них уже нормально пишу сайты с лендингов), сейчас учу JS. Подскажи на счет того как к примеру себе сделать сайт или взять заказ на на фрилансе. Вот человеку к примеру нужно сделать сайт, а как его делать то без лендинга? Нужно искать дизайнера который тебе сделает макет и ты по нему сверстаешь сайт ? Или я не в ту степь смотрю и есть какие-то готовые решения для подобного?
Привет Ваня! Спасибо за коментарий. У меня нет большого опыта в фрилансе, но попытаюсь ответить на твой вопрос. Если ты уже умеешь делать фулл стак сайт, бэкэнд и фронтенд самостоятельно, то тебе надо или брать бесплатные готовые дизайны (пример Figma, там можно искать готовые бесплатные\платные макеты) или тебе как ты и говоришь нужен отдельный дизайнер который будет дизайн сайта для тебя. Проще начать с менее затратного первого варианта :) А если ты не знаешь как сделать фулл стак сайт самостоятельно, то скоро я выпущу новый ролик как сделать блог сайт с помощью React и NextJs, оставайся на связи ;)
норм контент, пили еще 👍🏻
в общем у кого в конце выскакивает ошибка, хотя всё сделали правильно - листайте до комментария Паши Доценко
Спасибо за коментарий! Или же можете приписать "set" к началу скрипта "NODE_ENV" если у вас винда стоит :)
Это что за канал находка анаконда🔥 Ждем туториалы!
Вах, что за коментарий от тигра!
Не работает hot reload. Постоянно надо перезагружать проект
Жду поддержку Angular :)
С Ангуларом такогого опыта нет, к сожалению, но хочу попробовать новые фреймворки как Свелт. Спасибо зк отзыв, друг!
Спасибо!!
Спасибо за комментарий, друг!
погромче звук и было бы супер
Спасибо за отзыв, исправлю в следующем видео)
Сделай видос про "побочнык квесты"
Есть в планах сделать лайв видео, где я делаю сайт с нуля с бэком и фронтом и заливаю в продакшн.
@@rutinadev мне кажется самый ценный канал на данный моменл это ulbi который делает подобняюые двух-трёх часовые видосы с целыми проектами. Если появится подобный канал, это будет великолепно. Так что ждём.
@@___avka___924 Спасибо за отзыв! Постараюсь.
Angular - Я для вас шутка какая-то?
Ахахаах, бедный старый Ангулар..
привет! из-за этих всех движух с войной, пришлось уехать из страны. Сейчас мало вреиени на изучение, но хоть по часику выделяю на react. После 2022, как я понял, лучше всего: это пилить свой рабочий проект и потом искать работу (всем показывая какой ты молодец) или кумавство😂
Свои проекты делать это очень важно. Продолжать и не останавливаться!
Ошибка в видео, присмотритесь к прикленному коментарию! ⬇
здорово, подскажи как сделать в VSC чтобы когда ты пишешь переменную например car1 у тебя сразу на этой строке consol.log работал?)
Спасибо за комментарий, дружок! Это расширение под названием Quokka.js 🙂
6:30 - ошибка не изза того что не задали аккумулятор
А из-за чего, можете подсказать?)
@@RogerDearly аккум - 1й айтем масива, если не задать
Окей, а из-за чего тогда там ошибка была?)
@@rutinadev потому что аккум - объект, а у него нету метода push, там же написана ошибка. Стоило сказать новичкам про аккум, если не задать
@@yuriikovalchuk564 верно сказано! Я закреплю этот коментарий чтобы другие тоже узнали. Спасибо за такой развернутый и понятный ответ.
Вообщем хорошо обьясняешь, только есть одна ошибка, почему в цикле cars.length-1 ? по последнему элементу, цикл не будет проходится, так как cars.length-1 равно 2, первая итерация і=0; 0<2, вторая итерация i=1; 1<2, третья итерация выполнятся не будет, так как i=2; 2<2.
Спасибо за отзыв, и да вы правы, там ошибка! Должно было быть i <= cars.length - 1. Буду повнимательнее)
@@rutinadev или i<cars.length, так меньше кода)
@@serhiikhotsyk869 именно!
Классное объяснение, спасибо) Подскажи название расширения для отображения значений в переменной без console.log, как в видео на 21 строке
Спасибо за комментарий. Это расширение называется Quokka.js 🙂
хорошо объяснил особенно reduce
Спасибо, за отзыв, друг❤️
Спасибо за краткий, но полезный обзор Vite
Спасибо, за приятный комментарий ❤️
Проверку на пустоту можно опустить вроде , пустая строка везде есть вроде, как в стейте
В dev режиме vite быстрее. В режимах watch и build, на реальных проектах он в разы медленнее чем webpack. Так что чуда и серебряной пули тут собственно нет. Так же vite очень узок в настройках.
Да, согласен. Вит намного быстрее в режиме dev. Но по поводу настройки, вит может расширяться с помощью плагинов на основе Rollup :)
Можете пожалуйста сделать поиск+ постраничную навигацию , ну типа если при поиске ответов много появлялись страницы 1 2 3 и.т.д
Спасибо за комментарий, ничего обещать не могу, но если будет спрос, то скорее сделаю :)
спасбио большое за ролик, а можешь пожалуйста более подробный видос сделать по вебпаку для реакта ? по всем плагинам которые действительно понадобятся в продакшен ? и где их смотреть ? спасибо
Спасибо за комментарий! В принципе в данном видео все плагины для продакшна показаны. Можно конечно добавить еще, но это зависит от проекта и меняется. Я бы посоветовал прочитать несколько статей в интернете на счет плагинов :)
@@rutinadev хорошо получилось, спасибо) а можно по вайт и турбопаку который в некст джс используется? спасибо
@@oleksiishkulipa1626 по вит если сделать такой ролик, он будет слижком коротким так как с коробки он основные вещи как css и js/ts преобразования он уже делает. По турбопаку так же. Но можно сделать информативное видео про Турбопак, как он работает и так далее, может быть выйдет интересное видео, спасибо за комментарий :)
@@rutinadev спасибо) но было бы хорошо все таки показать тем не менее, если короткие то можно было бы их тогда объеденить(вайт + турбопак)
не задушнил и рассказал по делу, всегда бы так) ++respect (:
Спасибо <3
Чувак, ты просто лучший!
Спасибо большое 🙂
А как написать поисковой фильтр при помощи CDN?
Я думаю CDN тут никак не поможет)
if ur OS is Windows - do not forget to add .env file to ur project n 'npm install cross-env' (import it to your server file) --> thats important. but if you have Linux or MacOS - thats fine, just add another loaders for your files CSS - and done it! So I gave u a LIKE, cause this video is really helpfull, thank u so much brother, wit love from London!!!
Thanks a lot for feedback and helping others in comment❤️
Не понимаю как запускать "npm run dev" не работает ("NODE_ENV" не является внутренней или внешней командой, исполняемой программой или пакетным файлом.) ааааааааааааааааааааааааааааааааааааа
Попробуй написать set перед NODE_ENV скорее всего ошибка из-за того, что вы используете Windows
круто
А как настроить, чтобы при запуске в режиме разработки в браузере открывалась вкладка с localhost ?
Ip 0.0.0.0 и является localhost, так что нет проблем по этому поводу)
"scripts": { "dev": "cross-env NODE_ENV=development webpack-dev-server --mode development --open", } в скрипте в конце добавляешь --open
То есть, для того, чтобы css работал, нужно всегда прописывать в коде реакта к тегам html .styles (тэг.styles)?
Отличный урок! Коротко и по делу. Спасибо🤝
ошибка запуска -"NODE_ENV не является внутренней или внешней командой" Что то ты нам не верно рассказал *Обновление: ошибка была связана с тем что я разработку веду на винде а автор не на винде. И потому такая разница. У него это рабочий код а на винде в script нужно добавлять префикс set или использовать пакет cross-env добавленный в dev зависимость package.json
Спасибо : )
А как настроить вебпак с "react-app-rewired"? там в скриптах используется react-app-rewired *Обновление: вопрос пока еще актуален
молодец, очень полезно