Вэб-компоненты как-то не прижилсь в массе,
даже не смотря на то что такие гиганты как youtube и github построенны целиком на них.
А ведь там есть весьма любопытные вещи, которых нет больше ни в одном популярном фреймворке.

Одна из таких фич - shadow-parts (поддерживается в 92.15% браузеров на данный момент).

Что-бы понять что это такое и зачем нужно - давайте представим что у нас есть ui-kit.

Обычно в ui-kit-aх есть проблема - можно стилизовать тему, но отдельные элементы - проблематично.
В лучшем случае приходиться добавлять свой css поверх китового, чтобы переопределить те или иные стили.

Но тогда мы завязываемся на внутренюю верстку и классы кита, которые после очередного обновления могут поменяться и у нас все разъедется.
(один из самых не приятных багов - css не пишет ошибок и не падает, а тесты для него писать - дорого и больно).
У разрабочтика кита тоже пробелма - страшно что-то менять, чтобы не расстраивать своих пользователей.

Чтобы такой проблемы не было - нужен контракт, который ограничит что менять можно, а что нельзя.

Когда дело доходит до реализации - такой контракт обычно выглядит как много опциональных параметров для каждого компонента. Из них в рантайме генерируется стиль, благо css-in-js позволяет.
Заплатить за это приходиться а) перфом и б) раздутой апи компонента.
Вариант по-лучше (имхо) - дать пользователю возможность передать свои классы для важных частей компонента.

Но, если у вас кит из вэбкомпонентов - появляется еще одна опция - разработчик кита может описать какие части можно стилизовать, обозначив их и дав названиe c помощью атрибута part,

<div part="some-part">

а пользователь - стилизовть их прямо из css - никаких доп свойств передавать больше не нужно!

kit-component::part(some-part) {
  color: red;
}

Интересно что:
1. Разрабочтик получает возможность как менять свойства всех компонентов этого типа, так и только некоторых благодоря css селекторам
2. Разработчик не может застилизовать по ошибке или глупости, то что не разрешено

Сделал вам демку:
https://jsfiddle.net/akiyamka/a5L4xezb/54/

Есть такой проект verdaccio - ваш собственый npm репозиторий. Причем он zero-config и как вариант - поставляется завернутым в докер - т.е. установил - и работает.
Конечно же он умеет работать как прокси к другим репам (включая npmjs.org).

Зачем оно надо?
Вот пару кейсов:
- ни разу не публиковали пакет в нмп, а хочется на чем-то потренероваться
- в вашей организации трудно получить доступ наружу, а хотя-бы свои пакеты хочется юзать между проектами безпрепятственно
- плохой интернет, или npm падает в неподходящее время - как кэширующий слой npm (и хотя счас у кажого пакетного менеджера есть свой кэш, они не умеют им делиться)
- сделали временный форк пакета, а из гитхаба вы его поставить не можете потому что он билдитися при паблише
- как единая точка входа. Например у вас пакеты из github packages постепенно переносятся в npm, или наоборот (миграция), чтобы не менять в каждом проекте что откуда брать каждый раз

Ниже пару демок

Довольно часто слышу предложение - а почему бы не сделать вместо usestrict что-нибудь вроде useecma2022, и со спокойной душой выпиливать из языка старые ненужные легаси апи и нелогичное поведение.

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

Впрочем, количество легаси в коде браузервов тоже проблема.
Много лет в них пытаются сделать <select> поддающийся стилизации (казалось бы, что может быть проще) - но идет очень туго - из 36 найденых блокирующих issue осталось еще 16

Когогенерацией реакт компонентов из фигмы сегодня никого не удивишь.
А что если не только реакт компонентов. А для любого фреймворка? А что если можно будет попросить использовать определенную UI либу, например tailwind?
И наконец, что если можно будет генерировать код с учётом правил и утилит которые уже есть в вашем репозитории?
Вот это уже совсем другой разговор, и кажется это наконец сделали (по крайней мере в рекламном ролике)

Наверное я старовер, но я не люблю писть css в js файлах.
Все еще считаю css модули простым и эффективным решением которое еще никогда меня не подводило.

Единственное что порой утомляет - это то что надо этот стиль импортнуть в файл.
А потом еще нужна какая-то либа которая будет стили расcтавлять и комбинировать (например clsx).
Итого вместо ванильного
<div class="foo bar" />
приходиться писать

import clsx from 'clsx'
import style from './style.css'
<div className={clsx(s.foo, s.bar)} />

Скука! Но что поделать, такова цена, технологии требуют жертв.
Или нет?
Некто malizhev сделал великолепный vite плагин который телепортирует назад в опыт ванильного css,
сохраняя все плюшки модулей. Вот только о нем никто не знает (всего 8 звезд!), так что держите эксклюзив:
vite-plugin-css-auto-import

Сегодня же затащу плагичник в своей проект на солиде!
#cssinjs #cssmodules #vite

Знаете почему гугл так всполошился с выходом ChatGPT? Посмотрите с какой скоростью умирает Stack Overflow, это просто поразительно.
С такими темпами через 12 месяцев о нем все забудут

https://dev.to/polterguy/will-stackoverflow-survive-ai-420e

Netflix рассказывают как построили на node.js хайлоад микросервисную архитектуру
https://dev.to/davydocsurg/demystifying-microservices-with-nodejs-a-journey-from-netflixs-semicolon-crisis-to-the-future-of-software-103e

Хочу чтоб на каждом сайте где надо заполнить форму с адресом была возможность указать адрес в виде URL,
вместо заполнения кучи полей
addr://{city}.{coutry-code}:{postal-code}/house/{house-number}/flat/{flat-number}?gate-code=9669

"Зачем это вообще всё нужно?"
Примерно так выглядит реакция начинающего разработчика, впервые попросившего написать ChatGPT какой-то код.
Чувство знакомое. Столько времени и сил было потрачено на изучение программирования, а тут какой-то бесплатный бот пишет программу, на которую у него ушёл бы час, или даже день - за минуту!
Всё равно что читы в играх сделали легальными и доступными всем и каждому, и всё, что надо сделать, это войти в настройки игры и включить их. Разве так можно! Это же совсем не весело! Даже читерам!

Хотя это нечто большее, чем возмущение, весь труд, как будто, был обесценен, возникает ощущение ненужности, и опускаются руки.

А знаете, по-моему, всё как раз становится куда веселее, чем было раньше. Подержите моё пиво, сейчас объясню.

Такие "сдвиги" в профессиях случались и раньше. Примерно так же ощущали себя люди на складах Амазона, когда их работу начали забирать автопогрузчики и прочие "механические руки". Но это всё ерунда по сравнению с тем, какую жабу подложил Джордж Истман всем художникам. Только представьте: художники тысячу лет совершенствовались, передавали знания от поколения к поколению, чтобы нарисовать как можно более реалистичную картину. И только у некоторых из них стало получаться за месяц-другой нарисовать наконец "Утро в сосновом лесу" не хуже, чем скрин из демки Unreal Engine, как бац - массово становится популярной плёночная фотография. Тот же результат за пару часов! Обидно и демотивирует. Фотографию поначалу даже пытались запретить, якобы она "похищает душу" и вообще. Потом был своего рода "кризис", когда художники начали рисовать идеально черные квадраты, круги или вовсе разноцветные кляксы, в общем - реализм уже никому не был интересен. Что в результате? Умерла ли профессия художника? Вовсе нет, она преобразовалась в множество профессий: от дизайнера до 3D-художника. Да и фотоаппаратом, как оказалось, еще надо уметь пользоваться, и в композиции разбираться, и со светом работать. Так что Midjourney сегодня уже никого не напугал (не считая особо мнительных личностей), а, напротив, быстро стал важным и любимым инструментом.

В разработке ситуация аналогичная. AI - это инструмент, который поможет вам подготовить фон и набросать эскиз, мы сможем двигаться быстрее, не утопая в деталях реализации на стадии проверки гипотез, что в целом делает разработку веселее. Главное помнить, что суть не в том, чтобы писать код, а в том, чтобы создавать программы. Код - это средство. Средства меняются со временем, а суть остаётся.

Данный текст проверен на ошибки и скоректирован ChatGPT :b

Квинтэксенция типичного вопроса в айти-чатике

Подключил чат к каналу для комментариев

2014 - пишем js, html, css в PHP
2024 - пишем в js html, css и PHP

У ChatGPT4 появилась недавно бета функция - способность анализровать датасеты и делать по ним выводы.
Интересно, а что будет если я туда засуну вместо датасета?
Результат на скрине

Я уже написал на solid.js аж целых два маленьких приложения.
Поделюсь опытом в сравнении с реактом, раз уж они под реакт мимикрируют.

День первый.
Я полистал документацию, посмотрел ролики, впечатлился качеством материалов.
Нашел необходимый плагин для vite, шаблон конфгиа по ts, запилил hello world, все круто!
Надо было сразу выбросить реакт и взять солид, чего ждал - не понятно. Счас хуяк хуяк и в продакшен супер быстрый апп, с маленьким бандлом, бешеным перфом, гранулярными апдейтами, ууухххх

День второй.
Плагин оказался со странностями. Почему он перетирает часть конфига моего vite, и принудительно заменет happydom на jsdom???

pnpm орет на меня что у меня vite 4, а плагин только до 3 ей версии. К тому же после изменений в стилях у меня появляется копия всего приложения на странице. Одна по другой. +1 копия приложения после каждого обновления.
Потратил время на изучение проблемы
- нашел ишьюс в котором проблемы с happydom известна пол года. И даже вроде мр есть. Но всем плеват. Решается откатом на старую версию. Наконец замерижили фикс.
- по поводу дублирования приложения - оказывается надо плагину hrm комментариями подсказать что index.tsx где я маунчу апп в дом дерево перевызывать не надо /* @refresh skip */
в целом очень странно видеть что фреймворк так сильно завязаный на сбороку - так слабо поддерживает единственный официальнаый плагин для vite который счас мейнстрим сборщик.

День третий.
Два часа пытался понять почему у меня не ренедериться вьюшка.
Если на реакте заработает почти любой говнокод, ужасно, с кучей лишних перерендоров - но заработает, то в solid - малейшая оплошность приводит к тому что рендера не будет.
Без ошибок в рантайме или иде. Я просто смотрю в дэбагере как мой ресурс скачался, обновитлся сигнал, но ничего не происходит - в вьюшке все так же висит ...loading
дэбагер не помогает - надо слишком много знать о внутрянке солида чтоб в этом был толк.
В итоге оказалось что дело в тернарке.
Тернарки в jsx использовать можно, но только один раз. Как с ядовитыми грибами, ага.
Только специальный компонент <Show>, запомните.
про Optional chaining тоже лучше забыть. Один раз ваше выражение foo?.bar() вернет undefined вместо сигнала и больше вы ререндеров не увидите здесь.

День четвертый.
ClassList как будто бы должен был заменить clsx но на самом деле это пятая нога. Не заменяет, а только лишная апи мешается и создает избыточность.
Typenoscript, и так бывает больно писать, а с solid это будет еще веселее.
Подводных камней столько что есть отдельный раздел документации который я почему-то не замeтил когда знакомился с солидом первый раз

Вобщем итого -
если ваше приложение на солиде работает - оно будет работать быстро. Это в реакте можно открыть код и сказать "божеш ты, как это го-но работает то, кто это, какой return первой строкой, кто правила хуков будет соблюдать - и тп"
реакт приложение как то накоряканое будет работать хоть и плохо.
В солиде готовтесь превозмогать, без ошибок и подсказок, девтулзов и т.п. выезжать на опыте, внимательном прочтении доки, знать где тонко и писать jsx с минимум логики.
Я вам вобще не рекомендую по началу в солидовском jsx писать выражения js как бы абсурдно это не звучало.
Но, если вам нужен перф, у вас все обновляется например по сокетам и мигает как новгодняя елка каждая панелкьа отдельно - да, это для солида.
Касательно похожести на реакт - ваш код смогут читать (но не писать) реактеры, на этом все