Универсальный СТАРТОВЫЙ ШАБЛОН для твоих пэт-проектов с JS, SASS и Vite [2023]

[@timurbirgalin4704]

Редко можно встретить такой качественный контент на "молодых" каналах, так что я очень рад, что ютуб предложил мне данное видео) Удачи автору, у вас отлично получается и вы действительно умеете увлечь)

[@oxeth8190]

Вау 😍 как же легко и просто вы объяснили. Браво 👏🏻. Я учу JS 2 месяца и два месяца мне все не понятно, а тут с первой минуты! Жду еще роликов

[@S___arfik]

Ошибка за ошибкой вылазит, круто

[@kl1ko_beats]

Спасибо, постоянно сложно вкатиться в технологии, но здесь я узнал много чего и сразу понял, где всё эти знания применить)

[@ДімаМаксимюк-в9л]

Тебя очень приятно слушать. Надеюсь будет больше урокор по JS))

[@shoraev]

ИИИИИИИИИууууууууу обожаю твой видосы всегда полезны и поднимают настроения вперед 🔥🔥🔥🔥🔥

[@KachinVictor]

Рад увидеть русскоязычный ролик на эту тему. Спасибо!

[@ИгорьГлазков-с1б]

Спасибо Арсений за Ваш труд. Великолепно всё объяснили.

[@A_A_A182]

Спасибо за видео по Vite, уже несколько раз слышал положительные отзывы о нем, в отличии от CRA, которым я, как новичок, пользуюсь

[@pomazkovjs]

Да, отличный инструмент, надо осваивать)

[@ТОЛЬКОПОБЕЗДОРОЖЬЮ]

Парень спасибо тебе, ты отлично обьясняешь, продолжай вести канал, и рассказывай нам обо всем, будем рады тебя послушать, с меня подписка и миллион лайков❤

[@ТОЛЬКОПОБЕЗДОРОЖЬЮ]

Я front-end разработчик, junior, так сказать двоечник, но с твоими уроками буду отличником))))), спасибо ещё раз

[@nafisgarifullin7199]

Все очень понятно и без воды. Спасибо за информацию

[@ImpeRiaLGoD]

Батя, лучший, просто молодец, спасибо за сборку!!!!

[@vadim_romanov]

Спасибо, Vite действительно быстрее многих аналогов, если не самый быстрый))

[@theoty-js]

Какой замечательный человек

[@МихаилСабуров-ы1в]

Продолжай, не останавливайся. Информация заходит легко

[@Happyendrew]

Благодарю! Просто и лаконично. Лайк, подписка)

[@станиславщейников]

Комментарий в поддержку видео и канала. Спасибо за работу 🌷

[@НиколайКасьянов-э9ъ]

просто пишу чтобы продвинуть это замечательно видео )))

[@empty.1807]

Хорош, реально полезный видос. Спасибо тебе)

[@keys_wow]

Быстро, понятно, по делу. Спасибо!

[@pinguinRu]

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

[@antongulyuk6216]

Отличный контент! Жду больше

[@crazybelkabro]

забагался терминал gitbash при создании, разбагался, половину файлов нет, зашел на хост - вроде все ок, подумал надо просто пересобрать еще раз, пытаюсь удалить папку - не удаляется, спасибо Джон Витас за сборку, буду использовать ps: со второго раза все нормально создалось и нашел как отключить, вита это реально удобно, спасибо)

[@pomazkovjs]

Дебаггинг - важнейший скил разработчика) Круто, что получилось справиться с проблемой 🙌🏼

[@young.urt_s_kusochkami]

спасибо большое, действительно удобно как для начинающих)

[@alinadostoevskaya5107]

спасибо большое за видео! очень качественный, приятный, интересный и актуальный контент

[@pomazkovjs]

У меня вечерняя медитация под названием "отвечаю на комментарии на ютубе". Спасибо за обратную связь, ещё и такую позитивную) Мотивирует стараться дальше

[@EvgeniyYatsenko]

отлично все разложено!

[@trustambassador]

Спасибо большое за видео, супер👍

[@prgJkeee]

Я человек простой - вижу Арсения, ставлю лайк!

[@MrTopolevsky]

просто и понятно! Спасибо!

[@Silvestr_Stalonivich]

спасибо за видео, отличная подача! подписка однозначно!

[@МаксимМаксим-р2ф]

Огромное спасибо!

[@user-rashid-mamyrov]

Маладец 👍

[@tuberman0319]

наконец-то видос, ура

[@МаксимСотников-ю9у]

Спасибо за видео, блыло очень интересно узнать про Vite

[@pungushe]

Круто спасибо. Продолжай в том же духе

[@nikolay4362]

кросаучег, бро, спасибо от бэкенд разраба

[@spacecow6oy622]

в поддердку канала

[@ПавелПанин-э6ч]

Красавчик! Не теряйся и е останавливайся ) Желаю успехов )

[@ig89]

Ты крутой дружище

[@neulovimue_to8651]

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

[@pomazkovjs]

Ни в коем случае! Я в деле)

[@user-frond-end_dev]

красавчик, все четко рассказал

[@MurodilIbroximov-pq1wl]

Отлично

[@MrTopolevsky]

Спасибо!

[@ilyashokhov]

Этой лучший туториал

[@paulk2190]

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.

[@pomazkovjs]

👀

[@katiek.3563]

Спасибо! Очень полезное видео!!

[@Melonguy_132]

Интересно было бы посмотреть создание приложения на js/reactJs, только не замыленный todo а что то креативней) благодарю за урок

[@sultankeneev8093]

Спасибо, очень полезный контент

[@СергейТимофеев-и9д]

Спасибо, подача кайф!

[@EvgenEvgenich-m4y]

красавчик

[@LAMit]

Интересный ролик!

[@АитмухаметХожакельдиев]

Круть!

[@Твоякомпьютернаяпомощь]

Прикольный шаблон получился, лайк)

[@hehe_boiii]

Спасибо!

[@user-vr4uv2kg6b]

Хороший урок. Был бы рад увидеть курс по созданию интернет магазина.

[@pomazkovjs]

Мой интенсив по JS: pomazkovjs-hangman.ru/ Больше крутого контента: 🚀 Telegram - t.me/pomazkovjs 👀 Instagram - instagram.com/pomazkov.js

[@igormajrov8444]

Для новичков норм шаблончик.

[@АнтонСурыгин-ф9ж]

Спасибо за видео! То что нужно, но не понял несколько вещей. 1. Можно ли самому указывать пути для компиляции файлов? 2. Если есть главный файл, допустим main.sass и через него все импорты прокидывать, то нужно ли прокидывать импорт с переменными в другие файлы? 3. И есть ли импорты для HTML? Если что ранее я не работал со сборщиками, данная тема для в новинку, но крайне актуальна. Спасибо =)

[@Sentryhonnor]

можно такое же видео но только с React, и то с использованием JS? :)

[@DevScriber]

Хорошее видео получилось. Но к сожалению ответа на свой вопрос не нашел. Я сделал сборку для react + typescript. Импортировал scss. Все хорошо получилось. Но выдает предупреждение о том что не получилось установить шрифты. А шрифты я привык хранить локально. Вроде все правильно связал, но они не подключаются. Отдельное спасибо за reset.css. у меня он тоже локальный был. Теперь буду использовать ваш, так как вероятнее всего он обновляется и не устаревает

[@ЕленаТарасова-т2я1з]

spasibo

[@ЮраМитрофанов-к4я]

Привет, что если для WP? С обновлением страниц при добавлении каких-то стилей или JS? и еще Dart-sass?

[@Bondik_]

Здравствуйте, у меня не получается корреткно подключить saas к vue.js на vite. Не могли бы вы снять видео по этой теме или хотя бы обьяснить что к чему?

[@eugeneskrypnyk7396]

Арсений как считаете важно ли знать ООП при изучении react? Лучше изучить ООП, прочесть книгу или пройти какой то курс Либо можно отложить ООП и изучить базовые знания react для первой работы?😢

[@pomazkovjs]

ООП однозначно можно отложить. Есть очень важные, но простые принципы - DRY и KISS, почитайте про них и старайтесь не забывать. Но и то, их можно использовать уже тогда, когда есть определенный опыт и понимание, а на этапе обучения стоит сконцентрироваться на понимании того, как работает технология и какие с ней есть лучшие практики

[@eugeneskrypnyk7396]

@@pomazkovjs спасибо вам большое 🫶🏻

[@AntonioBenderas]

11:39 как кастомизировать нормалайз, установленный с помощью npm?

[@Ekaterinn]

Подскажите, пожалуйста, для чего в файле index.html остался div с id app?

[@juliaukasiewicz3095]

thank you very helpful

[@cy66a]

Спасибо за видео. Но всё равно не понятны преимущества Vite перед Gulp или Webpack. Чем Vite лучше?

[@kiralatysheva6794]

Gulp vs vite интересно поммотреть

[@Soap9613]

vite быстрее, с коробки имеет больше возможностей vite сделан в основном для фреймворков react, vue для обычной верстки подойдёт и gulp

[@Soap9613]

а может ещё видео по настройке vite в стиле "настройка gulp сборки"

[@etobaton]

Добрый день! Благодарю за такой качественный контент! Ответьте, пожалуйста, на один вопрос: есть ли под капотом в vite js минификация изображений, генерация webp и подключение на основе возможности поддержания браузером?

[@vagoalex13]

Что лучше, gulp или vite?

[@Leysan25]

Видео очень полезное! Только как быть, если сайт многостраничный, как всё организовать? Постаралась сделать на основе этого видео, не работает(

[@pomazkovjs]

Спасибо, рад слышать!) У меня в инстаграме как раз есть пост с инструкцией на этот случай: instagram.com/p/Ctl4CbdIhC0/?igsh=Z2F1c2I0Yzc0cmR0

[@net7318]

Спасибо! Шаблон подходит для одной страницы. А если нужно много страниц? При нажатии на npm run build в папку dist формируется одна index.html Успехов в развитии канала!

[@pomazkovjs]

Спасибо за классный вопрос! Он вдохновил меня написать короткий гайд по тому, как это сделать - опубликовал его у себя в инстаграме pomazkov.js )

[@yuritian8830]

@@pomazkovjsГдээээ???👁👀💁‍♂🤷‍♂👨‍🦯🎈🪕🗾👁‍🗨

[@Бегущаярысью]

good

[@jenyaspace]

Подскажите а куда тогда закачивать картинки иконки и тп

[@YulVilaya]

уютная кухня

[@jenyaspace]

Но как делать простую верстку на нем без js

[@AntonioBenderas]

Как у него с плагинами? Сжатие файлов, картинок например.

[@madarasan0]

А почему вы не использовали gulp или webpack это самые популярные сборщики, многие говорят, что другие просто не признают, плиз сделайте по ним тоже видео для новичков

[@WERWOLION]

gulp + webpack начинают тормозить безбожно если у тебя больше 5 страниц в приложении vite быстрее но эта сборка никуда не годится . совсем т.к ю у тебя нету нормально гайда по настройке путей vite использует абсолютные пути и кидает всё в одну корзину в итоге к примеру у тебя на сайте 200 картинок котрые разбиты по пакамм и vite кинет их в одну карзину автор очевидно знает все эти темы но видос чисто для хайпа, на вопросы он не отвечает т.к не может. Кое как сделал простой билд и выбросил , толку от этого билда 0. Чисто можно JS компилировать. По работе же vite очевидно что gulp + webpack абсолютно устарели , однако концепция vite полный провал из -за описанного выше. дока vite шлак т.к настройки вообще не описано и нет примеров как даже пути настроить и по итогу нужно додумывать методом тыка. у иностранцев тоже гайдов почти нет. Очевидно все сталкиваются с одной и тойже проблемой путей и просто забивают - как итог Vite мёртв , а мог бы быть удобной машиной разработки ....

[@СаидМуталибов-г5г]

установил slick slider через npm как его подключить к проекту куда пути прописывать? подскажи плиз

[@bjol_Dg]

круто, интересно, английский срочно подтянуть ) вместо Normalize не лучше ли просто создать файл reset.css и там обнулить стили, вместо того, чтобы проект загружать установкой ненужных пакетов (которые потом удаляешь) ???

[@pomazkovjs]

Нормалайз и ресет - совсем не одно и то же) Первое гораздо тоньше, оно отменяет или изменяет лишь некоторые свойства. Был ещё один комментарий под этим видео, где я подробно отвечал на подобный вопрос)

[@holovkevych]

для привязки проекта к гитхабу нужно создать репозиторий, клонировать его локально и туда перекинуть содержимое нового проекта?

[@pomazkovjs]

Да, всё верно)

[@xamreg4184]

День добрый, вопрос будет из рубрики дурацких, но заxем пbсать на чистом JS. Ведь уже сейчас с ростом кол-во библиотек и фреймворков. такая потребность отпадает. Если только не придется поддерживать какой-то легаси проект, это не предъява, просто хочется знать всю подноготную, буду рад ответу. спасибо за уроки.

[@pomazkovjs]

Добрый день! Вопрос отличный) JS - это база. Невозможно сразу начать писать на React/Vue/Angular - всё это уже производные. Сперва ты изучаешь чистый JS, пробуешь работать с ним, делаешь пэт-проекты, разбираешься и только потом начинаешь переходить на библиотеки и фреймворки)

[@xamreg4184]

@@pomazkovjs спасибо

[@WERWOLION]

Потому что чистый JS современный позволяет писать без библиотек небольшие проекты совсем. Так куча простых решений и оч удобно...

[@xamreg4184]

@@WERWOLION не совсем согласен, в реальном продакшене сейчас уже ни кто не пишет на чистом js. Если нужно прям вообще маленький проект, то берут Vue. Я просто думал вдруг ещё есть приколы с js, скорей всего и автор выше отвечал, что js это просто база, знания её это наше все. Ведь даже при трудо устройстве, будут гонять по js. Ведь если ты знаешь все возможности этого языка, то сможешь осилить любую библиотеку.

[@WERWOLION]

​@@xamreg4184 то про что вы говорите это проекты агенств , зачем сайту с минимальным JS цеплять Vue? Раньше все юзали jQuery? сейчас это мовитон и всё можно на изи писать на JS. Там где нет ООП всё можно сделать на ваниле

[@andreyandreevich6857]

а почему вы css файлы в js подключали а не в html

[@prgJkeee]

Про SASS/SCSS интересно было бы подробнее узнать! Помню пытался через «Prepos» настроить его, но что-то не вышло, в итоге пока больше руки до него не доходили... К тому же слышал, от одних, что полезная и важная штука, а от других, что, засоряет код)

[@pomazkovjs]

Однозначно полезная, сейчас добрая половина проектов пишется на нём, чистый CSS никто не использует. Препрос - неплохое решение, но настроить свой сборщик типа Vite JS - гораздо проще и надежнее) Проект становится независимым от стороннего ПО, а значит и дальнейшая поддержка упрощается

[@prgJkeee]

@@pomazkovjs Понял, спасибо! Возможно Prepros уже морально устарел, видео о нём по сути уже старые, всё же в программировании время летит быстро)

[@АндрійФедоров-ж8ь]

А чем этот Вит отличается от препроца или вебпака

[@ArturRdix-bb9cs]

❌ Нод модулс ✅ Нод моджелс

[@LeraGo-t3z]

Привет! Подскажите, пожалуйста, почему даже с установленными плагинами scss и sass, vscode не видит файлы .scss?

[@pomazkovjs]

Может, Вы забыли их импортировать в JS файле? Попробуйте сделать ещё раз то, что показано в видео, про подключение и тестирование файла scss

[@karinalubenskaya6950]

Когда ввожу npm i или же npm install высвечивается много ошибок, как это исправить? Проблема наверное в package.json

[@pomazkovjs]

Такое бывает в нескольких случаях. 1 - на проекте есть устаревшие зависимости с уязвимостями. Здесь не он, я проверил у себя, ни единой ошибки. 2 - устаревшие node и npm локально. Какую версию выдают команды node -v и npm -v? Если нода меньше 18.16, то лучше обновитесь, это самая свежая стабильная версия

[@ДенисЕрохин-о6ы]

Когда курс?

[@pomazkovjs]

По каким технологиям нужен?

[@sartjhon3300]

ничего что все стили при таком подходе прописываются в head? )) на отипись сборка на уровне галпа

[@ИльяДмитриев-ч1з]

У меня же не одного постоянная оишбка? npm ERR! Missing script: "dev". С чего это связано? До этого другая была, но ее пофиксил уже

[@pomazkovjs]

1) Нужно проверить, что в package.json есть строка "dev": "vite" в блоке scripts 2) Проверить, что правильно пишешь саму команду в терминал npm run dev Если ничего из этого не поможет, заливай свой код на гитхаб и смело пиши в чатик в ТГ, там ребята друг другу помогают решать проблемы, иногда и я подключаюсь ТГ канал: t.me/pomazkovjs ТГ чат: t.me/+Hx6RaBT4Trw3ZjM6

[@ИльяДмитриев-ч1з]

@@pomazkovjs спаибо! попробую!!!

[@kapitankrolick]

после вебпака и галпа это выглядит очень просто

[@supernatural4145]

Я сайт с современным функционалом, задавайте вопросы

[@ilyashokhov]

Как же я поломался на путях при инициализации vue проекта

[@unknown-je4mm]

Эхб, новый видосик бы

[@pomazkovjs]

Из-за большого количества дел с документами и работы, к сожалению, процесс создания контента очень замедлился. Сам жалею и стараюсь хотя бы по чуть-чуть, но работать над новым материалом. Не буду обещать, но в скором времени надеюсь выпустить новый ролик 🙌🏼 P.S. Спасибо, что ждете 🙂

[@АлександрЧепрасов-с4й]

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

[@pomazkovjs]

Самый свежий пост в ТГ, в нём две ссылки - на видео и на гитхаб. Попробуйте ещё раз)

[@cro_codif]

не пишите в JS, все в серьезных компаниях давно пишут только на TS

[@alexcot77]

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

[@WERWOLION]

настройка vite никуда не годится все файлы грузит в одну корзину на выходе оф описание(дока) просто мрак на общупь, нужно 20 раз поменять конфиг чтобы понять логику т.е её отсутствие нужна нормальная сборка где есть многокрасочность где можно настроить сохранение путей при компиляции в итоговом проекте все файлы кидает в одну корзину == assets - картинки с JS файлами ,когда нужно сохранение папок в которых была картинка т.е. img/svg/00.svg все пути переписываются - зачем? нельзя сделать простое копирование картинок? в общем мрак, если у тебя 200 картинок то ты без никакой иерархии получишь папку в которой чёрт знает где что лежит когда сам vite нужен именно для больших проектор и для многостраничтности иначе какой смысл в его скорости веб пак лагает на большом объёме - но как у тебя может быть большой объём при 2 картинках? в итоге делать всё на gulp , а js компилировать на vite ну такое себе. Такое чуство что продкуция от эйпл - вроде хороша , а на практике 0. Чисто показуха

[@moto_venom]

Мне тоже не понравилось, что всё в одной куче. Я описал решение, как можно по человечески оформить структуру каталогов и файлов для папки dist и src. Найдите мой комментарий под этим видео.

[@hycode05]

body {margin: 0; padding: 0} и никакой нормалайз не нужен

[@pomazkovjs]

Это лишь самая верхушка айсберга, normalize делает куда больше всего полезного)