Универсальный СТАРТОВЫЙ ШАБЛОН для твоих пэт-проектов с JS, SASS и Vite [2023]
HTML-код
- Опубликовано: 8 июн 2024
- * ИНТЕНСИВ "ИГРА НА ЧИСТОМ JS": pomazkovjs-hangman.ru/
⭐ Поддержать донатом: boosty.to/pomazkovjs/single-p...
- Какие технологии выбрать для своего пет проекта?
- Как развернуть проект и заставить всё работать вместе?
- Какую структуру папок использовать?
Всё это вы узнаете, досмотрев ролик до конца. В нём я познакомлю Вас с Vite, помогу создать универсальный шаблон для проекта на JS с нуля и научу работать с этим шаблоном!
Приятного просмотра! 🔥
➡️ ГОТОВЫЙ ШАБЛОН можно найти тут:
t.me/pomazkovjs/89
➡️ ROADMAP с НУЛЯ до MIDDLE:
• Что должен знать JUNIO...
* ТАЙМ-КОДЫ:
00:00 Проблемы в работе над пэт-проектами
00:22 Решение проблем
01:06 Ссылка на готовый шаблон проекта
01:24 Установка Node JS
02:14 Создание проекта Vite JavaScript
04:16 Обзор файлов шаблона Vite JS
06:14 Что такое package.json и package-lock.json
07:09 Удаление ненужных файлов
07:24 Правильная структура проекта JavaScript
08:47 Как добавить SASS в Vite JS
10:55 Подключаем normalize.css
12:08 Завершаем работу над шаблоном
12:36 Как использовать готовый шаблон
* СОЦ. СЕТИ:
👀 Instagram - / pomazkov.js
🚀 Telegram - t.me/pomazkovjs
* ОБО МНЕ:
Меня зовут Арсений Помазков, я - senior frontend-разработчик, начавший карьеру на американской фрилансе-бирже и прошедший путь от «стажёра» до «старшего разработчика».
Я обучился программированию самостоятельно, и моя цель - показать вам, что веб-разработка - это не только перспективно и востребовано, но и очень увлекательно 🔥
#фронтенд #vite #петпроект #javascript
Редко можно встретить такой качественный контент на "молодых" каналах, так что я очень рад, что ютуб предложил мне данное видео) Удачи автору, у вас отлично получается и вы действительно умеете увлечь)
Тебя очень приятно слушать. Надеюсь будет больше урокор по JS))
Вау 😍 как же легко и просто вы объяснили. Браво 👏🏻. Я учу JS 2 месяца и два месяца мне все не понятно, а тут с первой минуты! Жду еще роликов
Мой интенсив по JS:
pomazkovjs-hangman.ru/
Больше крутого контента:
🚀 Telegram - t.me/pomazkovjs
👀 Instagram - instagram.com/pomazkov.js
Рад увидеть русскоязычный ролик на эту тему. Спасибо!
Комментарий в поддержку видео и канала. Спасибо за работу 🌷
Хорош, реально полезный видос.
Спасибо тебе)
Спасибо Арсений за Ваш труд. Великолепно всё объяснили.
Отличный контент! Жду больше
ИИИИИИИИИууууууууу обожаю твой видосы всегда полезны и поднимают настроения вперед 🔥🔥🔥🔥🔥
Спасибо! Очень полезное видео!!
спасибо большое, действительно удобно как для начинающих)
Красавчик!
Не теряйся и е останавливайся )
Желаю успехов )
Спасибо, подача кайф!
Круто спасибо. Продолжай в том же духе
спасибо за видео, отличная подача! подписка однозначно!
спасибо большое за видео! очень качественный, приятный, интересный и актуальный контент
У меня вечерняя медитация под названием "отвечаю на комментарии на ютубе". Спасибо за обратную связь, ещё и такую позитивную) Мотивирует стараться дальше
Все очень понятно и без воды. Спасибо за информацию
просто лучший . У меня есть такая штука как страх нового и это моя главная проблема. Я изучаю это направление и столько ошибок бля , я не могу. Твои видео помогаю мне проходить через эти трудности , спасибо. Уже не первый раз помогает.
Спасибо, постоянно сложно вкатиться в технологии, но здесь я узнал много чего и сразу понял, где всё эти знания применить)
просто пишу чтобы продвинуть это замечательно видео )))
Батя, лучший, просто молодец, спасибо за сборку!!!!
Продолжай, не останавливайся. Информация заходит легко
Интересный ролик!
Спасибо, очень полезный контент
наконец-то видос, ура
Огромное спасибо!
Быстро, понятно, по делу. Спасибо!
просто и понятно! Спасибо!
Парень спасибо тебе, ты отлично обьясняешь, продолжай вести канал, и рассказывай нам обо всем, будем рады тебя послушать, с меня подписка и миллион лайков❤
Я front-end разработчик, junior, так сказать двоечник, но с твоими уроками буду отличником))))), спасибо ещё раз
Маладец 👍
отлично все разложено!
Прикольный шаблон получился, лайк)
Спасибо большое за видео, супер👍
Я человек простой - вижу Арсения, ставлю лайк!
Спасибо за видео, блыло очень интересно узнать про Vite
Хороший урок. Был бы рад увидеть курс по созданию интернет магазина.
Спасибо!
Какой замечательный человек
Привет, Спасибо за активность, я уже растрился, думал что ты забросил видео на Ютубе, фура тебе лайков
Ни в коем случае! Я в деле)
Спасибо, Vite действительно быстрее многих аналогов, если не самый быстрый))
thank you very helpful
Интересно было бы посмотреть создание приложения на js/reactJs, только не замыленный todo а что то креативней) благодарю за урок
Отлично
Спасибо за видео по Vite, уже несколько раз слышал положительные отзывы о нем, в отличии от CRA, которым я, как новичок, пользуюсь
Да, отличный инструмент, надо осваивать)
Добрый день! Благодарю за такой качественный контент! Ответьте, пожалуйста, на один вопрос: есть ли под капотом в vite js минификация изображений, генерация webp и подключение на основе возможности поддержания браузером?
Ты крутой дружище
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
👀
в поддердку канала
установил slick slider через npm как его подключить к проекту куда пути прописывать? подскажи плиз
Как у него с плагинами? Сжатие файлов, картинок например.
Подскажите, пожалуйста, для чего в файле index.html остался div с id app?
Здравствуйте, у меня не получается корреткно подключить saas к vue.js на vite. Не могли бы вы снять видео по этой теме или хотя бы обьяснить что к чему?
Спасибо за видео! То что нужно, но не понял несколько вещей.
1. Можно ли самому указывать пути для компиляции файлов?
2. Если есть главный файл, допустим main.sass и через него все импорты прокидывать, то нужно ли прокидывать импорт с переменными в другие файлы?
3. И есть ли импорты для HTML?
Если что ранее я не работал со сборщиками, данная тема для в новинку, но крайне актуальна. Спасибо =)
забагался терминал gitbash при создании, разбагался, половину файлов нет, зашел на хост - вроде все ок, подумал надо просто пересобрать еще раз, пытаюсь удалить папку - не удаляется, спасибо Джон Витас за сборку, буду использовать
ps: со второго раза все нормально создалось и нашел как отключить, вита это реально удобно, спасибо)
Дебаггинг - важнейший скил разработчика) Круто, что получилось справиться с проблемой 🙌🏼
Лучше бы показал как настраивать полностью конфиг vite для многостраничников и не только, сортировка по папкам, раскидав js, css и img. Понятное дело что нужно использовать rollupOptions. Тем не менее этого ничего не было, а голый vite никому не нужен. Максимум для одностраничника, но уж точно не для проекта
Для новичков норм шаблончик.
можно такое же видео но только с React, и то с использованием JS?
:)
Арсений как считаете важно ли знать ООП при изучении react?
Лучше изучить ООП, прочесть книгу или пройти какой то курс
Либо можно отложить ООП и изучить базовые знания react для первой работы?😢
ООП однозначно можно отложить. Есть очень важные, но простые принципы - DRY и KISS, почитайте про них и старайтесь не забывать. Но и то, их можно использовать уже тогда, когда есть определенный опыт и понимание, а на этапе обучения стоит сконцентрироваться на понимании того, как работает технология и какие с ней есть лучшие практики
@@pomazkovjs спасибо вам большое 🫶🏻
11:39 как кастомизировать нормалайз, установленный с помощью npm?
good
Спасибо за видео. Но всё равно не понятны преимущества Vite перед Gulp или Webpack. Чем Vite лучше?
Gulp vs vite интересно поммотреть
vite быстрее, с коробки имеет больше возможностей
vite сделан в основном для фреймворков react, vue
для обычной верстки подойдёт и gulp
Что лучше, gulp или vite?
Хорошее видео получилось. Но к сожалению ответа на свой вопрос не нашел. Я сделал сборку для react + typescript. Импортировал scss. Все хорошо получилось. Но выдает предупреждение о том что не получилось установить шрифты. А шрифты я привык хранить локально. Вроде все правильно связал, но они не подключаются. Отдельное спасибо за reset.css. у меня он тоже локальный был. Теперь буду использовать ваш, так как вероятнее всего он обновляется и не устаревает
spasibo
для привязки проекта к гитхабу нужно создать репозиторий, клонировать его локально и туда перекинуть содержимое нового проекта?
Да, всё верно)
Видео очень полезное!
Только как быть, если сайт многостраничный, как всё организовать? Постаралась сделать на основе этого видео, не работает(
Спасибо, рад слышать!)
У меня в инстаграме как раз есть пост с инструкцией на этот случай: instagram.com/p/Ctl4CbdIhC0/?igsh=Z2F1c2I0Yzc0cmR0
Привет! Подскажите, пожалуйста, почему даже с установленными плагинами scss и sass, vscode не видит файлы .scss?
Может, Вы забыли их импортировать в JS файле? Попробуйте сделать ещё раз то, что показано в видео, про подключение и тестирование файла scss
а почему вы css файлы в js подключали а не в html
Спасибо!
Шаблон подходит для одной страницы. А если нужно много страниц? При нажатии на npm run build в папку dist формируется одна index.html
Успехов в развитии канала!
Спасибо за классный вопрос! Он вдохновил меня написать короткий гайд по тому, как это сделать - опубликовал его у себя в инстаграме pomazkov.js )
@@pomazkovjsГдээээ???👁👀💁♂🤷♂👨🦯🎈🪕🗾👁🗨
Когда ввожу npm i или же npm install высвечивается много ошибок, как это исправить? Проблема наверное в package.json
Такое бывает в нескольких случаях. 1 - на проекте есть устаревшие зависимости с уязвимостями. Здесь не он, я проверил у себя, ни единой ошибки. 2 - устаревшие node и npm локально. Какую версию выдают команды node -v и npm -v? Если нода меньше 18.16, то лучше обновитесь, это самая свежая стабильная версия
а может ещё видео по настройке vite в стиле "настройка gulp сборки"
А почему вы не использовали gulp или webpack это самые популярные сборщики, многие говорят, что другие просто не признают, плиз сделайте по ним тоже видео для новичков
gulp + webpack начинают тормозить безбожно если у тебя больше 5 страниц в приложении
vite быстрее но эта сборка никуда не годится . совсем т.к ю у тебя нету нормально гайда по настройке путей
vite использует абсолютные пути и кидает всё в одну корзину в итоге
к примеру у тебя на сайте 200 картинок котрые разбиты по пакамм и vite кинет их в одну карзину
автор очевидно знает все эти темы но видос чисто для хайпа, на вопросы он не отвечает т.к не может.
Кое как сделал простой билд и выбросил , толку от этого билда 0. Чисто можно JS компилировать.
По работе же vite очевидно что gulp + webpack абсолютно устарели , однако концепция vite полный провал из -за описанного выше.
дока vite шлак т.к настройки вообще не описано и нет примеров как даже пути настроить и по итогу нужно додумывать методом тыка.
у иностранцев тоже гайдов почти нет.
Очевидно все сталкиваются с одной и тойже проблемой путей и просто забивают - как итог Vite мёртв , а мог бы быть удобной машиной разработки ....
Про SASS/SCSS интересно было бы подробнее узнать! Помню пытался через «Prepos» настроить его, но что-то не вышло, в итоге пока больше руки до него не доходили... К тому же слышал, от одних, что полезная и важная штука, а от других, что, засоряет код)
Однозначно полезная, сейчас добрая половина проектов пишется на нём, чистый CSS никто не использует.
Препрос - неплохое решение, но настроить свой сборщик типа Vite JS - гораздо проще и надежнее)
Проект становится независимым от стороннего ПО, а значит и дальнейшая поддержка упрощается
@@pomazkovjs Понял, спасибо! Возможно Prepros уже морально устарел, видео о нём по сути уже старые, всё же в программировании время летит быстро)
А чем этот Вит отличается от препроца или вебпака
У меня же не одного постоянная оишбка? npm ERR! Missing script: "dev". С чего это связано? До этого другая была, но ее пофиксил уже
1) Нужно проверить, что в package.json есть строка "dev": "vite" в блоке scripts
2) Проверить, что правильно пишешь саму команду в терминал npm run dev
Если ничего из этого не поможет, заливай свой код на гитхаб и смело пиши в чатик в ТГ, там ребята друг другу помогают решать проблемы, иногда и я подключаюсь
ТГ канал: t.me/pomazkovjs
ТГ чат: t.me/+Hx6RaBT4Trw3ZjM6
@@pomazkovjs спаибо! попробую!!!
День добрый, вопрос будет из рубрики дурацких, но заxем пbсать на чистом JS. Ведь уже сейчас с ростом кол-во библиотек и фреймворков. такая потребность отпадает. Если только не придется поддерживать какой-то легаси проект, это не предъява, просто хочется знать всю подноготную, буду рад ответу.
спасибо за уроки.
Добрый день! Вопрос отличный)
JS - это база. Невозможно сразу начать писать на React/Vue/Angular - всё это уже производные. Сперва ты изучаешь чистый JS, пробуешь работать с ним, делаешь пэт-проекты, разбираешься и только потом начинаешь переходить на библиотеки и фреймворки)
@@pomazkovjs спасибо
Потому что чистый JS современный позволяет писать без библиотек небольшие проекты совсем.
Так куча простых решений и оч удобно...
@@WERWOLION не совсем согласен, в реальном продакшене сейчас уже ни кто не пишет на чистом js. Если нужно прям вообще маленький проект, то берут Vue. Я просто думал вдруг ещё есть приколы с js, скорей всего и автор выше отвечал, что js это просто база, знания её это наше все. Ведь даже при трудо устройстве, будут гонять по js. Ведь если ты знаешь все возможности этого языка, то сможешь осилить любую библиотеку.
@@xamreg4184 то про что вы говорите это проекты агенств , зачем сайту с минимальным JS цеплять Vue?
Раньше все юзали jQuery? сейчас это мовитон и всё можно на изи писать на JS.
Там где нет ООП всё можно сделать на ваниле
уютная кухня
круто, интересно, английский срочно подтянуть ) вместо Normalize не лучше ли просто создать файл reset.css и там обнулить стили, вместо того, чтобы проект загружать установкой ненужных пакетов (которые потом удаляешь) ???
Нормалайз и ресет - совсем не одно и то же)
Первое гораздо тоньше, оно отменяет или изменяет лишь некоторые свойства. Был ещё один комментарий под этим видео, где я подробно отвечал на подобный вопрос)
ничего что все стили при таком подходе прописываются в head? )) на отипись сборка на уровне галпа
Когда курс?
По каким технологиям нужен?
Я сайт с современным функционалом, задавайте вопросы
после вебпака и галпа это выглядит очень просто
Все ок, но с ходу так и не нашел шаблона. Я понимаю что желание переводить траф между социалками, но отбивает желание дальше уделять время автору когда 10 мин лестаешь в поиске того на что "дали ссылку".
Может я слепой, не знаю. Но шаблона я так и не увидел
Самый свежий пост в ТГ, в нём две ссылки - на видео и на гитхаб. Попробуйте ещё раз)
неужели автоматом нету установки всех этих стандартных папок по умолчанию без вот этого вот танца с бубном....
Эхб, новый видосик бы
Из-за большого количества дел с документами и работы, к сожалению, процесс создания контента очень замедлился. Сам жалею и стараюсь хотя бы по чуть-чуть, но работать над новым материалом. Не буду обещать, но в скором времени надеюсь выпустить новый ролик 🙌🏼
P.S. Спасибо, что ждете 🙂
настройка vite никуда не годится
все файлы грузит в одну корзину на выходе
оф описание(дока) просто мрак на общупь, нужно 20 раз поменять конфиг чтобы понять логику т.е её отсутствие
нужна нормальная сборка где есть многокрасочность
где можно настроить сохранение путей при компиляции
в итоговом проекте все файлы кидает в одну корзину == assets - картинки с JS файлами ,когда нужно сохранение папок в которых была картинка
т.е. img/svg/00.svg
все пути переписываются - зачем?
нельзя сделать простое копирование картинок?
в общем мрак, если у тебя 200 картинок то ты без никакой иерархии получишь папку в которой чёрт знает где что лежит
когда сам vite нужен именно для больших проектор и для многостраничтности иначе какой смысл в его скорости
веб пак лагает на большом объёме - но как у тебя может быть большой объём при 2 картинках?
в итоге делать всё на gulp , а js компилировать на vite ну такое себе.
Такое чуство что продкуция от эйпл - вроде хороша , а на практике 0. Чисто показуха
Мне тоже не понравилось, что всё в одной куче.
Я описал решение, как можно по человечески оформить структуру каталогов и файлов для папки dist и src.
Найдите мой комментарий под этим видео.
body {margin: 0; padding: 0} и никакой нормалайз не нужен
Это лишь самая верхушка айсберга, normalize делает куда больше всего полезного)
Тот самый индус на русском 😁
Спасибо!