хм, а как же Gatsby, Next.js?
если бы выбирали стек технологий под такие задачи — что бы Вы выбрали?
Svelte? или точечный кастом?
Лично мне хочется создать удобный инструмент, React — не самоцель
React мы выбрали по следующим причинам:
1. Популярен и много модулей, которые мы позволяем использовать в самой системе (через редактор кода компонента).
2. Лендинги и блоги все-таки люди создают — примеры выше, они как минимум популярны
3. React — самое удобное решение для разработки такого рода продукта: компоненты модульны, есть иструменты для сборки сайтов, есть hydrate, который тоже можно оптимизировать (монтировать только те ноды, которые видны, например)
Спасибо за фидбек.
Мы идем от малого к большему. На данный момент мы тестируем проект: лендинги, блоги и простые приложения сейчас делать удобно. Наш сайт, документация (всё кроме самого конструктора) реализовано на Quarkly.
Также у нас есть пример небольшого приложения, которое сделал наш дизайнер: sad-easley-31c9dd.netlify.app
Приветствую, спасибо за комментарий.
У нас есть такая идея в планах. В будущем мы планируем развивать интерактивный режим: создание анимаций, обработка событий и переиспользуемая логика.
Пока мы решили сосредоточиться только на React, но в будущем, возможно, мы сделаем возможность разрабатывать на любом фреймворке.
Насчет простого html/css/js – его можно описывать средствами самого React'a.
Привет, всё верно. В Quarkly можно писать код – свой компонент. В результате вы получаете виджет, который можно редактировать интерактивно.
Тут есть пример, как это сделать: www.youtube.com/watch?v=F0SS7xuI2ug
Медиа-выражения конструируются относительно абстракции брейкпоинт из темы.
Для работы достаточно написать префикс (имя брейкпоинта) к любому CSS свойству
Пример:
<Text md-color="red">Some text</Text>
В данном примере применяется свойство color на брейкпоинте с именем md.
Спасибо за комментарий и наводку)
Про данный проект я раньше не слышал, сейчас ознакомился.
reshadow выглядит как очень интересный и стоящий проект — он решает одну из основных проблем концепции JSS — производительность.
Я изучу возможность замены styled-components (atomize — обертка над SC или Emotion) на reshadow, это бы нам очень помогло.
Но отказаться от концепции атомарного CSS мы не можем.
Без сомнения, на данный момент трудно найти инструментарий в виде линтеров, токенизаторов для редакторов кода, но все впереди :)
А плюсов конкретно под нашу задачу более чем достаточно :)
Тут все зависит от того, что конкретно вы имеете в виду под jss.
Если вопрос про то, почему бы просто не использовать styled-components или emotion, то для решения нашей задачи (создание виджетов с возможностью интерактивного редактирования) концепция атомарного CSS подходит больше.
Виджеты никогда не будут зависеть от замыкания, их можно будет свободно перемещать, как между собой, так и между страницами проекта, да что уж, можно просто скопировать код и переместить в другой проект.
А если вопрос про то, почему мы используем именно styled-components, а не библиотеку JSS(https://github.com/cssinjs/jss), то тут дело в том, что данный проект плохо поддерживают, я более года назад создавал issue, на него так ответа и не получил.
если бы выбирали стек технологий под такие задачи — что бы Вы выбрали?
Svelte? или точечный кастом?
Лично мне хочется создать удобный инструмент, React — не самоцель
React мы выбрали по следующим причинам:
1. Популярен и много модулей, которые мы позволяем использовать в самой системе (через редактор кода компонента).
2. Лендинги и блоги все-таки люди создают — примеры выше, они как минимум популярны
3. React — самое удобное решение для разработки такого рода продукта: компоненты модульны, есть иструменты для сборки сайтов, есть hydrate, который тоже можно оптимизировать (монтировать только те ноды, которые видны, например)
И спасибо за комментарий, Вадим!
Мы идем от малого к большему. На данный момент мы тестируем проект: лендинги, блоги и простые приложения сейчас делать удобно. Наш сайт, документация (всё кроме самого конструктора) реализовано на Quarkly.
Также у нас есть пример небольшого приложения, которое сделал наш дизайнер: sad-easley-31c9dd.netlify.app
У нас есть такая идея в планах. В будущем мы планируем развивать интерактивный режим: создание анимаций, обработка событий и переиспользуемая логика.
Насчет простого html/css/js – его можно описывать средствами самого React'a.
Тут есть пример, как это сделать: www.youtube.com/watch?v=F0SS7xuI2ug
Медиа-выражения конструируются относительно абстракции брейкпоинт из темы.
Для работы достаточно написать префикс (имя брейкпоинта) к любому CSS свойству
Пример:
В данном примере применяется свойство color на брейкпоинте с именем md.
Пример работы здесь по ссылке (измените размер окна превью, чтобы увидеть отличие) codesandbox.io/s/atomize-demo-skhjw?file=/src/Example.js
Про данный проект я раньше не слышал, сейчас ознакомился.
reshadow выглядит как очень интересный и стоящий проект — он решает одну из основных проблем концепции JSS — производительность.
Я изучу возможность замены styled-components (atomize — обертка над SC или Emotion) на reshadow, это бы нам очень помогло.
Но отказаться от концепции атомарного CSS мы не можем.
Без сомнения, на данный момент трудно найти инструментарий в виде линтеров, токенизаторов для редакторов кода, но все впереди :)
А плюсов конкретно под нашу задачу более чем достаточно :)
Тут все зависит от того, что конкретно вы имеете в виду под jss.
Если вопрос про то, почему бы просто не использовать styled-components или emotion, то для решения нашей задачи (создание виджетов с возможностью интерактивного редактирования) концепция атомарного CSS подходит больше.
Виджеты никогда не будут зависеть от замыкания, их можно будет свободно перемещать, как между собой, так и между страницами проекта, да что уж, можно просто скопировать код и переместить в другой проект.
А если вопрос про то, почему мы используем именно styled-components, а не библиотеку JSS(https://github.com/cssinjs/jss), то тут дело в том, что данный проект плохо поддерживают, я более года назад создавал issue, на него так ответа и не получил.
Задача абстракции effects (в контексте atomize) — предоставлять возможность атомарно описывать какие-либо составные свойства.
Конфигурация вида
позволяет описать стили на состояние наведения
В результате получится такой CSS:
Возможно указать любой CSS-селектор, :hover лишь частный случай.
На счет того, является ли сайд эффектом такое поведение — думаю, что нет, т.к сама функция активации CSS является чистой.