#библиотека дня

Если есть понятие семантики, где элементы HTML представляют собой то, чем являются, то может, классы в CSS не так уж и нужны?

И таки да!

Парни из https://simplecss.org/ и https://native-elements.dev/ так и считают. Можно построить вполне себе полноценный сайт, не написав ни единого класса.

Как тебе такое, тейлвинд?)

Конечно, получается не то чтобы сверхсложное что-то. Но для среднего блога вполне можно. Сайт этого канала был на нейтивах, но я забыл оплатить домен и godaddy меня поимел.

Впрочем, к теме. Это, конечно, не единственные варианты. Вот целый список: https://github.com/dbohdan/classless-css

Мыслите шире!

#css #framework

#библиотека дня

Скучаете ли вы по тому времени, когда новые JS UI- и не очень фреймворки появлялись каждый день?

Тогда я вам принёс!

https://corset.dev/

Вы ведь так хотели объявлять UI-взаимодействия в CSS-стиле, правда?

Куда уж декларативней…

Но на самом деле, это весьма интересный концепт связывания (биндинга) DOM и действий.

#css #js #ui #framework

#библиотека дня

Если есть понятие семантики, где элементы HTML представляют собой то, чем являются, то может, классы в CSS не так уж и нужны?

И таки да!

Парни из https://simplecss.org/ и https://native-elements.dev/ так и считают. Можно построить вполне себе полноценный сайт, не написав ни единого класса.

Как тебе такое, тейлвинд?)

Конечно, получается не то чтобы сверхсложное что-то. Но для среднего блога вполне можно. Сайт этого канала был на нейтивах, но я забыл оплатить домен и godaddy меня поимел.

Впрочем, к теме. Это, конечно, не единственные варианты. Вот целый список: https://github.com/dbohdan/classless-css

Мыслите шире, котаны!

#css #framework

#инструмент дня

Итак, перед вами стоит задача сделать встраиваемый виджет. Любого рода, от плагина дашборда с показателями продаж до интерактивного баннера. Писать нужно быстро, эффективно, поддерживаемо. И чтоб размер поменьше.

Ванильный JS — мелкий размер, но поддерживаемо — вряд ли. React — один только DOM-слой займёт 40kB, Preact — 4kB, уже очень хорошо, Svelte свернётся в 1.6kB, но учить птичий язык шаблонов — это надо иметь причину...

И тут выходит VanJS со своими 0.9kB: https://vanjs.org/

Сразу пример кода:

const Hello = () => div(
  p("Hello"),
  ul(
    li("World"),
    li(a({href: "https://vanjs.org/"}, "VanJS")),
  ),
)

van.add(document.body, Hello())

Максимально нативно и понятно, не правда ли? И логика построения UI сохраняется. Есть управление стейтом, поддержка TS. Не нужно никакой сборки, садись пиши. Прекрасная документация, включая примеры от сообщества!

А его шаблонный движок вообще может быть использован отдельно. Назвали Mini-Van :)

#van #framework #js

#инструмент дня

Итак, перед вами стоит задача сделать встраиваемый виджет. Любого рода, от плагина дашборда с показателями продаж до интерактивного баннера. Писать нужно быстро, эффективно, поддерживаемо. И чтоб размер поменьше.

Ванильный JS — мелкий размер, но поддерживаемо — вряд ли. React — один только DOM-слой займёт 40kB, Preact — 4kB, уже очень хорошо, Svelte свернётся в 1.6kB, но учить птичий язык шаблонов — это надо иметь причину...

И тут выходит VanJS со своими 0.9kB: https://vanjs.org/

Сразу пример кода:

const Hello = () => div(
p("Hello"),
ul(
li("World"),
li(a({href: "https://vanjs.org/"}, "VanJS")),
),
)

van.add(document.body, Hello())


Максимально нативно и понятно, не правда ли? И логика построения UI сохраняется. Есть управление стейтом, поддержка TS. Не нужно никакой сборки, садись пиши. Прекрасная документация, включая примеры от сообщества!

А его шаблонный движок вообще может быть использован отдельно. Назвали Mini-Van :)

#van #framework #js #бородач

#инструмент дня

React Compiler, говорите...

А что если я скажу вам, что есть инструмент, конвертирующий ваши JSX-компоненты во... во все остальные?

Буквально: JSX/Svelte в: React, Svelte, Vue, Angular, Qwik, Lit, Solid, Preact...

Давайте просто сразу дам ссылку на песочницу: https://mitosis.builder.io/playground/

Если уж и не для практического применения, но если вдруг надо срочно пересесть на другой фреймворк — то понять принципы можно с лёгкостью.

Знаешь JSX или Svelte — пишешь на всех :)

#framework #tool

#инструмент дня

Примерно пять раз в секунду где-то в мире очередному разработчику приходит в голову идея: «А что если я этот виджет сделаю независимо от основного приложения, на каком-нибудь миниатюрном фреймворке, чтобы было модно, молодежно переносимо?»

Когда такая идея приходила мне, я взял Preact, а потом Van. А тут недавно на собеседовании кандидат рассказал, что тоже сталкивался с подобной задачей и решил её через µhtml.

Микрохатээмэль

Сразу ссылка: https://github.com/WebReflection/uhtml

JSX там нет, вся работа через шаблонные литералы. Что, впрочем, выглядит вполне нормально:

import { render, html, signal, detach } from 'uhtml/preactive';

const count = signal(0);

render(document.body, () => html`
  <button onclick=${() => { count.value++ }}>
    Clicks: ${count.value}
  </button>
`);

// stop reacting to signals in the future
setTimeout(() => {
  detach(document.body);
}, 10000);

И да, ваши глаза вас не обманывают: сигналы! И SSR.

В общем, глаза кандидата так светились, что мне тоже надо будет попробовать.

А ваши варианты, котаны?

#uhtml #js #framework

#инструмент дня

React Compiler, говорите...

А что если я скажу вам, что есть инструмент, конвертирующий ваши JSX-компоненты во... во все остальные?

Буквально: JSX/Svelte в: React, Svelte, Vue, Angular, Qwik, Lit, Solid, Preact...

Давайте просто сразу дам ссылку на песочницу: https://mitosis.builder.io/playground/

Если уж и не для практического применения, но если вдруг надо срочно пересесть на другой фреймворк — то понять принципы можно с лёгкостью.

Знаешь JSX или Svelte — пишешь на всех :)

#framework #tool #бородач