Welcome to my RU-vid channel! I am a front-end developer with two years of experience in technologies like HTML, CSS, React, Next.js, Nest.js, and Node.js, as well as other modern web technologies. Here, you'll find high-quality reviews, engaging tutorials, and valuable tips to help you create modern web applications and websites.
My channel provides in-depth knowledge and practical skills in web development. I also explore the latest trends and innovations in the field. If you want to enhance your skills and stay up to date with the latest technological advancements, my channel is your reliable source of information. Join us and start your web development journey with us!
Не понятно зачем php фреймворку "понадобился" свой css фреймворк? И когда примеры документации и пр. пестрят словами, содержащими имя Taylor, это уже напоминает секту
Чел, серьезно? Ты что то про SEO сказал? 5:23, то, что генерится в JS??? Тебя не смутило, что проект на React и в HTML так и так ничего не будет (для робота). Про картинку согласен (самое начало), но ты смотришь ее размер через стили, да и в адаптивах... Хотя бы в десктопе глянул тогда уж. Чет у тебя у самого какие то проблемы
@@KirillKirill-i5w он все по факту написал, хоть и немного непонятно. Т.к. сайт написан с помощью фреймворка, а не HTML кода, то в результате сайт имеет вид обфусцированного кода, что для SEO просто непонятная белиберда. И только когда мы заходим на сайт для нас этот код превращается в нужные блоки. У роботов такого функционала нет. Они исключительно берут ответы от сервера и все. JS для роботов недоступен.
понятно... я думала будет рили что-то адекватное. Тайлвинд это не про семмантический html (хочешь делай семмантику) и он не про обёртки. Не оборачивай если не хочешь. Видео - глупейшее.
10 лет во фронте, большую часть своей карьеры занимался только версткой, сейчас перевес в сторону реального кодинга. По началу тоже отнекивался и плевался от tailwind, меня как человека которые прошел через все боли верстки, крайне возмущало что никто не обращает внимание на загроможденность разметки от всех этих классов tailwind, но.... потом приходит понимание что это собственно один единственный минус и то который решается с помощью @apply. А по факту код и без @apply легко читается, если делить все на компоненты. Что мы получаем от использования tailwind? 1. Как минимум экономию времени, на придумывание названия css класов; (Пишим css в одном месте с разметкой, это реально круто и удобно!) 2. Максимально уменьшенный вес итогового css файла; (Объективно это важно, вместо 500 кб css мы получаем 50кб, это как пример) Какие минусы? 1. Заграможденность в коде, проблема решается, если делить html на компоненты, а в реальной разработке это именно так и происходит. А если мало, то можно использовать @apply. 2. Читаемость кода. Хорошую разметку можно прочитать и понять что делает код, с tailwind так не получится, без @apply. Но по факту, как часто это вообще нужно в реальных проектах? Задайте себе этот вопрос. Как итог, я могу сказать что плюсы использования намного перевешивают. ИМХО.
Крч, решён вопрос - китайцы спионэрили у разрабов фигмы, угадайте что..?))))) Правильно - китайцы серьёзные люди и по карманам не шарят - фигму и спиндили, при чём всю под ноль)))) Pixso называется, там есть дев мод и вполне достойный импорт .fig файлов. Немного напрягает, что надо чуть понимать в автолейаутах - не хватает оно их при импорте, но в целом - работает и в режиме инспект и дев моде, прям как фигма.
А в чём они молодцы? То есть - это на 90% инструмент дизайнера, но платить должны программисты, я тебя не сильно понял тут - пусть дизайнерам делают такое или как получается, дизайнер зарабатывает на фри туле, а программист должен заплатить за это, чтоб его креативный бред сверстать??!!! Тем более, что в нормальном проекте надо вёрстку делать быстро ибо ещё есть всякие реакты, редаксы и другие джиесы... Теперь мы или платить должны или тратить на эту CSS дичь уйму своего времени. Странно слышать такое от разработчика... ИМХО, я б себе лишний ВДС за эти деньги взял или ещё что-то полезное, а не это говно, которым я пользуюсь 10% от всего времени на проект.
Чел, методологии не особо нужны, когда есть модули, так как весь твой бэм идет по болту, ведь тебе хочется читаемость, а отдельные файлы - намного лучше, чем один какой-то файл на несколько тысяч строк кода.
автор использует scss, который позволяет также разделять "модули", не делая их на 1000чи строк, чем хзш хвосты модульного ксс упрощают дебагинг? А и как усугубляет читаемость адекватное наименование класса, вот у нас карточка товара, вот картинка карточки товаров?
Каждый проход имеет свои плюсы и минусы. Тайльатнд критиковать можно , особенно за его безобразие с гридами и тому подобное. Но он хорошо подходит для проектов среднего размера и если ты грамотно сделал конфигурацию тайльвинда ( ui kit грубо говоря ) и декомпозируешь
Ну, я вот успел с фри модом сделать градиенты, у меня сейчас дикий макет от криворукого диза, как получить угол градиента, к примеру, без дев мода...? ИМХО - не буду, просто, принимать в работу такие макеты - велкам бек Фотошоп.
Чет теперь выключенный дев мод нифига не показывает отступы между элементами, они же паддинги. А так же, если шрфит не стандартный, то так же не показывает его семейство. Кастрировали продукт до безобразия. Реально, бесплатная версия чисто макет посмотреть. 😅
@@oshurek-dev Да, через альт показывает отступы, немного криво правда, поскольку появляется второй курсор под основным и он немного смещен в сторону. Но ладно, функционал оставили. А вот как быть со шрифтом и где посмотреть его принадлежность к семейству, или тоже нужно что-то нажать?
нужен контекст, это впервую очередь фреймворк. Нужен он или нет в каком то конкретном проекте вопрос, есть как плюсы так и минусы. Лично я предпочитал долгое время в личных проэектах обходиться без подобных интсрументов. Но довелось какое то время назад поработать с tailwind и mui и могу точно сказать, что эти штуки популярны не просто так и в общем я больше склоняюсь к тому, что буду использовать теперь и в личных проэектах. Если потратить какое то время на освоение очень сильно убыстряет написание многих вещей. А что до разметки html в примерах, да пофиг вообще. Tailwind это про CSS, какую разметку хочешь такую и пиши Если я не ошибаюсь tailwind реализован так, что в итоговый бандл, если мы говорим про разработку в каком то JS фреймворке, он потянет только те классы которые использовались в отличии от бутстрап или mui, что тоже плюс.
В общем жить без него можно, но просто с ним удобнее и быстрее, и особенно это касается теней. Если ты верстаешь из макета то эта штука нужна. А ещё есть расширение для VS Code которое позволяло открывать макет прямо в VS Code и это очень удобно и вот про него тоже говорят, что он станет не доступен. Тут самое обидное, что не новое добавили платно, а бесплатную фичу отобрали и сделали платно.
Всю жизнь её без dev мода использовал, вот уже 5 лет в профессии - только узнал про это. Конечно, гораздо удобнее выглядит, но как-то без этого жил и вполне себе справлялся)
Автор без обид. Но критиковать не попробовав - моветон. Я согласен, что семантика не соблюдена. Но вы сильно ошибаетесь в возможностях тайлвинда. Большинство сокращений понятны flex justify-content item-center - не знакомо? w-10 / wheigt: mt - даже используя emmet для вёртски будет понятно, что margin top. Для повторяющихся элементов есть директива @Applay. Я скажу с точки зрения бэкендера. Согласен, инлайновые стили долго были под запретом по ряду причин и выглядит это дико. Но честное слово, мне легче разобраться в стандартных css сокращениях, которые даёт tailwind, чем возиться с именами по БЭМу, искать 100500 файликов scss, если я хочу доделать компонент. Его преимущество в том, что он не добавляет ровным счётом своих готовых блоков, как это делает бутстрап. Мне не нужно идти в документацию, чтобы убедиться какая кнопка жёлтого цвета, а каким вариантом кинуть invalid-gorup на форму? Суть в том, что это удобный и простой способ верстать классическим вариантом, но в инлайне и всё. Единственное к чему не сразу привыкаешь, так это мыслить тем, что тайл - это про мобайл фёрст.
Да, согласен с тобой в целом. Тут дело привычки и вкуса. Но самы главный вопрос это - зачем оно нам? Ну и я думаю что вы поняли, что я по большей части рофлю) но мне лично тейл вообще не зашёл. Сильно засоряет разметку
@@oshurek-dev Мне засорение это не так мешает возможно как самому верстальщику. Поскольку что в laravel что в Yii2, Vue3 - везде шаблоны дробятся на темплейты собственные и на компоненты, которые повторяются. В одном инпуте с пропсами сколько там обёртки 3? Тоже самое и в темплейтах видишь флексы, гриды и гэпы, и w-2/3 - показывает, что блок занимается 2/3 для всей страницы. Т.е. объективно особо и смотреть не на что. Всматриваешься, если нужно пофиксить баги)
У тебя претензия была к повторению стилей, React и любой другой фреймворк эту проблему решает. Ты же так и не сделал по факту разбор самого фреймворка, ты просто обосрал разметку на сайте, вполне по фактам, но в чем прикол этого видео тогда?) @@oshurek-dev
2:50 - про компоненты ты похоже не слышал... тебе не нужно будет в нескольких местах менять в остальном да, вёрстка в примерах не по семантике немного, но это не отменяет того факта как круто работать с tailwind - вёрстка ускоряется в разы за счёт возможности взять любой шаблон и закинуть в проект адаптировав под себя. Я уж не говорю сколько крутых ui китов появилось на основе этой прекрасной библиотеки
Да, знаю что много всего появляется, и это круто! но вот приины для использования tailwind я так и не нашёл. в react.js обычно используем styled component или css modules. стараемся разносить ответственность по разным файлам. а не пихать всё в один .tsx файл
@@oshurek-dev styled components, кстати, несут в себе существенную для больших проектов дополнительную нагрузку в производительности. Они не имеют шага прекомиляции, а по сему делают всю свою "магию" когда приложение уже открывается пользователем. Пол года назад я мигрировал код базу с emotion (почти тоже самое, что и styled-components) и mui на обычный tailwind и получил довольно ощутимый прирост в производительности. Pro tip: если не нравится tailwind и нравятся styled-components, рекомендую попробовать panda css, который ИМЕЕТ шаг компиляции, в связи с чем имеет почти нулевой runtime cost.
@@oshurek-dev Не обязательно tailwind, если ты делаешь большой проект типо портала, где тебе надо просто сделать оболочку которая содержит множество повторений по дизайну, но возможности создать единый компонент нету, то да, лучше будет использовать tailwind Если ты создаешь какую-то бухгалтерию в которой например миллион отченостей, но все они единой формы, тогда можно обойтись и обычными молулями Все зависит от задач которые будет решать твоя АС, и какие у неё есть пути развития
Не согласен. Тайлвинд помогает в больших проектах, где у тебя есть набор отступов допустим, и ты их везде используешь. Так у тебя получается быстрее в разы писать, ты редко заходишь в css файл и вся верстка единообразная получается. Потом когда тебе по всему проекту надо сменить цвет кнопок или отступы. Просто заходишь в настройки и меняешь один параметр.
Да, в целом, я согласен с этим. Но это делается в CSS точно так же просто. А проблема переключиться в css файл, думаю это смешно ))) Думаю вы понимаете, что я по. факту рофлю и просто высказываю именно своё мнение по этому поводу.
Создается такое ощущение, будто автор только закончил какие-то говно-айти курсики по вёрстке и полетел ныть на один из лучших фреймворков для стилизации.
@@oshurek-dev по тому бреду что ты несешь можно абсолютно определить твои компетенции. Ты обосрал тейлвинд не беря во внимание его основное предназначение, будто это фреймворк что бы на нем говнолендинги верстать на ванилле.
О боже, как же ты смешон автор😂. Использую tailwind в своих проектах на React и Next и он себя там зарекомендовал очень хорошо. Твоя тема я так понимаю чистый HTML, раз ты так к тегам прикопался😂😂😂. Наверное прошел бесплатный курс по HTML и возомнил себя великим WEB разработчиком😂😂😂. Аж бесят такие как ты, напиши библиотеку получше раз такой умный, а потом критикуй других.
в чем проблема написать: @layer components .featured-works-list__article { @apply grid gap-[20px] и тд....; } и использовать на диве уже свой именнованый класс, в плоть до БЭМ
а вы не чувствуете, что когда вы пишете такой код, вы мягко говоря используете препроцессор с нескучным синтаксисом, который дебажить чисто из-за нейминга тяжелее, связанного с процессом интерпретации инструкций ветерка в ксс. просто тоже самое, что вы написали, на условном сасе бы выглядело так не требовало никакой когнитивной нагрузки для понимания, а что, а как понять. .featured-works-list__article display: grid .... без условия того, что вам ничто не мешает написать миксинов, которые бы эмулировали ваш grid gap-[20px] и тд
@@oshurek-dev хлебушек, тэйлвинд - просто набор ютилити классов, его возможности равны обычному css, просто прототипировать с ним в разы быстрее, чем со стандартным (post)css. Вся твоя критика была о разметке, которая написана там для примера. И да, согласен, сделано тупо, но если бы ты увидел кнопки выше, то понял бы, что кликая на них, можно переключать стили для одной и той же карточки. И ВОЗМОЖНО, совершенно неожиданно, в связи с этим там меняются только стили, а разметка остаётся таже (в этом типа прикол, что быстро можно что-то поменять при прототипировании). И, возможно, полностью семантически правильная разметка в одном стиле стала бы всё равно в корне не верной в другом (это лишь предположение).
а про :before и :after не хочешь поговорить? про :hover, :focus и тд а про медиа запросы? это просто ужас, я тоже не понимаю почему tailwindcss так стрельнул особенно для буржуев, и в чём была сложность писать писать с обычными css(sass/scss/less/stylus)
