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

[@itoriou13]

Спасибо огромное !! Совершенно случайно попал на канал и нисколько не пожалел . За 13 минут узнал больше , чем за месяц изучения react в колледже !

[@timurbirgalin4704]

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

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

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

[@oxeth8190]

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

[@kl1ko_beats]

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

[@KachinVictor]

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

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

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

[@S___arfik]

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

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

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

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

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

[@A_A_A182]

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

[@pomazkovjs]

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

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

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

[@prgJkeee]

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

[@shoraev]

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

[@nafisgarifullin7199]

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

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

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

[@ImpeRiaLGoD]

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

[@alinadostoevskaya5107]

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

[@pomazkovjs]

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

[@empty.1807]

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

[@vadim_romanov]

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

[@Happyendrew]

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

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

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

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

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

[@antongulyuk6216]

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

[@young.urt_s_kusochkami]

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

[@neulovimue_to8651]

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

[@pomazkovjs]

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

[@keys_wow]

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

[@nikolay4362]

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

[@Melonguy_132]

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

[@theoty-js]

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

[@jester474]

Спасибо полезное видео 👍🏻

[@pinguinRu]

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

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

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

[@pungushe]

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

[@Silvestr_Stalonivich]

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

[@trustambassador]

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

[@EvgeniyYatsenko]

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

[@user-frond-end_dev]

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

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

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

[@AntonioBenderas]

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

[@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]

👀

[@m.h-l5h]

Спасибо, я всё понял :)

[@MrTopolevsky]

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

[@user-vr4uv2kg6b]

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

[@ilyashokhov]

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

[@tuberman0319]

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

[@katiek.3563]

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

[@crazybelkabro]

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

[@pomazkovjs]

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

[@sultankeneev8093]

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

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

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

[@ig89]

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

[@LAMit]

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

[@Yurii_Mitrofanov]

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

[@cy66a]

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

[@kiralatysheva6794]

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

[@Soap9613]

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

[@Ekaterinn]

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

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

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

[@eugeneskrypnyk7396]

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

[@pomazkovjs]

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

[@eugeneskrypnyk7396]

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

[@Bondik_]

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

[@spacecow6oy622]

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

[@jenyaspace]

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

[@etobaton]

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

[@Sentryhonnor]

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

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

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

[@MrTopolevsky]

Спасибо!

[@jenyaspace]

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

[@user-rashid-mamyrov]

Маладец 👍

[@ИльяДмитриев-ч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 спаибо! попробую!!!

[@igormajrov8444]

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

[@AntonioBenderas]

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

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

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

[@karinalubenskaya6950]

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

[@pomazkovjs]

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

[@pomazkovjs]

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

[@LeraGo-t3z]

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

[@pomazkovjs]

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

[@MurodilIbroximov-pq1wl]

Отлично

[@hehe_boiii]

Спасибо!

[@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. Там где нет ООП всё можно сделать на ваниле

[@Leysan25]

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

[@pomazkovjs]

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

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

Круть!

[@EvgenEvgenich-m4y]

красавчик

[@andreyandreevich6857]

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

[@schneegestober7232]

четко

[@vagoalex13]

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

[@holovkevych]

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

[@pomazkovjs]

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

[@DevScriber]

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

[@madarasan0]

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

[@WERWOLION]

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

[@juliaukasiewicz3095]

thank you very helpful

[@net7318]

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

[@pomazkovjs]

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

[@yuritian8830]

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

[@Soap9613]

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

[@WERWOLION]

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

[@moto_venom]

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

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

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

[@pomazkovjs]

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

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

spasibo

[@bjol_Dg]

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

[@pomazkovjs]

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

[@prgJkeee]

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

[@pomazkovjs]

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

[@prgJkeee]

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

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

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

[@YulVilaya]

уютная кухня

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

Когда курс?

[@pomazkovjs]

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

[@ArturRdix-bb9cs]

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

[@sartjhon3300]

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

[@alexcot77]

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

[@ilyashokhov]

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

[@kapitankrolick]

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

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

good