-css заменит js
-для замены css, напишем js
@@user-wl2xp8yo6x заменить всё на свете на JS это не развитие, а какой-то фильм ужасов.
@@rumisbadforyou9670 надо просто понимать и чувствовать где лучше использовать JavaScript, а где использовать CSS
Я не понял, как это мне помогает красить кнопки и делать margin-left: 10px ?
В вакансиях уже сейчас требуется минимум от 3х лет опыта в этом😂
Представляю какой это дурдом будет
Дурдом - styled-components, а если это востребовано, то и Гудини будет востребовано)
@@tarque_ля чел, нахуй ты высераешь подобное, тебя что блять палкой заставляют styled-component юзать? Юзается это когда нужно по быстренькому накидать пару стилей на компонент.
Flexbox произвел революцию, потому что он решал БОЛЬШУЮ ПРОБЛЕМУ всех верстальщиков. Все на него (и на CSS Grid) перешли, так как была очевидна их эффективность по сравнении с предыдущими методами.
Houdini - это скорее feature, которая кому-то будет нужна в исключительных ситуациях.
И как понял, мы переносим "грязь" из CSS в JS, чтобы писать CSS "красиво".
Лично для меня, революцию в вёрстке произвел Tailwind и Utility class подход.
для меня знакомство с tailwind закончилось на попытке сделать кнопку с двумя варациями стилизации и двумя цветовыми варициями, а так же адаптировать ее под изменение высоты экрана, продумать &:focus состояние и через js имитировать поведение active. и все это для каждой из 4 вариантов кнопки. я думаю ты и сам уже понял какой адский набор говна получился в итоге, и не дай бог что-то когда нибудь нужно было бы там поправлять. аргумент про скорость я никогда не понимал ведь большая часть стилей втупую копируются из фигмы, вот и остается только маленький бандл и ну вроде и прикольно, но учитывая новый next с серверными компонентами я не очень понимаю прикола. лучшим вариантом стилизации считаю scss/post css modules, возможно styled-components работай он с некстом. лично для меня вопрос времени когда tailwind умрет. чистота и поддерживаемость кода слишкой важный момент что-бы им жертвовать
@@sxda-vadas4903 Спасибо за коммент) попробую поделиться своим опытом. Тебе решать, принимать его или нет)
скорее всего, ты не до конца разобрался в работе Tailwind. Варианты очень легко реализуются через “Class Variance Authority”. Ноль проблем. Всё декларативно. А если еще подключишь `tailwind-merge` в связке с `clsx`, то навсегда забудешь о проблеме каскадности.
2. Не понял, при чем тут Next и серверные компоненты. CSS как загружался на клиент, так и загружается. Серверные компоненты - это большое про JS бандл, чем про CSS. Думаю, ты запутался в этом вопросе.
3. Tailwind - это просто самый популярная библиотека, реализующая Utility class подход. Именно этот подход решает БОЛЬШУЮ проблему в CSS, связанную с масштабированием и именованием классов. Тут проблема архитектуры. Post CSS или SCSS помогают нам расширить функционал CSS, но они не занимаются его оптимизацией. При масштабировании - количество неиспользуемых стилей зашкаливает, а CSS бандл будет продолжать расти.
Еще раз посоветую взглянуть на Utility class подход, откинув негатив. Есть ощущение, что еще не начав разбираться, ты сделал поспешные выводы.
Лично я не столкнулся ни с каким «набором адского говна» и спокойно реализовал полноценную дизайн-систему, основанную на токенах, с кучей компонентов в разных вариациях.
Год назад реализовывал подобное на PostCSS+CSS Modules и с уверенностью могу сказать, что Tailwind в разы проще и гибче.
В любом случае успехов :)
@@pureugliness этот инструмент может быть полезен когда проект не требуется поддерживать, либо поддерживать не тебе, промо, визитки и пр. Когда я вижу в вакансиях в продуктовом стеке тейлвинд, у меня один вопрос: кто это пропустил?..
ура, еще больше возможностей для шатания верстки
Спасибо большое за видео!
Первый раз на канале, подписался сразу. Искренняя заинтересованность специалиста в своей сфере завоевывает, в какой нише бы он ни был!
Приветствую, дружище 🤝👍
Я думаю, что поддержка проекта с кучей пользовательских модификаций CSS будет тем еще гемором
будем подождать еще один фреймворк, который все это добро заберет под капот
Мне это напомнило watch css подход, когда в псевдоэлементах изменяется свойство content через css, а js отслеживает это и что-то меняет. Я это активно использую, когда нужно на разных брекпоинтах инициализировать или отключать какие-то слайдеры, аккордионы и прочее (переключать одно в другое) - это удобно в scss через миксин.
Скорее всего на базе гудини выйдет несколько ui-ных либ типо tailwind но с набором новых фич, и их как раз все будут юзать. Либо в каких то исключительных единичных кейсах. Но прямо сильной нужды а этом не видно. Но на кононизацию я думаю еще лет 5 уйдет.
Скоро можно ждать новые фреймворки, где верстаешь только через css
Просто АДМЩЩЩЩЩЕ!!!
Очень любопытно. Главное не злоупотреблять такими вещами.
"Классическое хручево " - сходу подписка
За момент с Вито Спатафоре лайк))
Забавно что те кто и правда считают что css может заменить js или наоборот js заменит css, то просто не знают для чего нужен каждый из них
В общем. натягиваем сову на глобус, а чтобы было красиво, прилепим и горбатого до стены...Да, и не забываем всё это приправить изрядной порцией JS. Так себе революция.
Мама - Анархия
Папа - пакет ворклетов
А уже есть eslint/style-lint правило на запрет этого api?)
JS внутри CSS ?? Надеюсь, они о безопасности подумали, а то нас ждут CSS-инъекции
@@gooseob есть куча способов доставить клиенту нужный CSS, от внедрения в зависимости npm-библиотеки, до тупо загрузки в CDN
@@romartynromashka мне не кажется, что от этого браузер может как-то защітіть, і с js могут быть ведь аналогічные уязвімості
Тотальный офиг
Ждем первый майнер в css
а как с производительностью?
Я хочу стать веб-разработчиком и начинаю учить базу. Что тем временем твориться на фронте:
Как коммерческий разработчик - ответственно заявляю, что это шляпа Баярского. Ну бред же, ненужная абсолютно хренотень, которая не упрощает, а усложняет разработку. )) И никто этим в здравом уме пользоваться не будет)
Пфф, да фронтендеры только и делают, что красят кнопочки и формачки клипают, тем временем фронтендеры каждый месяц, фигак новый фреймворк, фиган новая технология, фигак нововведение, которое заставит переделывать большую часть имеющегося функционала 😂
Твое - "красят кнопочки" звучит 1 в 1 как: "А хуле ваш бэкенд, запросики в базу пишите да и всё"). Нахуя вам ORM, сложно запросик написать?
Надеюсь скоро пощупаем
я уже год назад делал, классная штука, я про paint функцию. @property уже давно использую для анимации css переменных
Я помню не только революцию флексов но и революцию дивов, до этого верстка через таблицу была.
@@pureugliness Ну как не революции, раньше полностью описывали структуру сайта в таблицах, а потом все перешли на дивы, а чуть позже стали делать адаптивную вёрстку. Переход на адаптивную, тоже считаю революционным.
@@pureugliness ну я таблицы встречал в 2005 году наверное последний раз. Потом уже все дивы использовать стали.
а если эти ворклеты на вебассембли писать то рендеринг не будет тормозить тогда?
С ворклетами идея интересная. А вот писать жс прямо в цсс - муть какая-то.
После реакта и редакса уже ничто не удивляет. А после тайпскрипта - вообще по барабану.
Самая нужная штука как Layout API, как раз имеет очень малую поддержку. Эх. Надеюсь реализуют возможно переопределять рендер уже существующих свойств.
Звучит, конечно, интересно. Но посмотрим как это будет работать на боевом высоконагруженном элементами проекте. Не будут ли взрываться мобильнички в руках пользователей 😆
Ждем когда css заменит еще и бек, я б посмотрел как на нем api будет выглядеть))) А если серьезно, то все эти темы про заменит одно на другое, бьются об легаси код, где миграция с одной версий фреймворка на новую версию того же фрейворка, оборачивается тем еще сторикейсем, а про переход с одной технологий на другую...ну вы поняли, но да, css во многом забрал функционал скрипта в плане визуала, но данные уж никто ему не доверит)
Ты вот сказал "бьются об легаси код, где миграция с одной версий фреймворка на новую версию того же фрейворка, оборачивается тем еще сторикейсем". А я почему-то все еще вижу сотни развивающихся фреймворков. А по поводу бека в css - это ты сам только что придумал и сам возмутился. Зачем?
Как обычно, ждем минимум пять лет пока оно доползет до 95% браузеров. Правда, к тому времени у нас что-нибудь лучше появится, но таков прогресс
К концу просмотра загрузился и ушел в себя. Вернусь не скоро.
Да уж, вспомнил про behavior в ие, такая дичь. Особенно пример с масонри обрадовал, тот же js от которого хотелось бы избавиться теперь будет в css. Пугает больше сколько пакетов будут грузиться перед тем как сайт начнёт рисоваться.
П.с пример с полифилами, которые будут работать только там, где будут работать эти фичи, в целом полезно, но как автор и сказал мы будем ждать. Лет через 5 только актуально и станет чтобы пользоваться этим как полифилами и то не факт
"тот же js от которого хотелось бы избавиться"
интересно и какую же замену вы предлагаете
@@nade3282 grid masonry есть, но он не везде работает и не всегда так, как хочется
Возможно на кого-то это производит впечатление, но не на меня. По факту куча мобильных устройств, особенно ios с сафари - коих много, особенно не самых новых - тупо некоторые свойства флексов и гридов работают через заднее место. Я уж не говорю про тв приставки, смарт ТВ и андроид устройства типо редми 5 с миюай браузером) вот там песня конечно. Это конечно не ie8, но попотеть заставляет. Так что революция не свершилась. А в идеальном мире, где у всех новые телефоны и самые современные и обновленные браузеры - это конечно было бы круто)
Жс дополнит цсс. Бедные реактомакаки - все больше магии постигать)
Теперь ждем, когда CSS заменит бэк
Это просто великолепное обновление.Можно сказать что это css 4.0Насчет того будет ли жрать ресурсы?100% будет
"Дожопный разработчикам будет полезно..."
Есть еще HTMX, который как html заменяет js.
так чего, react уже не нужно изучать?
🙃
Вот зараза. Только ведь React выучил
Так всё нормально. Не забивай голову тем, что показали в этом видео
Показанное в видео - это для очень редких вещей. В повседневной работе ты скорее всего не будешь это применять
Стакать пикчи разного размера большая головная боль? Там же кроме простейшей арифметики и массива высоты вообще ничего не нужно? Или у фронтендеров всё настолько запущенно?
я мама, в шоке..
собсно кроме того что код переставляется из одного места в другое ничего не меняется. Добавляется только параллельность этих вычислений по отношению к основному коду.
Смотри в глубь. Создается новое свойство в css, например как во флекс боксах gap. Свойство полезное, но ты 2 года его игнорируешь. А с данным инструментом, ты можешь временно, если браузер не поддерживает свойство gap, заменить его своей реализацией, или не своей, а от разрабов языка. Только представь, ждать пока все браузеры всруться и внесут изменения - не обязательно. Ты можешь использовать актуальный css и не париться.
FrontEnd превращается в backend, но javascript все также динамически типизируем, как в старом веке.
"Лиса умирает" - иди нафиг, без лисы не нужно
@@it2138 с ие мечтали попрощаться с середины нулевых, с конца так точно. Лиса же последний нормальный браузер из оставшихся. Всё остальное - хром
@@it2138 1.6% - это включая мобилки, на которых почти все пользователи пользуются предустановленными браузерами.
В то же время на десктопах это 5.5%. Процент, конечно, не великий, но значение почти в 4 раза больше.
@@it2138 это непрофессиональный подход, сперва нужно проанализировать аудиторию своего проекта, как минимум, а уже потом делать выводы отказываться отчего-то или нет, в госсекторе ие до сих пор поддерживать требуется
А кто говорил, что нужно отказываться от чего-то на основании общей статистики?
Мы как раз посмотрели, что у нас остался 1% пользователей с IE и отказались от него.
И в ролике также акцентируется внимание на том, что все зависит от проекта.
бесполезно в 99% случаев.
От создателей "чат жпт нас всех заменит"?
Вроде бы хорошо, но...
Был js, придумали ts - учи ts
Был css, придумали less,sass,stylus и тд - учи.
А теперь еще добавится гудини апи.
Имхо в редких случаях незаменим, а "зачем их инпут делать чекбокс через css, я напишу через Гудини" -- нет, нет и еще раз нет.
Потому что сапортить это дерьмо еще годы потом.
KiSS ребята.
Не надо упарываться. Знаешь каррирование, y-комбинаторы, монады любишь?? Засунь их себе в зад.
Код пишем 1 раз, а поддерживаем и читаем сотни миллионов раз. И делают это коллеги, многие из которых не сильны в твоих познаниях.
Удачи всем
Я не понимаю, чем ворклет лучше компонента)) А вот то что в язык описания, добавили язык программирования я пока не вижу плюсов. Весь интернет жестко привязывают к одному языку, причем к далеко не самому лучшему. Плюс теперь там могут быть всякие вирусы. Многие специально отключают в браузерах скрипты, а тут прям в CSS. Может я предвзят.
@@pureugliness вроде у около 0,5 процентов юзеров отключен джс, но для больших продуктов это довольно большой процентаж утерянных клиентов/денег. А если продукт нацелен на страны Азии, где джс отключен у 3-5 процентов юзеров, то тем более
Хотелось бы элементарную вложенность в CSS и возможность использовать переменные для границ медаизапросов.
Вложенность уже есть в css, просто не всеми поддерживается браузерами
Какого х чувак, я уже было понадеялся что смогу стать фулстаком без знания жс
матерь драконов, с первого взгляда вызывает ужас какой хаос в начале вызовет все эти апишечки
В 2016 году говори что вот вот выйдет гудини
CSS заменит JavaScript? - да CCS + JS!
CSS заменит JavaScript. Я так понимаю Js на бекенде вышел из чата ?)
Да не...Это не про облегчение , такой гемор можно и самому наворотить ..
Какие-то чудаки сидят в этих группах принимающих эти стандарты 😅
В сафари оно уже 4 года под флагом (конкретно Paint), и они даже не двигаются в сторону включения флага, а остальные части апи не двигаются в работе. А сафари это приличный кусок на мобильных устройствах.
Сделали styled components
Да кажется, что styled components в десятки раз понятнее по смыслу, чем эта по#ben`
@@denisnovozhilov7482 Согласен, не знаю кто ждет этот функционал уже 5 лет) html программисты видимо
По моему и так нет проблем с созданием фронтенд приложений и их стилизацией
Хотя styled components медленнее чем обычный css, но для всего где нужна скорость можно использовать и тот же tailwind
Ну сначала либа будет пару лет бесплатной, а потом начнётся. И ведь не даром в тех же забугорных странах, уже есть профессия css-developer. А все почему... Многим сторонние продукты только вредят, поэтому и свое создают. Яркий пример Taiga UI.
Я надолго выпал из frontend-а и, возможно, буду вкатываться обратно в ближайшие месяцы. Расскажите пожалуйста, что не так с Taiga UI? Я о ней слышал немного как раз перед "завязкой"
Выглядит как какая-то подмена понятий рассчитанная на инфантильных джунов без критического мышления!
- Нам больше не надо писать js
- но чтобы ворклет заработал нужно написать кучу непонятного js или подключать готовые библиотеки с десятком новых зависимостей! Но за-то css станет якобы чище...
Это вообще как ?
Принцип разделения ответственности не собоюден. Говнокод какой-то по большей части. Лучше бы развивали web components API.
masonry за два года вёрстки встречалась только два раза. И Этот видож как жтати жтобы это жафикщить у себя в ноушон заметке. штобы находить побырому и использовать. Вот так вот. Хе хе.
ЗБС
Лиса присмерти, ну, ну. Лиса уже влезла в ядро линукс и виндовс и называется rust. Без лисы вы бы пользовались своими тормозными утилитами для сборки, эти утилиты переписывают так же на rust. Node. Js молится на лису, так как легко интегрируется с rust и node легко поспорит после интеграции с любым компилируемым языком программирования, для нее паралельные вычисления становятся реальностью. А вы лиса присмерти)))
Это все здорово, но как это влияет на процент пользаков на мозиле?
Зачем нам поддерживать браузер, которым будет пользоваться малое количество людей?
Тем более, если у него начались проблемы с темпом поддержки новых фичей
@@it2138 в следующий раз когда будете искать документацию и заходить на MDN вспоминайте его расшифровку)
Вошел в мир веба в 2001 году и все было прекрасно:) А теперь подключай ворклеты:)
JavaScript заменит CSS 🤣
Что
На мой взгляд, это уже перебор... Таблица стилей должна оставаться таблицей стилей, а не жабаскриптом... CSS уже давно превратился в чёрт знает что.
А js заменит весь бэкенд, понятно
CSS уже давно вылез за рамки нужного...
ну нахер
Я бы не утверждал, что FF мёртв. Развивается
про жаролиса ты зря ляпнул. *оглядывайся.*
А можно не надо? Может лидера этой css революции того самого и всё?
Только лису и юзаю , остальные браузеры до одного помойка.
Вот именно для таких как вы я трачу чуть больше времени, чтобы и у вас сайт выглядел хорошо)
я ниче не понял и мне это не нравится
чел открыл для себя ангуляр
Заменит в чём?
Fap-fap!
Там, где сам должен быть?
Да на здоровье!
Ну нафиг
а можно еще быстрее рассказывать, чтобы совсем уж не понятно было по максимуму?
да задолбали усложнять и усложнять, вот есть куча девайсов на которых браузер уже не обновить - опять выкинуть, и чего вам не хватало? есть же джаваскрипт, нахрена тянуть джаву в css, уже даже в текущем CSS мало кто из дизайнеров понимает большую часть, теперь таких людей будет еще меньше. Походу скоро только AI сможет на всем этом говне выдавать результат
Ну ты загнул
Какой то кликбейтный заголовок видео. CSS не заменит JS. Они просто глубоко срастили эти две технологии.
Внимание! В комментариях одни нытики.
я гей
лучше б вёрстку нормальную сделали
схлопывания всё ещё есть?
ощущение что css создавала тупая блондинка
Зато буквы теперь можно растягивать и квадратиками раскрашивать
ну и херня
Нах*я вообще нужен этот css, если есть вся мощь и гибкость js? В мобильной разработке нет css и давно существует тенденция верстки прямо в коде. css-препроцессоры дублируют функциональность js, намекая на этот тренд верстки кодом, но не решаясь на революцию. Пора уже вырасти из веб-мастера и покончить с наследием, которое было создано непрограммистами для непрограммистов.
Тренажеры HTML Академии + Книга рецептов фронтендера + Академия + комьюнити за 99 рублей:
boosty.to/how-to-learn-it
Какие тренажеры бывают:
htmlacademy.ru/courses#fe-start
Мой телеграм:
t.me/howToLearnIT
******************
0:00 Самый грустный рассказ о фронтенде
0:36 Что такое Houdini CSS?
02:20 Paint Api
04:14 Полифилим
04:38 Подписка фронтендера
05:23 Революционность Houdini CSS
06:15 Layout Api
07:00 Animation Api
07:18 Properties and Values Api
07:39 Typed OM
08:34 Parser Api
08:47 Fonts Api
09:00 Критика
******************
Ресурсы:
1) ishoudinireadyyet.com/
2) Примеры github.com/GoogleChromeLabs/houdini-samples/
3) CSS Houdini: практическое руководство
www.smashingmagazine.com/2020/03/practical-overview-css-houdini/?ref=heydesigner
4) Эксперименты с Гудини
css-houdini.rocks/
#js #css #frontend
жалко что у тебя нет ролика про микрофронты я бы посмотрел его
Хватит циганить) Тебе фэнтэзи озвучивать с таким голосом и подачей.