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

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

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 как бы абсурдно это не звучало.
Но, если вам нужен перф, у вас все обновляется например по сокетам и мигает как новгодняя елка каждая панелкьа отдельно - да, это для солида.
Касательно похожести на реакт - ваш код смогут читать (но не писать) реактеры, на этом все

Артем напоминает нам про неочвидные моменты фетча.
Это напомнило мне как я пытался из кода обработать CORS ошибку.
Кто не в теме - нет надежного способа программно определить что у вас упал запрос именно из-за CORS, такие респонзы вобще запрещено читать из JS

Huawei психанули чет.
И выдали:
- свою мобильную ось не совместимую с андроидом
- под котрую написали аж целых два ЯП (Cangjie и ArkTS — последний является расширенной версией TypeScript)
- для которых написаи свою IDE DevEco Studio напичканой целым семейством AI-шек Pangu AI

Источник

Во времена когда появился микимаус (50 лет назад) самым мощным компом в мире был Cray-1.
Стоил ~ 7 000 000 $, весил 4763 кг, потреблял 115 киловатт.
Современная малинка на фоне него просто невероятное чудо иженерии и инопланетная технология (стоимостью 50$).
На картинке бенчмарк который их сравнивает

Чем отличается красивый градиентный переход от некрасивого?
Некрасивый получается при линейном переходе.
Такой градиент не "растворяется" плавно, из-за чего мы видим момент перехода.
Чтобы пофиксить нам нужно сглаживать не линейно с а применением математичекой функции a.k.a easing.
- Где сгенерить онлайн руками
- Чем сгенерить в postcss
- Как понять что генерить

Снипет для ленивых - добротный fade в черный.

linear-gradient(-180deg, rgba(0, 0, 0, 0) 7%, rgba(0, 0, 0, 0.08) 12%, rgba(0, 0, 0, 0.16) 17%, rgba(0, 0, 0, 0.22) 21%, rgba(0, 0, 0, 0.32) 26%, rgba(0, 0, 0, 0.42) 32%, rgba(0, 0, 0, 0.52) 38%, rgba(0, 0, 0, 0.62) 47%, rgba(0, 0, 0, 0.72) 57%, rgba(0, 0, 0, 0.82) 65%)

А вы знали что

@media (min-width: 600px) {...}

и

@media (max-width: 600px) {...}

на самом деле это "больше или ровно", и "меньше или равно".

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

@media (min-width: 599px) {...}

и

@media (max-width: 600px) {...}

Update:
@inoyakaigor подсказывает что с использованием css-media-range-syntax можно еще вот так:

@media (width >= 600px) {...}
@media (width < 600px) {...}

Очень круто, спасибо!


#css

Вчера прошло 10 лет с тех пор как vue.js появился в публичном доступе

Я не знаю причин по которым гугл считает это нормальным, но со стороны выглядит так что фронтендеров там набирали по обьявлениям