TypeScript теперь в CSS?! Это как?

[@Howtogoit]

Записывайтесь на моковые собесы / консультации через менеджера в телеге: t.me/Kateerina_11 Мои айтишные чатики: tables-pay-3ci.craft.me/5FBOJ6EJjuieDF Телеграм: t.me/howToLearnIT 0:00 В чем сила CSS Custom Properties? 0:59 Моковые собесы со мной 1:40 Какие параметры бывают? 2:23 Делаем компонент на css-переменных 4:44 Справедливая претензия 5:39 Типы в CSS! 7:46 Как работает inheritrs? 8:40 Финаl Ссылки: 1. developer.mozilla.org/en-US/docs/Web/CSS/@property 2. developer.mozilla.org/en-US/docs/Web/CSS/CSS_Types #css #html #frontend #javascript

[@khtulkiddqd8554]

отправить в спам или нет, вот в чем вопрос

[@ilyagamepub]

Видео крутяк, давно пользуюсь css-in-js, но теперь как будто можно попробовать дать шанс нативу

[@nikman5541]

В чем рофл кликбейта? Очевидно TS тут вообще даже рядом не проходил. Это нативное для CSS решение. Эти видосы и так смотрят только прошаренные, кликбейт вообще путает

[@Howtogoit]

Рофл в том, что так работает ютуб может быть? Чем больше человек кликнет, тем больше просмотров соберет. Смысл делать видос, который никто не посмотрит? Тем более когда я его делаю бесплатно и даже вкладываю свои деньги в производство. Если вы прошаренный, то как вас такой кликбейт может запутать?

[@nikman5541]

@@Howtogoit дешманские кликбейты для набора просмотров где обычно видос в среднем 30к просмотров? то есть доверия аудитории и авторитета тех лида 10+ лет опыта уже мало? понял принял)

[@Howtogoit]

Ну давай расскажу логику раз за доверие аудитории речь пошла: - как минимум 60% фронтендеров не знало, что можно разрабатывать компоненты с помощью css-переменных, хотя это распространенный прием в китах - 99.99% не знало про то, что в CSS были типы и это как минимум очень интересно, а как максимум у этого есть практическое применение То есть для среднестатистического фронтендера польза просмотра ролика очевидно есть. Уж наверное это лучше, чем смотреть вместо этого тиктоки. Теперь по названию: - если бы я назвал как есть: Типы в CSS! То ролик бы посмотрело 5 тысяч фронтендеров. - с кликбейтом просмотров будет гораздо больше, соответсвенно больше фронтендеров узнает что-то новое. И что в этом плохого? Мне сложно представить человека, который увидел название -> загорелся идеей тайпскрипта в css -> увидел вместо этого всего лишь аннотацию типов -> и как загрустил Но видимо такие тоже бывают)

[@СтаниславЭльшайдт]

Даже не заметил здесь кликбейта. Ts ассоциируется с типами в первую очередь, так что все ок, на мой взгляд

[@alexperemey6046]

@@Howtogoit Ты говоришь ужасные вещи. Я не представляю как можно быть фронтендером не владея кастомизацией параметров через css vars... Что этот фронтендер вообще может написать? Чем он на работе занимается?

[@dartess]

С одной стороны мне импонирует настройка компонентов через custom properties. Но - у меня другой вопрос, что делать с документированием? С обычными "js" и "html" опциями всё просто, их сразу видно благодаря описанию в ts-е, т.е. они автодокументируемы, плюсом ещё легко (автоматически) собираются в сторибук. А вот откуда пользователь моего компонента узнает о css пропертях, которые я заботливо для него подготовил, кроме как полезет изучать исходники?

[@Howtogoit]

Описывать все в сторибуке получается) Типо такого: taiga-ui.dev/components/carousel/API Да, согласен минус в том, что они автоматически не документируются, но мы описываем руками и в общем-то много времени на это не уходит, да и ручная документация как правило понятнее автоматической.

[@dmitryts9093]

Да и ревьюить это так себе думаю

[@rkeyuniversalpage1716]

Кайфовая инфа. Спасибо

[@barmaley9705]

Контент в кайф вообще красавчик

[@tagnati5585]

Ватафак платное собеседование? ахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахахахахахахахахахахахахахахахахахахахахаахахаха

[@max_mgtow]

Привет, друг 🤝 Всегда жду твои видео 👍

[@Jonstonrich]

Как так получилось что я разрабатываю компонент который использует фичи из твоих примеров чипсы и чекбоксы

[@DreamingDolphing]

Это видео надо показывать бэкендерам, которые наивно считают, что вёрстка и css это что-то простое и там разбираться не нужно.

[@maximkiselev1554]

Обычно это говорят люди которые никогда не писали ничего сложнее лендинга. Последнее время я чаще всего себя ловлю на мысли что фронтенд это полный хард. Бэкенд по сути просто jsonы по сервисам носит чё тут сложного, вся сложность только в архитектуре может быть что и на фронте тоже есть.

[@mr.springtryp6243]

на кой хрен маяться с этим, когда есть CSS-In-JS и делай все что захочется используя выразительность ТСа

[@erxweo]

css очень круто и быстро развивается, давно уже смотрю твои ролики и думаю, ну всё пора начать юзать чисто css и кайфовать, но открываю проект а там tailwind, с которым как бы и css писать не нужно, но и от tailwind не откажешься, так как предоставляет уже настроенную тему конфигураций, с которой легко и быстро можно начать работать

[@alexperemey6046]

Круто, но не сказать, чтобы быстро.

[@cikada3398]

Остается проблема передачи css переменной когда она нужна и в js и в css. Приходится передавать переменную через style, возможно есть решение лаконечней?

[@Howtogoit]

Css-переменные доступны в js и это тоже их большой плюс. Можно передать через css, использовать в затем в js или наоборот из js обновлять значение в css

[@cikada3398]

@Howtogoit в react приходится пихать style с css переменными, другого варианта не нашел

[@Howtogoit]

Зависит конечно от того как организованы стили, но да большинство так и делает. Вот тут в примере складывают переменные в объект coreui.io/react/docs/components/accordion/#how-to-use-css-variables

[@dopetag]

Google: styled components props

[@cikada3398]

@@dopetag это уже решение через либу

[@DenisKlymenko]

не могу поверить, что кто-то так пишет

[@Howtogoit]

Огромное количество китов так написано. Вот на ангуляре пример taiga-ui.dev/components/carousel/API Вот первый попавшийся кит на реакте coreui.io/react/docs/components/accordion/#customizing

[@DenisKlymenko]

@@Howtogoit про киты - возможно, но для коммерческих проектов - это очень сомнительно так писать, а еще и поддерживать....

[@alexperemey6046]

Неплохой задел, надеюсь допилят до вменяемого.

[@alexperemey6046]

Каждый второй фронтендер не расскажет разницы между css и sass ? Что за бред?

[@Howtogoit]

Почему же бред? Это факт из моего опыта собесов, даже опытные разрабы часто испытывают трудности с этим вопросом

[@bozzhik]

сори, что не в тему, но как же ужасен синтаксис ангуляра.....

[@maximkiselev1554]

Ненавижу ангуляр. Вот nestjs одобряю для бэкенда такие паттерны больше подходят.

[@Noname-i4f3z]

Кто в 2024 году использует ngFor?

[@Howtogoit]

И такое бывает, когда обновиться не получается (

[@igor-sukharev]

В начале этого года я принял решение перестать пытаться вкатиться в АйТи, но старые рекомендации ютуба остались. С моей колокольни мне кажется, ты лучший русскоязычный АйТи-блогер. Твои видео лаконичные, нескучные и добрые. Желаю дальнейших успехов 😊

[@max_mgtow]

Да, хороший блогер. А как тебе Минин?

[@igor-sukharev]

@max_mgtow Я не знаю такого блогера

[@treXXXter]

@@max_mgtowМинин попса и не сильно интересный. Делает больше для хайпа, чем для людей

[@maximkiselev1554]

А чё не вкатился то. Единственная причина которая может быть это невозможность сидеть долго на одном месте. В остальных случаях что может мешать?

[@igor-sukharev]

@maximkiselev1554 я не знаю, что именно мне помешало, но я не смог ни получить работу в отрасли, ни освоить достаточный для найма набор технологий. Может быть, я просто не обладаю необходимыми когнитивными качествами? Или мне мешали психологические проблемы? А может, это в принципе не моя отрасль. Я не знаю

[@mastnova2676]

чувак, ты с какой планеты? Что это за html-программирование? В нашем мире на реакте фронтенд пишут, с подключением!

[@АнтонНургалиев-т1у]

Раскрою тебе секрет, но реакт не всегда подходит. Иногда гораздо проще, быстрее и производительнее написать на ванильном html, css, js. Это касается небольших сайтов без сложной структуры и логики. Пихаете свои библиотеки и фреймворки везде, а потом получаем полуработающие сайты с хреновыми индексами производительности. Каждый инструмент под свои задачи заточен

[@Howtogoit]

Я уже не понимаю что прикол, а что нет) Эта практика в реакте очень широко применяется, во многих известных ui-китах есть.

[@alexperemey6046]

@@АнтонНургалиев-т1у Причем реакт заточен под задачу: "написать говно".

[@azabroflovski]

какой же бред он несет) особенно его псевдокейс про coyntOfRowsMobile countOfRowsTablet countOfRowsDesktop 🤣🤣

[@Howtogoit]

И почему же это псевдокейс? Миллион раз такое встречал в коде. Начнем с того, что бутстрап изначально ввел такую практику в массы

[@azabroflovski]

@@Howtogoit можно ссылку как и где бутстрап ввел такую практику? Не знал что в бутстрапе есть бизнес компоненты 😂 просвети нас пожалуйста))

[@WERWOLION]

вся типизация решается правилами нейминга! ненужен вообще TS!!! это костыль просто нужно использовать префикс переменной. всёравно без префикса непонятна типизация переменной - т.е. префикс нужен уже вчера а если есть префикс то отподает нужда в типизации а ещё можно было делать проверку типов через проверку нейминга - т.е сборщик проверяет начие префикса в начале переменной и дальше значение переменной и если значение не походит под префикс то выдаёт ошибку. Вот и вся типизация! css так же мог бы видеть префиксы , частично можно сделать это на sass

[@aleks_versus]

Тут проблема вылезет с короткими именами переменных, когда тебе нужно счётчик цикла использовать, а вместо i у тебя какойнибудь num_i, становится громоздко и неудобно читать. Да и при минимизации кода эти префиксы будут сжирать ценные байты, вот тогда и повылезают все неприятности такой типизации. Подход с нотацией типов разгружает от лишнего конечный код и перекладывает отслеживание типов на ide. Так мне кажется, но я не программист.

[@WERWOLION]

@aleks_versus Не будет. -n-name n намбер B булеан И т.д. Все равно вы в переменные тащите 5 слов, еще и глаголами. От +3 символов не умрете

[@WERWOLION]

@aleks_versus ты выдел как вебпак дает название переменным всем? A b с Он как делал a b c Так и будет делать. На минификацию никак не повлияет Как вариант разрешить спец символы. По снипету вызываешь каскад и вносишь в имена. Это если тебе не хватает для нейминга бкувенных префиксов. Я использую $name для переменных дом дерева и это шикарно удобно видеть за 0.0001 сек в коде все элементы дом дерева.

[@dmitriikapustin3384]

какая же духота господи. Твои подходы очень сомнительны - они не решают реальные задачи. Как ты смеешь еще и моковое собеседование предлагать падаванам которые тебя смотрят ?!

[@Howtogoit]

Я в шоке с того как много людей не видело этих подходов) Они же в каждом втором ките встречаются. Кроме бутстрапа да tilewind`а еще что-то есть

[@Howtogoit]

Вот на ангуляре пример taiga-ui.dev/components/carousel/API Вот первый попавшийся кит на реакте coreui.io/react/docs/components/accordion/#customizing

[@ryuu97]

Смотрю на это, и мне кажется StyleX или styled-components намного лучше и проще. А тут какие-то велосипеды на старом css

[@Howtogoit]

Ну тут еще спорный вопрос, что считать велосипедом: нативную технологию или N подходов по стилизации реакт-компонентов?

[@ryuu97]

@@Howtogoit как запоминать эти 10500 параметров, возможных в голом CSS? Появляюся все новые и новые, которые латают старые дыры. Как их все запомнить-то?

[@alexperemey6046]

@@ryuu97 Выкинуть из головы реакт и освободить место под что-то полезное?

[@ryuu97]

@ я мобильный разработчик, пишу на Kotlin, Swift + React Native. Везде стайлинг намного более приятный, чем на CSS. Даже андроишный XML и StyleSheets в RN

[@bloodjopa]

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

[@blackbirdchannel-c7b]

Тот случай, когда хочется поставить две реакции! Лайк и дизлайк. Поставил дизлайк, но в комментарии хочу сказать спасибо за полезную информацию.