2014 - пишем js, html, css в PHP
2024 - пишем в js html, css и PHP
2024 - пишем в js html, css и PHP
👍2😁1😱1
Я уже написал на solid.js аж целых два маленьких приложения.
Поделюсь опытом в сравнении с реактом, раз уж они под реакт мимикрируют.
День первый.
Я полистал документацию, посмотрел ролики, впечатлился качеством материалов.
Нашел необходимый плагин для vite, шаблон конфгиа по ts, запилил hello world, все круто!
Надо было сразу выбросить реакт и взять солид, чего ждал - не понятно. Счас хуяк хуяк и в продакшен супер быстрый апп, с маленьким бандлом, бешеным перфом, гранулярными апдейтами, ууухххх
День второй.
Плагин оказался со странностями. Почему он перетирает часть конфига моего vite, и принудительно заменет happydom на jsdom???
pnpm орет на меня что у меня vite 4, а плагин только до 3 ей версии. К тому же после изменений в стилях у меня появляется копия всего приложения на странице. Одна по другой. +1 копия приложения после каждого обновления.
Потратил время на изучение проблемы
- нашел ишьюс в котором проблемы с happydom известна пол года. И даже вроде мр есть.Но всем плеват. Решается откатом на старую версию. Наконец замерижили фикс.
- по поводу дублирования приложения - оказывается надо плагину hrm комментариями подсказать что index.tsx где я маунчу апп в дом дерево перевызывать не надо
в целом очень странно видеть что фреймворк так сильно завязаный на сбороку - так слабо поддерживает единственный официальнаый плагин для vite который счас мейнстрим сборщик.
День третий.
Два часа пытался понять почему у меня не ренедериться вьюшка.
Если на реакте заработает почти любой говнокод, ужасно, с кучей лишних перерендоров - но заработает, то в solid - малейшая оплошность приводит к тому что рендера не будет.
Без ошибок в рантайме или иде. Я просто смотрю в дэбагере как мой ресурс скачался, обновитлся сигнал, но ничего не происходит - в вьюшке все так же висит ...loading
дэбагер не помогает - надо слишком много знать о внутрянке солида чтоб в этом был толк.
В итоге оказалось что дело в тернарке.
Тернарки в jsx использовать можно, но только один раз. Как с ядовитыми грибами, ага.
Только специальный компонент <Show>, запомните.
про Optional chaining тоже лучше забыть. Один раз ваше выражение
День четвертый.
ClassList как будто бы должен был заменить clsx но на самом деле это пятая нога. Не заменяет, а только лишная апи мешается и создает избыточность.
Typenoscript, и так бывает больно писать, а с solid это будет еще веселее.
Подводных камней столько что есть отдельный раздел документации который я почему-то не замeтил когда знакомился с солидом первый раз
Вобщем итого -
если ваше приложение на солиде работает - оно будет работать быстро. Это в реакте можно открыть код и сказать "божеш ты, как это го-но работает то, кто это, какой return первой строкой, кто правила хуков будет соблюдать - и тп"
реакт приложение как то накоряканое будет работать хоть и плохо.
В солиде готовтесь превозмогать, без ошибок и подсказок, девтулзов и т.п. выезжать на опыте, внимательном прочтении доки, знать где тонко и писать jsx с минимум логики.
Я вам вобще не рекомендую по началу в солидовском jsx писать выражения 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 как бы абсурдно это не звучало.
Но, если вам нужен перф, у вас все обновляется например по сокетам и мигает как новгодняя елка каждая панелкьа отдельно - да, это для солида.
Касательно похожести на реакт - ваш код смогут читать (но не писать) реактеры, на этом все
Solidjs
Solid is a purely reactive library. It was designed from the ground up with a reactive core. It's influenced by reactive principles developed by previous libraries.
👍10🔥2
Артем напоминает нам про неочвидные моменты фетча.
Это напомнило мне как я пытался из кода обработать CORS ошибку.
Кто не в теме - нет надежного способа программно определить что у вас упал запрос именно из-за CORS, такие респонзы вобще запрещено читать из JS
Это напомнило мне как я пытался из кода обработать CORS ошибку.
Кто не в теме - нет надежного способа программно определить что у вас упал запрос именно из-за CORS, такие респонзы вобще запрещено читать из JS
Telegram
artalog in JentlemanS
fetch throws
Дейли ремайндер, вызов fetch не гарантирует возвращение Response, есть целый ряд случаев, когда его промис будет реджекнут:
// wrong protocol (URL scheme "lololo" is not supported)
await fetch('lololo://google.com')
// location.href…
Дейли ремайндер, вызов fetch не гарантирует возвращение Response, есть целый ряд случаев, когда его промис будет реджекнут:
// wrong protocol (URL scheme "lololo" is not supported)
await fetch('lololo://google.com')
// location.href…
Huawei психанули чет.
И выдали:
- свою мобильную ось не совместимую с андроидом
- под котрую написали аж целых два ЯП (Cangjie и ArkTS — последний является расширенной версией TypeScript)
- для которых написаи свою IDE DevEco Studio напичканой целым семейством AI-шек Pangu AI
Источник
И выдали:
- свою мобильную ось не совместимую с андроидом
- под котрую написали аж целых два ЯП (Cangjie и ArkTS — последний является расширенной версией TypeScript)
- для которых написаи свою IDE DevEco Studio напичканой целым семейством AI-шек Pangu AI
Источник
Rozetked
Huawei представила HarmonyOS NEXT — собственную ОС без компонентов Android
Huawei провела в Китае презентацию операционной системы HarmonyOS NEXT. От обычной HarmonyOS новая редакция отличается отсутствием компонентов AOSP (Android Open Source Project), поэтому она не способна запускать Android-приложения.
👏2
Во времена когда появился микимаус (50 лет назад) самым мощным компом в мире был Cray-1.
Стоил ~ 7 000 000 $, весил 4763 кг, потреблял 115 киловатт.
Современная малинка на фоне него просто невероятное чудо иженерии и инопланетная технология (стоимостью 50$).
На картинке бенчмарк который их сравнивает
Стоил ~ 7 000 000 $, весил 4763 кг, потреблял 115 киловатт.
Современная малинка на фоне него просто невероятное чудо иженерии и инопланетная технология (стоимостью 50$).
На картинке бенчмарк который их сравнивает
👍3
Чем отличается красивый градиентный переход от некрасивого?
Некрасивый получается при линейном переходе.
Такой градиент не "растворяется" плавно, из-за чего мы видим момент перехода.
Чтобы пофиксить нам нужно сглаживать не линейно с а применением математичекой функции a.k.a easing.
- Где сгенерить онлайн руками
- Чем сгенерить в postcss
- Как понять что генерить
Снипет для ленивых - добротный fade в черный.
Некрасивый получается при линейном переходе.
Такой градиент не "растворяется" плавно, из-за чего мы видим момент перехода.
Чтобы пофиксить нам нужно сглаживать не линейно с а применением математичекой функции 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%)
👍2
А вы знали что
на самом деле это "больше или ровно", и "меньше или равно".
Так что если вам нужен переход из одного медиа запроса в другой, писать надо например вот так
Update:
@inoyakaigor подсказывает что с использованием css-media-range-syntax можно еще вот так:
Очень круто, спасибо!
#css
@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
Caniuse
"css-media-range-syntax" | Can I use... Support tables for HTML5, CSS3, etc
"Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.
👍4
Вчера прошло 10 лет с тех пор как vue.js появился в публичном доступе
🎉2
Наверное ничто меня так не раздражает в кодовой базе как компоненты обьявленные через
И даже если отбросить полу-субьективные пункты, все равно остается одна большая проблема с тем что дженерики ломаются.
Так зачем же люди продолжают жрать кактус...
P.S. нет, запятая после аргумента в дженерике не помогает в vscode
const.И даже если отбросить полу-субьективные пункты, все равно остается одна большая проблема с тем что дженерики ломаются.
Так зачем же люди продолжают жрать кактус...
P.S. нет, запятая после аргумента в дженерике не помогает в vscode
Stack Overflow
What is the syntax for Typenoscript arrow functions with generics?
The typenoscript handbook currently has nothing on arrow functions. Normal functions
can be generically typed with this syntax:
example:
function identity<T>(arg: T): T {
return arg;
}
Wha...
can be generically typed with this syntax:
example:
function identity<T>(arg: T): T {
return arg;
}
Wha...
😢2